/*
Theme Name: [Theme Name]
Theme URI: 
Author: [Author]
Author URI: 
Description: WordPress Full Site Editing block theme
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: [theme-slug]
Tags: 

---

PROTOTYPE FRAMEWORK NOTES
--------------------------
This file is the WordPress-compatible structural stylesheet. It is
copied directly into the final block theme, so it must stay brand-
agnostic: it references CSS custom properties that are generated by
WordPress (theme.json) in production and defined in tokens.css for
standalone prototype use.

Load order for the prototype (every page):
  1. tokens.css            — variable definitions + reset + layout helpers
  2. brand.css             — colour + font overrides (the swap point)
  3. style.css             — this file (never edited per brand)
  4. chrome/chrome.css     — header + footer template-part styles
  5. patterns/patterns.css — pattern component styles

To rebrand, change only brand.css — nothing here changes.
When the brand is confirmed, update theme.json with the chosen values.
*/

/* 
 * Global styles
 * 
 */
.wp-site-blocks {
    position: relative;
}

/*
 * Typography styles
 * 
 */

h1,
.is-style-heading-h1,
.is-style-heading-h1 a {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: clamp(3rem, 6vw, var(--wp--preset--font-size--h-1));
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 0.9;
}

h1 span,
.is-style-heading-h1 span,
.is-style-heading-h1 a span {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: clamp(3rem, 6vw, var(--wp--preset--font-size--h-1));
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 0.95;
    font-style: italic;
}

h2,
.is-style-heading-h2 {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: clamp(2.5rem, 4vw, var(--wp--preset--font-size--h-2));
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 0.95;
}

h3,
.is-style-heading-h3 {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: clamp(1.5rem, 3vw, var(--wp--preset--font-size--h-3));
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

h4,
.is-style-heading-h4 {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: clamp(1.25rem, 2vw, var(--wp--preset--font-size--h-4));
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.1;
}

.is-style-heading-h5 {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: var(--wp--preset--font-size--h-5);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.1;
}

.is-style-heading-h6 {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: var(--wp--preset--font-size--h-5);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.15;
}

.is-style-home-hero-display {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: clamp(3rem, 6vw, var(--wp--preset--font-size--h-1));
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 0.95;
}

.is-style-button-text,
.is-style-button-text a,
.is-style-button-text button {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.1;
}

.is-style-caption,
.is-style-caption a {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: var(--wp--preset--font-size--caption);
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-transform: uppercase;
}

.is-style-caption-large,
.is-style-caption-large a {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: var(--wp--preset--font-size--text-regular);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: uppercase;
}

.is-style-text-large {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: var(--wp--preset--font-size--text-regular);
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.1;
}

.is-style-text-regular {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: var(--wp--preset--font-size--text-regular);
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.3;
}

.is-style-text-small {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
}

/* Links hover */
.wp-block-navigation-item .wp-block-navigation-item__content {
    transition: all ease 0.3s;
}

.wp-block-navigation-item .wp-block-navigation-item__content:hover {
    /* cornflower = accent for links needing attention; lemon is
       illegible on the white header bar */
    color: var(--wp--preset--color--cornflower);
}

/* 
 *  Spacing presets
 */
@media (max-width: 900px) {
    :root {
        --wp--preset--spacing--lg: 2.5rem;
        --wp--preset--spacing--xl: 2.5rem;
        --wp--preset--spacing--xxl: 4rem;
    }

    .no-sticky-mobile {
        position: static;
    }
}

/* 
 *  Heading widths
 */
.heading-narrow,
.heading-narrow div {
    max-width: 12ch;
}

.heading-medium,
.heading-medium div {
    max-width: 20ch;
}

.heading-wide,
.heading-wide div {
    max-width: 25ch;
}

.heading-extra-wide,
.heading-extra-wide div {
    max-width: 30ch;
}

/* 
 *  Copy widths
 */
.copy-narrow {
    max-width: 25ch;
}

.copy-medium {
    max-width: 35ch;
}

.copy-wide {
    max-width: 45ch;
}

.copy-extra-wide {
    max-width: 55ch;
}

/* 
 *  Button styles 
 */

/* === Base shape & typography (all button variants) === */
.wc-block-components-button,
.wp-block-button .wp-block-button__link {
    /* inline-block matches core .wp-block-button__link — an inline anchor's
       vertical padding would not contribute to container height */
    display: inline-block;
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: var(--wp--preset--font-size--small);
    /* 14px */
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.1;
    text-transform: uppercase;
    padding: 1rem;
    /* 16px */
    border-radius: 8px;
    border: 1px solid transparent;
}

/* === Filled variants === */

/* Primary – Lemon bg, Soft Black text */
.wc-block-components-button,
.wc-block-components-button.is-primary,
.wp-block-button.is-primary .wp-block-button__link {
    color: var(--wp--preset--color--soft-black);
    background: var(--wp--preset--color--lemon);
    border-color: var(--wp--preset--color--lemon);
}

/* Secondary – Forest bg, White text */
.wc-block-components-button.is-secondary,
.wp-block-button.is-secondary .wp-block-button__link {
    color: var(--wp--preset--color--white);
    background: var(--wp--preset--color--forest);
    border-color: var(--wp--preset--color--forest);
}

/* White Filled – White bg, Soft Black text */
.wc-block-components-button.is-white,
.wp-block-button.is-white .wp-block-button__link {
    color: var(--wp--preset--color--soft-black);
    background: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--white);
}

/* Simple Text – no bg, small caption text (utility variant) */
.wc-block-components-button.is-simple-text,
.wp-block-button.is-simple-text .wp-block-button__link {
    color: var(--wp--preset--color--soft-black);
    background: transparent none;
    border-color: transparent;
    padding: 5px;
    font-size: var(--wp--preset--font-size--caption);
    text-transform: none;
    border-radius: 0;
}

/* === Outline variants === */

/* Outline Primary – Lemon border + text, transparent bg.
   Lemon is only legible on dark backgrounds — use is-secondary
   outline (soft black) on light sections. */
.wc-block-components-button.is-primary.is-style-outline,
.wp-block-button.is-primary.is-style-outline .wp-block-button__link {
    color: var(--wp--preset--color--lemon);
    background: transparent none;
    border-color: var(--wp--preset--color--lemon);
}

/* White Outline – white border + text, transparent bg (dark sections) */
.wc-block-components-button.is-white.is-style-outline,
.wp-block-button.is-white.is-style-outline .wp-block-button__link {
    color: var(--wp--preset--color--white);
    background: transparent none;
    border-color: var(--wp--preset--color--white);
}

/* Outline Secondary – Soft Black border + text, transparent bg */
.wc-block-components-button.is-secondary.is-style-outline,
.wp-block-button.is-secondary.is-style-outline .wp-block-button__link {
    color: var(--wp--preset--color--soft-black);
    background: transparent none;
    border-color: var(--wp--preset--color--soft-black);
}

/* Simple Text Outline – white text, no bg */
.wc-block-components-button.is-simple-text.is-style-outline,
.wp-block-button.is-simple-text.is-style-outline .wp-block-button__link {
    color: var(--wp--preset--color--white);
    background: transparent none;
    border-color: transparent;
    font-size: var(--wp--preset--font-size--caption);
    text-transform: none;
    border-radius: 0;
}

/* Icon button styles */
.wp-block-button.icon-button .wp-element-button {
    padding-left: 40px !important;
    background-size: 20px 20px;
    background-position: 10px 50%;
    background-repeat: no-repeat;
}

/* Search button */
.wp-block-button.icon-button.icon-search .wp-element-button {
    background-image: url('./assets/images/search-icon.svg');
}

/* Map button */
.wp-block-button.icon-button.icon-map .wp-element-button {
    background-image: url('./assets/images/map-icon.svg');
}

/* Call button */
.wp-block-button.icon-button.icon-call .wp-element-button {
    background-image: url('./assets/images/call-icon.svg');
}

/* play button */
.wp-block-button.icon-button.icon-play .wp-element-button {
    background-image: url('./assets/images/play-icon.svg');
}

/* Bullet button */
.wp-block-button.icon-button.icon-bullet .wp-element-button {
    background-image: url('./assets/images/bullet-white-icon.svg');
    padding-left: 30px !important;
    background-position: 13px 50%;
    background-size: 4px 4px;
}

/* Bullet button - Secondary variant */
.wp-block-button.icon-button.icon-bullet.is-secondary .wp-element-button {
    background-image: url('./assets/images/bullet-black-icon.svg');
}

/* Arrow button */
.wp-block-button.icon-button.icon-arrow .wp-element-button {
    background-image: url('./assets/images/arrow-icon.svg');
    padding-right: 30px !important;
    padding-left: 4px !important;
    background-size: 12px 12px;
    background-position: calc(100% - 10px) 50%;
}

/* Hover styles */
.wc-block-components-button,
.wp-block-button .wp-block-button__link {
    transition: all ease 0.2s;
}

/* Primary hover */
.wc-block-components-button:hover,
.wc-block-components-button:active,
.wc-block-components-button.is-primary:hover,
.wc-block-components-button.is-primary:active,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:active,
.wp-block-button.is-primary .wp-block-button__link:hover,
.wp-block-button.is-primary .wp-block-button__link:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Secondary hover */
.wc-block-components-button.is-secondary:hover,
.wc-block-components-button.is-secondary:active,
.wp-block-button.is-secondary .wp-block-button__link:hover,
.wp-block-button.is-secondary .wp-block-button__link:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* White Filled hover */
.wc-block-components-button.is-white:hover,
.wc-block-components-button.is-white:active,
.wp-block-button.is-white .wp-block-button__link:hover,
.wp-block-button.is-white .wp-block-button__link:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Simple Text hover */
.wc-block-components-button.is-simple-text:hover,
.wc-block-components-button.is-simple-text:active,
.wp-block-button.is-simple-text .wp-block-button__link:hover,
.wp-block-button.is-simple-text .wp-block-button__link:active {
    box-shadow: none;
    text-decoration: underline;
}

/* Outline hover – keep background transparent */
.wc-block-components-button.is-simple-text.is-style-outline:hover,
.wc-block-components-button.is-simple-text.is-style-outline:active,
.wc-block-components-button.is-secondary.is-style-outline:hover,
.wc-block-components-button.is-secondary.is-style-outline:active,
.wc-block-components-button.is-primary.is-style-outline:hover,
.wc-block-components-button.is-primary.is-style-outline:active,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:active,
.wp-block-button.is-primary.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-primary.is-style-outline .wp-block-button__link:active,
.wp-block-button.is-secondary.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-secondary.is-style-outline .wp-block-button__link:active {
    background-color: transparent;
}

/* Outline Primary hover – subtle fill */
.wc-block-components-button.is-primary.is-style-outline:hover,
.wc-block-components-button.is-primary.is-style-outline:active,
.wp-block-button.is-primary.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-primary.is-style-outline .wp-block-button__link:active {
    background-color: hsla(65, 90%, 58%, 0.12);
}

/* Outline Secondary hover – subtle fill */
.wc-block-components-button.is-secondary.is-style-outline:hover,
.wc-block-components-button.is-secondary.is-style-outline:active,
.wp-block-button.is-secondary.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-secondary.is-style-outline .wp-block-button__link:active {
    background-color: hsla(0, 0%, 0%, 0.06);
}

/* White Filled outline hover (on dark bg contexts) */
.wc-block-components-button.is-white.is-style-outline:hover,
.wc-block-components-button.is-white.is-style-outline:active,
.wp-block-button.is-white.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-white.is-style-outline .wp-block-button__link:active {
    background-color: hsla(0, 0%, 100%, 0.1);
    border-color: hsla(0, 0%, 100%, 0.5);
}

/* 
 *  Sections
 */
section {
    padding-top: var(--wp--preset--spacing--xxl);
    padding-bottom: var(--wp--preset--spacing--xxl);
}

.container-narrow {
    padding-left: 20rem;
    padding-right: 20rem;
}

.container-regular {
    padding-left: 9rem;
    padding-right: 9rem;
}

.container-large {
    padding-left: 4rem;
    padding-right: 4rem;
}

.content-offset {
    padding-left: 7rem;
    padding-right: 7rem;
}

/* 
 *  Container Responsive Media Queries
 */

/* Small Desktop */
@media (max-width: 1260px) {
    .container-narrow {
        padding-left: 8rem;
        padding-right: 8rem;
    }

    .container-regular {
        padding-left: 4.5rem;
        padding-right: 4.5rem;
    }

    .content-offset {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .container-narrow {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .container-regular {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .container-large {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .content-offset {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Mobile (up to 600px) */
@media (max-width: 768px) {

    .container-narrow,
    .container-regular,
    .container-large,
    .content-offset {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* 
 *  Row Styles - 12 Column Grid System
 */

.row-item {
    width: 100%;
}

/* 12 Column Grid - Percent Based Widths
   Widths are set as flex-basis (like wp-block-column) so items shrink
   proportionally to absorb the row gap instead of overflowing/wrapping. */
.row-item-1-2,
.row-item-1-3,
.row-item-2-3,
.row-item-1-4,
.row-item-3-4,
.row-item-1-6,
.row-item-5-6 {
    flex-grow: 0;
    min-width: 0;
}

.row-item-1-2 {
    flex-basis: 50%;
}

/* 6/12 */
.row-item-1-3 {
    flex-basis: 33.333333%;
}

/* 4/12 */
.row-item-2-3 {
    flex-basis: 66.666667%;
}

/* 8/12 */
.row-item-1-4 {
    flex-basis: 25%;
}

/* 3/12 */
.row-item-3-4 {
    flex-basis: 75%;
}

/* 9/12 */
.row-item-1-6 {
    flex-basis: 16.666667%;
}

/* 2/12 */
.row-item-5-6 {
    flex-basis: 83.333333%;
}

/* 10/12 */

@media (max-width: 900px) {
    .row-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .row-item-1-2,
    .row-item-1-3,
    .row-item-2-3,
    .row-item-1-4,
    .row-item-3-4,
    .row-item-1-6,
    .row-item-5-6 {
        flex-basis: auto;
        width: 100%;
    }
}

/* 
 *  CSS Grid layout breakpoints - for use with Group blocks
 */
@media (min-width: 2000px) {
    .footer-logo-large {
        aspect-ratio: unset;
        /* Remove fixed aspect ratio on large screens */
        height: auto;
        min-height: 500px;
    }
}

@media (max-width: 1440px) {

    .responsive-grid .is-layout-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {

    .responsive-grid .is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 425px) {

    .responsive-grid .is-layout-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/*
 *  Group block style variants
 *
 *  DIY Friday rule: only forest, slate, grey, black and white may be
 *  used as section BACKGROUNDS. Lemon/olive styles exist for small
 *  statement groups (chips, badges, pattern overlays) — never full
 *  sections. Cobalt/cornflower are attention accents only.
 */
.is-style-lemon {
    background-color: var(--wp--preset--color--lemon);
    color: var(--wp--preset--color--soft-black);
}

.is-style-olive {
    background-color: var(--wp--preset--color--olive);
    color: var(--wp--preset--color--soft-black);
}

.is-style-slate {
    background-color: var(--wp--preset--color--slate);
    color: var(--wp--preset--color--white);
}

.is-style-forest {
    background-color: var(--wp--preset--color--forest);
    color: var(--wp--preset--color--white);
}

.is-style-cobalt {
    background-color: var(--wp--preset--color--cobalt);
    color: var(--wp--preset--color--white);
}

.is-style-cornflower {
    background-color: var(--wp--preset--color--cornflower);
    color: var(--wp--preset--color--white);
}

.is-style-soft-black {
    background-color: var(--wp--preset--color--soft-black);
    color: var(--wp--preset--color--white);
}

/*
 *  Brand-device section styles (brand guide pp13–14)
 *
 *  Dark statement backgrounds built from the brand-device SVGs in
 *  assets/web/ — pattern overlays and gradients per the guide:
 *  "This icon becomes patterns and imagery used throughout the brand"
 *  and "Gradients are to be used as statement backgrounds sparingly".
 *  In WordPress each becomes a registered group block style; the
 *  SVGs copy into the theme's assets/ folder unchanged.
 */

/* Geometric brand-mark tile, tone-on-tone slate on forest —
   the guide's default patterned background (p13, "Background") */
.is-style-forest-tile {
    background-color: var(--wp--preset--color--forest);
    background-image: url('./assets/web/bg-forest-tile.svg');
    background-size: 420px auto;
    background-position: center;
    color: var(--wp--preset--color--white);
}

/* Rounded curve lines, tone-on-tone — calm structural backdrop
   for heroes (p12/p13 device tiles) */
.is-style-forest-lines {
    background-color: var(--wp--preset--color--forest);
    background-image: url('./assets/web/bg-forest-lines.svg');
    background-size: cover;
    background-position: center;
    color: var(--wp--preset--color--white);
}

/* Lemon curve lines on forest — loud statement version (p13,
   "pattern overlays"); use sparingly, short centred content only.
   Oversized + offset so the line crossing sits at the section edge,
   keeping the centre clear for text. */
.is-style-forest-lines-lemon {
    background-color: var(--wp--preset--color--forest);
    background-image: url('./assets/web/bg-forest-lines-lemon.svg');
    background-size: 180% auto;
    background-position: left 65%;
    color: var(--wp--preset--color--white);
}

/* Organic branching flow, tone-on-tone — "dynamic, calm movement"
   (p14 gradients page, flat vector version) */
.is-style-forest-flow {
    background-color: var(--wp--preset--color--forest);
    background-image: url('./assets/web/bg-forest-flow.svg');
    background-size: cover;
    background-position: center;
    color: var(--wp--preset--color--white);
}

/* Repeated diyfriday wordmark, slate on forest (p13 colour-usage
   tile) — brand moments: footer, banners, packaging-style panels */
.is-style-forest-wordmark {
    background-color: var(--wp--preset--color--forest);
    background-image: url('./assets/web/bg-wordmark-repeat.svg');
    background-size: cover;
    background-position: center;
    color: var(--wp--preset--color--white);
}

/* Brand gradient — statement background, use sparingly (p14) */
.is-style-gradient-forest {
    background-image: var(--wp--preset--gradient--forest-to-olive);
    color: var(--wp--preset--color--white);
}

/* Dark backgrounds: display headings take Lemon ("Lemon and Olive are
   to be used as titles, headings, buttons and pattern overlays"),
   structural headings stay white. */
:is(.is-style-forest, .is-style-slate, .is-style-soft-black,
    .is-style-forest-tile, .is-style-forest-lines, .is-style-forest-lines-lemon,
    .is-style-forest-flow, .is-style-forest-wordmark, .is-style-gradient-forest) h1,
:is(.is-style-forest, .is-style-slate, .is-style-soft-black,
    .is-style-forest-tile, .is-style-forest-lines, .is-style-forest-lines-lemon,
    .is-style-forest-flow, .is-style-forest-wordmark, .is-style-gradient-forest) h2 {
    color: var(--wp--preset--color--lemon);
}

:is(.is-style-forest, .is-style-slate, .is-style-soft-black,
    .is-style-forest-tile, .is-style-forest-lines, .is-style-forest-lines-lemon,
    .is-style-forest-flow, .is-style-forest-wordmark, .is-style-gradient-forest) :is(h3, h4, h5, h6) {
    color: var(--wp--preset--color--white);
}

/* Lemon display headings clash with the lemon line work — stay white there */
.is-style-forest-lines-lemon h1,
.is-style-forest-lines-lemon h2,
.is-style-gradient-forest h1,
.is-style-gradient-forest h2 {
    color: var(--wp--preset--color--white);
}

.is-style-white {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--soft-black);
}

.is-style-soft-grey {
    background-color: var(--wp--preset--color--soft-grey);
    color: var(--wp--preset--color--soft-black);
}

/* Brand "Grey" (#dcddde) — approved light section background */
.is-style-grey {
    background-color: var(--wp--preset--color--pale-grey);
    color: var(--wp--preset--color--soft-black);
}

/* 
 *  Base form styles
 */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="file"],
textarea {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 400;
    color: var(--wp--preset--color--soft-black);
    background: transparent none;
    letter-spacing: -0.01em;
    line-height: 1.1;
    padding: 0.5rem;
    height: 3rem;
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid var(--wp--preset--color--soft-black);
    border-radius: 0px;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="file"]:focus,
textarea:focus {
    outline: none;
    border-width: 2px;
    border-color: var(--wp--preset--color--cobalt);
    color: var(--wp--preset--color--cobalt);
}

/* File input styles */
/* Method 1: Modern browsers with ::file-selector-button */
input[type="file"]::file-selector-button {
    display: none;
}

/* WebKit browsers (Safari, older Chrome) */
input[type="file"]::-webkit-file-upload-button {
    background: var(--wp--preset--color--cobalt);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0px;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    transition: all 0.3s ease;
    margin-right: 1rem;
}

/* Submit buttons — match the primary button style */
.fwp-submit,
input[type=submit],
.wp-block-search__button {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 400;
    color: var(--wp--preset--color--soft-black);
    letter-spacing: 0.1em;
    line-height: 1.1;
    text-transform: uppercase;
    padding: 1rem;
    box-sizing: border-box;
    border: 1px solid var(--wp--preset--color--lemon);
    border-radius: 8px;
    background-color: var(--wp--preset--color--lemon);
    cursor: pointer;
    transition: all ease 0.2s;
}

.fwp-submit:hover,
input[type=submit]:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Formidable form styles */
.contact-form .frm_fields_container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.contact-form .frm_half {
    flex: 1 1 calc(50% - 0.75rem);
    min-width: 250px;
}

.contact-form .frm_full,
.contact-form .frm12 {
    flex: 1 1 100%;
}

.contact-form .frm_screen_reader {
    display: none;
}

.contact-form .frm_fields_container .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-form .frm_primary_label,
.contact-form .frm_description {
    color: var(--wp--preset--color--soft-black);
    font-family: var(--wp--preset--font-family--stack-sans-headline);
}

.contact-form .frm_primary_label {
    font-size: var(--wp--preset--font-size--caption);
    margin-bottom: 0.5rem;
}

.contact-form .frm_description {
    font-size: var(--wp--preset--font-size--small);
}

.contact-form .with_frm_style input {
    border-radius: 0;
}

.contact-form .with_frm_style .wp-block-button.is-secondary button[type="submit"],
.contact-form .frm_button_submit {
    color: var(--wp--preset--color--soft-black);
    background: var(--wp--preset--color--lemon);
    border: 1px solid var(--wp--preset--color--lemon);
    border-radius: 0;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}

.contact-form .frm_button_submit:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Gravity form styles */
.gform_title {
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: clamp(1.5rem, 2vw, var(--wp--preset--font-size--h-3));
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 1.5rem 0;
}

.gfield {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gform_fields {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gform-field-label {
    padding: 0 0 0.5rem 0;
    display: block;
}

.gfield_description {
    padding-bottom: 0.5rem;
}

.ginput_container {
    display: flex;
    gap: 1rem;
}

.gform-grid-col {
    flex: 1;
}

.ginput_container_textarea {
    flex-direction: column;
}

.gf_clear {
    display: none;
}

.gform_required_legend {
    display: none;
}

.gfield_required_asterisk {
    color: var(--wp--preset--color--cobalt);
}

.gform_footer {
    margin-top: 1.5rem;
}

/* 
 *  Contact form 7 styles
 */

.wpcf7-form .fields-wrap .wpcf7-form-control-wrap {
    margin-bottom: .25rem;
    display: block;
}

/* 
 *  Custom block classes
 */
.block-center {
    margin-left: auto;
    margin-right: auto;
}

/* Footer logo */
.footer-logo-large {
    height: auto;
    aspect-ratio: 1240 / 253;
}

.footer-logo-large img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Bullet heading */
.bullet-heading {
    position: relative;
    padding-left: 20px;
}

.bullet-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: var(--wp--preset--color--soft-black);
    border-radius: 50%;
}

.bullet-heading.is-lime::before {
    background-color: var(--wp--preset--color--lemon);
}


/* ============================================================
   Product Archive — Carousel
   ============================================================ */

/* Carousel track wrapper — added as a custom class on a Group block */
.js-carousel {
    display: flex;
    overflow: hidden;
}

.js-carousel__slide {
    flex: 0 0 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Two-up variant: 4 individual slides, shows 2 at a time, advances 1 at a time */
.js-carousel--two-up .js-carousel__slide {
    flex: 0 0 50%;
}

/* Feature cards inside the carousel */
.carousel-feature-card {
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 483px;
    display: flex;
    flex-direction: column;
}

.carousel-feature-card__image {
    height: 290px;
    overflow: hidden;
    flex-shrink: 0;
}

.carousel-feature-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-feature-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xs, 1rem);
    padding: var(--wp--preset--spacing--ms, 1.5rem) var(--wp--preset--spacing--ms, 1.5rem);
}

/* Product badge — used in hero carousel and product cards.
   Lemon chip with dark text, like the brand guide's "Step 2" pill. */
.product-badge {
    display: inline-flex;
    background-color: var(--wp--preset--color--lemon);
    color: var(--wp--preset--color--soft-black);
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
    padding: 3px var(--wp--preset--spacing--xxxs, 0.5rem);
    border-radius: 4px;
}

/* ============================================================
   Product Archive — Product Card
   ============================================================ */

.product-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(18, 39, 29, 0.12);
    background: var(--wp--preset--color--white);
    display: flex;
    flex-direction: column;
}

.product-card__image-wrapper {
    position: relative;
    overflow: hidden;
    background-color: var(--wp--preset--color--soft-grey);
    flex-shrink: 0;
}

/* WooCommerce product-image block inside a card */
.product-card .wc-block-woocommerce-product-image,
.product-card .wp-block-woocommerce-product-image {
    position: relative;
    margin: 0;
}

.product-card .wc-block-woocommerce-product-image img,
.product-card .wp-block-woocommerce-product-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Sale badge: position over image top-left, styled like product-badge */
.product-card .wc-block-components-product-sale-badge,
.product-card .product-card__badge {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--wp--preset--color--lemon);
    color: var(--wp--preset--color--soft-black);
    font-family: var(--wp--preset--font-family--stack-sans-headline);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
    padding: 3px var(--wp--preset--spacing--xxxs, 0.5rem);
    border-radius: 4px;
    z-index: 1;
}

.product-card__content {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--ms, 1.5rem);
    background: var(--wp--preset--color--white);
}

.product-card__text-stack {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xxs, 0.75rem);
}

.product-card__cta-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ============================================================
   Site Header
   ============================================================ */
header {
    position: absolute;
    width: 100%;
    padding-top: 1rem;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header__bar {
    box-shadow: 0 10px 13px 0 rgba(0, 0, 0, 0.03);
}

/* Strip default button padding so the block button controls its own spacing */
.site-header__cart-btn .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .site-header__bar .wp-block-navigation {
        display: none;
    }
}

/* Design system patterns */
.ds-swatch {
    flex: 1 1 200px;
}

.ds-swatch-white {
    border: 1px solid var(--wp--preset--color--pale-grey);
}

.ds-spec {
    white-space: nowrap;
}

.ds-row-divider {
    border-bottom: 1px solid var(--wp--preset--color--pale-grey);
}

.ds-bar {
    min-height: 8px;
    flex-shrink: 0;
}

.ds-bar-xxxs {
    width: 8px;
}

.ds-bar-xxs {
    width: 12px;
}

.ds-bar-xs {
    width: 16px;
}

.ds-bar-ms {
    width: 24px;
}

.ds-bar-md {
    width: 32px;
}

.ds-bar-ml {
    width: 40px;
}

.ds-bar-lg {
    width: 48px;
}

.ds-bar-xl {
    width: 80px;
}

.ds-bar-xxl {
    width: 120px;
}

.ds-col-token {
    min-width: 60px;
}

.ds-col-var {
    min-width: 220px;
}

.ds-col-val {
    min-width: 100px;
}