/* Storefront Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Noto+Sans+Tamil:wght@400;500;600;700&display=swap');

:root {
    --background: 38 50% 97%;
    --foreground: 25 30% 15%;
    --card: 0 0% 100%;
    --card-foreground: 25 30% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 25 30% 15%;
    --primary: 30 85% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 43 90% 55%;
    --secondary-foreground: 25 30% 15%;
    --muted: 35 30% 93%;
    --muted-foreground: 25 15% 45%;
    --accent: 15 80% 55%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 35 25% 88%;
    --input: 35 25% 88%;
    --ring: 30 85% 50%;
    --radius: 1rem;
    --gold: 43 90% 55%;
    --gold-foreground: 25 30% 15%;
    --warm: 15 80% 55%;
    --warm-foreground: 0 0% 100%;
    --festive: 350 70% 55%;
    --festive-foreground: 0 0% 100%;
    --success: 145 60% 42%;
    --success-foreground: 0 0% 100%;
}

/* ── Base ─────────────────────────────────────── */
*, *::before, *::after {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: "Poppins", "Noto Sans Tamil", sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", "Noto Sans Tamil", sans-serif;
}

/* ── Utility Classes ─────────────────────────── */
.gradient-festive {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--warm)));
}

.gradient-gold {
    background: linear-gradient(135deg, hsl(var(--gold)), hsl(30 85% 50%));
}

.gradient-hero {
    background: linear-gradient(135deg, hsl(30 85% 50% / 0.9), hsl(15 80% 55% / 0.85));
}

.shadow-festive {
    box-shadow: 0 8px 30px -8px hsl(var(--primary) / 0.25);
}

.shadow-card {
    box-shadow: 0 4px 20px -4px hsl(25 30% 15% / 0.08);
}

.glass {
    backdrop-filter: blur(12px);
    background: hsl(0 0% 100% / 0.8);
    border: 1px solid hsl(0 0% 100% / 0.3);
}

/* ── Cart Drawer ─────────────────────────────── */
#cart-drawer {

    transition: transform 0.3s ease;
}

#cart-drawer.open {
    transform: translateX(0);
}

/* ── Mobile Menu ─────────────────────────────── */
#mobile-menu-drawer {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

#mobile-menu-drawer.open {
    transform: translateX(0);
}

/* ── SPA Loader ──────────────────────────────── */
#spa-loader {
    transition: opacity 0.2s ease;
}

/* ── Animations ──────────────────────────────── */
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.animate-sparkle {
    animation: sparkle 2s ease-in-out infinite;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* ── Active nav link ─────────────────────────── */
.spa-link.active {
    color: hsl(var(--primary));
    font-weight: 600;
}

    .grid > .product-item > .product-item-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .grid > .product-item > .product-item-inner .product-item-img-wrap {
        width: 100%;
    }

    .grid > .product-item > .product-item-inner .product-item-img-wrap > div {
        width: 100%;
        height: 120px;
    }

    .grid > .product-item > .product-item-inner .product-item-info {
        flex: unset;
    }

    .grid > .product-item > .product-item-inner .product-item-cart {
        width: 100%;
    }

    .grid > .product-item > .product-item-inner .product-item-cart .cart-controls {
        justify-content: center;
    }

    
/* ── Drawer push layout ─────────────────────── */
#page-products {
    transition: padding-right 0.3s ease-in-out;
}

body.drawer-open #page-products {
    padding-right: 420px;
}

/* On mobile — drawer is full width, can't push, just let it overlay */
@media (max-width: 768px) {
    body.drawer-open #page-products {
        padding-right: 0 !important;
    }
}
/* Mobile view */
@media (max-width: 768px) {
    .grid > .product-item > .product-item-inner .product-item-info h3 {
       max-width: 80px;
    }
}
/* ══════════════════════════════════════════════
   GRID VIEW — scoped to .product-items.grid
   List view is completely unaffected
══════════════════════════════════════════════ */

/* ── Card: stack vertically ── */
.product-items.grid > .product-item > .product-item-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

/* ── Image: full-width square ── */
.product-items.grid > .product-item .product-item-img-wrap {
    width: 100%;
    display: block;
    flex-shrink: 0;
}

.product-items.grid > .product-item .product-item-img-wrap > div {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    border-radius: 0;
    background: #f9f9f9;
}

.product-items.grid > .product-item .product-item-img-wrap > div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: unset !important;
}

/* ── Info: padded content area ── */
.product-items.grid > .product-item .product-item-info {
    flex: unset;
    padding: 8px 10px 2px;
}

/* Name: single line in grid */
.product-items.grid > .product-item .product-item-info .product-name {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100% !important;
    display: block;
}

/* Unit text */
.product-items.grid > .product-item .product-item-info .text-muted-foreground {
    font-size: 10px;
}

/* Price row */
.product-items.grid > .product-item .product-item-info .text-base {
    font-size: 13px;
}



/* ── Cart controls: full width centered ── */
.product-items.grid > .product-item .product-item-cart {
    width: 100%;
    padding: 6px 10px 10px;
}

.product-items.grid > .product-item .product-item-cart .cart-controls {
    justify-content: center;
    width: 100%;
}

/* Add badge stretches full width in grid */
.product-items.grid > .product-item .product-item-cart .add-badge {
    min-width: unset;
    justify-content: center;
}

/* Minus/plus buttons slightly smaller in grid */
.product-items.grid > .product-item .product-item-cart .btn-qty-minus,
.product-items.grid > .product-item .product-item-cart .btn-qty-plus {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* ── Mobile: fix name max-width override from earlier ── */
@media (max-width: 768px) {
    .product-items.grid > .product-item .product-item-info h3 {
        max-width: 100% !important;
    }
}
@keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }
    .animate-float {
        animation: float 4s ease-in-out infinite;
    }
    .text-glow {
        text-shadow: 0 0 15px rgba(251, 191, 36, 0.8), 0 0 30px rgba(251, 191, 36, 0.4);
    }




.product-items.grid .product-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Inner: flip row → column, remove padding */
.product-items.grid .product-item .product-item-inner {
    flex-direction: column !important;
    align-items:    stretch !important;
    padding:        0       !important;
    gap:            0       !important;
    flex:           1;
    display:        flex;
}

/* ── Image: full-width square, top-rounded ── */
.product-items.grid .product-item .prod-img-wrap {
    width:         100%                !important;
    height:        auto                !important;
    aspect-ratio:  1 / 1               !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    flex-shrink:   0                   !important;
}

.product-items.grid .product-item .prod-img-wrap img {
    width:      100%  !important;
    height:     100%  !important;
    min-height: unset !important;
    object-fit: cover !important;
}

/* ── Info block: padded column ── */
.product-items.grid .product-item .product-item-info {
    flex:           1;
    display:        flex;
    flex-direction: column;
    padding:        0.625rem 0.75rem 0.5rem;
    min-width:      0;
    width:          auto !important;
    margin-left:    0    !important;
}

/* Name: smaller, 2-line clamp */
.product-items.grid .product-item .product-name {
    font-size:          0.8125rem !important;
    line-height:        1.35      !important;
    -webkit-line-clamp: 2         !important;
}

/* ── Cart block: full-width, pinned to bottom ── */
.product-items.grid .product-item .product-item-cart {
    width:       100% !important;
    margin-left: 0    !important;
    flex-shrink: 0;
    padding:     0 0.75rem 0.75rem;
}

/* Cart row: full-width stretch */
.product-items.grid .product-item .cart-controls {
    width:           100%    !important;
    justify-content: stretch !important;
    gap:             0.375rem !important;
}

/* Add badge: fills all remaining space between − and + */
.product-items.grid .product-item .add-badge {
    flex:          1     !important;
    min-width:     unset !important;
    max-width:     unset !important;
    border-radius: 0.5rem !important;
}

/* Qty input when visible */
.product-items.grid .product-item .qty-input {
    flex:      1     !important;
    width:     auto  !important;
    min-width: 2rem;
    max-width: 3.5rem;
}

/* − and + buttons: fixed size, don't shrink */
.product-items.grid .product-item .btn-qty-minus,
.product-items.grid .product-item .btn-qty-plus {
    flex-shrink: 0;
    width:  2rem !important;
    height: 2rem !important;
}