/*
Theme Name: Material Agency
Template: material-ai
Author: Nayra Themes
Description: Material Agency is a child theme of Material AI. It replaces the header and the main banner with the agency layout from Material AI Pro — a dark top bar above a floating white navigation bar, and a hero banner that sits on a statistics plinth — and recolours the palette in green and deep navy. Everything else, including every template, pattern and style variation, comes from Material AI.
Version: 1.0
Requires at least: 6.1
Tested up to: 7.1
Requires PHP: 5.8
License: GPLv3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: material-agency
Tags: blog, portfolio, entertainment, one-column, two-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-width-template, style-variations, template-editing, translation-ready, wide-blocks
*/

/* The rules below are the header and hero from Material AI Pro, carried over
   unchanged so the design matches that theme exactly rather than being
   rebuilt by hand. Every colour resolves through the theme.json palette —
   there is not one colour literal here — so the style variations that ship
   with Material AI still recolour all of it. */

.materialai-button-circle-primary{
	--circle-bg:var(--wp--preset--color--primary);
	--circle-color: var(--white);
}

.materialai-button-circle-secondary{
	--circle-bg:var(--wp--preset--color--secondary);
	--circle-color: var(--white);
}

.materialai-badge p:first-child{
	width:34px;
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:var(--wp--preset--color--primary);
	color:var(--white);
	margin:0;
	font-weight:700;
}

.materialai-badge{
	position: relative;
	display: inline-flex;
	align-items:left;
	gap: 7px;
	padding: 7px 14px 7px 7px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	width: fit-content;
	z-index: 1;
}

.materialai-badge::before{
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: inherit;
	pointer-events: none;
}

.progress{
	width:72px;
	height:72px;
	border-radius:50%;
	display:grid;
	place-items:center;
	position:relative;
}

.progress::before{
	content:'';
	position:absolute;
	width:55px;
	height:55px;
	background:var(--wp--preset--color--secondary);
	border-radius:50%;
}

.progress p{
	position:relative;
}

.progress{
	background:
	conic-gradient(
	var(--wp--preset--color--primary) var(--progress),
	var(--wp--preset--color--secondary) 0
	);
}

:root{
	--mai-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--mai-gutter: clamp(14px, 2.1vw, 40px);
	/* The rail the top bar, the navigation bar and the statistics panel all
	   ride comes from the theme's own container rather than a number kept
	   here, so the header and banner line up with the rest of the site — and
	   follow it if the width is changed under Styles -> Layout. WordPress
	   publishes it on :root from theme.json. */
	--mai-shell: var(--wp--style--global--wide-size, 1200px);
	/* The wider of the two rails: the full page less its gutter. The dark top
	   bar and the hero card ride this one, the navigation bar, the banner copy
	   and the statistics panel ride --mai-shell inside it. */
	--mai-page: calc(100% - 2 * var(--mai-gutter));
	--mai-navbar-pad: 30px;
	/* The reference header scales with the window rather than holding one
	   size: its bar measures 88px at 1422px wide and 120px at 1920px, and its
	   round buttons 40px and 55px. These two curves pass through both. */
	--mai-navbar-h: clamp(84px, 6.25vw, 120px);
	--mai-disc: clamp(40px, 2.86vw, 55px);
	/* How far the hero's top edge sits below the top bar. The navigation bar
	   spans that gap, so its first 30px sit on the page and the rest overlaps
	   the artwork. */
	/* The hero is held clear of the top bar by about a quarter of the bar's
	   height: measured 21px on a 1432px screen and 32px at 1920, against bar
	   heights of 88 and 120. Tying it to the bar keeps the two in step. */
	--mai-hero-drop: calc(var(--mai-navbar-h) * 0.26);
	--mai-shoulder: 30px;
	/* The width of the tabs notched into the banner's edges. The copy keeps
	   clear of them by this much on each side. */
	--mai-tab-w: 79px;
	--mai-hero-plinth: 5px;
	--mai-plinth-fillet: 21px;
}

.materialai-header-02{
	position: relative;
	z-index: 30;
}

/* The dark bar is inset by the page gutter, the same one the hero card uses,
   so the two line up down the left and right edges of the page — in the
   reference the bar starts at 40px and the hero at 43px.

   The inset is a margin on the bar itself rather than padding on the wrapper
   around it: that wrapper is an alignfull block, and on a live site the
   layout rules that come with alignfull can cancel padding put there, which
   left the bar running the full width of the window. */
.materialai-topbar-02__gutter{
	padding-inline: 0;
}

.materialai-topbar-02 .materialai-topbar-02__gutter > .wp-block-group{
	/* The bar rides the page gutter, wider than the navigation bar below it,
	   as the design has it: the container holds the navigation bar's shape and
	   the banner's copy, not the full-width bands behind them. Its own padding
	   still puts the promo and the links in line with the logo and the menu. */
	width: var(--mai-page);
	max-width: none;
	margin-inline: auto;
	padding-inline: var(--mai-navbar-pad);
}

.materialai-topbar-02 .materialai-topbar-02__row{
	width: min(var(--mai-shell), 100%);
	margin-inline: auto;
	
	padding-inline: var(--mai-navbar-pad);
	gap: 14px 24px;
	min-height: 32px;
}

.materialai-topbar-02__promo{
	gap: 6px 12px;
}

.materialai-topbar-02__promo p,
.materialai-topbar-02__meta p{
	margin: 0;
}

.materialai-topbar-02__tag{
	line-height: 1.75;
}

.materialai-topbar-02__more a,
.materialai-topbar-02__meta a{
	color: inherit;
	text-decoration: none;
	transition: color .3s ease;
}

.materialai-topbar-02__meta{
	gap: 10px 18px;
}

.materialai-topbar-02__item{
	display: inline-flex;
	align-items: center;
}

.materialai-topbar-02 .materialai-topbar-02__item .wp-block-icon{
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}

.materialai-topbar-02 .materialai-topbar-02__item .wp-block-icon svg{
	display: block;
	width: 100%;
	height: auto;
}

.materialai-topbar-02__item.is-divided{
	padding-left: 20px;
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--light-color) 24%, transparent);
}

.materialai-topbar-02__item:hover a{
	color: var(--wp--preset--color--primary);
}

.materialai-topbar-02__more .wp-block-icon{
	transition: transform .3s ease;
}

.materialai-topbar-02__more:hover .wp-block-icon{
	transform: translateX(3px);
}

.materialai-nav-wrap-02{
	display: flex;
	justify-content: center;
	padding: 0 var(--mai-gutter);
}

.materialai-navbar-02{
	position: relative;
	width: min(var(--mai-shell), 100%);
	min-height: var(--mai-navbar-h);
	gap: 24px;
	padding: 18px var(--mai-navbar-pad);
	border-radius: 0 0 10px 10px;
	background: var(--white);
	
	box-shadow: 0 22px 38px -22px rgba(0, 0, 0, .26);
}

/* The little concave curves that join the bar to the hero's top edge.

   They belong at the HERO's top edge, not the bar's: the bar starts higher
   up, inside the white band under the top bar, and a white curve drawn there
   is white on white and cannot be seen. Dropping them by the same amount the
   hero is held clear puts them against the artwork, where they read. */
.materialai-navbar-02::before,
.materialai-navbar-02::after{
	content: "";
	position: absolute;
	top: var(--mai-hero-drop);
	width: var(--mai-shoulder);
	height: var(--mai-shoulder);
	pointer-events: none;
}

.materialai-navbar-02::before{
	left: calc(-1 * var(--mai-shoulder));
	background: radial-gradient(
		circle at 0 100%,
		transparent var(--mai-shoulder),
		var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)
	);
}

.materialai-navbar-02::after{
	right: calc(-1 * var(--mai-shoulder));
	background: radial-gradient(
		circle at 100% 100%,
		transparent var(--mai-shoulder),
		var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)
	);
}

.materialai-branding-02{
	flex: 0 0 auto;
}

.materialai-branding-02 .wp-block-site-logo img{
	height: auto;
	max-height: 48px;
	width: auto;
}

.materialai-branding-02 .site-branding-fallback .wp-block-site-title{
	margin: 0;
	line-height: 1.1;
	/* A site name written as one word has nowhere to break, so the bar cannot
	   give it any less room however narrow the screen gets, and it runs on
	   under the cart. Allowing a break anywhere lets it give way instead. */
	overflow-wrap: anywhere;
}

.materialai-branding-02 .site-branding-fallback .wp-block-site-title a{
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.materialai-branding-02 .site-branding-fallback .wp-block-site-tagline{
	margin: 0;
	font-size: 13px;
	color: var(--wp--preset--color--foreground);
}

.materialai-navbar-02 .wp-block-site-logo:not(:empty) + .site-branding-fallback{
	display: none;
}

.materialai-nav-02{
	flex: 1 1 auto;
}

.materialai-navbar-02 .wp-block-navigation{
	gap: 8px 34px;
}

.materialai-navbar-02 .wp-block-navigation .wp-block-navigation-item__content{
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	transition: color .3s ease;
}

.materialai-navbar-02 .wp-block-navigation .wp-block-navigation-item__content:hover,
.materialai-navbar-02 .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{
	color: var(--wp--preset--color--primary);
}

.materialai-navbar-02 .wp-block-navigation__submenu-container{
	border: 0;
	border-radius: 12px;
	padding: 8px 0;
	background: var(--white);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .14);
}

.materialai-navbar-02 .wp-block-navigation__responsive-container-open,
.materialai-navbar-02 .wp-block-navigation__responsive-container-close{
	color: var(--wp--preset--color--secondary);
}

.materialai-actions-02{
	flex: 0 0 auto;
	gap: 16px;
}

/* Search, then the cart, then the call to action — set here rather than left
   to the markup, because the cart is not part of this pattern: the parent
   inserts its own after the search form, and WooCommerce can insert one of
   its own through Block Hooks somewhere else again.

   Each item is matched twice: once on its own class, and once on what it
   contains. Naming the classes alone was not enough — a cart that arrives
   inside a wrapper of its own is still a child of this group, but carries
   none of those classes on the child itself, so it kept its place at the
   front. Keying on the contents as well orders it however it is wrapped. */
.materialai-actions-02 .search-btn-02,
.materialai-actions-02 .wp-block-search{
	order: 1;
}

.materialai-actions-02 .materialai-minicart-02,
.materialai-actions-02 .materialai-header-minicart,
.materialai-actions-02 .wp-block-woocommerce-mini-cart,
.materialai-actions-02 *:has(> .wc-block-mini-cart__button){
	order: 2;
}

.materialai-actions-02 .wp-block-buttons{
	order: 3;
}

/* A wrapper holding just one of the two is ordered as that one, however deep
   its contents sit. The pair of :not()s keeps these apart from the rule below,
   which is for a wrapper holding both. */
.materialai-actions-02 > *:has(.wp-block-search__button):not(:has(.wc-block-mini-cart__button)){
	order: 1;
}

.materialai-actions-02 > *:has(.wc-block-mini-cart__button):not(:has(.wp-block-search__button)){
	order: 2;
}

/* If the two discs arrive inside a row of their own rather than directly in
   the action group, that row is the flex container they belong to, so it has
   to lay them out as one. Without this the order above is set on the pair but
   applied by a parent that is not a flex container, and they keep the order
   they were written in. */
.materialai-actions-02 > *:has(.wc-block-mini-cart__button):has(.wp-block-search__button){
	display: flex;
	align-items: center;
	gap: 16px;
	order: 2;
}

/* The heading is broken after "Render" in the markup so the second line reads
   "With Our Ai Power", as the design has it. That break holds down to 470px;
   below it the line has to wrap on its own as well, and keeping both leaves
   "Render" stranded on a line of its own, so the forced one steps aside. */
@media (max-width: 459px){
	.materialai-hero2-title br{
		display: none;
	}
}

@media (max-width: 389px){
	.materialai-topbar-02__copy p,
	.materialai-topbar-02__more p{
		font-size: clamp(11px, 3.3vw, 14px) !important;
	}

	.materialai-topbar-02__copy{
		gap: 8px;
	}
}

@media (min-width: 1025px) and (max-width: 1279px){
	.materialai-header-02 .materialai-navbar-02 .wp-block-buttons{
		display: none;
	}

	.materialai-header-02 .materialai-navbar-02 .wp-block-navigation{
		gap: 8px 16px;
	}
}

.materialai-navbar-02 .site-branding-fallback .wp-block-site-title{
	font-size: 24px;
}

.materialai-sticky-header .materialai-header.is-stuck .materialai-navbar-02{
	border-radius: 0 0 10px 10px;
	box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .4);
}

.materialai-sticky-header .materialai-header.is-stuck .materialai-topbar-02,
.materialai-sticky-header .materialai-header.is-stuck .materialai-topbar{
	visibility: hidden;
	pointer-events: none;
}

.materialai-sticky-header .materialai-header.is-stuck:has(.is-menu-open) .materialai-topbar-02,
.materialai-sticky-header .materialai-header.is-stuck:has(.is-menu-open) .materialai-topbar{
	visibility: visible;
	pointer-events: auto;
}

@media (min-width: 601px) and (max-width: 1024px){
	.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-open:not(.always-shown){
		display: flex;
	}

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

	.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
		display: block;
	}
}

.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-open{
	position: relative;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	/* Three plain rules of equal length, with nothing drawn behind them, as
	   the design has it. It used to be a filled green tile with a short middle
	   rule, which stood out next to the cart disc beside it rather than
	   sitting with it. Tracing the reference gives three 15px rules 5px apart
	   on a 23px cart disc; these keep those proportions at the 46px disc this
	   theme uses on a phone. */
	background-color: transparent;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 30px 2px, 30px 2px, 30px 2px;
	background-position: 8px 13px, 8px 22px, 8px 31px;
	background-repeat: no-repeat;
	/* Navy at rest and green under the pointer, the same way round as the
	   cart and the search button. */
	color: var(--wp--preset--color--secondary);
	transition: color .3s ease;
}

.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-open:hover,
.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-open:focus-visible{
	color: var(--wp--preset--color--primary);
}

.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-open svg{
	display: none;
}

.materialai-header-02 .wp-block-navigation__responsive-container.is-menu-open{
	position: fixed;
	inset: 0;
	display: flex;
	
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-end;
	padding: 0;
	overflow: visible;
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 45%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.materialai-header-02 .is-menu-open .wp-block-navigation__responsive-close{
	position: relative;
	width: min(320px, 80vw);
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-right: 4px solid var(--wp--preset--color--primary);
	background:
		radial-gradient(110% 70% at 85% 12%, color-mix(in srgb, var(--wp--preset--color--primary) 38%, transparent), transparent 68%),
		linear-gradient(200deg, color-mix(in srgb, var(--wp--preset--color--primary) 16%, var(--wp--preset--color--secondary)) 0%, var(--wp--preset--color--secondary) 62%);
}

.materialai-header-02 .is-menu-open .wp-block-navigation__responsive-dialog{
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.materialai-header-02 .mai-menu-head,
.materialai-header-02 .mai-submenu-toggle{
	display: none;
}

.materialai-header-02 .is-menu-open .mai-menu-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
	padding: 22px 20px 20px;
	color: var(--wp--preset--color--light-color);
}

.materialai-header-02 .is-menu-open .mai-menu-head .wp-block-site-logo img,
.materialai-header-02 .is-menu-open .mai-menu-head img{
	max-width: 150px;
	height: auto;
}

.materialai-header-02 .is-menu-open .mai-menu-head .wp-block-site-title a{
	color: var(--wp--preset--color--light-color);
	font-size: 22px;
	font-weight: 700;
	text-decoration: none;
}

.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-close{
	position: static;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	transform: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--light-color);
}

.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-close svg{
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation__responsive-container-content{
	display: block;
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	margin: 0;
	
	padding: 0 0 28px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.materialai-header-02 .is-menu-open .wp-block-navigation__container{
	display: block;
	gap: 0;
	padding: 0;
}

.materialai-header-02 .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 40px);
	margin: 0 20px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--light-color) 16%, transparent);
}

.materialai-header-02 .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child{
	border-bottom: 0;
}

.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content{
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	color: var(--wp--preset--color--light-color);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.materialai-header-02 .materialai-nav-02 .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.materialai-header-02 .materialai-nav-02 .is-menu-open .current_page_item > .wp-block-navigation-item__content,
.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content:hover,
.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content:focus{
	color: var(--wp--preset--color--primary);
}

.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-icon{
	display: none;
}

.materialai-header-02 .is-menu-open .mai-submenu-toggle{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	align-self: stretch;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--light-color);
	cursor: pointer;
}

.materialai-header-02 .is-menu-open .mai-submenu-toggle::before{
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform .25s ease;
}

.materialai-header-02 .is-menu-open .mai-submenu-toggle[aria-expanded="true"]::before{
	transform: rotate(180deg);
}

.materialai-header-02 .is-menu-open .mai-submenu-toggle:hover,
.materialai-header-02 .is-menu-open .mai-submenu-toggle:focus-visible{
	color: var(--wp--preset--color--primary);
}

.materialai-header-02 .materialai-nav-02.wp-block-navigation .is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container{
	position: static;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	
	padding-inline: 0 !important;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent !important;
	opacity: 1;
	visibility: visible;
	
	max-height: 0;
	padding-block: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}

.materialai-header-02 .materialai-nav-02.wp-block-navigation .is-menu-open .wp-block-navigation-item.mai-open > .wp-block-navigation__submenu-container{
	max-height: 70vh;
	padding-block: 0 10px;
}

@media (prefers-reduced-motion: reduce){
	.materialai-header-02 .materialai-nav-02.wp-block-navigation .is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container{
		transition: none;
	}
}

.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item{
	padding: 0;
	margin: 0;
	border: 0;
}

.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
	padding: 8px 0 8px 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: color-mix(in srgb, var(--wp--preset--color--light-color) 82%, transparent);
}.materialai-minicart-02,
.materialai-navbar-02 .materialai-header-minicart,
.materialai-navbar-02 .wp-block-woocommerce-mini-cart{
	display: flex;
	align-items: center;
	visibility: visible !important;
}.materialai-minicart-02 .wc-block-mini-cart__button,
.materialai-navbar-02 .materialai-header-minicart .wc-block-mini-cart__button,
.materialai-navbar-02 .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mai-disc);
	height: var(--mai-disc);
	min-width: var(--mai-disc);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	color: var(--white);
	cursor: pointer;
	opacity: 1;
	transition: background-color .3s ease;
}.materialai-minicart-02 .wc-block-mini-cart__button:hover,
.materialai-navbar-02 .materialai-header-minicart .wc-block-mini-cart__button:hover,
.materialai-navbar-02 .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button:hover,
.materialai-minicart-02 .wc-block-mini-cart__button:focus,
.materialai-navbar-02 .materialai-header-minicart .wc-block-mini-cart__button:focus,
.materialai-navbar-02 .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button:focus{
	background: var(--wp--preset--color--primary);
	color: var(--white);
	opacity: 1;
	transform: none;
}.materialai-minicart-02 .wc-block-mini-cart__quantity-badge,
.materialai-navbar-02 .materialai-header-minicart .wc-block-mini-cart__quantity-badge,
.materialai-navbar-02 .wp-block-woocommerce-mini-cart .wc-block-mini-cart__quantity-badge{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}.materialai-minicart-02 .wc-block-mini-cart__icon,
.materialai-navbar-02 .materialai-header-minicart .wc-block-mini-cart__icon,
.materialai-navbar-02 .wp-block-woocommerce-mini-cart .wc-block-mini-cart__icon{
	width: 22px;
	height: 22px;
	fill: currentColor;
}.materialai-minicart-02 .wc-block-mini-cart__amount,
.materialai-navbar-02 .materialai-header-minicart .wc-block-mini-cart__amount,
.materialai-navbar-02 .wp-block-woocommerce-mini-cart .wc-block-mini-cart__amount{
	display: none;
}
/* The count on the cart: a green pill with the number in navy.
   The last two selectors do not name the count's own class. The parent styles
   it as .wc-block-mini-cart__badge and so did this theme, but on a cart that
   WooCommerce inserts itself neither rule reached it — the number showed up
   bare, with no pill behind it — so the count is matched by where it sits as
   well, as the only child of the badge wrapper that is not the cart glyph.
   Scoped through .materialai-header-02 so it still out-ranks the parent's own
   two-class rule in assets/css/woocommerce.css, which loads after this file. */
.materialai-minicart-02 .wc-block-mini-cart__badge,
.materialai-navbar-02 .materialai-header-minicart .wc-block-mini-cart__badge,
.materialai-navbar-02 .wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge,
.materialai-header-02 .materialai-navbar-02 .wc-block-mini-cart__badge,
.materialai-header-02 .materialai-navbar-02 .wc-block-mini-cart__quantity-badge > :not(svg):not(.wc-block-mini-cart__icon){
	position: absolute;
	top: -2px;
	right: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 21px;
	height: 21px;
	margin: 0;
	padding: 0 5px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	/* A white ring separates the pill from the navy disc it sits on. Drawn as
	   a shadow rather than a border so it does not add to the pill's size and
	   follows its rounded ends on its own. */
	box-shadow: 0 0 0 2px var(--wp--preset--color--light-color);
}

.materialai-navbar-02 .wp-block-woocommerce-customer-account{
	display: none;
}

.materialai-actions-02 .search-btn-02 .wp-block-search__inside-wrapper{
	border: 0;
	padding: 0;
}

.materialai-actions-02 .search-btn-02 .wp-block-search__button{
	width: var(--mai-disc);
	height: var(--mai-disc);
	min-width: var(--mai-disc);
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Navy at rest, green under the pointer — the same way round as the cart
	   beside it, so the pair reads as one set of controls. */
	background: var(--wp--preset--color--secondary);
	color: var(--white);
	transition: background-color .3s ease;
}

.materialai-actions-02 .search-btn-02 .wp-block-search__button svg{
	width: 22px;
	height: 22px;
	fill: var(--white);
	transition: fill .3s ease;
}

.materialai-actions-02 .search-btn-02 .wp-block-search__button:hover,
.materialai-actions-02 .search-btn-02 .wp-block-search__button:focus{
	background: var(--wp--preset--color--primary);
}

.materialai-btn-started-02 .wp-block-button__link{
	white-space: nowrap;
}

/* The hero pills and the header's call to action are different heights. Each
   sets only that one number; the pill reads it for its own height and derives
   the disc, the padding and the arrow from it, so there is nothing left here
   to fall out of step. */
.materialai-hero2-buttons .materialai-btn-ring-02 .wp-block-button__link{
	/* The reference measures the hero pill at 41px on a 1422px screen and 55px
	   at 1920px, which is the same curve as the round buttons — so the pill
	   takes it directly. It used to come off by 12 to make room for a ring
	   drawn outside the box at rest; with that ring gone the subtraction was
	   left behind, and it was squeezing the pill to 28px between 768px and
	   1024px — shorter there than on a phone. */
	--mai-pill-h: var(--mai-disc);
}

.materialai-navbar-02 .materialai-btn-started-02 .wp-block-button__link{
	--mai-pill-h: var(--mai-disc);
	white-space: nowrap;
}

/* The header is often saved into the database from the Site Editor, and a
   saved copy keeps whichever colour the pattern carried at the time. Setting
   it here means the call to action reads in navy on its green pill whether
   the header comes from the pattern or from a saved template part. */
.materialai-navbar-02 .materialai-btn-started-02 .wp-block-button__link,
.materialai-navbar-02 .materialai-btn-started-02 .wp-block-button__link:visited{
	color: var(--wp--preset--color--light-color);
}

.materialai-btn-arrow .wp-block-button__link{
	position: relative;
	display: inline-flex;
	align-items: center;
	/* Each pill states its outer height and its border once, here, and the
	   disc, the room reserved for it and the arrow's position are all read off
	   those two. Tracing the reference shows the disc is not a size of its own:
	   it is the pill's right-hand end cap, so its diameter is exactly the
	   pill's inner height and its edge is the pill's edge. Writing it as a
	   number instead is what let it grow past the pill. */
	--mai-pill-bd: 0px;
	--mai-pill-h: var(--mai-disc);
	--mai-disc-size: calc(var(--mai-pill-h) - 2 * var(--mai-pill-bd));
	--mai-arrow-size: 18px;
	--mai-arrow-inset: clamp(13px, 1.15vw, 22px);
	/* The reference's pills track its round buttons: 41px tall at 1422px wide
	   and 55px at 1920px. Their padding and label scale with them, which is
	   what keeps the pill's width in proportion rather than fixed. */
	min-height: var(--mai-pill-h);
	padding-block: 0;
	padding-left: clamp(16px, 1.45vw, 28px);
	/* The arrow sat at a fixed inset while this padding scaled with the
	   window, so the two drifted apart and the glyph crossed into the label —
	   by 4.5px at 1422px and 12px at 1100px. The padding is now made of the
	   arrow's inset, the arrow, and the gap left after it, so the label
	   always clears it. */
	padding-right: calc(
		var(--mai-arrow-inset) + var(--mai-arrow-size) + clamp(7px, 0.65vw, 13px)
	);
	border-radius: 999px;
	font-size: clamp(14px, 0.94vw, 18px);
	font-weight: 700;
	line-height: 1.2;
	transition: all .3s ease;
}

.materialai-btn-arrow .wp-block-button__link::after{
	content: "";
	position: absolute;
	top: 50%;
	right: var(--mai-arrow-inset);
	width: var(--mai-arrow-size);
	height: var(--mai-arrow-size);
	transform: translateY(-50%);
	background-color: var(--arrow-color, var(--white));
	-webkit-mask: var(--mai-arrow) center / contain no-repeat;
	mask: var(--mai-arrow) center / contain no-repeat;
	transition: transform .3s ease;
}

.materialai-btn-arrow .wp-block-button__link:hover::after,
.materialai-btn-arrow .wp-block-button__link:focus::after{
	transform: translateY(-50%) translateX(4px);
}

.materialai-btn-disc .wp-block-button__link{
	padding-right: calc(var(--mai-disc-size) + clamp(8px, 0.8vw, 15px));
}

/* Flush into the right end: the disc fills the pill's inner height and its
   right edge meets the pill's, so the border carries on round it as one
   shape. Same colour on both, so the join does not show. */
.materialai-btn-disc .wp-block-button__link::before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	/* Measured off the pill itself rather than worked out from its height and
	   border: browsers round a fractional border to whole pixels, and doing
	   the arithmetic here left the disc half a pixel short of the cap — a
	   navy hairline between the two. A percentage height resolves against the
	   padding box as actually drawn, so the two cannot drift apart. */
	height: 100%;
	width: auto;
	aspect-ratio: 1;
	min-width: var(--mai-disc-size);
	border-radius: 50%;
	background: var(--circle-bg, var(--wp--preset--color--primary));
	transition: background-color .3s ease;
}

/* Centred in the disc, wherever the disc's size lands. */
.materialai-btn-disc .wp-block-button__link::after{
	right: calc((var(--mai-disc-size) - var(--mai-arrow-size)) / 2);
	background-color: var(--circle-color, var(--white));
}

/* The reference has a clean green border and nothing outside it — sampling
   the rows above and below the pill finds only the photograph, no tint. So
   the ring rests transparent and against the border, and blooms outward on
   hover: the resting state matches the design and the motion is earned. */
.materialai-btn-ring-02 .wp-block-button__link{
	/* Sampling across the reference's border puts it at about 2.2px on a 41px
	   pill — one full green pixel with a 74% and a 47% one either side. A flat
	   3px was a third heavier than that at the size the reference was captured,
	   while being right at 1920px, so the stroke tracks the pill instead:
	   2.2px at 40px, 3.1px at 55px. */
	--mai-pill-bd: max(2px, calc(var(--mai-pill-h) / 18));
	border: var(--mai-pill-bd) solid var(--wp--preset--color--primary);
	outline: 2px solid transparent;
	outline-offset: 0;
	animation: materialai-btn-ripple 2s linear infinite;
	transition: outline-color .35s ease, outline-offset .35s ease,
		background-color .3s ease, color .3s ease;
}

/* Two rings running out from the pill and fading as they go. They are box
   shadows rather than extra elements: a shadow follows the pill's radius on
   its own, takes no room in the layout, and both pseudo-elements are already
   spoken for by the disc and the arrow.

   The inner ring ends exactly where the outer one begins — same radius, same
   opacity — so when the cycle repeats the two swap places and the ripple runs
   on without a seam. An earlier version eased both rings out together, which
   spent them in the first third of the cycle and left the rest of it empty:
   a blink rather than a ripple. Running it linear keeps a ring on the move
   the whole time. */
@keyframes materialai-btn-ripple{
	0%{
		box-shadow:
			0 0 0 0 color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent),
			0 0 0 10px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
	}
	100%{
		box-shadow:
			0 0 0 10px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent),
			0 0 0 20px transparent;
	}
}

/* The second button runs half a cycle ahead so the pair ripples in turn
   rather than in lockstep. The delay is negative so it starts already
   half way through, instead of standing still for the first second. */
.materialai-hero2-buttons .wp-block-button:nth-child(2) .wp-block-button__link{
	animation-delay: -1s;
}

/* Under the pointer the ripple gives way to a steady ring, so the button
   answers rather than carrying on regardless. */
.materialai-btn-ring-02 .wp-block-button__link:hover,
.materialai-btn-ring-02 .wp-block-button__link:focus-visible{
	outline-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
	outline-offset: 6px;
	animation: none;
}

.materialai-hero2{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	padding: 0;
	border-radius: 30px;
	overflow: hidden;
}

.materialai-hero2 > *{
	grid-area: 1 / 1;
	min-width: 0;
}

.materialai-hero2 > .slider-2,
.materialai-hero2 .slider-2 .materialai-hero2-slide{
	/* Tall enough for the row, and free to grow past it. This was height:100%,
	   which pinned the banner to the row's height and sent anything taller
	   over the edge — between 1025px and 1279px the buttons were drawn on top
	   of the statistics panel. The minimum height the design asks for is set
	   further down and still applies; below 1024px this was already auto,
	   which is why the fault stopped there. */
	height: auto;
}

.materialai-hero2 .slider-2{
	position: relative;
}

.materialai-hero2.alignfull{
	/* The card is artwork, not content, so it rides the page gutter alongside
	   the top bar. Only what sits on it — the copy and the statistics panel —
	   comes in to the container. */
	width: var(--mai-page);
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.materialai-hero2-slide .wp-block-cover__image-background{
	object-fit: cover;
	object-position: 62% center;
}

.materialai-hero2-slide::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--wp--preset--color--secondary) 22%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--secondary) 8%, transparent) 35%,
		transparent 55%
	);
}

.materialai-hero2-slide > .wp-block-cover__inner-container{
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	padding: 0;
	/* The cover lays its contents out as a column, and a column will squeeze
	   what is in it to fit. The copy was being squeezed about 40px shorter
	   than it needs and spilling out of the bottom, which is what put the
	   buttons over the statistics panel between 1025px and 1279px. It keeps
	   its own height now and the banner grows instead. */
	flex-shrink: 0;
}

body:has(.materialai-header-02) .materialai-hero2{
	margin-top: calc(-1 * (var(--mai-navbar-h) - var(--mai-hero-drop)));
}

.materialai-hero2 .slider-2{
	position: static;
	width: 100%;
	max-width: none;
	margin: 0;
}

.materialai-hero2-slide{
	width: 100%;
	min-height: clamp(640px, 54.7vw, 1050px);
	padding: calc(var(--mai-navbar-h) + 48px) 0 170px;
}

.materialai-hero2-inner{
	/* The copy is content, so it comes in off the card to the container and
	   takes the navigation bar's own padding on top of it — which is what puts
	   the heading directly under the logo even though the card behind it runs
	   wider than both. */
	/* Never wider than the container, and never so wide that it runs under the
	   tabs at the banner's edges. On a wide screen the container is the
	   narrower of the two and nothing changes; between about 1025px and
	   1378px the banner is only a little wider than the container, and
	   without this the left tab was drawn across the heading — by 59px at
	   1200px. */
	width: min(var(--mai-shell), calc(100% - 2 * var(--mai-tab-w)));
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mai-navbar-pad);
	padding-right: var(--mai-navbar-pad);
}

.materialai-hero2-content{
	max-width: 900px;
	margin-left: 0;
	margin-right: auto;
}

.materialai-hero2-content > *{
	margin-left: 0;
	margin-right: auto;
}

.materialai-hero2 .materialai-badge{
	
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	gap: 12px;
	padding: 13px 26px 13px 13px;
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 78%, transparent);
	backdrop-filter: blur(2px);
}

.materialai-hero2 .materialai-badge::before{
	inset: 5px;
}

.materialai-hero2 .materialai-badge p{
	margin: 0;
}

.materialai-hero2 .materialai-badge p:first-child{
	width: 44px;
	height: 44px;
	font-size: 18px;
}

.materialai-hero2 .materialai-hero2-eyebrow{
	font-size: clamp(15px, 1.3vw, 21px);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.materialai-hero2 .materialai-hero2-title{
	margin-left: 0;
	margin-right: auto;
	margin-bottom: 0;
	font-size: clamp(34px, 3.75vw, 72px);
	font-weight: 800;
	line-height: 1.4;
}

.materialai-hero2-title mark{
	padding: 4px 14px;
	border-radius: 6px;
	white-space: nowrap;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.materialai-hero2 .materialai-hero2-text{
	max-width: 620px;
	margin-left: 0;
	margin-right: auto;
	margin-bottom: 0;
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.8;
	opacity: .92;
}

.materialai-hero2-buttons{
	gap: 42px;
}

.materialai-hero2-slide .wow.animated{
	animation-duration: .9s;
}

.materialai-hero2-slide .materialai-badge.animated{
	animation-delay: .1s;
}

.materialai-hero2-slide .materialai-hero2-title.animated{
	animation-delay: .25s;
}

.materialai-hero2-slide .materialai-hero2-text.animated{
	animation-delay: .4s;
}

.materialai-hero2-slide .materialai-hero2-buttons.animated{
	animation-delay: .55s;
}

@media (prefers-reduced-motion: reduce){
	.materialai-hero2-slide .wow,
	.materialai-hero2-slide .wow.animated{
		animation: none !important;
		visibility: visible !important;
	}

	/* The ring and the arrow still change on hover, they just arrive rather
	   than travel, and the ripple does not run at all. */
	.materialai-btn-ring-02 .wp-block-button__link,
	.materialai-btn-arrow .wp-block-button__link::after{
		transition-duration: 0s;
	}

	.materialai-btn-ring-02 .wp-block-button__link{
		animation: none;
	}
}

.materialai-hero2-statsbar{
	position: relative;
	z-index: 4;
	align-self: end;
	width: 100%;
	max-width: none;
	margin: 0;
	display: flex;
	justify-content: center;
	/* No gutter of its own: the hero is already inset by one, so adding a
	   second here pushed the green panel in past the navigation bar on
	   narrower screens. Both now ride the same rail at every width. */
	padding: 0;
	background: linear-gradient(
		to top,
		var(--wp--preset--color--primary) var(--mai-hero-plinth),
		transparent var(--mai-hero-plinth)
	);
}

.materialai-hero2-stats{
	position: relative;
	/* Same rail as the navigation bar above, from the same token, so the two
	   cannot drift apart. */
	width: min(var(--mai-shell), 100%);
	gap: 20px;
	padding: 11px;
	border-radius: 12px 12px 0 0;
}

.materialai-hero2-stats::before,
.materialai-hero2-stats::after{
	content: "";
	position: absolute;
	bottom: var(--mai-hero-plinth);
	width: var(--mai-plinth-fillet);
	height: var(--mai-plinth-fillet);
	pointer-events: none;
}

.materialai-hero2-stats::before{
	left: calc(-1 * var(--mai-plinth-fillet));
	background: radial-gradient(
		circle at 0 0,
		transparent var(--mai-plinth-fillet),
		var(--wp--preset--color--primary) calc(var(--mai-plinth-fillet) + 0.5px)
	);
}

.materialai-hero2-stats::after{
	right: calc(-1 * var(--mai-plinth-fillet));
	background: radial-gradient(
		circle at 100% 0,
		transparent var(--mai-plinth-fillet),
		var(--wp--preset--color--primary) calc(var(--mai-plinth-fillet) + 0.5px)
	);
}

.materialai-hero2-stat{
	flex: 1 1 260px;
	min-height: 148px;
	gap: 20px;
	padding: 12px 30px 12px 20px;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
}

.materialai-hero2-stat .progress{
	flex: 0 0 auto;
	width: 100px;
	height: 100px;
	background: conic-gradient(
		var(--white) var(--progress, 0deg),
		color-mix(in srgb, var(--wp--preset--color--secondary) 68%, var(--white)) 0
	);
}

.materialai-hero2-stat .progress::before{
	width: 78px;
	height: 78px;
	background: var(--wp--preset--color--secondary);
}

.materialai-hero2-stat .progress p{
	margin: 0;
}

.materialai-hero2-stat__content{
	flex: 1 1 auto;
}

.materialai-hero2-stat__content > *{
	margin: 0;
	text-align: left;
}

.materialai-hero2 .materialai-hero2-stat__title{
	font-size: clamp(18px, 1.35vw, 26px);
	font-weight: 700;
	line-height: 1.2;
}@media (max-width: 1280px){
	:root{
	--mai-navbar-pad: 18px;
	}

	.materialai-navbar-02{
		gap: 16px;
	}

	.materialai-navbar-02 .wp-block-navigation{
		gap: 8px 22px;
	}

	.materialai-hero2-inner{
		padding-left: 20px;
		padding-right: 20px;
	}

	.materialai-hero2-buttons{
		gap: 24px;
	}
}

@media (max-width: 1024px){
	:root{
	--mai-gutter: 20px;
	--mai-navbar-h: 84px;
	--mai-shoulder: 18px;
	--mai-hero-plinth: 5px;
	--mai-plinth-fillet: 12px;
	}

	.materialai-topbar-02__row{
		justify-content: center;
		text-align: center;
	}

	.materialai-topbar-02__promo,
	.materialai-topbar-02__meta{
		flex: 1 1 100%;
		justify-content: center;
	}

	:root{
	--mai-navbar-pad: 16px;
	}

	.materialai-navbar-02{
		border-radius: 0 0 10px 10px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.materialai-hero2{
		border-radius: 24px;
	}

	.materialai-hero2-slide .wp-block-cover__image-background{
		object-position: 74% center;
	}

	.materialai-hero2-slide::before{
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--wp--preset--color--secondary) 58%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--secondary) 48%, transparent) 60%,
			color-mix(in srgb, var(--wp--preset--color--secondary) 40%, transparent) 100%
		);
	}

	.materialai-hero2-slide{
		min-height: 0;
		padding: calc(var(--mai-navbar-h) + 50px) 0 50px;
	}

	.materialai-hero2{
		display: block;
	}

	.materialai-hero2-inner{
		padding-left: 84px;
		padding-right: 84px;
	}

	.materialai-hero2-content,
	.materialai-hero2 .materialai-hero2-text{
		max-width: 100%;
	}

	.materialai-hero2 .slider-2 .materialai-hero2-slide{
		flex: 1 1 auto;
		height: auto;
	}

	.materialai-hero2-stats{
		border-radius: 12px 12px 0 0;
	}

	.materialai-hero2-stat{
		flex: 1 1 100%;
		min-height: 108px;
	}
}

@media (max-width: 767px){
	:root{
	--mai-gutter: 12px;
	--mai-navbar-h: 72px;
	--mai-shoulder: 12px;
	--mai-hero-plinth: 4px;
	--mai-plinth-fillet: 9px;
	}

	.materialai-topbar-02 .materialai-topbar-02__meta{
		display: none;
	}

	.materialai-topbar-02__item.is-divided{
		padding-left: 0;
		border-left: 0;
	}

	.materialai-topbar-02__row{
		justify-content: flex-start;
		text-align: left;
	}

	.materialai-topbar-02 .materialai-topbar-02__promo{
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 10px;
	}

	.materialai-topbar-02 .materialai-topbar-02__tag{
		flex: 0 0 auto;
	}

	.materialai-topbar-02 .materialai-topbar-02__copy{
		display: block;
	}

	.materialai-topbar-02 .materialai-topbar-02__copy > p{
		display: inline;
	}

	.materialai-topbar-02__copy .materialai-topbar-02__more{
		display: inline-flex;
		vertical-align: -4px;
	}

	.materialai-navbar-02{
		padding: 10px 12px;
		gap: 12px;
	}

	.materialai-header-02 .materialai-navbar-02{
		justify-content: flex-start;
	}

	.materialai-header-02 .materialai-navbar-02 .materialai-actions-02{
		order: 2;
		margin-left: auto;
		gap: 10px;
	}

	.materialai-header-02 .materialai-navbar-02 .materialai-nav-02{
		order: 3;
		
		flex: 0 0 auto;
		margin-left: 0;
	}

	/* Smaller on a phone, so a long name keeps to one line beside the cart
	   rather than breaking or crowding it. */
	.materialai-branding-02 .site-branding-fallback .wp-block-site-title{
		font-size: clamp(17px, 5.6vw, 24px);
	}

	.materialai-header-02 .materialai-navbar-02 .materialai-branding-02{
		flex: 0 1 auto;
		min-width: 0;
		margin-right: auto;
	}

	/* The cart and the menu button belong together at the right. The bar
	   spreads its items evenly, which left the cart stranded halfway along,
	   against the site title.

	   The slack is taken up on the cart's own left rather than on the title's
	   right. Both put the pair at the end, but this one does not care how the
	   bar is built: the cart is found by the button inside it, so it works
	   whether the cart sits in the row of actions, in a wrapper of its own, or
	   directly in the bar — and free space goes to a margin like this one
	   before the bar gets to spread anything, so nothing is left over to open
	   a gap again. */
	.materialai-header-02 .materialai-navbar-02 > *:has(.wc-block-mini-cart__button),
	.materialai-header-02 .materialai-navbar-02 > .materialai-actions-02,
	.materialai-header-02 .materialai-navbar-02 > .materialai-header-minicart,
	.materialai-header-02 .materialai-navbar-02 > .wp-block-woocommerce-mini-cart{
		margin-left: auto;
	}

	/* Everything after that one packs against it. */
	.materialai-header-02 .materialai-navbar-02 > *:has(.wc-block-mini-cart__button) ~ *,
	.materialai-header-02 .materialai-navbar-02 > .materialai-actions-02 ~ *{
		margin-left: 0;
	}

	.materialai-actions-02 .search-btn-02,
	.materialai-actions-02 .wp-block-buttons{
		display: none;
	}.materialai-minicart-02 .wc-block-mini-cart__button,
.materialai-navbar-02 .materialai-header-minicart .wc-block-mini-cart__button,
.materialai-navbar-02 .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button{
		width: 46px;
		height: 46px;
		min-width: 46px;
	}.materialai-minicart-02 .wc-block-mini-cart__icon,
.materialai-navbar-02 .materialai-header-minicart .wc-block-mini-cart__icon,
.materialai-navbar-02 .wp-block-woocommerce-mini-cart .wc-block-mini-cart__icon{
		width: 20px;
		height: 20px;
	}

	.materialai-btn-arrow .wp-block-button__link{
		padding-left: 22px;
		font-size: 16px;
	}

	/* A button with a disc keeps the room the disc needs; only the plain pill
	   takes a flat right padding. */
	.materialai-btn-arrow:not(.materialai-btn-disc) .wp-block-button__link{
		padding-right: 42px;
	}

	/* Written with the same three classes as the rules that set these heights
	   further up, and later in the file, so the breakpoint actually lands.
	   With two classes it was being out-ranked and never applied. */
	.materialai-hero2-buttons .materialai-btn-ring-02 .wp-block-button__link,
	.materialai-navbar-02 .materialai-btn-started-02 .wp-block-button__link{
		--mai-pill-h: 48px;
	}

	.materialai-hero2{
		border-radius: 18px;
	}

	.materialai-hero2-slide{
		padding: calc(var(--mai-navbar-h) + 26px) 0 62px;
	}

	.materialai-hero2 .materialai-hero2-content{
		--wp--style--block-gap: 18px;
		gap: 18px;
	}

	.materialai-hero2-inner{
		/* Interpolated between the two widths that matter rather than by a
		   single vw term: a plain clamp never reaches its floor here, because
		   5.6vw at 320px is still 18px. */
		padding-left: clamp(14px, 11.43vw - 22.6px, 22px);
		padding-right: clamp(14px, 11.43vw - 22.6px, 22px);
	}

	/* Everything in the banner held one size across the whole phone range,
	   which is fine on a 390px screen and falls apart on a 320px one: the
	   heading ran to four lines, the badge broke onto two and the two buttons
	   dropped onto separate rows. Each of these now scales with the width
	   between those two points, reaching the size it already had at 390px, so
	   the banner keeps the shape the design has all the way down. */
	.materialai-hero2 .materialai-hero2-title{
		font-size: clamp(27px, 8.7vw, 34px);
	}

	.materialai-hero2 .materialai-hero2-text{
		font-size: clamp(13px, 4.1vw, 16px);
	}

	.materialai-hero2 .materialai-hero2-eyebrow{
		font-size: clamp(11px, 3.85vw, 15px);
	}

	.materialai-hero2 .materialai-badge{
		gap: clamp(7px, 2.6vw, 10px);
		padding: 6px clamp(12px, 4.6vw, 18px) 6px 6px;
	}

	.materialai-hero2 .materialai-badge p:first-child{
		width: clamp(28px, 9.2vw, 36px);
		height: clamp(28px, 9.2vw, 36px);
		font-size: clamp(12px, 3.85vw, 15px);
	}

	.materialai-hero2 .materialai-hero2-buttons{
		gap: clamp(7px, 2.6vw, 10px);
	}

	.materialai-hero2 .materialai-hero2-buttons .wp-block-button{
		flex: 0 0 auto;
	}

	.materialai-hero2-buttons .wp-block-button__link{
		padding-left: clamp(9px, 7.14vw - 13.9px, 14px);
		font-size: clamp(11px, 3.6vw, 14px);
		white-space: nowrap;
	}

	.materialai-hero2-buttons .materialai-btn-ring-02 .wp-block-button__link{
		/* Still a comfortable target at 390px and above; below that it comes
		   down with everything else rather than forcing the pair to wrap. */
		--mai-pill-h: clamp(38px, 11.3vw, 44px);
	}

	.materialai-hero2-buttons .materialai-btn-arrow:not(.materialai-btn-disc) .wp-block-button__link{
		padding-right: clamp(28px, 9.7vw, 38px);
	}

	.materialai-hero2-buttons .materialai-btn-arrow:not(.materialai-btn-disc) .wp-block-button__link::after{
		right: clamp(10px, 3.6vw, 14px);
		width: clamp(13px, 4.1vw, 16px);
		height: clamp(13px, 4.1vw, 16px);
	}

	.materialai-hero2 .slider-2{
		position: relative;
	}

	.materialai-hero2-stats{
		gap: 12px;
		padding: 14px;
		border-radius: 12px 12px 0 0;
	}

	.materialai-hero2-stat{
		min-height: 92px;
		padding: 10px 20px 10px 12px;
		gap: 14px;
	}

	.materialai-hero2-stat .progress{
		width: 68px;
		height: 68px;
	}

	.materialai-hero2-stat .progress::before{
		width: 52px;
		height: 52px;
	}
}

/* ------------------------------------------------------- decorative arrows

   The banner is not a carousel, but the two tabs notched into the hero's left
   and right edges are part of the design, so they stay. They are empty
   elements with no text and no role, which keeps them out of the tab order
   and out of a screen reader's way, and pointer-events are off so they never
   look clickable. Sizes and shapes are the Pro theme's. */

.materialai-hero2 .mai-hero2-arrow{
	position: absolute;
	top: 50%;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mai-tab-w);
	height: 101px;
	transform: translateY(-50%);
	background: var(--wp--preset--color--background);
	pointer-events: none;
}

.materialai-hero2 .mai-hero2-arrow--prev{
	left: 0;
	border-radius: 0 16px 16px 0;
}

.materialai-hero2 .mai-hero2-arrow--next{
	right: 0;
	border-radius: 16px 0 0 16px;
}

.materialai-hero2 .mai-hero2-arrow::before{
	content: "";
	width: 26px;
	height: 26px;
	background-color: var(--wp--preset--color--secondary);
	-webkit-mask: var(--mai-arrow) center / contain no-repeat;
	mask: var(--mai-arrow) center / contain no-repeat;
}

/* Mirrored, but the same colour as the one on the right — both tabs take the
   secondary colour from the rule above. The left one used to be green. */
.materialai-hero2 .mai-hero2-arrow--prev::before{
	transform: scaleX(-1);
}

/* The little curved shoulders where the tab meets the hero's rounded edge. */
.materialai-hero2 .mai-hero2-arrow::after{
	content: "";
	position: absolute;
	top: calc(-1 * var(--mai-shoulder));
	bottom: calc(-1 * var(--mai-shoulder));
	width: var(--mai-shoulder);
	pointer-events: none;
}

.materialai-hero2 .mai-hero2-arrow--prev::after{
	left: 0;
	background:
		radial-gradient(circle at 100% 0, transparent var(--mai-shoulder), var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)) left top / var(--mai-shoulder) calc(var(--mai-shoulder) + 1px) no-repeat,
		radial-gradient(circle at 100% 100%, transparent var(--mai-shoulder), var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)) left bottom / var(--mai-shoulder) calc(var(--mai-shoulder) + 1px) no-repeat;
}

.materialai-hero2 .mai-hero2-arrow--next::after{
	right: 0;
	background:
		radial-gradient(circle at 0 0, transparent var(--mai-shoulder), var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)) right top / var(--mai-shoulder) calc(var(--mai-shoulder) + 1px) no-repeat,
		radial-gradient(circle at 0 100%, transparent var(--mai-shoulder), var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)) right bottom / var(--mai-shoulder) calc(var(--mai-shoulder) + 1px) no-repeat;
}

/* Nothing narrower than a desktop gets them. They are decoration — the banner
   is one static image, so they point at nothing — and below the full width
   they have nowhere to sit: they take room from the buttons beside them on a
   phone, and on a tablet they hang off the banner's rounded corners as two
   white tabs against the page. They come back at 1025px, notched into the
   banner's edges, where the artwork is wide enough to carry them. */
@media (max-width: 1024px){

	.materialai-hero2 .mai-hero2-arrow{
		display: none;
	}

	/* With no tabs there, the copy has no need to keep clear of them and
	   takes the full width of the banner again. */
	:root{
		--mai-tab-w: 0px;
	}
}

/* The home mark in the breadcrumb is drawn by the parent as a picture with
   its colour baked into it — a violet that no palette can reach, so it stayed
   violet whichever style variation was chosen. The same picture is used here
   as a mask instead. A mask takes only the shape, so the colour comes from
   the palette and follows the variation like everything else does.

   The empty icon element the pattern already carries is what the mask is
   drawn on, so no markup is added; the picture is only taken off the disc
   when that element is there to replace it. */
.mai-breadcrumb__crumb--first .mai-breadcrumb__crumb-body:has(.mai-breadcrumb__icon)::after{
	background: var(--wp--preset--color--light-color);
}

.mai-breadcrumb__crumb--first .mai-breadcrumb__crumb-body .mai-breadcrumb__icon{
	display: block;
	position: absolute;
	z-index: 2;
	left: calc(var(--mai-track-h) * .057);
	top: 50%;
	width: var(--mai-circle);
	height: var(--mai-circle);
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--mai-home-icon) center / var(--mai-icon) var(--mai-icon) no-repeat;
	mask: var(--mai-home-icon) center / var(--mai-icon) var(--mai-icon) no-repeat;
	pointer-events: none;
}

/* An eyebrow with nothing in it draws a bare green pill above the real one.
   The paragraph that carries it was invalid — its alignment was set in the
   block's attributes but missing from the class the editor expects — so every
   save rewrote it and left an empty copy behind. The parent theme's pattern
   is corrected, which stops new ones appearing; this hides any that a page
   was already saved with, since those live in the page's own content and no
   theme update can reach them. */
.mai-eyebrow:empty{
	display: none;
}

/* ------------------------------------------------------------- editor view

   The banner is one static Cover, so the editor needs none of the help a
   carousel wants: no slide numbering, no stacking, no "which slide is
   showing" toggle. The layout rules above already do the right thing in the
   editor — including the pull up under the navigation bar, which only applies
   when a header is on the canvas, so editing the pattern on its own still
   looks right. The one thing the editor cannot do is run the script. */

/* A starting sweep for each ring, matching the figure the pattern ships with,
   so none of them reads as empty before the editor's script has run. From
   then on the script writes the sweep to each ring's own style attribute as
   the figure is edited, which takes precedence over these. */
.editor-styles-wrapper .materialai-hero2-stat:nth-child(1) .progress{
	--progress: 324deg;
}

.editor-styles-wrapper .materialai-hero2-stat:nth-child(2) .progress{
	--progress: 252deg;
}

.editor-styles-wrapper .materialai-hero2-stat:nth-child(3) .progress{
	--progress: 288deg;
}

/* The two tabs notched into the banner's edges are decoration: the arrow is
   drawn in CSS and the groups carrying it are meant to stay empty. The editor
   offers a layout picker and an inserter inside any empty group, which filled
   both tabs with grey placeholder tiles and pushed them to about twice their
   height. That furniture is hidden inside these two so the drawn arrow shows
   in the editor exactly as it does on the front end. Nothing is hidden on the
   front end, where these elements have no children at all. */
.editor-styles-wrapper .mai-hero2-arrow > *,
.editor-styles-wrapper .mai-hero2-arrow .block-editor-block-variation-picker,
.editor-styles-wrapper .mai-hero2-arrow .block-editor-inserter,
.editor-styles-wrapper .mai-hero2-arrow .block-list-appender,
.editor-styles-wrapper .mai-hero2-arrow .wp-block-group__placeholder{
	display: none;
}

/* The block wrapper picks up the editor's own minimum height for an empty
   container, so the tab is held to the size it has on the front end. */
.editor-styles-wrapper .materialai-hero2 .mai-hero2-arrow{
	min-height: 0;
	height: 101px;
}