/*Theme Name: GeneratePress Child
Template: generatepress*/
blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, html, iframe, legend, li, ol, p, pre, textarea, ul {margin: 0;padding: 0;border: 0;}html {font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}main {display: block;}progress {vertical-align: baseline;}html {box-sizing: border-box;}*, ::after, ::before {box-sizing: inherit;}button, input, optgroup, select, textarea {font-family: inherit;font-size: 100%;margin: 0;}[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}::-moz-focus-inner {border-style: none;padding: 0;}:-moz-focusring {outline: 1px dotted ButtonText;}body, button, input, select, textarea {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight: 400;text-transform: none;line-height: 1.5;}table, td, th {border: 1px solid rgba(0, 0, 0, 0.1);}table {border-collapse: separate;border-spacing: 0;border-width: 1px 0 0 1px;margin: 0 0 1.5em;width: 100%;}td, th {padding: 8px;}th {border-width: 0 1px 1px 0;}td {border-width: 0 1px 1px 0;}ol, ul {margin: 0 0 1.5em 3em;}ul {list-style: disc;}ol {list-style: decimal;}li > ol, li > ul {margin-bottom: 0;margin-left: 1.5em;}b, strong {font-weight: 700;}cite, dfn, em, i {font-style: italic;}figure {margin: 0;}img {height: auto;max-width: 100%;}a {text-decoration: none;}.using-mouse:focus {outline: 0;}.using-mouse::-moz-focus-inner {border: 0;}.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;}.screen-reader-text:focus {background-color: #f1f1f1;border-radius: 3px;box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);clip: auto !important;clip-path: none;color: #21759b;display: block;font-size: 0.875rem;font-weight: 700;height: auto;left: 5px;line-height: normal;padding: 15px 23px 14px;text-decoration: none;top: 5px;width: auto;z-index: 100000;}.wp-caption {margin-bottom: 1.5em;max-width: 100%;position: relative;}.wp-caption img[class*="wp-image-"] {display: block;margin: 0 auto 0;max-width: 100%;}.wp-caption .wp-caption-text {font-size: 75%;padding-top: 5px;opacity: 0.8;}.wp-caption img {position: relative;vertical-align: bottom;}embed, iframe, object {max-width: 100%;}
body {background: var(--Secondary) !important;}
:root {
    --Primary: #00492c;
    --PrimaryMid: #115439;
    --PrimaryDeep: #003320;
    --Secondary: #fff;
    --Text: #102a1e;
    --Dark: #3a3a3a;
    --ParaText: #4e6357;
    --Grey: #757575;
    --GreyLight: #aeaeae;
    --FootText: #305934;
    --Rule: #efefef;
    --UspLine: #e3f0e1;
    --Fade: linear-gradient(180deg, rgba(58, 58, 58, 0), rgba(58, 58, 58, 0.8) 58%, var(--Dark));

    --Accent: #e1dc53;
    --AccentHover: #c9c22e;
    --AccentSoft: #f7f6d6;
    --AccentBright: #e0de29;
    --BG1: #f5f6f0;
    --BG2: #f5f5f5;
    --BG3: #ebe4da;
    --Cream: #f9f1e6;
    --Track: #d9d9d9;
    --Mint: #f2f8f2;
    --MintLine: #bae1bd;
    --AccentGlow: rgba(225, 220, 83, 0.16);
    --Danger: #c62828;
    --PrimaryShade: rgba(0, 73, 44, 0.7);
    --Backdrop: rgba(16, 42, 30, 0.45);
    --Tint: #f0f2ea;
    --Line: #e1e6dc;
    --Outline: #cfd8cb;
    --Radius: 8px;
    --RadiusMd: 14px;
    --RadiusLg: 22px;
    --RadiusXl: 28px;
    --RadiusCard: 16px;
    --RadiusMedia: 24px;
    --RadiusBtn: 6px;
    --Pill: 999px;
    --OnDark: rgba(255, 255, 255, 0.8);
    --OnDarkMuted: rgba(255, 255, 255, 0.55);
    --OnDarkLine: rgba(255, 255, 255, 0.18);
    --OnDarkFill: rgba(255, 255, 255, 0.07);
    --Shadow: 0 24px 50px -28px rgba(0, 51, 32, 0.5);
    --Ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --Glass: rgba(255, 255, 255, 0.9);
    --HeaderH: clamp(68px, 5.4vw, 103px);
    --HeaderStuckH: min(var(--HeaderH), 72px);
    --HeaderShrink: calc(var(--HeaderH) - var(--HeaderStuckH));
    --MenuGap: calc((var(--HeaderH) - 44px) / 2);
    --FontFamily: "Questrial", "Questrial Fallback", system-ui, sans-serif;
    --FontUi: "Raleway", "Raleway Fallback", system-ui, sans-serif;
    --FontHead: "Playfair Display", "Playfair Fallback", Georgia, serif;
    --FontSize: 16px;
    --FontLead: 17px;
    --FontSm: 15px;
    --FontXs: 14px;
    --FontLg: 20px;
    --FontMini: 13px;
    --FontWeight: 400;
    --LineHeight: 1.6;
    --ContainerWidth: 1780px;
    --ContainerWidthMobile: 560px;
    --PaddingDesktop: 50px 20px;
    --PaddingTablet: 40px 20px;
    --PaddingMobile: 32px 16px;
    --PaddingLRDesktop: 0 20px;
    --PaddingLRMobile: 0 16px;
    --ArrowUp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300492c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
    --ArrowRight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300492c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
/* Fonts: self-hosted latin variable woff2. The "Fallback" faces are metric-matched system fonts, so the swap causes no layout shift. */
@font-face {font-family: "Questrial";src: url("assets/fonts/Questrial-latin.woff2") format("woff2");font-weight: 400;font-style: normal;font-display: swap;}
@font-face {font-family: "Raleway";src: url("assets/fonts/Raleway-latin.woff2") format("woff2");font-weight: 300 700;font-style: normal;font-display: swap;}
@font-face {font-family: "Playfair Display";src: url("assets/fonts/PlayfairDisplay-latin.woff2") format("woff2");font-weight: 400 900;font-style: normal;font-display: swap;}
@font-face {font-family: "Questrial Fallback";src: local("Arial");size-adjust: 99.58%;ascent-override: 82.34%;descent-override: 21.09%;line-gap-override: 0%;}
@font-face {font-family: "Raleway Fallback";src: local("Arial");font-weight: 300 500;size-adjust: 100.94%;ascent-override: 93.13%;descent-override: 23.18%;line-gap-override: 0%;}
@font-face {font-family: "Raleway Fallback";src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");font-weight: 600 700;size-adjust: 100.94%;ascent-override: 93.13%;descent-override: 23.18%;line-gap-override: 0%;}
@font-face {font-family: "Playfair Fallback";src: local("Times New Roman");size-adjust: 110.83%;ascent-override: 97.63%;descent-override: 22.65%;line-gap-override: 0%;}
html, body {
    font-family: var(--FontFamily);
    font-size: var(--FontSize);
    font-weight: var(--FontWeight);
    line-height: var(--LineHeight);
    color: var(--Text);
    background: var(--Secondary);
    margin: 0;padding: 0;
}
body, button, input, select, textarea {font-family: var(--FontFamily);}
b, strong {font-family: var(--FontUi);font-weight: 700;}
h1, h2, h3, h4, h5, h6, p, table {
    margin: 0;
}
h1, .h1-size {font-family: var(--FontHead);font-size: clamp(30px, calc(11px + 2.05vw), 50px);font-weight: 800;line-height: 1.1;letter-spacing: -0.01em;color: var(--Primary);}
/* Section headings: light Raleway with the emphasised words (<strong>) in black Playfair */
h2, .h2-size {font-family: var(--FontUi);font-size: clamp(28px, calc(11px + 1.93vw), 48px);font-weight: 300;line-height: 1.2;letter-spacing: -0.005em;color: var(--Primary);}
h2 strong, .h2-size strong {font-family: var(--FontHead);font-weight: 900;letter-spacing: -0.01em;}
h3, h4, h5, h6, .h3-size, .h4-size, .h5-size, .h6-size {font-family: var(--FontUi);font-weight: 600;line-height: 1.3;letter-spacing: 0;color: var(--Text);}
h3, .h3-size {font-size: clamp(22px, calc(14px + 0.75vw), 28px);}
h4, .h4-size {font-size: clamp(19px, calc(14px + 0.55vw), 24px);}
h5, .h5-size {font-size: 21px;}
h6, .h6-size {font-size: var(--FontLead);}
p {font-size: var(--FontSize);font-weight: var(--FontWeight);line-height: var(--LineHeight);color: var(--Grey);}
a {color: var(--Primary);text-decoration: none;transition: color 0.2s;}
a:hover {color: var(--PrimaryDeep);}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {outline: 2px solid var(--Primary);outline-offset: 2px;}
.FeaturedSection :focus-visible, .IndustrySection :focus-visible, .HomeQuote :focus-visible, .CatSplitBox :focus-visible, .CatQuote :focus-visible, .ProductHeroMedia :focus-visible, .ProductRecSection :focus-visible, .ProductFaqHelp :focus-visible {outline-color: var(--Accent);}
.SubtitleGlobal {font-size: var(--FontLg);line-height: 1;letter-spacing: 0.1em;text-transform: uppercase;color: var(--Primary);}
button, input[type="button"], input[type="submit"], .Btn {width: fit-content;background: var(--Primary);font-family: var(--FontUi);font-size: var(--FontSm);font-weight: 700;line-height: 1;color: var(--Secondary);border: none;border-radius: var(--RadiusBtn);padding: 16.5px 24px;cursor: pointer;white-space: nowrap;transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;}
button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus, .Btn:hover, .Btn:focus {background: var(--PrimaryDeep);color: var(--Secondary);}
.section {max-width: var(--ContainerWidth);margin: 0 auto;padding: var(--PaddingDesktop);}
.section-nopadding {max-width: var(--ContainerWidth);margin: 0 auto;padding: var(--PaddingLRDesktop);}
@media (max-width: 1200px) {
    .section {padding: var(--PaddingTablet);}
}
@media (max-width: 767px) {
    :root {--FontSize: 15px;}
    h5, .h5-size {font-size: 18px;}
    h6, .h6-size {font-size: 16px;}
    button, input[type="button"], input[type="submit"], .Btn {font-size: var(--FontXs);padding: 15px 22px;}
    .section {padding: var(--PaddingMobile);}
    .mobile-section {max-width: var(--ContainerWidthMobile) !important;}
    .section-nopadding {padding: var(--PaddingLRMobile);}
}
.pt-0 {padding-top: 0;}
.pt-5 {padding-top: 5px;}
.pt-10 {padding-top: 10px;}
.pt-15 {padding-top: 15px;}
.pt-20 {padding-top: 20px;}
.pt-25 {padding-top: 25px;}
.pt-30 {padding-top: 30px;}
.pt-40 {padding-top: 40px;}
.pt-50 {padding-top: 50px;}
.pt-60 {padding-top: 60px;}
.pt-80 {padding-top: 80px;}
.pt-100 {padding-top: 100px;}
.pb-0 {padding-bottom: 0;}
.pb-5 {padding-bottom: 5px;}
.pb-10 {padding-bottom: 10px;}
.pb-15 {padding-bottom: 15px;}
.pb-20 {padding-bottom: 20px;}
.pb-25 {padding-bottom: 25px;}
.pb-30 {padding-bottom: 30px;}
.pb-40 {padding-bottom: 40px;}
.pb-50 {padding-bottom: 50px;}
.pb-60 {padding-bottom: 60px;}
.pb-80 {padding-bottom: 80px;}
.pb-100 {padding-bottom: 100px;}
.color-primary {color: var(--Primary);}
.color-secondary {color: var(--Secondary);}
.color-text {color: var(--Text);}
.color-accent {color: var(--Accent);}
.bg-primary {background-color: var(--Primary);}
.bg-secondary {background-color: var(--Secondary);}
.bg-text {background-color: var(--Text);}
.bg-accent {background-color: var(--Accent);}
.bg-bg1 {background-color: var(--BG1);}
.bg-bg2 {background-color: var(--BG2);}
.bg-bg3 {background-color: var(--BG3);}
.flex {display: flex;}
.flex-col {display: flex;flex-direction: column;}
.flex-row {display: flex;flex-direction: row;}
.flex-wrap {flex-wrap: wrap;}
.block {display: block;}
.items-center {align-items: center;}
.items-start {align-items: flex-start;}
.items-end {align-items: flex-end;}
.justify-center {justify-content: center;}
.justify-between {justify-content: space-between;}
.justify-end {justify-content: end;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.w-100 {width: 100%;}
.w-25 {width: 25%;}
.w-33 {width: 33.33%;}
.w-30 {width: 30%;}
.w-40 {width: 40%;}
.w-50 {width: 50%;}
.w-60 {width: 60%;}
.w-70 {width: 70%;}
.mw-100 {max-width: 100%;}
.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed;}
.static {position: static;}
.sticky {position: sticky;}

.SkipLink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999999;
    padding: 5px 10px;
    background: var(--Primary);
    color: var(--Secondary);
    text-decoration: none;
    font-family: var(--FontUi);
    font-weight: 600;
    border-radius: 0 0 var(--Radius) var(--Radius);
}
.SkipLink:focus {
    left: 50%;
    transform: translateX(-50%);
    outline: 2px solid var(--Accent);
    outline-offset: 2px;
}
html {
    scroll-padding-top: calc(var(--HeaderStuckH) + 24px);
}
.SiteHeader {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--Secondary);
    border-bottom: 1px solid var(--Dark);
    transition: transform 0.35s var(--Ease), background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
/* Scrolled state: combined.js adds .IsStuck once the ticker has left the screen */
.SiteHeader.IsStuck {
    border-color: var(--Line);
    box-shadow: var(--Shadow);
}
.HeaderContainer {
    transition: transform 0.35s var(--Ease);
}
.admin-bar .SiteHeader {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .SiteHeader {
        top: 46px;
    }
}
@media (max-width: 600px) {
    .admin-bar .SiteHeader {
        top: 0;
    }
}
.HeaderContainer.section {
    height: var(--HeaderH);
    padding: 0 20px;
    gap: 20px;
}
.HeaderLogo .custom-logo {
    width: 158px;
    display: block;
}
.HeaderActions {
    flex: 1;
    gap: clamp(4px, 0.8vw, 15px);
}
.SearchModule {
    flex: 0 1 540px;
    margin: 0 auto;
    min-width: 295px;
}
.SearchModule form.custom-live-search-form {
    position: relative;
    margin: 0 20px;
}
.SearchModule form.custom-live-search-form .search-input {
    flex: 1;
    padding: 10px 14px;
    outline: none;
    font-size: 16px;
    line-height: 0;
    border-radius: var(--Radius) 0 0 var(--Radius);
    border: none;
}
.SearchModule form.custom-live-search-form .search-btn {
    padding: 8px 15px;
    border-radius: 0 var(--Radius) var(--Radius) 0;
    border: none;
}
.ToggleIcon,
.ToggleIcon:hover,
.ToggleIcon:focus {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--Radius);
    background: none;
    color: var(--Primary);
}
.ToggleIcon.ToggleClose svg path {
    stroke: currentColor;
}
.PhoneLink.PhoneMobile,
.ToggleIcon.ToggleSearchOpen,
.ToggleIcon.ToggleSearchClose {
    display: flex;
}
@media (hover: hover) {
    .ToggleIcon:hover {
        background: var(--Tint);
        color: var(--Primary);
    }
}
.SiteHeader .DesktopBtn {
    margin-left: clamp(4px, 1.1vw, 21px);
    padding: 14.5px 22px;
}
.DesktopBtn.TabletBtn {
    display: none;
}
.HamburgerToggle {
    display: none;
    flex-direction: column;
    gap: 4px;
}
.HamburgerBar {
    display: flex;
    width: 22px;
    height: 2px;
    background: var(--Primary);
    transition: all 0.3s ease;
}
.HamburgerActive .HamburgerBar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.HamburgerActive .HamburgerBar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.HamburgerActive .HamburgerBar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}
.NavigationMenu.DesktopNavigationMenu {
    margin: 0 auto;
}
.DesktopNavigationMenu .NavList {
    display: flex;
    list-style: none;
    margin: 0;
    gap: clamp(0px, calc(2.6vw - 28px), 22px);
    background: var(--BG2);
    border-radius: var(--Radius);
}
.DesktopNavigationMenu .NavList > li {
    position: relative;
}
.DesktopNavigationMenu .NavList li.menu-item-has-children {
    position: static;
}
.DesktopNavigationMenu .NavList > li > a {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 clamp(8px, calc(1.6vw - 11px), 20px);
    font-size: 16px;
    color: var(--Dark);
    border-radius: var(--Radius);
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.DesktopNavigationMenu .NavList > li > a:hover,
.DesktopNavigationMenu .NavList > li.menu-item-has-children:hover > a,
.DesktopNavigationMenu .NavList > li.menu-item-has-children:focus-within > a {
    color: var(--Primary);
}
.DesktopNavigationMenu .NavList > li.current-menu-item > a,
.DesktopNavigationMenu .NavList > li.current-menu-ancestor > a {
    background: var(--Accent);
    color: var(--Primary);
}
/* Mega menu (desktop): markup comes from Mega_Menu_Walker in functions.php.
   .MenuWrapper starts right under the nav item, and its top padding is the hover bridge down to the sheet (.sub-menu).
   Keep the wrapper inside the container width: when the header is scrolled, .HeaderContainer is transformed and becomes
   the wrapper's containing block, so a full-viewport sheet would change width between the two states. */
.DesktopNavigationMenu .NavList > li.menu-item-has-children > a::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -4px 0 0 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s;
}
.DesktopNavigationMenu .NavList > li.menu-item-has-children:hover > a::after,
.DesktopNavigationMenu .NavList > li.menu-item-has-children:focus-within > a::after {
    transform: translateY(4px) rotate(-135deg);
}
.DesktopNavigationMenu .NavList > li > .MenuWrapper {
    position: absolute;
    left: 0;
    right: 0;
    max-width: var(--ContainerWidth);
    margin: 0 auto;
    padding: calc(var(--MenuGap) + 1px) 20px 0;
    pointer-events: none;
    z-index: 9999;
}
.DesktopNavigationMenu .NavList > li:hover > .MenuWrapper,
.DesktopNavigationMenu .NavList > li:focus-within > .MenuWrapper {
    pointer-events: auto;
}
/* A grid (not CSS columns): the links fill row by row — 6 links = 5 + 1, never 3 + 3 */
.MenuWrapper > .sub-menu {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;   /* the same space between rows and between columns */
    margin: 0;
    padding: 14px;
    border-radius: 0 0 var(--RadiusLg) var(--RadiusLg);
    background: var(--Secondary);
    box-shadow: var(--Shadow);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.3s var(--Ease), visibility 0.25s;
}
.NavList > li:hover > .MenuWrapper > .sub-menu,
.NavList > li:focus-within > .MenuWrapper > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.MenuWrapper a {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 9px 12px;
    border-radius: var(--Radius);
    background: var(--BG1);
    font-size: var(--FontSm);
    line-height: 1.3;
    color: var(--Primary);
}
/* Hover: a light-lime layer wipes in from the left (scaled, so only the compositor works) and the arrow turns to point forward */
.MenuWrapper a::before,
:is(.HomeFaqSection, .CatFaqSection, .ProductFaqSection, .BlogFaqSection) .FaqItem::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--AccentSoft);
}
.MenuWrapper a::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--Ease);
}
.MenuWrapper a::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background: var(--ArrowUp) center/contain no-repeat;
    transition: transform 0.3s var(--Ease);
}
.MenuWrapper a:hover::before,
.MenuWrapper .current-menu-item > a::before,
:is(.HomeFaqSection, .CatFaqSection, .ProductFaqSection, .BlogFaqSection) .FaqItem.active::before {
    transform: none;
}
.MenuWrapper a:hover::after {
    transform: rotate(45deg);
}
.MobileSearchWrapper {
    position: absolute;
    width: 100%;
}
.MobileSearchSection {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
    opacity: 0;
    display: flex;
    justify-content: end;
    pointer-events: none;
}
.MobileSearchSection.active {
    max-height: 500px;
    opacity: 1;
    pointer-events: all;
}
.MobileSearchCol {
    width: 420px;
    padding: 8px;
    background: var(--BG1);
    border: 1px solid var(--Line);
    border-top: 0;
    border-radius: 0 0 var(--RadiusMd) var(--RadiusMd);
    box-shadow: var(--Shadow);
}
.MobileSearchCol form.custom-live-search-form {
    margin: 0;
}
.MobileNavigationMenu.MobileMenuOpen {
    transform: translateX(0);
    pointer-events: auto;
}
.MobileNavigationMenu {
    padding: 20px 20px 40px;
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 85%;
    height: 100vh;
    background: var(--Secondary);
    overflow-y: auto;
    z-index: 100000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.35s ease;
}
.MobileMenuHeader {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--Line);
}
.MobileMenuLogo .custom-logo {
    display: block;
    width: 120px;
}
.MobileMenuClose,
.MobileMenuClose:focus {
    padding: 0;
    width: 36px;
    height: 36px;
    background: var(--Tint);
    color: var(--Primary);
    border-radius: 50%;
}
.MobileMenuClose:hover {
    background: var(--Primary);
    color: var(--Secondary);
}
.MobileNavigationMenu .NavList {
    margin: 20px 0 0;
    list-style: none;
    gap: 4px;
}
.MobileNavigationMenu .NavList > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--Radius);
    color: var(--Text);
    font-family: var(--FontUi);
    font-size: var(--FontSm);
    font-weight: 600;
}
.MobileNavigationMenu .NavList > li.current-menu-item > a,
.MobileNavigationMenu .NavList > li.MobileDropdownOpen > a {
    background: var(--Tint);
    color: var(--Primary);
}
.MobileNavigationMenu .NavList li.menu-item-has-children > a::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--Primary);
    border-bottom: 2px solid var(--Primary);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}
.MobileNavigationMenu .NavList li.menu-item-has-children.MobileDropdownOpen > a::after {
    transform: rotate(-135deg);
}
.MobileNavigationMenu .NavList .sub-menu {
    display: none;
    list-style: none;
    margin: 6px 0 8px 12px;
}
.MobileNavigationMenu .NavList li.MobileDropdownOpen > .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.MobileNavigationMenu .NavList .sub-menu li a {
    display: block;
    font-size: var(--FontXs);
    color: var(--ParaText);
}
.MobileNavigationMenu .NavList .sub-menu li a:hover,
.MobileNavigationMenu .NavList .sub-menu li.current-menu-item a {
    color: var(--Primary);
}
.MobileOverlay.MobileOverlayActive {
    display: block;
}
.MobileOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    display: none;
    cursor: pointer;
}
.SearchModule .live-search-dropdown {
    position: relative;
    width: 100%;
    background-color: var(--Secondary);
    border-radius: var(--RadiusMd);
    margin-top: 12px;
    z-index: 9999999;
    max-width: 500px;
    max-height: 400px;
    overflow-y: auto;
}
.SearchModule .live-search-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    transition: background 0.2s, box-shadow 0.2s;
    border-bottom: 1px solid var(--Line);
}
.SearchModule .live-search-item:last-child {
    border-bottom: none;
}
.SearchModule .live-search-item:hover,
.SearchModule .live-search-item:focus-visible {
    background: var(--BG1);
}
/* Keyboard (arrow keys / Tab): a highlighted row with a green bar on its left instead of the global outline,
   which the scrolling dropdown clipped. Drawn inside the row (inset shadow), so it can never be cut off. */
.SearchModule .live-search-item:focus-visible {
    outline: none;
    box-shadow: inset 3px 0 0 var(--Primary);
}
.SearchModule .live-search-item:focus-visible .live-search-item-title {
    color: var(--Primary);
}
.SearchModule .live-search-item-image,
.SearchModule .live-search-item-image-placeholder {
    width: 45px;
    height: 45px;
    object-fit: contain;
    border-radius: var(--Radius);
    margin-right: 15px;
}
.SearchModule .live-search-item-image-placeholder {
    background: var(--Tint);
    display: flex;
    justify-content: center;
    align-items: center;
}
.SearchModule .live-search-item-image-placeholder img.emoji {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 3px !important;
}
.SearchModule .live-search-item-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.SearchModule .live-search-item-title {
    color: var(--Text);
    font-size: var(--FontXs);
    line-height: 1.5;
}
.SearchModule .live-search-item-type {
    padding: 6px;
    font-family: var(--FontUi);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--Primary);
    border: 1px solid var(--Outline);
    line-height: 1;
    border-radius: 5px;
}
.SearchModule .live-search-view-all {
    padding: 20px 15px;
    text-align: center;
}
.SearchModule .live-search-view-all-btn {
    display: inline-block;
    padding: 12px 18px;
    background: var(--Primary);
    color: var(--Secondary) !important;
    border-radius: var(--RadiusBtn);
    font-family: var(--FontUi);
    font-size: var(--FontXs);
    font-weight: 700;
    line-height: 1;
    transition: background 0.2s;
}
.SearchModule .live-search-view-all-btn:hover,
.SearchModule .live-search-view-all-btn:focus-visible {
    background: var(--PrimaryDeep);
}
.SearchModule .live-search-view-all-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--Secondary), 0 0 0 4px var(--Primary);
}
.SearchModule .live-search-no-results,
.SearchModule .live-search-error {
    padding: 30px;
    text-align: center;
    color: red;
    font-size: 16px;
}
.SearchModule .live-search-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px;
}
.SearchModule .live-search-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--Tint);
    border-top-color: var(--Primary);
    border-radius: 50%;
    animation: live-search-spin 0.8s linear infinite;
}
@keyframes live-search-spin {
    to {
        transform: rotate(360deg);
    }
}
.SearchModule .live-search-dropdown::-webkit-scrollbar {
    width: 6px;
}
.SearchModule .live-search-dropdown::-webkit-scrollbar-track {
    background: var(--Line);
    border-radius: 3px;
}
.SearchModule .live-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--Outline);
    border-radius: 3px;
}
.SearchModule .live-search-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--ParaText);
}
.Btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.Btn svg {
    flex: none;
    width: 18px;
    height: 18px;
    transition: transform 0.2s;
}
.Btn:hover svg {
    transform: translateX(3px);
}
/* Section buttons in the final design: bright-lime outline. (.Btn alone is the solid green button of the header and hero.)
   Every button on the site takes its corners from --RadiusBtn. */
.BtnOutline,
.BtnOutline:focus {
    padding: 12px 13px;
    background: var(--Secondary);
    box-shadow: inset 0 0 0 1.5px var(--AccentBright);
    font-family: var(--FontFamily);
    font-size: var(--FontSize);
    font-weight: 400;
    color: var(--Primary);
}
.BtnOutline:hover,
.ProductFaqActions .BtnOutline:hover {
    background: var(--AccentBright);
    color: var(--Primary);
}
.theme-news-ticker-wrap {
    height: 34px;
    overflow: hidden;
    background: var(--Primary);
    color: var(--Secondary);
    font-size: 13px;
    line-height: 34px;
}
.theme-news-ticker {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: Marquee 60s linear infinite;
}
.theme-news-ticker-wrap:hover .theme-news-ticker {
    animation-play-state: paused;
}
.theme-news-ticker span {
    padding-right: 122px;
    white-space: nowrap;
}
@keyframes Marquee {
    to {
        transform: translate3d(-50%, 0, 0);
    }
}
.HomeHero {
    display: grid;
    grid-template-columns: 35% minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: clamp(460px, 36.7vw, 704px);
    background: var(--BG3);
    border-bottom: 1px solid var(--Dark);
}
.HeroCopy {
    justify-content: center;
    gap: clamp(18px, 1.6vw, 30px);
    padding: 30px 40px 30px max(20px, calc((100% / 0.35 - 1740px) / 2));
    border-right: 1px solid var(--Dark);
}
.HeroCopy h1 span {
    display: block;
    font-family: var(--FontFamily);
    font-size: 0.88em;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.HeroCopy p {
    max-width: 430px;
    font-size: clamp(16px, calc(12px + 0.32vw), 18px);
    line-height: 1.4;
    color: var(--Primary);
}
.HeroCopy .Btn,
.HeroCopy .Btn:focus,
.CatHeroCopy .Btn,
.CatHeroCopy .Btn:focus {
    color: var(--Accent);
}
.HeroMedia {
    min-width: 0;
    height: 100%;
}
.HeroMedia .splide__track,
.HeroMedia .splide__slide {
    height: 100%;
}

.HeroMedia .splide__arrows {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 1;
    margin: 0;
}

:is(.HomeFaqSection, .CatFaqSection, .BlogFaqSection) .FaqAnswerInner p {
    font-size: var(--FontSm);
    line-height: 1.55;
}

/* FAQ: intro copy on the left, the accordion on the right, centred on each other */
.HomeFaqSection {
    display: grid;
    grid-template-columns: minmax(0, 783fr) minmax(0, 917fr);
    gap: 40px;
    align-items: center;
}
.HomeFaqIntro {
    gap: 10px;
}
.HomeFaqIntro .SubtitleGlobal {
    margin-bottom: 10px;
    letter-spacing: 0;
    text-transform: none;
}
.HomeFaqIntro .h2-size + p {
    max-width: 570px;
}
/* FAQ accordion (all pages): combined.js only toggles .active — the open/close itself is this CSS grid transition */
.FaqTitle,
.NavList a:not([href]) {   /* a menu parent that only opens its dropdown (inc/menu-functions.php) */
    cursor: pointer;
}
.FaqAnswer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--Ease);
}
.FaqItem.active > .FaqAnswer {
    grid-template-rows: 1fr;
}
.FaqAnswerInner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    transition: opacity 0.4s, transform 0.5s var(--Ease), visibility 0.5s;
}
.FaqItem.active > .FaqAnswer > .FaqAnswerInner {
    visibility: visible;
    opacity: 1;
    transform: none;
}
:is(.HomeFaqSection, .CatFaqSection, .BlogFaqSection) .FaqWrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
:is(.HomeFaqSection, .CatFaqSection, .BlogFaqSection) .FaqItem {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--Primary);
    border-radius: var(--Radius);
    background: var(--Secondary);
}
/* Open state: the light fill (declared with the menu links above) wipes down over the whole item.
   It is a scaled, faded layer, so the browser never repaints while it animates. */
:is(.HomeFaqSection, .CatFaqSection, .ProductFaqSection, .BlogFaqSection) .FaqItem::before {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.55s var(--Ease), opacity 0.35s;
}
:is(.HomeFaqSection, .CatFaqSection, .ProductFaqSection, .BlogFaqSection) .FaqItem.active::before {
    opacity: 1;
}
:is(.HomeFaqSection, .CatFaqSection, .BlogFaqSection) .FaqTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 45px;
    padding: 6px 13px 6px 20px;
    border-radius: var(--Radius);
    font-size: var(--FontLead);
    line-height: 1.4;
    color: var(--Text);
}
:is(.HomeFaqSection, .CatFaqSection, .BlogFaqSection) .FaqIcon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--Primary);
    transition: transform 0.5s var(--Ease), background-color 0.3s, color 0.3s;
}
:is(.HomeFaqSection, .CatFaqSection, .BlogFaqSection) .FaqIcon svg {
    width: 26px;
    height: 26px;
}
:is(.HomeFaqSection, .CatFaqSection, .BlogFaqSection) .FaqTitle:hover .FaqIcon {
    background: var(--Tint);
}
:is(.HomeFaqSection, .CatFaqSection, .BlogFaqSection) .FaqItem.active .FaqIcon {
    transform: rotate(135deg);
    background: var(--Primary);
    color: var(--Secondary);
}
:is(.HomeFaqSection, .CatFaqSection, .BlogFaqSection) .FaqAnswerInner p {
    padding: 0 20px 18px;
}
/* Quote: full-width green band (background, heading and intro colours are grouped with the other green sections),
   five white fields per row and an outlined lime button */
.HomeQuote .custom-form-container {
    margin-top: 38px;
}
.HomeQuote .CategoryForm {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px 11px;
}
:is(.HomeQuote, .CatQuote) .CategoryForm .form-group {
    width: auto;
}
:is(.HomeQuote, .CatQuote) .CategoryForm .form-group.full-width,
:is(.HomeQuote, .CatQuote) .CategoryForm .form-group.SubmitBtn {
    grid-column: 1 / -1;
}
.HomeQuote .CategoryForm .form-group label {
    margin-bottom: 6px;
    font-family: var(--FontFamily);
    font-size: var(--FontSm);
    font-weight: 400;
    color: var(--Secondary);
}
/* The designs show no asterisks; the fields are still required */
:is(.HomeQuote, .CatQuote) .CategoryForm label span {
    display: none;
}
.HomeQuote .CategoryForm .form-group input,
.HomeQuote .CategoryForm .form-group select,
.HomeQuote .CategoryForm .form-group textarea {
    min-height: 36px;
    padding: 0 12px;
    border-color: var(--Secondary);
    border-radius: var(--Radius);
    line-height: 1.4;
    color: var(--Text);
}
.HomeQuote .CategoryForm ::placeholder,
.HomeQuote .CategoryForm .form-group select:invalid,
.HomeQuote .CategoryForm .form-group input[type="file"] {
    color: var(--Grey);
}
.HomeQuote .CategoryForm .form-group select,
.ProductForm .form-group select,
.QuoteForm .form-group select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300492c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
}
.HomeQuote .CategoryForm option,
.HomeQuote .CategoryForm optgroup {
    color: var(--Text);
}
.HomeQuote .CategoryForm .form-group textarea {
    height: 86px;
    padding: 9px 12px;
    resize: vertical;
}
/* File field: the lime "Choose Files" button sits centred inside the field (both quote forms) */
:is(.HomeQuote .CategoryForm, .CatQuote .CategoryForm, .ProductForm, .QuoteForm) .form-group input[type="file"] {
    padding: 4px;
    cursor: pointer;
}
:is(.HomeQuote .CategoryForm, .CatQuote .CategoryForm, .ProductForm, .QuoteForm) input[type="file"]::file-selector-button {
    height: 26px;
    margin-right: 10px;
    padding: 0 12px;
    border: none;
    border-radius: var(--RadiusBtn);
    background: var(--AccentBright);
    font-family: var(--FontFamily);
    font-size: var(--FontXs);
    color: var(--Primary);
    cursor: pointer;
}
.HomeQuote .CategoryForm .form-group input:focus,
.HomeQuote .CategoryForm .form-group select:focus,
.HomeQuote .CategoryForm .form-group textarea:focus {
    border-color: var(--AccentBright);
}
.HomeQuote .CategoryForm .form-group.SubmitBtn {
    align-items: center;
    margin: 6px 0 0;
}
.HomeQuote .CategoryForm .form-group input[type="submit"] {
    width: auto;
    min-width: 152px;
    min-height: 38px;
    padding: 0 24px;
    border: none;
    border-radius: var(--RadiusBtn);
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--AccentBright);
    font-family: var(--FontFamily);
    font-size: var(--FontSize);
    font-weight: 400;
    color: var(--AccentBright);
}

/* ==========================================================================
   Home sections — final approved design (packbox-home-reference-last-final).
   Header, hero, FAQ and the quote form keep their own rules elsewhere in this file.
   ========================================================================== */
/* A white section that touches the hero or the green band gets a double gap on that side */
.TrendSection.section,
.FeaturedSection + .OptionsSection > .section,
.StepsGrid.section {
    padding-top: 100px;
}
.UspGrid.section,
.BenefitsGrid.section,
.HomeFaqSection.section {
    padding-bottom: 100px;
}
.TrendHead,
.FeaturedHead,
.OptionsHead,
.IndustryHead,
.HomeQuoteHead,
.CatGridHead,
.CatGalleryHead {
    gap: 26px;
}
.TrendHead p,
.FeaturedHead p,
.WhyCopy p,
.IndustryHead p,
.HomeFaqIntro .h2-size + p,
.HomeQuoteHead p,
.CatGridHead p,
.CatHeroCopy p,
.CatGalleryText p,
.ProductRecIntro p {
    font-size: var(--FontLg);
    line-height: 1.2;
}
.TrendHead p,
.CatGridHead p,
.CatGalleryText {
    max-width: 940px;
}
.FeaturedHead p,
.IndustryHead p,
.HomeQuoteHead p,
.ProductRecIntro p {
    max-width: 1060px;
    color: var(--Secondary);
}
.IndustryHead p {
    max-width: 1390px;
}
.HomeQuoteHead p {
    max-width: 700px;
}
.HeroMedia img,
.TrendCard img,
.FeaturedCard img,
.OptionsCard img,
.WhyMedia img,
.BenefitsMedia img,
.StepsMedia img,
.IndustryCard img,
.CatHeroMedia img,
.CatSplitMedia img,
.product-item img,
.ProductGalleryMain img,
.ProductGalleryThumbs img,
.ProductRecMedia img,
.CatalogTileMedia img,
.BlogFeaturedMedia img,
.BlogCardMedia img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.TrendCard img,
.FeaturedCard img,
.product-item img,
.ProductRecMedia img,
.CatalogTileMedia img,
.search-card img,
.BlogFeaturedMedia img,
.BlogCardMedia img {
    transition: transform 0.6s var(--Ease);
}
.TrendCard:hover img,
.FeaturedCard:hover img,
.product-item a:hover img,
.ProductRecCard:hover img,
.CatalogTile:hover img,
.search-card:hover img,
.BlogFeaturedMedia:hover img,
.BlogCardLink:hover img {
    transform: scale(1.05);
}
.TrendGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 62px;
}
.TrendCard,
.IndustryCard,
.SkeletonCard {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--RadiusCard);
    background: var(--Tint);
}
.TrendCard {
    aspect-ratio: 340/400;
}
.TrendCard span,
.IndustryCard span {
    position: absolute;
    inset: auto 0 0;
    padding: 120px 17px 16px;
    background: var(--Fade);
    line-height: 1.25;
    color: var(--Secondary);
}
.TrendCard span {
    font-family: var(--FontUi);
    font-size: 21px;
    font-weight: 500;
}
.UspGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
}
.UspItem,
.BenefitsCell,
.StepsCell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.UspItem {
    padding: 0 20px;
}
.UspItem + .UspItem {
    border-left: 1px solid var(--UspLine);
}
.UspItem img,
.BenefitsCell img,
.StepsCell img {
    width: auto;
    height: 50px;
}
.UspItem h3,
.BenefitsCell h3,
.StepsCell h3 {
    margin-top: 14px;
    color: var(--Primary);
}
.UspItem p,
.BenefitsCell p,
.StepsCell p,
.OptionsCard p {
    margin-top: 14px;
    font-size: var(--FontSm);
    line-height: 1.5;
}
.UspItem p {
    max-width: 300px;
}
.BenefitsCell p,
.StepsCell p {
    max-width: 400px;
    line-height: 1.35;
}
.FeaturedSection,
.IndustrySection,
.HomeQuote,
.ProductHeroMedia,
.ProductRecSection,
.ProductFaqHelp,
.QuoteSteps {
    background: var(--Primary);
}
.FeaturedSection .h2-size,
.IndustrySection .h2-size,
.HomeQuote .h2-size,
.ProductRecSection .h2-size,
.ProductFaqHelp h3,
.QuoteSteps > h3 {
    color: var(--Secondary);
}
.FeaturedSection .splide__track,
.IndustrySection .splide__track {
    margin-top: 42px;
}
.FeaturedCard {
    gap: 16px;
    font-size: var(--FontLead);
    line-height: 1.3;
    text-align: center;
    color: var(--Secondary);
}
.FeaturedCard:hover {
    color: var(--AccentBright);
}
.FeaturedCard span,
.OptionsCard figure {
    display: block;
    width: 100%;
    overflow: hidden;
}
.FeaturedCard span {
    aspect-ratio: 332/286;
    border-radius: var(--RadiusCard);
}
/* Slider controls as plain chevrons under the track. On green (Featured, Industries): white = previous, lime = next.
   On white (Customization): green. */
.FeaturedSection .splide__arrows {
    gap: 24px;
    margin-top: 38px;
}
.OptionsSection .splide__arrows,
.IndustrySection .splide__arrows {
    gap: 14px;
    margin-top: 20px;
}
.FeaturedSection .splide__arrows .splide__arrow,
.FeaturedSection .splide__arrows .splide__arrow:focus,
.OptionsSection .splide__arrows .splide__arrow,
.OptionsSection .splide__arrows .splide__arrow:focus,
.IndustrySection .splide__arrows .splide__arrow,
.IndustrySection .splide__arrows .splide__arrow:focus {
    width: 40px;
    height: 40px;
    border-radius: var(--Radius);
    background: none;
    box-shadow: none;
    color: var(--Secondary);
}
.OptionsSection .splide__arrows .splide__arrow,
.OptionsSection .splide__arrows .splide__arrow:focus {
    color: var(--Primary);
}
.FeaturedSection .splide__arrows .splide__arrow--next,
.FeaturedSection .splide__arrows .splide__arrow--next:focus,
.IndustrySection .splide__arrows .splide__arrow--next,
.IndustrySection .splide__arrows .splide__arrow--next:focus {
    color: var(--AccentBright);
}
@media (hover: hover) {
    .FeaturedSection .splide__arrows .splide__arrow:enabled:hover,
    .IndustrySection .splide__arrows .splide__arrow:enabled:hover {
        background: none;
        color: var(--AccentBright);
    }
    .OptionsSection .splide__arrows .splide__arrow:enabled:hover {
        background: var(--BG2);
        color: var(--Primary);
    }
}
.FeaturedSection .splide__arrow svg,
.OptionsSection .splide__arrow svg,
.IndustrySection .splide__arrow svg {
    width: 10px;
    height: 18px;
}
.HomeQuote .CategoryForm .form-group input[type="submit"]:hover,
.HomeQuote .CategoryForm .form-group input[type="submit"]:focus {
    background: var(--AccentBright);
    color: var(--Primary);
}
/* Customization: the tabs, the open panel (each tab has its own slider), then ONE shared pair of arrows.
   The arrows sit outside the panels, so they never change when a tab is switched; home.js points them at the open slider. */
.OptionsBody {
    margin-top: 22px;
}
/* Tab switch (home.js): the open panel fades out quickly (.IsOut); the next one is then shown already faded and
   a little low, and eases up into place. Only opacity/transform move. --PanelH keeps every panel as tall as the
   tallest one seen, so nothing below the section shifts. */
.OptionsPanel {
    min-height: var(--PanelH, 0);
    margin-top: 32px;
    transition: opacity 0.32s ease, transform 0.42s var(--Ease);
}
.OptionsPanel.IsOut {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition-duration: 0.13s;
}
/* Equal tabs across the whole container; when they no longer fit they keep their own width and the bar scrolls sideways */
.OptionsTabs {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    gap: 15px;
    overflow-x: auto;
    scrollbar-width: none;
}
.OptionsTabs::-webkit-scrollbar {
    display: none;
}
/* Three layers: each tab's grey fill (its ::before, behind everything), the lime highlight, then the tab text.
   The highlight is one piece that slides from tab to tab; home.js sets --X / --W and adds .IsReady */
.OptionsTab::before,
.OptionsTabs.IsReady::before {
    content: "";
    position: absolute;
    border-radius: var(--Radius);
}
.OptionsTab::before {
    inset: 0;
    z-index: -1;
    background: var(--BG2);
    transition: background-color 0.2s;
}
.OptionsTabs.IsReady::before {
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--W);
    background: var(--AccentBright);
    transform: translateX(var(--X));
    transition: transform 0.5s var(--Ease), width 0.5s var(--Ease);
}
.OptionsTab,
.OptionsTab:focus {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 22px;
    border-radius: var(--Radius);
    background: transparent;
    font-family: var(--FontFamily);
    font-size: var(--FontSize);
    font-weight: 400;
    color: var(--Dark);
}
.OptionsTab:hover,
.OptionsTab[aria-selected="true"],
.OptionsTab[aria-selected="true"]:hover {
    background: transparent;
    color: var(--Primary);
}
.OptionsTab:hover::before {
    background: var(--Line);
}
.OptionsTabs:not(.IsReady) .OptionsTab[aria-selected="true"]::before {
    background: var(--AccentBright);
}
.OptionsCard {
    height: 100%;
    overflow: hidden;
    padding-bottom: 12px;
    border: 1px solid var(--Outline);
    border-radius: var(--RadiusLg);
    background: var(--Secondary);
    text-align: center;
}
.OptionsCard figure {
    aspect-ratio: 332/310;
}
.OptionsCard h3 {
    margin: 15px 16px 0;
}
.OptionsCard p {
    margin: 4px 16px 0;
    line-height: 1.6;
}
.WhyGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 55px;
    align-items: center;
}
.WhyCopy {
    gap: 36px;
}
.WhyCopy .h2-size {
    font-size: clamp(26px, calc(9px + 1.72vw), 42px);
    line-height: 1.19;
}
.WhyMedia,
.BenefitsMedia,
.StepsMedia {
    overflow: hidden;
    border-radius: var(--RadiusMedia);
}
.WhyMedia {
    aspect-ratio: 840/511;
}
/* Benefits and How-to-order are mirror images: a photo with a caption, and a 2×2 grid of icon cells */
.BenefitsGrid,
.StepsGrid {
    display: grid;
    grid-template-columns: minmax(0, 798fr) minmax(0, 886fr);
    gap: 56px;
}
.StepsGrid {
    grid-template-columns: minmax(0, 898fr) minmax(0, 798fr);
    gap: 44px;
}
.BenefitsMedia,
.StepsMedia {
    position: relative;
    min-height: 466px;
}
.BenefitsMedia img,
.StepsMedia img {
    position: absolute;
    inset: 0;
}
.BenefitsMedia h3,
.StepsMedia h3 {
    position: absolute;
    inset: auto 0 0;
    padding: 90px 20px 34px;
    background: var(--Fade);
    font-size: 21px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--Secondary);
}
.BenefitsMedia strong,
.StepsMedia strong {
    display: block;
    margin-top: 6px;
    font-family: var(--FontHead);
    font-size: clamp(26px, calc(12px + 1.46vw), 40px);
    font-weight: 900;
    line-height: 1.15;
}
.BenefitsCells,
.StepsCells {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    list-style: none;
}
/* Each row keeps its content away from the middle rule: top row sits at the top, bottom row at the bottom */
.BenefitsCell,
.StepsCell {
    padding: 8px 24px 40px;
}
.BenefitsCell:nth-child(n+3),
.StepsCell:nth-child(n+3) {
    justify-content: flex-end;
    padding: 40px 24px 8px;
}
.BenefitsCell:nth-child(odd),
.StepsCell:nth-child(odd) {
    border-right: 1px solid var(--Rule);
}
.BenefitsCell:nth-child(-n+2),
.StepsCell:nth-child(-n+2) {
    border-bottom: 1px solid var(--Rule);
}
/* Industries: one solid green section (colours and the chevrons are grouped with Featured above); the emphasised words get their own line */
.IndustryHead .h2-size {
    line-height: 1.06;
}
.IndustryHead strong {
    display: block;
}
.IndustryCard {
    aspect-ratio: 332/345;
}
.IndustryCard span {
    padding: 120px 20px 20px;
    font-size: var(--FontLg);
}
/* ==========================================================================
   Category page (child product categories) — design "Category page.pdf".
   Customization and the FAQ accordion reuse the home rules above.
   ========================================================================== */
.CatHeroSection.section,
.SearchPage.section,
.ContactHeroSection.section,
.BlogPostSection.section {
    padding-top: 20px;
}
/* The two banners: copy left, photo right, in one outlined rounded box */
.CatHeroBox,
.CatSplitBox {
    display: grid;
    grid-template-columns: minmax(0, 733fr) minmax(0, 1007fr);
    overflow: hidden;
    border: 1px solid var(--Dark);
    border-radius: var(--RadiusLg);
    background: var(--Cream);
}
.CatSplitBox {
    border-color: var(--AccentBright);
    background: var(--Primary);
}
.CatHeroCopy,
.CatSplitCopy {
    justify-content: center;
    gap: 28px;
    padding: 40px clamp(24px, 3.5vw, 66px);
}
.CatHeroCopy p,
.CatSplitCopy p {
    max-width: 510px;
}
.CatHeroCopy p {
    color: var(--Primary);
}
.CatSplitCopy p {
    font-size: var(--FontSm);
    color: var(--Secondary);
}
.CatHeroCopy .h2-size,
.ContactHeroSection .CatSplitCopy .h2-size {
    font-size: clamp(32px, calc(11px + 2.76vw), 64px);
    line-height: 1.02;
}
.CatHeroCopy strong {
    display: block;
}
.CatSplitCopy .h2-size {
    color: var(--Secondary);
}
.CatSplitCopy .Btn,
.CatSplitCopy .Btn:focus,
.ProductFaqActions .Btn:not(.BtnOutline),
.BlogBtn,
.BlogBtn:focus {
    background: var(--AccentBright);
    color: var(--Primary);
}
.CatSplitCopy .Btn:hover,
.ProductFaqActions .Btn:not(.BtnOutline):hover,
.BlogBtn:hover,
.BlogCardLink:hover .BlogBtn {
    background: var(--AccentHover);
    color: var(--Primary);
}
.CatHeroMedia,
.CatSplitMedia {
    aspect-ratio: 1006/552;
    border-left: 1px solid var(--Dark);
}
.CatSplitMedia {
    aspect-ratio: 1006/488;
    border-left-color: var(--AccentBright);
}
/* Detailed content: a grey box whose text scrolls inside it (white thumb on a grey track) */
:is(.CatContentBox, .ProductContentBox) {
    padding: 24px 61px 45px 42px;
    border-radius: var(--RadiusLg);
    background: var(--BG2);
}
:is(.CatContentScroll, .ProductContentScroll) {
    max-height: 806px;
    overflow-y: auto;
    padding: 22px 24px 0 0;
}
:is(.CatContentScroll, .ProductContentScroll)::-webkit-scrollbar {
    width: 14px;
}
:is(.CatContentScroll, .ProductContentScroll)::-webkit-scrollbar-track,
:is(.CatContentScroll, .ProductContentScroll)::-webkit-scrollbar-thumb {
    border-radius: var(--Pill);
    background: var(--Track);
}
:is(.CatContentScroll, .ProductContentScroll)::-webkit-scrollbar-thumb {
    background: var(--Secondary);
}
@supports not selector(::-webkit-scrollbar) {
    :is(.CatContentScroll, .ProductContentScroll) {
        scrollbar-color: var(--Secondary) var(--Track);
    }
}

:is(.CatContentScroll, .ProductContentScroll) :is(h2, h3, h4) {
    margin: 30px 0 10px;
    font-family: var(--FontUi);
    font-size: clamp(22px, calc(14px + 0.95vw), 32px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--Primary);
}

.CatGridSection .products-grid {
    margin-top: 46px;
}
:is(.CatContentScroll, .ProductContentScroll) > :first-child {
    margin-top: 0;
}
:is(.CatContentScroll, .ProductContentScroll) p,
:is(.CatContentScroll, .ProductContentScroll) li {
    font-size: var(--FontSm);
    line-height: 1.6;
    color: var(--Dark);
}
:is(.CatContentScroll, .ProductContentScroll) :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: 14px;
}
:is(.CatContentScroll, .ProductContentScroll) :is(ul, ol) {
    margin: 0 0 0 22px;
}
/* Gallery (templates/category-gallery.php; the entrance is started by home.js) */
/* Gallery: three staggered columns, the middle one raised. The rows are fractions of the 1417×755 design,
   so the whole mosaic scales with its width; images are absolutely placed and never size the grid (no CLS).
   Photos are placed by grid area (a–e = 1st–5th image); data-count picks the arrangement. */
.CatGalleryText p {
    color: var(--Primary);
}
.CatGalleryGrid {
    display: grid;
    grid-template:
        ". c ." minmax(0, 91fr)
        "a c d" minmax(0, 434fr)
        ". c ." minmax(0, 20fr)
        "b c e" minmax(0, 119fr)
        "b . e" minmax(0, 91fr) / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.41%;
    max-width: 1417px;
    aspect-ratio: 1417/755;
    margin: 35px auto 0;
}
.CatGalleryGrid[data-count="4"] {
    grid-template-areas: ". c ." "a c d" ". c d" "b c d" "b . d";
}
/* Six photos (the PDF): left big + small, middle small + big (raised 90px), right big + small */
.CatGalleryGrid[data-count="6"] {
    grid-template:
        ". c ." minmax(0, 90fr)
        "a c e" minmax(0, 121fr)
        "a . e" minmax(0, 21fr)
        "a d e" minmax(0, 293fr)
        ". d ." minmax(0, 21fr)
        "b d f" minmax(0, 121fr)
        "b . f" minmax(0, 90fr) / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    aspect-ratio: 1418/757;
}
.CatGalleryGrid[data-count="3"] {
    grid-template-areas: ". b ." "a b c" "a b c" "a b c" "a . c";
}
/* One or two photos: a plain row */
.CatGalleryGrid:is([data-count="1"], [data-count="2"]) {
    grid-template: auto / repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 940px;
    aspect-ratio: auto;
}
.CatGalleryGrid[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
}
/* Tiles. --I orders the entrance (centre first, then outwards); --Drift / --Origin set its direction */
.CatGalleryTile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 0;
    border-radius: var(--Radius);
    background: var(--Tint);
    transition: opacity 0.6s ease calc(var(--I) * 140ms), transform 1.1s var(--Ease) calc(var(--I) * 140ms);
}
.CatGalleryTile:nth-child(1) {grid-area: a; --I: 1;}
.CatGalleryTile:nth-child(2) {grid-area: b; --I: 2.2;}
.CatGalleryTile:nth-child(3) {grid-area: c; --I: 1.4;}
.CatGalleryTile:nth-child(4) {grid-area: d; --I: 1.4;}
.CatGalleryTile:nth-child(5) {grid-area: e; --I: 2.6;}
.CatGalleryTile:nth-child(6) {grid-area: f; --I: 3;}
.CatGalleryGrid[data-count="6"] .CatGalleryTile:nth-child(4) {--I: 0.6;}
.CatGalleryGrid:is([data-count="4"], [data-count="5"], [data-count="6"]) .CatGalleryTile:nth-child(3),
.CatGalleryGrid[data-count="6"] .CatGalleryTile:nth-child(4),
.CatGalleryGrid[data-count="3"] .CatGalleryTile:nth-child(2) {
    --I: 0;
    --Drift: 64px;
}
.CatGalleryGrid:is([data-count="1"], [data-count="2"]) .CatGalleryTile {
    grid-area: auto;
    aspect-ratio: 459/434;
}
.CatGalleryGrid[data-count="1"] .CatGalleryTile {
    aspect-ratio: 16/9;
}
.CatGalleryTile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.8s var(--Ease) calc(var(--I) * 140ms);
}
/* Entrance (no colour layers): each frame fades in while gliding into place — the outer photos drop down,
   the raised middle one rises — and grows from 92%; the photo inside settles from a 1.25x zoom a little slower.
   Middle first, then outwards. home.js removes .IsWaiting when the gallery is in view (also right after a reload). */
.CatGalleryGrid.IsWaiting .CatGalleryTile,
.CatGalleryGrid.IsWaiting .CatGalleryTile img {
    transition: none;
}
.CatGalleryGrid.IsWaiting .CatGalleryTile {
    opacity: 0;
    transform: translate3d(0, calc(var(--Drift, -48px) * var(--DriftScale, 1)), 0) scale(0.92);
}
.CatGalleryGrid.IsWaiting .CatGalleryTile img {
    transform: scale(1.25);
}
@media (prefers-reduced-motion: reduce) {
    .CatGalleryGrid.IsWaiting .CatGalleryTile,
    .CatGalleryGrid.IsWaiting .CatGalleryTile img {
        opacity: 1;
        transform: none;
    }
}
/* While the page scrolls, the photos drift slightly inside their frames — the middle column against the others
   (scroll-linked, compositor only; browsers without scroll timelines simply skip it) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .CatGalleryTile img {
            animation: CatGalleryDrift linear both;
            animation-timeline: view();
        }
        .CatGalleryGrid:is([data-count="4"], [data-count="5"], [data-count="6"]) .CatGalleryTile:nth-child(3) img,
        .CatGalleryGrid[data-count="6"] .CatGalleryTile:nth-child(4) img,
        .CatGalleryGrid[data-count="3"] .CatGalleryTile:nth-child(2) img {
            animation-direction: reverse;
        }
    }
}
@keyframes CatGalleryDrift {
    from {
        translate: 0 -2.5%;
        scale: 1.06;
    }
    to {
        translate: 0 2.5%;
        scale: 1.06;
    }
}
/* Tablet and phone: two columns. Each photo keeps the shape it has on desktop — 1st and 4th near-square,
   2nd and 5th wide, the 3rd (middle) tall; three photos keep the desktop columns until phones. */
@media (max-width: 1024px) {
    .CatGalleryGrid[data-count="5"] {
        grid-template: "a c" minmax(0, 1fr) "d c" minmax(0, 1fr) "b e" minmax(0, 0.48fr) / minmax(0, 1fr) minmax(0, 1fr);
        gap: 14px;
        aspect-ratio: 0.85;
    }
    .CatGalleryGrid[data-count="4"] {
        grid-template: "c d" minmax(0, 1.45fr) "a b" minmax(0, 0.67fr) / minmax(0, 1fr) minmax(0, 1fr);
        gap: 14px;
        aspect-ratio: 0.94;
    }
    /* Six (all uploaded at one size): equal tiles, three per row, so every photo is shown whole */
    .CatGalleryGrid[data-count="6"] {
        grid-template: none / repeat(3, minmax(0, 1fr));
        gap: 14px;
        aspect-ratio: auto;
    }
    .CatGalleryGrid[data-count="6"] .CatGalleryTile {
        grid-area: auto;
        aspect-ratio: 459/435;
    }
}
@media (max-width: 767px) {
    .CatGalleryGrid {
        --DriftScale: 0.4;
        margin-top: 26px;
    }
    .CatGalleryGrid[data-count="5"] {
        grid-template: "b b" minmax(0, 45fr) "a c" minmax(0, 46fr) "d c" minmax(0, 46fr) "e e" minmax(0, 45fr) / minmax(0, 1fr) minmax(0, 1fr);
        aspect-ratio: 0.55;
    }
    .CatGalleryGrid[data-count="3"] {
        grid-template: "a b" minmax(0, 1.45fr) "c c" minmax(0, 0.7fr) / minmax(0, 1fr) minmax(0, 1fr);
        aspect-ratio: 0.93;
    }
    .CatGalleryGrid[data-count="6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .CatGalleryGrid[data-count] {
        gap: 10px;
    }
}
/* FAQ (home accordion) on the left, the green quote card on the right */
.CatFaqSection {
    display: grid;
    grid-template-columns: minmax(0, 708fr) minmax(0, 992fr);
    gap: 40px;
    align-items: center;
}
.CatFaqSection > :only-child {
    grid-column: 1 / -1;
}
.CatFaqIntro {
    gap: 22px;
}
.CatFaqIntro .h2-size + p,
.ProductFaqIntro .h2-size + p {
    max-width: 680px;
    font-size: var(--FontLead);
    line-height: 27px;
}
@media (min-width: 1025px) {
    /* Shorter than the column beside it, so it follows the scroll (the catalog sidebar too) */
    .CatFaqIntro,
    .ProductFaqAside,
    .CatalogSide,
    .QuoteAside {
        position: sticky;
        top: calc(var(--HeaderStuckH) + 24px);
    }
}
.CatQuote {
    gap: 12px;
    padding: 44px;
    border-radius: var(--RadiusXl);
    background: var(--Primary);
}
.CatQuote .h2-size {
    color: var(--Secondary);
}
.CatQuote > p {
    margin-bottom: 12px;
    color: var(--OnDark);
}
.CatQuote .CategoryForm {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
}
.CatQuote .CategoryForm .form-group label {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--OnDark);
}
.CatQuote .CategoryForm .form-group input,
.CatQuote .CategoryForm .form-group select,
.CatQuote .CategoryForm .form-group textarea {
    min-height: 38px;
    padding: 0 12px;
    border-color: var(--OnDarkLine);
    border-radius: var(--Radius);
    background-color: var(--PrimaryMid);
    font-size: var(--FontSm);
    line-height: 1.4;
    color: var(--Secondary);
}
.CatQuote .CategoryForm ::placeholder,
.CatQuote .CategoryForm .form-group select:invalid {
    color: var(--OnDarkMuted);
}
.CatQuote .CategoryForm input:-webkit-autofill {
    -webkit-text-fill-color: var(--Secondary);
    box-shadow: 0 0 0 100px var(--PrimaryMid) inset;
    caret-color: var(--Secondary);
}
.CatQuote .CategoryForm .form-group select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0de29' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
}
.CatQuote .CategoryForm option,
.CatQuote .CategoryForm optgroup {
    background: var(--Secondary);
    color: var(--Text);
}
.CatQuote .CategoryForm .form-group textarea {
    height: 84px;
    padding: 10px 12px;
    resize: vertical;
}
.CatQuote .CategoryForm .form-group input[type="file"] {
    padding: 5px;
    font-size: 13px;
    color: var(--OnDark);
}
.CatQuote .CategoryForm .form-group input:focus,
.CatQuote .CategoryForm .form-group select:focus,
.CatQuote .CategoryForm .form-group textarea:focus {
    border-color: var(--AccentBright);
}
.CatQuote .CategoryForm .form-group.SubmitBtn {
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 6px 0 0;
}
.CatQuote .CategoryForm .form-group.SubmitBtn::before {
    content: "No obligation. Free design support included.";
    font-size: var(--FontXs);
    color: var(--OnDark);
}
/* Lime button with an arrow (an <input> cannot hold an icon, so the arrow is a background image) */
.CatQuote .CategoryForm .form-group input[type="submit"],
.ProductHeroInfo .ProductForm .form-group input[type="submit"],
.ContactTouchSection .ContactForm .form-group input[type="submit"],
.QuoteFormCard .QuoteForm .form-group input[type="submit"] {
    --ArrowPos: right 22px center;
    width: auto;
    min-height: 0;
    padding: 15px 50px 15px 26px;
    border: none;
    border-radius: var(--RadiusBtn);
    background: var(--AccentBright) var(--ArrowRight) no-repeat var(--ArrowPos) / 16px;
    font-size: var(--FontSm);
    line-height: 1;
    color: var(--Primary);
}
/* The full shorthand again: a lower rule's "background:" on hover would otherwise wipe the arrow */
.CatQuote .CategoryForm .form-group input[type="submit"]:hover,
.CatQuote .CategoryForm .form-group input[type="submit"]:focus,
.ProductHeroInfo .ProductForm .form-group input[type="submit"]:hover,
.ProductHeroInfo .ProductForm .form-group input[type="submit"]:focus,
.ContactTouchSection .ContactForm .form-group input[type="submit"]:hover,
.ContactTouchSection .ContactForm .form-group input[type="submit"]:focus,
.QuoteFormCard .QuoteForm .form-group input[type="submit"]:hover,
.QuoteFormCard .QuoteForm .form-group input[type="submit"]:focus {
    background: var(--AccentHover) var(--ArrowRight) no-repeat var(--ArrowPos) / 16px;
    color: var(--Primary);
}
.HomeQuote .form-response p,
.CatQuote .form-response p,
.ProductHeroInfo .form-response p {
    padding: 10px 14px;
    border-radius: var(--Radius);
    background: var(--Secondary);
}
@media (max-width: 1200px) {
    .CatQuote {
        padding: 32px;
    }
}
/* Stacked: photo on top, copy below; the FAQ column goes above the quote card */
@media (max-width: 1024px) {
    .CatHeroBox,
    .CatSplitBox,
    .CatFaqSection {
        grid-template-columns: minmax(0, 1fr);
    }
    .CatHeroMedia,
    .CatSplitMedia {
        order: -1;
        aspect-ratio: 2/1;
        border-left: 0;
        border-bottom: 1px solid var(--Dark);
    }
    .CatSplitMedia {
        border-bottom-color: var(--AccentBright);
    }
    .CatHeroCopy,
    .CatSplitCopy {
        gap: 20px;
        padding: 32px clamp(20px, 4vw, 40px) 36px;
    }
    :is(.CatContentScroll, .ProductContentScroll) {
        max-height: 620px;
    }
}
@media (max-width: 767px) {

    .CatHeroCopy,
    .CatSplitCopy {
        padding: 24px 18px 28px;
    }
    /* Phones: the emphasised word stays on the same line as the rest of the h1 */
    .CatHeroCopy strong {
        display: inline;
    }
    .CatGridSection .products-grid {
        margin-top: 28px;
    }
    :is(.CatContentBox, .ProductContentBox) {
        padding: 18px 12px 18px 18px;
        border-radius: var(--RadiusMd);
    }
    :is(.CatContentScroll, .ProductContentScroll) {
        max-height: 460px;
        padding: 6px 14px 0 0;
    }
    :is(.CatContentScroll, .ProductContentScroll)::-webkit-scrollbar {
        width: 8px;
    }
    .CatFaqSection {
        gap: 28px;
    }
    .CatQuote {
        padding: 24px 16px;
        border-radius: var(--RadiusLg);
    }
    .CatQuote .CategoryForm {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .CatQuote .CategoryForm .form-group:has(input[type="file"]) {
        grid-column: 1 / -1;
    }
    .CatQuote .CategoryForm .form-group.SubmitBtn::before {
        width: 100%;
        text-align: center;
    }
    .CatQuote .CategoryForm .form-group input[type="submit"] {
        --ArrowPos: right calc(50% - 74px) center;
        width: 100%;
    }
}
/* Product grids (category + related): square cards, 5 per row, 10px apart; the card look is grouped with .TrendCard above */
.products-grid,
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}
/* Product card (same family as the customization cards): white outlined card, square photo flush at the top,
   then the name and a round arrow button. Hover: green outline, slow photo zoom, lime arrow that turns. */
.product-item a,
.search-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--Outline);
    border-radius: var(--RadiusLg);
    background: var(--Secondary);
    transition: border-color 0.3s;
}
.product-item a > span {
    display: block;
    overflow: hidden;
    background: var(--Tint);
}
.product-item a > span {
    aspect-ratio: 1;
}
/* A placeholder takes the height of the card it replaces (set by combined.js) and the column's width.
   No aspect-ratio here: with a fixed height it would widen the placeholder past its column and hide the gaps. */
.SkeletonCard {
    border-radius: var(--RadiusLg);
}
.product-item h3 {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 14px 18px;
    font-size: var(--FontLead);
}
/* Long names stop at two lines (the full name is in the link's title and on the product page) */
.product-item h3 span,
.search-card h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.product-item h3::after {
    content: "";
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--BG2) var(--ArrowUp) center / 16px no-repeat;
    transition: background-color 0.3s, transform 0.4s var(--Ease);
}
.product-item a:hover,
.search-card:hover {
    border-color: var(--Primary);
}
/* Search results (inc/core.php gza_search_card_html): the product card shell, the photo square on top,
   then the name and its type. Categories and products share the card. */
.QueryHeading {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
}
.search-card img,
.search-card .no-image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--Tint);
}
.search-card .no-image {
    display: grid;
    place-items: center;
    font-size: 40px;
}

.search-card .ItemDetail {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px 16px;
}
.search-card .ItemDetail span,
.NothingFound p {
    font-size: var(--FontXs);
    color: var(--Grey);
}
.search-card.SkeletonCard,
.BlogCard.SkeletonCard {
    border: 0;
    background: var(--Tint);   /* the card fill would hide the placeholder */
}
.product-item a:hover h3::after {
    background-color: var(--AccentBright);
    transform: rotate(45deg);
}
/* AJAX pagination (inc/grid-functions.php + combined.js Script 7): two-digit numbers in small boxes, the current page in lime */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}
.pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border-radius: var(--Radius);
    box-shadow: inset 0 0 0 1px var(--Primary);
    background: var(--Secondary);
    font-size: var(--FontSm);
    line-height: 1;
    color: var(--Primary);
    cursor: pointer;
    transition: background-color 0.2s;
}
.pagination .prev,
.pagination .next {
    padding: 0 14px;
}
.pagination .current,
.pagination .dots {
    box-shadow: none;
    cursor: default;
}
.pagination .current {
    background: var(--AccentBright);
}
.pagination .dots {
    min-width: 0;
    background: none;
}
@media (hover: hover) {
    .pagination a.page-numbers:hover {
        background: var(--AccentSoft);
        color: var(--Primary);
    }
}
/* Loading placeholders: a light band sweeps across (transform only) */
.SkeletonCard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--Secondary), transparent);
    opacity: 0.6;
    transform: translateX(-100%);
    animation: Shimmer 1.2s var(--Ease) infinite;
}
@keyframes Shimmer {
    to {
        transform: translateX(100%);
    }
}
@media (max-width: 1200px) {
    .products-grid,
    .search-results-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 1024px) {
    .products-grid,
    .search-results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .products-grid,
    .search-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .search-card .ItemDetail {
        padding: 10px 12px 12px;
    }
    .search-card h3 {
        font-size: var(--FontSm);
    }
    .pagination {
        gap: 8px;
        margin-top: 22px;
    }
    .pagination .page-numbers {
        min-width: 40px;
        height: 40px;
    }
}
/* Footer (white) */
.SiteFooter {
    background: var(--Secondary);
}
.FooterMain {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px 271px;
    gap: 30px 0;
}
.FooterAbout {
    max-width: 432px;
    gap: 34px;
}
.FooterLogo,
.FooterLogo:hover {
    font-family: var(--FontUi);
    font-size: 22px;
    font-weight: 700;
    color: var(--Primary);
}
.FooterLogo img {
    display: block;
    width: 160px;
}
.SiteFooter p,
.SiteFooter li,
.FooterLinks a,
.FooterContact a {
    font-size: var(--FontSm);
    line-height: 20px;
    color: var(--FootText);
}
.SiteFooter .FooterTitle,
.CatalogLabel {
    font-family: var(--FontHead);
    font-weight: 900;
    color: var(--Primary);
}
.FooterNewsletter {
    width: 100%;
}
.FooterLinks,
.FooterContact,
.FooterLegal {
    list-style: none;
    margin: 0;
}
.FooterLinks,
.FooterContact,
.FooterNewsletter .custom-form-container {
    margin-top: 20px;
}
.FooterLinks {
    gap: 16px;
}
.FooterContact {
    gap: 14px;
}
.FooterLinks a:hover,
.FooterContact a:hover,
.FooterLegal a:hover {
    color: var(--Primary);
    text-decoration: underline;
}
.FooterContact li,
.FooterContact a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 24px;
}
.FooterContact svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    color: var(--Primary);
}
/* Social icons: one outline set in equal mint tiles with the site's button corners; hover = green tile, lime icon
   (the theme's green + lime pair). Colours only change, nothing moves. */
.FooterSocial {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 42px;
}
.FooterSocial a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--RadiusBtn);
    background-color: var(--Mint);
    box-shadow: inset 0 0 0 1px var(--MintLine);
    color: var(--Primary);
    transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.FooterSocial svg {
    width: 19px;
    height: 19px;
}
@media (hover: hover) {
    .FooterSocial a:hover {
        background-color: var(--Primary);
        box-shadow: inset 0 0 0 1px var(--Primary);
        color: var(--Accent);
    }
}
.FooterBottom {
    margin-top: 34px;
    border-top: 1px solid var(--Rule);
}
.FooterBottom > div {
    flex-wrap: wrap;
    gap: 10px 30px;
    padding-block: 22px 20px;
}
.FooterBottom p,
.FooterLegal a {
    font-size: 13px;
    color: var(--GreyLight);
}
.FooterLegal {
    display: flex;
    gap: 20px;
}
.FooterForm.custom-form {
    flex-wrap: nowrap;
    gap: 0;
    overflow: hidden;
    border-radius: var(--Radius);
    background: var(--Rule);
}
.FooterForm .form-group.EmailInput {
    flex: 1;
    min-width: 0;
}
.FooterForm.custom-form .form-group.SubmitBtn {
    margin: 0;
}
.FooterForm .form-group input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: none;
    background: none;
    font-size: var(--FontXs);
    color: var(--Text);
}
.FooterForm .form-group button,
.FooterForm .form-group button:focus {
    height: 40px;
    padding: 0 14px;
    border-radius: 0;
    background: var(--AccentBright);
    font-family: var(--FontFamily);
    font-size: var(--FontXs);
    font-weight: 400;
    color: var(--Primary);
}
.FooterForm .form-group button:hover {
    background: var(--AccentHover);
    color: var(--Primary);
}
.SiteFooter .form-response p {
    margin-top: 8px;
    font-size: var(--FontXs);
    color: var(--Primary);
}
/* Form messages and the upload bar (quote-forms/ajax.js). The bar grows with transform only. */
.FormMessage {
    margin-top: 10px;
    font-size: var(--FontSm);
    line-height: 1.5;
    color: var(--Primary);
}
.SiteFooter .FormMessage.IsError,
.FormMessage.IsError {
    color: var(--Danger);
}
.FormProgress {
    display: block;
    height: 6px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: var(--Pill);
    background: var(--Line);
}
.FormProgress span {
    display: block;
    height: 100%;
    background: var(--Primary);
    transform-origin: left;
    transition: transform 0.3s var(--Ease);
}
.custom-form [type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.splide {
    position: relative;
    --Per: 5;
    --Gap: 20px;
}
.HomeHero .splide,
.ProductGallery .splide {
    --Per: 1;
    --Gap: 0px;
}
.splide__track {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.splide__list {
    display: flex;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    backface-visibility: hidden;
}
.splide__slide {
    position: relative;
    flex-shrink: 0;
    list-style: none !important;
    margin: 0;
    backface-visibility: hidden;
}
.splide:not(.is-initialized) .splide__slide {
    width: calc((100% - (var(--Per) - 1) * var(--Gap)) / var(--Per));
    margin-right: var(--Gap);
}
.splide__track--draggable {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.splide__track--draggable:active {
    cursor: grabbing;
}
.splide__slide img {
    -webkit-user-drag: none;
}
.splide__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    padding: 0;
    margin: -1px;
}
.splide__arrows {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}
.splide__arrows .splide__arrow,
.splide__arrows .splide__arrow:focus {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: var(--Secondary);
    box-shadow: inset 0 0 0 1.5px var(--Outline);
    color: var(--Primary);
    /* No press effect (user rule); hover colours and the start/end fade ease in */
    transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, opacity 0.3s;
    -webkit-tap-highlight-color: transparent;
}
.splide__arrow svg {
    width: 20px;
    height: 20px;
}
.splide__arrow--prev svg {
    transform: scaleX(-1);
}

@media (hover: hover) {
    .splide__arrows .splide__arrow:enabled:hover {
        background: var(--Primary);
        box-shadow: none;
        color: var(--Secondary);
    }
    
}

.splide__arrows .splide__arrow:disabled {
    opacity: 0.4;
    cursor: default;
}


form.custom-form label {
    line-height: 1;
}
.custom-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.custom-form .form-group {
    display: flex;
    flex-direction: column;
}
.CategoryForm .form-group {
    width: calc(20% - 8px);
}
.CategoryForm .form-group label {
    font-family: var(--FontUi);
    font-size: var(--FontXs);
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--Primary);
}
.CategoryForm .form-group input,
.CategoryForm .form-group select,
.CategoryForm .form-group textarea {
    padding: 8px 10px;
    border: 1px solid var(--Outline);
    border-radius: var(--RadiusMd);
    width: 100%;
    font-size: var(--FontXs);
    background: var(--Secondary);
    line-height: 1;
}
.form-group input,
.form-group select,
.form-group textarea {
    transition: border-color 0.2s, background-color 0.2s, color 0.2s !important;
}
.custom-form .form-group.full-width {
    width: 100%;
}
.cf-turnstile:empty {
    display: none;
}
.custom-form .form-group.SubmitBtn {
    margin: 0 auto;
    margin-top: 10px;
    width: inherit;
}
.custom-form .form-group input[type="submit"] {
    width: auto;
    padding: 16.5px 24px;
    border: none;
    border-radius: var(--RadiusBtn);
    background: var(--Primary);
    font-family: var(--FontUi);
    font-size: var(--FontSm);
    font-weight: 700;
    line-height: 1;
    color: var(--Secondary);
}
.custom-form .form-group input[type="submit"]:hover,
.custom-form .form-group input[type="submit"]:focus {
    background: var(--PrimaryDeep);
}
.custom-form .form-group input:focus,
.custom-form .form-group input:focus-visible,
.custom-form .form-group select:focus,
.custom-form .form-group select:focus-visible,
.custom-form .form-group textarea:focus,
.custom-form .form-group textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.CategoryForm .form-group input:focus,
.CategoryForm .form-group select:focus,
.CategoryForm .form-group textarea:focus {
    border: 1px solid var(--Primary);
}
.WhatsAppFloating {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #25d366;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    will-change: transform;
}
.WhatsAppFloating.pulse::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.6);
    animation: whatsappPulse 1s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}
.WhatsAppFloating:hover {
    transform: scale(1.1);
}
.WhatsAppFloating:active {
    transform: scale(0.95);
}
.WhatsAppFloating svg {
    display: block;
    width: 32px;
    height: 32px;
    fill: var(--Secondary);
}
@keyframes whatsappPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}
@media (max-width: 1440px) {
    .MenuWrapper > .sub-menu {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .splide {
        --Per: 4;
    }
}
@media (max-width: 1366px) {
    .HeaderLogo .custom-logo {
        width: 140px;
    }
    .SiteHeader .DesktopBtn {
        padding: 14.5px 18px;
    }
    .SiteHeader .DesktopBtn svg,
    .DesktopNavigationMenu .NavList > li.menu-item-has-children > a::after {
        display: none;
    }
    .DesktopNavigationMenu .NavList > li > a {
        font-size: var(--FontSm);
    }
    .SearchModule .live-search-item-title {
        font-size: 13px;
    }
    .SearchModule .live-search-item-type {
        font-size: 9.5px;
    }
    .SearchModule .live-search-no-results,
    .SearchModule .live-search-error {
        padding: 20px;
        font-size: var(--FontXs);
    }
}
@media (min-width: 1201px) {
    .MobileNavigationMenu {
        display: none !important;
    }
    /* Scrolled, desktop only: frosted glass and a slimmer bar. The slimming is two transforms (bar up, content down),
       so nothing reflows. Never do this below 1201px — a transform or backdrop-filter on the header would trap the
       fixed mobile menu inside it. */
    .SiteHeader.IsStuck {
        --MenuGap: calc((var(--HeaderStuckH) - 44px) / 2);
        background: var(--Glass);
        -webkit-backdrop-filter: saturate(1.5) blur(14px);
        backdrop-filter: saturate(1.5) blur(14px);
        transform: translateY(calc(var(--HeaderShrink) * -1));
    }
    .SiteHeader.IsStuck .HeaderContainer {
        transform: translateY(calc(var(--HeaderShrink) / 2));
    }
}
@media (max-width: 1200px) {
    .SearchModule form.custom-live-search-form .search-input {
        padding: 9px 12px;
        font-size: var(--FontXs);
    }
    .SearchModule form.custom-live-search-form .search-btn {
        padding: 6px 15px;
    }
    .SearchModule .live-search-item-image,
    .SearchModule .live-search-item-image-placeholder {
        width: 42px;
        height: 42px;
        margin-right: 12px;
    }
    .SearchModule .live-search-item-info {
        gap: 12px;
    }
    .SearchModule .live-search-item-type {
        font-size: 9px;
    }
    .SearchModule .live-search-view-all {
        padding: 15px;
    }
    .HeaderActions {
        gap: 6px;
    }
    .NavigationMenu.DesktopNavigationMenu,
    .DesktopBtn.Btn {
        display: none;
    }
    .HamburgerToggle,
    .DesktopBtn.TabletBtn {
        display: flex;
    }
    .SiteHeader .DesktopBtn.TabletBtn {
        margin: 0 8px 0 0;
    }
    .splide {
        --Per: 3;
    }
    .HomeHero {
        grid-template-columns: 42% minmax(0, 1fr);
    }
    .HeroCopy {
        padding-right: 28px;
    }
    
    
    
    
    
    

    
}
@media (max-width: 1024px) {
    .CategoryForm .form-group {
        width: calc(25% - 8px);
    }
    .splide {
        --Per: 2;
    }
    .HomeHero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        height: auto;
    }
    .HeroMedia {
        order: -1;
        height: clamp(260px, 64vw, 500px);
    }
    .HeroMedia .splide__arrows {
        inset: 50% 12px auto;
        justify-content: space-between;
        transform: translateY(-50%);
        pointer-events: none;
    }
    .HeroMedia .splide__arrow {
        pointer-events: auto;
    }
    .HeroCopy {
        padding: 32px 20px 36px;
        border-right: 0;
    }
    
    
    
    
    
    .HomeFaqSection {
        grid-template-columns: minmax(0, 1fr);
    }
    .HomeQuote .CategoryForm {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    
}
@media (max-width: 767px) {
    .HeaderLogo .custom-logo {
        width: 124px;
    }
    .DesktopBtn.flex {
        display: none;
    }
    .HamburgerBar {
        width: 20px;
    }
    .SearchModule .live-search-dropdown {
        max-height: 45vh;
    }
    .SearchModule .live-search-item {
        padding: 10px 12px;
    }
    .SearchModule .live-search-item-image,
    .SearchModule .live-search-item-image-placeholder {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
    .SearchModule .live-search-item-type {
        padding: 5px;
        font-size: 8px;
    }
    .SearchModule .live-search-item-info {
        gap: 10px;
    }
    .MobileNavigationMenu {
        width: 100%;
        max-width: 100%;
        padding: 15px 15px 40px;
    }
    .MobileNavigationMenu .NavList {
        margin: 15px 0 0;
    }
    .CategoryForm .form-group {
        width: calc(50% - 5px);
    }
    .theme-news-ticker-wrap {
        font-size: 12px;
    }
    .theme-news-ticker span {
        padding-right: 60px;
    }
    .splide {
        --Per: 1;
        --Gap: 14px;
    }
    .splide__track {
        padding-right: 20%;
    }
    .HomeHero .splide__track {
        padding-right: 0;
    }
    .splide__arrows {
        margin-top: 16px;
    }
    .splide__arrows .splide__arrow,
    .splide__arrows .splide__arrow:focus {
        width: 38px;
        height: 38px;
    }
    .splide__arrow svg {
        width: 17px;
        height: 17px;
    }
    .HeroCopy {
        padding: 26px 16px 30px;
    }
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .HomeFaqSection {
        gap: 28px;
    }
    :is(.HomeFaqSection, .CatFaqSection, .BlogFaqSection) .FaqTitle {
        min-height: 44px;
        padding: 6px 8px 6px 14px;
        font-size: var(--FontSm);
    }
    :is(.HomeFaqSection, .CatFaqSection, .BlogFaqSection) .FaqAnswerInner p {
        padding: 0 14px 14px;
    }
    .HomeQuote .custom-form-container {
        margin-top: 26px;
    }
    .HomeQuote .CategoryForm {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .HomeQuote .CategoryForm .form-group:has(input[type="file"]) {
        grid-column: 1 / -1;
    }
    .HomeQuote .CategoryForm .form-group input[type="submit"] {
        width: 100%;
        min-height: 44px;
    }
    
    
    
    
}

/* Responsive rules for the home sections and footer of the final design */
@media (max-width: 1440px) {
    .BenefitsGrid,
    .StepsGrid {
        gap: 40px;
    }
}
@media (max-width: 1200px) {
    .TrendSection.section,
    .FeaturedSection + .OptionsSection > .section,
    .StepsGrid.section {
        padding-top: 80px;
    }
    .UspGrid.section,
    .BenefitsGrid.section,
    .HomeFaqSection.section {
        padding-bottom: 80px;
    }
    .TrendGrid {
        margin-top: 40px;
    }
    .TrendCard span {
        font-size: 18px;
    }

    .WhyGrid {
        gap: 32px;
    }
    .BenefitsCell,
    .StepsCell {
        padding-inline: 16px;
    }
    .FooterMain {
        grid-template-columns: minmax(0, 1fr) 220px 250px;
    }
}
@media (max-width: 1024px) {
    /* Category cards: three, then two wider ones, on a six-column grid */
    .TrendGrid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .TrendCard {
        grid-column: span 2;
        aspect-ratio: auto;
        height: clamp(230px, 38vw, 380px);
    }
    .TrendCard:nth-child(n+4) {
        grid-column: span 3;
    }
    .UspGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 32px;
    }
    .UspItem:nth-child(odd) {
        border-left: 0;
    }
    .WhyGrid,
    .BenefitsGrid,
    .StepsGrid {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Stacked: the photo always comes first */
    .WhyMedia,
    .StepsMedia {
        order: -1;
    }
    .BenefitsMedia,
    .StepsMedia {
        min-height: 0;
        aspect-ratio: 798/466;
    }
    .FooterMain {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 20px;
    }
    .FooterAbout {
        grid-column: 1 / -1;
        max-width: none;
    }
}
@media (max-width: 767px) {
    .TrendSection.section,
    .FeaturedSection + .OptionsSection > .section,
    .StepsGrid.section {
        padding-top: 56px;
    }
    .UspGrid.section,
    .BenefitsGrid.section,
    .HomeFaqSection.section {
        padding-bottom: 56px;
    }
    .TrendHead,
    .FeaturedHead,
    .OptionsHead,
    .IndustryHead,
    .HomeQuoteHead,
    .CatGridHead,
    .CatGalleryHead {
        gap: 16px;
    }
    .TrendHead p,
    .FeaturedHead p,
    .WhyCopy p,
    .IndustryHead p,
    .CatGridHead p,
    .CatGalleryText p,
    .HomeFaqIntro .h2-size + p,
    .HomeQuoteHead p,
    .CatFaqIntro .h2-size + p,
    .ProductFaqIntro .h2-size + p,
    .ProductRecIntro p,
    .CatHeroCopy p {
        font-size: var(--FontSize);
        line-height: 1.4;
    }
    /* Category cards: two per row, the fifth one full width */
    .TrendGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 28px;
    }
    .TrendCard,
    .TrendCard:nth-child(n+4) {
        grid-column: auto;
        height: auto;
        aspect-ratio: 340/400;
    }
    .TrendCard:last-child {
        grid-column: 1 / -1;
        aspect-ratio: 16/9;
    }
    .TrendCard span {
        padding: 70px 12px 12px;
        font-size: var(--FontSize);
    }
    /* Phones: the name gets the whole card width (centred, no arrow button), so long names stay on one or two lines */
    .product-item a {
        border-radius: var(--RadiusMd);
    }
    .product-item h3 {
        justify-content: center;
        padding: 10px 8px;
        font-size: var(--FontXs);
        line-height: 1.3;
        text-align: center;
    }
    .product-item h3::after {
        display: none;
    }
    .UspGrid {
        row-gap: 28px;
    }
    .UspItem {
        padding: 0 8px;
    }
    .UspItem img {
        height: 40px;
    }
    .UspItem h3 {
        margin-top: 10px;
        font-size: var(--FontSm);
    }
    .UspItem p {
        margin-top: 6px;
        font-size: var(--FontXs);
    }
    .FeaturedSection .splide__track,
    .IndustrySection .splide__track {
        margin-top: 28px;
    }
    .FeaturedSection .splide__arrows {
        margin-top: 22px;
    }

    .OptionsTabs {
        gap: 8px;
    }
    .OptionsPanel {
        margin-top: 20px;
    }
    .OptionsTab,
    .OptionsTab:focus {
        height: 40px;
        padding: 0 16px;
        font-size: var(--FontSm);
    }
    .WhyCopy {
        gap: 22px;
    }
    .BenefitsMedia,
    .StepsMedia {
        aspect-ratio: 4/3;
    }
    .BenefitsMedia h3,
    .StepsMedia h3 {
        padding: 70px 16px 20px;
        font-size: 18px;
    }
    /* Icon cells: one per row, with a rule between them */
    .BenefitsCells,
    .StepsCells {
        grid-template-columns: minmax(0, 1fr);
    }
    .BenefitsCell:nth-child(n),
    .StepsCell:nth-child(n) {
        padding: 22px 8px;
        border-right: 0;
        border-bottom: 1px solid var(--Rule);
    }
    .BenefitsCell:last-child,
    .StepsCell:last-child {
        border-bottom: 0;
    }
    .IndustryCard span {
        padding: 70px 16px 16px;
        font-size: var(--FontLead);
    }
    .FooterMain {
        gap: 30px 20px;
    }
    .FooterMain > div:last-child {
        grid-column: 1 / -1;
    }
    .FooterBottom > div {
        flex-direction: column;
        align-items: center;
        padding-bottom: 96px;
        text-align: center;
    }
}
.MobileNavigationMenu * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}
/* ==========================================================================
   Product page (single-products.php) — design packbox-product-reference/.
   The long description, the split section (home "Why"), customization and the FAQ accordion reuse the rules above.
   ========================================================================== */
/* Hero: two halves — green (breadcrumb + gallery) and sand (summary + quote form); their content keeps to the container edges */
.ProductHero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ProductHeroMedia {
    padding: 20px 40px 110px max(20px, calc((200% - var(--ContainerWidth)) / 2 + 20px));
}
.ProductHeroInfo {
    padding: 70px max(20px, calc((200% - var(--ContainerWidth)) / 2 + 20px)) 60px clamp(40px, 4.75vw, 91px);
    background: var(--BG3);
}
/* Breadcrumbs (templates/breadcrumbs.php): white on the green product hero, green on the white category page.
   The separator chevron is a mask filled with the text colour, so one rule serves both. */
:is(.ProductCrumbs, .CatCrumbs) ol {
    gap: 6px 14px;
    margin: 0;
    list-style: none;
    font-size: var(--FontSm);
    line-height: 20px;
}
:is(.ProductCrumbs, .CatCrumbs) li {
    display: flex;
    align-items: center;
    gap: 14px;
}
:is(.ProductCrumbs, .CatCrumbs) li + li::before {
    content: "";
    width: 6px;
    height: 11px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 11' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4.5L1 10'/%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 6 11' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4.5L1 10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.CrumbsHome svg {
    display: block;
    width: 16px;
    height: 16px;
}
.ProductCrumbs li,
.ProductCrumbs a {
    color: var(--Secondary);
}
.ProductCrumbs a:hover,
.ProductCrumbs [aria-current] {
    color: var(--AccentBright);
}
.CatCrumbs {
    margin-bottom: 18px;
}
.CatCrumbs li,
.CatCrumbs [aria-current] {
    color: var(--Grey);
}
.CatCrumbs a {
    color: var(--Primary);
}
.CatCrumbs a:hover {
    color: var(--PrimaryDeep);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Gallery: thumbnail strip + square photo. Four square thumbnails and their gaps are exactly as tall as the photo:
   thumb = (width - 3 thumb gaps - column gap) / 5. */
.ProductGallery {
    --ThumbGap: clamp(8px, 0.73vw, 14px);
    --GalleryGap: clamp(14px, 1.35vw, 26px);
    display: grid;
    grid-template-columns: calc((100% - 3 * var(--ThumbGap) - var(--GalleryGap)) / 5) minmax(0, 1fr);
    column-gap: var(--GalleryGap);
    max-width: 779px;
    margin-top: clamp(28px, 3.9vw, 75px);
}
.ProductGallery.IsSingle {
    grid-template-columns: minmax(0, 1fr);
    max-width: 611px;
}
.ProductGalleryMain {
    grid-area: 1 / 2;
    overflow: hidden;
    border-radius: var(--RadiusMedia);
    background: var(--BG3);
}
.IsSingle .ProductGalleryMain {
    grid-column: 1;
}
.ProductGallery .splide__track {
    padding-right: 0;
}
.ProductGalleryMain .splide__slide {
    aspect-ratio: 1;
    overflow: hidden;
}
/* Desktop zoom (home.js): the photo grows 1.8x under the mouse */
.ProductGalleryMain img {
    transition: transform 0.3s var(--Ease);
}
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .ProductGalleryMain .splide__track {
        cursor: zoom-in;
    }
}
/* Product ID on the photo's top-right corner (it sits outside the slider, so it never zooms or slides) */
.ProductGalleryId {
    grid-area: 1 / 2;
    align-self: start;
    justify-self: end;
    z-index: 1;
    margin: 14px;
    padding: 5px 10px;
    border-radius: var(--RadiusBtn);
    background: var(--Secondary);
    font-family: var(--FontUi);
    font-size: var(--FontXs);
    font-weight: 600;
    line-height: 1.3;
    color: var(--Primary);
    pointer-events: none;
}
.IsSingle .ProductGalleryId {
    grid-column: 1;
}
/* Four slots whatever the number of photos: each thumbnail takes a quarter of the strip (fewer photos leave the
   rest empty) and more than four scroll. contain: size stops the strip from growing the row, so it is as tall as the photo. */
.ProductGalleryThumbs {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: var(--ThumbGap);
    contain: size;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}
.ProductGalleryThumbs::-webkit-scrollbar {
    display: none;
}
.ProductGalleryThumbs button,
.ProductGalleryThumbs button:hover,
.ProductGalleryThumbs button:focus {
    position: relative;
    flex: none;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    border-radius: var(--RadiusMd);
    background: var(--BG3);
    scroll-snap-align: start;
}
.ProductGalleryThumbs button::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: inherit;
    transition: border-color 0.25s;
}
.ProductGalleryThumbs img {
    opacity: 0.7;
    transition: opacity 0.25s;
}
.ProductGalleryThumbs [aria-current="true"]::after {
    border-color: var(--AccentBright);
}
.ProductGalleryThumbs [aria-current="true"] img,
.ProductGalleryThumbs button:hover img {
    opacity: 1;
}
/* Summary */
.ProductHeroDesc {
    max-width: 720px;
    margin-top: clamp(18px, 1.7vw, 32px);
    font-size: var(--FontLead);
    line-height: 1.6;
}
.ProductReadMore,
.ProductReadMore:hover,
.ProductReadMore:focus {
    display: block;
    margin-top: 4px;
    padding: 0;
    background: none;
    font-family: var(--FontFamily);
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    color: var(--Primary);
}
.ProductReadMore:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ProductChips {
    gap: 12px 20px;
    margin-top: 24px;
}
.ProductChips span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: var(--RadiusBtn);
    background: var(--BG2);
    font-family: var(--FontUi);
    font-weight: 600;
    color: var(--Primary);
}
.ProductHeroFormTitle {
    margin-top: 32px;
    color: var(--Primary);
}
/* Quote form: six-column grid (3 / 3 / 2 / 2 / full), 38px fields with a green line */
.ProductHeroInfo .custom-form-container {
    max-width: 685px;
    margin-top: 24px;
}
:is(.ProductForm, .QuoteForm).custom-form {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}
:is(.ProductForm, .QuoteForm) .Span2 {
    grid-column: span 2;
}
:is(.ProductForm, .QuoteForm) .Span3 {
    grid-column: span 3;
}
:is(.ProductForm, .ContactForm, .QuoteForm) .full-width,
:is(.ProductForm, .ContactForm, .QuoteForm) .SubmitBtn,
:is(.ProductForm, .ContactForm, .QuoteForm) .cf-turnstile {
    grid-column: 1 / -1;
}
:is(.ProductForm, .ContactForm, .QuoteForm) .form-group input,
:is(.ProductForm, .ContactForm, .QuoteForm) .form-group select,
:is(.ProductForm, .ContactForm, .QuoteForm) .form-group textarea {
    width: 100%;
    min-height: 38px;
    padding-left: 12px;
    border: 1px solid var(--Primary);
    border-radius: var(--RadiusBtn);
    background-color: var(--Secondary);
    font-size: var(--FontXs);
    line-height: 1.4;
    color: var(--Text);
}
:is(.ProductForm, .ContactForm, .QuoteForm) .form-group input,
:is(.ProductForm, .ContactForm, .QuoteForm) .form-group textarea {
    padding: 0 12px;
}
:is(.ProductForm, .ContactForm, .QuoteForm) .form-group textarea {
    height: 88px;
    padding: 10px 12px;
    resize: vertical;
}
:is(.ProductForm, .ContactForm, .QuoteForm) ::placeholder,
:is(.ProductForm, .ContactForm, .QuoteForm) .form-group select:invalid,
:is(.ProductForm, .ContactForm, .QuoteForm) .form-group input[type="file"] {
    color: var(--Grey);
}
:is(.ProductForm, .ContactForm, .QuoteForm) .form-group :focus {
    background-color: var(--AccentSoft);
}
/* Consent line (product + contact forms): small text centred on the checkbox, airy line height when it wraps */
form.custom-form .ProductConsent label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: var(--FontMini);
    line-height: 1.5;
    color: var(--Grey);
    cursor: pointer;
}
:is(.ProductForm, .ContactForm, .QuoteForm) .ProductConsent input {
    flex: none;
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--Primary);
}
.ProductConsent a {
    text-decoration: underline;
}
:is(.ProductForm, .ContactForm, .QuoteForm) .form-group.SubmitBtn {
    align-items: flex-start;
    margin: 10px 0 0;
}
/* Long description (box styles are shared with the category page) */
.ProductContentSection.section,
.ProductFaqSection.section {
    padding-top: 100px;
}
.single-products .OptionsSection > .section {
    padding-bottom: 100px;
}
/* Recommendations: green band, title + square arrows on one line, 340px cards that run off the right edge */
.ProductRecSection {
    overflow: hidden;
}
.ProductRecSection .splide {
    --Gap: 20px;
}
.ProductRecHead {
    gap: 24px;
}
.ProductRecIntro {
    gap: 14px;
}
.ProductRecHead .splide__arrows {
    gap: 18px;
    margin: 0;
}
.ProductRecHead .splide__arrow,
.ProductRecHead .splide__arrow:focus {
    width: 36px;
    height: 36px;
    border-radius: var(--RadiusBtn);
    background: var(--Track);
    box-shadow: none;
    color: var(--Primary);
}
.ProductRecHead .splide__arrow--next,
.ProductRecHead .splide__arrow--next:focus {
    background: var(--AccentBright);
}
@media (hover: hover) {
    .ProductRecHead .splide__arrow:enabled:hover {
        background: var(--Secondary);
        color: var(--Primary);
    }
}
.ProductRecHead .splide__arrow svg {
    width: 8px;
    height: 15px;
}
.ProductRecSection .splide__track {
    margin: 33px calc((100% - 100vw) / 2) 0 0;
    padding-right: 0;
}
.ProductRecSection .splide:not(.is-initialized) .splide__slide {
    width: auto;
}
/* The strip that Splide moves gets its own layer, so swipes and glides stay smooth */
.ProductRecSection .splide__list {
    will-change: transform;
}
.ProductRecCard {
    display: block;
    width: 340px;
    color: var(--Secondary);
}
.ProductRecMedia {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--RadiusMedia);
    background: var(--PrimaryMid);
}
.ProductRecCat {
    display: block;
    margin-top: 17px;
    font-size: var(--FontXs);
    line-height: 1.2;
    color: var(--AccentBright);
}
.ProductRecName {
    display: block;
    margin-top: 6px;
    font-size: var(--FontLg);
    line-height: 1.3;
    transition: color 0.2s;
}
.ProductRecCard:hover {
    color: var(--Secondary);
}
.ProductRecCard:hover .ProductRecName {
    color: var(--AccentBright);
}
/* FAQ: intro + green help card on the left (sticky, grouped with the category FAQ), numbered accordion on the right; both centred on each other */
.ProductFaqSection {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 4.2vw, 80px);
    align-items: center;
}
.ProductFaqIntro {
    gap: 20px;
}
/* FAQs page (page-faqs.php): this look in one centred 900px column — the intro on top, the list under it
   (800 / 900 / 1000 compared: 900 sits best under the heading; ≤1024 the shared rule makes it full width) */
.FaqsPageSection {
    grid-template-columns: minmax(0, 900px);
    justify-content: center;
    gap: 40px;
}
.FaqsPageEmpty {
    font-size: var(--FontLead);
}
.ProductFaqHelp {
    position: relative;
    isolation: isolate;
    gap: 12px;
    width: 100%;
    margin-top: 36px;
    padding: clamp(24px, 1.9vw, 36px);
    overflow: hidden;
    border-radius: var(--RadiusMedia);
}
.ProductFaqHelp::after,
.QuoteSteps::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    z-index: -1;
    width: 200px;
    height: 200px;
    border: 28px solid var(--AccentGlow);
    border-radius: 50%;
}
.ProductFaqTag {
    padding: 6px 12px;
    border-radius: var(--Pill);
    background: var(--AccentGlow);
    font-family: var(--FontUi);
    font-size: var(--FontXs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--AccentBright);
}
.ProductFaqHelp h3 {
    margin-top: 6px;
    font-family: var(--FontHead);
    font-weight: 900;
}
.ProductFaqHelp p {
    max-width: 420px;
    color: var(--OnDark);
}
.ProductFaqActions {
    gap: 12px;
    margin-top: 14px;
}
.ProductFaqActions .Btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
}
.ProductFaqActions .BtnOutline,
.ProductFaqActions .BtnOutline:focus {
    background: none;
    color: var(--Secondary);
}
.ProductFaqSection .FaqWrapper {
    counter-reset: faq;
    border-top: 1px solid var(--Line);
}
.ProductFaqSection .FaqItem {
    position: relative;
    isolation: isolate;
    border-bottom: 1px solid var(--Line);
    counter-increment: faq;
    transition: border-color 0.3s;
}
/* Open: a soft mint panel wipes down behind the item (scaled layer — compositor only) */
.ProductFaqSection .FaqItem::before {
    border-radius: var(--RadiusCard);
    background: var(--Mint);
}
.ProductFaqSection .FaqItem.active {
    border-bottom-color: transparent;
}
.ProductFaqSection .FaqTitle {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 16px;
    min-height: 88px;
    padding: 16px 24px;
    border-radius: var(--RadiusCard);
}
.ProductFaqSection .FaqTitle::before {
    content: counter(faq, decimal-leading-zero);
    font-family: var(--FontHead);
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: var(--MintLine);
    transition: color 0.3s;
}
.ProductFaqSection .FaqTitle:hover::before,
.ProductFaqSection .FaqItem.active .FaqTitle::before {
    color: var(--Primary);
}
.ProductFaqSection .FaqQuestion {
    font-family: var(--FontUi);
    font-size: var(--FontLg);
    font-weight: 600;
    line-height: 1.35;
    color: var(--Text);
}
.ProductFaqSection .FaqIcon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--Line);
    border-radius: 50%;
    background: var(--Secondary);
    color: var(--Primary);
    transition: transform 0.45s var(--Ease), background-color 0.3s, border-color 0.3s;
}
.ProductFaqSection .FaqIcon svg {
    width: 16px;
    height: 16px;
}
.ProductFaqSection .FaqTitle:hover .FaqIcon {
    border-color: var(--Primary);
}
.ProductFaqSection .FaqItem.active .FaqIcon {
    transform: rotate(45deg);
    border-color: var(--AccentBright);
    background: var(--AccentBright);
}
.ProductFaqSection .FaqAnswerInner p {
    padding: 0 80px 26px 96px;
    line-height: 1.65;
}
@media (max-width: 1200px) {
    .ProductHeroMedia {
        padding-right: 28px;
        padding-bottom: 60px;
    }
    .ProductHeroInfo {
        padding-top: 48px;
    }
    .ProductRecCard {
        width: 280px;
    }
}
/* Stacked: gallery first (photo, then the thumbnails as a row of four), then the summary and the form */
@media (max-width: 1024px) {
    .ProductHero,
    .ProductFaqSection {
        grid-template-columns: minmax(0, 1fr);
    }
    .ProductHeroMedia,
    .ProductHeroInfo {
        padding: 24px 20px 40px;
    }
    .ProductGallery,
    .ProductGallery.IsSingle {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--ThumbGap);
        max-width: 620px;
        margin: 24px auto 0;
    }
    .ProductGalleryMain,
    .ProductGalleryId {
        grid-area: 1 / 1;
    }
    .ProductGalleryThumbs {
        grid-area: 2 / 1;
        flex-direction: row;
        contain: none;
        overflow: auto hidden;
        scroll-snap-type: x mandatory;
    }
    .ProductGalleryThumbs button,
    .ProductGalleryThumbs button:hover,
    .ProductGalleryThumbs button:focus {
        width: calc((100% - 3 * var(--ThumbGap)) / 4);
    }
    .ProductFaqSection .FaqAnswerInner p {
        padding-right: 40px;
    }
    /* Stacked order: intro, the questions, then the help card on its own */
    .ProductFaqSection {
        gap: 28px;
    }
    .ProductFaqAside {
        display: contents;
    }
    .ProductFaqHelp {
        order: 1;
        margin-top: 8px;
    }
}
@media (max-width: 767px) {
    .ProductHeroMedia {
        padding: 16px 16px 28px;
    }
    .ProductHeroInfo {
        padding: 28px 16px 36px;
    }
    .ProductHeroDesc {
        font-size: var(--FontSize);
        line-height: 1.6;
    }
    .ProductChips {
        gap: 10px;
    }
    .ProductChips span {
        min-height: 28px;
        font-size: var(--FontXs);
    }
    .ProductHeroFormTitle {
        margin-top: 26px;
    }
    /* Breadcrumbs: smaller on phones */
    :is(.ProductCrumbs, .CatCrumbs) ol {
        gap: 4px 8px;
        font-size: var(--FontXs);
        line-height: 18px;
    }
    :is(.ProductCrumbs, .CatCrumbs) li {
        gap: 8px;
    }
    :is(.ProductCrumbs, .CatCrumbs) li + li::before {
        width: 5px;
        height: 9px;
    }
    .CrumbsHome svg {
        width: 14px;
        height: 14px;
    }
    .CatCrumbs {
        margin-bottom: 12px;
    }
    /* Phones: the name on its own row, then pairs (email + phone, material + unit, quantity + files); L / W / H stay three across */
    :is(.ProductForm, .QuoteForm) .Span2:has(input[type="text"]) {
        grid-column: 1 / -1;
    }
    :is(.ProductForm, .QuoteForm) .Span2:has(input[type="email"], input[type="tel"]) {
        grid-column: span 3;
    }
    :is(.ProductForm, .QuoteForm) .form-group select {
        padding-right: 28px;
        background-position: right 10px center;
    }
    .ProductGalleryId {
        margin: 10px;
    }
    .ProductContentSection.section,
    .ProductFaqSection.section {
        padding-top: 48px;
    }
    .single-products .OptionsSection > .section {
        padding-bottom: 48px;
    }
    .ProductRecHead .splide__arrow,
    .ProductRecHead .splide__arrow:focus {
        width: 32px;
        height: 32px;
    }
    .ProductRecSection .splide {
        --Gap: 14px;
    }
    .ProductRecHead {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .ProductRecIntro {
        gap: 10px;
    }
    .ProductRecSection .splide__track {
        margin-top: 22px;
    }
    .ProductRecCard {
        width: 240px;
    }
    .ProductRecCat {
        margin-top: 12px;
    }
    .ProductRecName {
        margin-top: 4px;
        font-size: var(--FontSm);
    }
    /* Help card: both buttons on one line */
    .ProductFaqHelp {
        gap: 10px;
    }
    .ProductFaqActions {
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 8px;
    }
    .ProductFaqActions .Btn {
        gap: 6px;
        min-height: 42px;
        padding: 0 12px;
        font-size: var(--FontXs);
    }
    .ProductFaqActions .Btn svg {
        width: 15px;
        height: 15px;
    }
    .ProductFaqSection .FaqTitle {
        grid-template-columns: 32px minmax(0, 1fr) 36px;
        gap: 10px;
        min-height: 72px;
        padding: 14px 12px;
    }
    .ProductFaqSection .FaqTitle::before {
        font-size: 18px;
    }
    .ProductFaqSection .FaqQuestion {
        font-size: var(--FontSm);
    }
    .ProductFaqSection .FaqIcon {
        width: 36px;
        height: 36px;
    }
    .ProductFaqSection .FaqAnswerInner p {
        padding: 0 16px 18px 54px;
        font-size: var(--FontSm);
        line-height: 1.55;
    }
}
/* ==========================================================================
   Catalog browser (templates/catalog-browser.php) — design packbox-catalog-reference/.
   /catalog/, Industry / Material / Style. The breadcrumb, pager and skeletons reuse the rules above.
   ========================================================================== */
/* Banner: photo under a 70% green layer, breadcrumb at the top, title in the middle */
.CatalogBanner {
    position: relative;
    height: clamp(200px, 19vw, 364px);
    overflow: hidden;
    background: var(--Primary);
}
.CatalogBanner > img,
.CatalogBanner::after {
    position: absolute;
    inset: 0;
}
.CatalogBanner > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.CatalogBanner::after {
    content: "";
    background: var(--PrimaryShade);
}
.CatalogBannerInner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}
.CatalogTitle {
    align-self: center;
    margin-top: -20px;
    font-size: clamp(36px, calc(14px + 3vw), 72px);
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    color: var(--Secondary);
}
/* Sidebar 240px · 54px gap · the grid (4 tiles of 340px at 1920) */
.CatalogSection.section {
    padding-top: 100px;
}
.CatalogSection {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 54px;
}
.CatalogSide {
    display: flex;
    flex-direction: column;
    gap: 34px;
}
.CatalogLabel {
    font-size: 22px;
    line-height: 1.2;
}
.CatalogSort {
    margin-top: 15px;
}
.CatalogSort select {
    height: 38px;
    padding: 0 46px 0 18px;
    border: 1px solid var(--GreyLight);
    border-radius: var(--RadiusBtn);
    background: var(--Secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='none' stroke='%239e9e9e' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1h12M1 7h8M1 13h5M17 1v12m0 0-2.5-2.5M17 13l2.5-2.5'/%3E%3C/svg%3E") no-repeat right 16px center / 19px 14px;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--FontFamily);
    font-size: var(--FontSm);
    color: var(--Grey);
    cursor: pointer;
}
.CatalogSort select:focus-visible {
    outline: 2px solid var(--Primary);
    outline-offset: 2px;
}
.CatalogPills {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 15px 0 0;
    list-style: none;
}
.CatalogPill,
.CatalogPill:hover,
.CatalogPill:focus {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    min-height: 38px;
    padding: 6px 18px;
    border-radius: var(--RadiusBtn);
    background: var(--Secondary);
    box-shadow: inset 0 0 0 1.5px var(--Primary);
    font-family: var(--FontFamily);
    font-size: var(--FontSm);
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    color: var(--Primary);
}
@media (hover: hover) {
    .CatalogPill:hover {
        background: var(--AccentSoft);
    }
}
.CatalogPill[aria-pressed="true"],
.CatalogPill[aria-pressed="true"]:hover,
.CatalogPill[aria-pressed="true"]:focus {
    background: var(--AccentBright);
    box-shadow: none;
}
/* A "Boxes By …" pill whose sub-category is the active filter */
.CatalogPill.HasActive {
    background: var(--AccentSoft);
}
.CatalogPill svg {
    flex: none;
    width: 12px;
    height: 12px;
    transition: transform 0.3s var(--Ease);
}
.CatalogPill[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.CatalogSub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 4px 12px;
    list-style: none;
}
.CatalogSub[hidden] {
    display: none;
}
.CatalogSubPill,
.CatalogSubPill:hover,
.CatalogSubPill:focus {
    min-height: 32px;
    padding: 4px 14px;
    font-size: var(--FontXs);
}
/* "Showing 1–20 of N products": at the foot of the sidebar, level with the last row of tiles.
   The copy inside the results is shown instead once the sidebar sits above the grid. */
.CatalogSideCount,
.CatalogCount {
    font-size: var(--FontSm);
    color: var(--Grey);
}
.CatalogSideCount {
    margin-top: auto;
}
.CatalogSideCount b,
.CatalogCount b {
    font-weight: 400;
    color: var(--Primary);
}
.CatalogCount {
    display: none;
}
.CatalogMain {
    min-width: 0;
}
/* Bottom-sheet parts (head, foot, toolbar button, backdrop) only exist up to 1024px; on desktop the
   sheet body is simply the sidebar column's content */
.CatalogSideHead,
.CatalogSideFoot,
.CatalogToolbar,
.CatalogBackdrop {
    display: none;
}
.CatalogSideBody {
    display: contents;
}
/* Desktop: the sidebar sticks under the header (grouped with the FAQ asides). However many categories it lists,
   it never grows past the screen: a taller list scrolls inside it (thin scrollbar, the page does not scroll along).
   The 4px padding/negative margin keeps focus rings from being clipped by the scroll box. */
@media (min-width: 1025px) {
    .CatalogSide {
        align-self: start;
        max-height: calc(100vh - var(--HeaderStuckH) - 48px);
        max-height: calc(100dvh - var(--HeaderStuckH) - 48px);
        margin: -4px;
        padding: 4px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--Outline) transparent;
    }
}
/* "Clear filters" (sidebar) and the "Filtered by: [category ×]" line above the tiles — shown by catalog.js */
.CatalogClear,
.CatalogClear:hover,
.CatalogClear:focus,
.CatalogClearAll,
.CatalogClearAll:hover,
.CatalogClearAll:focus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 4px 0;
    background: none;
    font-family: var(--FontFamily);
    font-size: var(--FontSm);
    font-weight: 400;
    line-height: 1.3;
    color: var(--Primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.CatalogClear {
    align-self: flex-start;
    margin-top: -14px;
}
.CatalogClear:hover,
.CatalogClearAll:hover {
    color: var(--PrimaryDeep);
}
.CatalogClear[hidden],
.CatalogActive[hidden] {
    display: none;
}
.CatalogClear svg,
.CatalogChip svg {
    flex: none;
    width: 14px;
    height: 14px;
}
.CatalogActive {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 20px;
    font-size: var(--FontSm);
    color: var(--Grey);
}
.CatalogChip,
.CatalogChip:hover,
.CatalogChip:focus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 34px;
    padding: 4px 12px 4px 16px;
    border-radius: var(--RadiusBtn);
    background: var(--AccentBright);
    font-family: var(--FontFamily);
    font-size: var(--FontSm);
    font-weight: 400;
    line-height: 1.3;
    white-space: normal;
    color: var(--Primary);
}
@media (hover: hover) {
    .CatalogChip:hover {
        background: var(--AccentHover);
    }
}
.CatalogResults .CatalogGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 20px;
}
/* Tile: square photo with rounded corners, the product's category, then its name */
.CatalogTile {
    display: block;
    color: var(--Dark);
}
.CatalogTileMedia {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--RadiusMedia);
    background: var(--Tint);
}
.CatalogTileCat {
    display: block;
    margin-top: 17px;
    font-size: var(--FontXs);
    line-height: 1.2;
    color: var(--Primary);
}
.CatalogTileName {
    margin-top: 6px;
    font-family: var(--FontFamily);
    font-size: var(--FontLg);
    font-weight: 400;
    line-height: 1.3;
    color: var(--Dark);
    transition: color 0.2s;
}
.CatalogTile:hover .CatalogTileName {
    color: var(--Primary);
}
.CatalogResults .pagination {
    margin-top: 56px;
}
.CatalogEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 20px;
    text-align: center;
}
@media (max-width: 1440px) {
    .CatalogResults .CatalogGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 1200px) {
    .CatalogSection {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 32px;
    }
}
/* Up to 1024px: a "Filters & sort" button above the tiles opens the sidebar as a bottom sheet (catalog.js).
   The sheet slides with transform only; while it is open the page behind does not scroll. */
@media (max-width: 1024px) {
    .CatalogSection.section {
        padding-top: 40px;
    }
    .CatalogSection {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .CatalogSide {
        position: fixed;
        inset: auto 0 0;
        z-index: 100002;
        gap: 0;
        max-height: 85vh;
        max-height: 85dvh;
        overflow: hidden;
        border-radius: var(--RadiusLg) var(--RadiusLg) 0 0;
        background: var(--Secondary);
        box-shadow: var(--Shadow);
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
        transition: transform 0.35s var(--Ease), visibility 0s linear 0.35s;
    }
    .CatalogSide.IsOpen {
        visibility: visible;
        transform: none;
        transition: transform 0.35s var(--Ease);
    }
    .CatalogBackdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 100001;
        background: var(--Backdrop);
    }
    .CatalogBackdrop[hidden] {
        display: none;
    }
    html.CatalogLocked {
        overflow: hidden;
    }
    .CatalogSideHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 12px 12px 20px;
        border-bottom: 1px solid var(--Line);
    }
    .CatalogSideTitle {
        font-family: var(--FontHead);
        font-weight: 900;
        color: var(--Primary);
    }
    .CatalogSideClose,
    .CatalogSideClose:hover,
    .CatalogSideClose:focus {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        background: var(--BG2);
        color: var(--Primary);
    }
    .CatalogSideClose svg {
        width: 18px;
        height: 18px;
    }
    .CatalogSideBody {
        display: flex;
        flex-direction: column;
        gap: 22px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 20px;
    }
    .CatalogSideFoot {
        display: block;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--Line);
    }
    .CatalogShow,
    .CatalogShow:hover,
    .CatalogShow:focus {
        display: block;
        width: 100%;
        text-align: center;
        color: var(--Accent);
    }
    .CatalogSide:focus {
        outline: none;
    }
    .CatalogClear {
        margin-top: -8px;
    }
    .CatalogToolbar {
        display: flex;
        margin-bottom: 16px;
    }
    .CatalogOpen,
    .CatalogOpen:hover,
    .CatalogOpen:focus {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 42px;
        padding: 0 16px;
        border-radius: var(--RadiusBtn);
        background: var(--Secondary);
        box-shadow: inset 0 0 0 1.5px var(--Primary);
        font-family: var(--FontFamily);
        font-size: var(--FontSm);
        font-weight: 400;
        color: var(--Primary);
    }
    .CatalogOpen svg {
        width: 18px;
        height: 18px;
    }
    .CatalogBadge {
        display: grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: var(--Pill);
        background: var(--AccentBright);
        font-size: var(--FontXs);
        line-height: 1;
        color: var(--Primary);
    }
    .CatalogBadge[hidden] {
        display: none;
    }
    .CatalogPills {
        flex-flow: row wrap;
        margin-top: 10px;
    }
    .CatalogPills > li:has(> [aria-expanded="true"]) {
        flex-basis: 100%;
    }
    .CatalogSub {
        flex-flow: row wrap;
    }
    .CatalogSideCount {
        display: none;
    }
    .CatalogCount {
        display: block;
        margin-bottom: 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .CatalogSide,
    .CatalogSide.IsOpen {
        transition: none;
    }
}
@media (max-width: 767px) {
    .CatalogSection.section {
        padding-top: 28px;
    }
    .CatalogTitle {
        margin-top: -10px;
    }
    .CatalogLabel {
        font-size: 19px;
    }
    .CatalogPill,
    .CatalogPill:hover,
    .CatalogPill:focus {
        min-height: 34px;
        padding: 4px 14px;
        font-size: var(--FontXs);
    }
    .CatalogResults .CatalogGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
    }
    .CatalogTileMedia {
        border-radius: var(--RadiusCard);
    }
    .CatalogTileCat {
        margin-top: 10px;
    }
    .CatalogTileName {
        font-size: var(--FontSm);
    }
    .CatalogResults .pagination {
        margin-top: 32px;
    }
}
/* ==========================================================================
   Contact page (page-contact.php) — design "Contact us page.pdf". The hero and samples boxes are the
   category page's green banner (CatSplit*); the form fields share the product form rules.
   ========================================================================== */

/* Photos are never cropped (user rule): each shows whole at its own shape, so any replacement image fits.
   The photo column takes the image's height (a taller copy column centres the photo, the divider still runs full height). */
:is(.ContactHeroSection, .ContactSamplesSection, .BlogSamplesSection, .CatSplitSection) .CatSplitMedia {
    display: flex;
    align-items: center;
    aspect-ratio: auto;
}
:is(.ContactHeroSection, .ContactSamplesSection, .BlogSamplesSection, .CatSplitSection) .CatSplitMedia img {
    height: auto;
    object-fit: contain;
}
/* Contact bar: a white strip of three items overlapping the foot of the hero box */
.ContactInfo {
    position: relative;
    z-index: 1;
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: -42px auto 0;
    padding: 14px 6px;
    list-style: none;
    border-radius: var(--RadiusLg);
    background: var(--Secondary);
    box-shadow: 0 12px 34px -14px rgba(0, 51, 32, 0.35);
}
.ContactInfo li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 28px;
    font-size: var(--FontXs);
    line-height: 1.4;
    color: var(--Primary);
}
.ContactInfo li + li {
    border-left: 1px solid var(--Line);
}
.ContactInfo li > span:last-child {
    display: flex;
    flex-direction: column;
}
.ContactInfo a {
    color: var(--Primary);
}
.ContactInfo a:hover {
    text-decoration: underline;
}
.ContactInfoIcon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--Primary);
    color: var(--AccentBright);
}
.ContactInfoIcon svg {
    width: 16px;
    height: 16px;
}
/* Get in touch: illustration left, form right */
.ContactTouchSection {
    display: grid;
    grid-template-columns: minmax(0, 830fr) minmax(0, 860fr);
    gap: 50px;
    align-items: center;
}
.ContactTouchMedia img {
    display: block;
    width: 100%;
    height: auto;
}
.ContactTouchCopy {
    gap: 14px;
}
.ContactTouchCopy > p {
    font-size: var(--FontSm);
}
.ContactTouchCopy .custom-form-container {
    margin-top: 12px;
}
.ContactForm.custom-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}
.ContactForm .form-group textarea {
    height: 120px;
}
/* Steps: grey band, four cards across the whole container (the PDF's narrow cards left wide empty sides) */
.ContactStepsSection {
    background: var(--BG2);
}
.ContactStepsHead {
    gap: 16px;
}
.ContactStepsHead p {
    font-size: var(--FontLead);
}
.ContactSteps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 40px 0 0;
    list-style: none;
}
.ContactStep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 34px 24px;
    border-radius: var(--RadiusCard);
    background: var(--Secondary);
    text-align: center;
}
.ContactStepNum {
    font-family: var(--FontHead);
    font-size: clamp(36px, calc(16px + 2vw), 52px);
    font-weight: 900;
    line-height: 1;
    color: var(--Primary);
}
.ContactStep h3 {
    margin-top: 6px;
    color: var(--Primary);
}
.ContactStep p {
    max-width: 300px;
    font-size: var(--FontSm);
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .ContactInfo {
        margin-top: -28px;
    }
    .ContactInfo li {
        padding: 4px 18px;
    }
    .ContactTouchSection {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .ContactTouchMedia {
        order: -1;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }
    .ContactSteps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .ContactInfo {
        flex-direction: column;
        width: auto;
        margin: -18px 12px 0;
        padding: 6px 14px;
    }
    .ContactInfo li {
        padding: 12px 4px;
    }
    .ContactInfo li + li {
        border-left: 0;
        border-top: 1px solid var(--Line);
    }
    .ContactStepsHead p {
        font-size: var(--FontSize);
    }
    .ContactSteps {
        gap: 12px;
        margin-top: 28px;
    }
    .ContactStep {
        padding: 24px 14px;
    }
}
@media (max-width: 560px) {
    .ContactForm.custom-form,
    .ContactSteps {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* ==========================================================================
   Blog post (single.php) — the Boxo USA layout: one 1280px column, title, full-width photo, article, FAQs
   ========================================================================== */
.BlogPostSection.section,
.BlogFaqSection.section,
.TextPageSection.section {   /* text pages (page.php) use the post column and its .BlogPostContent typography */
    max-width: 1280px;
}
.BlogPostSection {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.BlogPostTitle {
    margin: 0;
    font-family: var(--FontUi);
    font-weight: 700;
    line-height: 1.25;
    color: var(--Text);
}
/* Photos (featured + in the text) show whole at their own shape, never cropped */
.BlogPostImage img,
.BlogPostContent img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}
.BlogPostContent > * {
    margin: 0 0 10px;
}
.BlogPostContent > :last-child {
    margin-bottom: 0;
}
.BlogPostContent :is(h2, h3, h4) {
    margin-top: 20px;
    font-family: var(--FontUi);
    line-height: 1.3;
    color: var(--Text);
}
.BlogPostContent h2 {
    font-size: clamp(26px, 2.2vw, 36px);
    font-weight: 700;
}
.BlogPostContent h3 {
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: 600;
}
.BlogPostContent p,
.BlogPostContent li {
    line-height: 1.65;
    color: var(--Grey);
}
.BlogPostContent :is(strong, b) {
    font-family: var(--FontUi);
    font-weight: 700;
    color: var(--Text);
}
.BlogPostContent a {
    color: var(--Primary);
}
.BlogPostContent a:hover {
    text-decoration: underline;
}
/* Lists as in the theme's content boxes (category / product): plain bullets and numbers, 22px in */
.BlogPostContent :is(ul, ol) {
    margin-left: 22px;
    padding: 0;
}
.BlogPostContent li {
    margin-bottom: 8px;
}
.BlogPostContent figure {
    margin-top: 10px;
    margin-bottom: 14px;
}
.BlogPostContent figcaption {
    margin-top: 10px;
    text-align: center;
    color: var(--Text);
}
.BlogPostContent blockquote {
    padding: 18px 22px;
    border-left: 4px solid var(--AccentBright);
    background: var(--Mint);
}
.BlogPostContent table {
    width: 100%;
    border-collapse: collapse;
}
.BlogPostContent :is(th, td) {
    padding: 10px 12px;
    border: 1px solid var(--Line);
    text-align: left;
}
.BlogFaqSection .FaqWrapper {
    margin-top: 28px;
}
@media (max-width: 767px) {
    .BlogPostSection {
        gap: 15px;
    }
    .BlogPostImage img,
    .BlogPostContent img {
        border-radius: var(--RadiusCard);
    }

}

/* ==========================================================================
   Blog page (page-blog.php, design packbox-blog-reference/): banner, featured newest post, card grid, samples box
   ========================================================================== */
/* Banner = the catalog banner: breadcrumb at the top, title + line centred below it */
.BlogBannerCopy {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.9vw, 36px);
}
.BlogBanner .CatalogTitle {
    margin: 0;
    font-family: var(--FontUi);
    font-weight: 300;
}
.BlogBanner .CatalogTitle strong {
    font-family: var(--FontHead);
    font-weight: 900;
}
.BlogBannerText {
    max-width: 760px;   /* 530 as drawn wrapped short lines — widened at the user's request */
    margin: 0;
    font-size: var(--FontLg);
    line-height: 1.2;
    text-align: center;
    color: var(--Secondary);
}
.BlogBtn {
    gap: 10px;
}
.BlogBtn svg {
    width: 16px;
    height: 16px;
}
/* Featured: the photo (blog photos are 1280 x 798, shown at that shape) + the green card, 743 : 975 as drawn */
.BlogFeatured {
    display: grid;
    grid-template-columns: minmax(0, 743fr) minmax(0, 975fr);
    align-items: center;
    gap: 20px;
}
.BlogFeaturedCopy {
    align-self: stretch;
}
.BlogFeaturedMedia,
.BlogCardMedia {
    aspect-ratio: 1280 / 798;
}
.BlogFeaturedMedia {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--RadiusCard);
    background: var(--Tint);
}
.BlogReadTime {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 7px 12px;
    border-radius: var(--Pill);
    background: var(--Secondary);
    font-size: 13px;
    line-height: 1;
    color: var(--Text);
}
.BlogFeaturedCopy {
    justify-content: center;
    gap: 16px;
    padding: 30px clamp(30px, 3vw, 56px);
    border-radius: var(--RadiusCard);
    background: var(--Primary);
}
.BlogFeaturedTag {
    padding: 6px 12px;
    border: 1px solid var(--AccentBright);
    border-radius: var(--Pill);
    font-size: var(--FontXs);
    line-height: 1;
    color: var(--AccentBright);
}
.BlogFeaturedTitle {
    margin: 0;
    font-family: var(--FontUi);
    font-size: clamp(26px, 2.1vw, 40px);
    font-weight: 500;
    line-height: 1.18;
    color: var(--Secondary);
}
.BlogFeaturedTitle a {
    color: inherit;
}
.BlogFeaturedTitle a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
.BlogFeaturedCopy p,
.BlogFeaturedCopy time {
    margin: 0;
    color: var(--OnDark);
}
.BlogFeaturedCopy p {
    font-size: var(--FontLead);
    line-height: 24px;
}
.BlogFeaturedCopy time {
    font-size: var(--FontSm);
}
/* Cards: grey box, photo, date pill, green title, three lines of text, lime button */
.BlogGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.BlogCard.SkeletonCard,
.BlogCardLink {
    border-radius: var(--RadiusMedia);
}
.BlogCardLink {
    height: 100%;
    gap: 16px;
    padding: 28px;
    background: var(--BG2);
}
.BlogCardMedia {
    display: block;
    overflow: hidden;
    border-radius: var(--RadiusCard);
    background: var(--Tint);
}
.BlogDate {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--Primary);
    border-radius: var(--Pill);
    font-size: var(--FontXs);
    color: var(--Text);
}
.BlogCardTitle {
    margin: 0;
    font-family: var(--FontUi);
    font-size: clamp(20px, 1.4vw, 26px);
    font-weight: 500;
    line-height: 1.12;
    color: var(--Primary);
}
.BlogCardText {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: var(--FontLead);
    line-height: 24px;
    color: var(--Grey);
}
.BlogCardLink .BlogBtn {
    margin-top: auto;
}
@media (max-width: 1280px) {
    .BlogGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 1024px) {
    .BlogFeatured {
        grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
    }
    .BlogFeaturedCopy {
        padding: 24px;
    }
    .BlogCardLink {
        padding: 20px;
    }
}
@media (max-width: 767px) {
    .BlogBannerText {
        font-size: var(--FontSm);   /* 20px was too big on phones (user) */
        line-height: 1.35;
    }
    .BlogFeatured {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .BlogFeaturedCopy {
        padding: 22px 18px 24px;
    }
    .BlogGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .BlogCardLink {
        gap: 14px;
        padding: 16px;
    }
    .BlogCardText {
        font-size: var(--FontSize);
    }
}

/* Blog archives (archive.php): the blog banner and card grid; the count line is the page's <h2> */
.BlogArchiveCount {
    margin-bottom: 24px;
}
.BlogArchiveEmpty {
    font-size: var(--FontLead);
}
.BlogArchiveEmpty a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   404 page (404.php): the category hero's cream outlined box, centred — big 404, title, buttons, product search
   ========================================================================== */
.NotFoundSection.section {
    padding-top: 20px;
}
.NotFoundBox {
    gap: 20px;
    padding: clamp(40px, 6vw, 90px) 20px;
    border: 1px solid var(--Dark);
    border-radius: var(--RadiusLg);
    background: var(--Cream);
}
.NotFoundCode {
    font-family: var(--FontHead);
    font-size: clamp(96px, 14vw, 200px);
    font-weight: 900;
    line-height: 0.9;
    color: var(--Primary);
}
.NotFoundText {
    max-width: 560px;
    font-size: var(--FontLead);
}
.NotFoundActions {
    gap: 12px;
}
.NotFoundSearchTitle {
    margin-top: 20px;
}
.NotFoundSearch {
    width: 100%;
    max-width: 520px;
    gap: 8px;
}
.NotFoundSearch input {
    flex: 1;
    min-width: 0;
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--Outline);
    border-radius: var(--RadiusBtn);
    background: var(--Secondary);
    font-size: var(--FontSize);
    color: var(--Text);
}
.NotFoundSearch input:focus {
    border-color: var(--Primary);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--Primary);   /* a 2px green ring in all */
}

/* ==========================================================================
   Get a quote page (page-get-a-quote.php, quote-forms/get-quote-form.php): green hero with two lime rings, the form
   card (four numbered steps) and the sticky aside rise over its foot. The help card is the product page's (.ProductFaqHelp).
   ========================================================================== */
.QuoteHero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--Primary);
}
.QuoteHero::before,
.QuoteHero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: solid var(--AccentGlow);
    border-radius: 50%;
}
.QuoteHero::before {
    top: -160px;
    right: -100px;
    width: 480px;
    height: 480px;
    border-width: 64px;
}
.QuoteHero::after {
    top: 70px;
    right: 30%;
    width: 220px;
    height: 220px;
    border-width: 30px;
}
.QuoteHeroInner.section {
    padding-top: 20px;
    padding-bottom: clamp(60px, 5.2vw, 100px);
}
.QuoteHeroCopy {
    gap: 18px;
    max-width: 960px;
    margin-top: clamp(36px, 3.4vw, 64px);
}
.QuoteTitle {
    font-size: clamp(38px, calc(14px + 3vw), 72px);
    line-height: 1.1;
    color: var(--Secondary);
}
.QuoteHeroCopy > p {
    max-width: 640px;
    font-size: var(--FontLg);
    line-height: 1.5;
    color: var(--OnDark);
}
.QuoteTrust {
    gap: 10px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}
.QuoteTrust li {
    gap: 8px;
    min-height: 38px;
    padding: 0 16px 0 12px;
    border: 1px solid var(--OnDarkLine);
    border-radius: var(--Pill);
    background: var(--OnDarkFill);
    font-size: var(--FontSm);
    color: var(--Secondary);
}
.QuoteTrust svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--AccentBright);
}
/* Form card + aside on a full-width sand band (the product hero's green + sand pairing): white form card, green timeline card */
.QuoteMainSection {
    background: var(--BG3);
}
.QuoteMainGrid.section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 400px);
    gap: clamp(24px, 2.2vw, 40px);
    align-items: start;
    padding-top: 100px;
    padding-bottom: 100px;
}
.QuoteFormCard,
.QuoteSteps {
    border-radius: var(--RadiusLg);
}
.QuoteFormCard {
    padding: clamp(22px, 2.1vw, 40px);
    background: var(--Secondary);
}
.QuoteFormHead {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}
.QuoteFormTitle {
    font-size: clamp(26px, calc(12px + 1.3vw), 38px);
}
.QuoteFormHead p {
    font-size: var(--FontSm);
}
/* Aside: "What happens next" timeline on green (background, white title and lime ring grouped with .ProductFaqHelp) */
.QuoteSteps {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(22px, 1.8vw, 32px);
}
.QuoteSteps ol {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.QuoteStep {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 14px;
    padding-bottom: 22px;
}
.QuoteStep:last-child {
    padding-bottom: 0;
}
.QuoteStep:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 42px;
    bottom: 6px;
    left: 17px;
    border-left: 2px dashed var(--OnDarkLine);
}
.QuoteStepNum {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--AccentBright);
    font-family: var(--FontHead);
    font-size: var(--FontSm);
    font-weight: 900;
    font-variant-numeric: lining-nums;
    color: var(--Primary);
}
.QuoteStep h3 {
    margin: 7px 0 4px;
    color: var(--AccentBright);
}
.QuoteStep p {
    font-size: var(--FontXs);
    line-height: 1.5;
    color: var(--OnDark);
}
@media (max-width: 1200px) {
    .QuoteMainGrid.section {
        grid-template-columns: minmax(0, 1fr) 290px;
    }
}
/* Stacked: the timeline goes under the form, its four steps side by side */
@media (max-width: 1024px) {
    .QuoteMainGrid.section {
        grid-template-columns: minmax(0, 1fr);
    }
    .QuoteSteps ol {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
    .QuoteStep {
        padding-bottom: 0;
    }
    .QuoteStep:not(:last-child)::before {
        display: none;
    }
}
@media (max-width: 767px) {
    .QuoteHero::before {
        top: -120px;
        right: -150px;
        width: 300px;
        height: 300px;
        border-width: 44px;
    }
    .QuoteHero::after {
        display: none;
    }
    .QuoteHeroInner.section {
        padding-bottom: 40px;
    }
    .QuoteHeroCopy {
        gap: 14px;
        margin-top: 28px;
    }
    .QuoteHeroCopy > p {
        font-size: var(--FontSize);
    }
    .QuoteTrust {
        gap: 8px;
    }
    .QuoteTrust li {
        min-height: 32px;
        padding: 0 12px 0 10px;
        font-size: var(--FontXs);
    }
    .QuoteMainGrid.section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .QuoteFormCard {
        padding: 22px 16px;
    }
    /* Phones (product form rules): name alone, then pairs; L / W / H stay three across */
    .QuoteForm .Span2:has(select, [name="form_fields[quantity]"]) {
        grid-column: span 3;
    }
    .QuoteForm .Span2:has(input[type="file"]) {
        grid-column: 1 / -1;
    }
    .QuoteSteps ol {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Entrance animations (home.js, combined.js SCRIPT 8) — they also play for what is on screen at load or after a reload.
   html.RevealInit is set by an inline line in <head> (functions.php), so the targets are hidden from the first paint and
   nothing blinks; a script adds .Revealed when each is in view (.Revealing while it moves). Keep this list in step with
   TARGETS in home.js. transform/opacity only, so nothing here can shift layout. */
.RevealInit :is(.UspItem, .TrendHead, .TrendCard, .FeaturedHead, .FeaturedSection .splide__track, .OptionsHead, .OptionsTabs, .WhyCopy > *, .WhyMedia, .BenefitsMedia, .BenefitsCell, .IndustryHead, .IndustrySection .splide__track, .StepsMedia, .StepsCell, .HomeFaqIntro > *, .HomeFaqSection .FaqItem, .HomeQuoteHead, .HomeQuote .custom-form-container,
    .CatGridHead, .CatContentBox, .CatSplitSection .CatSplitBox, .CatFaqIntro > :not(.FaqWrapper), .CatFaqSection .FaqItem, .CatQuote,
    .ProductContentBox, .ProductRecHead, .ProductRecSection .splide__track, .ProductFaqIntro > *, .ProductFaqHelp, .ProductFaqSection .FaqItem,
    .ContactStep):not(.Revealed) {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
}
.Revealing {
    transition: opacity 0.7s ease, transform 0.7s var(--Ease);
    transition-delay: var(--RevealDelay, 0ms);
}
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
    
}

@media (prefers-reduced-motion: reduce) {
    .theme-news-ticker,
    .SkeletonCard::after {
        animation: none;
    }
    * {
        transition: none !important;
    }
}