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