<style>

/* =======================
   TITLES & UNDERLINE
======================= */
.section-title-left,
.section-title,
.category-title {
    display: inline-block;
    font-weight: 600;
    font-size: 2rem; /* bigger Khmer font for desktop */
    margin-bottom: 0.5rem;
    font-family: 'Siemreap','Inter', sans-serif;
}

.section-title-en {
    font-weight: 500;
    font-size: 1.8rem; /* English slightly smaller */
    margin-left: 6px;
    font-family: 'Inter', sans-serif;
}

.underline {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,#0a64f0,#00c6ff);
    margin-top: 4px;
    border-radius:1px;
}

.title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center { flex: 1; text-align: center; }

/* =======================
   BUTTONS
======================= */
.btn-gradient {
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.45rem 1rem;
    color: #fff;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(90deg,#0a64f0,#00c6ff);
    transition: 0.3s;
}
.btn-gradient:hover {
    background: linear-gradient(90deg,#0070e0,#00bfff);
    color: #fff;
}

/* =======================
   PRICES & STOCK (Gradient)
======================= */
.gradient-text {
    background: linear-gradient(90deg,#0a64f0,#00c6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

/* =======================
   PRICES & STOCK (Solid)
======================= */
.home-price-all-products {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
}

.price-block {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    background: linear-gradient(90deg, #0a64f0, #00c6ff);
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.price-separator {
    font-size: 1.1rem;
    color: #000;
    padding: 0 2px;
    white-space: nowrap;
}

/* =======================
   RESPONSIVE (Prices & Titles)
======================= */
@media (max-width: 576px) {
    .home-price-all-products {
        gap: 1px;
        font-size: 0.9rem;
        padding: 0 2px;
    }

    .price-block {
        line-height: 1.3;
        font-size: 0.85rem;
        padding: 4px 6px;
    }

    .price-separator {
        font-size: 0.7rem;
        padding: 0;
    }

    .home-stock {
        font-size: 0.8rem;
    }

    .section-title-left,
    .section-title,
    .category-title,
    .section-title-center {
        font-size: 1.2rem !important; /* Khmer bigger on mobile */
    }
    .section-title-center .section-title-en {
        font-size: 1rem !important;
    }
    .section-title-en {
        font-size: 1.2rem;
        margin-left: 4px;
    }

    .category-row .category-title {
        font-size: 1.2rem !important;
        line-height: 1.2;
        text-align: center;
    }

    .category-row .category-title .underline {
        height: 1.5px;
        margin-top: 2px;
    }

    .product-title {
        font-size: 0.95rem;
        line-height: 1.2;
    }

    .card-body {
        padding: 0.25rem 0.25rem;
    }

    .col-product {
        flex: 0 0 50%;
    }

    .btn-gradient {
        font-size: 0.9rem;
        padding: 0.3rem 0.5rem;
    }

    .scroll-btn { display: none; }

    .underline { height: 1.5px; }
}

/* =======================
   PRICES & STOCK (Colors)
======================= */
.home-price {
    font-weight: 600;
    color: #0a64f0;
}

.home-price-big {
    font-size: 1.3rem; /* slightly bigger */
    font-weight: 600;
    color: #dc3545;
}

.home-stock {
    font-weight: 500;
}

.home-stock.in-stock { color: #28a745; }
.home-stock.out-stock { color: #dc3545; }

/* =======================
   CARDS & IMAGES
======================= */
.hover-zoom img { transition: 0.3s; }
.hover-zoom img:hover { transform: scale(1.05); }

.ratio { width: 100%; aspect-ratio: 1/1; }

/* =======================
   BROWSE BY CATEGORY
======================= */
.browse-category-section {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.category-row {
    margin-bottom: 1rem;
}

.category-title-row {
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-title {
    font-weight: 600;
    font-size: 1.6rem; /* increased Khmer font */
    margin-bottom: 0;
    text-align: center;
    display: inline-block;
    position: relative;
    font-family: 'Siemreap','Inter', sans-serif;
}

.category-title .underline {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #0a64f0, #00c6ff);
    margin-top: 4px;
    border-radius: 1px;
}

/* Scroll wrapper */
.category-scroll-wrapper {
    position: relative;
    margin-top: 0.25rem;
}

.category-scroll-wrapper .category-products {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 6px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.category-scroll-wrapper .category-products::-webkit-scrollbar {
    display: none;
}

.col-product {
    flex: 0 0 19%;
    scroll-snap-align: start;
    margin-right: 0;
}

.card {
    margin: 0 !important;
    height: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: none;
}

.card-body { padding: 0.3rem 0.3rem; }

.product-title { font-size: 1.05rem; line-height: 1.3; margin-bottom: 0.25rem; }

/* Scroll buttons */
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #0a64f0;
    color: #fff;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: background 0.3s;
}
.scroll-btn:hover { background: #0070e0; }
.scroll-left { left: 5px; }
.scroll-right { right: 5px; }

@media (max-width: 768px) {
    .scroll-btn { display: none; }
    .category-scroll-wrapper .category-products { gap: 8px; padding: 4px 0; }
    .col-product { flex: 0 0 31%; }
    .product-title { font-size: 0.9rem; }
    .home-price { font-size: 0.85rem; }
    .category-title { font-size: 1.3rem; } /* bigger Khmer on tablet/mobile */
}

/* =======================
   SECTION HEADER (CENTER)
======================= */
.section-title-center {
    font-weight: 600;
    font-size: 2rem; /* bigger Khmer */
    text-align: center;
    font-family: 'Siemreap','Inter', sans-serif;
}

.section-title-center .section-title-en {
    font-weight: 500;
    font-size: 1.8rem;
    margin-left: 6px;
    font-family: 'Inter', sans-serif;
}

.section-title-center .underline {
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg,#0a64f0,#00c6ff);
    margin: 4px auto 0;
    border-radius: 1px;
}



/* Desktop default (>=576px) */
.section-title-left span,
.section-title span {
    font-size: 1.8rem !important; /* bigger font for desktop */
    font-family: 'Siemreap','khmer OS battambong','Inter', sans-serif;
}

/* Mobile (<576px) */
@media (max-width: 576px) {
    .section-title-left span,
    .section-title span {
        font-size: 1.1rem !important; /* bigger Khmer on mobile */
    }
}

/* 🔝 Banner Slider */
#homeBannerCarousel {
    position: relative;
    margin: 0;
}

/* Banner Images */
#homeBannerCarousel .carousel-inner img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    border-radius: 8px;
    transition: all 0.3s;
}

/* Full clickable prev/next */
#homeBannerCarousel .carousel-control-prev,
#homeBannerCarousel .carousel-control-next {
    width: 10%;
}

/* 🔹 Simple Gray Arrows (No Circle) */
#homeBannerCarousel .carousel-control-prev-icon,
#homeBannerCarousel .carousel-control-next-icon {
    background-color: transparent !important; /* no circle */
    background-size: 60% 60%;
    width: 50px;
    height: 50px;
    filter: invert(50%); /* makes arrow gray */
}

/* Correct arrow directions (gray color) */
#homeBannerCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 8 8'%3e%3cpath d='M4.5 0L3.5 1 0.5 4 3.5 7 4.5 6 1.5 4 4.5 2z'/%3e%3c/svg%3e");
}
#homeBannerCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 8 8'%3e%3cpath d='M3.5 0L4.5 1 7.5 4 4.5 7 3.5 6 6.5 4 3.5 2z'/%3e%3c/svg%3e");
}

/* Mobile adjustments */
@media (max-width: 576px) {
    #homeBannerCarousel {
        margin-top: 2rem;
    }

    #homeBannerCarousel .carousel-inner img {
        max-height: 200px;
    }

    /* slightly smaller arrows for mobile */
    #homeBannerCarousel .carousel-control-prev-icon,
    #homeBannerCarousel .carousel-control-next-icon {
        width: 25px;
        height: 25px;
        background-size: 70% 70%;
    }
}


/* 🏷️ Image Badge */
.image-badge {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    z-index: 2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.image-badge.hot { background-color: #ff7300; }
.image-badge.new { background-color: #f76464; }

/* 🧱 Product Card - Soft Gray Store List Look */
.product-card {
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background-color: #fafafa;
    box-shadow: none;
    transition: all 0.3s ease-in-out; /* smooth hover motion */
    overflow: hidden;
}

/* 🪄 Hover Effect - subtle lift + fade background */
.product-card:hover {
    border-color: #bcbcbc;
    background-color: #f0f4ff; /* light blue-gray */
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

/* 🖼 Product Image */
.product-card-img-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.product-card-img-wrapper img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.product-card:hover .product-card-img-wrapper img {
    transform: scale(1.07);
    filter: brightness(1.05);
}

/* 🏷️ Product Info */
.product-title {
    font-size: 1.3rem; /* bigger name */
    font-weight: 600;
    color: #222;
    margin-bottom: 0.5rem;
}

.text-muted.small {
    font-size: 1rem;
    color: #666 !important;
}

/* 💰 Price under code */
.product-price {
    font-weight: 700;
    font-size: 1.3rem;
    color: #0a64f0;
    margin-top: 0.25rem;
}

/* 🔤 Section Titles */
.section-title-left {
    font-size: 1.5rem;
    color: #222;
}
.section-title-left span {
    font-size: 1.25rem; /* bigger span title */
}

/* 🧼 Remove default Bootstrap shadows */
.card {
    box-shadow: none !important;
}

/* 📱 Responsive Adjustments */

/* Tablet */
@media (max-width: 992px) {
    #homeBannerCarousel .carousel-inner img { max-height: 280px; }
    .product-card-img-wrapper { width: 100px; height: 100px; }
    .section-title-left { font-size: 1.4rem; }
    .section-title-left span { font-size: 1.2rem; }
    .product-title { font-size: 1.1rem; }
    .product-price { font-size: 1rem; }
}

/* Small tablet / large mobile */
@media (max-width: 768px) {
    .col-md-6 { flex: 0 0 100%; max-width: 100%; }
    .product-card { padding: 0.6rem; }
    #homeBannerCarousel .carousel-control-prev-icon,
    #homeBannerCarousel .carousel-control-next-icon {
        width: 30px;
        height: 30px;
    }
}

/* 📱 Mobile */
@media (max-width: 576px) {
    .product-card {
        padding: 0 !important; /* remove inner padding */
        margin-bottom: 0.4rem !important;
        border-radius: 8px;
        transition: all 0.25s ease-in-out;
    }

    .product-card a {
        display: flex;
        align-items: center;
        padding: 0.35rem 0.4rem !important; /* compact but not tight */
        gap: 0.4rem;
    }

    .product-card-img-wrapper {
        width: 70px !important;
        height: 70px !important;
        margin-right: 0.3rem !important;
    }

    .image-badge {
        font-size: 0.55rem;
        padding: 1px 3px;
    }

    .section-title-left {
        font-size: 1.05rem;
        margin-bottom: 0.6rem !important;
    }

    .product-title {
        font-size: 0.95rem; /* slightly smaller for tighter fit */
        line-height: 1.2;
    }

    .text-muted.small {
        font-size: 0.75rem;
    }

    .product-price {
        font-size: 0.95rem;
        margin-top: 0.15rem;
    }
}

</style>