/*

Base Stylesheet

    * Version: 1.0
    * Powered by House Of Scribes
    * https://houseofscribes.co.nz

    File Structure
     ↳ header.php
      ↳ index.php
     ↳ footer.php

    Builder Structure
     ↳ wp-block-group
      ↳ wp-block-columns
       ↳ wp-block-column

    Breakpoints
    * Desktop: 1200px
    * Tablet: 992px
    * Mobile: 768px

    Contents
    * 01. Base
    * 02. Global
    * 03. Layout
    * 04. Utilities
    * 05. Typography
    * 06. Buttons
    * 07. Header
    * 08. Footer
    * 09. Components
    * 10. Forms
    * 11. Blocks
    * 12. Elements
    * 13. Accessibility

*/




/* 01. Base */
/* -------------------------------------------- */

/*Test*/

/* Root */
:root {

    /* Variables */
    --header-height: 98.33px;
    --button-height: 50.33px;

    /* Widths */
    --max-width: unset;
    --fixed-width: 888px;

    /* Spacing */
    --spacer: 7px;
    --padding: 18px;
    --margin: 36px;
    --gutter: 24px;
    --gap: 72px;
    --row: 216px;

    /* Colour */
    --primary: #0f2126;
    --secondary: #004052;
    --tertiary: #C1903F;

    --background: #000809;
    --text: #EBE3E0;

    --overlay: 72%;
    --gradient: linear-gradient(180deg, rgb(15, 33, 38, 1) 70%, rgb(0, 64, 82, 0) 70%);
    --box-shadow: 0 0 20px 0px rgba(235, 227, 224, 0.05);

    /* Design */
    --border-width: 1px;
    --border-style: solid;
    --border-opacity: 15%;
    --border-radius: 0px;

    /* Transitions */
    --trans: 800ms ease;
    --hover: 300ms ease;
    --menu: right 1.1s cubic-bezier(0.86, 0, 0.07, 1), transform 1.1s cubic-bezier(0.86, 0, 0.07, 1), opacity 1.1s cubic-bezier(0.86, 0, 0.07, 1);

    /* Typography */
    --heading: "Inter", sans-serif;
    --body: "Inter", sans-serif;

    --bold: 800;
    --regular: 400;
    --thin: 100;

    --letter-spacing-wide: 0.15em;
    --letter-spacing-regular: 0;
    --letter-spacing-close: -0.06em;
    --line-height-heading: 1.1;
    --line-height-body: 1.3;

    /* Golden Ratio */
    /* --h1: 17.942rem;
    --h2: 11.089rem;
    --h3: 6.854rem;
    --h4: 4.236rem;
    --h5: 2.618rem;
    --h6: 1.618rem;
    --p: 1rem; */

    /* Perfect Fifth */
    /* --h1: 11.391rem;
    --h2: 7.594rem;
    --h3: 5.063rem;
    --h4: 3.375rem;
    --h5: 2.25rem;
    --h6: 1.5rem;
    --p: 1rem; */

    /* Augmented Fourth */
    /* --h1: 7.993rem;
    --h2: 5.653rem;
    --h3: 3.998rem;
    --h4: 2.827rem;
    --h5: 1.414rem;
    --h6: 1.333rem;
    --p: 1rem; */

    /* Perfect Fourth */
    --h1: 5.61rem;
    --h2: 4.209rem;
    --h3: 3.157rem;
    --h4: 2.369rem;
    --h5: 1rem;
    --h6: 1.125rem;
    --p: 1rem;

    /* Major Third */
    /* --h1: 3.815rem;
    --h2: 3.052rem;
    --h3: 2.441rem;
    --h4: 1.953rem;
    --h5: 1rem;
    --h6: 1.25rem;
    --p: 1rem; */

    /* Minor Third */
    /* --h1: 2.986rem;
    --h2: 2.488rem;
    --h3: 2.074rem;
    --h4: 1.728rem;
    --h5: 1.44rem;
    --h6: 1.2rem;
    --p: 1rem; */

    /* Major Second */
    /* --h1: 2.027rem;
    --h2: 1.802rem;
    --h3: 1.602rem;
    --h4: 1.424rem;
    --h5: 1.266rem;
    --h6: 1.125rem;
    --p: 1rem; */

    /* Small print — form messages, terms and privacy text, payment method descriptions, ratings, … (independent of the scale above) */
    --small: 0.8rem;

    /* Arrows — every arrow on the site is one of these: the font's own line arrows, so they always match the text around them (size, weight, colour). Use them as content: var(--arrow-right); don't add a new arrow any other way. */
    --arrow-right: "\2192";
    --arrow-left: "\2190";
    --arrow-down: "\2193";
    --arrow-up: "\2191";

    /* Icon line — drawn icons (the close X, the quantity − / +) use lines as thick as the font's own arrows at the same size and weight, so drawn and typed icons match. Inter's arrow stroke, measured: (weight × 0.000144 + 0.0244) × text size — 1.32px at 400, 1.77px at 600, for 16px. Inside a button it follows --button-weight (06. Buttons). A site with another body font can set its own. */
    --icon-stroke: calc(var(--p) * (var(--regular) * 0.000144 + 0.0244));


    /* Buttons */
    --button-weight: var(--regular); /* every button's label — the theme's and WooCommerce's own .button — so a site changes it in one place */
    --button-padding-vertical: 12px;
    --button-padding-horizontal: 18px;
    --button-border-width: 1px;
    --button-border-style: solid;
    --button-border-radius: 100px;
    --button-border-opacity: 100%;
}

@media screen and (max-width: 768px) {

    :root {

        /* Variables */
        --header-height: 76px;
        --button-height: 52px;

        /* Spacing */
        --spacer: 7px;
        --padding: 18px;
        --margin: 24px;
        --gutter: 12px;
        --gap: 24px;
        --row: 144px;

        /* Typography */

        /* Major Third */
        --h1: 3.815rem;
        --h2: 2.752rem;
        --h3: 2.441rem;
        --h4: 1.953rem;
        --h5: 1rem;
        --h6: 1rem;
        --p: 1rem;

    }

}




/* 02. Global */
/* -------------------------------------------- */

/* Universal */
* {
    font-family: inherit;
    font-style: inherit;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* HTML */
html {
    font-size: 117%;
}

/* Body */
body {
    margin: 0;
    color: var(--text);
    background-color: var(--background);
}

body.locked {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;

    overflow: hidden;

    padding-right: var(--scrollbar-width, 0px); /* Compensates for Scrollbar width */
}




/* 03. Layout */
/* -------------------------------------------- */

/* Groups */
.wp-block-group {
    display: flex;
    flex-direction: column;
    gap: var(--margin);

    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 768px) {
    .wp-block-group {
        gap: var(--gap);
    }
}

.wp-block-group:not(header .wp-block-group) {
    margin-bottom: var(--row);
}

/* Columns */
.wp-block-columns {
    width: 100%;
    margin: auto;

    flex-direction: row;
    gap: var(--gap);
}

:not(.is-full-width) > .wp-block-columns {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Spacing inside columns */
.wp-block-column:not(:where(header.header .wp-block-column)) > * + * {
    margin-top: var(--margin);
}

.wp-block-column:not(:where(header.header .wp-block-column))
    > :where(
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        ul,
        ol,
        hr,
        nav,
        blockquote,
        .wp-block-heading,
        .wp-block-paragraph,
        .wp-block-list,
        .wp-block-quote
    )
    + :where(
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        ul,
        ol,
        hr,
        nav,
        blockquote,
        .wp-block-heading,
        .wp-block-paragraph,
        .wp-block-list,
        .wp-block-quote
    ) {
    margin-top: var(--spacer);
}

.wp-block-column:not(:where(header.header .wp-block-column)) > .wp-block-buttons:not(:first-child) {
    margin-top: var(--margin);
}

.wp-block-column:not(:where(header.header .wp-block-column))
    > :is(h5, h5.wp-block-heading)
    + * {
    margin-top: 2px;
}

/* Spacing between stacked mobile columns */
@media screen and (max-width: 768px) {
    .wp-block-columns:not(:where(header.header .wp-block-columns)) {
        flex-direction: column;
        gap: var(--gap);
    }

    .wp-block-columns:not(:where(header.header .wp-block-columns)).is-reversed {
        flex-direction: column-reverse;
    }

    /* Stacked columns always fill the width: vertical alignment only applies side by side (an embed has no width of its own, so a top-aligned column would collapse to nothing) */
    .wp-block-columns:not(:where(header.header .wp-block-columns)) > .wp-block-column {
        align-self: stretch;
    }

    .wp-block-columns:not(:where(header.header .wp-block-columns)):has(
        > .wp-block-column > :first-child:where(
            p,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            ul,
            ol,
            blockquote,
            .wp-block-heading,
            .wp-block-paragraph,
            .wp-block-list,
            .wp-block-quote
        )
    ):not(:has(
        > .wp-block-column > :first-child:not(:where(
            p,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            ul,
            ol,
            blockquote,
            .wp-block-heading,
            .wp-block-paragraph,
            .wp-block-list,
            .wp-block-quote
        ))
    )) {
        gap: var(--spacer);
    }
}

/* Inner */
.wp-block-column .wp-block-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;

    /* height: 100%; */ /* Added 2026/06/18 to make <a> and .cards inside columns fill, otherwise they leave a little bit at the bottom, but does this break swipers? */
    height: auto; /* Added 2026/07/26 as height: 100% makes layouts in columns that are flex all the same height */
}

/* Stacked columns — nested columns always stack; .is-vertical stacks a top-level set too */
.wp-block-column .wp-block-columns,
.wp-block-columns.is-vertical {
    flex-direction: column;
    gap: var(--margin);
}

/* Layout */
.wp-block-column {
    min-width: 0; /* Allows flex columns to shrink properly, so wide content inside one column does not force sibling columns to resize unevenly. */
}

.wp-block-column:not(.swiper-slide):not(header.header .wp-block-column) {
    flex: 1 1 50%;
}

.wp-block-column:first-child:not(:last-child):not(.swiper-slide):not(header.header .wp-block-column) { /* use last-child and first-child because last-of-type and first-of-type break when .cards are used with <a> tags */
    flex: 0 0 25%;
}

footer.footer .wp-block-column,
footer.footer .wp-block-column .wp-block-columns .wp-block-column:not(.swiper-slide) {
    flex: unset !important;
}

@media (max-width: 768px) {
    .wp-block-column:empty { /* If a .wp-block-column is empty, make it display: none; on Mobile */
        display: none;
    }
}

/* Inner */
.wp-block-column .wp-block-columns .wp-block-column:not(.swiper-slide) {
    flex: 1 !important; /* Overrides all other styles */
}




/* 04. Utilities */
/* -------------------------------------------- */

/* Width */
.is-max-width > div { /* Dont change from div - check group has a column inside it */
    max-width: var(--max-width);
}

.is-fixed-width > div {
    max-width: var(--fixed-width);
    margin-left: auto;
    margin-right: auto;
}

.is-full-width > div {
    max-width: unset;
    padding-left: 0;
    padding-right: 0;
}

/* Display */
.is-layout-flow {
    display: block;
}

.is-layout-flex {
    display: flex;
}

.is-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--margin);
    align-items: stretch;
}

/* Wrap */
.is-wrap {
    flex-wrap: wrap;
}

.is-nowrap {
    flex-wrap: nowrap;
}

/* Align */
.are-vertically-aligned-top {
    align-items: flex-start;
}

.are-vertically-aligned-center {
    align-items: center;
}

.are-vertically-aligned-bottom {
    align-items: flex-end;
}

/* Justify */
.alignleft {
    display: flex;
    justify-content: flex-start;
}

.aligncenter {
    display: flex;
    justify-content: center;
}

.alignright {
    display: flex;
    justify-content: flex-end;
}

/* Text */
.has-text-align-left {
    text-align: left;
}
.has-text-align-center {
    text-align: center;
}
.has-text-align-right {
    text-align: right;
}

/* Buttons */
.wp-block-buttons:has(.has-text-align-left) {
    justify-content: flex-start;
}
.wp-block-buttons:has(.has-text-align-center) {
    justify-content: center;
}
.wp-block-buttons:has(.has-text-align-right) {
    justify-content: flex-end;
}

/* Background */
.has-background {
    background-color: var(--background) !important;

    border-radius: var(--border-radius);
}

.has-background:not(header.header .wp-block-group) {
    position: relative;
}

.has-background:not(header.header .wp-block-group, footer.footer .wp-block-group) > *:first-child {
    padding-top: calc(var(--row) / 2);
}

.has-background:not(header.header .wp-block-group, footer.footer .wp-block-group) > *:last-child {
    padding-bottom: calc(var(--row) / 2);
}

/* Overlay */
.has-background[style*="background-image"]::after  {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;

    background-color: color-mix(in srgb, var(--background) var(--overlay), transparent);

    border-radius: var(--border-radius);
}

.has-background:not(header.header .wp-block-group) > * {
    position: relative;
    z-index: 2;
}

/* Inverted */
.has-background.is-inverted {
    background-color: var(--text) !important;
}
.has-background.is-inverted::after  {
    background-color: color-mix(in srgb, var(--text) var(--overlay), transparent) !important;
}

/* Visibility */
@media screen and (max-width: 768px) {
    .is-visible-desktop {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .is-visible-mobile {
        display: none;
    }
}

/* Stretched Link */
/* For a card with a link and a separate button/interactive element: put this
   class on the card's real link (e.g. the title link), and give any element
   that needs to stay independently clickable `position: relative`. The card
   itself needs `position: relative` (e.g. .card already has this) so inset:0
   below has the right positioning context. */
.stretched-link::after {
    content: '';
    position: absolute;
    inset: 0;
}




/* 05. Typography */
/* -------------------------------------------- */

/* Base */
body,
input,
textarea,
select {
  appearance: none;
  text-rendering: optimizeLegibility;

  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-variant-position: normal;
  font-variant-emoji: normal;

  font-weight: var(--regular);
  font-stretch: normal;
  font-size: var(--p);
  font-family: var(--body);

  font-optical-sizing: auto;
  font-size-adjust: none;
  font-kerning: auto;
  font-feature-settings: normal;
  font-variation-settings: normal;

  letter-spacing: var(--letter-spacing-regular);
  line-height: var(--line-height-body);

  color: var(--text);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

    font-family: var(--heading);
    font-weight: var(--regular);
    font-style: normal;

    letter-spacing: var(--letter-spacing-close);
    line-height: var(--line-height-heading);

    text-wrap: balance;

    color: var(--text);

    word-break: break-word; /* Added 2025/05/03 – Without this, headings with grids can easily overflow */

    color: var(--text);
}

h1 {
    font-size: var(--h1);
    text-transform: capitalize;
}

h2 {
    font-size: var(--h2);
    text-transform: capitalize;
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

h6 {
    font-size: var(--h6);
    font-family: var(--body);
    letter-spacing: var(--letter-spacing-regular);
    line-height: 1.2;
}

.has-background h1,
.has-background h2,
.has-background h3,
.has-background h4,
.has-background h5,
.has-background h6 {
    color: var(--text);
}

.is-inverted h1,
.is-inverted h2,
.is-inverted h3,
.is-inverted h4,
.is-inverted h5,
.is-inverted h6 {
    color: var(--background);
}

/* Body */
p,
ul,
li,
ol,
i {
    margin: 0;

    font-family: var(--body);
    font-size: var(--p);
    font-weight: var(--regular);
    font-style: normal;

    letter-spacing: var(--letter-spacing-regular);
    line-height: var(--line-height-body);

    color: inherit;

    transition: color var(--trans);
}

.has-background p,
.has-background ul,
.has-background li,
.has-background ol {
    color: var(--text);
}

.is-inverted p,
.is-inverted ul,
.is-inverted li,
.is-inverted ol {
    color: var(--background);
}

/* Strong */
strong {
    font-weight: bolder;
}

/* Italics */
em {
    font-style: italic;
}

/* Small print */
small {
    font-size: var(--small);
}

/* Lists */
ul,
ol {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    list-style: none; /* No bullets by default (menus, WooCommerce's order overview, payment methods, …) — only real content lists get them back: see .wp-block-list in 11. Blocks */
    unicode-bidi: isolate;
}

/* Links */
a {
    margin: 0;

    color: inherit;
    text-decoration: none; /* Dont remove. I've tried by it ruins stuff. */

    transition: opacity var(--hover);
}

main p a {
    text-decoration: underline;
}

a:not(.wp-element-button):not(li.wp-element-button a):not(.card):not(.stretched-link):not(.button):not(.is-close):not(.remove):hover { /* .button: WooCommerce's native buttons (e.g. cart's Proceed to checkout) — they get the button hover fill, not this fade. .card/.stretched-link: a card, or the link stretched over one, has the card's own hover. .is-close/.remove: the close icon (09. Components) has its own hover */
    opacity: 0.5;
}




/* 06. Buttons */
/* -------------------------------------------- */

/* Base */
button {
    color: inherit;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: buttonface;
    margin: 0;
    padding-block: 0;
    padding-inline: 0;
    border-width: 0;
    border-style: outset;
    border-color: buttonborder;
    border-image: initial;
}

/* Default */
.wp-element-button,
.wp-element-button:visited,
header .wp-element-button,
header .wp-element-button:visited,
.woocommerce-page .button, /* WooCommerce's own native button markup, left as its own default template output rather than rebuilt as wp-element-button — currently just the cart's Proceed to Checkout button (WooCommerce's own bundled cart/proceed-to-checkout-button.php, not overridden), but scoped broadly since My Account is currently un-overridden, and checkout's login form (WooCommerce's own global/form-login.php, inside checkout/form-login.php's column) renders one too. `.woocommerce-page` (WooCommerce's own body class, added on every WC page type — see wc_body_class()) is used rather than the `.woocommerce` wrapper div, since not every WC page template fires the hooks that print that div. */
.woocommerce-page .button:visited {
    display: inline-block;
    position: relative; /* For Spinner */
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);

    font-size: var(--p);
    font-weight: var(--button-weight);
    line-height: var(--line-height-body);
    text-transform: capitalize;
    text-decoration: none;
    text-shadow: none;
    text-align: center;

    border: var(--button-border-width) var(--button-border-style) color-mix(in srgb, var(--text) var(--button-border-opacity), transparent);
    border-radius: var(--button-border-radius);
    transition: var(--hover);

    -webkit-appearance: none; /* Fixes Safari on iPhone adding border radius */

    width: auto;
    min-width: min-content;

    align-self: start; /* Needed otherwise width: auto gets overridden later on by width: 100% on input later on in form section */

    word-break: keep-all;
    /* white-space: nowrap; */ /* This caused issue on mobile */

    min-height: var(--button-height); /* For circle icon buttons */
    min-width: var(--button-height); /* For circle icon buttons */

    color: var(--text);
    background-color: transparent;
}

/* Hover / active — and a button that's loading (its spinner is showing) keeps these colours until it's done, whether or not the pointer is still on it. The header variants are needed: the default rule above includes header .wp-element-button:visited, which is more specific than .wp-element-button:hover — so a *visited* button inside any <header> (heroes are <header class="hero">) kept its idle text colour on hover, light text on the light hover fill. */
form:is(.submitting, .processing) .wp-element-button.is-submitter,
.wp-element-button.loading,
.wp-element-button.active,
.wp-element-button:hover,
.wp-element-button:active,
.wp-element-button:focus,
header .wp-element-button.active,
header .wp-element-button:hover,
header .wp-element-button:active,
header .wp-element-button:focus,
.woocommerce-page .button.active,
.woocommerce-page .button:hover,
.woocommerce-page .button:active,
.woocommerce-page .button:focus {
    color: var(--background);
    background-color: var(--text);
    border-color: var(--text);

    cursor: pointer;

    box-shadow: var(--box-shadow);
}

/* Buttons in a coloured section (.has-background, and .is-inverted below): transparent at rest — an outline, with the label, in the opposite colour to the section — and filled with the outline's colour on hover. A dark section: light outline, light fill on hover. An inverted (light) section — including the header once it turns into a bar on scroll — dark outline, dark fill on hover. */
.has-background .wp-element-button,
.has-background .wp-element-button:visited {
    color: var(--text);
    background-color: transparent;
    border-color: var(--text);
}

.has-background form:is(.submitting, .processing) .wp-element-button.is-submitter,
.has-background .wp-element-button.loading,
.has-background .wp-element-button.active,
.has-background .wp-element-button:hover,
.has-background .wp-element-button:active,
.has-background .wp-element-button:focus {
    color: var(--background);
    background-color: var(--text);
    border-color: var(--text);
}

.is-inverted .wp-element-button,
.is-inverted .wp-element-button:visited {
    color: var(--background);
    background-color: transparent;
    border-color: var(--background);
}

.is-inverted form:is(.submitting, .processing) .wp-element-button.is-submitter,
.is-inverted .wp-element-button.loading,
.is-inverted .wp-element-button.active,
.is-inverted .wp-element-button:hover,
.is-inverted .wp-element-button:active,
.is-inverted .wp-element-button:focus {
    color: var(--text);
    background-color: var(--background);
    border-color: var(--background);
}


/* Icon buttons — a button whose whole label is one icon (an arrow token, or a
   drawn icon like .is-close): a perfect --button-height square, the icon at its
   centre, so every icon button (lightbox, quantity, downloads) is the same size.
   Give the button screen-reader text saying what it does. */
.wp-element-button.is-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--button-height);
    height: var(--button-height);
    padding: 0;
}

/* A drawn icon in a button (and the accordion's toggle) is as thick as a button's own arrows (its label's weight), so every icon on a control matches */
.wp-element-button,
.wp-block-accordion-heading__toggle {
    --icon-stroke: calc(var(--p) * (var(--button-weight) * 0.000144 + 0.0244));
}

/* Icons */
.wp-block-buttons .wp-block-button .wp-block-button__link.wp-element-button i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);

    line-height: var(--button-height);
}

/* An icon in a button changes colour with the button's label (no slower transition of its own — base.css gives <i> one, for text) */
.wp-element-button i {
    transition: none;
}



/* Scrollbar When +3 Buttons Are In A Block */
@property --button-scroll-left-fade {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --button-scroll-right-fade {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.wp-block-buttons:has(> .wp-block-button:nth-of-type(3)) {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;


  white-space: nowrap;

  padding-bottom: var(--padding);

  scrollbar-width: none;

  --scroll-fade: var(--gutter);
  --button-scroll-left-fade: 0;
  --button-scroll-right-fade: 0;

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, var(--button-scroll-left-fade)) 0,
    var(--background) var(--scroll-fade),
    var(--background) calc(100% - var(--scroll-fade)),
    rgba(0, 0, 0, var(--button-scroll-right-fade)) 100%
  );

  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, var(--button-scroll-left-fade)) 0,
    var(--background) var(--scroll-fade),
    var(--background) calc(100% - var(--scroll-fade)),
    rgba(0, 0, 0, var(--button-scroll-right-fade)) 100%
  );

  transition:
    --button-scroll-left-fade var(--hover),
    --button-scroll-right-fade var(--hover);
}

.wp-block-buttons:has(> .wp-block-button:nth-of-type(3))::-webkit-scrollbar {
  display: none;
}

.wp-block-buttons:has(> .wp-block-button:nth-of-type(3)).scroll-fade-left {
  --button-scroll-left-fade: 0;
}

.wp-block-buttons:has(> .wp-block-button:nth-of-type(3)):not(.scroll-fade-left) {
  --button-scroll-left-fade: 1;
}

.wp-block-buttons:has(> .wp-block-button:nth-of-type(3)).scroll-fade-right {
  --button-scroll-right-fade: 0;
}

.wp-block-buttons:has(> .wp-block-button:nth-of-type(3)):not(.scroll-fade-right) {
  --button-scroll-right-fade: 1;
}

.wp-block-buttons-scrollbar {
  position: relative;
  width: 100%;
  height: 1px;
  margin-top: calc(var(--padding) * -0.5);
  background: color-mix(in srgb, var(--text) 50%, transparent);
  overflow: hidden;
}

.wp-block-buttons-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: var(--thumb-width, 33%);
  transform: translate3d(var(--thumb-left, 0px), 0, 0);
  background: var(--text);
  border-radius: 999px;
  transition: none;
  will-change: transform;
}




/* 07. Header */
/* -------------------------------------------- */

/* Header */
header.header {
    position: fixed;
    width: 100vw;
    top: 0;
    z-index: 99999;

    transition: top 500ms ease;
}

header.header .wp-block-group {
    background-color: transparent;
    transition: background-color var(--trans);

    border-radius: var(--border-radius);
}

header.header .wp-block-group .wp-block-columns {
    padding: var(--gutter) var(--gutter) 0 var(--gutter);

    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    transition: padding var(--trans);
}

/* Is Hidden */
header.header:has(.wp-block-group.is-hidden) {
    top: calc((var(--header-height) + var(--gutter)) * -1);
}

/* Put this near your header styles */
header.header.hold-transitions,
header.header.hold-transitions * {
    transition: none !important;
}

/* Background */
header.header .wp-block-group.has-background .wp-block-columns {
    padding-top: calc(var(--gutter) / 2);
    padding-bottom: calc(var(--gutter) / 2);
}

/* Navigation */
header.header .wp-block-group.navigation .wp-block-columns .wp-block-column {
    flex: 1;

    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--padding);
}

header.header .wp-block-group.navigation .wp-block-columns .wp-block-column:first-child {
    justify-content: flex-start;
}

header.header .wp-block-group.navigation .wp-block-columns .wp-block-column:last-child {
    justify-content: flex-end;
}

@media screen and (max-width: 768px) {
    header.header .wp-block-group.navigation .wp-block-columns .wp-block-column {
        flex: unset;
    }
}

/* Logo */
header.header .wp-block-group.navigation .wp-block-site-logo a svg {
    width: 180px;
    max-width: 100%;
    border-radius: 0;
}

header.header .wp-block-group.navigation .wp-block-site-logo a svg path {
    fill: var(--text);
}

header.header .wp-block-group.navigation.has-background .wp-block-site-logo a svg path,
header.header .wp-block-group.navigation.is-inverted .wp-block-site-logo a svg path {
    fill: var(--background);
}



/* Menu */
header.header .wp-block-group.navigation nav ul {
    display: flex;
    flex-direction: row;
    gap: var(--padding);
}

/* Toggle */
header.header .wp-block-group.navigation .wp-block-buttons:last-of-type .wp-block-button {
    width: var(--button-height);
    height: var(--button-height);
    position: relative;
}

header.header .wp-block-group.navigation .wp-block-button .toggle {
    width: 100%;
    height: 100%;

    padding: 8px;

    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    gap: 7px;

    color: var(--text);
    background-color: transparent;
    border-color: var(--text);

    position: absolute;
    z-index: 9999;
}

header.header .wp-block-group.navigation .wp-block-button .toggle .line {
    display: block;
    width: 100%;
    height: 1px;

    background-color: var(--text);

    transform-origin: center center;
    transition: all var(--hover);
}

header.header .wp-block-group.navigation .wp-block-button .toggle:hover,
header.header .wp-block-group.navigation .wp-block-button .toggle:active {
    background-color: var(--text);
    border-color: var(--text);
}

header.header .wp-block-group.navigation .wp-block-button .toggle:hover .line,
header.header .wp-block-group.navigation .wp-block-button .toggle:active .line {
    background-color: var(--background);
}

header.header .wp-block-group.navigation .wp-block-button .toggle.active .line:nth-child(1) {
  transform: rotate(-45deg) translate(-3px, 3px);
}

header.header .wp-block-group.navigation .wp-block-button .toggle.active .line:nth-child(2) {
  transform: rotate(45deg) translate(-2px, -3px);
}

/* Toggle - Is Inverted */
header.header .wp-block-group.navigation.is-inverted .wp-block-button .toggle {
    color: var(--background);
    border-color: var(--background);
}

header.header .wp-block-group.navigation.is-inverted .wp-block-button .toggle .line {
    background-color: var(--background);
}

header.header .wp-block-group.navigation.is-inverted .wp-block-button .toggle:hover,
header.header .wp-block-group.navigation.is-inverted .wp-block-button .toggle:active {
    background-color: var(--background);
    border-color: var(--background);
}

header.header .wp-block-group.navigation.is-inverted .wp-block-button .toggle:hover .line,
header.header .wp-block-group.navigation.is-inverted .wp-block-button .toggle:active .line {
    background-color: var(--text);
}

/* Flyout */
header.header .wp-block-group.flyout {
    position: fixed;
    top: 0;
    right: 0;
    width: 40vw;
    height: 100vh;
    height: 100svh;

    transition: var(--menu);

    z-index: 888;

    overflow-y: scroll;
    overscroll-behavior-y: none;

    pointer-events: none;
    transform: translateX(100%);
}

header.header .wp-block-group.is-inverted.flyout {
    background-color: var(--text);
}

header.header .wp-block-group.flyout.active {
    pointer-events: auto;
    transform: translateX(0);
}

header.header .wp-block-group.flyout .wp-block-columns {
    height: 100%;
    min-height: fit-content;

    flex-direction: column;
    align-items: flex-start;

    padding: var(--gutter);
    margin: 0;
    /* gap: unset; 2025/05/30 – Removed because we need gap for vertical spacing when the VH is small */
}

@media screen and (max-width: 992px) {
    header.header .wp-block-group.flyout {
        width: 60vw;
    }
}

@media screen and (max-width: 768px) {
    header.header .wp-block-group.flyout {
        width: 100vw;
    }
}

/* Flyout Toggle */
header.header:has(.wp-block-group.flyout.active) .wp-block-group.navigation .wp-block-button .toggle {
    color: var(--text);
    border-color: var(--text);
}

header.header:has(.wp-block-group.flyout.active) .wp-block-group.navigation .toggle .line {
    background-color: var(--text);
}

header.header:has(.wp-block-group.flyout.active) .wp-block-group.navigation .toggle:hover,
header.header:has(.wp-block-group.flyout.active) .wp-block-group.navigation .toggle:active {
    background-color: var(--text);
    border-color: var(--text);
}

header.header:has(.wp-block-group.flyout.active) .wp-block-group.navigation .toggle:hover .line,
header.header:has(.wp-block-group.flyout.active) .wp-block-group.navigation .toggle:active .line {
    background-color: var(--background);
}

/* Flyout Toggle - Is Inverted */
header.header:has(.wp-block-group.flyout.is-inverted.active) .wp-block-group.navigation .wp-block-button .toggle {
    color: var(--background);
    border-color: var(--background);
}

header.header:has(.wp-block-group.flyout.is-inverted.active) .wp-block-group.navigation .toggle .line {
    background-color: var(--background);
}

header.header:has(.wp-block-group.flyout.is-inverted.active) .wp-block-group.navigation .toggle:hover,
header.header:has(.wp-block-group.flyout.is-inverted.active) .wp-block-group.navigation .toggle:active {
    background-color: var(--background);
    border-color: var(--background);
}

header.header:has(.wp-block-group.flyout.is-inverted.active) .wp-block-group.navigation .toggle:hover .line,
header.header:has(.wp-block-group.flyout.is-inverted.active) .wp-block-group.navigation .toggle:active .line {
    background-color: var(--text);
}

/* Spacer */
header.header .wp-block-group.flyout .wp-block-columns .wp-block-column:first-of-type {
    width: 100%;
    height: var(--button-height);
    padding-right: calc(var(--button-height) + var(--padding));
}

/* Menus */
header.header .wp-block-group.flyout ul li a {
    color: var(--text);
}

header.header .wp-block-group.is-inverted.flyout ul li a {
    color: var(--background);
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li a {
    font-family: var(--heading);
    font-size: var(--h2);
    font-weight: var(--regular);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-close);
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column:first-of-type ul li a,
header.header .wp-block-group.flyout .wp-block-columns .wp-block-column:last-of-type ul li a {
    font-family: var(--body);
    font-size: var(--h6);
    letter-spacing: var(--letter-spacing-regular);
}

/* Sub Menus */
header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li.menu-item-has-children > a::after {
    content: "+";
    display: inline-block;
    padding-left: calc(var(--spacer) / 2);
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li.menu-item-has-children.submenu-open > a::after {
    content: "–";
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li ul.sub-menu {
    height: 0;
    overflow: hidden;
    transition: height var(--trans);
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li ul.sub-menu.open {
    height: auto;
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li ul.sub-menu li a {
    font-size: var(--body);
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li ul.sub-menu li:first-of-type {
    margin-top: var(--spacer);
}

header.header .wp-block-group.flyout .wp-block-columns .wp-block-column ul li ul.sub-menu li:last-of-type {
    margin-bottom: var(--spacer);
}

/* Overlay */
header.header .overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;

    background-color: var(--background);
    opacity: 0;

    cursor: pointer;
    pointer-events: none;

    z-index: 777;
    transition: var(--menu);
}

header.header .overlay.is-inverted {
    background-color: var(--text);
}

header.header .overlay.visible {
    opacity: 0.72;
    pointer-events: all;
}




/* 08. Footer */
/* -------------------------------------------- */

/* Layout */
footer.footer .wp-block-group {
    margin-bottom: 0;

    padding: var(--gutter);

    border-radius: var(--border-radius);
}

footer.footer .wp-block-group .wp-block-columns {
    justify-content: space-between;
    padding: 0;
}

@media screen and (max-width: 768px) {
    footer.footer .wp-block-group {
        gap: calc(var(--row) / 2);
   }
    footer.footer .wp-block-group .wp-block-columns {
        gap: calc(var(--row) / 2) !important; /* !imprortant needed to override site wide columns layout stlying */
        align-items: center;
        text-align: center;
    }
}


/* Logo */
footer.footer .wp-block-group .wp-block-site-logo a svg {
    width: 240px;
    max-width: 100%;
    border-radius: 0;
}

footer.footer .wp-block-group .wp-block-site-logo a svg path {
    fill: var(--text);
}

footer.footer .wp-block-group.is-inverted .wp-block-site-logo a svg path {
    fill: var(--background);
}

/* Bottom */
footer.footer .wp-block-group .wp-block-columns:last-of-type ul {
    display: flex;
    flex-direction: row;
    gap: var(--padding);
}

@media screen and (max-width: 768px) {
    footer.footer .wp-block-group .wp-block-columns:last-of-type ul {
        flex-direction: column;
        gap: 0;
    }
}




/* 09. Components */
/* -------------------------------------------- */

/* Arrow links — a link that's an action ("View cart", "Click here to login", …): not a button, and not a link inside body text. Underlined like every text link, with --arrow-right after it (inline-block, so the underline doesn't run under the arrow). Give any new one .is-arrow-link; WooCommerce's own are listed here too, since its markup can't take the class. */
.is-arrow-link,
.added_to_cart,
.showlogin,
.shipping-calculator-button {
    text-decoration: underline;
}

.is-arrow-link::after,
.added_to_cart::after,
.showlogin::after,
.shipping-calculator-button::after {
    content: var(--arrow-right);
    display: inline-block;
    margin-left: calc(var(--spacer) / 2);
}

/* Close icon — a drawn X (two lines, --icon-stroke thick, crossed at the exact centre; a font's × sits low in its own box, so it never looks centred). The element's text (e.g. "×") stays for no-CSS and is hidden with font-size: 0 — give it an aria-label. Lines draw in currentColor, so it takes whatever colour it sits in. Give any new one .is-close; WooCommerce's notice close and the cart's remove link are listed here too. */
.is-close,
.woocommerce-notice-close,
.product-remove .remove {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 0;

    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.6;

    font-size: 0;
    vertical-align: middle;
    cursor: pointer;
}

.is-close:hover,
.woocommerce-notice-close:hover,
.product-remove .remove:hover {
    opacity: 1;
}

.is-close::before,
.is-close::after,
.woocommerce-notice-close::before,
.woocommerce-notice-close::after,
.product-remove .remove::before,
.product-remove .remove::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: var(--icon-stroke);
    background-color: currentColor;
}

.is-close::before,
.woocommerce-notice-close::before,
.product-remove .remove::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.is-close::after,
.woocommerce-notice-close::after,
.product-remove .remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Plus / minus icons — drawn like the close icon: --icon-stroke lines, the close icon's length (60% of its 20px box), at the exact centre (a font's + and − sit low in their box, like its ×). Every + and − on the site: the accordion's + (rotating into the close X while open) and the quantity − / +. */
.wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion-heading__toggle-icon::after,
.quantity .quantity-step::before,
.quantity .quantity-step[data-quantity-step="1"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: var(--icon-stroke);
    background-color: currentColor;
    transform: translate(-50%, -50%);
}

.wp-block-accordion-heading__toggle-icon::after,
.quantity .quantity-step[data-quantity-step="1"]::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Tags & categories — every term link (WordPress marks them rel="tag": product tags/categories, post tags) as a chip */
a[rel~="tag"] {
    display: inline-block;
    padding: calc(var(--spacer) / 2) calc(var(--spacer) * 1.5);

    font-size: var(--small);
    line-height: var(--line-height-body);

    border: var(--button-border-width) var(--button-border-style) color-mix(in srgb, var(--text) var(--button-border-opacity), transparent);
    border-radius: var(--button-border-radius);
}

/* Figure */
figure {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    unicode-bidi: isolate;
}

figcaption {
    text-align: center;
}

main figure {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;

    /* aspect-ratio: 1920 / 1080; */
}

main header.hero .is-max-width figure {
    aspect-ratio: 1920 / 900;
}

/* Image */
img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
}

main img {
    height: 100%;
}

/* Separator */
hr {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: auto;
    margin-inline-end: auto;

    unicode-bidi: isolate;
    overflow: hidden;

    border: none;
    border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--text) var(--border-opacity), transparent);
}

.has-background .wp-block-column:not(.card) hr {
    border-color: var(--background);
}

/* Embed */
.embed {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;

    overflow: hidden;

    aspect-ratio: 16 / 9;
    padding-top: 56.25% !important;

    border-radius: var(--border-radius);
}
.embed iframe,
.embed object,
.embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    border: 0; /* the browser's default iframe border, which embed codes switch off with frameborder="0" */
    border-radius: var(--border-radius);
}

/* Fieldsets */
fieldset {
    display: none;
    min-inline-size: min-content;
    margin-inline: 0;
    border-width: 0;
    border-style: groove;
    border-color: threedface;
    border-image: initial;
    padding-block: 0;
    padding-inline: 0;
}

/* Tables */
table {
    display: table;
    box-sizing: border-box;
    border-collapse: collapse; /* No spacing around or between cells — it pushes the columns off the text edge around the table. A cell that needs room gets its own padding. */
    text-indent: initial;
    unicode-bidi: isolate;
    border-spacing: 0;
    width: 100%; /* Spans its column, like every other block */
    vertical-align: baseline;
}
thead {
    display: table-header-group;
    vertical-align: baseline;
    unicode-bidi: isolate;
    break-inside: if(media(overflow-block: paged): avoid;);
    border-color: inherit;
}
tbody {
    display: table-row-group;
    vertical-align: baseline;
    unicode-bidi: isolate;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
}
th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: -internal-left;
    unicode-bidi: isolate;

    text-align: left;
    font-family: var(--heading);
    font-size: var(--h4);
    font-weight: var(--regular);
    letter-spacing: var(--letter-spacing-close);
}
th,
td {
    padding: 0; /* Browsers add 1px by default */
}




/* 10. Forms */
/* -------------------------------------------- */

/* Form — also WooCommerce checkout's field groups: its fields sit inside these wrappers rather than directly in the form, so they need the same gap to space like every other form's fields */
form,
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.shipping-calculator-form {
    display: flex;
    flex-direction: column;
    gap: var(--padding);
    color: var(--text);
}

.has-background .wp-block-column:not(.card) form {
    color: var(--background);
}

/* Label */
label {
    display: flex;
    align-items: center;
    gap: var(--spacer);
}

/* Inputs */
input,
textarea,
select {
    display: inline-block;
    vertical-align: top; /* not the text baseline — a textarea on the baseline leaves a few px of empty space under its line */
    cursor: text;

    -webkit-rtl-ordering: logical;

    letter-spacing: -0.02rem;
    word-spacing: normal;
    line-height: normal;

    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;

    margin: 0;
    padding: 0;
    padding-block: 0;
    padding-inline: 0;
    padding-bottom: calc(var(--spacer) / 2);

    width: 100%; /* Every field spans its column — the same for every form (a CF7 field's size="40" no longer sets its width). Checkboxes/radios, the quantity stepper and selects (below) set their own widths. */

    color: var(--text);
    caret-color: var(--text);
    background-color: transparent;
    background-color: transparent;

    border-width: unset;
    border-style: unset;
    border-color: unset;
    border-image: unset;
    border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--text) var(--border-opacity), transparent);
    border-radius: 0;
}

.has-background .wp-block-column:not(.card) input,
.has-background .wp-block-column:not(.card) textarea,
.has-background .wp-block-column:not(.card) select {
    color: var(--background);
    caret-color: var(--background);

    border-color: var(--background);
}

/* Placeholder */
::placeholder {
  color: var(--text);
  opacity: 1; /* ensure it’s visible in Safari */
  background-color: none;
  background-color: transparent;
}

.has-background .wp-block-column:not(.card) ::placeholder {
    color: var(--background);
}

/* Autofill */
input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--background) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.has-background .wp-block-column:not(.card) input:-webkit-autofill,
.has-background .wp-block-column:not(.card) textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--background);
  caret-color: var(--background);
  box-shadow: 0 0 0 1000px var(--primary) inset;
}

/* Checkboxes & radios — one look for every choice on the site: a square with
   a border in the text colour, filled with an inset square when checked (the
   padding is the gap; background-clip keeps the fill inside it). Drawn in
   currentColor, so inverted sections follow. Also resets the text inputs'
   underline and bottom padding, which knocked them off-centre next to their
   label. */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;

  width: var(--p);
  height: var(--p);
  padding: 2px;

  border: var(--border-width) var(--border-style) currentColor;
  border-radius: 0;
  background-clip: content-box;

  cursor: pointer;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: currentColor;
}

/* Remove Safari’s "Clear" (X) Button */
input::-webkit-search-cancel-button {
    display: none;
}

/* Selects — look like every other field (Inputs, above: a line underneath), as wide as their options, with --arrow-down at the right. appearance: none (05. Typography) removes the browser's own arrow, and a <select> can't have an ::after of its own, so its wrapper draws it (contact forms and WooCommerce both wrap every select): the wrapper is a one-column grid and the arrow shares the select's cell, so it sits at the select's own right edge whatever else the wrapper holds. */
select {
    width: auto;
    max-width: 100%;
    padding-right: calc(var(--spacer) * 3);
    cursor: pointer;
}

:has(> select) {
    display: grid;
    grid-template-columns: minmax(0, max-content);
}

:has(> select) > select,
:has(> select)::after {
    grid-area: 1 / 1;
}

:has(> select)::after {
    content: var(--arrow-down);
    justify-self: end;
    align-self: center;
    pointer-events: none;
}

/* A select among a form's fields (WooCommerce's .form-row, contact forms) spans its column like them; one on its own (product options, shop sort) stays as wide as its options */
:is(.form-row, .wpcf7-form) :has(> select) {
    grid-template-columns: minmax(0, 1fr);
}

:is(.form-row, .wpcf7-form) select {
    width: 100%;
}

/* Remove Up/Down Arrows for Number Inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove Calendar Icon for Date Inputs */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* Responses — every form's validation / response message looks the same: contact forms', and WooCommerce's inline field errors and coupon error */
.wpcf7-not-valid-tip,
.wpcf7-response-output,
.checkout-inline-error-message,
.coupon-error-notice,
.coupon-success-notice {
    font-size: var(--small);
    color: var(--tertiary);
}

.wpcf7-not-valid-tip,
.wpcf7-response-output {
    display: none;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
    display: block;
}

/* Spinner — a submitting form's button (contact forms, single product Add to cart), and any button WooCommerce marks .loading while it works (the shop grid's AJAX Add to cart) */
button[type="submit"]::after,
.wp-element-button.loading::after {
    visibility: hidden;
    display: inline-block;
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    width: calc(var(--button-height) / 1.5);
    height: calc(var(--button-height) / 1.5);
    border-radius: 100%;

    /* A 2px ring, nothing in the middle — in currentColor, i.e. the button's own label colour, so it contrasts with whatever the button's background is (a loading button keeps its hover colours: see 06. Buttons) */
    background: conic-gradient(currentColor 0%, currentColor 15%, transparent 50%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));

    animation: spinner 1000ms linear infinite;
}

@keyframes spinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Submission — form.submitting (contact forms, single product Add to cart) or
   form.processing (WooCommerce's own class while it works: Place order, Pay
   for order, cart Update / Apply coupon). Only the button that submitted the
   form (.is-submitter, set by js/main.js) swaps its label for the spinner, so
   a form's other buttons keep theirs. The label must be in a <span>. */
form:is(.submitting, .processing) button.is-submitter span,
.wp-element-button.loading span {
    opacity: 0;
}

form:is(.submitting, .processing) button.is-submitter::after,
.wp-element-button.loading::after {
    visibility: visible;
}




/* 11. Blocks */
/* -------------------------------------------- */

/* Buttons */
.wp-block-buttons {
    gap: var(--spacer);
}

/* Lists — bullets/numbers only on lists written in the editor (posts, page content) */
.wp-block-list {
    list-style: revert;
    padding-inline-start: 18px;
}

/* Accordion */
.wp-block-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacer);
    padding: 0;
}

.wp-block-accordion-heading span {
    font-family: var(--body);
    font-size: var(--p);
    font-weight: var(--regular);
    font-style: normal;
    letter-spacing: var(--letter-spacing-regular);
    line-height: var(--line-height-body);
}

.wp-block-accordion-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: var(--border-width) var(--border-style) color-mix(in srgb, var(--text) var(--border-opacity), transparent);
    border-radius: var(--border-radius);
    transition: border-color var(--hover), box-shadow var(--hover);

    padding-bottom: var(--padding);
}

.wp-block-accordion-item:hover {
    border-color: var(--text);
    box-shadow: var(--box-shadow);
}

.wp-block-accordion button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--padding);
    padding-bottom: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: var(--p);
}

/* The + turns 45° into a close × while its item is open */
/* The + is the drawn plus icon (09. Components): font-size 0 hides the block's typed "+" */
.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 0;
    transition: transform var(--hover);
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    transform: rotate(45deg);
}

.wp-block-accordion-panel {
    overflow: hidden;
    max-height: 0;
    padding: 0 var(--padding);
    transition: max-height var(--hover);
}

.wp-block-accordion-item .wp-block-accordion-panel > *:first-child {
    padding-top: var(--spacer);
}

.is-inverted .wp-block-accordion-item {
    border-color: color-mix(in srgb, var(--background) var(--border-opacity), transparent);
}

/* Spacing inside accordion panels */
.wp-block-accordion-panel:not(:where(header.header .wp-block-accordion-panel)) > * + * {
    margin-top: var(--margin);
}

.wp-block-accordion-panel:not(:where(header.header .wp-block-accordion-panel))
    > :where(
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        ul,
        ol,
        blockquote,
        .wp-block-heading,
        .wp-block-paragraph,
        .wp-block-list,
        .wp-block-quote
    )
    + :where(
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        ul,
        ol,
        blockquote,
        .wp-block-heading,
        .wp-block-paragraph,
        .wp-block-list,
        .wp-block-quote,
        table /* a table under its heading or text, like more text (e.g. a product's Specifications) */
    ) {
    margin-top: var(--spacer);
}

.wp-block-accordion-panel:not(:where(header.header .wp-block-accordion-panel)) > .wp-block-buttons:not(:first-child) {
    margin-top: var(--margin);
}

.wp-block-accordion-panel:not(:where(header.header .wp-block-accordion-panel))
    > :is(h5, h5.wp-block-heading)
    + * {
    margin-top: 2px;
}




/* 12. Elements */
/* -------------------------------------------- */

/* Hero */
header.hero .wp-block-group {
    margin-bottom: var(--margin);
}

header.hero .wp-block-group:last-of-type {
    margin-bottom: calc(var(--row) / 2);
}

header.hero .wp-block-group:nth-of-type(1):last-of-type:not(.has-background),
header.hero .wp-block-group.is-fixed-width:last-of-type:not(.has-background) {
    margin-bottom: var(--margin);
}

header.hero .wp-block-group:first-child .wp-block-columns:first-of-type {
    padding-top: calc((var(--row) / 2) + var(--header-height));
}


header.hero .wp-block-group:first-of-type .wp-block-columns:last-of-type {
    padding-bottom: calc(var(--row) / 2);
}

header.hero .wp-block-group .wp-block-columns .wp-block-column {
    text-wrap: balance;
    text-align: center;
}

header.hero .wp-block-group .wp-block-columns .wp-block-column > div {
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .home header.hero .wp-block-group {
        min-height: calc(100vh - var(--gutter) - var(--gutter));
    }
}

/* 404 */
header.error-404 .wp-block-group {
    margin-bottom: 0;
}

/* Posts */
.wp-block-group.posts .wp-block-columns:last-child {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: var(--margin);
}

@media screen and (max-width: 768px) {
    .wp-block-group.posts .wp-block-columns:last-child {
        grid-template-columns: repeat(1, 1fr);
    }
}

.wp-block-group.posts .wp-block-columns:last-child a.wp-block-column { /* Using a tag to disutguinsh styles from "No content found" error which is just a div */
    background-color: var(--background);
    border: var(--border-width) var(--border-style) color-mix(in srgb, var(--text) var(--border-opacity), transparent);
    border-radius: var(--border-radius);
    scale: 1;
    box-shadow: none;
    transition: var(--trans);
    overflow: hidden;
}

.wp-block-group.posts .wp-block-columns:last-child a.wp-block-column:hover {
    opacity: 1;
    scale: 1.01;
    border-color: var(--text);
    box-shadow: var(--box-shadow);
}

.wp-block-group.posts .wp-block-columns:last-child a.wp-block-column .wp-block-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding-bottom: 56.25%;
    overflow: hidden;
    display: inline-block;
}

.wp-block-group.posts .wp-block-columns:last-child a.wp-block-column .wp-block-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    opacity: 1 !important;
}

.wp-block-group.posts .wp-block-columns:last-child a.wp-block-column > * {
    padding: 0 var(--padding);
}

.wp-block-group.posts .wp-block-columns:last-child a.wp-block-column > :is(.wp-block-image + *, :first-child:not(.wp-block-image)) {
    margin-top: 0 !important;
    padding-top: var(--padding);
}

.wp-block-group.posts .wp-block-columns:last-child a.wp-block-column > *:last-child {
    padding-bottom: var(--padding);
}

.wp-block-group.posts .wp-block-columns:last-child a.wp-block-column .wp-block-image {
    padding: 0;
}

/* Related */
.wp-block-group.related .wp-block-columns {
    justify-content: space-between;
    align-items: center;
}

.wp-block-group.related .wp-block-columns:last-child {
    grid-template-columns: repeat(2, 1fr);
}

.wp-block-group.related .wp-block-columns .wp-block-column {
    flex: unset !important;
    width: unset !important;
}

@media screen and (max-width: 768px) {
    .wp-block-group.related .wp-block-columns:last-child {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Cards */
.card {
    position: relative;

    padding: var(--padding);
    background-color: var(--background);
    border: var(--border-width) var(--border-style) color-mix(in srgb, var(--text) var(--border-opacity), transparent);
    border-radius: var(--border-radius);

    color: var(--text);

    box-shadow: none;
    transition: scale var(--hover), border-color var(--hover), box-shadow var(--hover);

    overflow: hidden;
}

.is-inverted .card {
    border-color: var(--text);
}

.card:hover {
    opacity: 1;
    scale: 1.01;
    box-shadow: var(--box-shadow);
    border-color: var(--text);
}

.is-inverted .card:hover {
    border-color: var(--background);
}


/* Featured */
.featured {
    overflow: hidden;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.featured .swiper {
    overflow: visible !important;
}

.featured .is-layout-flex:not(.swiper-wrapper) {
    align-items: center;
    justify-content: flex-end; /* space-between messes up pagniation buttons */
}

.featured figure {
    position: relative;
    aspect-ratio: 16 / 9;
    padding-top: calc(100% * 9 / 16);

    overflow: hidden;
}

.featured figure img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wp-block-group.featured .wp-block-columns:last-child a.wp-block-column > :is(.wp-block-image + *, :first-child:not(.wp-block-image)) {
    margin-top: var(--padding) !important;
}

@media screen and (max-width: 768px) {
    .featured .wp-block-columns:first-of-type {
        margin-bottom: calc(var(--margin) - var(--spacer));
        gap: var(--spacer);
    }
}

/* Scroller */
.scroller .wp-block-columns {
    position: relative;
    overflow: hidden;
}
.scroller .wp-block-column {
    height: 80px;
}
.scroller .wp-block-heading {
    position: absolute;
    width: 100%;
    height: 80px; /* Height of the text */
    margin: 0 !important;
    white-space: nowrap;
    box-sizing: border-box;
}

.scroller .wp-block-heading {
    display: inline-block;
    transform: translateX(130%);
}

.scroller .wp-block-heading:first-of-type {
    animation: scroll 14s linear infinite;
}

.scroller .wp-block-heading:last-of-type {
    animation: scroll 14s linear infinite 7s;
}

.scroller .wp-block-heading {
    text-align: center;
    text-wrap: unset;
    white-space: nowrap;
}

/* Keyframes for scrolling */
@keyframes scroll {
    0% {
        transform: translateX(130%);
    }
    100% {
        transform: translateX(-130%);
    }
}




/* 13. Accessibility */
/* -------------------------------------------- */

/* Screen Reader */
.sr-only,
.screen-reader-text,
.screen-reader-response,
.shop_table thead { /* WooCommerce's table header rows (Product / Price / Quantity …) — each row reads clearly without them */
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    word-wrap: normal !important;
}

/* Remove all focus outlines by default */
:focus,
:active {
    outline: none;
}

/* Only show outlines if user is navigating with a keyboard */
.keyboard :focus,
.keyboard :active,
.keyboard :focus-visible {
    outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--text) var(--border-opacity), transparent);
    outline-color: var(--primary);
    outline-offset: 2px;
}

.keyboard .has-background .wp-block-column:not(.card) :focus,
.keyboard .has-background .wp-block-column:not(.card) :active,
.keyboard .has-background .wp-block-column:not(.card) :focus-visible {
    outline-color: var(--background);
}

/* Selection */
::selection {
    background-color: var(--text);
    color: var(--background);
}

.has-background .wp-block-column:not(.card) ::selection {
    background-color: var(--background);
    color: var(--text);
}