/* ==========================================
   Product Card
========================================== */

.gti-product-card {
    list-style: none;
}

.gti-product-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.gti-card-image {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: #CFEAFF;
}

.gti-card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    object-position: center top;
    transition: .35s ease;
}

.gti-product-card:hover img {
    transform: scale(1.03);
}

/* ==========================================
   Badge
========================================== */

.gti-stock-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 20;
    padding: 8px 14px;
    border-radius: 999px;
    border: 2px solid #fff;
    font-size: 14px;
    font-weight: 700;
}

.gti-stock-badge.open {
    background: #00EBE3;
    color: #16213E;
}

.gti-stock-badge.low-stock {
    background: #D2A94F;
    color: #fff;
}

.gti-stock-badge.sold-out {
    background: #121C3280;
    color: #fff;
}

.gti-stock-badge.waitlist {
    background: #121C3280;
    color: #fff;
}

.gti-stock-badge.closed {
    background: #5A6579;
    color: #fff;
}

.gti-stock-badge.new {
    background: #0085EB;
    color: #fff;
}

/* ==========================================
   Floating Panel
========================================== */

.gti-card-content {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 12px 11px;
    background: rgba(255, 255, 255, .96);
    border-radius: 3px;
    z-index: 10;
    text-align: left;
}

/* ==========================================
   Typography
========================================== */

.gti-program-type {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .25em;
    color: #93A5BE;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.gti-title {
    margin: 0 0 24px;
    font-family: "PP Neue Corp", sans-serif;
    font-size: 52px;
    line-height: .92;
    color: #16213E;
    text-transform: uppercase;
}

/* ==========================================
   Button
========================================== */

.gti-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: #008CFF;
    border-radius: 3px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

/* ==========================================
    Woocommerce
========================================== */

.woocommerce ul.products li.product a img  {
    height: 450px;
}

/* ==========================================
   Product Carousel

   Reusable across any Divi row/module wrapping a
   WooCommerce product grid (ul.products): add the
   CSS Class "gti-carousel" to that module in the
   Divi Builder (Advanced tab > CSS ID & Classes) to
   turn its grid into a horizontally scrolling,
   snap-to-card carousel instead of wrapping rows.
   No markup or template changes needed per-row.
========================================== */

.gti-carousel .woocommerce {
    overflow: visible;
}

.gti-carousel ul.products {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 !important;
    padding: 4px 4px 24px;
}

.gti-carousel ul.products::-webkit-scrollbar {
    display: none;
}

/* Divi/WooCommerce ship their own !important grid widths at these same
   breakpoints, so matching !important here is the only reliable way to
   win the cascade regardless of a module's column count. */
.gti-carousel ul.products li.product {
    scroll-snap-align: start;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

/* Size each card off the module's own configured column count (the
   "columns-N" class Divi already renders on ul.products) so a row with
   exactly N products fills the width edge-to-edge with no dead space.
   Any products beyond N simply overflow the row, which is what turns
   into the scrollable/peeking carousel. */
.gti-carousel ul.products.columns-1 li.product {
    flex: 0 0 100% !important;
    width: 100% !important;
}

.gti-carousel ul.products.columns-2 li.product {
    flex: 0 0 calc((100% - 20px) / 2) !important;
    width: calc((100% - 20px) / 2) !important;
}

.gti-carousel ul.products.columns-3 li.product {
    flex: 0 0 calc((100% - 40px) / 3) !important;
    width: calc((100% - 40px) / 3) !important;
}

.gti-carousel ul.products.columns-4 li.product {
    flex: 0 0 calc((100% - 60px) / 4) !important;
    width: calc((100% - 60px) / 4) !important;
}

.gti-carousel ul.products.columns-5 li.product {
    flex: 0 0 calc((100% - 80px) / 5) !important;
    width: calc((100% - 80px) / 5) !important;
}

.gti-carousel ul.products.columns-6 li.product {
    flex: 0 0 calc((100% - 100px) / 6) !important;
    width: calc((100% - 100px) / 6) !important;
}

/* Pagination dots, injected after ".gti-carousel" by
   gti-product-carousel.js — one dot per card, tracking scroll position.
   Desktop rows fill edge-to-edge (see the columns-N rules above) and
   only overflow when a row has more products than its column count, so
   dots are mobile/tablet-only, where every row is a peeking carousel. */
.gti-carousel-dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

@media (max-width: 980px) {
    .gti-carousel-dots {
        display: flex;
    }
}

.gti-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #CBD5E1;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.gti-carousel-dot.is-active {
    width: 32px;
    background: #008CFF;
}

/* ==========================================
   Responsive
========================================== */

@media (max-width: 980px) {
    .gti-title {
        font-size: 40px;
        margin-bottom: 18px;
    }

    .woocommerce ul.products li.product a img {
        height: 380px;
    }

    .gti-stock-badge {
        top: 14px;
        right: 14px;
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Divi forces li.product to width:48%!important at this breakpoint;
       re-assert the carousel's own card width to keep the peek intact.
       [class*="columns-"] matches the specificity of the per-column
       rules above so this reliably wins regardless of column count. */
    .gti-carousel ul.products[class*="columns-"] li.product {
        flex-basis: clamp(240px, 46vw, 320px) !important;
        width: clamp(240px, 46vw, 320px) !important;
    }
}

@media (max-width: 767px) {
    .gti-title {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .gti-program-type {
        font-size: 12px;
        letter-spacing: .18em;
        margin-bottom: 8px;
    }

    .gti-card-content {
        padding: 10px 10px;
    }

    .gti-button {
        padding: 0px 5px;
        font-size: 8px;
    }

    .woocommerce ul.products li.product a img {
        height: 320px;
    }

    .gti-carousel ul.products[class*="columns-"] li.product {
        flex-basis: 82vw !important;
        width: 82vw !important;
    }
}

@media (max-width: 480px) {
    .gti-title {
        font-size: 14px !important;
        line-height: 1;
        margin-bottom: 10px;
    }

    .gti-stock-badge {
        top: 10px;
        right: 10px;
        padding: 0px 5px;
        font-size: 8px;
        border-width: 1px;
    }

    .woocommerce ul.products li.product a img {
        height: 260px;
    }
}