/*!
Theme Name: FlexPack
Theme URI: https://github.com/ecogreeninternationalin-hub
Author: Ecogreen International
Description: A clean, editable theme for flexible-packaging manufacturers and suppliers: product catalogue with ranges (industries) and types, product pages with features, FAQs and grades, a section-based home page edited in the Customizer, block patterns for inner pages, and one-click demo content. No page builder or extra plugins required.
Version: 1.8.0
Requires at least: 6.3
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flexpack
Tags: custom-logo, custom-menu, featured-images, editor-style, block-patterns, wide-blocks, translation-ready, one-column, two-columns
*/

/*
 * Guarded rules: selectors ending in :where(:not(#app *)) skip the A&M 3D
 * designer (the am-designer plugin mounts its app in #app). Its own stylesheet
 * uses some of the same class names (.panel, .slider, .icon-btn, .btn, .card…)
 * and relies on bare h1/p/a/button defaults, so FlexPack's versions broke its
 * layout. :where() adds no specificity, so nothing outside #app changes.
 */


/* ==========================================================================
   Tokens (colours and fonts are overridden from the Customizer)
   ========================================================================== */
:root {
	--fp-dark: #1a322f;
	--fp-accent: #62cbca;
	--fp-accent-text: #17807d;
	--fp-soft: #e8f6f5;
	--fp-grey: #f4f4f4;
	--fp-text: #24403d;
	--fp-white: #fff;
	--fp-line: rgba(26, 50, 47, .14);
	--fp-line-light: rgba(255, 255, 255, .22);
	--fp-font-head: "Archivo", system-ui, sans-serif;
	--fp-font-body: "DM Sans", system-ui, sans-serif;
	--fp-font-mono: "DM Mono", ui-monospace, monospace;
	--fp-font-btn: "Poppins", system-ui, sans-serif;
	--fp-wrap: 1240px;
	--fp-gutter: clamp(16px, 4vw, 40px);
	--fp-header: 84px;
	--fp-radius: 8px; /* buttons, fields and chips: slightly rounded, never pills */
	--fp-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--fp-header) + 16px); }
body {
	margin: 0;
	font-family: var(--fp-font-body);
	font-size: clamp(16px, 1.05vw + 10px, 18px);
	line-height: 1.6;
	color: var(--fp-text);
	background: var(--fp-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img:where(:not(#app *)), svg:where(:not(#app *)), video:where(:not(#app *)) { max-width: 100%; height: auto; display: block; }
a:where(:not(#app *)) { color: var(--fp-accent-text); text-underline-offset: .18em; }
a:hover:where(:not(#app *)) { color: var(--fp-dark); }
h1:where(:not(#app *)), h2:where(:not(#app *)), h3:where(:not(#app *)), h4:where(:not(#app *)), h5:where(:not(#app *)), h6:where(:not(#app *)) {
	font-family: var(--fp-font-head);
	font-weight: 600;
	line-height: 1.1;
	color: var(--fp-dark);
	margin: 0 0 .5em;
	letter-spacing: -.01em;
}
h1:where(:not(#app *)) { font-size: clamp(36px, 5vw, 64px); }
h2:where(:not(#app *)) { font-size: clamp(28px, 3.4vw, 46px); }
h3:where(:not(#app *)) { font-size: clamp(20px, 1.6vw, 24px); }
p:where(:not(#app *)) { margin: 0 0 1em; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 3px; }
::selection { background: var(--fp-accent); color: var(--fp-dark); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important;
	width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
	left: 12px; top: 12px; z-index: 1000; padding: 10px 16px;
	background: var(--fp-white); color: var(--fp-dark);
}

.container:where(:not(#app *)) { width: 100%; max-width: calc(var(--fp-wrap) + var(--fp-gutter) * 2); margin: 0 auto; padding: 0 var(--fp-gutter); }
.container.narrow:where(:not(#app *)) { max-width: calc(820px + var(--fp-gutter) * 2); }

.eyebrow {
	font-family: var(--fp-font-mono);
	font-size: 15px;
	letter-spacing: .02em;
	color: var(--fp-accent);
	margin: 0 0 1.1em;
}
.eyebrow--text { color: var(--fp-accent-text); }
.display:where(:not(#app *)) { font-size: clamp(44px, 7.4vw, 100px); line-height: .98; letter-spacing: -.02em; }
.lead:where(:not(#app *)) { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.45; }
.lead p:last-child:where(:not(#app *)) { margin-bottom: 0; }

/* Buttons */
.btn:where(:not(#app *)), .wp-block-button__link, .search-form button:where(:not(#app *)), input[type="submit"]:where(:not(#app *)), button[type="submit"]:where(:not(#app *)) {
	display: inline-flex; align-items: center; gap: .55em;
	font-family: var(--fp-font-btn); font-size: 15px; font-weight: 500; line-height: 1;
	padding: 14px 26px; border-radius: var(--fp-radius);
	border: 1px solid var(--fp-dark); background: var(--fp-dark); color: var(--fp-white);
	text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.btn .icon:where(:not(#app *)) { width: 16px; height: 16px; transition: transform .2s var(--fp-ease); }
.btn:hover .icon:where(:not(#app *)) { transform: translateX(3px); }
.btn-outline, .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--fp-dark); border-color: var(--fp-accent-text);
}
.btn-outline:hover, .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--fp-dark); color: var(--fp-white); border-color: var(--fp-dark); }
.btn-light { color: var(--fp-accent); border-color: var(--fp-accent); }
.btn-light:hover { background: var(--fp-accent); color: var(--fp-dark); border-color: var(--fp-accent); }
.btn-big { padding: 17px 34px; font-size: 16px; }
.btn-small { padding: 10px 18px; font-size: 14px; }
.text-link {
	display: inline-flex; align-items: center; gap: .5em;
	font-family: var(--fp-font-mono); font-size: 15px; text-decoration: none; color: var(--fp-accent-text);
}
.text-link .icon { width: 16px; height: 16px; transition: transform .2s var(--fp-ease); }
.text-link:hover .icon { transform: translateX(3px); }
.text-link--light { color: var(--fp-accent); }
.text-link--light:hover { color: var(--fp-white); }

/* Scroll reveal (only when JS is running; respects reduced motion) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--fp-ease), transform .7s var(--fp-ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media print {
	.js .reveal { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.js .reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ==========================================================================
   Top bar (scrolls away; the header below it stays pinned)
   ========================================================================== */
.fp-topbar { background: var(--fp-topbar-bg, var(--fp-soft)); color: var(--fp-topbar-fg, var(--fp-dark)); font-size: 13px; line-height: 1.4; }
.fp-topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; min-height: 36px; padding-block: 6px; }
.fp-topbar-text { margin: 0; }
.fp-topbar-items { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.fp-topbar a { color: inherit; text-decoration: none; }
.fp-topbar a:hover, .fp-topbar a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.fp-topbar-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.fp-topbar-items + .fp-topbar-social { margin-left: -8px; }
.fp-topbar-social a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.fp-topbar-social a:hover, .fp-topbar-social a:focus-visible { background: rgba(0, 0, 0, .07); text-decoration: none; }
.fp-topbar-social .icon { width: 16px; height: 16px; }
@media (max-width: 700px) {
	.fp-topbar.has-items .fp-topbar-text,
	.fp-topbar.has-social .fp-topbar-text { display: none; }
	.fp-topbar-inner { justify-content: center; }
	.fp-topbar-items { margin: 0; justify-content: center; gap: 4px 18px; }
	/* On a phone the social links take the place of email and phone. */
	.fp-topbar.has-social .fp-topbar-items { display: none; }
	.fp-topbar-items + .fp-topbar-social { margin-left: 0; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--fp-dark); color: var(--fp-white);
	transition: box-shadow .25s;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: var(--fp-header); }
@media (max-width: 480px) { .header-inner { gap: 10px; } .site-brand { min-width: 0; } .site-brand img:where(:not(#app *)) { max-width: 100%; height: auto; } }
.site-brand { flex: 0 0 auto; margin-right: auto; min-width: max-content; }
.site-brand img:where(:not(#app *)) { max-height: 48px; width: auto; }
.site-title { font-family: var(--fp-font-head); font-weight: 700; font-size: 26px; color: var(--fp-white); text-decoration: none; letter-spacing: -.01em; }
.site-title:hover { color: var(--fp-accent); }

.site-nav { display: flex; align-items: center; gap: 28px; }
/* Menu position (Customize → Header, footer & contact details). Wide screens
   only: below 1240px the menu is the slide-down panel. Centre gives the logo
   and the icons equal flexible sides, so the menu sits on the page's centre
   line whatever their widths. */
@media (min-width: 1241px) {
	.nav-center .site-brand, .nav-center .header-tools { flex: 1 1 0; margin-right: 0; }
	.nav-center .header-tools { justify-content: flex-end; }
	.nav-left .site-brand { margin-right: 0; }
	.nav-left .site-nav { margin-right: auto; }
}
.site-nav .menu:where(:not(#app *)) { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.site-nav .menu > li:where(:not(#app *)) { position: relative; display: flex; align-items: center; }
.site-nav .menu a:where(:not(#app *)) { color: var(--fp-white); text-decoration: none; font-size: 15px; padding: 10px 12px; display: block; }
.site-nav .menu a:hover:where(:not(#app *)), .site-nav .current-menu-item > a:where(:not(#app *)), .site-nav .current-menu-ancestor > a:where(:not(#app *)) { color: var(--fp-accent); }
.sub-toggle { background: none; border: 0; color: inherit; padding: 4px; margin-left: -8px; cursor: pointer; display: inline-flex; }
.sub-toggle .icon { width: 16px; height: 16px; transition: transform .2s; }
.site-nav .sub-menu {
	list-style: none; margin: 0; padding: 14px 0; position: absolute; top: 100%; left: 0; min-width: 240px;
	background: var(--fp-dark); border: 1px solid var(--fp-line-light); border-radius: 12px;
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
}
.site-nav .sub-menu a:where(:not(#app *)) { padding: 9px 22px; font-size: 15px; }
.site-nav .menu > li:hover > .sub-menu:where(:not(#app *)), .site-nav .menu > li:focus-within > .sub-menu:where(:not(#app *)), .site-nav .menu > li.is-open > .sub-menu:where(:not(#app *)) { opacity: 1; visibility: visible; transform: none; }
.site-nav .menu > li.is-open > .sub-toggle .icon:where(:not(#app *)) { transform: rotate(180deg); }

.header-tools { display: flex; align-items: center; gap: 6px; }
.icon-btn:where(:not(#app *)) { background: none; border: 0; color: var(--fp-white); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.icon-btn:hover:where(:not(#app *)) { color: var(--fp-accent); }
.icon-btn .icon:where(:not(#app *)) { width: 22px; height: 22px; }
.nav-toggle { display: none; }
.burger:where(:not(#app *)) { width: 24px; height: 14px; position: relative; display: block; }
.burger:where(:not(#app *))::before, .burger:where(:not(#app *))::after, .burger span:where(:not(#app *)) { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .25s, opacity .25s, top .25s; }
.burger:where(:not(#app *))::before { top: 0; } .burger span:where(:not(#app *)) { top: 6px; } .burger:where(:not(#app *))::after { top: 12px; }
.nav-open .burger:where(:not(#app *))::before { top: 6px; transform: rotate(45deg); }
.nav-open .burger span:where(:not(#app *)) { opacity: 0; }
.nav-open .burger:where(:not(#app *))::after { top: 6px; transform: rotate(-45deg); }

.site-search { border-top: 1px solid var(--fp-line-light); padding: 22px 0; }
.search-form { display: flex; gap: 10px; max-width: 720px; }
.search-field {
	flex: 1; font: inherit; padding: 13px 20px; border-radius: var(--fp-radius);
	border: 1px solid var(--fp-line); background: var(--fp-white); color: var(--fp-text); min-width: 0;
}
.site-search .search-field { background: transparent; color: var(--fp-white); border-color: var(--fp-line-light); }
.site-search .search-field::placeholder { color: rgba(255, 255, 255, .6); }
/* The browser's own clear × (Chrome, Edge, Safari) is blue whatever the
   colours; this one is drawn in the box's text colour, so it is white in the
   header and dark on the results page, and follows the Customizer. */
.search-field::-webkit-search-cancel-button {
	-webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-left: 10px; cursor: pointer;
	background-color: currentColor; opacity: .6;
	-webkit-mask: 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.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-field::-webkit-search-cancel-button:hover { opacity: 1; }
.search-form button:where(:not(#app *)) { padding: 0 18px; }
.search-form button .icon:where(:not(#app *)) { width: 20px; height: 20px; }
.site-search .search-form button:where(:not(#app *)) { background: var(--fp-accent); color: var(--fp-dark); border-color: var(--fp-accent); }

@media (max-width: 1240px) {
	.nav-toggle { display: grid; }
	.site-nav {
		/* --fp-nav-top is the header's real bottom edge, set by main.js on open:
		   with the top bar still on screen the header sits lower than --fp-header. */
		position: fixed; inset: var(--fp-nav-top, var(--fp-header)) 0 0 0; z-index: 99;
		background: var(--fp-dark); flex-direction: column; align-items: stretch; gap: 24px;
		padding: 24px var(--fp-gutter) 48px; overflow-y: auto;
		opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;
	}
	.admin-bar .site-nav { inset-block-start: var(--fp-nav-top, calc(var(--fp-header) + 46px)); }
	.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }
	.site-nav .menu:where(:not(#app *)) { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav .menu > li:where(:not(#app *)) { flex-wrap: wrap; border-bottom: 1px solid var(--fp-line-light); }
	.site-nav .menu > li > a:where(:not(#app *)) { flex: 1; font-family: var(--fp-font-head); font-size: 26px; padding: 16px 0; }
	.sub-toggle { margin: 0; width: 48px; height: 48px; justify-content: center; }
	.sub-toggle .icon { width: 22px; height: 22px; }
	.site-nav .sub-menu {
		position: static; flex-basis: 100%; min-width: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 14px;
		display: none; opacity: 1; visibility: visible; transform: none; background: transparent;
	}
	.site-nav .menu > li.is-open > .sub-menu:where(:not(#app *)) { display: block; }
	.site-nav .sub-menu a:where(:not(#app *)) { padding: 8px 0; font-size: 17px; color: rgba(255, 255, 255, .85); }
	.header-cta { align-self: flex-start; }
	.nav-open { overflow: hidden; }
}

/* ==========================================================================
   Home: hero
   ========================================================================== */
.hero { background: var(--fp-dark); color: var(--fp-white); padding-top: clamp(40px, 7vw, 96px); }
.hero-title { color: var(--fp-white); font-size: clamp(44px, 7.6vw, 108px); line-height: .98; letter-spacing: -.025em; max-width: 13ch; margin: 0 0 clamp(28px, 4vw, 56px); position: relative; z-index: 1; }
.hero-media { position: relative; margin-top: calc(clamp(56px, 7vw, 120px) * -1); aspect-ratio: 16 / 7; max-height: 78vh; overflow: hidden; }
.hero-media img:where(:not(#app *)) { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--fp-dark) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .25) 100%); }
.hero-bottom { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 120px); padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); }
.hero-text { font-size: clamp(17px, 1.25vw, 20px); color: rgba(255, 255, 255, .9); }
.hero-side-title { font-family: var(--fp-font-head); font-weight: 600; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; margin-bottom: 1.2em; }
@media (max-width: 860px) {
	.hero-bottom { grid-template-columns: 1fr; }
	.hero-media { aspect-ratio: 4 / 3; margin-top: -24px; }
}

/* Home: spotlight */
.spotlight { padding: clamp(56px, 8vw, 120px) 0; }
.spot:where(:not(#app *)) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.spot + .spot:where(:not(#app *)) { margin-top: clamp(56px, 8vw, 120px); }
.spot--flip .spot-text { order: 2; }
.spot--noimg { grid-template-columns: minmax(0, 7fr); }
.spot h2:where(:not(#app *)) { font-size: clamp(26px, 2.8vw, 40px); }
.spot h2 a:where(:not(#app *)) { color: inherit; text-decoration: none; }
.spot h2 a:hover:where(:not(#app *)) { color: var(--fp-accent-text); }
.spot-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
.spot-img img:where(:not(#app *)) { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--fp-ease); }
.spot-img:hover img:where(:not(#app *)) { transform: scale(1.04); }
@media (max-width: 860px) {
	.spot:where(:not(#app *)) { grid-template-columns: 1fr; }
	.spot--flip .spot-text { order: 0; }
}

/* Home: industries strip */
.ranges-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.ranges-list a:where(:not(#app *)) { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fp-dark); text-decoration: none; }
.ranges-list img:where(:not(#app *)) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .7; transition: filter .5s, opacity .5s, transform .8s var(--fp-ease); }
.ranges-list span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px; font-family: var(--fp-font-head); font-weight: 600; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.1; color: var(--fp-white); }
.ranges-list a:where(:not(#app *))::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 55%); }
.ranges-list span { z-index: 1; }
.ranges-list a:hover img:where(:not(#app *)), .ranges-list a:focus-visible img:where(:not(#app *)) { filter: none; opacity: 1; transform: scale(1.05); }
@media (max-width: 960px) { .ranges-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ranges-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Home: features */
.features { padding: clamp(56px, 8vw, 110px) 0; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px clamp(20px, 3vw, 44px); }
.feature { border-top: 1px solid var(--fp-line); padding-top: 18px; }
.feature h3:where(:not(#app *)) { font-size: 18px; line-height: 1.25; }
.feature p:where(:not(#app *)) { font-size: 15px; margin: 0; }

/* Home: help band */
.help { background: var(--fp-dark); color: var(--fp-white); padding: clamp(64px, 9vw, 130px) 0; }
.help-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); }
.help-title { color: var(--fp-white); font-size: clamp(40px, 6vw, 84px); line-height: 1; margin: 0; }
.help-text { font-size: clamp(17px, 1.3vw, 20px); color: rgba(255, 255, 255, .9); }
.steps:where(:not(#app *)) { list-style: none; margin: clamp(48px, 7vw, 96px) 0 0; padding: 0; display: flex; justify-content: space-between; position: relative; counter-reset: step; }
.steps:where(:not(#app *))::before { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; border-top: 1px solid var(--fp-line-light); }
.steps li:where(:not(#app *)) { position: relative; width: clamp(92px, 11vw, 140px); aspect-ratio: 1; border: 1px solid var(--fp-accent); border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--fp-dark); padding: 10px; font-size: clamp(13px, 1vw, 15px); line-height: 1.2; }
@media (max-width: 860px) {
	.help-grid { grid-template-columns: 1fr; }
	.steps:where(:not(#app *)) { flex-wrap: wrap; justify-content: center; gap: 14px; }
	.steps:where(:not(#app *))::before { display: none; }
}

/* Home: two panels */
.two-panels { display: grid; grid-template-columns: 1fr 1fr; }
.panel:where(:not(#app *)) { padding: clamp(56px, 7vw, 110px) var(--fp-gutter); display: flex; }
.panel--2 { background: var(--fp-soft); }
.panel-inner { max-width: 520px; margin-left: auto; margin-right: clamp(0px, 4vw, 64px); }
.panel--2 .panel-inner { margin-left: clamp(0px, 4vw, 64px); margin-right: auto; }
.panel h2:where(:not(#app *)) { font-size: clamp(28px, 3vw, 42px); }
@media (max-width: 860px) {
	.two-panels { grid-template-columns: 1fr; }
	.panel-inner, .panel--2 .panel-inner { margin: 0; }
}

/* Home: logos */
.logos { padding: clamp(56px, 7vw, 100px) 0; text-align: center; }
.logos h2:where(:not(#app *)) { font-size: clamp(24px, 2.6vw, 36px); max-width: 30ch; margin: 0 auto 1.2em; }
.logos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 56px; }
.logos-list img:where(:not(#app *)) { max-height: 56px; width: auto; filter: grayscale(1); opacity: .75; }

/* ==========================================================================
   Catalogue: range hero, filter, grid
   ========================================================================== */
.range-hero, .page-title { background: var(--fp-dark); color: var(--fp-white); padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 64px); }
.range-hero h1:where(:not(#app *)), .page-title h1:where(:not(#app *)) { color: var(--fp-white); margin-bottom: .35em; }
.range-hero .lead:where(:not(#app *)), .page-title .lead:where(:not(#app *)) { max-width: 40ch; color: rgba(255, 255, 255, .92); }
.range-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.page-title .display:where(:not(#app *)) { font-size: clamp(40px, 6vw, 84px); }

.fp-filter {
	appearance: none; -webkit-appearance: none;
	font-family: var(--fp-font-btn); font-size: 15px; color: var(--fp-white);
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 20px center;
	border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--fp-radius);
	padding: 13px 52px 13px 22px; min-width: 240px; cursor: pointer;
}
.fp-filter option { color: var(--fp-text); background: var(--fp-white); }
.fp-filter:hover { border-color: var(--fp-accent); }
@media (max-width: 720px) {
	.range-hero-grid { grid-template-columns: 1fr; }
	.fp-filter { width: 100%; }
}

.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fp-line); }
.card:where(:not(#app *)) { border-right: 1px solid var(--fp-line); border-bottom: 1px solid var(--fp-line); background: var(--fp-white); }
.card:nth-child(4n):where(:not(#app *)) { border-right: 0; }
.card[hidden]:where(:not(#app *)) { display: none; }
.card a:where(:not(#app *)) { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--fp-text); }
.card-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--fp-grey); }
.card-img img:where(:not(#app *)) { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--fp-ease); }
.card-img-empty { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--fp-grey), var(--fp-soft)); }
.card-text { display: block; padding: 20px 22px 44px; font-size: 17px; line-height: 1.35; min-height: 104px; transition: color .2s; }
.card a:hover .card-img img:where(:not(#app *)) { transform: scale(1.05); }
.card a:hover .card-text:where(:not(#app *)) { color: var(--fp-accent-text); }
.grid-empty { padding: 48px var(--fp-gutter); text-align: center; }
@media (max-width: 960px) {
	.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card:nth-child(4n):where(:not(#app *)) { border-right: 1px solid var(--fp-line); }
	.card:nth-child(2n):where(:not(#app *)) { border-right: 0; }
	.card-text { padding: 14px 14px 28px; font-size: 15px; min-height: 84px; }
}
/* Filter re-flows visible cards: borders follow visible order */
.card-grid.is-filtered .card:where(:not(#app *)) { border-right: 1px solid var(--fp-line); }

/* ==========================================================================
   Product page
   ========================================================================== */
.product:where(:not(#app *)) { background: #f6f6f6; }
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.product-main { padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px) clamp(48px, 6vw, 80px) max(var(--fp-gutter), calc((100vw - var(--fp-wrap)) / 2)); }
.product-ranges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.product-ranges a:where(:not(#app *)) { font-family: var(--fp-font-mono); font-size: 13px; text-decoration: none; padding: 5px 12px; border-radius: var(--fp-radius); border: 1px solid var(--fp-line); color: var(--fp-accent-text); background: var(--fp-white); }
.product-ranges a:hover:where(:not(#app *)) { border-color: var(--fp-accent-text); }
.product-title { font-size: clamp(34px, 3.8vw, 54px); margin-bottom: .6em; }
.product-desc { font-size: 16px; }
.product-block { margin-top: clamp(32px, 4vw, 48px); }
.product-block h2:where(:not(#app *)), .order-panel h2:where(:not(#app *)) { font-size: clamp(24px, 2.2vw, 32px); color: var(--fp-accent-text); }
.feature-list { margin: 0; display: grid; gap: 16px; }
.feature-list dt { font-weight: 700; color: var(--fp-dark); }
.feature-list dd { margin: 2px 0 0; font-size: 16px; }
.faq-list { border-top: 1px solid var(--fp-line); }
.faq { border-bottom: 1px solid var(--fp-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 14px 0; font-weight: 700; color: var(--fp-dark); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; color: var(--fp-accent-text); transition: transform .25s; }
.faq[open] summary .icon { transform: rotate(45deg); }
.faq p:where(:not(#app *)) { margin: 0 0 16px; font-size: 16px; }
.faq-footer { margin-top: 14px; font-size: 16px; }
.grade-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fp-line); }
.grade-list li { border-bottom: 1px solid var(--fp-line); padding: 11px 0; font-size: 16px; }
.grade-name { display: block; }
.grade-note { display: block; font-size: 14px; color: color-mix(in srgb, var(--fp-text) 75%, white); margin-top: 3px; }
.order-panel { margin: clamp(40px, 5vw, 64px) calc(clamp(24px, 5vw, 72px) * -1) 0 calc(max(var(--fp-gutter), calc((100vw - var(--fp-wrap)) / 2)) * -1); padding: clamp(36px, 4vw, 56px) clamp(24px, 5vw, 72px) clamp(36px, 4vw, 56px) max(var(--fp-gutter), calc((100vw - var(--fp-wrap)) / 2)); background: var(--fp-white); }
.product-media { position: sticky; top: var(--fp-header); }
.admin-bar .product-media { top: calc(var(--fp-header) + 32px); }
.slider:where(:not(#app *)) { position: relative; background: var(--fp-grey); }
.slides { position: relative; aspect-ratio: 1 / 1.05; overflow: hidden; }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s; }
.slide.is-active:where(:not(#app *)) { opacity: 1; }
.slide img:where(:not(#app *)) { width: 100%; height: 100%; object-fit: cover; }
.slider-nav { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 8px; }
.slider-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); border: 1px solid var(--fp-line); color: var(--fp-dark); cursor: pointer; }
.slider-btn:hover { background: var(--fp-dark); color: var(--fp-white); }
.slider-btn .icon { width: 20px; height: 20px; }
.slider-count { position: absolute; left: 20px; bottom: 20px; margin: 0; font-family: var(--fp-font-mono); font-size: 13px; background: rgba(255, 255, 255, .9); padding: 5px 12px; border-radius: var(--fp-radius); }
.slider-count:empty { display: none; }
.product-media-empty { aspect-ratio: 1; background: linear-gradient(135deg, var(--fp-grey), var(--fp-soft)); }
@media (max-width: 900px) {
	.product-grid { grid-template-columns: 1fr; }
	.product-media { position: static; order: -1; }
	.product-main { padding: 32px var(--fp-gutter) 48px; }
	.order-panel { margin: 40px calc(var(--fp-gutter) * -1) 0; padding: 32px var(--fp-gutter); }
}

.related { background: var(--fp-white); padding-top: clamp(40px, 5vw, 64px); }
.related .eyebrow { text-transform: uppercase; }

/* ==========================================================================
   Call-to-action band
   ========================================================================== */
.cta-band { background: var(--fp-grey); text-align: center; padding: clamp(64px, 8vw, 110px) 0; }
.cta-band h2:where(:not(#app *)) { font-size: clamp(32px, 4vw, 56px); }
.cta-band p:where(:not(#app *)) { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.4; max-width: 30ch; margin: 0 auto 1.4em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--fp-dark); color: var(--fp-white); padding: clamp(48px, 6vw, 80px) 0 32px; font-size: 15px; }
.site-footer a:where(:not(#app *)) { color: var(--fp-white); text-decoration: none; }
.site-footer a:hover:where(:not(#app *)) { color: var(--fp-accent); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-label { color: var(--fp-accent); font-weight: 700; margin: 0 0 .4em; }
.footer-contact p:where(:not(#app *)) { margin: 0 0 .3em; }
.footer-contact .footer-label:not(:first-child) { margin-top: 1.2em; }
.footer-brand { font-family: var(--fp-font-head); font-size: 24px; font-weight: 700; }
.footer-menu, .legal-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin: 0 0 .35em; }
.footer-bottom { display: flex; justify-content: flex-end; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 96px); font-size: 13px; color: rgba(255, 255, 255, .8); }
.footer-bottom p:where(:not(#app *)) { margin: 0; }
.legal-menu { display: flex; gap: 14px; }
.legal-menu li::before { content: "|"; margin-right: 14px; opacity: .6; }
@media (max-width: 860px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-contact { grid-column: 1 / -1; }
	.footer-bottom { justify-content: flex-start; }
}

/* ==========================================================================
   Pages, posts, listings
   ========================================================================== */
.page-content { padding: clamp(40px, 6vw, 80px) 0; }
.page-content--bare { padding: 0; }
.entry-content > * { max-width: 820px; margin-left: auto; margin-right: auto; padding-left: var(--fp-gutter); padding-right: var(--fp-gutter); box-sizing: content-box; }
.entry-content > .alignwide { max-width: var(--fp-wrap); }
/* WooCommerce gives its cart and checkout blocks width: 100%; with the
   theme's side padding on a content-box that ran 80px past the window. */
.entry-content > :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) { box-sizing: border-box; max-width: calc(var(--fp-wrap) + 2 * var(--fp-gutter)); }
.entry-content > .alignfull { max-width: none; padding-left: 0; padding-right: 0; }
.entry-content > .alignfull.fp-band { padding-left: var(--fp-gutter); padding-right: var(--fp-gutter); box-sizing: border-box; }
.entry-content > * + * { margin-top: 1.2em; }
.entry-content h2:where(:not(#app *)), .entry-content h3:where(:not(#app *)) { margin-top: 1.6em; }
.entry-content .fp-eyebrow + .wp-block-heading, .entry-content .wp-block-media-text__content > :first-child, .entry-content .wp-block-column > :first-child { margin-top: 0; }
.entry-content ul, .entry-content ol { padding-left: calc(var(--fp-gutter) + 1.2em); }
.entry-content img:where(:not(#app *)) { border-radius: 4px; }
.entry-content blockquote { border-left: 3px solid var(--fp-accent); padding-left: 20px; font-size: 1.15em; }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content th, .entry-content td { border-bottom: 1px solid var(--fp-line); padding: 10px 8px; text-align: left; }
.product .entry-content > *:where(:not(#app *)) { max-width: none; padding: 0; margin-left: 0; margin-right: 0; }

/* Block pattern styles */
.fp-band { padding-top: clamp(56px, 7vw, 96px) !important; padding-bottom: clamp(56px, 7vw, 96px) !important; }
.fp-band--dark { background: var(--fp-dark); color: var(--fp-white); }
.fp-band--dark h1:where(:not(#app *)), .fp-band--dark h2:where(:not(#app *)), .fp-band--dark h3:where(:not(#app *)) { color: var(--fp-white); }
.fp-band--grey { background: var(--fp-grey); }
.fp-band--soft { background: var(--fp-soft); }
.fp-band > * { max-width: var(--fp-wrap); margin-left: auto !important; margin-right: auto !important; }
.fp-eyebrow { font-family: var(--fp-font-mono); font-size: 15px; color: var(--fp-accent-text); }
.fp-band--dark .fp-eyebrow { color: var(--fp-accent); }
.fp-display { font-size: clamp(40px, 6vw, 84px) !important; line-height: 1 !important; }
.fp-lead { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.45; max-width: 44ch; }
.fp-features { gap: clamp(20px, 3vw, 44px) !important; }
.fp-feature { border-top: 1px solid var(--fp-line); padding-top: 18px; }
.fp-feature h3:where(:not(#app *)) { font-size: 20px; margin-top: 0 !important; }
.fp-two { gap: 0 !important; }
.fp-panel { padding: clamp(36px, 5vw, 72px); }
.fp-panel--soft { background: var(--fp-soft); }
.fp-media-text .wp-block-media-text__content { padding: clamp(24px, 4vw, 64px); }
.fp-media-text img:where(:not(#app *)) { border-radius: 4px; }

.listing { padding: clamp(40px, 6vw, 80px) 0; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 36px); }
.post-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--fp-text); }
.post-card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--fp-grey); }
.post-card-img img:where(:not(#app *)) { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--fp-ease); }
.post-card-link:hover .post-card-img img:where(:not(#app *)) { transform: scale(1.04); }
.post-card-body { display: block; padding-top: 16px; }
.post-card-body .eyebrow { display: block; margin-bottom: .5em; font-size: 13px; }
.post-card-title { display: block; font-family: var(--fp-font-head); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--fp-dark); margin-bottom: .4em; }
.post-card-link:hover .post-card-title { color: var(--fp-accent-text); }
.post-card-excerpt { display: block; font-size: 15px; }
.post-hero { margin: 0; max-height: 70vh; overflow: hidden; }
.post-hero img:where(:not(#app *)) { width: 100%; height: auto; object-fit: cover; }
.post-nav { padding-bottom: 64px; }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--fp-line); padding-top: 24px; }
.post-navigation a:where(:not(#app *)) { text-decoration: none; display: flex; flex-direction: column; color: var(--fp-dark); font-weight: 600; }
.post-navigation .nav-next { text-align: right; }
.post-navigation .eyebrow { margin-bottom: .3em; }
.navigation.pagination { margin-top: 48px; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); text-decoration: none; margin-right: 6px; font-family: var(--fp-font-mono); font-size: 14px; color: var(--fp-dark); }
.nav-links .page-numbers.current:where(:not(#app *)) { background: var(--fp-dark); color: var(--fp-white); border-color: var(--fp-dark); }
.search-again { margin-bottom: 36px; }
.not-found-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Contact */
.contact-wrap { padding: clamp(40px, 6vw, 80px) 0; }
.fp-grid-top { padding-top: clamp(24px, 4vw, 40px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.contact-main > * { max-width: none; padding: 0; margin-left: 0; margin-right: 0; }
.contact-product { background: var(--fp-soft); padding: 12px 18px; border-radius: 8px; }
.contact-card { background: var(--fp-dark); color: var(--fp-white); padding: clamp(28px, 3vw, 44px); border-radius: 8px; }
.contact-card a:where(:not(#app *)) { color: var(--fp-white); }
.contact-card a:hover:where(:not(#app *)) { color: var(--fp-accent); }
.contact-card .footer-label:not(:first-child) { margin-top: 1.2em; }

/* Quote form (inc/quote-form.php), in place of the Contact page's content. */
.fp-qf { scroll-margin-top: 120px; }
.fp-qf-title:where(:not(#app *)) { margin: 0 0 8px; font-size: clamp(26px, 3vw, 34px); }
.fp-qf-intro { margin: 0 0 20px; color: var(--fp-text); }
.fp-qf-items { margin: 0 0 24px; }
.fp-qf-item { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); background: var(--fp-white); }
.fp-qf-item img { flex: none; width: 88px; height: 88px; object-fit: contain; border-radius: 6px; background: var(--fp-soft); }
.fp-qf-item p { margin: 0; }
.fp-qf-item__name { font-weight: 600; font-size: 17px; color: var(--fp-dark); }
.fp-qf-item__meta { margin-top: 4px !important; font-size: 14px; line-height: 1.5; }
.fp-qf-item__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px !important; font-size: 14px; }
.fp-qf-item__links a, .fp-qf-other a, .fp-qf-hint a { color: var(--fp-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.fp-qf-alert { margin: 0 0 20px; padding: 12px 16px; border-left: 4px solid #b42318; border-radius: 8px; background: #fdecec; color: #8a1f1f; }
.fp-qf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.fp-qf-field { margin: 0 0 16px; }
.fp-qf-field label { display: block; margin: 0 0 6px; font-size: 14px; }
.fp-qf-field.has-error :is(input, select, textarea):where(:not(#app *)) { border-color: #b42318; }
.fp-qf-error { display: block; margin-top: 6px; font-size: 14px; color: #b42318; }
.fp-qf-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--fp-text); opacity: .8; }
.fp-qf-account { margin: 4px 0 20px; padding: 14px 16px; border-radius: var(--fp-radius); background: var(--fp-soft); }
.fp-qf-account label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.fp-qf-account input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--fp-dark); }
.fp-qf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fp-qf-send { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.fp-qf-send .fp-qf-hint { margin: 0; }
.fp-qf-other { margin: 24px 0 0; font-size: 14px; }
@media (max-width: 640px) {
	.fp-qf-grid { grid-template-columns: 1fr; }
	.fp-qf-item { align-items: flex-start; }
	.fp-qf-item img { width: 64px; height: 64px; }
	.fp-qf-send .btn { width: 100%; justify-content: center; }
}

/* After a quote request or an order (woocommerce/checkout/thankyou.php). */
.entry-content > .woocommerce:has(> .fp-ty) { max-width: var(--fp-wrap); }
.fp-ty { margin: 0 auto; }
.fp-ty :is(.fp-ty-items, .fp-ty-steps, .fp-ty-tiles) { padding-left: 0; }
.fp-ty h3:where(:not(#app *)) { margin: 0 0 14px; font-size: 20px; color: var(--fp-dark); }
.fp-ty-head { display: flex; gap: 20px; align-items: flex-start; margin: 0 0 32px; }
.fp-ty-tick { flex: none; display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 50%; background: var(--fp-accent-text); color: #fff; }
.fp-ty .fp-ty-title:where(:not(#app *)) { margin: 4px 0 8px; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; }
.fp-ty-lead { margin: 0 0 4px; font-family: var(--fp-font-mono); font-size: 14px; letter-spacing: .04em; color: var(--fp-accent-text); }
.fp-ty-sub { margin: 0; }
.fp-ty-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px; align-items: start; }
.fp-ty-main, .fp-ty-side { display: grid; gap: 20px; }
.fp-ty-box, .fp-ty-card { padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--fp-line); border-radius: var(--fp-radius); background: var(--fp-white); }
.fp-ty-card p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.fp-ty-card p:last-child { margin-bottom: 0; }
.fp-ty-card--dark { border-color: var(--fp-dark); background: var(--fp-dark); color: var(--fp-white); }
.fp-ty-card--dark h3:where(:not(#app *)) { color: var(--fp-white); }
.fp-ty-card--dark .fp-ty-link { color: var(--fp-white); }
.fp-ty-card--dark .btn:where(:not(#app *)) { background: var(--fp-accent); border-color: var(--fp-accent); color: var(--fp-dark); }
.fp-ty-card--dark .btn:hover:where(:not(#app *)) { background: var(--fp-white); border-color: var(--fp-white); }
.fp-ty-card--dark label { color: var(--fp-white); }
.fp-ty-card--dark .fp-qf-error { color: #ffb4a8; }
.fp-ty-card__email { font-weight: 600; word-break: break-all; }
.fp-ty-card input[type="password"]:where(:not(#app *)) { box-sizing: border-box; width: 100%; padding: 12px 16px; border: 1px solid var(--fp-line); border-radius: 8px; font: inherit; color: var(--fp-text); background: var(--fp-white); }
.fp-ty-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px !important; }
.fp-ty-link:where(:not(#app *)) { padding: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--fp-accent-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fp-ty-items { list-style: none; margin: 0; padding: 0; }
.fp-ty-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--fp-line); }
.fp-ty-item:first-child { border-top: 0; padding-top: 0; }
.fp-ty-item img { width: 96px; height: 96px; object-fit: contain; border-radius: 8px; background: var(--fp-soft); }
.fp-ty-item p { margin: 0; }
.fp-ty-item__name { font-weight: 600; color: var(--fp-dark); }
.fp-ty-item__name span { font-weight: 400; opacity: .7; }
.fp-ty-item__meta { margin-top: 4px !important; font-size: 14px; line-height: 1.5; }
.fp-ty-item__meta span { font-weight: 500; }
.fp-ty-item__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px !important; font-size: 14px; }
.fp-ty-item__links a { color: var(--fp-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.fp-ty-item__price { font-weight: 500; white-space: nowrap; }
.fp-ty-totals { margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--fp-line); }
.fp-ty-totals div { display: flex; justify-content: space-between; gap: 20px; padding: 4px 0; }
.fp-ty-totals dt { font-weight: 500; }
.fp-ty-totals dd { margin: 0; text-align: right; }
.fp-ty-totals__order_total { font-size: 18px; font-weight: 600; }
.fp-ty-steps { margin: 0; padding: 0; list-style: none; counter-reset: fp-step; }
.fp-ty-steps li { position: relative; padding: 0 0 16px 44px; counter-increment: fp-step; line-height: 1.55; }
.fp-ty-steps li:last-child { padding-bottom: 0; }
.fp-ty-steps li::before { content: counter(fp-step); position: absolute; left: 0; top: -2px; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid var(--fp-line); border-radius: 50%; font-family: var(--fp-font-mono); font-size: 14px; background: var(--fp-white); }
.fp-ty-steps li.is-now::before { border-color: var(--fp-accent-text); background: var(--fp-accent-text); color: #fff; }
.fp-ty-steps strong { color: var(--fp-dark); }
.fp-ty-more { margin: 40px 0 0; }
.fp-ty-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.fp-ty-tile { position: relative; display: block; height: 100%; padding: 22px 48px 22px 22px; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); background: var(--fp-soft); color: var(--fp-text); text-decoration: none; transition: border-color .2s, background .2s; }
.fp-ty-tile:hover { border-color: var(--fp-accent-text); background: var(--fp-white); }
.fp-ty-tile strong { display: block; margin: 0 0 6px; color: var(--fp-dark); }
.fp-ty-tile span { display: block; font-size: 14px; line-height: 1.5; }
.fp-ty-tile .icon { position: absolute; right: 20px; top: 24px; width: 18px; height: 18px; color: var(--fp-accent-text); }
@media (max-width: 860px) { .fp-ty-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
	.fp-ty-head { gap: 14px; }
	.fp-ty-tick { width: 44px; height: 44px; }
	.fp-ty-item { grid-template-columns: 64px minmax(0, 1fr); }
	.fp-ty-item img { width: 64px; height: 64px; }
	.fp-ty-item__price { grid-column: 2; }
}

/* My account → My designs (inc/accounts.php). */
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); overflow: hidden; }
.woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--fp-line); }
.woocommerce-MyAccount-navigation a:where(:not(#app *)) { display: block; padding: 12px 16px; color: var(--fp-text); text-decoration: none; }
.woocommerce-MyAccount-navigation a:hover:where(:not(#app *)) { background: var(--fp-soft); }
.woocommerce-MyAccount-navigation .is-active a:where(:not(#app *)) { background: var(--fp-dark); color: var(--fp-white); font-weight: 500; }
.entry-content .fp-designs { padding-left: 0; }
.fp-designs { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.fp-design { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; align-items: start; padding: 18px; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); background: var(--fp-white); }
.fp-design img { width: 140px; height: 140px; object-fit: contain; border-radius: 8px; background: var(--fp-soft); }
.fp-design p { margin: 0 0 6px; }
.fp-design__name { font-weight: 600; color: var(--fp-dark); }
.fp-design__meta { font-size: 14px; line-height: 1.5; }
.fp-design__meta a { color: var(--fp-accent-text); text-decoration: underline; }
.fp-design__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px !important; }
@media (max-width: 520px) { .fp-design { grid-template-columns: 80px minmax(0, 1fr); } .fp-design img { width: 80px; height: 80px; } }

/* "Find us" map (inc/map.php) */
.fp-map { padding: clamp(48px, 7vw, 96px) 0; background: var(--fp-soft); }
.fp-map-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.fp-map-title { margin: 6px 0 16px; font-size: clamp(28px, 3vw, 40px); }
.fp-map-address { font-style: normal; font-size: 18px; line-height: 1.55; color: var(--fp-text); }
.fp-map-phone { margin: 10px 0 0; }
.fp-map-phone a:where(:not(#app *)) { color: var(--fp-accent-text); }
.fp-map-actions { margin: 24px 0 0; }
.fp-map-frame { overflow: hidden; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); background: var(--fp-white); aspect-ratio: 16 / 10; }
.fp-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) {
	.fp-map-grid { grid-template-columns: 1fr; }
	.fp-map-frame { aspect-ratio: 4 / 3; }
}
.contact-card p:where(:not(#app *)) { margin-bottom: .3em; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* Forms (works with common form plugins) */
input[type="text"]:where(:not(#app *)), input[type="email"]:where(:not(#app *)), input[type="tel"]:where(:not(#app *)), input[type="url"]:where(:not(#app *)), input[type="number"]:where(:not(#app *)), textarea:where(:not(#app *)), select:not(.fp-filter):where(:not(#app *)) {
	font: inherit; color: var(--fp-text); width: 100%; padding: 12px 16px; border: 1px solid var(--fp-line); border-radius: 8px; background: var(--fp-white);
}
textarea:where(:not(#app *)) { min-height: 140px; }
label:where(:not(#app *)) { font-weight: 500; }

/* The enquiry form's fields (Contact Form 7, label.amfield): the symbol sits
   inside the box on the left, at the first line, and the text starts after it.
   A fixed top rather than centring, so an error line under the box does not
   move it. */
.amfield { position: relative; display: block; }
.amfield__icon { position: absolute; top: 15px; left: 16px; color: var(--fp-accent-text); pointer-events: none; z-index: 1; }
.amfield :is(input, textarea):where(:not(#app *)) { padding-left: 46px; }

/* WooCommerce's own forms (log in, register, lost password, account details,
   addresses) in the same boxes as every other field. Woo's stylesheet gives
   them a thin dark border, and the password boxes the browser's small font,
   which made them shorter than the rest. Room is kept for the eye that shows
   the password. */
html :is(.woocommerce, .woocommerce-page) form .form-row :is(.input-text, input[type="password"], select):where(:not(#app *)) {
	font: inherit; color: var(--fp-text); width: 100%; padding: 12px 16px; border: 1px solid var(--fp-line); border-radius: 8px; background: var(--fp-white); line-height: 1.5;
}
html :is(.woocommerce, .woocommerce-page) form .form-row .password-input input:where(:not(#app *)) { padding-right: 46px; }
html :is(.woocommerce, .woocommerce-page) form .form-row .show-password-input { top: 50%; transform: translateY(-50%); right: 14px; }

/* Comments */
.comments { margin-top: 48px; }
.comment-list { list-style: none; padding: 0; }
.comment-body { border-bottom: 1px solid var(--fp-line); padding: 16px 0; }

/* WooCommerce wrapper */
.fp-woo { padding: clamp(40px, 6vw, 80px) 0; }

/* WooCommerce catalogue: prices on tiles, the order form on product pages */
.card-price { display: block; margin-top: 6px; font-size: 14px; color: var(--fp-accent-text); }
/* WooCommerce always prints an (empty) notices wrapper for its scripts. */
.fp-notices:not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info)) { display: none; }
.fp-notices { padding-top: 24px; }
.fp-buy { margin: 4px 0 clamp(28px, 3vw, 40px); padding: 22px 24px; border: 1px solid var(--fp-line); border-radius: 14px; background: var(--fp-white); }
.fp-buy .price { margin: 0 0 12px; font-family: var(--fp-font-head); font-size: clamp(22px, 2vw, 28px); color: var(--fp-dark); }
.fp-buy .price del { opacity: .5; font-size: .7em; margin-right: 6px; }
.fp-buy-summary { margin-bottom: 10px; font-size: 16px; line-height: 1.6; color: var(--fp-text); }
.fp-buy-summary p { margin: 0 0 8px; }
.fp-buy form.cart:where(:not(#app *)) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0; }
.fp-buy table.variations:where(:not(#app *)) { width: 100%; border: 0; margin: 0 0 4px; border-collapse: collapse; }
.fp-buy table.variations th, .fp-buy table.variations td { display: block; padding: 0; border: 0; text-align: left; }
.fp-buy table.variations label { display: block; margin-bottom: 6px; font-family: var(--fp-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fp-text); }
/* The run size field takes the row; "Clear" sits beside it, centred on it. */
.fp-buy table.variations td.value { display: flex; align-items: center; gap: 14px; }
.fp-buy table.variations select:where(:not(#app *)) { flex: 1; min-width: 0; width: 100%; margin: 0; font: inherit; padding: 12px 16px; border-radius: var(--fp-radius); border: 1px solid var(--fp-line); background: var(--fp-white); color: var(--fp-text); }
.fp-buy .reset_variations { flex: none; margin: 0; font-size: 14px; color: var(--fp-accent-text); }
.fp-buy .single_variation_wrap { width: 100%; }
.fp-buy .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fp-buy .woocommerce-variation-price .price { font-size: 20px; margin: 8px 0; }
.fp-buy .quantity input.qty:where(:not(#app *)) { width: 84px; font: inherit; padding: 12px 10px; border-radius: var(--fp-radius); border: 1px solid var(--fp-line); text-align: center; }
.fp-buy .single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; }
.fp-buy .stock { margin: 6px 0; font-size: 14px; }

/* Products without a price (inc/price-request.php): "Design your own" and
   "Request a quote" in place of the order form. */
.fp-buy .price .price-request { font-size: .8em; }
.fp-quote-note { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--fp-text); opacity: .8; }
.fp-quote-other { margin: 14px 0 0; }
.fp-quote-other a { color: var(--fp-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.fp-quote-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 28px; }
@media (max-width: 480px) { .fp-quote-actions .btn { flex: 1 1 100%; justify-content: center; } }

/* Clearance (inc/clearance.php) */
:root { --fp-sale: #c2410c; }
.fp-clearance-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--fp-sale); color: #fff; font-family: var(--fp-font-mono); font-size: 12px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.fp-clearance-badge--card { position: absolute; top: 12px; left: 12px; z-index: 1; }
.product-clearance { margin: 0 0 12px; }
.card-price del, .fp-buy .price del { opacity: .55; margin-right: 6px; }
.card-price ins, .fp-buy .price ins { text-decoration: none; }
.fp-buy .price ins, .card-price ins { color: var(--fp-sale); }
.fp-clearance-note { font-weight: 500; }
.entry-content > .fp-clearance-grid { box-sizing: border-box; width: calc(100% - 2 * var(--fp-gutter)); max-width: var(--fp-wrap); padding: 0; margin-top: 32px; margin-bottom: 48px; border-left: 1px solid var(--fp-line); }
.fp-clearance-grid .card:where(:not(#app *)) { border-right: 1px solid var(--fp-line); }
.fp-clearance-empty { padding: 24px 0 40px; }

/* Specials pop-up (inc/specials.php) */
.fp-specials { width: min(760px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 18px; background: var(--fp-white); color: var(--fp-text); box-shadow: 0 30px 80px rgba(10, 25, 23, .35); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .25s var(--fp-ease), transform .25s var(--fp-ease); }
.fp-specials.is-open { opacity: 1; transform: none; }
.fp-specials:not(:has(.has-image)) { width: min(520px, calc(100% - 32px)); }
.fp-specials::backdrop { background: rgba(10, 25, 23, .55); }
.fp-specials__box { position: relative; display: grid; }
.fp-specials__box.has-image { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.fp-specials__img { background: var(--fp-soft); }
.fp-specials__img img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: 0; }
.fp-specials__body { padding: 40px 36px 28px; }
.fp-specials__title:where(:not(#app *)) { margin: 0 32px 12px 0; font-family: var(--fp-font-head); font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--fp-dark); }
.fp-specials__text { font-size: 16px; line-height: 1.6; }
.fp-specials__text p { margin: 0 0 .8em; }
.fp-specials__cta { margin: 20px 0 0; }
.fp-specials__later { margin: 14px 0 0; }
.fp-specials__later button:where(:not(#app *)) { padding: 0; border: 0; background: none; color: var(--fp-text); opacity: .75; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.fp-specials__close:where(:not(#app *)) { position: absolute; top: 12px; right: 12px; z-index: 1; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--fp-dark); cursor: pointer; }
.fp-specials__close:hover:where(:not(#app *)) { background: var(--fp-soft); }
@media (max-width: 640px) {
	.fp-specials__box.has-image { grid-template-columns: 1fr; }
	.fp-specials__img img { min-height: 0; height: 180px; }
	.fp-specials__body { padding: 28px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { .fp-specials { transition: none; } }
html :is(body.woocommerce, body.woocommerce-page, .woocommerce) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { list-style: none; margin: 0 0 16px; padding: 14px 18px; border: 0; border-left: 4px solid var(--fp-accent-text); border-radius: 10px; background: var(--fp-soft); color: var(--fp-text); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
html :is(body.woocommerce, body.woocommerce-page, .woocommerce) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { content: none; }
html :is(body.woocommerce, body.woocommerce-page, .woocommerce) .woocommerce-error { background: #fdecec; color: #8a1f1f; border-left-color: #b32d2e; }
.woocommerce-message .button { order: 2; }
/* WooCommerce's buttons in FlexPack's style (its own sheet makes them purple).
   The `html` and body-class prefixes only lift specificity over woocommerce.css. */
html :is(body.woocommerce, body.woocommerce-page, .woocommerce) :is(a.button, button.button, input.button, #respond input#submit),
html :is(body.woocommerce, body.woocommerce-page, .woocommerce) :is(a.button, button.button, input.button).alt,
html body :is(.wc-block-components-button:not(.is-link), .wp-block-woocommerce-cart .wc-block-cart__submit-button) {
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	font-family: var(--fp-font-btn); font-size: 15px; font-weight: 500; line-height: 1;
	padding: 14px 26px; border-radius: var(--fp-radius);
	border: 1px solid var(--fp-dark); background: var(--fp-dark); color: var(--fp-white);
	text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
html :is(body.woocommerce, body.woocommerce-page, .woocommerce) :is(a.button, button.button, input.button, #respond input#submit):hover,
html :is(body.woocommerce, body.woocommerce-page, .woocommerce) :is(a.button, button.button, input.button).alt:hover,
html body .wc-block-components-button:not(.is-link):hover { background: var(--fp-accent-text); border-color: var(--fp-accent-text); color: var(--fp-white); }
html :is(body.woocommerce, body.woocommerce-page, .woocommerce) :is(button.button, a.button).alt:is(.disabled, :disabled),
html :is(body.woocommerce, body.woocommerce-page, .woocommerce) :is(button.button, a.button).alt:is(.disabled, :disabled):hover { background: var(--fp-dark); border-color: var(--fp-dark); color: var(--fp-white); opacity: .4; cursor: not-allowed; }

/* Header tools: favourites and cart with counts */
a.icon-btn:where(:not(#app *)) { text-decoration: none; position: relative; }
/* The cart total beside the bag, as on the demo; phones keep the icon only. */
.tool-cart.has-total:where(:not(#app *)) { width: auto; grid-auto-flow: column; gap: 8px; padding: 0 4px 0 10px; border-radius: 22px; }
.tool-cart.has-total .tool-count { right: auto; left: 24px; }
.tool-total { font-size: 14px; font-weight: 600; white-space: nowrap; }
@media (max-width: 1240px) {
	.tool-cart.has-total:where(:not(#app *)) { width: 44px; padding: 0; }
	.tool-cart.has-total .tool-count { left: auto; right: 0; }
	.tool-total { display: none; }
}
.tool-count { position: absolute; top: 3px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--fp-accent); color: var(--fp-dark); font: 600 11px/18px var(--fp-font-body); text-align: center; }
.tool-count[hidden] { display: none; }
.nav-favs { display: none; }
@media (max-width: 1240px) {
	.nav-favs { display: inline-flex; align-items: center; gap: 10px; color: var(--fp-white); text-decoration: none; font-size: 17px; }
	.nav-favs .icon { width: 20px; height: 20px; }
	.nav-favs .tool-count { position: static; }
}
@media (max-width: 600px) { .tool-favs { display: none; } }
@media (max-width: 480px) { .site-brand img:where(:not(#app *)) { max-height: 38px; } }

/* Favourite hearts */
.card { position: relative; }
.fav-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fp-dark); cursor: pointer; transition: transform .15s, color .15s; }
.fav-btn .icon { width: 22px; height: 22px; }
.fav-btn:hover { transform: scale(1.08); }
/* A favourite that could not be saved says so, briefly, bottom centre. */
.fav-note { position: fixed; left: 50%; bottom: 24px; z-index: 1000; transform: translateX(-50%); max-width: calc(100% - 32px); margin: 0; padding: 12px 18px; border-radius: 10px; background: var(--fp-dark); color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.fav-note[hidden] { display: none; }
.fav-btn[aria-pressed="true"] { color: #d6455d; }
.fav-btn[aria-pressed="true"] .icon { fill: currentColor; }
.fav-btn--card { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.product-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fav-btn--page { flex: none; margin-top: 6px; border: 1px solid var(--fp-line); background: var(--fp-white); }
.fav-page .fav-empty { padding: 24px 0 48px; }
.fav-page .card-grid { margin-bottom: 40px; }

/* Products mega menu (inc/mega-menu.php) */
@media (min-width: 1241px) {
	.header-inner { position: relative; }
	.site-nav .menu > li.has-mega:where(:not(#app *)) { position: static; }
	.site-nav .mega-panel { left: var(--fp-gutter); right: var(--fp-gutter); min-width: 0; padding: 28px 32px 22px; max-height: calc(100vh - var(--fp-header) - 40px); overflow-y: auto; }
	.mega-cols { columns: 4 200px; column-gap: 36px; }
}
.mega-group { break-inside: avoid; margin-bottom: 18px; }
.mega-title { margin: 0 0 8px; font-family: var(--fp-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.mega-title a, .mega-title { color: var(--fp-accent); text-decoration: none; }
.mega-group ul { list-style: none; margin: 0; padding: 0; }
.site-nav .mega-group a:where(:not(#app *)) { padding: 3px 0; font-size: 14px; line-height: 1.35; display: block; }
.site-nav .mega-title a:where(:not(#app *)) { padding: 0; font-size: 12px; color: var(--fp-accent); }
.mega-all { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--fp-line-light); }
.site-nav .mega-all a:where(:not(#app *)) { display: inline-flex; align-items: center; gap: 8px; padding: 0; color: var(--fp-accent); }
.mega-all .icon { width: 16px; height: 16px; }
@media (max-width: 1240px) {
	.mega-panel { padding: 4px 0 14px; }
	.mega-cols { columns: 1; }
	.site-nav .mega-group a:where(:not(#app *)) { font-size: 16px; padding: 6px 0; color: rgba(255, 255, 255, .85); }
}

/* A link typed inside Elementor text looks like a link. Whole-paragraph
   links ("Read More") carry Elementor's own class and keep their style. */
.e-paragraph-base a:not([class]) { color: var(--fp-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.e-paragraph-base a:not([class]):hover { color: var(--fp-dark); }

/* Home hero (Elementor): its two slides are an Elementor Tabs element. The
   tab buttons show as dots, not as labelled pills, and main.js moves to the
   next slide every few seconds. Their labels stay for screen readers. */
body.home .elementor > :first-child > .e-tabs-base > .e-tabs-menu-base { gap: 4px; }
body.home .elementor > :first-child > .e-tabs-base > .e-tabs-menu-base > .e-tab-base {
	position: relative; width: 28px; height: 28px; min-width: 0; padding: 0;
	border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
body.home .elementor > :first-child > .e-tabs-base > .e-tabs-menu-base > .e-tab-base::before {
	content: ""; position: absolute; top: 9px; left: 9px; width: 10px; height: 10px; border-radius: 50%;
	background: rgba(255, 255, 255, .45); transition: background-color .2s, transform .2s;
}
body.home .elementor > :first-child > .e-tabs-base > .e-tabs-menu-base > .e-tab-base:hover::before { background: rgba(255, 255, 255, .8); }
body.home .elementor > :first-child > .e-tabs-base > .e-tabs-menu-base > .e-tab-base.e--selected::before { background: #fff; transform: scale(1.25); }
body.home .elementor > :first-child > .e-tabs-base > .e-tabs-menu-base > .e-tab-base:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
body.home .elementor > :first-child > .e-tabs-base > .e-tabs-menu-base > .e-tab-base > * {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body.home .elementor > :first-child > .e-tabs-base.fp-hero-moved .e-tab-content-base.e--selected { animation: fp-hero-in .7s ease both; }
@keyframes fp-hero-in { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	body.home .elementor > :first-child > .e-tabs-base.fp-hero-moved .e-tab-content-base.e--selected { animation: none; }
}