/* This style is added to override a global li style added by Wordpress */
ul.af_list > li {margin: 0;}#show-genre-filter {
    .genre-filter-sidebar {
        display: flex;
    
    }
    .genre-filter-sidebar {
        flex-direction: column;
    
    }
    .genre-filter-sidebar {
        gap: 1.25rem;
    
    }
    .genre-filter-sidebar {
        .genre-list {

        .genre-checkbox {

            label {
                    height: 100%;
    
                }

            label {
                    border-radius: 4px;
    
                }

            label {
                    border-style: none;
    
                }

            label {
                    --tw-text-opacity: 1;
                    color: rgb(242 235 218 / var(--tw-text-opacity, 1));
    
                }

            label:hover {
                    --tw-bg-opacity: 1;
                    background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    
                }
            
            input:checked + label {
                    border-style: none;
    
                }
            
            input:checked + label {
                    --tw-bg-opacity: 1;
                    background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    
                }

            input:focus + label {
                    outline: 2px solid transparent;
                    outline-offset: 2px;
    
                }

        }
        }

        .form-btn {
            width: -moz-fit-content;
            width: fit-content;
    
        }

        .form-btn {
            border-radius: 4px;
    
        }

        .form-btn {
            border-width: 1.5px;
    
        }

        .form-btn {
            border-style: solid;
    
        }

        .form-btn {
            --tw-border-opacity: 1;
            border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
        }

        .form-btn {
            background-color: transparent;
    
        }

        .form-btn {
            padding-left: 10px;
            padding-right: 10px;
    
        }

        .form-btn {
            padding-top: 9px;
    
        }

        .form-btn {
            padding-bottom: 13px;
    
        }

        .form-btn {
            font-family: Barlow Condensed, system-ui;
    
        }

        .form-btn {
            font-size: 1.25rem;
            line-height: 1.75rem;
    
        }

        .form-btn {
            font-weight: 400;
    
        }

        .form-btn {
            line-height: 9px;
    
        }

        .form-btn {
            --tw-text-opacity: 1;
            color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
        }

        .form-btn:hover {
            border-color: transparent;
    
        }

        .form-btn:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    
        }

        .form-btn:hover {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    
        }

        /* Shows search block (issue #36). Lives here rather than in the element's own
         * stylesheet so it sits with the sidebar it is part of, and so the button keeps
         * inheriting `.form-btn` above instead of being given a second copy of it.
         *
         * A column, so the Search button lands on its own row under the field: the sidebar's
         * 233px minimum will not hold a field, an in-field icon and a button side by side. The
         * gap matches the sidebar's own `gap-5`, keeping the two blocks on one rhythm. */
        .shows-search-form {
            display: flex;
    
        }
        .shows-search-form {
            width: 100%;
    
        }
        .shows-search-form {
            flex-direction: column;
    
        }
        .shows-search-form {
            align-items: flex-start;
    
        }
        .shows-search-form {
            gap: 0.625rem;
    
        }

        /* The field is a <label> wrapping the input and the icon, so a click anywhere in the
         * box focuses the input. `relative` is what the icon positions against. */
        .shows-search-field {
            position: relative;
    
        }
        .shows-search-field {
            display: block;
    
        }
        .shows-search-field {
            width: 100%;
    
        }

        .shows-search-input {
            /* Width and right padding only. Everything else — background, border, radius,
             * height, type — comes from the branded field rule in input.css that
             * `[type="search"]` is now part of, and is deliberately not restated here so the
             * field cannot drift from the checkout's.
             *
             * The right padding is the one thing that rule cannot know about: it reserves the
             * 22px icon plus its 9px inset, so a long query scrolls out of sight to the left
             * instead of running underneath the magnifier. No `!important` needed — this file
             * is imported ahead of `@layer components`, so it is unlayered and beats the
             * layered branded rule outright. Verified by removing it and re-testing. */
        }

        .shows-search-input {
            width: 100%;
    
        }

        .shows-search-input {
            padding-right: 36px;
        }

        .shows-search-icon {
            /* Decorative. pointer-events: none is what makes a click on the icon fall through
             * to the label, which then focuses the input — the icon is not a control. */
        }

        .shows-search-icon {
            pointer-events: none;
    
        }

        .shows-search-icon {
            position: absolute;
    
        }

        .shows-search-icon {
            right: 9px;
    
        }

        .shows-search-icon {
            top: 50%;
    
        }

        .shows-search-icon {
            --tw-translate-y: -50%;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    
        }

        .shows-search-icon {
            --tw-text-opacity: 1;
            color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
        }

    }
    .programs-grid {
        display: grid;
    
    }
    .programs-grid{
        &[data-columns="1"] {
            grid-template-columns: 1fr;
        }
        
        &[data-columns="2"] {
            grid-template-columns: repeat(2, 1fr);
        }
        
        &[data-columns="3"] {
            grid-template-columns: repeat(3, 1fr);
        }
        &[data-columns="4"] {
            grid-template-columns: repeat(1, minmax(0, 1fr));
    
        }
        @media (min-width: 768px) {
            &[data-columns="4"] {
                grid-template-columns: repeat(2, minmax(0, 1fr));
    
            }
    
        }
        @media (min-width: 1024px) {
            &[data-columns="4"] {
                grid-template-columns: repeat(3, minmax(0, 1fr));
    
            }
    
        }
        @media (min-width: 1536px) {
            &[data-columns="4"] {
                grid-template-columns: repeat(4, minmax(0, 1fr));
    
            }
    
        }
    }

    
    .program-card {
        display: flex;
    
    }

    
    .program-card {
        align-items: flex-start;
    
    }

    
    .program-card {
        justify-content: flex-start;
    
    }

    
    .program-card {
        border-width: 1.5px;
    
    }

    
    .program-card {
        border-style: solid;
    
    }

    
    .program-card {
        --tw-border-opacity: 1;
        border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
    }


.genre-filter-wrapper {
    width: 100%;
    margin: 0 auto;
}

@media not all and (min-width: 768px) {
        .genre-filter-container {
            flex-direction: column;
    
        }
    
    }

.genre-filter-container {
    width: 100%;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

/* Filter Sidebar */
.genre-filter-sidebar {
    flex: 0 0%;
    min-width: 233px;
}

.genre-filter-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.genre-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.genre-checkbox {
    position: relative;
}

.genre-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.genre-checkbox label {
        display: block;
    
    }
    
}
.schedule-grid-wrapper {
    width: 100%;
    /* overflow-x: auto; */
    
}
.day-header .day-short {
    display: none;
    
}
.day-header .day-full {
    display: inline;
    
}
/* Mobile day tabs - hidden by default */
.mobile-day-tabs {
    display: none;
}
.day-tabs-container {
    display: flex;
    border-bottom: 2px solid black;
    overflow-x: auto;
    background: white;
    position: sticky;
    top: 0;
    z-index: 30;
}
.day-tab {
    flex: 1;
    min-width: 70px;
    padding: 12px 8px;
    background: #F2EBDA;
    border-right: 1.5px solid black;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    text-align: center;
    &:hover {
        background: #e0d8c5;
    }
    &.active {
        background: black;
        color: #F2EBDA;
    }
    .day-short {
        display: inline;
    
    }
    .day-full {
        display: none;
    
    }
}
.show-cell {
    display: flex;
    
}
/* Desktop - show all columns */
@media (min-width: 1024px) {
    .mobile-day-tabs {
        display: none !important;
    }

    .desktop-header {
        display: flex !important;
    }

    /* Add 40px header row on desktop */
   /*  .schedule-grid {
        grid-template-rows: 40px repeat(48, 19.5px) !important;
    } */
}
/* Mobile - single column view with tabs */
@media (max-width: 1023px) {
    .mobile-day-tabs {
        display: block;
    }

    .desktop-header {
        display: none !important;
    }

    .schedule-grid {
        grid-template-columns: 100px 1fr !important;
        font-size: 0.875rem;
        border-right: 1.5px solid black !important;
    }

    /* Hide day columns that aren't selected via Alpine.js x-show */
    .day-column[x-show] {
        display: flex;
    }

    /* When a day column is shown, ensure it takes column 2 */
    .day-column {
        grid-column: 2 !important;
    }

    /* Ensure empty cells and show cells display correctly */
    .empty-cell,
    .show-cell {
        border-left: 1.5px solid black !important;
    }
}
/* Tablet - show full day names in tabs */
@media (min-width: 640px) and (max-width: 1023px) {
    .day-tab .day-short {
        display: none;
    }

    .day-tab .day-full {
        display: inline;
    }
}
/* Extra small screens */
@media (max-width: 480px) {
    .day-tab {
        min-width: 50px;
    }
}
/* Alpine.js transition */
[x-cloak] {
    display: none !important;
}
/* Mobile responsive - show short day names when screen is small */
/* @media (max-width: 768px) {
    .schedule-grid {
        font-size: 0.875rem; 
    }

    .day-header .day-short {
        display: inline;
    }

    .day-header .day-full {
        display: none;
    }

    .time-label {
        font-size: 0.75rem !important;
        padding: 2px !important;
    }

    .show-cell {
        font-size: 0.75rem !important;
        padding: 4px !important;
    }
} */
/* Extra small screens - further optimization */
/* @media (max-width: 480px) {
    .schedule-grid {
        font-size: 0.75rem;
    }

    .day-header {
        font-size: 0.7rem !important;
        padding: 2px !important;
    }
} */
/* Focus visible styles for better keyboard navigation */
#listen-now:focus-visible,
#prev-episode:focus-visible,
#next-episode:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}
/* Button disabled state */
#prev-episode:disabled,
#next-episode:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Playlist item styling */
.playlist-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.playlist-item:last-child {
    border-bottom: none;
}
.playlist-item .track {
    color: var(--Black, #000);
    font-family: "Vina Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}
.playlist-item .artist {
    color: var(--Black, #000);
    font-family: "Barlow Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 9.036px; /* 45.182% */
}
#playlist-container {
    display: flex;
    flex-direction: column;
    gap: 17px;
}
/* Recording player controls styling */
#recordingPlayer {
    border-radius: 8px;
    background: #f5f5f5;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#recordingPlayer::-webkit-media-controls-panel {
    background-color: #f5f5f5;
}
.recording-player-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.radio-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    
}
.brxe-woocommerce-products-filter {
  .filter.radio > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
    
    }
  .radio-buttons {
    label {
            display: flex;
    
        }
    label {
            height: 1.5rem;
    
        }
    label {
            width: -moz-fit-content;
            width: fit-content;
    
        }
    label {
            align-items: center;
    
        }
    label {
            border-radius: 4px;
    
        }
    label {
            border-width: 1.5px;
    
        }
    label {
            border-style: solid;
    
        }
    label {
            --tw-border-opacity: 1;
            border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
        }
    label {
            --tw-bg-opacity: 1 !important;
            background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) !important;
    
        }
    label {
            padding-left: 10px;
            padding-right: 10px;
    
        }
    label {
            padding-top: 5px;
    
        }
    label {
            padding-bottom: 6px;
    
        }
    label {
            font-family: Barlow Condensed, system-ui;
    
        }
    label {
            font-size: 1rem;
            line-height: 1.5rem;
    
        }
    label {
            font-weight: 400;
    
        }
    label {
            line-height: 9px;
    
        }
    label {
            --tw-text-opacity: 1;
            color: rgb(242 235 218 / var(--tw-text-opacity, 1));
    
        }
    label:hover {
            border-color: transparent !important;
    
        }
    label:hover {
            --tw-bg-opacity: 1 !important;
            background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1)) !important;
    
        }
    label:hover {
            --tw-text-opacity: 1 !important;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    
        }
    label:hover {
            outline: 2px solid transparent;
            outline-offset: 2px;
    
        }

    input:checked + label {
            border-color: transparent;
    
        }

    input:checked + label {
            --tw-bg-opacity: 1;
            background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    
        }

    input:focus + label {
            outline: 2px solid transparent;
            outline-offset: 2px;
    
        }
  }
  .wc-filter-button-group {
        width: -moz-fit-content;
        width: fit-content;
    
    }
  .wc-filter-button-group {
    button {
            width: -moz-fit-content;
            width: fit-content;
    
        }
    button {
            border-radius: 4px;
    
        }
    button {
            border-width: 1.5px;
    
        }
    button {
            border-style: solid;
    
        }
    button {
            --tw-border-opacity: 1;
            border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
        }
    button {
            background-color: transparent;
    
        }
    button {
            padding-left: 10px;
            padding-right: 10px;
    
        }
    button {
            padding-top: 4px;
    
        }
    button {
            padding-bottom: 4px;
    
        }
    button {
            font-family: Barlow Condensed, system-ui;
    
        }
    button {
            font-size: 1.25rem;
            line-height: 1.75rem;
    
        }
    button {
            font-weight: 400;
    
        }
    button {
            --tw-text-opacity: 1;
            color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
        }
    button:hover {
            border-color: transparent;
    
        }
    button:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    
        }
    button:hover {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    
        }
  }
}
.brxe-woocommerce-products-filter .radio-buttons input:checked + label {
    border-color: transparent !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    
}
.brxe-woocommerce-products {
  .product {
    &.type-product {
            border-radius: 4px;
    
        }
    &.type-product {
            border-width: 1.5px;
    
        }
    &.type-product {
            border-style: solid;
    
        }
    &.type-product {
            --tw-border-opacity: 1;
            border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
        }
    &.type-product>*:not(.divider):not(:first-child) {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
    
        }
    &.type-product {
      /* Square to match WooCommerce's 1:1 thumbnail — see IMAGE-SPECS.md #10. */
      img {
                aspect-ratio: 1 / 1;
    
            }
      img {
                width: 100%;
    
            }
      img {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    
            }
      img {
                -o-object-fit: contain;
                   object-fit: contain;
    
            }
      .woocommerce-loop-product__title {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
    
            }
      .woocommerce-loop-product__title {
                font-family: Vina Sans, system-ui;
    
            }
      .woocommerce-loop-product__title {
                font-size: 22px;
    
            }
      .woocommerce-loop-product__title {
                text-transform: uppercase;
    
            }
      .woocommerce-loop-product__title {
                --tw-text-opacity: 1;
                color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
            }
      .add_to_cart_button,
      .product_type_bundle {
                margin-bottom: 0.75rem;
    
            }
    }

    .woocommerce-Price-amount.amount,
    .woocommerce-price-suffix {
            font-family: Barlow Condensed, system-ui;
    
        }

    .woocommerce-Price-amount.amount,
    .woocommerce-price-suffix {
            font-size: 1.25rem;
            line-height: 1.75rem;
    
        }

    .woocommerce-Price-amount.amount,
    .woocommerce-price-suffix {
            line-height: 10px;
    
        }

    .woocommerce-Price-amount.amount,
    .woocommerce-price-suffix {
            --tw-text-opacity: 1;
            color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
        }

    .button {
      &.add_to_cart_button,
      &.product_type_bundle {
                margin-left: 0.75rem;
                margin-right: 0.75rem;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                display: flex;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                width: -moz-fit-content;
                width: fit-content;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                border-radius: 4px;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                border-width: 1px;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                --tw-border-opacity: 1;
                border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                background-color: transparent !important;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                padding-top: 0.25rem;
                padding-bottom: 0.25rem;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                padding-left: 0.625rem;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                padding-right: 0.75rem;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                font-family: Barlow Condensed, system-ui;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                font-size: 1.25rem;
                line-height: 1.75rem;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                font-weight: 400;
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
                --tw-text-opacity: 1;
                color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
            }
      &.add_to_cart_button,
      &.product_type_bundle {
        &:after {
                    background-size: contain;
    
                }
        &:after {
                    background-repeat: no-repeat;
    
                }
        &:after {
                    --tw-content: '';
                    content: var(--tw-content);
    
                }
        &:after {
          background-image: url(//threedradio-dev.stagingvps.studioveld.com.au/wp-content/uploads/2025/10/bold-arrow-right-black.svg);
          width: 9px;
          height: 0.75rem;
          margin-left: 2.25rem;
        }
      }
    }
  }
}
/* Shop archive: 3 product columns between 768px and 1279px (issue #35).
 *
 * The grid held 4 columns from 1279px down to 768px, where the cards are far too cramped.
 * The element sets `columns` at only three breakpoints — base 4, mobile_landscape 2,
 * mobile_portrait 1 — and Bricks' max-width queries cascade downward, so the desktop 4
 * carried all the way to 768px.
 *
 * WHY THIS IS NOT A BUILDER SETTING, which is where responsive columns belong and where the
 * next person will look first: this install has only four Bricks breakpoints — desktop
 * (base), tablet_portrait (<=991), mobile_landscape (<=767), mobile_portrait (<=478).
 * Verified via \Bricks\Breakpoints::$breakpoints on 2026-08-03. There is NO breakpoint at
 * 1279, so no builder setting can express a boundary there: `columns:tablet_portrait` would
 * give 4-up down to 992 and 3-up only from 768-991. Setting `columns:tablet_landscape`
 * stores a value Bricks then ignores, generating no CSS at all — measured. Adding a 1279
 * breakpoint to Bricks would fix the boundary, but it is a global change that re-generates
 * every element's responsive CSS site-wide to settle one archive's column count.
 *
 * Both bounds are required. Bricks' own <=767 rule supplies the 2-up band, so an unbounded
 * max-width here would beat it and render 3-up on phones too.
 *
 * The pixel values are Bricks' breakpoints, not Tailwind's, because that 767 rule is what
 * this has to hand over to — writing it as a Tailwind screen would silently drift if the
 * Tailwind config ever moved.
 *
 * `#brx-content` is load-bearing, not decoration. Bricks compiles the element's own columns
 * into a per-post stylesheet as `#brxe-iyghpc .products`, specificity (1,1,0), and that file
 * is linked AFTER output.css — so a class-only selector loses on specificity and a matching
 * one loses on order. Anchoring on the Swup container makes this (1,3,1) and wins outright
 * without `!important`. It also avoids naming `#brxe-iyghpc`, a generated element id that
 * changes if the element is ever deleted and re-added; `#brx-content` is the one id on this
 * site that cannot move (see CLAUDE.md). */
@media (min-width: 768px) and (max-width: 1279px) {
  #brx-content .brxe-woocommerce-products ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}
.brxe-product-add-to-cart {
  form {
    select {
            width: -moz-fit-content;
            width: fit-content;
    
        }
  }
}
/* Product page images — a fixed square stage, nothing ever cropped.
   See IMAGE-SPECS.md #11.

   Every slide in the WooCommerce gallery (the main photo included) binds
   `woocommerce_single`, which WooCommerce registers as 800x0 — width only, UNCROPPED. So each
   slide used to render at whatever shape its own file happened to be, and FlexSlider sized the
   viewport from whichever slide was showing. Measured on one product: the stage opened at 306px
   and its slides were 306 / 544 / 544 / 544 / 174 / 578px tall, so the whole block jumped on
   every click. 8 of the 13 products with a gallery mix shapes today.

   A square stage plus `object-contain` fixes both halves: the height is constant, and a
   non-square upload is letterboxed rather than losing part of the product. */
.woocommerce-product-gallery {
  /* The one number to change if the stage should be bigger or smaller.
     744px is the width of the gallery column at a 1920px viewport, so the stage fills its
     column at every width up to 1920 and then holds. A cap is needed because the column lives in
     `.container-wide`, which is `100% - 96px` and therefore keeps growing — uncapped, a 2560px
     monitor would render a ~1100px square. */
  --rl-product-stage: 744px;
}
/* The stage itself. `.flex-viewport` exists once FlexSlider has initialised (a product with a
   gallery); `.woocommerce-product-gallery__image` is also given the square so a product with a
   single photo — where no viewport is created — gets the same treatment.

   `width: 100%` is what makes it fill the column rather than sitting at a fixed size with unused
   space beside it (measured before this: 200px unused at 1920px, 66px at 1600px). For a slide
   inside the slider, FlexSlider's own inline pixel width wins over this — but it derives that
   width from the viewport, which this rule sizes, so the slides follow. The 100% is what carries
   the single-photo case, where there is no viewport and no inline width.

   Both max-* take the same value on purpose: the stage is square, so they can never disagree. */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .woocommerce-product-gallery__image {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: var(--rl-product-stage);
  max-height: var(--rl-product-stage);
}
/* FlexSlider writes an inline pixel height onto the viewport, measured from the active slide —
   that inline value is the jump. `!important` is the only way past it; with it gone the square
   above is what decides the height, so the stage no longer depends on FlexSlider measuring
   correctly (or measuring before the images have loaded). */
.woocommerce-product-gallery .flex-viewport {
  height: auto !important;
}
/* The square is now a FIXED box, so anything inside it that is deliberately bigger has to be
   clipped. That is jquery-zoom's magnifier: it appends an `img.zoomImg`, absolutely positioned
   at the slide's top-left and sized to the full-resolution file (measured 1536x1920 inside a
   544x544 slide). With a gallery it happened to be clipped by `.flex-viewport`'s own
   `overflow: hidden`; a single-photo product has no viewport, so without this the magnifier
   would spill over the page on hover. */
.woocommerce-product-gallery .woocommerce-product-gallery__image {
  overflow: hidden;
}
/* Slides carry an inline pixel width from FlexSlider, so the square above resolves to a
   definite height — which is what lets the image below use `height: 100%`.

   `:not(.zoomImg)` matters: the magnifier overlay is an `img` inside the slide too, and it is
   sized by jquery-zoom's own inline width/height (it even sets `max-width: none` inline to
   escape stylesheet caps). Its width/height survive because inline wins, but `object-fit` is not
   set inline — so without this exclusion the overlay inherits `contain` and any magnification
   that is not the file's exact ratio would letterbox inside the zoom instead of filling it. */
.woocommerce-product-gallery .woocommerce-product-gallery__image > a,
.woocommerce-product-gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
  display: block;
  width: 100%;
  height: 100%;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
  /* `contain`, never `cover`: a product photo must not lose part of the garment. Bricks leaves
     `object-fit` unset, which computes to `fill` and distorts anything non-square in a fixed box.
     White to match the card the shop grid already sits products on. */
  -o-object-fit: contain;
     object-fit: contain;
  background-color: #fff;
}
/* ---------------------------------------------------------------------------
   Gallery thumbnails — a fixed 100px rail
   ---------------------------------------------------------------------------
   WooCommerce lays the thumbnails out as 25%-wide floats, so their size tracked the stage: in a
   544px column each one rendered at 121px from a `woocommerce_gallery_thumbnail` file that is
   only 100 x 100, i.e. upscaled and soft. A fixed 100px matches the file exactly.
   Flex with a gap rather than floats so the spacing no longer depends on percentage arithmetic. */
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  max-width: var(--rl-product-stage);
}
.woocommerce-product-gallery .flex-control-thumbs li {
  width: 100px;
  /* Responsive floor: on a narrow phone the rail can be under 100px, and a fixed width would
     push a thumbnail past the edge. */
  max-width: 100%;
  margin: 0;
  float: none;
  list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: #fff;
}
/* ---------------------------------------------------------------------------
   Bundle items ("Bundle includes…") — 100px thumbnail, column sized to it
   ---------------------------------------------------------------------------
   Each bundled item is a flex row: an image column then `.details`. The image column was 154px
   wide, again serving a 600 x 600 `woocommerce_thumbnail` file into it. Sized to 100px with the
   column set to `fit-content` so it takes exactly the thumbnail's width and hands the remaining
   width to the details beside it.

   NB `.bundled_product_image` also carries `.woocommerce-product-gallery__image`, but it is NOT
   inside a `.woocommerce-product-gallery`, so none of the square-stage rules above apply to it —
   these are its own. */
/* The long selector is deliberate. WooCommerce Product Bundles ships
   `.woocommerce-page div.product div.bundled_product_images { float:left; width:20% }`, which is
   specificity (0,3,2) — three classes, since `.product` counts. Anything equal to that loses on
   stylesheet order, because the bundles stylesheet is enqueued after output.css. So this needs a
   FOURTH class to win outright: `.bundled_product_summary` is added by the bundles plugin itself
   on the same element, so it costs nothing and does not depend on any markup of ours.
   Both `.bundled_product` and `.product` sit on that ONE element
   (`div.bundled_item_27.bundled_product.bundled_product_summary.product`) — hence the compound
   rather than a descendant chain between them, and note there is no outer `div.product` wrapper
   on this site at all, because the page is built in Bricks. */
.woocommerce div.bundled_product.bundled_product_summary div.bundled_product_images,
.woocommerce-page div.bundled_product.bundled_product_summary div.bundled_product_images {
  width: -moz-fit-content;
  width: fit-content;
  /* Their rule also floats the column; the row is `display: flex` here, so the float is inert —
     cleared anyway so the intent is not ambiguous to the next reader. */
  float: none;
  /* Stops the flex row stretching the column back out past its content. */
  flex: 0 0 auto;
  margin: 0;
}
.bundled_product .bundled_product_images .bundled_product_image {
  width: 100px;
  max-width: 100%;
  margin: 0;
  /* The bundle thumbnail is wrapped in `a.image.zoom`, so jquery-zoom can append an oversized
     magnifier here too — clip it to the 100px box. */
  overflow: hidden;
}
.bundled_product .bundled_product_images .bundled_product_image > a {
  display: block;
  width: 100%;
}
.bundled_product .bundled_product_images .bundled_product_image img:not(.zoomImg) {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: #fff;
}
/*
 * Line-item presentation shared by the cart table and the checkout order review.
 *
 * Both tables are rendered by plugin template overrides
 * (radio-logic/templates/cart/cart.php and .../checkout/review-order.php) which skip a
 * bundle's child cart items in their row loop and render them here instead, nested
 * inside the parent row.
 *
 * The indent plus the "Includes" label is the entire "this is a bundle" signal — there
 * is no card border on either page any more. The border was a second signal for the
 * same thing, and it fought with the nesting rather than reinforcing it.
 */
/* --------------------------------------------------- end of the item list */
/*
 * One dashed rule closes the item list, under the LAST product.
 *
 * It used to sit on `.bundle_table_item` (in radio-logic-child/style.css), i.e. under whichever
 * row happened to be a bundle. With a bundle first and a simple product second, that put the line
 * BETWEEN the two items and left the list ending on nothing — it was marking the presence of a
 * bundle rather than the end of the list, which is not what it reads as.
 *
 * `:not(:has(~ tr.cart_item))` is "the cart_item with no cart_item after it". `:last-of-type`
 * cannot express this: WooCommerce closes the tbody with an unclassed actions row (coupon field /
 * Update cart), so the last `tr` in the table is not the last item.
 *
 * `!important` is load-bearing, not decorative: WooCommerce Product Bundles ships
 * `.bundle_table_item, .bundle_table_item td { border-bottom: none !important }`, so when the last
 * item in the cart IS a bundle, only an `!important` of higher specificity can draw the line.
 * Applied to the row and its cells for the same reason the old rule did: whether a `tr` border
 * paints at all depends on the table's border-collapse mode.
 *
 * Both tables, because the old rule was unscoped and so drew on the checkout review table too —
 * removing it there and putting nothing back would have left that list ending on nothing. The
 * checkout totals live in the `tfoot`, so the last `.cart_item` really is the last row of its
 * `tbody`.
 */
.woocommerce-cart-form__contents tr.cart_item:not(:has(~ tr.cart_item)),
.woocommerce-cart-form__contents tr.cart_item:not(:has(~ tr.cart_item)) > td,
.rl-order tbody tr.cart_item:not(:has(~ tr.cart_item)),
.rl-order tbody tr.cart_item:not(:has(~ tr.cart_item)) > td {
  border-bottom: 1px dashed #000 !important;
}
/* ------------------------------------------------------- bundle manifest */
.rl-includes {
  margin-top: 12px;
  padding-left: 18px;
  border-left: 2px solid #ded5c0;
  font-family: "Barlow Condensed", system-ui, sans-serif;
}
.rl-includes__label {
  margin: 0 0 6px;
  color: #000;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}
.rl-includes__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Weight set explicitly: the cart's shop_table cells render at 700, so contents
   inherited bold there while the same list was regular on checkout. These are
   supporting detail on both pages — the parent product name carries the weight. */
.rl-includes__list li {
  margin: 0;
  padding: 2px 0;
  color: #3a352e;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}
/* ------------------------------------------- gift / add-on item meta */
/*
 * Scoped to both tables. Three things need correcting on each:
 *
 *  1. input.css sets `p { @apply font-condensed text-xl }` in the base layer, and
 *     WooCommerce wraps every add-on value in a <p> — so values rendered at 20px black
 *     under 13px labels. Inverted hierarchy, and louder than the product title.
 *  2. The theme puts a border-top on dl.variation, drawing a stray part-width rule
 *     under the product name.
 *  3. WooCommerce floats dt so the value can sit beside its label, but labels like
 *     "Gift recipient name:" are too long for these columns, so every pair wrapped
 *     anyway and the float only added clearance.
 */
.woocommerce-cart-form__contents .variation,
.rl-order .variation {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
.woocommerce-cart-form__contents .variation dt,
.rl-order .variation dt {
  float: none;
  margin: 0;
  color: #6b6459;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.woocommerce-cart-form__contents .variation dd,
.rl-order .variation dd {
  margin: 0 0 8px;
  color: #3a352e;
}
.woocommerce-cart-form__contents .variation dd:last-child,
.rl-order .variation dd:last-child {
  margin-bottom: 0;
}
.woocommerce-cart-form__contents .variation dd p,
.rl-order .variation dd p {
  margin: 0;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #3a352e;
}
/* Backorder counts (issue #32) — "3 of 5 on backorder" in place of WooCommerce's bare
   "Available on backorder".

   Two placements, two scales. On a cart row the notice describes the product named
   directly above it and can carry the row's own weight. Inside the Includes list it is a
   note on one line of supporting detail, and the shop_table cell renders its contents at
   700 (see the .rl-includes__list li note above), so without a reset it comes out heavier
   and larger than the bundled item name it belongs to. */
.woocommerce-cart-form__cart-item .product-name > .backorder_notification {
  margin: 4px 0 0;
  color: #322e2d;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.rl-includes__list .backorder_notification {
  margin: 1px 0 0;
  color: #322e2d;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
/* Checkout's order-review row. Its title runs at a smaller scale than the cart's, so the
   notice follows it down rather than reusing the cart row's 17px. */
.rl-order__body > .backorder_notification {
  margin: 8px 0 0;
  color: #322e2d;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
/*
 * "Your order" review panel — checkout.
 *
 * The H3 above this table was already Vina Sans; the table itself inherited nothing and
 * rendered entirely in -apple-system 16px. Everything here is about giving the panel the
 * site's own voice and restoring hierarchy: one dominant number (the total), a readable
 * item list, and bundled contents demoted to a manifest.
 *
 * Type scale: 13 / 16 / 20 / 30 / 36.
 * Structure comes from radio-logic/templates/checkout/review-order.php.
 */
/* ---------------------------------------------------------------- layout */
@media (min-width: 1024px) {
  /* No ancestor clips overflow, so sticky is safe here. 32px clears the fixed header. */
  .brxe-woocommerce-checkout-order-review {
    position: sticky;
    top: 32px;
    align-self: start;
  }
}
/* ------------------------------------------------------------ item rows */
.rl-order {
  font-family: "Barlow Condensed", system-ui, sans-serif;
}
/* Weights are set explicitly: WooCommerce's shop_table rules render both cells at 700,
   and hierarchy here should come from size and colour, not from bolding every line.

   width:100% makes this the flexible column: a table cell at 100% takes all the space
   the other cells don't need, so the price column shrinks to its own content (it is
   nowrap) and the product column absorbs the rest. */
.rl-order .product-name {
  width: 100%;
  padding: 14px 16px 14px 16px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  color: #000;
}
.rl-order .product-total {
  padding: 14px 16px 14px 8px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  color: #000;
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}
/* No extra inset on the bundle row. The card border is gone from both cart and
   checkout, and with no border to clear, 18px top/bottom only put the bundle on a
   different vertical rhythm to the items above and below it. */
/* -------------------------------------------------------------- item row */
/* Flex, so a wrapping title stays in its own column instead of running back
   under the thumbnail (inline-block let wrapped lines reset to x=0). */
.rl-order__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.rl-order__thumb {
  flex: none;
  width: 48px;
  height: 48px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.rl-order__body {
  min-width: 0;
  flex: 1 1 auto;
}
.rl-order__title {
  color: #000;
}
/* Prices align on the decimal instead of drifting per glyph width. */
.rl-order .product-total,
.rl-order tfoot td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Quantity is supporting information, not part of the product name. Its own line
   rather than trailing the title: inline, it lands beside short titles but gets
   orphaned onto a line of its own when the title wraps, so the position varied
   per product. A fixed line reads the same for every item. */
.rl-order .product-quantity {
  display: block;
  margin-top: 2px;
  color: #6b6459;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}
/* Gift / add-on meta and the bundle manifest are shared with the cart page —
   see custom/cart-checkout-items.css. */
/* ------------------------------------------------------------- totals */
/*
 * Shipping row escapes the table's column grid.
 *
 * tfoot shares columns with tbody, and .product-name sets column 1 to width:100% — so
 * the "Shipment" label inherited the wide column and the options were crammed into the
 * narrow price column. Column widths are table-wide, so no width on the th alone can
 * fix it. Making just this row a flex container detaches it: the label shrinks to its
 * own text and the options take everything else.
 */
.rl-order .woocommerce-shipping-totals {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.rl-order .woocommerce-shipping-totals th {
  flex: 0 0 auto;
  vertical-align: top;
  white-space: nowrap;
}
.rl-order .woocommerce-shipping-totals td {
  flex: 1 0 auto;
}
.rl-order tfoot th {
  padding: 10px 16px 10px 16px;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #3a352e;
  text-align: left;
}
/* nowrap so the totals column claims the width it needs. With .product-name at
   width:100%, column 2 is squeezed to its narrowest and "$455.00 (incl. tax)" broke
   across two lines; a table sizes a column to its widest unbreakable content, so this
   is what reserves the room. */
.rl-order tfoot td {
  padding: 10px 16px 10px 8px;
  font-size: 20px;
  color: #000;
  text-align: right;
  white-space: nowrap;
}
/* Except shipping — that row is flex (see above) and its labels are long prose. */
.rl-order .woocommerce-shipping-totals td {
  white-space: normal;
}
.rl-order tfoot tr:first-child th,
.rl-order tfoot tr:first-child td {
  border-top: 1.5px solid #000;
}
/* Shipping methods are a choice, not a value — stack them as a real list. */
.rl-order .woocommerce-shipping-totals td {
  text-align: left;
}
.rl-order #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rl-order #shipping_method li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  padding: 4px 0;
}
/* Native radios (even with accent-color) sit oddly against the condensed type and vary
   per platform. Drawn from scratch to match the branded inputs: 1.5px black ring, 4px
   token radius family, brand green fill. */
.rl-order #shipping_method input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1.5px solid #000;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.rl-order #shipping_method input[type="radio"]:checked {
  background-color: #20b169;
  box-shadow: inset 0 0 0 3px #f2ebda;
}
.rl-order #shipping_method input[type="radio"]:hover {
  box-shadow: inset 0 0 0 3px #f2ebda, 0 0 0 3px rgb(32 177 105 / 20%);
}
.rl-order #shipping_method input[type="radio"]:focus-visible {
  outline: 2px solid #20b169;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .rl-order #shipping_method input[type="radio"] {
    transition: none;
  }
}
.rl-order #shipping_method label {
  font-size: 16px;
  line-height: 1.3;
  color: #3a352e;
  cursor: pointer;
}
/* The one dominant number on the panel. */
.rl-order tfoot .order-total th,
.rl-order tfoot .order-total td {
  padding-top: 14px;
  border-top: 1.5px solid #000;
  font-family: "Vina Sans", system-ui, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  color: #000;
  text-transform: uppercase;
}
/* GST note rides under the total without competing with it. */
.rl-order tfoot .order-total small,
.rl-order tfoot .order-total .includes_tax {
  display: block;
  margin-top: 4px;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  color: #6b6459;
}
@media (max-width: 480px) {
  .rl-order tfoot .order-total th,
  .rl-order tfoot .order-total td {
    font-size: 30px;
  }
}
/*
 * Checkout form controls — brand parity with the text inputs.
 *
 * The branded field is the rule in input.css that matches
 * [type="text"], textarea, [type="password"], [type="email"], [type="tel"]:
 * transparent background, 1px black border, 4px radius, 40px tall, Barlow
 * Condensed 20px black, 9px/12px vertical padding and 9px on the left.
 * #billing_first_name is the reference rendering.
 *
 * The country/state fields are <select>s, so none of that reached them:
 * WooCommerce upgrades them to selectWoo (select2), which draws its own
 * white pill and a white results panel with a WP-admin-blue highlight.
 *
 * Everything is written against the same numbers as the branded input rather
 * than @apply-ing it, because the parts don't map one-to-one: the closed
 * control is a <span> whose text lives in a child, so the padding has to sit
 * on the child, and the open panel needs an opaque surface (sand) where the
 * field itself is transparent.
 *
 * Load order note: select2's own sheet is pulled in by Bricks as
 * `@import ... layer(bricks)`, and output.css is an unlayered <link>. Unlayered
 * rules beat layered ones outright, so none of this needs !important or a
 * specificity war — it wins on layer order alone.
 *
 * The select2 rules are deliberately unscoped: the results panel is appended
 * to <body>, not to the field, so no checkout ancestor can reach it. That is
 * harmless — WooCommerce only enqueues select2 on cart, checkout and account,
 * and the same treatment is wanted on all three.
 */
/* ---------------------------------------------------------------------------
 * Closed control
 * ------------------------------------------------------------------------ */
.select2-container--default .select2-selection--single {
  height: 40px;
  background-color: transparent;
  border: 1px solid #000;
  border-radius: 4px;
}
/*
 * The 17px line-height is the field's content box: 40px, less the 1px borders,
 * less the 9px/12px padding. Filling the content box with the line box centres
 * the glyphs exactly where a single-line <input> centres its own text, so the
 * country field sits on the same baseline as the city field beside it.
 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 9px 32px 12px 9px;
  color: #000;
  font-family: "Barlow Condensed";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #000;
}
/*
 * select2 draws its caret as a CSS-border triangle in #888. Swapped for the
 * brand chevron — the same path as bold-arrow-right-black.svg rotated a quarter
 * turn, inlined so the panel has no external dependency.
 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 1px;
  right: 9px;
  width: 14px;
  height: 38px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M12.91 1.62L6.97 7.27L1.33 1.33" stroke="black" stroke-width="3"/></svg>') no-repeat center;
  background-size: 14px 10px;
  transition: transform 0.15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
  transform: rotate(180deg);
}
.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: transparent;
  border-color: #c8bfa9;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
  color: #c8bfa9;
}
/* ---------------------------------------------------------------------------
 * Open panel
 * ------------------------------------------------------------------------ */
/*
 * Sand, not white: the panel overlays the page, so it can't be transparent like
 * the field, and white reads as unstyled against the sand background.
 */
.select2-dropdown {
  background-color: #f2ebda;
  color: #000;
  border: 1px solid #000;
  border-radius: 4px;
}
/* select2 joins the panel to the control while open by dropping the two
   touching corners; keep that, just at the brand radius. */
.select2-container--open .select2-dropdown--below {
  border-top: none;
}
.select2-container--open .select2-dropdown--above {
  border-bottom: none;
}
.select2-results__option {
  padding: 9px;
  color: #000;
  font-family: "Barlow Condensed";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
/* Default is the WP admin blue. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: #000;
  color: #f2ebda;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background-color: #ded5c0;
  color: #000;
}
.select2-container--default .select2-results__option[aria-disabled="true"] {
  color: #c8bfa9;
}
/* The panel's type-ahead box — a text field, so it gets the branded treatment.
   Its own height, since it sits inside the 4px panel padding rather than in a
   form row. */
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 6px 9px;
  background-color: transparent;
  border: 1px solid #000;
  border-radius: 4px;
  color: #000;
  font-family: "Barlow Condensed";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
/* ---------------------------------------------------------------------------
 * Native <select> — the no-JS / selectWoo-failed fallback
 *
 * Scoped to the checkout page so the shop's sorting dropdown and the variation
 * selects on product pages keep their own sizing.
 * ------------------------------------------------------------------------ */
.woocommerce-checkout select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  height: 40px;
  width: 100%;
  padding: 9px 32px 12px 9px;
  background-color: transparent;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M12.91 1.62L6.97 7.27L1.33 1.33" stroke="black" stroke-width="3"/></svg>');
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px 10px;
  border: 1px solid #000;
  border-radius: 4px;
  color: #000;
  font-family: "Barlow Condensed";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
}
/* ---------------------------------------------------------------------------
 * Checkboxes and radios
 *
 * "Create an account", "Ship to a different address", the shipping methods and
 * the payment methods all render as browser-default controls, which draw their
 * checked state in the UA accent (blue on most platforms).
 * ------------------------------------------------------------------------ */
.woocommerce-checkout [type="checkbox"],
.woocommerce-checkout [type="radio"] {
  accent-color: #000;
}
/*
 * Add-to-cart prompt — "added to your cart, go to cart?".
 *
 * Built in JS by radio-logic/assets/js/add-to-cart-prompt.js. Fixed to the bottom of
 * the viewport so it is visible regardless of where the archive button sat, and above
 * the fixed mobile nav bar (which sits at bottom-0).
 */
.rl-atc-prompt {
  position: fixed;
  z-index: 100000;
  right: 20px;
  bottom: 20px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 16px 18px;
  background: #322e2d;
  border: 1.5px solid #000;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 35%);
}
@media (max-width: 768px) {
  /* Clear the fixed bottom nav on mobile. */
  .rl-atc-prompt {
    right: 15px;
    left: 15px;
    bottom: 84px;
    max-width: none;
  }
}
.rl-atc-prompt__msg {
  margin: 0 0 12px;
  color: #f2ebda;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.2;
}
.rl-atc-prompt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.rl-atc-prompt__yes,
.rl-atc-prompt__no {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1.5px solid #000;
  border-radius: 4px;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
}
.rl-atc-prompt__yes {
  background: #a4cd39;
  color: #000;
}
.rl-atc-prompt__yes:hover,
.rl-atc-prompt__yes:focus-visible {
  background: #20b169;
  color: #fff;
}
.rl-atc-prompt__no {
  background: transparent;
  border-color: #f2ebda;
  color: #f2ebda;
}
.rl-atc-prompt__no:hover,
.rl-atc-prompt__no:focus-visible {
  background: #f2ebda;
  color: #000;
}
/*
 * Explicit close, top-right. Absolutely positioned so it does not push the message or the
 * actions around; the message reserves room for it on the right so long product names cannot
 * run underneath.
 *
 * Centred by flex, not by `text-align`. A button's UA default is `text-align: center`, so
 * this looked right in isolation — but Bricks' frontend normalize ships
 * `button, input, optgroup, select, textarea { font-family: inherit; text-align: inherit }`,
 * and an author-origin rule beats a UA default outright. With the theme loaded the glyph
 * inherited the prompt's start alignment and sat in the left third of the box, which only
 * became visible on hover once the sand background painted the box in. Flex also fixes the
 * vertical: `line-height: 1` on a 26px glyph in a 28px box left it sitting slightly high.
 */
.rl-atc-prompt__close {
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #f2ebda;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.rl-atc-prompt__close:hover,
.rl-atc-prompt__close:focus-visible {
  background: #f2ebda;
  color: #000;
}
.rl-atc-prompt__msg {
  padding-right: 26px;
}
/*
 * Error variant — the same prompt carrying a refused add (issue #43): out of stock, or a
 * gift subscription missing a field that is required when gifting.
 *
 * The palette has no error colour, so rather than inventing a brand one this uses a single
 * local accent on the leading edge and leaves the type in sand. One value to change if a
 * red is ever chosen properly.
 */
.rl-atc-prompt--error {
  border-left: 4px solid #e2564d;
}
/*
 * The body is WooCommerce's own notice markup (`wc_print_notices()`), which arrives as
 * `ul.woocommerce-error` carrying the theme's list styling, its own background, padding and
 * a `::before` icon. All of that is designed for a full-width notice at the top of a page,
 * not a 360px panel, so it is flattened back to plain text in the prompt's own voice.
 */
.rl-atc-prompt__notices .woocommerce-error,
.rl-atc-prompt__notices .woocommerce-message,
.rl-atc-prompt__notices .woocommerce-info {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  list-style: none;
}
.rl-atc-prompt__notices .woocommerce-error::before,
.rl-atc-prompt__notices .woocommerce-message::before,
.rl-atc-prompt__notices .woocommerce-info::before {
  content: none;
}
.rl-atc-prompt__notices li + li {
  margin-top: 6px;
}
/* A notice can carry its own call to action; keep it from looking like body copy. */
.rl-atc-prompt__notices a {
  color: #a4cd39;
}
/*
 * Image slots — stop Bricks images being stretched to the wrong shape.
 *
 * Why this file exists (issue #3, Tier 1.3):
 * Bricks emits `:where(.brxe-image) img { width:100%; height:100% }` for every image element.
 * It only emits an `object-fit` when the designer explicitly picked one in the builder. An
 * `<img>` sized 100%/100% with no object-fit uses the CSS default `fill`, so the moment its
 * wrapper gets a height it did not derive from the image — a fixed `_aspectRatio`, a set
 * height, or simply being a stretched flex item — the picture is squashed or stretched. That
 * is the "forced to wrong size" seen across the site.
 *
 * The fix is a zero-specificity default. `:where()` scores 0, so ANY explicit Bricks
 * object-fit (`.brxe-abc123 img { object-fit: contain }`) still wins, and builder settings
 * keep working. Where nothing is set we cover-crop and centre instead of distorting.
 *
 * Cover (not contain) is the default deliberately: it matches the locked archive-card tile
 * spec in IMAGE-SPECS.md, and a crop reads as a design choice where a stretch never does.
 */
:where(.brxe-image) img,
:where(.brxe-image) picture > img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
/*
 * Same guard for the raw markup our own templates emit (genre filter cards, schedule
 * blocks, radiothon dashboard) so a missing Tailwind utility can't distort either.
 */
:where(.rl-image-slot) img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
/*
 * Editor-facing slot placeholder (Radio_Logic_Image_Placeholder).
 *
 * Rendered in place of a missing or undersized upload. Logged-in editors get the labelled
 * version naming the exact size to upload; the public gets the neutral branded panel with
 * no text. Always fills its slot at the slot's own aspect ratio so the surrounding layout
 * is identical to a real image.
 */
.rl-img-placeholder {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: #e8e4dc;
  background-image: repeating-linear-gradient(
    135deg,
    rgb(0 0 0 / 0.035) 0 12px,
    transparent 12px 24px
  );
}
.rl-img-placeholder--labelled {
  outline: 2px dashed rgb(0 0 0 / 0.28);
  outline-offset: -8px;
}
.rl-img-placeholder__label {
    font-family: Barlow Condensed, system-ui;
    text-transform: uppercase;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px;
  text-align: center;
  line-height: 1.15;
  color: rgb(0 0 0 / 0.62);
    
}
.rl-img-placeholder__slot {
  font-size: clamp(11px, 1.1vw, 15px);
  letter-spacing: 0.06em;
}
.rl-img-placeholder__dims {
    font-family: Vina Sans, system-ui;
  font-size: clamp(15px, 2.2vw, 30px);
  letter-spacing: 0.02em;
  color: rgb(0 0 0 / 0.78);
    
}
.rl-img-placeholder__hint {
  font-size: clamp(10px, 0.9vw, 13px);
  letter-spacing: 0.04em;
  color: rgb(0 0 0 / 0.5);
}
/* Very small slots (thumbs, presenter squares) can't fit three lines of label. */
.rl-img-placeholder--sm .rl-img-placeholder__slot,
.rl-img-placeholder--sm .rl-img-placeholder__hint {
  display: none;
}
/*
 * Undersized real uploads: editors get a visible marker in place so a soft image is obvious
 * while browsing, without touching what the public sees. The class lands on the <img>
 * itself, so this has to be an outline — pseudo-elements don't render on replaced elements.
 * The required size is in the img's `title`, so hovering explains the marker.
 */
img.rl-img-undersized {
  outline: 2px dashed rgb(190 40 30 / 0.85);
  outline-offset: -3px;
}
/*
 * "Page-title size" heading, for content authored in either editor (issue #40).
 *
 * Fixing the duplicate-<h1> bug turns a heading that must stay visually large into an <h2>. Both
 * editors offer that as a style, and both emit the same class, so this is the one front-end rule
 * behind it:
 *
 *   classic editor -> Formats -> "Heading 2 (page-title size)"
 *   block editor   -> Heading block -> Styles -> "Page-title size"
 *
 * The declarations match the page title exactly: 60px Vina Sans, line-height 1, uppercase, black.
 * `text-heading-xl/none` carries both the size token and the line-height, so this stays in step
 * with the design tokens rather than restating pixel values.
 *
 * The second selector is not redundant. Content renders inside `.rich-textbox`, whose base rule
 * `.rich-textbox h2` pins content headings to 20px at specificity (0,1,1) — which beats a lone
 * class at (0,1,0) no matter what order they land in. `.rich-textbox h2.is-style-page-title` is
 * (0,2,1) and wins. The bare class covers headings rendered outside that wrapper.
 */
.is-style-page-title,
.rich-textbox h2.is-style-page-title {
    font-family: Vina Sans, system-ui;
    font-size: calc(var(--heading-xl, 60px) * 1);
    line-height: 1;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
}
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
    
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
    
}
/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
:root {
    --padding-section-lg: 122px;
  }
@media (max-width: 768px) {
    :root {
      --padding-section-lg: 56px;
      --padding-section-top-2xl: 56px;
      --padding-section-bottom-2xl: 56px;
      --heading-xl: 40px;
    }
  }
/* Reset base font size to ensure 1rem = 16px */
html {
    font-size: 16px !important;
  }
h3 {
    font-family: Vina Sans, system-ui;
    font-size: calc(var(--heading-xl, 60px) * 1);
    line-height: 1;
    text-transform: uppercase;
    --text-colour: #000;
    color: var(--text-colour);
    
}
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font-size: 1rem;
    
}
p {
    font-family: Barlow Condensed, system-ui;
    font-size: 1.25rem;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
}
main {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    
}
footer {
    margin-top: auto;
    
}
.woocommerce-notices-wrapper {
    display: none !important;
    
}
.rich-textbox {
    h1 {
        font-family: Vina Sans, system-ui;
    
    }
    h1 {
        font-size: 3.75rem;
        line-height: 1;
    
    }
    h1 {
        text-transform: uppercase;
    
    }
    h1 {
        line-height: 1;
    
    }
    h1 {
        --tw-text-opacity: 1;
        color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
    }
    h2 {
        padding-top: 23px;
    
    }
    h2 {
        padding-bottom: 7px;
    
    }
    h2 {
        font-family: Vina Sans, system-ui;
    
    }
    h2 {
        text-transform: uppercase;
    
    }
    h2 {
        --tw-text-opacity: 1;
        color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
    }
    h2 {
      color: var(--Black, #000);
      font-family: "Vina Sans";
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px; /* 100% */
      text-transform: uppercase;
    }

    p {
        padding-bottom: 20px;
    
    }

    p {
        font-family: barlow, system-ui;
    
    }

    p {
        font-size: 18px;
    
    }

    p {
        line-height: 1.33;
    
    }

    p {
        --tw-text-opacity: 1;
        color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
    }

    a {
        text-decoration-line: underline;
    
    }

    a:hover {
        text-decoration-line: none;
    
    }
  }
.container {
    width: 100%;
    
}
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    
    }
    
}
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    
    }
    
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    
    }
    
}
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    
    }
    
}
@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    
    }
    
}
.grid-system {
    display: grid;
    -moz-column-gap: 28px;
         column-gap: 28px;
    flex-shrink: 0;
    grid-template-rows: repeat(1, minmax(0, 1fr));
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-inline: 48px;
    
}
@media (max-width: 768px) {
    .grid-system {
        max-width: 100%;
        padding-inline: 15px;
    
    }
    
}
.container-narrow {
    width: 1112px;
    margin-left: auto;
    margin-right: auto;
    
}
@media (max-width: 1140px) {
    .container-narrow {
        width: 100%;
        padding-inline: 15px;
    
    }
    
}
.container-wide {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-inline: 48px;
    
}
@media (max-width: 1340px) {
    .container-wide {
        max-width: 100%;
        padding-inline: 15px;
    
    }
    
}
.container-wider {
    width: 100%;
    max-width: 1440px;
    
}
.container-full {
    width: 100%;
    max-width: 100%;
    
}
@media not all and (min-width: 768px) {
    main > section {
        overflow: hidden !important;
    
    }
    
}
.sub-menu-list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(30px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(30px * var(--tw-space-y-reverse));
    
}
.sub-menu-back {
    margin-bottom: 11px;
    
}
.sub-menu-title {
    line-height: 40px !important;
    
}
@media not all and (min-width: 768px) {
    .break-out {
        margin-left: -15px;
        width: 100dvw;
        max-width: 100dvw;
        padding-left: 15px;
        padding-right: 15px;
    
    }
    
}
[data-script-id="vkbyrq"] {
    display: flex;
    gap: 7.6px;
    [type="text"],
    textarea,
    [type="password"],
    [type="email"] {
        height: 32px;
    
    }
    @media (min-width: 768px) {
        .pro-forms-builder-field {
            width: 49% !important;
    
        }
    
    }
    @media (min-width: 768px) {
        .pro-forms-builder-field {
            padding: 0px !important;
    
        }
    
    }
    
}
/* tel covers the checkout's billing/shipping phone fields — see
     custom/checkout-fields.css for the selects on the same form.
     search covers the shows-archive search field (issue #36); it was missing from this list,
     which is the whole reason that field rendered unbranded. Added here rather than given its
     own copy of these declarations, so it cannot drift from the checkout fields. */
[type="text"],
  textarea,
  [type="password"],
  [type="email"],
  [type="tel"],
  [type="search"] {
    height: 40px;
    border-radius: 4px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    background-color: transparent;
    padding-top: 9px !important;
    padding-bottom: 12px !important;
    padding-left: 9px !important;
    color: var(--Black, #000);
    font-family: "Barlow Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 9.036px !important; /* 45.182% */
    &::-moz-placeholder {
      color: var(--Black, #000);
      font-family: "Barlow Condensed";
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 9.036px !important; /* 45.182% */
    }
    &::placeholder {
      color: var(--Black, #000);
      font-family: "Barlow Condensed";
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 9.036px !important; /* 45.182% */
    }
    
}
/* A search input is not just a text input with a different type: the browser dresses it up.
     `appearance: none` drops the platform chrome so the 40px branded box above is the box that
     renders, and the two -webkit pseudo-elements remove Chrome/Safari's own clear (×) and
     decoration — which would otherwise sit in the same right-hand corner as the magnifier and
     read as a second, live control. Firefox draws neither. */
[type="search"] {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;

    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      -webkit-appearance: none;
      appearance: none;
      display: none;
    }
  }
.woocommerce-billing-fields__field-wrapper > *:not(:last-child),
  .woocommerce-shipping-fields__field-wrapper > *:not(:last-child),
  .woocommerce-EditAccountForm > *:not(:last-child) {
    margin-bottom: 12px;
  }
.brxe-woocommerce-checkout-customer-details,
  .woocommerce-EditAccountForm {
    margin-bottom: 2rem;
    
}
#ship-to-different-address {
    font-family:
      Barlow Condensed,
      system-ui;
    font-size: 1.25rem;
    line-height: 1;
  }
.marquee-wrapper .marquee-text {
    display: flex;
    gap: 1.5rem;
    flex-shrink: 0;
    animation: marquee-animate 80s linear infinite;
    animation-delay: -40s;
    
}
.marquee-wrapper .marquee-text:nth-child(2) {
    display: flex;
    gap: 1.5rem;
    animation: marquee-animate-2 80s linear infinite;
    animation-delay: -88s;
    
}
.marquee-content {
    display: inline-block;
    white-space: nowrap;
  }
@keyframes marquee-animate {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
@keyframes marquee-animate-2 {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-200%);
    }
  }
/* Custom component styles can go here */
[data-time="00:00:00"] {
    border-style: none;
    
}
.splide-overflow .splide__track {
    overflow: visible;
    
}
.slide-w-tag,
  .programs-grid {
    .Card,
    .program-card {
        display: flex;
    
    }
    .Card,
    .program-card {
        flex-direction: column;
    
    }
    .Card,
    .program-card {
        border-radius: 4px;
    
    }
    .Card,
    .program-card {
        border-width: 1.5px;
    
    }
    .Card,
    .program-card {
        --tw-border-opacity: 1;
        border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
    }
    .Card:last-child,
    .program-card:last-child {
        padding-bottom: 0.75rem;
    
    }
    .Card>*:not(.divider):not(.brxe-image),
    .program-card>*:not(.divider):not(.brxe-image) {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    
    }
    .Card,
    .program-card {
      .divider {
            width: 100%;
    
        }
      .divider {
        .line {
                height: 6px;
    
            }
        .line {
                border-top-width: 6px;
    
            }
        .line {
                --tw-border-opacity: 1;
                border-top-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
            }
        .line {
          &.thinner {
                    height: 1.5px;
    
                }
          &.thinner {
                    border-top-width: 1.5px;
    
                }
        }
      }
      .card-title {
            padding-top: 7px;
    
        }
      .card-title {
            font-family: Vina Sans, system-ui;
    
        }
      .card-title {
            font-size: 22px;
            line-height: 1.13;
    
        }
      .card-title {
            text-transform: uppercase;
    
        }
      .card-title {
            --tw-text-opacity: 1;
            color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
        }
      .card-info {
            font-family: Barlow Condensed, system-ui;
    
        }
      .card-info {
            font-size: 1.25rem;
            line-height: 1.13;
    
        }
      .card-info {
            --tw-text-opacity: 1;
            color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
        }
      .card-info {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* Limit to 3 lines */
        overflow: hidden;
        text-overflow: ellipsis; /* Ensures ellipsis is shown if content overflows */
      }

      .divider {
            padding-top: 0.625rem;
            padding-bottom: 0.625rem;
    
        }
    }

    .tag-link {
        border-radius: 4px;
    
    }

    .tag-link {
        --tw-bg-opacity: 1;
        background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    
    }

    .tag-link {
        padding-left: 9px;
        padding-right: 9px;
    
    }

    .tag-link {
        padding-top: 7px;
        padding-bottom: 7px;
    
    }

    .tag-link {
        font-family: Barlow Condensed, system-ui;
    
    }

    .tag-link {
        font-size: 1rem;
        line-height: 1.5rem;
    
    }

    .tag-link {
        line-height: 0.56;
    
    }

    .tag-link {
        --tw-text-opacity: 1;
        color: rgb(242 235 218 / var(--tw-text-opacity, 1));
    
    }

    .tag-link:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    
    }

    .tag-link:hover {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    
    }
  }
/* Submit Button */
.submit-btn button,
  .checkout-button,
  [type="submit"],
  .lost_password a {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 4px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    background-color: transparent;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.625rem;
    padding-right: 0.75rem;
    font-family: Barlow Condensed, system-ui;
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    &:after {
        margin-left: 2.25rem;
    
    }
    &:after {
        display: inline-flex;
    
    }
    &:after {
        height: 0.75rem;
    
    }
    &:after {
        width: 9px;
    
    }
    &:after {
        background-size: contain;
    
    }
    &:after {
        background-repeat: no-repeat;
    
    }
    &:after {
        --tw-content: '';
        content: var(--tw-content);
    
    }
    &:after {
      background-image: url(//threedradio-dev.stagingvps.studioveld.com.au/wp-content/uploads/2025/10/bold-arrow-right-black.svg);
    }
    &:hover {
      border-color: transparent;
      --tw-bg-opacity: 1;
      background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    }
    
}
/*  .bricks-nav-menu .sub-menu {
    li {
      a {
        @apply font-primary text-7.5 leading-[20px] text-sand uppercase hover:text-brand-green;
      }
    }
 
  } */
.bricks-nav-menu .menu-item-has-children {
    &::after {
      content: "";
      position: absolute;
      left: -13px;
      right: -10px;
      bottom: -25px;
      height: 35px;
      width: 60px;
      background: transparent;
    }
  }
.bricks-nav-menu .sub-menu {
    top: 37px;
    flex-direction: column;
    gap: 18px;
    border-radius: 4px;
    --tw-bg-opacity: 1;
    background-color: rgb(50 46 45 / var(--tw-bg-opacity, 1));
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: 20px;
    left: -18.8px;
    li {
      a {
            font-family: Vina Sans, system-ui;
    
        }
      a {
            font-size: 30px;
    
        }
      a {
            text-transform: uppercase;
    
        }
      a {
            line-height: 20px;
    
        }
      a {
            --tw-text-opacity: 1;
            color: rgb(242 235 218 / var(--tw-text-opacity, 1));
    
        }
      a:hover {
            --tw-text-opacity: 1;
            color: rgb(32 177 105 / var(--tw-text-opacity, 1));
    
        }
    }
    
}
.schedule-grid {
    a {
      &:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    
        }
      &:hover {
            --tw-text-opacity: 1;
            color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    
        }
    }
  }
.primary-btn:hover:hover {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    
}
.tag-link {
    display: flex;
    height: 1.5rem;
    border-radius: 4px;
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    padding-left: 9px;
    padding-right: 9px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-family: Barlow Condensed, system-ui;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 0.56;
    --tw-text-opacity: 1;
    color: rgb(242 235 218 / var(--tw-text-opacity, 1));
    
}
.tag-link:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    
}
.reset_bundled_variations_fixed {
    display: none;
    
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    
}
.not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    
}
.pointer-events-none {
    pointer-events: none;
    
}
.visible {
    visibility: visible;
    
}
.invisible {
    visibility: hidden;
    
}
.collapse {
    visibility: collapse;
    
}
.static {
    position: static;
    
}
.fixed {
    position: fixed;
    
}
.absolute {
    position: absolute;
    
}
.relative {
    position: relative;
    
}
.sticky {
    position: sticky;
    
}
.-left-\[15px\] {
    left: -15px;
    
}
.-right-\[4\%\] {
    right: -4%;
    
}
.-top-\[17\%\] {
    top: -17%;
    
}
.bottom-0 {
    bottom: 0px;
    
}
.bottom-8 {
    bottom: 2rem;
    
}
.left-0 {
    left: 0px;
    
}
.left-1\/2 {
    left: 50%;
    
}
.left-\[15px\] {
    left: 15px;
    
}
.left-\[75px\] {
    left: 75px;
    
}
.right-0 {
    right: 0px;
    
}
.right-1\/2 {
    right: 50%;
    
}
.right-\[35\%\] {
    right: 35%;
    
}
.right-\[50\%\] {
    right: 50%;
    
}
.right-\[9px\] {
    right: 9px;
    
}
.top-0 {
    top: 0px;
    
}
.top-1\/2 {
    top: 50%;
    
}
.top-24 {
    top: 6rem;
    
}
.top-8 {
    top: 2rem;
    
}
.z-0 {
    z-index: 0;
    
}
.z-\[99999\] {
    z-index: 99999;
    
}
.col-\[1_\/_span_7\] {
    grid-column: 1 / span 7;
    
}
.col-\[2_\/_span_5\] {
    grid-column: 2 / span 5;
    
}
.col-\[3_\/_-1\] {
    grid-column: 3 / -1;
    
}
.col-\[4_\/_-1\] {
    grid-column: 4 / -1;
    
}
.col-\[6_\/_-1\] {
    grid-column: 6 / -1;
    
}
.col-\[8_\/_span_4\] {
    grid-column: 8 / span 4;
    
}
.col-\[8_\/_span_5\] {
    grid-column: 8 / span 5;
    
}
.col-span-1 {
    grid-column: span 1 / span 1;
    
}
.col-span-2 {
    grid-column: span 2 / span 2;
    
}
.col-span-3 {
    grid-column: span 3 / span 3;
    
}
.col-span-4 {
    grid-column: span 4 / span 4;
    
}
.col-span-5 {
    grid-column: span 5 / span 5;
    
}
.col-span-6 {
    grid-column: span 6 / span 6;
    
}
.col-span-full {
    grid-column: 1 / -1;
    
}
.\!mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
    
}
.mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
    
}
.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
    
}
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
    
}
.-ml-\[30px\] {
    margin-left: -30px;
    
}
.-ml-\[calc\(\(100vw-1340px\)\/2\)\] {
    margin-left: calc(calc((100vw - 1340px) / 2) * -1);
    
}
.-mr-\[50vw\] {
    margin-right: -50vw;
    
}
.-mr-\[calc\(\(100vw-100\%\)\/2\)\] {
    margin-right: calc(calc((100vw - 100%) / 2) * -1);
    
}
.mb-1 {
    margin-bottom: 0.25rem;
    
}
.mb-4 {
    margin-bottom: 1rem;
    
}
.mb-\[11px\] {
    margin-bottom: 11px;
    
}
.mb-\[64px\] {
    margin-bottom: 64px;
    
}
.mb-\[90px\] {
    margin-bottom: 90px;
    
}
.ml-auto {
    margin-left: auto;
    
}
.mr-0 {
    margin-right: 0px;
    
}
.mt-1 {
    margin-top: 0.25rem;
    
}
.mt-2\.5 {
    margin-top: 0.625rem;
    
}
.mt-4 {
    margin-top: 1rem;
    
}
.mt-8 {
    margin-top: 2rem;
    
}
.mt-\[148px\] {
    margin-top: 148px;
    
}
.mt-\[15px\] {
    margin-top: 15px;
    
}
.mt-\[39px\] {
    margin-top: 39px;
    
}
.mt-\[63px\] {
    margin-top: 63px;
    
}
.mt-\[90px\] {
    margin-top: 90px;
    
}
.mt-\[97px\] {
    margin-top: 97px;
    
}
.mt-\[98px\] {
    margin-top: 98px;
    
}
.mt-auto {
    margin-top: auto;
    
}
.\!block {
    display: block !important;
    
}
.block {
    display: block;
    
}
.inline-block {
    display: inline-block;
    
}
.inline {
    display: inline;
    
}
.flex {
    display: flex;
    
}
.inline-flex {
    display: inline-flex;
    
}
.table {
    display: table;
    
}
.grid {
    display: grid;
    
}
.contents {
    display: contents;
    
}
.hidden {
    display: none;
    
}
.aspect-\[315_\/_212\] {
    aspect-ratio: 315 / 212;
    
}
.aspect-\[868_\/_652\] {
    aspect-ratio: 868 / 652;
    
}
.aspect-auto {
    aspect-ratio: auto;
    
}
.aspect-square {
    aspect-ratio: 1 / 1;
    
}
.aspect-video {
    aspect-ratio: 16 / 9;
    
}
.h-6 {
    height: 1.5rem;
    
}
.h-8 {
    height: 2rem;
    
}
.h-\[1\.5px\] {
    height: 1.5px;
    
}
.h-\[14px\] {
    height: 14px;
    
}
.h-\[15\.8px\] {
    height: 15.8px;
    
}
.h-\[1px\] {
    height: 1px;
    
}
.h-\[20dvh\] {
    height: 20dvh;
    
}
.h-\[30dvh\] {
    height: 30dvh;
    
}
.h-\[310px\] {
    height: 310px;
    
}
.h-\[39px\] {
    height: 39px;
    
}
.h-\[408px\] {
    height: 408px;
    
}
.h-\[652px\] {
    height: 652px;
    
}
.h-\[80\%\] {
    height: 80%;
    
}
.h-\[95dvh\] {
    height: 95dvh;
    
}
.h-fit {
    height: -moz-fit-content;
    height: fit-content;
    
}
.h-full {
    height: 100%;
    
}
.max-h-\[255px\] {
    max-height: 255px;
    
}
.max-h-\[260px\] {
    max-height: 260px;
    
}
.max-h-\[32px\] {
    max-height: 32px;
    
}
.min-h-\[20dvh\] {
    min-height: 20dvh;
    
}
.min-h-\[355px\] {
    min-height: 355px;
    
}
.min-h-screen {
    min-height: 100vh;
    
}
.w-1\/2 {
    width: 50%;
    
}
.w-1\/3 {
    width: 33.333333%;
    
}
.w-3\/4 {
    width: 75%;
    
}
.w-4\/12 {
    width: 33.333333%;
    
}
.w-\[100dvw\] {
    width: 100dvw;
    
}
.w-\[1112px\] {
    width: 1112px;
    
}
.w-\[12\.9px\] {
    width: 12.9px;
    
}
.w-\[187px\] {
    width: 187px;
    
}
.w-\[235px\] {
    width: 235px;
    
}
.w-\[30\%\] {
    width: 30%;
    
}
.w-\[32\.5\%\] {
    width: 32.5%;
    
}
.w-\[60\%\] {
    width: 60%;
    
}
.w-\[67\.5\%\] {
    width: 67.5%;
    
}
.w-\[868px\] {
    width: 868px;
    
}
.w-\[calc\(100\%\+\(\(100vw-100\%\)\/2\)\)\] {
    width: calc(100% + ((100vw - 100%) / 2));
    
}
.w-\[calc\(100\%\+50vw\)\] {
    width: calc(100% + 50vw);
    
}
.w-\[calc\(50vw\+670px\)\] {
    width: calc(50vw + 670px);
    
}
.w-fit {
    width: -moz-fit-content;
    width: fit-content;
    
}
.w-full {
    width: 100%;
    
}
.w-screen {
    width: 100vw;
    
}
.min-w-\[315px\] {
    min-width: 315px;
    
}
.min-w-max {
    min-width: -moz-max-content;
    min-width: max-content;
    
}
.max-w-\[100px\] {
    max-width: 100px;
    
}
.max-w-\[1112px\] {
    max-width: 1112px;
    
}
.max-w-\[195px\] {
    max-width: 195px;
    
}
.max-w-\[315px\] {
    max-width: 315px;
    
}
.max-w-\[406px\] {
    max-width: 406px;
    
}
.max-w-\[60\%\] {
    max-width: 60%;
    
}
.max-w-\[80\%\] {
    max-width: 80%;
    
}
.max-w-\[868px\] {
    max-width: 868px;
    
}
.max-w-\[90\%\] {
    max-width: 90%;
    
}
.flex-1 {
    flex: 1 1 0%;
    
}
.flex-\[1_30\%\] {
    flex: 1 30%;
    
}
.flex-\[1_70\%\] {
    flex: 1 70%;
    
}
.shrink-0 {
    flex-shrink: 0;
    
}
.grow {
    flex-grow: 1;
    
}
.border-collapse {
    border-collapse: collapse;
    
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    
}
.-rotate-\[12deg\] {
    --tw-rotate: -12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    
}
.-rotate-\[20deg\] {
    --tw-rotate: -20deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    
    }
    
}
.animate-spin {
    animation: spin 1s linear infinite;
    
}
.cursor-default {
    cursor: default;
    
}
.cursor-not-allowed {
    cursor: not-allowed;
    
}
.cursor-pointer {
    cursor: pointer;
    
}
.cursor-wait {
    cursor: wait;
    
}
.resize {
    resize: both;
    
}
.appearance-none {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    
}
.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    
}
.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
    
}
.flex-row {
    flex-direction: row;
    
}
.flex-col {
    flex-direction: column;
    
}
.flex-wrap {
    flex-wrap: wrap;
    
}
.items-start {
    align-items: flex-start;
    
}
.items-end {
    align-items: flex-end;
    
}
.items-center {
    align-items: center;
    
}
.justify-start {
    justify-content: flex-start;
    
}
.justify-end {
    justify-content: flex-end;
    
}
.justify-center {
    justify-content: center;
    
}
.justify-between {
    justify-content: space-between;
    
}
.gap-1 {
    gap: 0.25rem;
    
}
.gap-11 {
    gap: 2.75rem;
    
}
.gap-2 {
    gap: 0.5rem;
    
}
.gap-2\.5 {
    gap: 0.625rem;
    
}
.gap-3 {
    gap: 0.75rem;
    
}
.gap-4 {
    gap: 1rem;
    
}
.gap-5 {
    gap: 1.25rem;
    
}
.gap-6 {
    gap: 1.5rem;
    
}
.gap-7 {
    gap: 1.75rem;
    
}
.gap-9 {
    gap: 2.25rem;
    
}
.gap-\[11px\] {
    gap: 11px;
    
}
.gap-\[14px\] {
    gap: 14px;
    
}
.gap-\[17px\] {
    gap: 17px;
    
}
.gap-\[18px\] {
    gap: 18px;
    
}
.gap-\[19px\] {
    gap: 19px;
    
}
.gap-\[27px\] {
    gap: 27px;
    
}
.gap-\[28px\] {
    gap: 28px;
    
}
.gap-\[29px\] {
    gap: 29px;
    
}
.gap-\[2px\] {
    gap: 2px;
    
}
.gap-\[32px\] {
    gap: 32px;
    
}
.gap-\[44px\] {
    gap: 44px;
    
}
.gap-\[48px\] {
    gap: 48px;
    
}
.gap-\[6px\] {
    gap: 6px;
    
}
.gap-\[82\.5px\] {
    gap: 82.5px;
    
}
.gap-\[8px\] {
    gap: 8px;
    
}
.gap-xs {
    gap: 10px;
    
}
.gap-x-\[28px\] {
    -moz-column-gap: 28px;
         column-gap: 28px;
    
}
.gap-y-\[11px\] {
    row-gap: 11px;
    
}
.space-x-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.625rem * var(--tw-space-x-reverse));
    margin-left: calc(0.625rem * calc(1 - var(--tw-space-x-reverse)));
    
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
    
}
.space-x-\[21px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(21px * var(--tw-space-x-reverse));
    margin-left: calc(21px * calc(1 - var(--tw-space-x-reverse)));
    
}
.space-x-\[9\.2px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(9.2px * var(--tw-space-x-reverse));
    margin-left: calc(9.2px * calc(1 - var(--tw-space-x-reverse)));
    
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
    
}
.space-y-\[21px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(21px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(21px * var(--tw-space-y-reverse));
    
}
.space-y-\[7px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(7px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(7px * var(--tw-space-y-reverse));
    
}
.self-center {
    align-self: center;
    
}
.overflow-auto {
    overflow: auto;
    
}
.overflow-hidden {
    overflow: hidden;
    
}
.overflow-visible {
    overflow: visible;
    
}
.whitespace-nowrap {
    white-space: nowrap;
    
}
.text-nowrap {
    text-wrap: nowrap;
    
}
.rounded {
    border-radius: 0.25rem;
    
}
.rounded-lg {
    border-radius: 0.5rem;
    
}
.rounded-xs {
    border-radius: 4px;
    
}
.rounded-b-xs {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    
}
.border {
    border-width: 1px;
    
}
.border-\[1\.5px\] {
    border-width: 1.5px;
    
}
.border-b {
    border-bottom-width: 1px;
    
}
.border-b-\[1\.5px\] {
    border-bottom-width: 1.5px;
    
}
.border-r-\[1\.5px\] {
    border-right-width: 1.5px;
    
}
.border-t {
    border-top-width: 1px;
    
}
.border-t-\[1\.5px\] {
    border-top-width: 1.5px;
    
}
.border-solid {
    border-style: solid;
    
}
.\!border-none {
    border-style: none !important;
    
}
.border-none {
    border-style: none;
    
}
.border-black {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
}
.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    
}
.border-sand {
    --tw-border-opacity: 1;
    border-color: rgb(242 235 218 / var(--tw-border-opacity, 1));
    
}
.border-transparent {
    border-color: transparent;
    
}
.border-b-black {
    --tw-border-opacity: 1;
    border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
}
.\!bg-black {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) !important;
    
}
.\!bg-brand-green {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1)) !important;
    
}
.\!bg-transparent {
    background-color: transparent !important;
    
}
.bg-\[\#DED5C0\] {
    --tw-bg-opacity: 1;
    background-color: rgb(222 213 192 / var(--tw-bg-opacity, 1));
    
}
.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    
}
.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
    
}
.bg-gray-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
    
}
.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    
}
.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    
}
.bg-nav-black {
    --tw-bg-opacity: 1;
    background-color: rgb(50 46 45 / var(--tw-bg-opacity, 1));
    
}
.bg-pink {
    --tw-bg-opacity: 1;
    background-color: rgb(255 105 180 / var(--tw-bg-opacity, 1));
    
}
.bg-red-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1));
    
}
.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
    
}
.bg-sand {
    --tw-bg-opacity: 1;
    background-color: rgb(242 235 218 / var(--tw-bg-opacity, 1));
    
}
.bg-sand-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(222 213 192 / var(--tw-bg-opacity, 1));
    
}
.bg-transparent {
    background-color: transparent;
    
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    
}
.bg-no-repeat {
    background-repeat: no-repeat;
    
}
.object-contain {
    -o-object-fit: contain;
       object-fit: contain;
    
}
.object-cover {
    -o-object-fit: cover;
       object-fit: cover;
    
}
.\!p-0 {
    padding: 0px !important;
    
}
.p-0 {
    padding: 0px;
    
}
.p-2 {
    padding: 0.5rem;
    
}
.p-3 {
    padding: 0.75rem;
    
}
.p-4 {
    padding: 1rem;
    
}
.px-0 {
    padding-left: 0px;
    padding-right: 0px;
    
}
.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
    
}
.px-7\.5 {
    padding-left: 30px;
    padding-right: 30px;
    
}
.px-\[10px\] {
    padding-left: 10px;
    padding-right: 10px;
    
}
.px-\[51px\] {
    padding-left: 51px;
    padding-right: 51px;
    
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    
}
.py-\[15px\] {
    padding-top: 15px;
    padding-bottom: 15px;
    
}
.py-\[38px\] {
    padding-top: 38px;
    padding-bottom: 38px;
    
}
.py-\[4\.5px\] {
    padding-top: 4.5px;
    padding-bottom: 4.5px;
    
}
.py-\[55px\] {
    padding-top: 55px;
    padding-bottom: 55px;
    
}
.py-\[5px\] {
    padding-top: 5px;
    padding-bottom: 5px;
    
}
.py-section-top-2xl {
    padding-top: calc(var(--padding-section-top-2xl, 104px) * 1);
    padding-bottom: calc(var(--padding-section-top-2xl, 104px) * 1);
    
}
.pb-2\.5 {
    padding-bottom: 0.625rem;
    
}
.pb-3 {
    padding-bottom: 0.75rem;
    
}
.pb-4 {
    padding-bottom: 1rem;
    
}
.pb-7 {
    padding-bottom: 1.75rem;
    
}
.pb-7\.5 {
    padding-bottom: 30px;
    
}
.pb-\[11px\] {
    padding-bottom: 11px;
    
}
.pb-\[12px\] {
    padding-bottom: 12px;
    
}
.pb-\[13px\] {
    padding-bottom: 13px;
    
}
.pb-\[15px\] {
    padding-bottom: 15px;
    
}
.pb-\[17px\] {
    padding-bottom: 17px;
    
}
.pb-\[18px\] {
    padding-bottom: 18px;
    
}
.pb-\[19px\] {
    padding-bottom: 19px;
    
}
.pb-\[27px\] {
    padding-bottom: 27px;
    
}
.pb-\[29px\] {
    padding-bottom: 29px;
    
}
.pb-\[33px\] {
    padding-bottom: 33px;
    
}
.pb-\[38px\] {
    padding-bottom: 38px;
    
}
.pb-\[39px\] {
    padding-bottom: 39px;
    
}
.pb-\[4px\] {
    padding-bottom: 4px;
    
}
.pb-\[59px\] {
    padding-bottom: 59px;
    
}
.pb-\[66px\] {
    padding-bottom: 66px;
    
}
.pb-\[6px\] {
    padding-bottom: 6px;
    
}
.pb-\[7\.8px\] {
    padding-bottom: 7.8px;
    
}
.pb-\[71px\] {
    padding-bottom: 71px;
    
}
.pb-\[85px\] {
    padding-bottom: 85px;
    
}
.pb-\[95px\] {
    padding-bottom: 95px;
    
}
.pb-section-2lg {
    padding-bottom: calc(var(--padding-section-lg) * 1);
    
}
.pb-section-top-2xl {
    padding-bottom: calc(var(--padding-section-top-2xl, 104px) * 1);
    
}
.pb-section-xl {
    padding-bottom: 95px;
    
}
.pl-2\.5 {
    padding-left: 0.625rem;
    
}
.pl-3\.5 {
    padding-left: 0.875rem;
    
}
.pl-\[12px\] {
    padding-left: 12px;
    
}
.pl-\[19px\] {
    padding-left: 19px;
    
}
.pl-\[242px\] {
    padding-left: 242px;
    
}
.pl-\[32px\] {
    padding-left: 32px;
    
}
.pl-\[60px\] {
    padding-left: 60px;
    
}
.pl-\[80px\] {
    padding-left: 80px;
    
}
.pr-3 {
    padding-right: 0.75rem;
    
}
.pr-3\.5 {
    padding-right: 0.875rem;
    
}
.pr-8 {
    padding-right: 2rem;
    
}
.pr-\[16px\] {
    padding-right: 16px;
    
}
.pr-\[26px\] {
    padding-right: 26px;
    
}
.pr-\[28px\] {
    padding-right: 28px;
    
}
.pr-\[29px\] {
    padding-right: 29px;
    
}
.pr-\[33px\] {
    padding-right: 33px;
    
}
.pr-\[57px\] {
    padding-right: 57px;
    
}
.pr-\[60px\] {
    padding-right: 60px;
    
}
.pr-\[6px\] {
    padding-right: 6px;
    
}
.pt-2\.5 {
    padding-top: 0.625rem;
    
}
.pt-4 {
    padding-top: 1rem;
    
}
.pt-\[15px\] {
    padding-top: 15px;
    
}
.pt-\[21px\] {
    padding-top: 21px;
    
}
.pt-\[27px\] {
    padding-top: 27px;
    
}
.pt-\[29px\] {
    padding-top: 29px;
    
}
.pt-\[33px\] {
    padding-top: 33px;
    
}
.pt-\[38px\] {
    padding-top: 38px;
    
}
.pt-\[39px\] {
    padding-top: 39px;
    
}
.pt-\[4\.15px\] {
    padding-top: 4.15px;
    
}
.pt-\[4px\] {
    padding-top: 4px;
    
}
.pt-\[55px\] {
    padding-top: 55px;
    
}
.pt-\[5px\] {
    padding-top: 5px;
    
}
.pt-\[64px\] {
    padding-top: 64px;
    
}
.pt-\[67px\] {
    padding-top: 67px;
    
}
.pt-\[6px\] {
    padding-top: 6px;
    
}
.pt-\[71px\] {
    padding-top: 71px;
    
}
.pt-\[9px\] {
    padding-top: 9px;
    
}
.pt-section-top-2xl {
    padding-top: calc(var(--padding-section-top-2xl, 104px) * 1);
    
}
.text-left {
    text-align: left;
    
}
.text-center {
    text-align: center;
    
}
.text-right {
    text-align: right;
    
}
.font-condensed {
    font-family: Barlow Condensed, system-ui;
    
}
.font-primary {
    font-family: Vina Sans, system-ui;
    
}
.font-secondary {
    font-family: Jockey One, system-ui;
    
}
.text-2xl {
    font-size: 90px;
    
}
.text-6xl\/none {
    font-size: 3.75rem;
    line-height: 1;
    
}
.text-7\.5 {
    font-size: 30px;
    
}
.text-7\.5\/none {
    font-size: 30px;
    line-height: 1;
    
}
.text-\[20px\] {
    font-size: 20px;
    
}
.text-\[22px\] {
    font-size: 22px;
    
}
.text-\[22px\]\/none {
    font-size: 22px;
    line-height: 1;
    
}
.text-\[30px\] {
    font-size: 30px;
    
}
.text-\[30px\]\/none {
    font-size: 30px;
    line-height: 1;
    
}
.text-\[40px\] {
    font-size: 40px;
    
}
.text-\[60px\] {
    font-size: 60px;
    
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
    
}
.text-base\/none {
    font-size: 1rem;
    line-height: 1;
    
}
.text-heading-xl {
    font-size: calc(var(--heading-xl, 60px) * 1);
    
}
.text-heading-xl\/none {
    font-size: calc(var(--heading-xl, 60px) * 1);
    line-height: 1;
    
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
    
}
.text-xl\/none {
    font-size: 1.25rem;
    line-height: 1;
    
}
.text-xl\/normal {
    font-size: 1.25rem;
    line-height: 1.13;
    
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
    
}
.font-bold {
    font-weight: 700;
    
}
.font-medium {
    font-weight: 500;
    
}
.font-normal {
    font-weight: 400;
    
}
.uppercase {
    text-transform: uppercase;
    
}
.lowercase {
    text-transform: lowercase;
    
}
.leading-\[0\.77\] {
    line-height: 0.77;
    
}
.leading-\[1\.68\] {
    line-height: 1.68;
    
}
.leading-\[10px\] {
    line-height: 10px;
    
}
.leading-\[20px\] {
    line-height: 20px;
    
}
.leading-\[23px\] {
    line-height: 23px;
    
}
.leading-\[29px\] {
    line-height: 29px;
    
}
.leading-\[2\] {
    line-height: 2;
    
}
.leading-\[9px\] {
    line-height: 9px;
    
}
.leading-base {
    line-height: 1.13rem;
    
}
.leading-none {
    line-height: 1;
    
}
.leading-normal {
    line-height: 1.13;
    
}
.leading-tight {
    line-height: 1.25;
    
}
.\!text-black {
    --tw-text-opacity: 1 !important;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
    
}
.\!text-white {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    
}
.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
}
.text-brand-green-light {
    --tw-text-opacity: 1;
    color: rgb(164 205 57 / var(--tw-text-opacity, 1));
    
}
.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    
}
.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
    
}
.text-sand {
    --tw-text-opacity: 1;
    color: rgb(242 235 218 / var(--tw-text-opacity, 1));
    
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    
}
.underline {
    text-decoration-line: underline;
    
}
.opacity-50 {
    opacity: 0.5;
    
}
.opacity-75 {
    opacity: 0.75;
    
}
.opacity-90 {
    opacity: 0.9;
    
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    
}
.outline {
    outline-style: solid;
    
}
.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    
}
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    
}
.content-\[\'\'\] {
    --tw-content: '';
    content: var(--tw-content);
    
}
/*
   * `.h1-style` reads as the page heading without being one (issue #40).
   *
   * The hero slider renders one heading element per slide, so only the first can be the page's
   * <h1>; the rest are h2 and pick this up from Radio_Logic_Heading_Levels. Sharing the selector
   * rather than restating the values means the slides cannot drift from the real h1 — change this
   * rule and both follow.
   */
h1,
  .h1-style {
    font-family: Vina Sans, system-ui;
    font-size: 90px;
    line-height:  0.777;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(242 235 218 / var(--tw-text-opacity, 1));
    
}
/* Curved text */
.animate-spin {
    animation: spin 10s linear infinite;
  }
.link-arrow {
    position: relative;
    &::after {
        margin-left: 2.25rem;
    
    }
    &::after {
        display: inline-flex;
    
    }
    &::after {
        height: 0.75rem;
    
    }
    &::after {
        width: 9px;
    
    }
    &::after {
        background-size: contain;
    
    }
    &::after {
        background-repeat: no-repeat;
    
    }
    &::after {
        --tw-content: '';
        content: var(--tw-content);
    
    }
    &::after {
      background-image: url(//threedradio-dev.stagingvps.studioveld.com.au/wp-content/uploads/2025/10/bold-arrow-right.svg);
    }
    
}
.link-arrow-black {
    position: relative;
    &::after {
        margin-left: 2.25rem;
    
    }
    &::after {
        display: inline-flex;
    
    }
    &::after {
        height: 0.75rem;
    
    }
    &::after {
        width: 9px;
    
    }
    &::after {
        background-size: contain;
    
    }
    &::after {
        background-repeat: no-repeat;
    
    }
    &::after {
        --tw-content: '';
        content: var(--tw-content);
    
    }
    &::after {
      background-image: url(//threedradio-dev.stagingvps.studioveld.com.au/wp-content/uploads/2025/10/bold-arrow-right-black.svg);
    }
    
}
/* Mask */
.mask-union {
    -webkit-mask-image: url(//threedradio-dev.stagingvps.studioveld.com.au/wp-content/uploads/2025/10/Union-mask-1.svg);
    mask-image: url(//threedradio-dev.stagingvps.studioveld.com.au/wp-content/uploads/2025/10/Union-mask-1.svg);
  }
/* Hero slider */
.hero-slider-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    /* pagination number */
    .pagination-dot {
        display: flex;
    
    }
    .pagination-dot {
        height: 34px;
    
    }
    .pagination-dot {
        width: 25px;
    
    }
    .pagination-dot {
        align-items: center;
    
    }
    .pagination-dot {
        justify-content: center;
    
    }
    .pagination-dot {
        border-radius: 4px;
    
    }
    .pagination-dot {
        border-width: 1px;
    
    }
    .pagination-dot {
        --tw-border-opacity: 1;
        border-color: rgb(242 235 218 / var(--tw-border-opacity, 1));
    
    }
    .pagination-dot {
        font-family: Vina Sans, system-ui;
    
    }
    .pagination-dot {
        font-size: 16.8px;
    
    }
    .pagination-dot {
        line-height: 1;
    
    }
    .pagination-dot {
        --tw-text-opacity: 1;
        color: rgb(242 235 218 / var(--tw-text-opacity, 1));
    
    }
    .pagination-dot {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    
    }
    .pagination-dot {
      &.active {
            --tw-bg-opacity: 1;
            background-color: rgb(242 235 218 / var(--tw-bg-opacity, 1));
    
        }
      &.active {
            --tw-text-opacity: 1;
            color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
        }
    }
    
}
/* Line on top */
.line-on-top {
    &:before {
        margin-bottom: 0.25rem;
    
    }
    &:before {
      content: "";
      display: block;
      width: 100%;
      height: 6px;
      background: black;
    }
  }
.ranking-number {
    height: 67px;
    width: 82px;
    border-radius: 4px;
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    
}
.underline-hyperlink {
    font-family: Barlow Condensed, system-ui;
    font-size: 1.25rem;
    line-height: 1.13;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    text-decoration-line: underline;
    
}
.brxe-slider-nested .splide__slide {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    
}
.card-grid {
    display: grid;
    gap: 26px;
    &[data-columns="4"] {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    
    }
    @media (min-width: 768px) {
        &[data-columns="4"] {
            grid-template-columns: repeat(3, minmax(0, 1fr));
    
        }
    
    }
    @media (min-width: 1024px) {
        &[data-columns="4"] {
            grid-template-columns: repeat(4, minmax(0, 1fr));
    
        }
    
    }
    @media (min-width: 1536px) {
        &[data-columns="4"] {
            grid-template-columns: repeat(4, minmax(0, 1fr));
    
        }
    
    }
    
}
#footer-list {
  a:hover {
    span {
            --tw-text-opacity: 1;
            color: rgb(32 177 105 / var(--tw-text-opacity, 1));
    
        }
  }
}
.brxe-woocommerce-products.brxe-woocommerce-products {
  .add_to_cart_button,
  .button.product_type_variable.product_type_bundle {
    transition: all 0.3s ease;
  }
  .add_to_cart_button:hover,
  .button.product_type_variable.product_type_bundle:hover {
        --tw-border-opacity: 1 !important;
        border-color: rgb(32 177 105 / var(--tw-border-opacity, 1)) !important;
    
    }
  .add_to_cart_button:hover,
  .button.product_type_variable.product_type_bundle:hover {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1)) !important;
    
    }
  .add_to_cart_button:hover,
  .button.product_type_variable.product_type_bundle:hover {
        --tw-text-opacity: 1 !important;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    
    }
}
.Card .tag {
    width: 100%;
    
}
.before\:pr-\[5px\]::before {
    content: var(--tw-content);
    padding-right: 5px;
    
}
.before\:content-\[\'\'\]::before {
    --tw-content: '';
    content: var(--tw-content);
    
}
.before\:content-\[\'\[\'\]::before {
    --tw-content: '[';
    content: var(--tw-content);
    
}
.after\:pl-\[5px\]::after {
    content: var(--tw-content);
    padding-left: 5px;
    
}
.after\:content-\[\'\]\'\]::after {
    --tw-content: ']';
    content: var(--tw-content);
    
}
.hover\:\!border-transparent:hover {
    border-color: transparent !important;
    
}
.hover\:border-gray-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
    
}
.hover\:border-transparent:hover {
    border-color: transparent;
    
}
.hover\:\!bg-brand-green:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1)) !important;
    
}
.hover\:bg-blue-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
    
}
.hover\:bg-brand-green:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    
}
.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
    
}
.hover\:\!text-white:hover {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    
}
.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    
}
.focus\:border-indigo-500:focus {
    --tw-border-opacity: 1;
    border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
    
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    
}
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    
}
.focus\:ring-indigo-200:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity, 1));
    
}
.group:hover .group-hover\:flex {
    display: flex;
    
}
.has-\[\:has\(h3\)\]\:mt-\[39px\]:has(:has(h3)) {
    margin-top: 39px;
    
}
.group:has(h3) .group-has-\[h3\]\:mt-\[39px\] {
    margin-top: 39px;
    
}
@media not all and (min-width: 1280px) {
    .max-xl\:max-w-\[60\%\] {
        max-width: 60%;
    
    }
    
}
@media not all and (min-width: 1024px) {
    .max-lg\:order-2 {
        order: 2;
    
    }
    .max-lg\:col-span-full {
        grid-column: 1 / -1;
    
    }
    .max-lg\:-mt-\[20px\] {
        margin-top: -20px;
    
    }
    .max-lg\:h-1\/2 {
        height: 50%;
    
    }
    .max-lg\:max-w-full {
        max-width: 100%;
    
    }
    .max-lg\:flex-col {
        flex-direction: column;
    
    }
    
}
@media not all and (min-width: 768px) {
    .max-md\:fixed {
        position: fixed;
    
    }
    .max-md\:bottom-0 {
        bottom: 0px;
    
    }
    .max-md\:\!mx-0 {
        margin-left: 0px !important;
        margin-right: 0px !important;
    
    }
    .max-md\:flex {
        display: flex;
    
    }
    .max-md\:hidden {
        display: none;
    
    }
    .max-md\:w-full {
        width: 100%;
    
    }
    .max-md\:w-screen {
        width: 100vw;
    
    }
    .max-md\:flex-\[0_\/_46\%\] {
        flex: 0 / 46%;
    
    }
    .max-md\:flex-\[0_calc\(50\%-1rem\)\] {
        flex: 0 calc(50% - 1rem);
    
    }
    .max-md\:flex-col {
        flex-direction: column;
    
    }
    .max-md\:\!flex-col-reverse {
        flex-direction: column-reverse !important;
    
    }
    .max-md\:flex-wrap {
        flex-wrap: wrap;
    
    }
    .max-md\:justify-between {
        justify-content: space-between;
    
    }
    .max-md\:gap-10 {
        gap: 2.5rem;
    
    }
    .max-md\:gap-6 {
        gap: 1.5rem;
    
    }
    .max-md\:gap-\[45px\] {
        gap: 45px;
    
    }
    .max-md\:gap-\[56px\] {
        gap: 56px;
    
    }
    .max-md\:gap-y-6 {
        row-gap: 1.5rem;
    
    }
    .max-md\:gap-y-\[45px\] {
        row-gap: 45px;
    
    }
    .max-md\:px-\[15px\] {
        padding-left: 15px;
        padding-right: 15px;
    
    }
    .max-md\:pb-0 {
        padding-bottom: 0px;
    
    }
    .max-md\:pb-5 {
        padding-bottom: 1.25rem;
    
    }
    .max-md\:pb-\[15px\] {
        padding-bottom: 15px;
    
    }
    .max-md\:pb-section-2lg {
        padding-bottom: calc(var(--padding-section-lg) * 1);
    
    }
    .max-md\:pt-\[35\%\] {
        padding-top: 35%;
    
    }
    .max-md\:pt-\[65\%\] {
        padding-top: 65%;
    
    }
    .max-md\:text-\[40px\] {
        font-size: 40px;
    
    }
    
}
@media (min-width: 768px) {
    .md\:col-\[1_\/_span_7\] {
        grid-column: 1 / span 7;
    
    }
    .md\:col-\[3_\/_-1\] {
        grid-column: 3 / -1;
    
    }
    .md\:col-\[4_\/_-1\] {
        grid-column: 4 / -1;
    
    }
    .md\:col-\[6_\/_-1\] {
        grid-column: 6 / -1;
    
    }
    .md\:col-\[8_\/_span_4\] {
        grid-column: 8 / span 4;
    
    }
    .md\:col-span-3 {
        grid-column: span 3 / span 3;
    
    }
    .md\:col-span-4 {
        grid-column: span 4 / span 4;
    
    }
    .md\:col-span-5 {
        grid-column: span 5 / span 5;
    
    }
    .md\:my-\[77px\] {
        margin-top: 77px;
        margin-bottom: 77px;
    
    }
    .md\:-ml-\[30px\] {
        margin-left: -30px;
    
    }
    .md\:-ml-\[50px\] {
        margin-left: -50px;
    
    }
    .md\:inline-block {
        display: inline-block;
    
    }
    .md\:flex {
        display: flex;
    
    }
    .md\:grid {
        display: grid;
    
    }
    .md\:hidden {
        display: none;
    
    }
    .md\:size-\[266px\] {
        width: 266px;
        height: 266px;
    
    }
    .md\:h-\[300px\] {
        height: 300px;
    
    }
    .md\:h-\[408px\] {
        height: 408px;
    
    }
    .md\:h-\[495px\] {
        height: 495px;
    
    }
    .md\:w-1\/5 {
        width: 20%;
    
    }
    .md\:w-4\/5 {
        width: 80%;
    
    }
    .md\:w-\[144px\] {
        width: 144px;
    
    }
    .md\:w-fit {
        width: -moz-fit-content;
        width: fit-content;
    
    }
    .md\:max-w-\[235px\] {
        max-width: 235px;
    
    }
    .md\:max-w-\[406px\] {
        max-width: 406px;
    
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    
    }
    .md\:flex-row {
        flex-direction: row;
    
    }
    .md\:gap-24 {
        gap: 6rem;
    
    }
    .md\:gap-huge-gap {
        gap: 104px;
    
    }
    .md\:self-center {
        align-self: center;
    
    }
    .md\:overflow-visible {
        overflow: visible;
    
    }
    .md\:border-r-\[1\.5px\] {
        border-right-width: 1.5px;
    
    }
    .md\:border-t-\[1\.5px\] {
        border-top-width: 1.5px;
    
    }
    .md\:border-t-black {
        --tw-border-opacity: 1;
        border-top-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
    }
    .md\:pb-\[38px\] {
        padding-bottom: 38px;
    
    }
    .md\:pb-\[41px\] {
        padding-bottom: 41px;
    
    }
    .md\:pb-\[59px\] {
        padding-bottom: 59px;
    
    }
    .md\:pb-\[66px\] {
        padding-bottom: 66px;
    
    }
    .md\:pb-\[85px\] {
        padding-bottom: 85px;
    
    }
    .md\:pl-\[32px\] {
        padding-left: 32px;
    
    }
    .md\:pl-\[60px\] {
        padding-left: 60px;
    
    }
    .md\:pt-\[64px\] {
        padding-top: 64px;
    
    }
    .group:hover .md\:group-hover\:block {
        display: block;
    
    }
    .group:hover .md\:group-hover\:flex {
        display: flex;
    
    }
    
}
@media (min-width: 1024px) {
    .lg\:absolute {
        position: absolute;
    
    }
    .lg\:col-\[1_\/_span_4\] {
        grid-column: 1 / span 4;
    
    }
    .lg\:col-\[6_\/_-1\] {
        grid-column: 6 / -1;
    
    }
    .lg\:col-\[8_\/_-1\] {
        grid-column: 8 / -1;
    
    }
    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    
    }
    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    
    }
    .lg\:mt-\[148px\] {
        margin-top: 148px;
    
    }
    .lg\:h-\[652px\] {
        height: 652px;
    
    }
    .lg\:w-\[868px\] {
        width: 868px;
    
    }
    .lg\:min-w-\[200px\] {
        min-width: 200px;
    
    }
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    
    }
    .lg\:flex-row {
        flex-direction: row;
    
    }
    
}
@media (min-width: 1280px) {
    .xl\:aspect-\[868_\/_652\] {
        aspect-ratio: 868 / 652;
    
    }
    .xl\:max-w-full {
        max-width: 100%;
    
    }
    
}
@media (min-width: 1536px) {
    .\32xl\:max-w-full {
        max-width: 100%;
    
    }
    .\32xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    
    }
    
}
.\[\&\.card-title\]\:\!pb-\[13px\].card-title {
    padding-bottom: 13px !important;
    
}
.\[\&\.card-title\]\:\!pt-\[10px\].card-title {
    padding-top: 10px !important;
    
}
.\[\&\>\.item\:first-child\]\:underline>.item:first-child {
    text-decoration-line: underline;
    
}
.\[\&\>\.item\:not\(\:first-child\)\]\:pointer-events-none>.item:not(:first-child) {
    pointer-events: none;
    
}
.\[\&\>a\.item\[href\=\"\"\]\]\:pointer-events-none>a.item[href=""] {
    pointer-events: none;
    
}
.\[\&\>a\.item\[href\]\:not\(\[href\=\"\"\]\)\]\:pointer-events-none>a.item[href]:not([href=""]) {
    pointer-events: none;
    
}
.\[\&\>a\.item\[href\]\:not\(\[href\=\"\"\]\)\]\:underline>a.item[href]:not([href=""]) {
    text-decoration-line: underline;
    
}
.\[\&\>a\.item\]\:underline>a.item {
    text-decoration-line: underline;
    
}
.\[\&_\.bricks-nav-menu\]\:space-x-4 .bricks-nav-menu > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
    
}
.\[\&_\.brx-open\]\:\!text-black .brx-open {
    --tw-text-opacity: 1 !important;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
    
}
.\[\&_\.brx-open\]\:text-black .brx-open {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
}
.\[\&_\.brx-open\]\:underline .brx-open {
    text-decoration-line: underline;
    
}
.\[\&_\.brx-open\]\:underline-offset-\[10px\] .brx-open {
    text-underline-offset: 10px;
    
}
.\[\&_\.brx-open_\&_\.brxe-text-basic\]\:underline .brx-open .\[\&_\.brx-open_\&_\.brxe-text-basic\]\:underline .brxe-text-basic {
    text-decoration-line: underline;
    
}
.\[\&_\.brx-open_\.brxe-text-basic\]\:\!text-black .brx-open .brxe-text-basic {
    --tw-text-opacity: 1 !important;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
    
}
.\[\&_\.brxe-text-basic\]\:text-sand .brxe-text-basic {
    --tw-text-opacity: 1;
    color: rgb(242 235 218 / var(--tw-text-opacity, 1));
    
}
.\[\&_\.brxe-text-basic\]\:text-sand-disabled .brxe-text-basic {
    --tw-text-opacity: 1;
    color: rgb(200 191 169 / var(--tw-text-opacity, 1));
    
}
.\[\&_\.brxe-woocommerce-checkout-customer-details\]\:space-y-2 .brxe-woocommerce-checkout-customer-details > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    
}
.\[\&_\.button\:hover\]\:border-transparent .button:hover {
    border-color: transparent;
    
}
.\[\&_\.button\:hover\]\:bg-brand-green .button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(32 177 105 / var(--tw-bg-opacity, 1));
    
}
.\[\&_\.button\]\:rounded-xs .button {
    border-radius: 4px;
    
}
.\[\&_\.button\]\:border-\[1\.5px\] .button {
    border-width: 1.5px;
    
}
.\[\&_\.button\]\:border-solid .button {
    border-style: solid;
    
}
.\[\&_\.button\]\:border-\[1\.5px_solid_\#000\] .button {
    border-color: 1.5px solid #000;
    
}
.\[\&_\.button\]\:border-\[1\.5px_solid_black\] .button {
    border-color: 1.5px solid black;
    
}
.\[\&_\.button\]\:border-black .button {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    
}
.\[\&_\.button\]\:px-2\.5 .button {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    
}
.\[\&_\.button\]\:py-\[4px\] .button {
    padding-top: 4px;
    padding-bottom: 4px;
    
}
.\[\&_\.button\]\:font-condensed .button {
    font-family: Barlow Condensed, system-ui;
    
}
.\[\&_\.button\]\:text-\[20px\] .button {
    font-size: 20px;
    
}
.\[\&_\.button\]\:text-black .button {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    
}
.\[\&_\.button\]\:text-sand .button {
    --tw-text-opacity: 1;
    color: rgb(242 235 218 / var(--tw-text-opacity, 1));
    
}
.\[\&_\.button\]\:hover\:border-transparent:hover .button {
    border-color: transparent;
    
}
.\[\&_\.card-title\]\:\!pb-\[13px\] .card-title {
    padding-bottom: 13px !important;
    
}
.\[\&_\.card-title\]\:\!pt-\[10px\] .card-title {
    padding-top: 10px !important;
    
}
.\[\&_\.card-title\]\:\!text-\[20px\]\/none .card-title {
    font-size: 20px !important;
    line-height: 1 !important;
    
}
.\[\&_\.divider\]\:p-0 .divider {
    padding: 0px;
    
}
.\[\&_\.divider\]\:\!py-0 .divider {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    
}
.\[\&_\.item_title\]\:font-primary .item title {
    font-family: Vina Sans, system-ui;
    
}
.\[\&_\.item_title\]\:text-xl .item title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    
}
.\[\&_\.item_title\]\:text-xl\/normal .item title {
    font-size: 1.25rem;
    line-height: 1.13;
    
}
.\[\&_\.item_title\]\:uppercase .item title {
    text-transform: uppercase;
    
}
@media not all and (min-width: 768px) {
    .\[\&_\.line-on-top\]\:max-md\:text-\[24px\] .line-on-top {
        font-size: 24px;
    
    }
    
}
.\[\&_\.page-numbers\]\:sr-only .page-numbers {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    
}
.\[\&_\.page-numbers\]\:hidden .page-numbers {
    display: none;
    
}
.\[\&_\.price\]\:inline-flex .price {
    display: inline-flex;
    
}
.\[\&_\.price\]\:items-end .price {
    align-items: flex-end;
    
}
.\[\&_\.price\]\:gap-2 .price {
    gap: 0.5rem;
    
}
.\[\&_\.reset_bundled_variations_fixed\]\:hidden .reset bundled variations fixed {
    display: none;
    
}
.\[\&_\.splide__slide\]\:block .splide slide {
    display: block;
    
}
.\[\&_\.splide__track\]\:overflow-visible .splide track {
    overflow: visible;
    
}
.\[\&_\.sub-menu__a\]\:text-7\.5 .sub-menu a {
    font-size: 30px;
    
}
.\[\&_\.wc-filter-button-group\]\:flex .wc-filter-button-group {
    display: flex;
    
}
.\[\&_\.wc-filter-button-group\]\:gap-4 .wc-filter-button-group {
    gap: 1rem;
    
}
@media not all and (min-width: 768px) {
    .max-md\:\[\&_\.wc-filter-button-group\]\:flex .wc-filter-button-group {
        display: flex;
    
    }
    .max-md\:\[\&_\.wc-filter-button-group\]\:gap-4 .wc-filter-button-group {
        gap: 1rem;
    
    }
    
}
.\[\&_\.woocommerce-billing-fields__field-wrapper\]\:space-x-2 .woocommerce-billing-fields field-wrapper > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
    
}
.\[\&_\.woocommerce-billing-fields__field-wrapper\]\:space-y-2 .woocommerce-billing-fields field-wrapper > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    
}
.hover\:\[\&_a\]\:text-brand-green a:hover {
    --tw-text-opacity: 1;
    color: rgb(32 177 105 / var(--tw-text-opacity, 1));
    
}
.\[\&_i\]\:hidden i {
    display: none;
    
}
.\[\&_img\]\:size-full img {
    width: 100%;
    height: 100%;
    
}
.\[\&_img\]\:h-full img {
    height: 100%;
    
}
@media (min-width: 1024px) {
    .lg\:\[\&_img\]\:w-full img {
        width: 100%;
    
    }
    
}
.\[\&_input\]\:px-\[7px\] input {
    padding-left: 7px;
    padding-right: 7px;
    
}
.\[\&_input\]\:py-\[9px\] input {
    padding-top: 9px;
    padding-bottom: 9px;
    
}
.\[\&_input\]\:font-condensed input {
    font-family: Barlow Condensed, system-ui;
    
}
.\[\&_input\]\:text-xl input {
    font-size: 1.25rem;
    line-height: 1.75rem;
    
}
.\[\&_li\:hover\]\:text-brand-green li:hover {
    --tw-text-opacity: 1;
    color: rgb(32 177 105 / var(--tw-text-opacity, 1));
    
}
.\[\&_li\:hover\]\:text-red-500 li:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
    
}
.\[\&_li\]\:hidden li {
    display: none;
    
}
@media (min-width: 1024px) {
    .lg\:\[\&_picture\]\:w-full picture {
        width: 100%;
    
    }
    
}
.\[\&_span\]\:sr-only span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    
}
.\[\&_video\]\:h-full video {
    height: 100%;
    
}