:root{--brand:#0c5f3a}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Open Sans,sans-serif}
.brand-gradient{background-image:linear-gradient(90deg,#0c5f3a,#15724a)}
.scrollbar-hide::-webkit-scrollbar{display:none}
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
.header-bar{background-color:#0c5f3a;color:#fff}
.announcement-bar{background-color:#0a4830;color:#fff}
.search-input{background-color:rgba(255,255,255,.2);color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:9999px;padding:.75rem 1rem;transition:all .3s ease}
.search-input:hover{background-color:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5)}
.search-input:focus{background-color:rgba(255,255,255,.3);border-color:rgba(255,255,255,.8);outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.2)}
.search-input::placeholder{color:rgba(255,255,255,.7);font-weight:500}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;padding:.25rem .5rem}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;overflow:hidden}
.card-body{padding:1rem}
.price{color:#166534;font-weight:700}
.old-price{text-decoration:line-through;color:#6b7280;margin-left:.5rem}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:50;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);cursor:pointer;color:#0c5f3a;font-weight:bold;transition:all .2s;border:1px solid #e5e7eb}
.arrow:hover{background:#f0fdf4;transform:translateY(-50%) scale(1.1);color:#15803d}
.slider{position:relative}

/* Mobile-First Slider Track */
.slider-track{
    display:grid;
    grid-auto-flow:column;
    gap:.75rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    /* Default Mobile: 2 items per row (50%) */
    grid-auto-columns: calc(50% - 0.5rem); 
}

/* Tablet (Medium Screens) */
@media (min-width: 768px) {
    .slider-track {
        grid-auto-columns: calc(33.333% - 0.75rem); /* 3 items */
    }
}

/* Desktop (Large Screens) */
@media (min-width: 1024px) {
    .slider-track {
        grid-auto-columns: calc(25% - 0.75rem); /* 4 items */
    }
}

.slider-track::-webkit-scrollbar{display:none}
.slider-track>.card, .slider-track>.product-card{scroll-snap-align:start}

.category-pill{padding:.5rem;min-width:88px;text-align:center;color:#374151}
.category-row{background:#e3f5e3;position:relative}
.header-bar{background-color:#022c19}
.announcement-bar{background-color:#001a0f;font-size:11px}
.search-input{background-color:#0a4830;border:1px solid #166534}
.product-card{border:1px solid rgba(229,231,235,.9);background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.08);display:flex;flex-direction:column;height:100%}
.product-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.12);transform:translateY(-4px)}
.product-card{transition:box-shadow .3s ease, transform .3s ease}
.product-card .product-image-wrapper{position:relative;padding-top:75%;overflow:hidden;background:#f8fafc}
.product-card .product-image-wrapper img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.product-card:hover .product-image-wrapper img{transform:scale(1.05)}
.product-card .product-content{padding:1rem;flex:1;display:flex;flex-direction:column}
.product-card .product-title{font-size:.875rem;font-weight:600;color:#1f2937;line-height:1.4;margin-bottom:.5rem;display:-webkit-box;display:box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;box-orient:vertical;overflow:hidden;min-height:2.5rem}
.product-card .product-price{font-size:1.125rem;font-weight:700;color:#0c5f3a;margin-bottom:.75rem}
.product-card .product-price .old-price{font-size:.875rem;color:#9ca3af;text-decoration:line-through;margin-left:.5rem;font-weight:500}
.action-bar{display:flex;border-top:1px solid #e5e7eb;background:#fafafa}
.action-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:.75rem 0;color:#4b5563;transition:all .2s;position:relative;cursor:pointer;border:none;background:transparent}
.action-btn:hover{color:#0c5f3a;background:#e8f5e9}
.action-btn i{font-size:1.1rem}
.action-btn:not(:last-child){border-right:1px solid #e5e7eb}
.action-btn.add-to-cart:hover{color:#fff;background:#0c5f3a}
.action-btn.quick-view:hover{color:#0c5f3a;background:#e3f2fd}
.action-btn.wishlist:hover{color:#e91e63;background:#fce4ec}

/* Hide scrollbar for checkout modal */
#checkout-sheet::-webkit-scrollbar{display:none}
#checkout-sheet{-ms-overflow-style:none;scrollbar-width:none}

@media (max-width: 640px) {
  body{padding-bottom:96px}
  .slider-track{gap:.75rem;grid-auto-columns: calc(50% - 0.375rem);}
  .action-btn{padding:.65rem 0}
  .product-card .product-content{padding:.875rem}
  .product-card .product-title{font-size:.8125rem;min-height:2.3rem}
  .product-card .product-price{font-size:1rem}
}