/* Coo-ee Soft Drinks responsive + mobile menu */
html {
    scroll-behavior: smooth;
}

#talk,
#ourstory,
#our-story,
#products,
#whatsnew,
#whatsnew_bg,
#competitions_bg,
#slider {
    scroll-margin-top: 72px;
}

.cooee-story-anchor {
    display: block;
    height: 0;
    overflow: hidden;
    scroll-margin-top: 72px;
}

#slider {
    position: relative;
    margin: 0;
}

#slider #out-of-the-box-demo a,
#slider .sy-slides-wrap a[href^="#slide"] {
    pointer-events: none;
    cursor: default;
}

/* Keep every hero slide the same height (new banners are 1024×561). */
#slider .sy-box {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}

#slider .sy-slides-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 561;
    height: auto !important;
    margin: 0;
}

/* Overlay dots so they don't leave a gap under the hero */
#slider .sy-pager {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 5;
    width: 100%;
    margin: 0 !important;
    clear: none;
}

#slider .sy-filler {
    display: none !important;
}

#slider .sy-slides-crop,
#slider .sy-list {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#slider .sy-slide,
#slider .sy-slide > a {
    width: 100%;
    height: 100%;
}

#slider .sy-slide img,
#slider .sy-slide > a > img,
#slider img {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    display: block;
}

body.cooee-home .cooee-home-story-banners,
.cooee-home-story-banners {
    display: block;
    float: none !important;
    clear: both;
    width: 100% !important;
    max-width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

.cooee-home-story-banners .cooee-home-story-banner {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    object-fit: cover;
}

#cooee-slicknav {
    clear: both;
}

#cooee-slicknav .slicknav_menu {
    display: none;
}

.webhouse_logo {
    display: none !important;
}

.nav_bg1,
.nav_bg2 {
    height: auto !important;
}

#logo1 a img,
#logo2 a img {
    position: relative;
    bottom: 0 !important;
    display: block;
    width: auto !important;
    max-width: 108px !important;
    max-height: 48px !important;
    height: auto !important;
}

/* Primary navigation — Ropa Sans, dark links, red on hover only */
#nav a.level1,
#nav2 a.level1,
#logo-scroll a.level1,
#nav_background a.level1,
#nav_background .DefaultNavigationMenu a {
    font-family: 'Ropa Sans', sans-serif !important;
    color: #151515 !important;
    text-decoration: none;
}

#nav a.level1:hover,
#nav2 a.level1:hover,
#logo-scroll a.level1:hover,
#nav_background a.level1:hover,
#nav_background .DefaultNavigationMenu a:hover {
    color: red !important;
}

#nav a.level1.selected,
#nav2 a.level1.selected,
#logo-scroll a.level1.selected,
#nav_background a.level1.selected,
#nav_background .current-menu-item > a.level1,
#nav_background .current_page_item > a.level1 {
    color: #151515 !important;
}

/* Homepage navigation — nav_bg1 over hero, nav_bg2 fixed on scroll (desktop only) */
@media (min-width: 992px) {
    .nav_bg1 #nav1_holder.container,
    .nav_bg2 #nav1_holder.container,
    .nav_bg2 #nav2_holder.container,
    #nav1_holder.container.twelve.columns,
    #nav2_holder.container.twelve.columns,
    #main_container.container,
    #main_container.sixteen.columns,
    #nav_background.sixteen.columns {
        width: 1400px;
        max-width: calc(100% - 48px);
    }

    #nav1_holder,
    #nav2_holder {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 64px;
        box-sizing: border-box;
        min-height: 0;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    #nav1_holder > #logo1,
    #nav1_holder > #logo2,
    #nav1_holder > #nav,
    #nav2_holder > #logo2,
    #nav2_holder > #nav2 {
        float: none !important;
        margin: 0 !important;
        width: auto !important;
        flex: 0 0 auto;
    }

    #nav1_holder > #nav,
    #nav2_holder > #nav2 {
        margin-left: auto !important;
        text-align: right;
    }

    #nav1_holder #nav .DefaultNavigationMenu,
    #nav1_holder #nav ul.level1,
    #nav2_holder #nav2 .DefaultNavigationMenu,
    #nav2_holder #nav2 ul.level1 {
        width: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 28px;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }

    #nav1_holder #nav ul.level1 > li,
    #nav2_holder #nav2 ul.level1 > li {
        display: block !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
    }

    #nav1_holder #nav ul.level1 > li > a,
    #nav2_holder #nav2 ul.level1 > li > a {
        display: block;
        width: auto !important;
        white-space: nowrap;
        line-height: 1.2;
        padding-top: 0;
        padding-bottom: 0;
    }

    body.cooee-home .nav_bg1 {
        position: relative;
        z-index: 10000;
        background: none !important;
        background-image: none !important;
        text-align: center;
    }

    body.cooee-home .nav_bg2#logo-scroll {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto !important;
        z-index: 10001;
        background: #fff !important;
        background-image: none !important;
        text-align: center;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    }

    body.cooee-home #slider {
        position: relative;
        z-index: 1;
    }

    body.cooee-home #nav .level1 > li > a:before,
    body.cooee-home #nav2 .level1 > li > a:before {
        display: none !important;
        content: none !important;
    }

    /* Hero slider pagination bullets */
    body.cooee-home #slider .sy-pager {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 47px;
        top: auto;
        z-index: 1000;
        text-align: right;
        max-width: 960px;
        width: 100%;
        margin: 0 !important;
        padding-right: 15px;
        box-sizing: border-box;
    }

    body.cooee-home #slider .sy-pager li a {
        background-color: rgba(255, 255, 255, 0.45) !important;
    }

    body.cooee-home #slider .sy-pager li.sy-active a {
        background-color: #fff !important;
    }
}

@media (max-width: 992px) {
    body.cooee-home .nav_bg1,
    body.cooee-home .nav_bg2#logo-scroll {
        background: none !important;
        background-image: none !important;
        background-color: transparent;
    }
}

@media (max-width: 991px) {
    body.cooee-home #slider {
        margin: 0;
    }

    body.cooee-home .nav_bg1,
    body.cooee-home .nav_bg2#logo-scroll {
        display: none !important;
    }

    #nav_background #nav1 .DefaultNavigationMenu {
        display: none !important;
    }

    html,
    body {
        margin: 0;
        padding: 0;
        background: #fff;
    }

    #cooee-slicknav {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #83121f;
    }

    #cooee-slicknav .slicknav_menu {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background: #83121f !important;
        border: 0;
        font-size: 16px;
    }

    #cooee-slicknav .slicknav_btn {
        width: 100%;
        margin: 0 !important;
        padding: 14px 16px !important;
        box-sizing: border-box;
        text-align: left;
        background-color: #00528e !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-shadow: none;
        height: auto;
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #cooee-slicknav .slicknav_menutxt {
        color: #fff;
        font-weight: 700;
        text-shadow: none;
        float: none;
        display: block;
        line-height: 1.2;
    }

    #cooee-slicknav .slicknav_icon {
        float: none;
        margin: 0 0 0 12px;
    }

    #cooee-slicknav .slicknav_icon-bar {
        background-color: #fff !important;
        box-shadow: none;
    }

    #cooee-slicknav .slicknav_nav {
        background: #fff;
        border-top: 1px solid #3d0002;
        margin: 0;
        padding: 0;
    }

    #cooee-slicknav .slicknav_nav li {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        clear: both;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    #cooee-slicknav .slicknav_nav .slicknav_item,
    #cooee-slicknav .slicknav_nav a {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 12px 16px;
        box-sizing: border-box;
        border-radius: 0;
        color: #333;
        font-weight: 600;
        text-align: center;
        text-shadow: none;
    }

    #cooee-slicknav .slicknav_nav .slicknav_item a {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    #cooee-slicknav .slicknav_nav a:hover,
    #cooee-slicknav .slicknav_nav a.selected,
    #cooee-slicknav .slicknav_nav .slicknav_item:hover {
        color: #fff;
        background: #00528e;
        border-radius: 0;
    }

    body.cooee-home header {
        position: static !important;
        top: auto !important;
        width: auto !important;
        margin: 0;
        padding: 0 15px;
        background: #fff !important;
    }

    #nav {
        display: block !important;
    }

    .header-nav-menu {
        display: none !important;
    }

    .header-logo,
    .header-logo a {
        width: 100%;
        text-align: center;
    }

    .header-logo {
        padding: 12px 0;
    }

    .header-logo a {
        display: inline-block;
    }

    .header-logo img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 175px;
        height: auto;
    }

    #banner #blank {
        display: none;
    }

    #banner #logo,
    #banner #nav2 {
        width: 100%;
        float: none;
        text-align: center;
    }

    .ContentPageContent img,
    .ResponsiveGalleryHolder img,
    .galleryholder img,
    .gallerytotalsrow img,
    .gallerytotalrow img,
    #galleryholder img {
        max-width: 100%;
        height: auto;
    }

    .banner-box img,
    #logo img {
        max-width: 100%;
        height: auto;
    }
}

@media (min-width: 992px) {
    #cooee-slicknav {
        display: none;
    }
}

/* Products section — green band, original bottle slider + hovers */
body.cooee-products-page,
body.cooee-products-page #cooee-slicknav,
body.cooee-products-page .slicknav_menu {
    background: rgb(108, 194, 74) !important;
}

body.cooee-products-page .nav_bg1 {
    background: #fff !important;
    background-image: none !important;
}

/* All inner pages: white nav bar (homepage keeps blue / transparent over hero) */
body.cooee-inner .nav_bg1,
body.cooee-inner .nav_bg2 {
    background: #fff !important;
    background-image: none !important;
}

body.cooee-home #products_bg,
#products_bg {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden;
    background: rgb(108, 194, 74) !important;
    background-image: none !important;
}

#products_bg #products_holder,
#products_bg #products_header,
#products_bg .cooee-product-hover,
#products_bg > .container {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    clear: both;
}

body.cooee-home #products_header,
#products_bg #products_header {
    color: #fff !important;
    font-family: "Fredoka", "Open Sans", Arial, sans-serif !important;
    font-weight: 700 !important;
    text-align: center;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}

.cooee-product-hover,
.cooee-product-hover__name,
.cooee-product-hover__meta {
    font-family: "Fredoka", "Open Sans", Arial, sans-serif !important;
    color: #026ca8 !important;
}

.cooee-product-hover {
    box-sizing: border-box;
    clear: both;
    display: block;
    height: 108px;
    margin: 0 auto 8px;
    padding: 10px 24px 0;
    text-align: center;
}

.cooee-product-hover__name {
    box-sizing: border-box;
    font-size: 34px;
    font-weight: 700;
    height: 48px;
    letter-spacing: 0.04em;
    line-height: 48px;
    overflow: hidden;
    text-transform: uppercase;
}

.cooee-product-hover__meta {
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    opacity: 0.95;
    overflow: hidden;
}

#products_bg .thumb-box2,
#products_bg .thumbs2,
#products_bg .thumbs2 li,
#products_bg .button,
#products_bg #thumbnails2 {
    display: none !important;
}

/* JIVE-style products: 6 bottles per slide, fly from the ends into the center */
.cooee-jive-slider {
    position: relative;
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 6px 72px 36px;
    box-sizing: border-box;
    overflow: hidden;
}

.cooee-jive-slider__viewport {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    padding-bottom: 28px;
    box-sizing: border-box;
}

.cooee-jive-slider__page {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 28px;
    padding-bottom: 28px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 0;
}

.cooee-jive-slider__page.is-active {
    display: flex;
    pointer-events: auto;
    z-index: 1;
}

.cooee-jive-slider__page.is-leaving {
    display: flex;
    pointer-events: none;
    z-index: 0;
}

.cooee-jive-slider__item,
.cooee-jive-slider__item.three.columns {
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition-delay: var(--jive-delay, 0ms);
    will-change: transform, opacity;
}

.cooee-jive-slider__item > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.cooee-jive-slider__item--left.is-from-end {
    transform: translateX(-50%);
    opacity: 0;
}

.cooee-jive-slider__item--right.is-from-end {
    transform: translateX(50%);
    opacity: 0;
}

.cooee-jive-slider__item.is-in {
    transform: translateX(0);
    opacity: 1;
}

.cooee-jive-slider__item.is-leaving,
.cooee-jive-slider__page.is-leaving .cooee-jive-slider__item {
    opacity: 0;
    transition-duration: 0.3s;
    transition-delay: 0ms;
}

#products_bg .cooee-jive-slider .view-fifth.bottle-box,
#products_bg .cooee-jive-slider .view-fifth,
.cooee-jive-slider .view-fifth.bottle-box,
.cooee-jive-slider #cooee_prod .view-fifth,
.cooee-jive-slider .view-fifth {
    height: auto !important;
    width: auto !important;
    min-height: 0;
    overflow: visible !important;
}

#products_bg .cooee-jive-slider .view-fifth > img.img-fluid,
.cooee-jive-slider .view-fifth > img.img-fluid {
    display: block;
    width: auto !important;
    max-width: none !important;
    height: 540px !important;
    max-height: none !important;
    filter: drop-shadow(0 16px 10px rgba(0, 0, 0, 0.28));
}

.cooee-jive-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 48px;
    height: 72px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cooee-jive-slider__arrow svg {
    width: 36px;
    height: 52px;
    display: block;
}

.cooee-jive-slider__arrow--prev {
    left: 18px;
}

.cooee-jive-slider__arrow--next {
    right: 18px;
}

.cooee-jive-slider__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.cooee-jive-slider__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.cooee-jive-slider__dot.is-active {
    background: #fff;
}

@media (max-width: 1100px) {
    .cooee-jive-slider__viewport {
        min-height: 450px;
    }

    .cooee-jive-slider__page {
        gap: 16px;
    }

    #products_bg .cooee-jive-slider .view-fifth > img.img-fluid,
    .cooee-jive-slider .view-fifth > img.img-fluid {
        height: 400px !important;
    }
}

@media (max-width: 767px) {
    .cooee-jive-slider {
        padding: 8px 36px 36px;
    }

    .cooee-jive-slider__viewport {
        min-height: 310px;
    }

    .cooee-jive-slider__page {
        gap: 8px;
    }

    #products_bg .cooee-jive-slider .view-fifth > img.img-fluid,
    .cooee-jive-slider .view-fifth > img.img-fluid {
        height: 240px !important;
    }

    .cooee-jive-slider__arrow svg {
        width: 28px;
        height: 40px;
    }
}

/* Product bottle hover overlays */
#products_bg .view-fifth.bottle-box,
#products_bg #cooee_prod .view-fifth,
#products_bg #island_fusion .view-fifth,
#products_bg #sugar_free .view-fifth {
    position: relative;
    overflow: hidden;
    height: 243px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#products_bg .view-fifth.bottle-box > img.img-fluid,
#products_bg #cooee_prod .view-fifth > img.img-fluid,
#products_bg #island_fusion .view-fifth > img.img-fluid,
#products_bg #sugar_free .view-fifth > img.img-fluid {
    display: block;
    margin: 0 auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
}

#products_bg #cooee_prod [id^="block_row"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
}

#products_bg #cooee_prod [id^="block_row"] .three.columns {
    float: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 0 0 25%;
    max-width: 25%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* If JS is delayed/cached, don't dump every bottle into a wrapping grid. */
#products_bg .cooee-managed-bottles #block_row1 > .three.columns:nth-child(n+7) {
    display: none;
}

#products_bg .cooee-jive-slider .view-fifth .mask.bottle-detail,
#products_bg .cooee-jive-slider .view-fifth:hover .mask.bottle-detail,
.cooee-jive-slider .view-fifth .mask.bottle-detail,
.cooee-jive-slider .view-fifth:hover .mask.bottle-detail {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    border: 0 !important;
}

#products_bg .cooee-jive-slider .view-fifth img,
#products_bg .cooee-jive-slider .view-fifth:hover img,
.cooee-jive-slider .view-fifth img,
.cooee-jive-slider .view-fifth:hover img {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

#products_bg .view-fifth .mask.bottle-detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block !important;
    margin: 0 !important;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    transform: translateX(-105%);
    transition: transform 0.3s ease-in-out;
    z-index: 2;
    background: #fff !important;
    overflow: hidden;
}

#products_bg .view-fifth:hover .mask.bottle-detail {
    transform: translateX(0);
    background: #fff !important;
    border: 1px solid #ef1a33 !important;
}

#products_bg .view-fifth .detail-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

#products_bg .view.view-fifth .detail-box h2 {
    background: #ee1b2c !important;
    color: #fff !important;
    box-shadow: none !important;
    font-family: "Ropa Sans", sans-serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 8px 5px !important;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    box-sizing: border-box;
}

#products_bg .view-fifth .available-size {
    flex: 1;
    padding: 8px 10px 12px;
}

#products_bg .view-fifth .available-size h3 {
    font-size: 21px !important;
    color: #ef1a33 !important;
    font-family: "Ropa Sans", sans-serif !important;
    font-weight: 400 !important;
    margin: 0;
    padding: 12px;
    text-align: left;
}

#products_bg .view-fifth .available-size p,
#products_bg .view-fifth:hover .available-size p {
    opacity: 1 !important;
    filter: none !important;
    -ms-filter: none !important;
    visibility: visible !important;
    color: #0b7fbb !important;
    font-size: 18px !important;
    font-family: "Ropa Sans", sans-serif !important;
    font-weight: 400 !important;
    margin: 0;
    padding: 0 0 12px;
    display: block;
    position: relative;
    padding-left: 30px;
    padding-bottom: 0;
    text-align: left;
}

#products_bg .bottle-size {
    padding: 0;
}

#products_bg .view-fifth .available-size p::before {
    position: absolute;
    content: "";
    left: 14px;
    top: 8px;
    height: 6px;
    width: 6px;
    background: #0b7fbb;
    border-radius: 50%;
}

/* Keep new-flavours page layout separate from product masks */
.new-flavours-box .bottle-detail {
    display: table;
}

/* What's New & Competitions */
#whatsnew_bg {
    float: none !important;
    clear: both;
    width: 100% !important;
    margin: 0 !important;
    background: rgb(255, 117, 0) !important;
    background-image: none !important;
    padding-bottom: 40px;
    box-sizing: border-box;
}

#competitions_bg,
.cooee-competitions-bg {
    float: none !important;
    clear: both;
    width: 100% !important;
    margin: 0 !important;
    background: #fff !important;
    background-image: none !important;
    padding-bottom: 48px;
    box-sizing: border-box;
}

#whatsnew_bg .container,
#competitions_bg .container,
.cooee-competitions-bg .container,
#whatsnew_bg .cooee-whatsnew-heading,
#whatsnew_bg #holder.cooee-whatsnew-heading,
#competitions_bg .cooee-whatsnew-heading,
.cooee-competitions-bg .cooee-whatsnew-heading,
#whatsnew_bg .cooee-news-grid,
#competitions_bg .cooee-news-grid,
.cooee-competitions-bg .cooee-news-grid {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

#whatsnew_bg .cooee-whatsnew-heading,
#whatsnew_bg #holder.cooee-whatsnew-heading,
#competitions_bg .cooee-whatsnew-heading,
.cooee-competitions-bg .cooee-whatsnew-heading {
    padding: 36px 0 24px;
    text-align: center;
}

#whatsnew_bg .cooee-whatsnew-header,
#competitions_bg .cooee-whatsnew-header,
.cooee-competitions-bg .cooee-whatsnew-header {
    font-family: "Fredoka", "Open Sans", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.05;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}

#whatsnew_bg .cooee-whatsnew-header {
    color: #fff !important;
}

.cooee-whatsnew-intro {
    max-width: 720px;
    margin: 12px auto 0;
    padding: 0 16px;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.45;
    color: #fff;
    text-align: center;
}

#competitions_bg .cooee-whatsnew-header,
.cooee-competitions-bg .cooee-whatsnew-header {
    color: #333 !important;
}

#whatsnew_bg .thumb-box,
#whatsnew_bg #heading_whats_new {
    display: none !important;
}

#whatsnew_bg .cooee-news-grid,
#whatsnew_bg #thumbnails,
#whatsnew_bg #thumbnails li,
li:has(> a[href="#slider"]) {
    display: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#whatsnew_bg .cooee-whatsnew-feature {
    float: none !important;
    margin: 0 auto 40px !important;
    padding: 0 0 12px;
    box-sizing: border-box;
    min-height: 180px;
}

#whatsnew_bg .cooee-whatsnew-feature__link {
    display: block;
    line-height: 0;
}

#whatsnew_bg .cooee-whatsnew-feature__image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}

#whatsnew_bg .cooee-whatsnew-feature__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    background: rgba(0, 0, 0, 0.12);
    color: #fff;
    font-family: "Fredoka", "Open Sans", Arial, sans-serif;
    font-weight: 700;
    font-size: 22px;
    text-align: center;
    padding: 24px;
    line-height: 1.3;
}

#competitions_bg .cooee-win-grid,
.cooee-competitions-bg .cooee-win-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 18px;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-bottom: 12px;
    box-sizing: border-box;
}

.cooee-competitions-intro {
    max-width: 720px;
    margin: 12px auto 0;
    padding: 0 16px;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.45;
    color: #333;
    text-align: center;
}

#competitions_bg .cooee-win-tile,
.cooee-competitions-bg .cooee-win-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f3f3f3;
    text-decoration: none;
    color: #fff;
}

#competitions_bg .cooee-win-tile img,
.cooee-competitions-bg .cooee-win-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#competitions_bg .cooee-win-tile--static,
.cooee-competitions-bg .cooee-win-tile--static {
    cursor: default;
    pointer-events: none;
}

@media (max-width: 767px) {
    #competitions_bg .cooee-win-grid,
    .cooee-competitions-bg .cooee-win-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
    }
}

body.cooee-whatsnew-page,
body.cooee-whatsnew-page #cooee-slicknav,
body.cooee-whatsnew-page .slicknav_menu {
    background: rgb(255, 117, 0) !important;
}

body.cooee-whatsnew-page .nav_bg1 {
    background: #fff !important;
    background-image: none !important;
}

#whatsnew_bg .thumb-box .thumbs img.active {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

#whatsnew_bg #thumbnails.cooee-whatsnew-static {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#whatsnew_bg #thumbnails.cooee-whatsnew-static > li {
    display: none;
    width: 100%;
}

#whatsnew_bg #thumbnails:not(.cooee-whatsnew-static) > li:not(:first-child) {
    display: none;
}

#whatsnew_bg #thumbnails.cooee-whatsnew-static > li.cooee-whatsnew-active {
    display: block;
}

#whatsnew_bg #thumbnails.cooee-whatsnew-static > li > a {
    display: block;
    pointer-events: none;
    text-decoration: none;
    color: inherit;
}

#whatsnew_bg #comp_holder,
#competitions_bg #comp_holder,
#whatsnew_bg .cooee-news-grid,
#competitions_bg .cooee-news-grid {
    background: none !important;
    background-image: none !important;
    padding-bottom: 40px;
}

#whatsnew_bg #comp_holder .view img,
#competitions_bg .view img,
#whatsnew_bg .cooee-news-grid .view img,
#competitions_bg .cooee-news-grid .view img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Products — static list when only one category slide */
#products_bg #thumbnails2.cooee-products-static {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#products_bg #thumbnails2.cooee-products-static > li {
    display: block;
    width: 100%;
    position: static;
    opacity: 1;
    visibility: visible;
}

#products_bg #thumbnails2.cooee-products-static > li > a {
    display: block;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: inherit;
}

#products_bg .slippry_box.thumbnails .sy-slides-crop {
    min-height: 280px;
    overflow: visible;
}

#products_bg .slippry_box.thumbnails .sy-list > li {
    width: 100%;
}

#block_bg1,
#comp_holder {
    background: none !important;
    background-image: none !important;
}

#our_story_bg {
    margin-top: -5px;
    overflow: hidden;
    background: #004aad !important;
    background-color: #004aad !important;
    background-image: none !important;
}

#our_story_bg #our_story_content,
#our_story_bg #our_story_content p,
#our_story_bg #our_story_content span,
#our_story_bg #our_story_content td {
    color: #fff !important;
}

#comp_holder {
    padding-bottom: 40px;
}

#comp_holder #hover1 .view-fifth {
    position: relative;
    overflow: hidden;
}

#comp_holder #hover1 .view-fifth .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-105%);
    transition: transform 0.3s ease-in-out;
    z-index: 2;
}

#comp_holder #hover1 .view-fifth .mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#comp_holder #hover1 .view-fifth:hover .mask {
    transform: translateX(0);
}

#comp_holder #hover1 .view-fifth .block_name {
    transition: transform 0.3s ease-in-out;
}

#comp_holder #hover1 .view-fifth:hover .block_name {
    transform: translateX(105%);
}

#comp_holder #hover1 .view-fifth:hover > img {
    transform: translateX(105%);
    transition: transform 0.3s ease-in-out;
}

#comp_holder .three.columns:not(#hover1) .view:hover > img,
#comp_holder .three.columns:not(#hover1) .view-fifth:hover > img,
#comp_holder .three.columns:not(#hover1) .view:hover .block_name,
#comp_holder .three.columns:not(#hover1) .view-fifth:hover .block_name {
    transform: none !important;
}

#comp_holder .three.columns {
    min-height: 230px;
}

#block_row1 .three.columns,
#block_row2 .three.columns,
#cooee_prod .three.columns,
#island_fusion .three.columns,
#sugar_free .three.columns {
    float: left;
    display: block;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    #products_bg .view-fifth.bottle-box,
    #products_bg #cooee_prod .view-fifth {
        height: auto;
        min-height: 220px;
    }

    #products_bg #cooee_prod [id^="block_row"] .three.columns {
        flex: 0 0 50%;
        max-width: 50%;
    }

    #comp_holder .three.columns {
        width: 50%;
        min-height: 180px;
    }
}

/* Our Team gallery grid */
#gallery_control .filter-options {
    margin: 0 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#gallery_control .filter-options .btn {
    background: #881a1c;
    border: 0;
    color: #fff;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-family: 'Archivo Narrow', sans-serif;
}

#gallery_control .filter-options .btn.active,
#gallery_control .filter-options .btn:hover {
    background: #5c1012;
}

#grid.row-fluid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

#grid .picture-item {
    box-sizing: border-box;
    width: 25%;
    padding: 10px;
    margin: 0;
}

#grid .picture-item img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    #grid .picture-item {
        width: 33.333%;
    }
}

@media (max-width: 767px) {
    #grid .picture-item {
        width: 50%;
    }

    #gallery_control .filter-options {
        flex-direction: column;
    }

    #gallery_control .filter-options .btn {
        width: 100%;
    }
}

/* Talk to Us / footer contact form */
#contact_info,
#contact_info td {
    color: #fff;
}

#contact_info a,
#contact_info a:visited {
    color: #fff !important;
    text-decoration: underline;
}

#contact_info a:hover,
#contact_info a:focus {
    color: #ffbd1e !important;
}

.cooee-contact-form .cooee-contact-row {
    margin-bottom: 8px;
}

.cooee-contact-form .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cooee-contact-form .Custom_Textbox {
    display: block;
    box-shadow: none !important;
    background: #fff;
    border: solid 1px #333;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0;
    font-family: "Fredoka", "Open Sans", Arial, sans-serif;
    font-size: 14px;
    padding: 8px 10px;
    box-sizing: border-box;
}

.cooee-contact-form .Custom_Textbox::placeholder,
.cooee-contact-form .form_captcha_control_holder::placeholder {
    color: #888;
    opacity: 1;
}

#contact_form .cooee-contact-form textarea.Custom_Textbox,
.cooee-contact-form textarea.Custom_Textbox,
.talk_bg textarea.Custom_Textbox,
.talk_bg #contact_form textarea {
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    height: 120px;
    resize: vertical;
    box-sizing: border-box;
    border: solid 1px #333 !important;
    box-shadow: none !important;
    outline: none;
}

.cooee-contact-notice {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    margin: 0 0 12px 3px;
}

.cooee-contact-notice--success {
    color: #ffbd1e;
}

.cooee-contact-notice--error {
    color: #ffb4b4;
}

.cooee-contact-form .form_captcha {
    padding-left: 0 !important;
    margin: 10px 0 0;
    clear: both;
}

.cooee-contact-form .form_captcha_Image_holder {
    display: inline-block;
    vertical-align: middle;
    border: 0;
    background: #bebebe;
}

.cooee-contact-form .cooee-captcha-refresh {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #8f8f8f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3.16-6.75'/%3E%3Cpolyline points='21 3 21 9 15 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    cursor: pointer;
    position: relative;
}

.cooee-contact-form .cooee-captcha-refresh:hover,
.cooee-contact-form .cooee-captcha-refresh:focus {
    background-color: #6f6f6f;
}

.cooee-contact-form .cooee-captcha-refresh::before {
    content: none;
}

.cooee-contact-form .form_captcha_label_holder {
    display: none !important;
}

.cooee-contact-form .form_captcha_control_holder {
    box-shadow: none !important;
    background: #fff;
    border: solid 1px #333;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100%;
    margin: 8px 0 0;
    font-family: "Fredoka", "Open Sans", Arial, sans-serif;
    font-size: 14px;
    padding: 8px 10px;
    box-sizing: border-box;
    display: block;
}

#contact_form .footer_form {
    margin-top: 0;
    margin-bottom: 0;
}

.cooee-contact-form::after {
    content: '';
    display: block;
    clear: both;
}

#contact_form .cooee-contact-form input.cooee-contact-submit,
#contact_form .cooee-contact-form input[type="submit"] {
    float: right;
    margin: 10px 0 20px 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    background: #ed1c24 !important;
    color: #fff !important;
    font-family: "Fredoka", "Open Sans", Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 700 !important;
    line-height: normal !important;
    padding: 12px 35px !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
}

#contact_form .cooee-contact-form input.cooee-contact-submit:hover,
#contact_form .cooee-contact-form input[type="submit"]:hover {
    background: #333 !important;
}

body.cooee-talk-page,
body.cooee-talk-page #cooee-slicknav,
body.cooee-talk-page .slicknav_menu,
.talk_bg {
    background: #fff !important;
    background-image: none !important;
}

body.cooee-talk-page .nav_bg1 {
    background: #fff !important;
    background-image: none !important;
}

.talk_bg,
.talk_bg #talk_holder,
.talk_bg #contact_info,
.talk_bg #contact_info td,
.talk_bg #contact_info span,
#legal a {
    color: #333 !important;
    font-family: "Fredoka", "Open Sans", Arial, sans-serif !important;
    text-decoration: none;
}

.talk_bg #legal,
.talk_bg #legal a,
.talk_bg .cooee-contact-form,
.talk_bg .cooee-contact-form .Custom_Textbox,
.talk_bg .cooee-contact-form .form_captcha_control_holder,
.talk_bg .cooee-contact-notice,
.talk_bg #contact_info a,
.talk_bg #legal a {
    color: #333 !important;
    font-family: "Fredoka", "Open Sans", Arial, sans-serif !important;
    font-weight: 400;
}

.talk_bg #talk_header,
.talk_bg .contact_header,
.talk_bg h1,
.talk_bg h2,
.talk_bg h3,
.talk_bg h4,
.talk_bg h5,
.talk_bg h6,
body.cooee-talk-page h1,
body.cooee-talk-page h2,
body.cooee-talk-page h3,
body.cooee-talk-page #legal,
body.cooee-talk-page #legal a {
    color: #333 !important;
    font-family: "Fredoka", "Open Sans", Arial, sans-serif !important;
}

.talk_bg #talk_header,
.talk_bg .contact_header,
.talk_bg h1,
.talk_bg h2,
.talk_bg h3,
body.cooee-talk-page h1,
body.cooee-talk-page h2,
body.cooee-talk-page h3 {
    font-weight: 700 !important;
}

.talk_bg #talk_header {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-top: 88px !important;
    margin-bottom: 36px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 12px;
    padding-bottom: 4px;
    box-sizing: border-box !important;
}

/* Match Instagram feed width (1200px) instead of skeleton 960px .container */
.talk_bg #talk_holder,
.talk_bg #legal {
    float: none !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

.talk_bg #talk_holder.container,
.talk_bg #talk_holder.twelve.columns,
.talk_bg #legal.container,
.talk_bg #legal.twelve.columns {
    width: 100% !important;
    max-width: 1200px !important;
}

.talk_bg #footer_holder {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}

.talk_bg #footer_holder > #contact,
.talk_bg #footer_holder > #contact_form,
.talk_bg #footer_holder > #map {
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.talk_bg #footer_holder > #contact {
    flex: 1 1 28%;
    width: auto;
}

.talk_bg #footer_holder > #contact_form {
    flex: 1 1 42%;
    width: auto;
}

.talk_bg #footer_holder > #map {
    flex: 1 1 28%;
    width: auto;
}

.talk_bg #map .map,
.talk_bg #map .map p {
    margin: 0 !important;
}

.talk_bg #map iframe {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 320px;
}

.talk_bg #contact .SocialMedia,
.talk_bg .SocialMedia {
    display: block !important;
    clear: none;
    width: auto !important;
    margin: 16px 0 0 !important;
    text-align: left;
}

.talk_bg .SocialMedia a {
    display: inline-block !important;
    margin: 0 10px 0 0 !important;
    line-height: 0;
    vertical-align: middle;
}

.talk_bg .SocialMedia a:last-child {
    margin-right: 0 !important;
}

.talk_bg .tiktok-logo,
.SocialMedia .tiktok-logo,
img.tiktok-logo,
.talk_bg .facebook-logo,
.SocialMedia .facebook-logo,
img.facebook-logo,
.talk_bg .instagram-logo,
.SocialMedia .instagram-logo,
img.instagram-logo,
img.cooee-social-icon {
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    background-image: none !important;
    object-fit: cover;
    overflow: hidden;
}

.talk_bg .tiktok-logo,
.SocialMedia .tiktok-logo,
img.tiktok-logo,
.talk_bg .facebook-logo,
.SocialMedia .facebook-logo,
img.facebook-logo {
    border-radius: 50% !important;
}

.talk_bg .instagram-logo,
.SocialMedia .instagram-logo,
img.instagram-logo {
    border-radius: 12px !important;
}

#map iframe {
    max-width: 100%;
}

@media (max-width: 767px) {
    .talk_bg #footer_holder {
        display: block;
    }

    .talk_bg #footer_holder > #contact,
    .talk_bg #footer_holder > #contact_form,
    .talk_bg #footer_holder > #map {
        width: 100% !important;
        margin-bottom: 24px !important;
    }

    #contact_form {
        width: 100% !important;
    }

    .cooee-contact-form .Custom_Textbox,
    .cooee-contact-form .form_captcha_control_holder {
        width: 100% !important;
        margin-left: 0;
    }

    .cooee-contact-form .form_captcha {
        margin-left: 0;
    }

    #contact_form .cooee-contact-form input.cooee-contact-submit,
    #contact_form .cooee-contact-form input[type="submit"] {
        float: none;
        margin-right: 0;
        margin-bottom: 16px;
        display: block;
        width: 100% !important;
    }

    .talk_bg .SocialMedia,
    .SocialMedia {
        margin-left: 0 !important;
        margin-top: 12px !important;
        text-align: left;
    }

    #map {
        margin-top: 0;
    }

    #map iframe {
        width: 100% !important;
    }
}

/* Dead iLink CDN images — keep these local so Local does not time out */
#header {
    background-image: none !important;
}

.bx-prev,
a.bx-prev,
.bx-wrapper .bx-controls-direction a.bx-prev {
    background: url("../images/layout/prev.svg") center / contain no-repeat !important;
}

.bx-next,
a.bx-next,
.bx-wrapper .bx-controls-direction a.bx-next {
    background: url("../images/layout/next.svg") center / contain no-repeat !important;
}

/* Our Story timeline slider controls */
#our_story_bg .bx-wrapper .bx-controls-direction a,
.MiddleContaierSlider .bx-wrapper .bx-controls-direction a {
    filter: invert(1);
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    margin-left: 0 !important;
}

.bx-wrapper .bx-controls-direction a.bx-next {
    top: 90%;
}

.bx-wrapper .bx-controls-direction a.bx-prev {
    top: 5%;
}

.bx-viewport table {
    margin-left: 0 !important;
}

#our_story_bg .bxslider table,
.MiddleContaierSlider .bxslider table,
#our_story_bg .bxslider td,
.MiddleContaierSlider .bxslider td {
    width: 100% !important;
    text-align: center !important;
    vertical-align: middle !important;
}

#our_story_bg .bxslider .year,
.MiddleContaierSlider .bxslider .year {
    display: block;
    width: 100%;
    text-align: center !important;
}

/* Promo / competition pages (e.g. New Look, Big Flex) */
.cooee-simple-page #content {
    margin-top: 0;
}

/* Scraped site.css hides .content-control; restore visible page content */
#content .content-control,
.cooee-inner #content .content-control {
    display: block !important;
}

/* Dark blue content area — inner layout pages only (not simple/promo pages) */
.cooee-inner:not(.cooee-simple-page) #content .content-control {
    background-color: #02264a;
}

.cooee-simple-page .content-control {
    background-color: #fff;
    padding: 20px 0 40px;
}

.cooee-simple-page .ContentPageContent {
    color: #065e9a;
    font-family: 'Ropa Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
}

.cooee-simple-page .ContentPageContent h1 {
    color: #ed1c24 !important;
}

.cooee-simple-page .ContentPageContent .img-box img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.cooee-simple-page .ContentPageContent .cooee-terms-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    width: 100%;
    margin: 0 0 24px;
}

.cooee-simple-page .ContentPageContent .cooee-terms-hero {
    float: none !important;
    clear: none;
    flex: 0 0 300px;
    width: 300px;
    max-width: 38%;
    margin: 0 !important;
    text-align: left;
}

.cooee-simple-page .ContentPageContent .cooee-terms-hero img {
    display: block;
    margin: 0;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.cooee-simple-page .ContentPageContent .cooee-terms-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.cooee-simple-page .ContentPageContent .cooee-terms-copy h1 {
    text-align: left !important;
    line-height: 1.2 !important;
    margin-top: 0;
}

@media only screen and (max-width: 767px) {
    .cooee-simple-page .ContentPageContent .cooee-terms-layout {
        flex-direction: column;
        gap: 18px;
    }

    .cooee-simple-page .ContentPageContent .cooee-terms-hero {
        flex: 0 0 auto;
        width: 100%;
        max-width: 420px;
        margin: 0 auto !important;
    }
}

.cooee-simple-page .ContentPageContent .img-max-width {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

.cooee-simple-page .competitions-new-box {
    width: 100%;
}

.cooee-simple-page .ContentPageContent table {
    width: 100%;
}

.cooee-simple-page .ContentPageContent table img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Promo content pages — white background, Ropa Sans body copy */
body.cooee-promo-page {
    background: #fff !important;
}

body.cooee-promo-page .content-control,
body.cooee-promo-page #content {
    background-color: #fff !important;
}

body.cooee-promo-page .ContentPageContent,
body.cooee-promo-page .ContentPageContent p,
body.cooee-promo-page .ContentPageContent div,
body.cooee-promo-page .ContentPageContent td {
    text-align: center;
    line-height: 20px !important;
    font-family: 'Ropa Sans', sans-serif !important;
    color: #065e9a !important;
    font-size: 14px !important;
}

.instagram-box {
    align-items: center;
    background: #fff !important;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
}

.instagram-box h2 {
    color: #333 !important;
    font-family: "Fredoka", "Open Sans", Arial, sans-serif !important;
    font-size: 60px;
    font-weight: 700 !important;
    margin: 0;
    padding: 30px 0 15px;
    text-align: center;
}

.cooee-instagram-grid {
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 16px 30px;
    width: 100%;
}

.cooee-instagram-item {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 12px) / 4);
    max-width: calc((100% - 12px) / 4);
    min-width: 0;
}

.cooee-instagram-link {
    display: block;
    overflow: hidden;
    position: relative;
}

.cooee-instagram-image {
    aspect-ratio: 1;
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
    width: 100%;
}

.cooee-instagram-link:hover .cooee-instagram-image,
.cooee-instagram-link:focus-visible .cooee-instagram-image {
    transform: scale(1.04);
}

.cooee-instagram-item--video .cooee-instagram-link::before {
    background: rgba(0, 0, 0, 0.18);
    content: '';
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: background 0.25s ease;
    width: 100%;
}

.cooee-instagram-item--video .cooee-instagram-link::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23FF0000' d='M66.52 7.74a8.4 8.4 0 0 0-5.87-5.91C55.83 0 34 0 34 0S12.17 0 7.35 1.83A8.4 8.4 0 0 0 1.48 7.74C0 12.56 0 24 0 24s0 11.44 1.48 16.26a8.4 8.4 0 0 0 5.87 5.91C12.17 48 34 48 34 48s21.83 0 26.65-1.83a8.4 8.4 0 0 0 5.87-5.91C68 35.44 68 24 68 24s0-11.44-1.48-16.26z'/%3E%3Cpath fill='%23FFF' d='M27 34V14l18 10-18 10z'/%3E%3C/svg%3E") no-repeat center / contain;
    content: '';
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
    height: 36px;
    left: 50%;
    opacity: 0.96;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease;
    width: 52px;
}

.cooee-instagram-item--video .cooee-instagram-link:hover::before,
.cooee-instagram-item--video .cooee-instagram-link:focus-visible::before {
    background: rgba(0, 0, 0, 0.3);
}

.cooee-instagram-item--video .cooee-instagram-link:hover::after,
.cooee-instagram-item--video .cooee-instagram-link:focus-visible::after {
    transform: translate(-50%, -50%) scale(1.08);
}

.cooee-instagram-fallback {
    color: #333;
    font-family: "Fredoka", "Open Sans", Arial, sans-serif;
    padding: 0 0 30px;
    text-align: center;
}

.cooee-instagram-fallback a {
    color: #333;
    text-decoration: underline;
}

@media (max-width: 991px) {
    .cooee-instagram-item {
        flex: 0 0 calc((100% - 8px) / 3);
        max-width: calc((100% - 8px) / 3);
    }
}

@media (max-width: 767px) {
    .cooee-instagram-grid {
        gap: 3px;
        padding: 0 12px 24px;
    }

    .cooee-instagram-item {
        flex: 0 0 calc((100% - 3px) / 2);
        max-width: calc((100% - 3px) / 2);
    }
}

@media (max-width: 479px) {
    .cooee-instagram-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}