@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Great+Vibes&family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* =========================================================
   INSANE LABAN — ALL PRODUCTS
   Matches the homepage design system.
========================================================= */

:root{
    --navy-900:#04102a;
    --navy-800:#071a3a;
    --navy-700:#0d2a55;
    --ivory:#f6f3ee;
    --gold:#d9a441;
    --gold-soft:#e8bd68;
    --violet:#6b3df5;
    --violet-hi:#7f57ff;
    --violet-soft:#f0ebff;
    --ink:#102d4d;
    --ink-soft:#6c757f;

    --display:"Playfair Display",Georgia,serif;
    --script:"Great Vibes",cursive;
    --sans:"DM Sans",Arial,sans-serif;

    --radius:20px;
}

*,*::before,*::after{box-sizing:border-box}

html{
    min-height:100%;
    overflow-x:hidden;
}

body{
    margin:0;
    min-height:100vh;
    background:var(--navy-900);
    color:#fff;
    font-family:var(--sans);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{text-decoration:none}
:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px;border-radius:6px}


/* =========================================================
   PAGE
========================================================= */

.products-page{
    width:100%;
    margin:0;
    padding:78px 16px 60px;
}


/* =========================================================
   HEADER
========================================================= */

.products-header{
    margin-bottom:28px;
}

.products-eyebrow{
    display:block;
    margin-bottom:12px;
    color:var(--gold);
    font-size:10px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.products-header h1{
    margin:0;
    color:#fff;
    font-family:var(--display);
    font-size:clamp(38px,10vw,72px);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-1px;
}

.products-header h1 .header-script{
    display:block;
    margin-top:8px;
    color:var(--gold-soft);
    font-family:var(--script);
    font-size:clamp(26px,7vw,44px);
    font-weight:400;
    letter-spacing:0;
    line-height:1.1;
}

.products-header p{
    max-width:52ch;
    margin:18px 0 0;
    color:rgba(255,255,255,.72);
    font-size:14px;
    line-height:1.65;
}


/* =========================================================
   TOOLBAR
========================================================= */

.products-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.product-count{
    color:var(--gold-soft);
    font-size:12px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
}


/* =========================================================
   GRID
========================================================= */

.products-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    width:100%;
}


/* =========================================================
   CARD
========================================================= */

.product-card{
    min-width:0;
    overflow:hidden;
    border-radius:16px;
    background:var(--ivory);
    color:var(--ink);
    box-shadow:0 14px 32px rgba(3,16,40,.38);
    transition:transform .25s ease,box-shadow .25s ease;
}

.product-card:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 44px rgba(3,16,40,.5);
}

.product-card-image-link{display:block}

.product-card-image{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#e8edf0;
}

.product-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease;
}

.product-card:hover .product-card-image img{transform:scale(1.05)}


/* CONTENT */

.product-card-content{padding:16px 16px 18px}

.product-card-badge{
    display:inline-block;
    margin-bottom:8px;
    padding:4px 9px;
    border-radius:999px;
    background:var(--violet-soft);
    color:#5a2fd8;
    font-size:9px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.product-card h2{
    margin:0;
    color:var(--ink);
    font-family:var(--sans);
    font-size:20px;
    font-weight:800;
    line-height:1.15;
}

.product-card-description{
    min-height:0;
    margin:8px 0 16px;
    color:var(--ink-soft);
    font-size:12.5px;
    line-height:1.55;
}


/* BOTTOM */

.product-card-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:14px;
    border-top:1px solid rgba(16,45,77,.1);
}

.product-card-price{
    flex-shrink:0;
    color:#b8842a;
    font-family:var(--sans);
    font-size:21px;
    font-weight:800;
}

.view-product-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:42px;
    padding:0 8px 0 15px;
    border-radius:30px;
    background:var(--violet-soft);
    color:#5a2fd8;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    transition:background .2s ease,color .2s ease;
}

.view-product-button:hover{
    background:var(--violet);
    color:#fff;
}

.view-product-icon{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    color:var(--violet);
    font-size:11px;
    transition:transform .2s ease;
}

.view-product-button:hover .view-product-icon{transform:translateX(3px)}


/* =========================================================
   NO PRODUCTS
========================================================= */

.no-products{
    grid-column:1 / -1;
    min-height:300px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 22px;
    border-radius:var(--radius);
    background:var(--ivory);
    color:var(--ink);
    text-align:center;
}

.no-products-icon{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    border-radius:50%;
    background:var(--violet-soft);
    color:var(--violet);
    font-size:24px;
}

.no-products h2{
    margin:0;
    font-family:var(--display);
    font-size:24px;
    font-weight:800;
}

.no-products p{
    margin:10px 0 0;
    color:var(--ink-soft);
    font-size:13px;
}


/* =========================================================
   LOYALTY PROMOTION
========================================================= */

.loyalty-promotion{
    position:relative;
    width:100%;
    margin-bottom:32px;
    overflow:hidden;
    border:1px solid rgba(226,180,83,.32);
    border-radius:var(--radius);
    background:
        radial-gradient(circle at 82% 18%,rgba(64,131,192,.42),transparent 48%),
        linear-gradient(125deg,#0a2a50,#062038);
    color:#fff;
    box-shadow:0 20px 46px rgba(3,16,40,.45);
    animation:loyaltyPromotionIn .55s ease both;
}

.loyalty-promotion-glow{
    position:absolute;
    top:-160px;
    right:-50px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(232,189,104,.10);
    pointer-events:none;
}

.loyalty-promotion-content{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:14px;
    padding:24px 18px 22px;
}

.loyalty-promotion-icon{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(232,189,104,.5);
    border-radius:16px;
    background:rgba(232,189,104,.1);
    color:var(--gold-soft);
    font-size:19px;
}

.loyalty-promotion-text{min-width:0}

.loyalty-promotion-eyebrow{
    display:block;
    margin-bottom:6px;
    color:var(--gold-soft);
    font-size:9px;
    font-weight:800;
    letter-spacing:2.6px;
}

.loyalty-promotion-text h2{
    margin:0 0 6px;
    color:#fff;
    font-family:var(--display);
    font-size:24px;
    font-weight:800;
    line-height:1.12;
}

.loyalty-promotion-text p{
    max-width:60ch;
    margin:0;
    color:rgba(255,255,255,.75);
    font-size:12.5px;
    line-height:1.55;
}

.loyalty-promotion-offer{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:12px 16px;
    border:1px solid rgba(232,189,104,.28);
    border-radius:14px;
    background:rgba(255,255,255,.06);
}

.loyalty-promotion-points,
.loyalty-promotion-discount{text-align:center}

.loyalty-promotion-points strong,
.loyalty-promotion-discount strong{
    display:block;
    color:#fff;
    font-family:var(--display);
    font-size:26px;
    font-weight:800;
    line-height:1;
}

.loyalty-promotion-discount strong{color:var(--gold-soft)}

.loyalty-promotion-points span,
.loyalty-promotion-discount span{
    display:block;
    margin-top:6px;
    color:rgba(255,255,255,.55);
    font-size:8px;
    font-weight:800;
    letter-spacing:1.5px;
}

.loyalty-promotion-arrow{
    color:rgba(232,189,104,.7);
    font-size:12px;
}

.loyalty-promotion-button{
    grid-column:1 / -1;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 18px;
    border:none;
    border-radius:30px;
    background:linear-gradient(135deg,var(--violet),#5b30dc);
    color:#fff;
    font-family:var(--sans);
    font-size:12.5px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:0 12px 26px -10px rgba(84,48,210,.9);
    transition:transform .2s ease,background .2s ease;
}

.loyalty-promotion-button:hover{
    transform:translateY(-2px);
    background:var(--violet-hi);
}

.loyalty-promotion-close{
    position:absolute;
    top:12px;
    right:12px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:rgba(255,255,255,.75);
    cursor:pointer;
    transition:background .2s ease,color .2s ease;
}

.loyalty-promotion-close:hover{
    background:rgba(255,255,255,.2);
    color:#fff;
}

.loyalty-promotion-hidden{display:none}

@keyframes loyaltyPromotionIn{
    from{opacity:0;transform:translateY(-12px)}
    to{opacity:1;transform:translateY(0)}
}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (min-width:620px){

    .products-page{padding:78px 24px 70px}

    .products-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }

    .product-card-image{aspect-ratio:1/1}

    .loyalty-promotion-content{
        grid-template-columns:auto minmax(0,1fr) auto;
        gap:20px;
        padding:26px 24px;
    }

    .loyalty-promotion-offer{
        grid-column:auto;
        min-width:180px;
    }

    .loyalty-promotion-button{
        grid-column:1 / -1;
        justify-self:start;
        padding:0 22px;
    }
}


/* =========================================================
   DESKTOP — SIDEBAR LAYOUT
========================================================= */

@media (min-width:1050px){

    .products-page{
        width:calc(100% - 165px);
        margin-left:145px;
        margin-right:20px;
        padding:50px 0 90px;
    }

    .products-header{margin-bottom:42px}
    .products-header p{font-size:15px}

    .products-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:26px;
    }

    .product-card-content{padding:20px 20px 22px}
    .product-card h2{font-size:23px}
    .product-card-description{min-height:44px;font-size:13px}
    .product-card-price{font-size:23px}

    .loyalty-promotion-content{
        grid-template-columns:auto minmax(0,1fr) auto auto;
        gap:22px;
        padding:26px 56px 26px 28px;
    }

    .loyalty-promotion-icon{width:58px;height:58px;font-size:22px}
    .loyalty-promotion-text h2{font-size:29px}

    .loyalty-promotion-offer{grid-column:auto}

    .loyalty-promotion-button{
        grid-column:auto;
        justify-self:auto;
    }
}


@media (min-width:1400px){

    .products-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:28px;
    }
}


/* =========================================================
   MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
}
/* =========================================================
   PRODUCT CARDS — DARK TREATMENT
   Paste at the END of css/products.css, before the MOTION block.

   Matches the homepage carousel and the cards on cart,
   orders and confirmation.
========================================================= */

.product-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    box-shadow:0 14px 32px rgba(3,16,40,.4);
}

.product-card:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(232,189,104,.3);
    box-shadow:0 22px 44px rgba(3,16,40,.55);
}


/* IMAGE WELL */

.product-card-image{
    background:var(--navy-700);
}


/* CONTENT */

.product-card h2{
    color:#fff;
}

.product-card-description{
    color:rgba(255,255,255,.5);
}

.product-card-price{
    color:var(--gold-soft);
}


/* DIETARY BADGE */

.product-card-badge{
    border:1px solid rgba(127,87,255,.4);
    background:rgba(107,61,245,.2);
    color:#c3aeff;
}


/* HAIRLINE ABOVE THE BOTTOM ROW */

.product-card-bottom{
    border-top:1px solid rgba(255,255,255,.12);
}


/* ---------------------------------------------------------
   VIEW PRODUCT
   The pale lilac pill disappeared into a dark card, so it now
   carries a violet tint with a light border to stay legible.
--------------------------------------------------------- */

.view-product-button{
    border:1px solid rgba(127,87,255,.45);
    background:rgba(107,61,245,.2);
    color:#c3aeff;
}

.view-product-button:hover{
    border-color:transparent;
    background:var(--violet);
    color:#fff;
}

.view-product-icon{
    background:rgba(255,255,255,.14);
    color:#c3aeff;
}

.view-product-button:hover .view-product-icon{
    background:#fff;
    color:var(--violet);
}


/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */

.no-products{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
}

.no-products h2{color:#fff}

.no-products p{color:rgba(255,255,255,.6)}

.no-products-icon{
    border:1px solid rgba(232,189,104,.4);
    background:rgba(232,189,104,.12);
    color:var(--gold-soft);
}