/* 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));
    
        }

    }
    .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;
        }
      }
    }
  }
}
.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;
}
/*
 * "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.
 */
.rl-atc-prompt__close {
  position: absolute;
  top: 6px;
  right: 8px;
  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;
}
/*
 * 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;
}
*, ::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. */
[type="text"],
  textarea,
  [type="password"],
  [type="email"],
  [type="tel"] {
    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% */
    }
    
}
.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%;
    
}
.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 {
    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%;
    
}