/* Authentic Icomoon Font Face Override */
@font-face {
    font-family: 'icomoon';
    src: url('/assets/fonts/Icomoon/icomoon.woff') format('woff'),
        url('/assets/fonts/Icomoon/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Header Right Navbar Spacing & Alignment */
.header-middle .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Hide broken icon-toggle elements */
.ts-tiny-account-wrapper .account-control .account-link .icon-toggle {
    display: none !important;
}

/* Store Notice Close Button */
.ts-store-notice {
    position: relative;
}

.ts-store-notice .container {
    position: relative;
}

.ts-store-notice .close {
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    position: absolute;
    font-size: 8px !important;
    top: 10px;
    right: 14px;
    z-index: 1;
    display: inline-block;
    width: auto;
    height: auto;
    transform: none;
}

.ts-store-notice .close::before {
    content: "\e906" !important;
    font-family: 'icomoon' !important;
    font-size: 8px !important;
    font-weight: normal !important;
    color: inherit;
    line-height: 20px;
    display: inline;
}


/* Floating Search Sidebar Close Button */
.ts-floating-sidebar .close,
#ts-search-sidebar .close {
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 0 !important;
    color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-repeat: no-repeat;
    background-position: center;
}

.ts-floating-sidebar .close::after,
#ts-search-sidebar .close::after {
    content: none !important;
}

.ts-floating-sidebar .close::before,
#ts-search-sidebar .close::before {
    content: "✕" !important;
    font-size: 16px !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold;
    display: block !important;
    line-height: 1;
}

/* Search Form Input & Submit Button (Matching Exact Screenshot) */
.ts-search-normal form .search-table,
form .search-table {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #f1f1f1 !important;
    border-radius: 0px !important;
    overflow: hidden;
    height: 44px !important;
    max-width: 100%;
    margin-top: 15px !important;
    margin-left: -5px !important;
}

.ts-search-normal form .search-table input[type="text"],
form .search-table input[type="text"] {
    background-color: #f1f1f1 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    height: 44px !important;
    line-height: 44px !important;
    padding-left: 18px !important;
    padding-right: 44px !important;
    font-size: 14px !important;
    color: #666666 !important;
    width: 100% !important;
    font-family: inherit !important;
}

.ts-search-normal form .search-table input[type="text"]::placeholder,
form .search-table input[type="text"]::placeholder {
    color: #757575 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.search-table .search-button {
    position: absolute;
    right: 0;
    top: 0;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.search-table .search-button input[type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    width: 62px !important;
    height: 62px !important;
    opacity: 0 !important;
    cursor: pointer;
    z-index: 2;
}

.search-table .search-button::before {
    content: "" !important;
    display: block;
    width: 62px;
    height: 44px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23111111" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="10.5" cy="10.5" r="7.5"/><line x1="21" y1="21" x2="15.8" y2="15.8"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 1;
}

/* Brochure carousel - same as live site */
img.swiper-slide-image {
    width: 300px;
    height: 101px;
    object-fit: contain;
}

.swiper-wrapper {
    transition-timing-function: linear !important;
}

.swiper-wrapper img {
    height: 300px;
}

/* Enforce Search Sidebar and Overlay to Touch Top */
.ts-floating-sidebar .ts-sidebar-content,
#ts-search-sidebar .ts-sidebar-content {
    top: 0 !important;
}

/* Exact WordPress & Elementor Gallery Layout Rules */
.gallery.gallery-columns-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;
    padding: 0 15px !important;
}

.elementor-element-4a3a9c9 .e-con-inner,
.elementor-widget-image-gallery {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.gallery.gallery-columns-3 .gallery-item {
    float: none !important;
    width: calc(33.333% - 20px) !important;
    margin: 10px !important;
    box-sizing: border-box !important;
}

.gallery.gallery-columns-3 .gallery-item .gallery-icon {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 133.33% !important;
    /* 3:4 aspect ratio for uniform height */
    position: relative !important;
    overflow: hidden !important;
}

.gallery.gallery-columns-3 .gallery-item .gallery-icon a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.gallery.gallery-columns-3 .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 2px solid #cfcfcf !important;
    box-sizing: border-box !important;
    display: block !important;
}

.gallery br[style*="clear: both"] {
    display: none !important;
}

/* RepOcean Verified Badge */
.rep-verified-badge-container {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
}

.rep-verified-badge-container .verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #474747;
}

.rep-verified-badge-container .verified-badge__icon {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

.rep-verified-badge-container .verified-badge__tooltip {
    display: none;
}

.rep-verified-badge-container .verified-badge__link {
    color: #474747;
    text-decoration: none;
    font-size: 12px;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.rep-verified-badge-container .verified-badge__link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Emoji / Smiley styling fix */
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

/* Elementor shrink hover animation */
.elementor-animation-shrink {
    transition-duration: 0.3s;
    transition-property: transform;
}

.elementor-animation-shrink:hover,
.elementor-animation-shrink:focus,
.elementor-animation-shrink:active {
    transform: scale(0.95);
}

/* ==========================================================================
   Comprehensive Homepage Responsiveness (Mobile, Tablet, & Desktop)
   ========================================================================== */

/* Prevent horizontal overflow page-wide */
html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

#page,
.site,
#main,
#main-content,
#primary,
article,
.elementor {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.elementor-section-stretched {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
}

/* Heading & Text Responsiveness */
@media (max-width: 767px) {
    .elementor-element-b87d3c6 .elementor-heading-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        padding: 0 10px !important;
    }

    .elementor-element-e96df8b .elementor-widget-container {
        font-size: 14px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        padding: 0 15px !important;
    }
}

/* Image Accordion Responsiveness (<768px vertical stack) */
@media (max-width: 767px) {
    .ekit-wid-con .elementskit-image-accordion-wraper {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    .ekit-wid-con .ekit-image-accordion-item {
        width: 100% !important;
        height: 250px !important;
        min-height: 250px !important;
        margin-bottom: 12px !important;
        background-size: cover !important;
        background-position: center !important;
    }
}

/* Brochure Grid / Gallery Responsiveness */
@media (min-width: 992px) {
    .gallery.gallery-columns-3 .gallery-item {
        width: calc(33.333% - 20px) !important;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .gallery.gallery-columns-3 {
        padding: 0 10px !important;
    }

    .gallery.gallery-columns-3 .gallery-item {
        width: calc(50% - 20px) !important;
        margin: 10px !important;
    }
}

@media (max-width: 575px) {
    .gallery.gallery-columns-3 {
        padding: 0 5px !important;
    }

    .gallery.gallery-columns-3 .gallery-item {
        width: calc(50% - 10px) !important;
        margin: 5px !important;
    }

    .gallery.gallery-columns-3 .gallery-item .gallery-icon {
        padding-bottom: 140% !important;
    }
}

/* Swiper Sliders / Carousels Responsiveness */
@media (max-width: 767px) {}

/* Footer & Widget Columns Stacking on Mobile */
@media (max-width: 767px) {

    footer .widget-container,
    .footer-widgets .widget,
    footer .elementor-column {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   Mobile Header Responsiveness & Alignment (Matching C&G Reference HTML)
   ========================================================================== */
@media (max-width: 991px) {
    .hidden-phone {
        display: none !important;
    }

    .visible-phone {
        display: flex !important;
        align-items: center;
    }

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

    .ts-header .header-middle {
        padding: 10px 0 !important;
    }

    .ts-header .header-middle>.container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Left mobile controls (Hamburger + Search) */
    .header-middle .header-left.visible-phone {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ts-mobile-icon-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        cursor: pointer;
    }

    .ts-mobile-icon-toggle .icon {
        display: block !important;
        width: 22px !important;
        height: 16px !important;
        position: relative !important;
        cursor: pointer;
    }

    .ts-mobile-icon-toggle .icon::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 2px !important;
        background-color: #ffffff !important;
        box-shadow: 0 7px 0 #ffffff, 0 14px 0 #ffffff !important;
    }

    .search-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        cursor: pointer;
    }

    .ts-header .search-button>span.icon,
    .search-button>span.icon {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10.5" cy="10.5" r="7.5"/><line x1="21" y1="21" x2="15.8" y2="15.8"/></svg>') !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 20px 20px !important;
        cursor: pointer;
    }

    .search-button>span.icon::before {
        content: none !important;
    }

    /* Mobile Logo Centering */
    .header-middle .logo-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        text-align: center !important;
    }

    .header-middle .logo-wrapper .logo a {
        display: inline-block !important;
    }

    .header-middle .logo-wrapper .logo img {
        max-height: 40px !important;
        width: auto !important;
    }

    .header-middle .logo-wrapper .logo img.normal-logo,
    .header-middle .logo-wrapper .logo img.sticky-logo {
        display: none !important;
    }

    .header-middle .logo-wrapper .logo img.mobile-logo {
        display: inline-block !important;
    }

    /* Right Controls on Mobile */
    .header-middle .header-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    .header-middle .header-right .ts-mobile-icon-toggle,
    .header-middle .header-right .search-button {
        display: none !important;
    }
}



@media (max-width: 991px) {
    body.floating-sidebar-active {
        overflow: hidden !important;
        height: 100vh !important;
        position: fixed !important;
        width: 100% !important;
    }
}

/* Mobile Menu Drawer Styling (Matching Exact User Screenshot) */
#group-icon-header {
    position: fixed !important;
    bottom: 50px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: calc(100vh - 65px) !important;
    background-color: #ffffff !important;
    z-index: 99999 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    display: none !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
}

#group-icon-header.has-expanded {
    overflow-y: auto !important;
}

#group-icon-header.active {
    display: block !important;
}

#group-icon-header .ts-sidebar-content,
#group-icon-header .sidebar-content {
    padding: 10px 0 !important;
    margin: 0 !important;
}

#group-icon-header .mobile-menu-wrapper ul.menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#group-icon-header .mobile-menu-wrapper ul.menu>li {
    border-bottom: 1px solid #eeeeee !important;
    padding: 16px 24px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    margin: 0 !important;
}

#group-icon-header .mobile-menu-wrapper ul.menu>li>a {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111111 !important;
    text-decoration: none !important;
    display: inline-block !important;
    letter-spacing: 0.2px !important;
}

#group-icon-header .mobile-menu-wrapper ul.menu>li>a:hover {
    color: #e60012 !important;
}

/* Plus Expand Icon (+) on Right */
#group-icon-header .mobile-menu-wrapper ul.menu>li .ts-menu-drop-icon {
    display: inline-block !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 5px 12px !important;
    margin-left: auto !important;
    z-index: 10 !important;
    position: relative !important;
}

#group-icon-header .mobile-menu-wrapper ul.menu>li .ts-menu-drop-icon::before {
    content: "+" !important;
    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    color: #111111 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#group-icon-header .mobile-menu-wrapper ul.menu>li .ts-menu-drop-icon.active::before {
    content: "−" !important;
}

/* Sub-Menu Dropdown Items for Brands */
#group-icon-header .mobile-menu-wrapper ul.sub-menu,
#group-icon-header .mobile-menu-wrapper ul.sub-menu>li,
#group-icon-header .mobile-menu-wrapper ul.menu>li>ul.sub-menu,
#group-icon-header .mobile-menu-wrapper ul.menu>li>ul.sub-menu>li {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#group-icon-header .mobile-menu-wrapper ul.menu>li>ul.sub-menu::before,
#group-icon-header .mobile-menu-wrapper ul.menu>li>ul.sub-menu>li::before {
    content: none !important;
}

#group-icon-header .mobile-menu-wrapper ul.menu>li>ul.sub-menu {
    display: none;
    width: 100% !important;
    padding: 20px 10px 10px 10px !important;
    margin: 12px 0 0 0 !important;
    border-top: 1px solid #f0f0f0 !important;
    background: #ffffff !important;
}

#group-icon-header .mobile-menu-wrapper ul.menu>li.active>ul.sub-menu,
#group-icon-header .mobile-menu-wrapper ul.menu>li.ts-active>ul.sub-menu {
    display: block !important;
}

#group-icon-header .mobile-brands-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    padding: 10px 0 !important;
}

#group-icon-header .mobile-brands-container .brand-item {
    text-align: center !important;
    width: 100% !important;
}

#group-icon-header .mobile-brands-container .brand-item img {
    max-width: 220px !important;
    max-height: 70px !important;
    height: auto !important;
    width: auto !important;
    margin: 0 auto !important;
    display: block !important;
}

#group-icon-header .mobile-brands-container .brand-button {
    width: 100% !important;
    text-align: center !important;
}

#group-icon-header .mobile-brands-container a.btn-blue {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    background-color: #55c4e6 !important;
    color: #ffffff !important;
    padding: 12px 18px !important;
    border-radius: 4px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

/* Red X (Close Icon) when Hamburger is Active */
.ts-mobile-icon-toggle .icon.active {
    position: relative !important;
}

.ts-mobile-icon-toggle .icon.active::before {
    content: "✕" !important;
    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #e60012 !important;
    box-shadow: none !important;
    background: transparent !important;
    line-height: 1 !important;
    top: -2px !important;
}