.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Sofia Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Cormorant Garamond";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   GLOBAL VARIABLES
   ========================================================= */

:root {

    /* ---------- Spacing ---------- */

    --space-xs: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);
    --space-sm: clamp(1rem, 0.8rem + 0.4vw, 1.5rem);
    --space-md: clamp(1.5rem, 1.2rem + 0.6vw, 2.5rem);
    --space-lg: clamp(2rem, 1.5rem + 1vw, 4rem);
    --space-xl: clamp(3rem, 2rem + 1.5vw, 6rem);

    --padding-horizontal: clamp(1rem, 4vw, 4rem);


    /* ---------- Typography ---------- */

    --font-body-family: "Sofia Sans", sans-serif;
    --font-heading-family: "Cormorant Garamond", serif;

    --font-body-weight: 400;
    --font-heading-weight: 400;

    --font-base: 1rem;
    --font-body: 1rem;
    --font-sm: clamp(0.8rem, 0.75rem + 0.1vw, 0.9rem);

    /*
     * Heading scale
     *
     * H6 = base
     * H5 = base × scale
     * H4 = base × scale²
     * H3 = base × scale³
     * H2 = base × scale⁴
     * H1 = base × scale⁵
     *
     * Change --heading-scale to adjust the entire hierarchy.
     */

    --heading-scale: 1.25;

    --font-h6: 0.9rem;
    --font-h5: calc(var(--font-h6) * var(--heading-scale));
    --font-h4: calc(var(--font-h5) * var(--heading-scale));
    --font-h3: calc(var(--font-h4) * var(--heading-scale));
    --font-h2: calc(var(--font-h3) * var(--heading-scale));
    --font-h1: calc(var(--font-h2) * var(--heading-scale));

    --line-height-heading: 1.1;
    --line-height-body: 1.5;


    /* ---------- Brand Colors ---------- */

    /*
     * Color hierarchy:
     *
     * 1. White
     * 2. Blue
     * 3. Gold
     * 4. Black
     * 5. Accent
     */

    --color-white: #ffffff;
    --color-blue: #0C2B50;
    --color-gold: #A68553;
    --color-black: #111111;
    --color-accent: #A40E00;

    --color-transparent: transparent;


    /* ---------- Neutral Colors ---------- */

    --color-gray-100: #f5f5f5;
    --color-gray-300: #d6d6d6;
    --color-gray-500: #888888;
    --color-gray-700: #555555;


    /* ---------- Semantic Colors ---------- */

    --color-text: var(--color-black);


    /* ---------- Site Layout ---------- */

    --site-content-width: 1440px;
    --grid-gap: 2rem;


    /* ---------- Borders ---------- */

    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-pill: 999px;


    /* ---------- Shadows ---------- */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);


    /* ---------- Buttons ---------- */

    --btn-radius: var(--border-radius-pill);
    --btn-border-width: 1px;
    --btn-transition: 0.2s ease;

    --btn-blue-hover:
        color-mix(
            in srgb,
            var(--color-blue) 85%,
            var(--color-black)
        );

    --btn-gold-hover:
        color-mix(
            in srgb,
            var(--color-gold) 85%,
            var(--color-black)
        );

    --btn-accent-hover:
        color-mix(
            in srgb,
            var(--color-accent) 85%,
            var(--color-black)
        );

    --btn-black-hover:
        color-mix(
            in srgb,
            var(--color-black) 85%,
            var(--color-white)
        );

    --btn-white-hover:
        color-mix(
            in srgb,
            var(--color-white) 90%,
            var(--color-black)
        );


    /* ---------- Container Theme ---------- */

    --theme-text: var(--color-black);
    --theme-border: var(--color-black);
    --theme-link: var(--color-black);

    /* SVG / icon color follows the container theme */
    --icon-color: var(--color-black);
}


/* =========================================================
   BASE
   ========================================================= */

html {
    font-size: var(--font-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family: var(--font-body-family);
    font-size: var(--font-body);
    font-weight: var(--font-body-weight);
    line-height: var(--line-height-body);

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

*,
*::before,
*::after {
    box-sizing: border-box;
    background: center center / cover no-repeat;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.big-text {
    margin-top: 0;

    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight);
    line-height: var(--line-height-heading);

    color: var(--theme-text);
}

h1,
.h1 {
    font-size: var(--font-h1);
}

h2,
.h2 {
    font-size: var(--font-h2);
}

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

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

h5,
.h5 {
    font-size: var(--font-h5);
}

h6,
.h6 {
    font-size: var(--font-h6);
}

.big-text {
    font-size: var(--font-h1);
}

p {
    max-width: 90ch;
    margin-top: 0;
    margin-bottom: var(--space-sm);

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

    color: var(--theme-text);
}

p a {
    color: var(--theme-link);
    text-decoration: underline;
}

p a:hover {
    color: var(--color-accent);
}

.small,
.text-sm {
    font-size: var(--font-sm);
}

ul,
ol {
    margin-top: 0;
    margin-bottom: var(--space-sm);
}

li {
    color: var(--theme-text);
}

::marker {
    color: var(--color-gold);
}


/* =========================================================
   WIDTH / CONTENT SYSTEM
   ========================================================= */

.full-width {
    width: 100%;
}

.content-width {
    width: 100%;
    max-width: var(--site-content-width);
    margin-inline: auto;
}

.section {
    width: 100%;

    padding-block: var(--space-lg);
    padding-inline: var(--padding-horizontal);
}

.section > .content-width {
    width: 100%;
}


/* =========================================================
   FLEX UTILITIES
   ========================================================= */

.flex {
    display: flex !important;
}

.flex-inline {
    display: inline-flex !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}


/* ---------- Justification ---------- */

.justify-start {
    justify-content: flex-start !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}

.justify-evenly {
    justify-content: space-evenly !important;
}


/* ---------- Alignment ---------- */

.items-start {
    align-items: flex-start !important;
}

.items-center {
    align-items: center !important;
}

.items-end {
    align-items: flex-end !important;
}

.items-stretch {
    align-items: stretch !important;
}

.items-baseline {
    align-items: baseline !important;
}


/* ---------- Flex sizing ---------- */

.flex-1 {
    flex: 1 1 0% !important;
}

.flex-auto {
    flex: 1 1 auto !important;
}

.flex-none {
    flex: none !important;
}


/* =========================================================
   GAP UTILITIES
   ========================================================= */

.gap-xs {
    gap: var(--space-xs) !important;
}

.gap-sm {
    gap: var(--space-sm) !important;
}

.gap-md {
    gap: var(--space-md) !important;
}

.gap-lg {
    gap: var(--space-lg) !important;
}

.gap-xl {
    gap: var(--space-xl) !important;
}


/* ---------- Horizontal gap ---------- */

.gap-x-xs {
    column-gap: var(--space-xs) !important;
}

.gap-x-sm {
    column-gap: var(--space-sm) !important;
}

.gap-x-md {
    column-gap: var(--space-md) !important;
}

.gap-x-lg {
    column-gap: var(--space-lg) !important;
}

.gap-x-xl {
    column-gap: var(--space-xl) !important;
}


/* ---------- Vertical gap ---------- */

.gap-y-xs {
    row-gap: var(--space-xs) !important;
}

.gap-y-sm {
    row-gap: var(--space-sm) !important;
}

.gap-y-md {
    row-gap: var(--space-md) !important;
}

.gap-y-lg {
    row-gap: var(--space-lg) !important;
}

.gap-y-xl {
    row-gap: var(--space-xl) !important;
}


/* =========================================================
   12-COLUMN GRID
   ========================================================= */

.grid-12 {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: var(--grid-gap);

    width: 100%;
}


/* ---------- Column spans ---------- */

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }


/* =========================================================
   GRID LAST-ROW UTILITY
   ========================================================= */

/*
 * Add .grid-fill-last alongside .grid-12.
 *
 * This makes a single item remaining on the final row
 * expand to the full available row.
 *
 * Designed for common equal-width grids:
 *
 * .col-6 = 2 items per row
 * .col-4 = 3 items per row
 * .col-3 = 4 items per row
 * .col-2 = 6 items per row
 */


/* ---------- 2-column layout ---------- */

.grid-fill-last > .col-6:last-child:nth-child(odd) {
    grid-column: span 12;
}


/* ---------- 3-column layout ---------- */

.grid-fill-last > .col-4:last-child:nth-child(3n + 1) {
    grid-column: span 12;
}


/* ---------- 4-column layout ---------- */

.grid-fill-last > .col-3:last-child:nth-child(4n + 1) {
    grid-column: span 12;
}


/* ---------- 6-column layout ---------- */

.grid-fill-last > .col-2:last-child:nth-child(6n + 1) {
    grid-column: span 12;
}


/* =========================================================
   SPACING UTILITIES
   ========================================================= */

/* ---------- Margin top ---------- */

.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }


/* ---------- Margin bottom ---------- */

.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }


/* ---------- Margin vertical ---------- */

.my-xs {
    margin-block: var(--space-xs) !important;
}

.my-sm {
    margin-block: var(--space-sm) !important;
}

.my-md {
    margin-block: var(--space-md) !important;
}

.my-lg {
    margin-block: var(--space-lg) !important;
}

.my-xl {
    margin-block: var(--space-xl) !important;
}


/* ---------- Padding top ---------- */

.pt-xs { padding-top: var(--space-xs) !important; }
.pt-sm { padding-top: var(--space-sm) !important; }
.pt-md { padding-top: var(--space-md) !important; }
.pt-lg { padding-top: var(--space-lg) !important; }
.pt-xl { padding-top: var(--space-xl) !important; }


/* ---------- Padding bottom ---------- */

.pb-xs { padding-bottom: var(--space-xs) !important; }
.pb-sm { padding-bottom: var(--space-sm) !important; }
.pb-md { padding-bottom: var(--space-md) !important; }
.pb-lg { padding-bottom: var(--space-lg) !important; }
.pb-xl { padding-bottom: var(--space-xl) !important; }


/* ---------- Padding vertical ---------- */

.py-xs {
    padding-block: var(--space-xs) !important;
}

.py-sm {
    padding-block: var(--space-sm) !important;
}

.py-md {
    padding-block: var(--space-md) !important;
}

.py-lg {
    padding-block: var(--space-lg) !important;
}

.py-xl {
    padding-block: var(--space-xl) !important;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: clamp(500px, 70vh, 900px);

    padding-block: var(--space-xl);
    padding-inline: var(--padding-horizontal);

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* =========================================================
   CARD
   ========================================================= */

.card {
    padding: var(--space-md);

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

    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
}


/* =========================================================
   COLOR THEMES
   ========================================================= */

.theme-light {
    --theme-text: var(--color-black);
    --theme-border: var(--color-black);
    --theme-link: var(--color-black);
    --icon-color: var(--color-black);
}

.theme-dark {
    --theme-text: var(--color-white);
    --theme-border: var(--color-white);
    --theme-link: var(--color-white);
    --icon-color: var(--color-white);
}


/* ---------- Theme text ---------- */

.theme-light,
.theme-dark {
    color: var(--theme-text);
}

.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light h4,
.theme-light h5,
.theme-light h6,
.theme-light p,
.theme-light li,
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6,
.theme-dark p,
.theme-dark li {
    color: var(--theme-text);
}


/* ---------- Theme links ---------- */

.theme-light a,
.theme-dark a {
    color: var(--theme-link);
}

.theme-light a:hover,
.theme-dark a:hover {
    color: var(--color-accent);
}


/* ---------- Theme borders ---------- */

.border {
    border: 1px solid var(--theme-border);
}

.theme-light .border,
.theme-dark .border {
    border-color: var(--theme-border);
}


/* =========================================================
   SVG / ICON COLORS AND SIZES
   ========================================================= */

/*
 * Add these classes to an Elementor Icon widget:
 *
 * Color:
 * icon
 * icon-white
 * icon-blue
 * icon-gold
 * icon-black
 * icon-accent
 * icon-current
 *
 * Size:
 * icon-xs
 * icon-sm
 * icon-md
 * icon-lg
 * icon-xl
 *
 * You can also set a custom size directly:
 *
 * .elementor-kit-7 {
 *     --icon-size: 2.5rem;
 * }
 */


/* ---------- Default icon settings ---------- */

.icon {
    --icon-color: var(--theme-text);
    --icon-size: 1.5rem;

    color: var(--icon-color) !important;
}


/* ---------- Icon colors ---------- */

.icon-white {
    --icon-color: var(--color-white);
}

.icon-blue {
    --icon-color: var(--color-blue);
}

.icon-gold {
    --icon-color: var(--color-gold);
}

.icon-black {
    --icon-color: var(--color-black);
}

.icon-accent {
    --icon-color: var(--color-accent);
}

.icon-current {
    --icon-color: currentColor;
}


/* ---------- Icon sizes ---------- */

.icon-xs {
    --icon-size: 1rem;
}

.icon-sm {
    --icon-size: 1.25rem;
}

.icon-md {
    --icon-size: 1.5rem;
}

.icon-lg {
    --icon-size: 2rem;
}

.icon-xl {
    --icon-size: 8rem;
}


/* ---------- Elementor icon ---------- */

.icon .elementor-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: var(--icon-size);
    height: var(--icon-size);

    color: var(--icon-color) !important;
}

.icon .elementor-icon svg {
    width: var(--icon-size);
    height: var(--icon-size);

    color: var(--icon-color) !important;
}


/* ---------- SVG fills ---------- */

.icon .elementor-icon svg,
.icon .elementor-icon svg path,
.icon .elementor-icon svg circle,
.icon .elementor-icon svg rect,
.icon .elementor-icon svg polygon,
.icon .elementor-icon svg ellipse {
    fill: var(--icon-color) !important;
}


/* ---------- SVG strokes ---------- */

.icon .elementor-icon svg path[stroke],
.icon .elementor-icon svg circle[stroke],
.icon .elementor-icon svg rect[stroke],
.icon .elementor-icon svg polygon[stroke],
.icon .elementor-icon svg ellipse[stroke] {
    stroke: var(--icon-color) !important;
}


/* ---------- Preserve SVG elements explicitly set to none ---------- */

.icon .elementor-icon svg [fill="none"] {
    fill: none !important;
}

.icon .elementor-icon svg [stroke="none"] {
    stroke: none !important;
}


/* =========================================================
   COLOR UTILITIES
   ========================================================= */

.text-white {
    color: var(--color-white) !important;
}

.text-blue {
    color: var(--color-blue) !important;
}

.text-gold {
    color: var(--color-gold) !important;
}

.text-black {
    color: var(--color-black) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.text-gray {
    color: var(--color-gray-500) !important;
}


.bg-white {
    background-color: var(--color-white);
}

.bg-blue {
    background-color: var(--color-blue);
}

.bg-gold {
    background-color: var(--color-gold);
}

.bg-black {
    background-color: var(--color-black);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-gray {
    background-color: var(--color-gray-100);
}


/* =========================================================
   GENERAL UTILITIES
   ========================================================= */

.radius-sm {
    border-radius: var(--border-radius-sm) !important;
}

.radius-md {
    border-radius: var(--border-radius-md) !important;
}

.radius-lg {
    border-radius: var(--border-radius-lg) !important;
}

.radius-pill {
    border-radius: var(--border-radius-pill) !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.no-margin {
    margin: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.ratio-16-9 {
    aspect-ratio: 16 / 9;
}


/* =========================================================
   BUTTONS
   ========================================================= */

/*
 * These work with Elementor buttons.
 *
 * Available classes:
 *
 * btn-primary
 * btn-secondary
 * btn-outline
 * btn-white
 * btn-black
 * btn-blue
 * btn-gold
 * btn-ghost
 */


/* ---------- Base ---------- */

.btn-primary .elementor-button,
.btn-secondary .elementor-button,
.btn-outline .elementor-button,
.btn-white .elementor-button,
.btn-black .elementor-button,
.btn-blue .elementor-button,
.btn-gold .elementor-button,
.btn-ghost .elementor-button,
.elementor-button {
    border-radius: var(--btn-radius);
    border-width: var(--btn-border-width);
    border-style: solid;

    transition:
        background-color var(--btn-transition),
        border-color var(--btn-transition),
        color var(--btn-transition),
        transform var(--btn-transition);
}


/* ---------- Primary / Accent ---------- */

.btn-primary .elementor-button,
.btn-blue .elementor-button {
    color: var(--color-white);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-primary .elementor-button:hover,
.btn-blue .elementor-button:hover {
    color: var(--color-white);
    background-color: var(--btn-accent-hover);
    border-color: var(--btn-accent-hover);

    transform: translateY(-2px);
}


/* ---------- Secondary / Gold ---------- */

.btn-secondary .elementor-button,
.btn-gold .elementor-button {
    color: var(--color-black);
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

.btn-secondary .elementor-button:hover,
.btn-gold .elementor-button:hover {
    color: var(--color-black);
    background-color: var(--btn-gold-hover);
    border-color: var(--btn-gold-hover);
}


/* ---------- Outline ---------- */

.btn-outline .elementor-button {
    color: var(--theme-text);
    background-color: transparent;
    border-color: var(--theme-border);
}

.btn-outline .elementor-button:hover {
    color: var(--color-white);
    background-color: var(--color-blue);
    border-color: var(--color-blue);

    transform: translateY(-2px);
}


/* ---------- White ---------- */

.btn-white .elementor-button {
    color: var(--color-black);
    background-color: var(--color-white);
    border-color: var(--color-white);
}

.btn-white .elementor-button:hover {
    color: var(--color-black);
    background-color: var(--btn-white-hover);
    border-color: var(--btn-white-hover);
}


/* ---------- Black ---------- */

.btn-black .elementor-button {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}

.btn-black .elementor-button:hover {
    color: var(--color-white);
    background-color: var(--btn-black-hover);
    border-color: var(--btn-black-hover);
}


/* ---------- Ghost ---------- */

.btn-ghost .elementor-button {
    color: var(--theme-text);
    background-color: transparent;
    border-color: transparent;
}

.btn-ghost .elementor-button:hover {
    color: var(--color-blue);
    background-color: transparent;
    border-color: transparent;
}


/* ---------- Button focus ---------- */

.elementor-button:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {

    /* ---------- Typography ---------- */

    :root {
        --font-body: 1rem;
        --font-sm: clamp(0.8rem, 0.75rem + 0.1vw, 0.9rem);

        --heading-scale: 1.2;
        --font-h6: 0.85rem;
    }


    /* ---------- Grid ---------- */

    .grid-12 {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }

    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        grid-column: span 6;
    }


    /* ---------- Sections ---------- */

    .section {
        padding-block: var(--space-lg);
    }


    /* ---------- Last single item ---------- */

    .grid-fill-last > .col-6:last-child:nth-child(odd),
    .grid-fill-last > .col-4:last-child:nth-child(3n + 1),
    .grid-fill-last > .col-3:last-child:nth-child(4n + 1),
    .grid-fill-last > .col-2:last-child:nth-child(6n + 1) {
        grid-column: span 6;
    }
}


@media (max-width: 767px) {

    /* ---------- Typography ---------- */

    :root {
        --font-body: 0.95rem;
        --font-sm: 0.8rem;

        --heading-scale: 1.18;
        --font-h6: 0.8rem;
    }


    /* ---------- Grid ---------- */

    .grid-12 {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        grid-column: span 1;
    }


    /* ---------- Sections ---------- */

    .section {
        padding-block: var(--space-md);
    }


    /* ---------- Last single item ---------- */

    .grid-fill-last > * {
        grid-column: span 1 !important;
    }
}


@media (max-width: 480px) {

    /* ---------- Typography ---------- */

    :root {
        --font-body: 0.9rem;
        --font-sm: 0.75rem;

        --heading-scale: 1.15;
        --font-h6: 0.8rem;
    }


    /* ---------- Sections ---------- */

    .section {
        padding-block: var(--space-md);
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   CUSTOM WOOCOMMERCE SHOP
   ========================================================= */


/* ---------------------------------------------------------
   SHOP LAYOUT
   --------------------------------------------------------- */

.custom-shop {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: var(--space-lg);
    width: 100%;
    align-items: start;
}


/* ---------------------------------------------------------
   CATEGORY SIDEBAR
   --------------------------------------------------------- */

.custom-shop-sidebar {
    width: 100%;
}

.custom-shop-sidebar-inner {
    position: sticky;
    top: var(--space-md);
    width: 100%;
}

.custom-shop-sidebar-title {
    margin-bottom: var(--space-sm);
}

.custom-shop-sidebar-title h2 {
    margin: 0;
    font-family: var(--font-heading-family);
    font-size: var(--font-h3);
    line-height: var(--line-height-heading);
    font-weight: var(--font-heading-weight);
    color: var(--theme-text);
}


/* ---------------------------------------------------------
   CATEGORY LINKS
   --------------------------------------------------------- */

.custom-shop-category-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.custom-shop-category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);

    width: 100%;
    padding: 0.75rem 1rem;

    color: var(--theme-text);
    text-decoration: none;

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

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.custom-shop-category-link:hover {
    background-color: var(--color-gray-100);
    color: var(--color-accent);
}

.custom-shop-category-link.is-active {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.custom-shop-category-name {
    flex: 1;
}

.custom-shop-category-count {
    font-size: var(--font-sm);
    opacity: 0.65;
}

.custom-shop-category-link.is-active
.custom-shop-category-count {
    opacity: 0.9;
}


/* ---------------------------------------------------------
   PRODUCTS AREA
   --------------------------------------------------------- */

.custom-shop-products-area,
.custom-shop-products-wrapper {
    min-width: 0;
    width: 100%;
}


/* ---------------------------------------------------------
   PRODUCT GRID
   --------------------------------------------------------- */

.custom-shop-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    width: 100%;
}

.custom-shop-columns-1 {
    grid-template-columns: minmax(0, 1fr);
}

.custom-shop-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.custom-shop-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.custom-shop-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.custom-shop-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.custom-shop-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}


/* ---------------------------------------------------------
   PRODUCT CARD
   --------------------------------------------------------- */

.custom-shop-product-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;

    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    overflow: hidden;

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

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.custom-shop-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}


/* ---------------------------------------------------------
   PRODUCT IMAGE
   --------------------------------------------------------- */

.custom-shop-product-image-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    /*
     * No fixed aspect-ratio.
     * The complete image is allowed to determine its height.
     */
    overflow: hidden;

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

.custom-shop-product-image {
    display: block;

    width: 100%;
    height: auto;

    /*
     * Never crop the product image.
     */
    object-fit: contain;

    transition: transform 0.3s ease;
}

.custom-shop-product-card:hover
.custom-shop-product-image {
    transform: scale(1.02);
}


/* ---------------------------------------------------------
   PRODUCT CONTENT
   --------------------------------------------------------- */

.custom-shop-product-content {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: var(--space-md);
}


/* ---------------------------------------------------------
   PRODUCT CATEGORY
   --------------------------------------------------------- */

.custom-shop-product-category {
    margin-bottom: 0.4rem;

    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.3;

    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ---------------------------------------------------------
   PRODUCT TITLE
   --------------------------------------------------------- */

.custom-shop-product-title {
    margin: 0 0 var(--space-xs);

    font-family: var(--font-heading-family);
    font-size: var(--font-h4);
    line-height: var(--line-height-heading);
    font-weight: var(--font-heading-weight);

    color: var(--theme-text);
}

.custom-shop-product-title a {
    color: inherit;
    text-decoration: none;
}

.custom-shop-product-title a:hover {
    color: var(--color-accent);
}


/* ---------------------------------------------------------
   PRODUCT DESCRIPTION
   --------------------------------------------------------- */

.custom-shop-product-description {
    margin-bottom: var(--space-md);

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

    color: var(--color-gray-700);
}


/* ---------------------------------------------------------
   PRODUCT BOTTOM
   --------------------------------------------------------- */

.custom-shop-product-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);

    margin-top: auto;
}


/* ---------------------------------------------------------
   PRICE
   --------------------------------------------------------- */

.custom-shop-product-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text);
}

.custom-shop-product-price del {
    margin-right: 0.35rem;
    color: var(--color-gray-500);
    font-weight: 400;
}

.custom-shop-product-price ins {
    color: var(--color-accent);
    text-decoration: none;
}


/* ---------------------------------------------------------
   CART CONTROLS
   --------------------------------------------------------- */

.custom-shop-product-cart {
    display: flex;
    align-items: stretch;

    width: 100%;

    /*
     * No gap.
     * The quantity and button form one continuous control.
     */
    gap: 0;

    border: 1px solid var(--color-accent);
    border-radius: var(--btn-radius);

    overflow: hidden;
}


/* ---------------------------------------------------------
   QUANTITY
   --------------------------------------------------------- */

.custom-shop-quantity {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    min-height: 2.75rem;

    background-color: var(--color-white);

    border: 0;
}


/* ---------------------------------------------------------
   QUANTITY BUTTONS
   --------------------------------------------------------- */

.custom-shop-quantity button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.25rem;
    height: 2.75rem;

    padding: 0;

    border: 0;
    background: transparent;

    color: var(--color-black);

    font-family: inherit;
    font-size: 1.1rem;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.custom-shop-quantity button:hover {
    background-color: var(--color-gray-100);
    color: var(--color-accent);
}


/* ---------------------------------------------------------
   QUANTITY INPUT
   --------------------------------------------------------- */

.custom-shop-quantity-input {
    width: 2.5rem !important;
    height: 2.75rem !important;

    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: var(--color-black) !important;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;

    box-shadow: none !important;
}

.custom-shop-quantity-input:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* Remove browser number arrows */

.custom-shop-quantity-input::-webkit-outer-spin-button,
.custom-shop-quantity-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.custom-shop-quantity-input {
    -moz-appearance: textfield;
}


/* ---------------------------------------------------------
   DIVIDER BETWEEN QUANTITY AND BUTTON
   --------------------------------------------------------- */

.custom-shop-product-cart
.custom-shop-add-to-cart {
    border-left: 1px solid var(--color-accent);
}


/* ---------------------------------------------------------
   ADD TO CART
   --------------------------------------------------------- */

.custom-shop-add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1;
    min-width: 0;
    min-height: 2.75rem;

    margin: 0;
    padding: 0.65rem 1rem;

    border-top: 0;
    border-right: 0;
    border-bottom: 0;

    border-radius: 0;

    background-color: var(--color-accent);
    color: var(--color-white);

    font-family: inherit;
    font-size: var(--font-body);
    font-weight: 600;
    line-height: 1.2;

    cursor: pointer;

    transition:
        background-color var(--btn-transition),
        color var(--btn-transition);
}

.custom-shop-add-to-cart:hover {
    background-color: var(--btn-accent-hover);
    color: var(--color-white);

    transform: none;
}

.custom-shop-add-to-cart:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

.custom-shop-add-to-cart.is-loading {
    opacity: 0.65;
    cursor: wait;
}

.custom-shop-add-to-cart.is-added {
    background-color: var(--color-gold);
    color: var(--color-black);
}


/* ---------------------------------------------------------
   LOADING TEXT
   --------------------------------------------------------- */

.custom-shop-add-to-cart-loading {
    display: none;
}

.custom-shop-add-to-cart.is-loading
.custom-shop-add-to-cart-text {
    display: none;
}

.custom-shop-add-to-cart.is-loading
.custom-shop-add-to-cart-loading {
    display: inline;
}


/* ---------------------------------------------------------
   EMPTY SHOP
   --------------------------------------------------------- */

.custom-shop-empty {
    grid-column: 1 / -1;

    padding: var(--space-lg);

    text-align: center;

    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-md);

    background-color: var(--color-gray-100);
}

.custom-shop-empty p {
    margin: 0 0 var(--space-sm);
}

.custom-shop-empty-link {
    color: var(--color-accent);
    font-weight: 600;
}


/* ---------------------------------------------------------
   NO CATEGORIES
   --------------------------------------------------------- */

.custom-shop-no-categories {
    color: var(--color-gray-700);
    font-size: var(--font-sm);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .custom-shop {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: var(--space-md);
    }

    .custom-shop-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .custom-shop-columns-3,
    .custom-shop-columns-4,
    .custom-shop-columns-5,
    .custom-shop-columns-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .custom-shop {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    .custom-shop-sidebar {
        width: 100%;
    }

    .custom-shop-sidebar-inner {
        position: static;
    }

    .custom-shop-sidebar-title {
        margin-bottom: var(--space-xs);
    }

    .custom-shop-sidebar-title h2 {
        font-size: var(--font-h4);
    }


    /* Category navigation */

    .custom-shop-category-nav {
        display: flex;
        flex-direction: row;

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        gap: 0.5rem;

        padding-bottom: 0.25rem;

        scrollbar-width: thin;
    }

    .custom-shop-category-link {
        flex: 0 0 auto;
        width: auto;

        padding: 0.6rem 0.9rem;

        white-space: nowrap;
    }

    .custom-shop-category-count {
        display: none;
    }


    /* Product grid */

    .custom-shop-product-grid,
    .custom-shop-columns-2,
    .custom-shop-columns-3,
    .custom-shop-columns-4,
    .custom-shop-columns-5,
    .custom-shop-columns-6 {
        grid-template-columns: minmax(0, 1fr);
    }


    /* Product card */

    .custom-shop-product-content {
        padding: var(--space-sm);
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    /*
     * Keep the quantity and button connected even on mobile.
     * The whole control simply becomes full width.
     */

    .custom-shop-product-cart {
        width: 100%;
    }

    .custom-shop-quantity {
        flex: 0 0 auto;
    }

    .custom-shop-add-to-cart {
        flex: 1;
    }

}/* End custom CSS */