/*
Theme Name: LetsCo Marketplace
Theme URI: https://letsco.io
Author: LetsCo
Author URI: https://letsco.io
Description: Custom LetsCo marketplace theme converted from the single-page HTML layout. Keeps the fixed left category sidebar, header, mobile footer, and reusable WordPress page templates.
Version: 1.5.3
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary
Text Domain: letsco-marketplace
*/

/* The primary visual design is powered by Tailwind classes preserved from the original HTML file. */
html, body { height: 100%; }

/* LetsCo Product Card — Gilroy Medium 16pt, brand colour #53a7e4 */
@font-face {
    font-family: 'Gilroy';
    src: url('assets/fonts/Gilroy-Medium.woff2') format('woff2'),
         url('assets/fonts/Gilroy-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.letsco-product-card {
    font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif;
}

.letsco-card-body {
    padding: 12px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.letsco-card-affiliate {
    font-size: 11px;
    font-weight: 500;
    color: #53a7e4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
}

.letsco-card-name {
    font-size: 16px;
    font-weight: 500;
    color: #53a7e4;
    line-height: 1.3;
    margin: 0;
    font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.letsco-card-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
}

.dark .letsco-card-desc {
    color: #9ca3af;
}

.letsco-card-stars {
    display: flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
}

.letsco-card-stars svg {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    display: block;
}

/* Keep rating stars small if WooCommerce product cards are active. */
.woocommerce ul.products li.product .star-rating,
.woocommerce .star-rating {
    font-size: 0.7rem;
    line-height: 1;
}

/* Ensure the Expedia leaderboard spans the full product grid/content row. */
.letsco-travel-expedia-banner {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}

.letsco-travel-expedia-banner iframe {
    width: 100% !important;
    max-width: none !important;
}

.letsco-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    margin-top: 2px;
}

.dark .letsco-card-footer {
    border-top-color: #2a2a2a;
}

.letsco-card-price {
    font-size: 16px;
    font-weight: 500;
    color: #53a7e4;
    font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
}

.letsco-card-btn {
    font-size: 12px;
    font-weight: 500;
    font-family: 'Gilroy', 'Plus Jakarta Sans', sans-serif;
    padding: 5px 12px;
    border-radius: 9999px;
    border: 1.5px solid #53a7e4;
    background: transparent;
    color: #53a7e4;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.letsco-card-btn:hover {
    background: #53a7e4;
    color: #fff;
}


/* LetsCo v1.0.4 fixes: keep custom rating stars tiny and scale the Expedia banner area. */
.letsco-card-stars {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
    line-height: 1 !important;
    max-height: 10px !important;
    overflow: hidden !important;
}
.letsco-card-stars svg,
.letsco-card-stars .letsco-rating-star {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    max-width: 9px !important;
    min-height: 9px !important;
    max-height: 9px !important;
    flex: 0 0 9px !important;
    display: block !important;
}
.letsco-travel-expedia-banner {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}
.letsco-travel-expedia-banner iframe {
    width: 100% !important;
    max-width: none !important;
    min-height: 190px !important;
}


/* LetsCo v1.0.5 fixes: keep View Deal at the bottom and prevent rating overlap/cropping. */
.letsco-product-card {
    height: 100%;
}
.letsco-product-card > div {
    min-height: 268px;
}
.letsco-card-body {
    flex: 1 1 auto;
    min-height: 132px;
}
.letsco-card-stars {
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    color: #53a7e4 !important;
    max-height: none !important;
    overflow: visible !important;
}
.letsco-card-stars svg {
    display: none !important;
}
.letsco-card-footer {
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding-top: 8px !important;
}
.letsco-card-price {
    display: block !important;
    width: 100% !important;
    line-height: 1.1 !important;
}
.letsco-card-btn {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 6px 8px !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.letsco-travel-expedia-banner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
}
.letsco-travel-expedia-banner iframe {
    min-height: 210px !important;
}


/* LetsCo v1.0.6: Coming Soon marquee inside the header search bar. */
.letsco-search-coming-soon {
    height: 36px;
    box-shadow: 0 0 0 1px rgba(83, 167, 228, 0.12);
}

.letsco-search-coming-soon-mobile {
    height: 42px;
}

.letsco-search-marquee {
    position: absolute;
    left: 2.25rem;
    right: 1rem;
    overflow: hidden;
    white-space: nowrap;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    pointer-events: none;
}

.letsco-search-marquee-mobile {
    right: 3rem;
}

.letsco-search-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 2.75rem;
    min-width: 200%;
    will-change: transform;
    animation: letsco-search-marquee 8s linear infinite;
}

.letsco-search-marquee-track span {
    flex: 0 0 auto;
}

@keyframes letsco-search-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .letsco-search-marquee-track {
        animation: none;
        transform: none;
    }
}


/* LetsCo v1.0.7: Expedia banner cleanup — remove white iframe background and keep the leaderboard uncropped. */
.letsco-travel-expedia-banner {
    background: transparent !important;
    box-shadow: none !important;
}
.letsco-travel-expedia-banner iframe {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 728 / 90 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: hidden !important;
}


/* LetsCo v1.0.9: Light/dark mode surface fix.
   The header, sidebar, and footer intentionally keep their own dark styling.
   These rules only prevent hard-coded wrapper backgrounds from forcing the
   main page/content surface to stay dark or light incorrectly. */
html:not(.dark),
html:not(.dark) body,
html:not(.dark) body > main,
html:not(.dark) #main-content-scroll {
    background-color: #ffffff !important;
    color: #111827;
}

html.dark,
html.dark body,
html.dark body > main,
html.dark #main-content-scroll {
    background-color: #121212 !important;
    color: #ffffff;
}

/* Keep the visual app sections controlled by the active theme instead of a stale wrapper color. */
html:not(.dark) #main-content-scroll > div,
html:not(.dark) #main-content-scroll .letsco-page-surface {
    background-color: #ffffff;
}

html.dark #main-content-scroll > div,
html.dark #main-content-scroll .letsco-page-surface {
    background-color: #121212;
}


/* LetsCo v1.1.0: Category-page typography and rating color cleanup.
   Scope this to category/subcategory content only so header, sidebar, and footer stay unchanged. */
#main-content-scroll .letsco-category-page,
#main-content-scroll .letsco-category-page h1,
#main-content-scroll .letsco-category-page h2,
#main-content-scroll .letsco-category-page h3,
#main-content-scroll .letsco-category-page p,
#main-content-scroll .letsco-category-page span,
#main-content-scroll .letsco-category-page button,
#main-content-scroll .letsco-category-page a,
#main-content-scroll .letsco-category-page div {
    font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif;
}

html:not(.dark) #main-content-scroll .letsco-category-page,
html:not(.dark) #main-content-scroll .letsco-category-page h1,
html:not(.dark) #main-content-scroll .letsco-category-page h2,
html:not(.dark) #main-content-scroll .letsco-category-page h3,
html:not(.dark) #main-content-scroll .letsco-category-page p,
html:not(.dark) #main-content-scroll .letsco-category-page span,
html:not(.dark) #main-content-scroll .letsco-category-page button,
html:not(.dark) #main-content-scroll .letsco-category-page a,
html:not(.dark) #main-content-scroll .letsco-category-page div {
    color: #1f2933;
}

/* Preserve readable contrast in dark mode while still using the same product-card font. */
html.dark #main-content-scroll .letsco-category-page,
html.dark #main-content-scroll .letsco-category-page h1,
html.dark #main-content-scroll .letsco-category-page h2,
html.dark #main-content-scroll .letsco-category-page h3,
html.dark #main-content-scroll .letsco-category-page p,
html.dark #main-content-scroll .letsco-category-page span,
html.dark #main-content-scroll .letsco-category-page button,
html.dark #main-content-scroll .letsco-category-page a,
html.dark #main-content-scroll .letsco-category-page div {
    font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif;
}

/* Keep brand/action elements blue where they are meant to be interactive. */
html:not(.dark) #main-content-scroll .letsco-category-page .letsco-card-price,
html:not(.dark) #main-content-scroll .letsco-category-page .letsco-card-btn,
html:not(.dark) #main-content-scroll .letsco-category-page .letsco-card-affiliate {
    color: #53a7e4;
}

/* Rating stars should be yellow on every category page, including inline-generated stars. */
#main-content-scroll .letsco-category-page .letsco-card-stars,
#main-content-scroll .letsco-category-page .letsco-card-stars span,
#main-content-scroll .letsco-category-page .letsco-card-stars svg,
#main-content-scroll .letsco-category-page .letsco-card-stars .letsco-rating-star,
.woocommerce ul.products li.product .star-rating,
.woocommerce .star-rating {
    color: #facc15 !important;
    fill: #facc15 !important;
}


/* LetsCo v1.1.1: subcategory bar contrast + home/landing typography.
   Keep header, sidebar, footer, carousel imagery, and layouts unchanged. */
#main-content-scroll .letsco-subcategory-bar,
#main-content-scroll .letsco-subcategory-bar button {
    font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif;
}

/* When the subcategory bar is on a dark background, its text should be white. */
html.dark #main-content-scroll .letsco-subcategory-bar button,
html.dark #main-content-scroll .letsco-subcategory-bar button:hover,
html.dark #main-content-scroll .letsco-subcategory-bar button span {
    color: #ffffff !important;
}

/* Apply the v1.1.0 category typography direction to the landing/home content area. */
#main-content-scroll .letsco-landing-page,
#main-content-scroll .letsco-landing-content-area,
#main-content-scroll .letsco-landing-content-area h1,
#main-content-scroll .letsco-landing-content-area h2,
#main-content-scroll .letsco-landing-content-area h3,
#main-content-scroll .letsco-landing-content-area p,
#main-content-scroll .letsco-landing-content-area span,
#main-content-scroll .letsco-landing-content-area button,
#main-content-scroll .letsco-landing-content-area a,
#main-content-scroll .letsco-landing-content-area div {
    font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif;
}

html:not(.dark) #main-content-scroll .letsco-landing-content-area,
html:not(.dark) #main-content-scroll .letsco-landing-content-area h1,
html:not(.dark) #main-content-scroll .letsco-landing-content-area h2,
html:not(.dark) #main-content-scroll .letsco-landing-content-area h3,
html:not(.dark) #main-content-scroll .letsco-landing-content-area p,
html:not(.dark) #main-content-scroll .letsco-landing-content-area span,
html:not(.dark) #main-content-scroll .letsco-landing-content-area button,
html:not(.dark) #main-content-scroll .letsco-landing-content-area a,
html:not(.dark) #main-content-scroll .letsco-landing-content-area div {
    color: #1f2933;
}

/* Preserve brand/action blue on home product cards. */
html:not(.dark) #main-content-scroll .letsco-landing-content-area .letsco-card-price,
html:not(.dark) #main-content-scroll .letsco-landing-content-area .letsco-card-btn,
html:not(.dark) #main-content-scroll .letsco-landing-content-area .letsco-card-affiliate,
html:not(.dark) #main-content-scroll .letsco-landing-content-area .letsco-card-name {
    color: #53a7e4 !important;
}

/* Yellow ratings on the landing/home page too. */
#main-content-scroll .letsco-landing-page .letsco-card-stars,
#main-content-scroll .letsco-landing-page .letsco-card-stars span,
#main-content-scroll .letsco-landing-page .letsco-card-stars svg,
#main-content-scroll .letsco-landing-page .letsco-card-stars .letsco-rating-star {
    color: #facc15 !important;
    fill: #facc15 !important;
}


/* LetsCo v1.1.2: page title/subtitle contrast + header tagline typography.
   Page titles, subtitles, and the category subcategory bar should switch cleanly:
   dark charcoal in light mode, white in dark mode. The header tagline stays white. */
#header-container .letsco-header-tagline {
    color: #ffffff !important;
    font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif !important;
}

#main-content-scroll .letsco-page-title,
#main-content-scroll .letsco-page-title span,
#main-content-scroll .letsco-page-subtitle,
#main-content-scroll .letsco-category-title-bar h1,
#main-content-scroll .letsco-category-title-bar h1 span,
#main-content-scroll .letsco-category-title-bar p,
#main-content-scroll .letsco-subcategory-bar,
#main-content-scroll .letsco-subcategory-bar button,
#main-content-scroll .letsco-subcategory-bar button span {
    font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif !important;
}

html:not(.dark) #main-content-scroll .letsco-page-title,
html:not(.dark) #main-content-scroll .letsco-page-title span,
html:not(.dark) #main-content-scroll .letsco-page-subtitle,
html:not(.dark) #main-content-scroll .letsco-category-title-bar h1,
html:not(.dark) #main-content-scroll .letsco-category-title-bar h1 span,
html:not(.dark) #main-content-scroll .letsco-category-title-bar p {
    color: #1f2933 !important;
}

html.dark #main-content-scroll .letsco-page-title,
html.dark #main-content-scroll .letsco-page-title span,
html.dark #main-content-scroll .letsco-page-subtitle,
html.dark #main-content-scroll .letsco-category-title-bar h1,
html.dark #main-content-scroll .letsco-category-title-bar h1 span,
html.dark #main-content-scroll .letsco-category-title-bar p {
    color: #ffffff !important;
}

/* Subcategory bar text just below the hero image. Active pills remain white on their filled background. */
html:not(.dark) #main-content-scroll .letsco-subcategory-bar button:not(.text-white),
html:not(.dark) #main-content-scroll .letsco-subcategory-bar button:not(.text-white) span {
    color: #1f2933 !important;
}

html.dark #main-content-scroll .letsco-subcategory-bar button,
html.dark #main-content-scroll .letsco-subcategory-bar button span {
    color: #ffffff !important;
}

#main-content-scroll .letsco-subcategory-bar button.text-white,
#main-content-scroll .letsco-subcategory-bar button.text-white span {
    color: #ffffff !important;
}


/* LetsCo v1.1.3: subcategory banner links are always white.
   The subcategory banner uses a dark background in this theme, so these links should not switch to dark charcoal in light mode. */
#main-content-scroll .letsco-subcategory-bar,
#main-content-scroll .letsco-subcategory-bar a,
#main-content-scroll .letsco-subcategory-bar button,
#main-content-scroll .letsco-subcategory-bar button span,
#main-content-scroll .letsco-subcategory-bar button i,
#main-content-scroll .letsco-subcategory-bar svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

#main-content-scroll .letsco-subcategory-bar button:hover,
#main-content-scroll .letsco-subcategory-bar button:hover span,
#main-content-scroll .letsco-subcategory-bar button:hover i,
#main-content-scroll .letsco-subcategory-bar button:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}


/* LetsCo v1.1.4: category and landing page titles stay white.
   These title bands sit on dark/brand backgrounds in this theme, so the title text should not switch to dark charcoal in light mode. */
#main-content-scroll .letsco-page-title,
#main-content-scroll .letsco-page-title span,
#main-content-scroll .letsco-page-subtitle,
#main-content-scroll .letsco-category-title-bar h1,
#main-content-scroll .letsco-category-title-bar h1 span,
#main-content-scroll .letsco-category-title-bar p,
#main-content-scroll .letsco-landing-page .letsco-page-title,
#main-content-scroll .letsco-landing-page .letsco-page-title span,
#main-content-scroll .letsco-landing-page .letsco-page-subtitle,
#main-content-scroll .letsco-landing-content-area > h1,
#main-content-scroll .letsco-landing-content-area > h2,
#main-content-scroll .letsco-landing-content-area > h3 {
    color: #ffffff !important;
}


/* LetsCo v1.1.5: hard override for title bands.
   The category/landing title bars sit on an always-dark background, so title text must stay white even in light mode. */
#main-content-scroll .letsco-category-title-bar,
#main-content-scroll .letsco-category-title-bar *,
#main-content-scroll .letsco-landing-title-bar,
#main-content-scroll .letsco-landing-title-bar *,
#main-content-scroll .letsco-hero-title-band,
#main-content-scroll .letsco-hero-title-band *,
#main-content-scroll .letsco-page-title,
#main-content-scroll .letsco-page-title *,
#main-content-scroll .letsco-page-subtitle {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* LetsCo v1.1.7: standard/non-category page content text + favicon support. */
#main-content-scroll .letsco-standard-page-content,
#main-content-scroll .letsco-standard-page-content :where(p, li, span, strong, em, small, div, blockquote),
#main-content-scroll .letsco-standard-page-content :where(h1, h2, h3, h4, h5, h6),
#letsco-wp-page-content .letsco-standard-page-content,
#letsco-wp-page-content .letsco-standard-page-content :where(p, li, span, strong, em, small, div, blockquote),
#letsco-wp-page-content .letsco-standard-page-content :where(h1, h2, h3, h4, h5, h6) {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

#main-content-scroll .letsco-standard-page-content a,
#letsco-wp-page-content .letsco-standard-page-content a {
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
}

#main-content-scroll .letsco-standard-page-content .letsco-page-title,
#main-content-scroll .letsco-standard-page-content .letsco-page-title *,
#main-content-scroll .letsco-standard-page-content .letsco-page-subtitle,
#main-content-scroll .letsco-standard-page-content .letsco-page-subtitle * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* LetsCo v1.1.8: mobile header requested fixes + mobile banner visibility. */
@media (max-width: 767px) {
    #header-container .letsco-mobile-header-tagline {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif !important;
        text-align: center !important;
    }

    #header-container a[href="#signup-section"] {
        font-size: 12px !important;
        padding: 6px 12px !important;
        line-height: 1 !important;
    }

    #main-content-scroll .letsco-category-page .letsco-travel-expedia-banner,
    #main-content-scroll .letsco-category-page [alt="Philanthropic Banner"] {
        display: block;
    }

    #main-content-scroll .letsco-category-page .letsco-travel-expedia-banner iframe {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 728 / 90 !important;
        background: transparent !important;
    }
}


/* LetsCo v1.2.0: mobile carousel caption above image + smaller mobile signup button. */
@media (max-width: 767px) {
    #main-content-scroll .letsco-carousel-slide {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    #main-content-scroll .letsco-carousel-caption {
        position: relative !important;
        order: -1 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 3px 8px 4px !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.82) !important;
        text-align: center !important;
    }

    #main-content-scroll .letsco-carousel-caption h2 {
        font-size: 18px !important;
        line-height: 1.12 !important;
        text-align: center !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        margin: 0 !important;
    }
}


/* LetsCo v1.2.1: product-card light mode cleanup.
   Dark mode card styling is intentionally left unchanged. In light mode, the
   product-card interior stays white, the border is dark charcoal, and card text
   remains LetsCo blue like the price. Applies on desktop and mobile. */
html:not(.dark) #main-content-scroll .letsco-product-card > div {
    background-color: #ffffff !important;
    border: 1.5px solid #1f2933 !important;
    box-shadow: none !important;
}

html:not(.dark) #main-content-scroll .letsco-product-card .aspect-square,
html:not(.dark) #main-content-scroll .letsco-product-card [class*="aspect-square"] {
    background-color: #ffffff !important;
}

html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-body,
html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-affiliate,
html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-name,
html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-desc,
html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-price,
html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-btn {
    color: #53a7e4 !important;
}

html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-footer {
    border-top-color: #1f2933 !important;
}

html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-btn {
    border-color: #53a7e4 !important;
    background: transparent !important;
}

html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-btn:hover {
    background: #53a7e4 !important;
    color: #ffffff !important;
}

html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-stars,
html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-stars span,
html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-stars svg,
html:not(.dark) #main-content-scroll .letsco-product-card .letsco-card-stars .letsco-rating-star {
    color: #facc15 !important;
    fill: #facc15 !important;
}

/* Same light-mode cleanup for WooCommerce product cards, when WooCommerce output is used. */
html:not(.dark) #main-content-scroll .woocommerce ul.products li.product,
html:not(.dark) #main-content-scroll .woocommerce-page ul.products li.product {
    background-color: #ffffff !important;
    border: 1.5px solid #1f2933 !important;
    border-radius: 1.25rem !important;
    padding: 12px !important;
    box-shadow: none !important;
}

html:not(.dark) #main-content-scroll .woocommerce ul.products li.product .woocommerce-loop-product__title,
html:not(.dark) #main-content-scroll .woocommerce ul.products li.product .price,
html:not(.dark) #main-content-scroll .woocommerce ul.products li.product .button,
html:not(.dark) #main-content-scroll .woocommerce-page ul.products li.product .woocommerce-loop-product__title,
html:not(.dark) #main-content-scroll .woocommerce-page ul.products li.product .price,
html:not(.dark) #main-content-scroll .woocommerce-page ul.products li.product .button {
    color: #53a7e4 !important;
}

/* Note: .button background is now controlled by the v1.2.8 block which uses a
   filled #53a7e4 so External/Affiliate product buttons (e.g. Hostinger) are
   always visible. The transparent rule that was here has been removed. */
html:not(.dark) #main-content-scroll .woocommerce ul.products li.product .button,
html:not(.dark) #main-content-scroll .woocommerce-page ul.products li.product .button {
    border: 1.5px solid #53a7e4 !important;
    border-radius: 9999px !important;
}


/* LetsCo v1.2.2: sidebar Top Trends, category/subcategory hero consistency, and carousel caption alignment. */
@media (max-width: 767px) {
    #main-content-scroll .letsco-category-hero-img {
        width: 100% !important;
        height: 7rem !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    #main-content-scroll .letsco-carousel-slide {
        position: relative !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    #main-content-scroll .letsco-carousel-caption {
        position: absolute !important;
        order: 0 !important;
        left: 0.5rem !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        width: 82% !important;
        max-width: 82% !important;
        margin: 0 !important;
        padding: 0.5rem !important;
        border-radius: 0.75rem !important;
        background: rgba(0, 0, 0, 0.42) !important;
        text-align: left !important;
        z-index: 5 !important;
    }

    #main-content-scroll .letsco-carousel-caption h2 {
        font-size: 1.05rem !important;
        line-height: 1.1 !important;
        text-align: left !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        margin: 0 !important;
    }
}

@media (min-width: 768px) {
    #main-content-scroll .letsco-carousel-caption {
        left: 1.5rem !important;
        padding-left: 0 !important;
        text-align: left !important;
    }

    #main-content-scroll .letsco-carousel-caption h2 {
        text-align: left !important;
    }
}

#main-content-scroll .letsco-subcategory-page,
#main-content-scroll .letsco-subcategory-page h1,
#main-content-scroll .letsco-subcategory-page h2,
#main-content-scroll .letsco-subcategory-page h3,
#main-content-scroll .letsco-subcategory-page p,
#main-content-scroll .letsco-subcategory-page span,
#main-content-scroll .letsco-subcategory-page button,
#main-content-scroll .letsco-subcategory-page a,
#main-content-scroll .letsco-subcategory-page div {
    font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif !important;
}


/* LetsCo v1.2.3: desktop carousel sizing, mobile carousel text area, and subcategory link-row cleanup. */
@media (min-width: 768px) {
    #main-content-scroll .letsco-landing-page .letsco-carousel-slide {
        height: clamp(190px, 20vw, 275px) !important;
        min-height: 0 !important;
        max-height: 275px !important;
        overflow: hidden !important;
        align-items: center !important;
    }

    #main-content-scroll .letsco-landing-page .letsco-carousel-slide picture,
    #main-content-scroll .letsco-landing-page .letsco-carousel-slide img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    #main-content-scroll .letsco-landing-page .letsco-carousel-slide img {
        min-height: 0 !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    #main-content-scroll .letsco-landing-page .letsco-carousel-caption {
        left: 0.75rem !important;
        padding-left: 0 !important;
        max-width: min(34rem, 42%) !important;
        width: min(34rem, 42%) !important;
    }
}

@media (max-width: 767px) {
    #main-content-scroll .letsco-landing-page .letsco-carousel-caption {
        left: 0.35rem !important;
        width: 40% !important;
        max-width: 40% !important;
        padding: 0.35rem !important;
        border-radius: 0.55rem !important;
    }

    #main-content-scroll .letsco-landing-page .letsco-carousel-caption h2 {
        font-size: clamp(0.816rem, 3.72vw, 1.14rem) !important;
        line-height: 1.05 !important;
        text-align: left !important;
    }
}


/* LetsCo v1.2.4: category/subcategory page non-card text stays white in light mode too.
   Product card styling is intentionally untouched. */
#main-content-scroll .letsco-category-page .letsco-category-section-title,
#main-content-scroll .letsco-category-page .letsco-category-section-title *,
#main-content-scroll .letsco-category-page .letsco-category-filter-control,
#main-content-scroll .letsco-category-page .letsco-category-filter-control *,
html:not(.dark) #main-content-scroll .letsco-category-page .letsco-category-section-title,
html:not(.dark) #main-content-scroll .letsco-category-page .letsco-category-section-title *,
html:not(.dark) #main-content-scroll .letsco-category-page .letsco-category-filter-control,
html:not(.dark) #main-content-scroll .letsco-category-page .letsco-category-filter-control *,
html.dark #main-content-scroll .letsco-category-page .letsco-category-section-title,
html.dark #main-content-scroll .letsco-category-page .letsco-category-section-title *,
html.dark #main-content-scroll .letsco-category-page .letsco-category-filter-control,
html.dark #main-content-scroll .letsco-category-page .letsco-category-filter-control * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Keep product cards exactly on their existing light/dark rules. */
#main-content-scroll .letsco-product-card .letsco-card-name,
#main-content-scroll .letsco-product-card .letsco-card-affiliate,
#main-content-scroll .letsco-product-card .letsco-card-desc,
#main-content-scroll .letsco-product-card .letsco-card-price,
#main-content-scroll .letsco-product-card .letsco-card-btn {
    -webkit-text-fill-color: currentColor !important;
}


/* LetsCo v1.2.5: increase mobile carousel caption text by 20%. */
@media (max-width: 767px) {
    #main-content-scroll .letsco-landing-page .letsco-carousel-caption h2 {
        font-size: clamp(0.816rem, 3.72vw, 1.14rem) !important;
        line-height: 1.05 !important;
    }
}


/* LetsCo v1.2.6: Footer text should stay white in both light and dark mode. */
#mobile-footer-container,
#mobile-footer-container button,
#mobile-footer-container .letsco-footer-links,
#mobile-footer-container .letsco-footer-links a,
#main-content-scroll .letsco-site-footer,
#main-content-scroll .letsco-site-footer .letsco-footer-links,
#main-content-scroll .letsco-site-footer .letsco-footer-links a,
body .letsco-site-footer .letsco-footer-links,
body .letsco-site-footer .letsco-footer-links a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#mobile-footer-container svg,
#mobile-footer-container .letsco-footer-links svg,
#main-content-scroll .letsco-site-footer .letsco-footer-links svg,
body .letsco-site-footer .letsco-footer-links svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

#mobile-footer-container .letsco-footer-links a:hover,
#main-content-scroll .letsco-site-footer .letsco-footer-links a:hover,
body .letsco-site-footer .letsco-footer-links a:hover {
    color: #4aa0e6 !important;
    -webkit-text-fill-color: #4aa0e6 !important;
}


/* LetsCo v1.2.7: WooCommerce shortcode output on category pages.
   The category pages now use real WooCommerce product shortcodes instead of the
   custom placeholder product grid. These rules only make the shortcode output fit
   cleanly inside the LetsCo content area; WooCommerce still controls product data. */
#main-content-scroll .letsco-woocommerce-products-wrap {
    width: 100%;
}

#main-content-scroll .letsco-woocommerce-products-wrap .woocommerce {
    width: 100%;
}

#main-content-scroll .letsco-woocommerce-products-wrap ul.products {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .woocommerce-loop-product__title,
#main-content-scroll .letsco-woocommerce-products-wrap .price,
#main-content-scroll .letsco-woocommerce-products-wrap .button {
    font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .woocommerce-info,
#main-content-scroll .letsco-woocommerce-products-wrap .woocommerce-message,
#main-content-scroll .letsco-woocommerce-products-wrap .woocommerce-error,
#main-content-scroll .letsco-woocommerce-unavailable {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* LetsCo v1.2.8: External/Affiliate product card fixes.
   WooCommerce External/Affiliate products (e.g. Hostinger) render a "Buy Product"
   anchor instead of an "Add to cart" button. The existing transparent-background
   rule made that anchor invisible in light mode. These rules restore full visibility,
   give the card a minimum image height so it doesn't collapse when no image is set,
   and ensure title/price/button text is always readable in both light and dark mode.
   -------------------------------------------------------------------------------- */

/* -- Card container: match the letsco-product-card look for WC cards ------------ */
#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product {
    border-radius: 1.25rem !important;
    padding: 12px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* -- Product image: ensure a minimum height so the card doesn't collapse --------- */
#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product a img,
#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .woocommerce-placeholder {
    min-height: 140px !important;
    object-fit: cover !important;
    border-radius: 0.75rem !important;
    background-color: #f2f2f2 !important;
}

/* -- Button/link: solid fill so "Buy Product" is actually visible ---------------- */
#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .button,
#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product a.button,
#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .product_type_external + .button,
#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product.product_type_external .button {
    display: inline-block !important;
    background: #53a7e4 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1.5px solid #53a7e4 !important;
    border-radius: 9999px !important;
    padding: 6px 16px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    white-space: nowrap !important;
    width: 100% !important;
    margin-top: 8px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .button:hover,
#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product a.button:hover,
#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product.product_type_external .button:hover {
    background: #3a8ec8 !important;
    border-color: #3a8ec8 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* -- Light mode: white card surface, dark border, brand-blue title/price --------- */
html:not(.dark) #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product {
    background-color: #ffffff !important;
    border: 1.5px solid #1f2933 !important;
}

html:not(.dark) #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .woocommerce-loop-product__title,
html:not(.dark) #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .price,
html:not(.dark) #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .price .amount,
html:not(.dark) #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .price bdi {
    color: #53a7e4 !important;
    -webkit-text-fill-color: #53a7e4 !important;
}

/* -- Dark mode: dark card surface, subtle border, white title/price -------------- */
html.dark #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
}

html.dark #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .woocommerce-loop-product__title,
html.dark #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .price,
html.dark #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .price .amount,
html.dark #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .price bdi {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* -- Unconditional: title must always be visible regardless of mode -------------- */
#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    font-family: 'Gilroy', 'Plus Jakarta Sans', 'Nunito', sans-serif !important;
    line-height: 1.3 !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
}

/* -- Dark mode button: stays filled blue on dark cards -------------------------- */
html.dark #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product .button,
html.dark #main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product a.button {
    background: #53a7e4 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #53a7e4 !important;
}

/* -- Star ratings stay yellow on WC cards --------------------------------------- */
#main-content-scroll .letsco-woocommerce-products-wrap .star-rating,
#main-content-scroll .letsco-woocommerce-products-wrap .star-rating::before,
#main-content-scroll .letsco-woocommerce-products-wrap .star-rating span,
#main-content-scroll .letsco-woocommerce-products-wrap .star-rating span::before {
    color: #facc15 !important;
}

/* -- Product grid: override WooCommerce float-based layout with CSS Grid.
   WooCommerce injects inline style="width: X%" and float:left on li.product
   via PHP — these must be !important to win. Also needs overflow:hidden clearfix
   on the ul so the container doesn't collapse to zero height. -------------- */
#main-content-scroll .letsco-woocommerce-products-wrap .woocommerce,
#main-content-scroll .letsco-woocommerce-products-wrap .woocommerce-page {
    width: 100% !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    overflow: visible !important;
    width: 100% !important;
}

/* Override the inline width/float WooCommerce sets on every li.product */
#main-content-scroll .letsco-woocommerce-products-wrap ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    clear: none !important;
}

@media (max-width: 767px) {
    #main-content-scroll .letsco-woocommerce-products-wrap ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* -- "No products found" notice: keep it readable ------------------------------- */
#main-content-scroll .letsco-woocommerce-products-wrap .woocommerce-info {
    background: transparent !important;
    border-left-color: #53a7e4 !important;
}


/* LetsCo v1.3.1: PHP-rendered letsco-product-card grid (WooCommerce products queried
   directly and output as letsco-product-card markup — identical to JS mock cards).
   The cards already inherit all .letsco-product-card rules. This block only sets the
   grid wrapper and ensures the wrap container doesn't clip or constrain the cards. */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-cards-grid {
    width: 100%;
    padding: 0;
}

/* Light-mode card surface for PHP-rendered cards (mirrors the JS dark-mode defaults). */
html:not(.dark) #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card > div {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

/* Unavailable / debug notice contrast. */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-woocommerce-unavailable {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 24px;
    font-size: 0.9rem;
}


/* LetsCo v1.3.2: WooCommerce product cards — smaller size + image always fits without cropping.
   Only targets cards inside .letsco-woocommerce-products-wrap so JS mock cards are unaffected. */

/* Reduce card min-height (default is 268px) */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card > div {
    min-height: 210px !important;
}

/* Reduce card body min-height to match */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card .letsco-card-body {
    min-height: 100px !important;
}

/* Image area: use a fixed height instead of aspect-square so it doesn't blow up on tall logos */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card .aspect-square,
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card [class*="aspect-square"] {
    aspect-ratio: unset !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    padding: 8px !important;
}

html.dark #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card .aspect-square,
html.dark #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card [class*="aspect-square"] {
    background-color: #2a2a2a !important;
}

/* Image itself: contain (never crop), centre within the box */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 94px !important;  /* 110px box minus 8px padding each side */
}

/* Tighten card body padding to suit the smaller card */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-body {
    padding: 8px 8px 6px !important;
    gap: 4px !important;
}

/* Slightly smaller name text to fit the reduced card width */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-name {
    font-size: 13px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-price {
    font-size: 12px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-btn {
    font-size: 11px !important;
    padding: 5px 6px !important;
}


/* LetsCo v1.3.3: WooCommerce/affiliate card sizing + uncropped wide images.
   This keeps external products such as Hostinger a little smaller and ensures
   600x300-style images display fully instead of using cropped WC thumbnails. */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-cards-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card > div {
    min-height: 198px !important;
    padding: 7px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card .letsco-card-body {
    min-height: 92px !important;
    padding: 7px 7px 6px !important;
    gap: 3px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card .aspect-square,
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card [class*="aspect-square"] {
    aspect-ratio: unset !important;
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
    padding: 10px !important;
    overflow: hidden !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 82px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-name {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-affiliate,
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-price {
    font-size: 11px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-desc {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-btn {
    font-size: 10.5px !important;
    padding: 5px 6px !important;
}


/* LetsCo v1.3.6: requested page text/logo updates. */
.dark #main-content-scroll .letsco-standard-page-content,
.dark #main-content-scroll .letsco-standard-page-content :where(p, li, span, strong, em, small, div, blockquote),
.dark #main-content-scroll .letsco-standard-page-content :where(h1, h2, h3, h4, h5, h6),
.dark #letsco-wp-page-content .letsco-standard-page-content,
.dark #letsco-wp-page-content .letsco-standard-page-content :where(p, li, span, strong, em, small, div, blockquote),
.dark #letsco-wp-page-content .letsco-standard-page-content :where(h1, h2, h3, h4, h5, h6) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.dark #main-content-scroll .letsco-standard-page-content a,
.dark #letsco-wp-page-content .letsco-standard-page-content a {
    color: #4aa0e6 !important;
    -webkit-text-fill-color: #4aa0e6 !important;
}


/* LetsCo v1.3.7: keep text readable inside dark blocks on standard pages.
   Standard pages use black text in light mode, but some callout blocks intentionally
   turn black/dark. Force those dark-surface blocks and their children to white. */
#main-content-scroll .letsco-standard-page-content :is([class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"], [style*="background:#0"], [style*="background: #0"], [style*="background-color:#0"], [style*="background-color: #0"], [style*="background:#1"], [style*="background: #1"], [style*="background-color:#1"], [style*="background-color: #1"], [style*="background:rgb(0"], [style*="background: rgb(0"], [style*="background-color:rgb(0"], [style*="background-color: rgb(0"]),
#main-content-scroll .letsco-standard-page-content :is([class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"], [style*="background:#0"], [style*="background: #0"], [style*="background-color:#0"], [style*="background-color: #0"], [style*="background:#1"], [style*="background: #1"], [style*="background-color:#1"], [style*="background-color: #1"], [style*="background:rgb(0"], [style*="background: rgb(0"], [style*="background-color:rgb(0"], [style*="background-color: rgb(0"]) *,
#letsco-wp-page-content .letsco-standard-page-content :is([class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"], [style*="background:#0"], [style*="background: #0"], [style*="background-color:#0"], [style*="background-color: #0"], [style*="background:#1"], [style*="background: #1"], [style*="background-color:#1"], [style*="background-color: #1"], [style*="background:rgb(0"], [style*="background: rgb(0"], [style*="background-color:rgb(0"], [style*="background-color: rgb(0"]),
#letsco-wp-page-content .letsco-standard-page-content :is([class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"], [style*="background:#0"], [style*="background: #0"], [style*="background-color:#0"], [style*="background-color: #0"], [style*="background:#1"], [style*="background: #1"], [style*="background-color:#1"], [style*="background-color: #1"], [style*="background:rgb(0"], [style*="background: rgb(0"], [style*="background-color:rgb(0"], [style*="background-color: rgb(0"]) * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dark #main-content-scroll .letsco-standard-page-content [class*="dark:bg"],
html.dark #main-content-scroll .letsco-standard-page-content [class*="dark:bg"] *,
#main-content-scroll.dark .letsco-standard-page-content [class*="dark:bg"],
#main-content-scroll.dark .letsco-standard-page-content [class*="dark:bg"] *,
html.dark #letsco-wp-page-content .letsco-standard-page-content [class*="dark:bg"],
html.dark #letsco-wp-page-content .letsco-standard-page-content [class*="dark:bg"] * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Keep links/buttons inside dark callouts readable too. */
#main-content-scroll .letsco-standard-page-content :is([class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"], [style*="background:#0"], [style*="background: #0"], [style*="background-color:#0"], [style*="background-color: #0"], [style*="background:#1"], [style*="background: #1"], [style*="background-color:#1"], [style*="background-color: #1"]) :where(a, button),
html.dark #main-content-scroll .letsco-standard-page-content [class*="dark:bg"] :where(a, button),
#main-content-scroll.dark .letsco-standard-page-content [class*="dark:bg"] :where(a, button) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* LetsCo v1.3.8: convert standard-page dark content blocks from black to LetsCo blue.
   Scope is limited to standard/non-category page content so product cards and category pages stay unchanged. */
html.dark #main-content-scroll .letsco-standard-page-content :is([class*="dark:bg-[#1a1a1a]"], [class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"], [style*="background:#0"], [style*="background: #0"], [style*="background-color:#0"], [style*="background-color: #0"], [style*="background:#1"], [style*="background: #1"], [style*="background-color:#1"], [style*="background-color: #1"]),
html.dark #letsco-wp-page-content .letsco-standard-page-content :is([class*="dark:bg-[#1a1a1a]"], [class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"], [style*="background:#0"], [style*="background: #0"], [style*="background-color:#0"], [style*="background-color: #0"], [style*="background:#1"], [style*="background: #1"], [style*="background-color:#1"], [style*="background-color: #1"]),
#main-content-scroll.dark .letsco-standard-page-content :is([class*="dark:bg-[#1a1a1a]"], [class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"], [style*="background:#0"], [style*="background: #0"], [style*="background-color:#0"], [style*="background-color: #0"], [style*="background:#1"], [style*="background: #1"], [style*="background-color:#1"], [style*="background-color: #1"]) {
    background: #4aa0e6 !important;
    background-color: #4aa0e6 !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
}

html.dark #main-content-scroll .letsco-standard-page-content :is([class*="dark:bg-[#1a1a1a]"], [class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"], [style*="background:#0"], [style*="background: #0"], [style*="background-color:#0"], [style*="background-color: #0"], [style*="background:#1"], [style*="background: #1"], [style*="background-color:#1"], [style*="background-color: #1"]) *,
html.dark #letsco-wp-page-content .letsco-standard-page-content :is([class*="dark:bg-[#1a1a1a]"], [class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"], [style*="background:#0"], [style*="background: #0"], [style*="background-color:#0"], [style*="background-color: #0"], [style*="background:#1"], [style*="background: #1"], [style*="background-color:#1"], [style*="background-color: #1"]) *,
#main-content-scroll.dark .letsco-standard-page-content :is([class*="dark:bg-[#1a1a1a]"], [class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"], [style*="background:#0"], [style*="background: #0"], [style*="background-color:#0"], [style*="background-color: #0"], [style*="background:#1"], [style*="background: #1"], [style*="background-color:#1"], [style*="background-color: #1"]) * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dark #main-content-scroll .letsco-standard-page-content :is([class*="dark:bg-[#1a1a1a]"], [class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"]) a,
html.dark #main-content-scroll .letsco-standard-page-content :is([class*="dark:bg-[#1a1a1a]"], [class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"]) button,
#main-content-scroll.dark .letsco-standard-page-content :is([class*="dark:bg-[#1a1a1a]"], [class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"]) a,
#main-content-scroll.dark .letsco-standard-page-content :is([class*="dark:bg-[#1a1a1a]"], [class*="bg-black"], [class*="bg-gray-900"], [class*="bg-slate-900"], [class*="bg-zinc-900"], [class*="bg-neutral-900"]) button {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* LetsCo v1.3.9: force standard-page callout/content blocks to LetsCo blue in light and dark mode.
   This fixes blocks that still appeared black in light mode because their dark background classes remained present. */
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="dark:bg"],
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-[#f8f9fa]"],
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-black"],
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-gray-900"],
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-slate-900"],
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-zinc-900"],
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-neutral-900"],
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="dark:bg"],
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-[#f8f9fa]"],
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-black"],
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-gray-900"],
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-slate-900"],
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-zinc-900"],
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-neutral-900"] {
    background: #4aa0e6 !important;
    background-color: #4aa0e6 !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="dark:bg"] *,
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-[#f8f9fa]"] *,
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-black"] *,
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-gray-900"] *,
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-slate-900"] *,
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-zinc-900"] *,
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-neutral-900"] *,
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="dark:bg"] *,
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-[#f8f9fa]"] *,
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-black"] *,
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-gray-900"] *,
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-slate-900"] *,
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-zinc-900"] *,
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-neutral-900"] * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="dark:bg"] :where(a, button),
#main-content-scroll .letsco-standard-page-content :is(section, div)[class*="bg-[#f8f9fa]"] :where(a, button),
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="dark:bg"] :where(a, button),
#letsco-wp-page-content .letsco-standard-page-content :is(section, div)[class*="bg-[#f8f9fa]"] :where(a, button) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* LetsCo v1.4.2: smaller product cards, mobile carousel text cleanup, and category banner placement. */
/* Product cards — about 10% smaller without cropping images or hiding text. */
#main-content-scroll .letsco-landing-page .letsco-product-card > div {
    min-height: 241px !important;
    padding: 7px !important;
}

#main-content-scroll .letsco-landing-page .letsco-card-body {
    min-height: 119px !important;
    padding: 10px 9px 7px !important;
    gap: 5px !important;
}

#main-content-scroll .letsco-landing-page .letsco-card-name,
#main-content-scroll .letsco-category-page .letsco-card-name {
    font-size: 14.4px !important;
    line-height: 1.25 !important;
}

#main-content-scroll .letsco-landing-page .letsco-card-price,
#main-content-scroll .letsco-category-page .letsco-card-price {
    font-size: 14.4px !important;
}

#main-content-scroll .letsco-landing-page .letsco-card-desc,
#main-content-scroll .letsco-category-page .letsco-card-desc {
    font-size: 10.8px !important;
    line-height: 1.35 !important;
}

#main-content-scroll .letsco-landing-page .letsco-card-affiliate,
#main-content-scroll .letsco-category-page .letsco-card-affiliate {
    font-size: 10px !important;
}

#main-content-scroll .letsco-landing-page .letsco-card-btn,
#main-content-scroll .letsco-category-page .letsco-card-btn {
    font-size: 10.8px !important;
    padding: 5px 8px !important;
}

/* WooCommerce/LetsCo-rendered category cards had already been reduced; trim them a further 10%. */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card > div {
    min-height: 178px !important;
    padding: 6px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card .letsco-card-body {
    min-height: 83px !important;
    padding: 6px 6px 5px !important;
    gap: 3px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card .aspect-square,
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card [class*="aspect-square"] {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    padding: 8px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card img {
    max-height: 76px !important;
    object-fit: contain !important;
    object-position: center center !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-name {
    font-size: 11.25px !important;
    line-height: 1.22 !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-affiliate,
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-price {
    font-size: 10px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-desc {
    font-size: 9.5px !important;
    line-height: 1.25 !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-btn {
    font-size: 9.5px !important;
    padding: 4px 6px !important;
}

/* Mobile carousel: no background text box; color matches desktop carousel color choices. */
@media (max-width: 767px) {
    #main-content-scroll .letsco-carousel-caption {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        width: 40% !important;
        max-width: 40% !important;
        left: 0.5rem !important;
    }
}

/* Category commerce banners: span the full grid row wherever the JS places them. */
#main-content-scroll .letsco-category-commerce-banner {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}


/* LetsCo v1.4.5: slide 1 carousel text is black on desktop and mobile. */
#main-content-scroll .letsco-carousel-slide:first-child .letsco-carousel-caption h2,
#main-content-scroll .letsco-carousel-slide:last-of-type .letsco-carousel-caption h2 {
    color: #000000 !important;
}


/* LetsCo v1.4.6: 10% smaller product cards, no image cropping, and 3 mobile cards per row.
   Scoped to product card areas only. */
#main-content-scroll .letsco-landing-page .letsco-product-card > div,
#main-content-scroll .letsco-category-page .letsco-product-card > div {
    min-height: 217px !important;
    padding: 7px !important;
}

#main-content-scroll .letsco-landing-page .letsco-product-card .aspect-square,
#main-content-scroll .letsco-category-page .letsco-product-card .aspect-square,
#main-content-scroll .letsco-landing-page .letsco-product-card [class*="aspect-square"],
#main-content-scroll .letsco-category-page .letsco-product-card [class*="aspect-square"] {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    aspect-ratio: unset !important;
}

#main-content-scroll .letsco-landing-page .letsco-product-card img,
#main-content-scroll .letsco-category-page .letsco-product-card img {
    object-fit: contain !important;
    object-position: center center !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

#main-content-scroll .letsco-landing-page .letsco-card-body,
#main-content-scroll .letsco-category-page .letsco-card-body {
    min-height: 107px !important;
    padding: 8px 8px 6px !important;
    gap: 4px !important;
}

#main-content-scroll .letsco-landing-page .letsco-card-name,
#main-content-scroll .letsco-category-page .letsco-card-name {
    font-size: 13px !important;
}

#main-content-scroll .letsco-landing-page .letsco-card-price,
#main-content-scroll .letsco-category-page .letsco-card-price {
    font-size: 13px !important;
}

#main-content-scroll .letsco-landing-page .letsco-card-desc,
#main-content-scroll .letsco-category-page .letsco-card-desc {
    font-size: 9.75px !important;
}

#main-content-scroll .letsco-landing-page .letsco-card-btn,
#main-content-scroll .letsco-category-page .letsco-card-btn {
    font-size: 9.75px !important;
    padding: 4px 7px !important;
}

/* WooCommerce/affiliate cards: further 10% trim while preserving full images. */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

@media (min-width: 640px) {
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-cards-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-cards-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card > div {
    min-height: 160px !important;
    padding: 5px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card .aspect-square,
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card [class*="aspect-square"] {
    height: 83px !important;
    min-height: 83px !important;
    max-height: 83px !important;
    padding: 7px !important;
    aspect-ratio: unset !important;
    overflow: hidden !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card img {
    object-fit: contain !important;
    object-position: center center !important;
    max-width: 100% !important;
    max-height: 69px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card .letsco-card-body {
    min-height: 75px !important;
    padding: 5px 5px 4px !important;
    gap: 2px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-name {
    font-size: 10.25px !important;
    line-height: 1.18 !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-affiliate,
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-price {
    font-size: 9px !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-desc {
    font-size: 8.75px !important;
    line-height: 1.2 !important;
}

#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-btn {
    font-size: 8.75px !important;
    padding: 4px 5px !important;
}

@media (max-width: 639px) {
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card > div {
        min-height: 154px !important;
    }
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card .aspect-square,
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card [class*="aspect-square"] {
        height: 78px !important;
        min-height: 78px !important;
        max-height: 78px !important;
        padding: 6px !important;
    }
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-product-card img {
        max-height: 66px !important;
    }
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-name {
        font-size: 9.5px !important;
    }
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-desc {
        font-size: 8px !important;
    }
    #main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-btn {
        font-size: 8px !important;
        padding: 3px 4px !important;
    }
}

/* Remove oversized arrow glyphs from WooCommerce/affiliate product cards. */
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-affiliate,
#main-content-scroll .letsco-woocommerce-products-wrap .letsco-card-btn {
    letter-spacing: 0 !important;
}


/* LetsCo v1.4.7: mobile header layout + text-only signup + slide 1 mobile text color. */
#header-container .letsco-signup-link {
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

#header-container .letsco-signup-link:hover,
#header-container .letsco-signup-link:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

#header-container .letsco-header-tagline {
    display: none !important;
}

@media (max-width: 767px) {
    #header-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #header-container .letsco-mobile-header-left,
    #header-container .letsco-mobile-header-actions {
        min-width: 96px;
    }

    #header-container .letsco-mobile-header-left button,
    #header-container .letsco-mobile-header-left svg,
    #header-container .letsco-mobile-header-left i {
        color: #ffffff !important;
    }

    #header-container .letsco-mobile-header-left button[aria-label="Toggle Menu"] {
        margin-right: 1.25rem !important;
    }

    #header-container .letsco-mobile-header-logo {
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: max-content !important;
        max-width: 42vw !important;
        overflow: visible !important;
        text-align: center !important;
        z-index: 20 !important;
    }

    #header-container .letsco-mobile-header-logo img {
        display: block !important;
        width: auto !important;
        max-width: min(145px, 40vw) !important;
        height: auto !important;
        max-height: 32px !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    #header-container .letsco-mobile-header-tagline {
        color: #ffffff !important;
        font-family: 'Gilroy', sans-serif !important;
    }

    #header-container .letsco-theme-toggle {
        color: #ffffff !important;
        margin-left: 0 !important;
    }

    #header-container .letsco-signup-link {
        font-size: 16px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        padding: 0 !important;
    }

    #main-content-scroll .letsco-carousel-slide:first-child .letsco-carousel-caption h2,
    #main-content-scroll .letsco-carousel-slide:first-child .letsco-carousel-caption h2 *,
    #main-content-scroll .letsco-carousel-slide:last-of-type .letsco-carousel-caption h2,
    #main-content-scroll .letsco-carousel-slide:last-of-type .letsco-carousel-caption h2 * {
        color: #000000 !important;
        text-shadow: none !important;
        filter: none !important;
    }
}


/* LetsCo v1.5.0: mobile header right controls alignment and no logo overlap. */
@media (max-width: 767px) {
    #header-container .letsco-mobile-header-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        position: relative !important;
    }

    #header-container .letsco-mobile-header-left {
        position: relative !important;
        z-index: 30 !important;
        min-width: 92px !important;
        max-width: 30vw !important;
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
    }

    #header-container .letsco-mobile-header-actions {
        position: relative !important;
        z-index: 40 !important;
        min-width: 118px !important;
        max-width: 35vw !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.75rem !important;
        white-space: nowrap !important;
    }

    #header-container .letsco-mobile-header-logo {
        z-index: 15 !important;
        width: auto !important;
        max-width: 34vw !important;
        pointer-events: none !important;
    }

    #header-container .letsco-mobile-header-logo img {
        max-width: min(128px, 34vw) !important;
        max-height: 30px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    #header-container .letsco-mobile-header-tagline {
        font-size: clamp(7px, 2vw, 9px) !important;
        line-height: 1 !important;
        max-width: 34vw !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    #header-container .letsco-theme-toggle {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
    }

    #header-container .letsco-signup-link {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        font-size: 15px !important;
    }
}


/* LetsCo v1.5.1: remove mobile logo tagline and reduce mobile logo further so it is never cropped. */
@media (max-width: 767px) {
    #header-container .letsco-mobile-header-tagline {
        display: none !important;
    }

    #header-container .letsco-mobile-header-logo {
        max-width: 30vw !important;
        overflow: visible !important;
    }

    #header-container .letsco-mobile-header-logo img {
        max-width: min(110px, 30vw) !important;
        max-height: 24px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}


/* LetsCo v1.5.2: desktop/sidebar logo fit fix so the full logo never exceeds its container. */
@media (min-width: 768px) {
    #sidebar-container .letsco-desktop-logo-wrap,
    #header-container .letsco-desktop-logo-wrap {
        height: 40px !important;
        max-height: 40px !important;
        max-width: 150px !important;
        width: 150px !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 0 0 auto !important;
    }

    #sidebar-container .letsco-desktop-logo-img,
    #header-container .letsco-desktop-logo-img,
    #sidebar-container img[src*="letsco_logo_full"],
    #header-container img[src*="letsco_logo_full"] {
        display: block !important;
        width: auto !important;
        max-width: 142px !important;
        height: auto !important;
        max-height: 34px !important;
        object-fit: contain !important;
        object-position: left center !important;
        overflow: visible !important;
    }
}


/* LetsCo v1.5.3: tighten mobile header edge controls.
   Keeps hamburger/search far left and theme/sign-up far right with minimal spacing. */
@media (max-width: 767px) {
    #header-container {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    #header-container .letsco-mobile-header-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 0 !important;
    }

    #header-container .letsco-mobile-header-left {
        min-width: auto !important;
        max-width: 36vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        gap: 0.2rem !important;
    }

    #header-container .letsco-mobile-header-left button {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.1rem !important;
        padding-right: 0.1rem !important;
    }

    #header-container .letsco-mobile-header-left button[aria-label="Toggle Menu"] {
        margin-right: 0.2rem !important;
    }

    #header-container .letsco-mobile-header-left button[aria-label="Open Mobile Search"] {
        margin-right: 0 !important;
    }

    #header-container .letsco-mobile-header-actions {
        min-width: auto !important;
        max-width: 42vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        margin-left: auto !important;
        gap: 0.35rem !important;
        justify-content: flex-end !important;
    }

    #header-container .letsco-theme-toggle {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.1rem !important;
        padding-right: 0.1rem !important;
    }

    #header-container .letsco-signup-link {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}