/* ============================================================
   ADHISHAKTI ENTERPRISES — Storefront
   Khandeshi farmers' market aesthetic.
   Cream paper, warm ink, saffron + maroon accents.
   Mobile-first. Editorial warmth. No glassmorphism.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
    /* Palette */
    --paper:        #FBF7EE;        /* cream background */
    --paper-2:      #F5EFE0;        /* card surface (subtler than white) */
    --surface:      #FFFFFF;        /* premium white surfaces only */
    --line:         #E8DFCA;        /* warm line */
    --line-soft:    #F0E9D6;
    --ink:          #1B1410;        /* warm near-black */
    --ink-2:        #3D3530;
    --muted:        #74695E;        /* warm gray */
    --maroon:       #A0211B;        /* primary */
    --maroon-d:     #7A1714;
    --maroon-soft:  #FAE6E5;        /* tinted backgrounds for primary states */
    --saffron:      #C9881A;        /* secondary accent */
    --saffron-soft: #FDF1D8;
    --sage:         #3F7B4F;        /* success / free / in stock */
    --sage-soft:    #E5F0E2;
    --terracotta:   #B85A1F;
    --paprika:      #C44012;        /* warning / out of stock */
    --paprika-soft: #FBE4D9;

    /* Shadows — tinted brown rather than gray, never gray */
    --shadow-xs: 0 1px 2px rgba(89, 60, 30, .04);
    --shadow-sm: 0 2px 6px rgba(89, 60, 30, .06);
    --shadow:    0 6px 18px -8px rgba(89, 60, 30, .12);
    --shadow-lg: 0 18px 36px -12px rgba(89, 60, 30, .18);

    /* Radii */
    --r-sm:  8px;
    --r:    14px;
    --r-lg: 22px;

    /* Spacing scale */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 28px;
    --s-7: 40px;
    --s-8: 64px;

    /* Easing */
    --ease-out:    cubic-bezier(.22, .61, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
html, body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: transparent; }

/* -------- Mono numerics -------- */
.num, .price-now, .price-mrp, .ci-price, .summary-row, .stat-num {
    font-feature-settings: 'tnum';
}

/* -------- Selection -------- */
::selection { background: var(--maroon); color: var(--paper); }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--s-4);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251, 247, 238, .92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
}
.header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
}
.brand { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.brand img {
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface);
    box-shadow: 0 2px 8px -2px rgba(89, 60, 30, .18);
    border: 1.5px solid var(--saffron);
    padding: 1px;
    transition: transform .25s var(--ease-spring);
}
.brand:hover img { transform: rotate(-4deg) scale(1.05); }
.brand-text { line-height: 1.1; }
.brand-text strong {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--maroon);
    letter-spacing: -.4px;
    font-variation-settings: 'SOFT' 50;
}
.brand-text span {
    display: block;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 1px;
}

.search-bar {
    display: flex; align-items: center; gap: var(--s-2);
    background: var(--paper-2);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 10px 16px;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.search-bar:focus-within {
    background: var(--surface);
    border-color: var(--maroon);
    box-shadow: 0 0 0 3px var(--maroon-soft);
}
.search-bar svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.search-bar input {
    flex: 1; min-width: 0; border: 0; outline: none;
    background: transparent;
    font-size: 14px;
}
.search-bar input::placeholder { color: var(--muted); }

.header-nav { display: flex; gap: var(--s-1); align-items: center; }
.nav-link {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    position: relative;
    transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--paper-2); color: var(--ink); }
.nav-link svg { width: 18px; height: 18px; }
.nav-link span { display: none; }

/* Admin Dashboard nav link — visually distinct so admins spot it instantly */
.nav-admin {
    background: var(--maroon-soft);
    color: var(--maroon);
    border: 1px solid #F0CCC9;
}
.nav-admin span { display: inline; }       /* always show label, even on mobile */
.nav-admin:hover {
    background: var(--maroon);
    color: #fff;
    border-color: var(--maroon);
}
.cart-count {
    position: absolute; top: 4px; right: 4px;
    background: var(--maroon); color: #fff;
    font-size: 10px; font-weight: 700; font-style: normal;
    padding: 1px 6px; min-width: 16px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(160, 33, 27, .35);
}

/* ============================================================
   FLASH / TOASTS
   ============================================================ */
.flashes { padding: var(--s-3) var(--s-4) 0; }
.flash {
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    margin-bottom: 8px;
    border: 1px solid transparent;
    animation: flash-in .35s var(--ease-out) both;
}
.flash-success { background: var(--sage-soft);    color: var(--sage);    border-color: #C5DAC0; }
.flash-error   { background: var(--paprika-soft); color: var(--paprika); border-color: #ECCAB7; }
.flash-warning { background: var(--saffron-soft); color: #8C5C0E;        border-color: #E9D096; }
.flash-info    { background: #E6EAF1;             color: #2D4373;        border-color: #C2CCDF; }

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MAIN
   ============================================================ */
.site-main {
    padding: var(--s-5) 0 96px;
    min-height: 60vh;
}

/* ============================================================
   HERO — the homepage statement piece
   ============================================================ */
.hero {
    position: relative;
    background:
        radial-gradient(circle at 88% 10%, rgba(201, 136, 26, .35), transparent 55%),
        radial-gradient(circle at 8% 90%, rgba(160, 33, 27, .25), transparent 50%),
        linear-gradient(135deg, #5C0F0C 0%, #8B1A14 60%, #B85A1F 100%);
    color: var(--paper);
    border-radius: var(--r-lg);
    padding: var(--s-7) var(--s-5) var(--s-6);
    margin-bottom: var(--s-6);
    overflow: hidden;
    isolation: isolate;
    animation: hero-rise .7s var(--ease-out) both;
}
.hero::before {
    /* Decorative grain */
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 247, 230, .08) 1px, transparent 0);
    background-size: 18px 18px;
    z-index: -1;
}
.hero::after {
    /* Decorative ornament — circle ring on the right */
    content: '';
    position: absolute;
    right: -80px; top: -80px;
    width: 260px; height: 260px;
    border: 1px solid rgba(255, 247, 230, .15);
    border-radius: 50%;
    z-index: -1;
}
.hero-watermark {
    position: absolute;
    right: -60px; bottom: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    object-fit: cover;
    opacity: .12;
    filter: brightness(1.4);
    pointer-events: none;
    z-index: 0;
    animation: float-slow 8s ease-in-out infinite;
}
@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(2deg); }
}
.hero h1, .hero p, .hero .cta { position: relative; z-index: 1; }
.hero h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(28px, 7vw, 44px);
    line-height: 1.05;
    letter-spacing: -1.2px;
    font-variation-settings: 'SOFT' 30;
    margin-bottom: var(--s-3);
}
.hero h1 em {
    font-style: italic;
    color: #F4D78F;
    font-variation-settings: 'SOFT' 100;
}
.hero p {
    font-size: 15px;
    opacity: .88;
    max-width: 460px;
    margin-bottom: var(--s-4);
}
.hero .cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--paper);
    color: var(--maroon);
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    transition: transform .15s var(--ease-spring), box-shadow .2s;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.hero .cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.hero .cta:active { transform: scale(.96); }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { margin-bottom: var(--s-7); }
.section-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--s-4);
    gap: var(--s-3);
}
.section-head h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(20px, 4vw, 26px);
    letter-spacing: -.6px;
    color: var(--ink);
}
.section-head a {
    font-size: 13px;
    font-weight: 600;
    color: var(--maroon);
    white-space: nowrap;
}
.section-head a:hover { text-decoration: underline; }

/* ============================================================
   CATEGORY TILES — staggered entry
   ============================================================ */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
}
.cat-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s-3) var(--s-2);
    text-align: center;
    transition: transform .2s var(--ease-spring), border-color .15s, box-shadow .2s;
    animation: tile-pop .5s var(--ease-out) both;
}
.cat-tile:nth-child(1) { animation-delay: .05s; }
.cat-tile:nth-child(2) { animation-delay: .1s; }
.cat-tile:nth-child(3) { animation-delay: .15s; }
.cat-tile:nth-child(4) { animation-delay: .2s; }
.cat-tile:nth-child(5) { animation-delay: .25s; }
.cat-tile:nth-child(6) { animation-delay: .3s; }
.cat-tile:nth-child(n+7) { animation-delay: .35s; }
.cat-tile:hover { transform: translateY(-3px); border-color: var(--maroon); box-shadow: var(--shadow); }
.cat-tile:active { transform: scale(.97); }
.cat-tile .ico {
    width: 56px; height: 56px;
    margin: 0 auto var(--s-2);
    background: linear-gradient(135deg, var(--saffron-soft), #FBE6BD);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    transition: transform .3s var(--ease-spring);
}
.cat-tile:hover .ico { transform: rotate(-6deg) scale(1.05); }
.cat-tile span {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}
.cat-tile small {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 2px;
}

@keyframes tile-pop {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   PRODUCT CARDS — the core grid element
   ============================================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}
.product-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
    transition: transform .2s var(--ease-spring), border-color .15s, box-shadow .25s;
    animation: card-enter .5s var(--ease-out) both;
}
.product-grid > .product-card:nth-child(1)  { animation-delay: .02s; }
.product-grid > .product-card:nth-child(2)  { animation-delay: .04s; }
.product-grid > .product-card:nth-child(3)  { animation-delay: .06s; }
.product-grid > .product-card:nth-child(4)  { animation-delay: .08s; }
.product-grid > .product-card:nth-child(5)  { animation-delay: .10s; }
.product-grid > .product-card:nth-child(6)  { animation-delay: .12s; }
.product-grid > .product-card:nth-child(7)  { animation-delay: .14s; }
.product-grid > .product-card:nth-child(8)  { animation-delay: .16s; }
.product-grid > .product-card:nth-child(n+9) { animation-delay: .18s; }

.product-card:hover {
    transform: translateY(-3px);
    border-color: var(--maroon);
    box-shadow: var(--shadow);
}
.product-img {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--paper-2), #EFE5CD);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
}
.product-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s var(--ease-out);
}
.product-card:hover .product-img img { transform: scale(1.04); }
.product-img .placeholder {
    font-size: 48px;
    opacity: .35;
    filter: saturate(.7);
}

.product-body {
    padding: 10px var(--s-3) var(--s-3);
    flex: 1;
    display: flex; flex-direction: column;
    gap: 6px;
}
.product-unit {
    font-size: 10.5px;
    color: var(--muted);
    background: var(--paper-2);
    padding: 2px 8px;
    border-radius: 999px;
    align-self: flex-start;
    font-weight: 600;
    letter-spacing: .2px;
}
.product-name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 33px;
    letter-spacing: -.2px;
}
.product-foot {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--s-2);
    padding-top: 6px;
}
.product-price { display: flex; flex-direction: column; align-items: flex-start; }
.price-now {
    font-size: 15px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -.3px;
}
.price-mrp {
    font-size: 11px;
    color: var(--muted);
    text-decoration: line-through;
}

.btn-add {
    background: var(--surface);
    color: var(--maroon);
    border: 1.5px solid var(--maroon);
    padding: 7px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    transition: background .15s, color .15s, transform .1s;
}
.btn-add:hover { background: var(--maroon); color: #fff; }
.btn-add:active { transform: scale(.94); }
.btn-add:disabled { opacity: .4; border-color: var(--line); color: var(--muted); cursor: not-allowed; }

.qty-stepper {
    display: inline-flex; align-items: center;
    background: var(--maroon);
    color: #fff;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(160, 33, 27, .25);
}
.qty-stepper button {
    width: 30px; height: 30px;
    color: #fff; font-size: 16px; font-weight: 700;
    transition: background .15s;
}
.qty-stepper button:hover { background: var(--maroon-d); }
.qty-stepper button:active { transform: scale(.92); }
.qty-stepper span {
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
    font-feature-settings: 'tnum';
    min-width: 30px; text-align: center;
}

@keyframes card-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    border: 1.5px solid transparent;
    transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn-primary {
    background: var(--maroon); color: #fff;
    box-shadow: 0 4px 14px -4px rgba(160, 33, 27, .45);
}
.btn-primary:hover {
    background: var(--maroon-d);
    box-shadow: 0 8px 22px -6px rgba(160, 33, 27, .55);
}
.btn-block { width: 100%; }
.btn-outline {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}
.btn-outline:hover { border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--maroon); }
.btn-sm { padding: 8px 16px; font-size: 12.5px; }

/* ============================================================
   FORMS
   ============================================================ */
.form-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    max-width: 440px;
    margin: var(--s-6) auto;
    box-shadow: var(--shadow);
    animation: card-enter .4s var(--ease-out) both;
}
.form-card h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -.6px;
    margin-bottom: 4px;
}
.form-card .lead {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: var(--s-5);
}

/* Auth logo — login / register / forgot password */
.auth-logo {
    display: block;
    width: 88px; height: 88px;
    margin: -8px auto var(--s-4);
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface);
    border: 2px solid var(--saffron);
    padding: 2px;
    box-shadow: 0 6px 18px -8px rgba(89, 60, 30, .25);
    transition: transform .3s var(--ease-spring);
}
.auth-logo:hover { transform: rotate(-4deg) scale(1.04); }
.auth-logo img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.form-row { margin-bottom: var(--s-4); }
.form-row label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin-bottom: 6px;
}
.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 14.5px;
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .2s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    border-color: var(--maroon);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--maroon-soft);
}
.form-row .help { font-size: 12px; color: var(--muted); margin-top: 5px; }
.form-row.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* ============================================================
   CART / CHECKOUT
   ============================================================ */
.cart-layout { display: grid; gap: var(--s-4); }
.cart-list {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 6px var(--s-3);
}
.cart-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3) 6px;
    border-bottom: 1px solid var(--line-soft);
}
.cart-row:last-child { border-bottom: 0; }
.cr-img {
    width: 64px; height: 64px;
    border-radius: 12px;
    background: var(--paper-2);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.cr-img img { width: 100%; height: 100%; object-fit: cover; }
.cr-name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    color: var(--ink);
}
.cr-unit { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cr-price { font-size: 13.5px; margin-top: 4px; font-feature-settings: 'tnum'; }
.cr-price strong { font-size: 14px; color: var(--ink); }

.summary-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s-4);
    position: sticky; top: 80px;
}
.summary-row {
    display: flex; justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    font-feature-settings: 'tnum';
}
.summary-row.total {
    font-size: 22px;
    font-weight: 800;
    border-top: 1.5px dashed var(--line);
    margin-top: var(--s-2);
    padding-top: var(--s-3);
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    letter-spacing: -.5px;
    color: var(--maroon);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.summary-row.total span:last-child {
    /* Make the number itself slightly bigger and tabular */
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-variant-numeric: tabular-nums lining-nums;
}
.summary-note {
    font-size: 12.5px;
    color: var(--muted);
    margin: var(--s-2) 0;
    line-height: 1.5;
}
.summary-note.green { color: var(--sage); font-weight: 600; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty {
    text-align: center;
    padding: var(--s-8) var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    animation: card-enter .4s var(--ease-out) both;
}
.empty .ico { font-size: 56px; margin-bottom: var(--s-3); opacity: .65; }
.empty h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    margin-bottom: 6px;
    letter-spacing: -.4px;
}
.empty p { color: var(--muted); margin-bottom: var(--s-4); font-size: 14px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: #2A1F18;
    color: #E5DECF;
    padding: var(--s-7) 0 88px;
    margin-top: var(--s-7);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
    padding: 0 var(--s-4) var(--s-5);
}
.footer-grid h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: var(--s-3);
    color: #FCF5E5;
}
.footer-logo {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(244, 201, 122, .35);
    background: var(--paper);
    padding: 2px;
    margin-bottom: var(--s-3);
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.footer-grid p, .footer-grid a {
    display: block;
    font-size: 13px;
    opacity: .8;
    margin-bottom: 6px;
    transition: opacity .15s, color .15s;
}
.footer-grid a:hover { opacity: 1; color: #F4C97A; }
.footer-grid .muted { opacity: .55; }
.footer-bottom {
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid rgba(245, 230, 200, .1);
    opacity: .55;
    font-size: 12px;
}

/* ============================================================
   BOTTOM NAV (Mobile)
   ============================================================ */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(255, 252, 246, .95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-around;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    z-index: 40;
    box-shadow: 0 -8px 24px -12px rgba(89, 60, 30, .2);
}
.bn-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 10px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 600;
    flex: 1;
    transition: color .15s, transform .1s;
}
.bn-item svg { width: 20px; height: 20px; transition: transform .2s var(--ease-spring); }
.bn-item:active { transform: scale(.92); }
.bn-item.active, .bn-item:hover { color: var(--maroon); }
.bn-item.active svg { transform: translateY(-2px); }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd-layout { display: grid; gap: var(--s-5); }
.pd-img-box {
    background: linear-gradient(135deg, var(--paper-2), #EFE5CD);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    aspect-ratio: 1;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    animation: card-enter .4s var(--ease-out) both;
}
.pd-img-box img { width: 100%; height: 100%; object-fit: cover; }
.pd-info {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    animation: card-enter .5s var(--ease-out) both;
    animation-delay: .08s;
}
.pd-info h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(22px, 5vw, 30px);
    line-height: 1.15;
    letter-spacing: -.7px;
    margin-bottom: 6px;
}
.pd-info .pd-unit { font-size: 13px; color: var(--muted); margin-bottom: var(--s-4); }
.pd-prices {
    display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--line-soft);
}
.pd-prices .now {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: var(--maroon);
    letter-spacing: -.8px;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-variant-numeric: tabular-nums lining-nums;
}
.pd-prices .mrp { font-size: 16px; color: var(--muted); text-decoration: line-through; }
.pd-prices .save {
    background: var(--sage-soft); color: var(--sage);
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
}
.pd-desc {
    font-size: 14.5px;
    line-height: 1.65;
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-soft);
    margin-top: var(--s-4);
    color: var(--ink-2);
}

/* ============================================================
   ADDRESS / PAYMENT CARDS
   ============================================================ */
.address-card,
.payment-option {
    border: 1.5px solid var(--line);
    background: var(--surface);
    border-radius: var(--r);
    padding: var(--s-3) var(--s-4);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    margin-bottom: var(--s-2);
    display: flex; gap: var(--s-3); align-items: flex-start;
}
.address-card:hover,
.payment-option:hover { border-color: var(--maroon); }
.address-card.selected,
.payment-option.selected {
    border-color: var(--maroon);
    background: var(--maroon-soft);
}
.address-card:active,
.payment-option:active { transform: scale(.99); }

.address-card p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.address-card .ah { display: flex; gap: var(--s-2); align-items: baseline; margin-bottom: 4px; }
.address-card .ah strong { font-size: 14px; }

.payment-option .pm-name {
    font-weight: 700; font-size: 14px;
    font-family: 'Fraunces', Georgia, serif;
    letter-spacing: -.2px;
}
.payment-option .pm-desc {
    font-size: 12.5px; color: var(--muted); margin-top: 2px;
}

/* ============================================================
   SKELETON LOADERS — appear during slow renders
   ============================================================ */
.skel {
    background: linear-gradient(90deg,
        var(--paper-2) 0%,
        #F0E8D4 50%,
        var(--paper-2) 100%);
    background-size: 200% 100%;
    animation: skel 1.2s linear infinite;
    border-radius: var(--r-sm);
    display: block;
}
@keyframes skel {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ============================================================
   STATUS TAGS  (re-used by orders + cart)
   ============================================================ */
.tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.tag-placed     { background: #E0EAFB; color: #2A4D8E; }
.tag-confirmed  { background: var(--saffron-soft); color: #8C5C0E; }
.tag-packed     { background: #E6E6FB; color: #4338CA; }
.tag-shipped    { background: #DEF1EF; color: #115E59; }
.tag-delivered  { background: var(--sage-soft); color: var(--sage); }
.tag-cancelled  { background: var(--paprika-soft); color: var(--paprika); }
.tag-paid       { background: var(--sage-soft); color: var(--sage); }
.tag-pending    { background: var(--saffron-soft); color: #8C5C0E; }
.tag-failed     { background: var(--paprika-soft); color: var(--paprika); }
.tag-refunded   { background: #E6E6FB; color: #4338CA; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.mt-1 { margin-top: var(--s-2); } .mt-2 { margin-top: var(--s-4); } .mt-3 { margin-top: var(--s-5); }
.mb-1 { margin-bottom: var(--s-2); } .mb-2 { margin-bottom: var(--s-4); }
.divider { height: 1px; background: var(--line); margin: var(--s-4) 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 640px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .cat-grid { grid-template-columns: repeat(6, 1fr); }
    .nav-link span { display: inline; }
}
@media (min-width: 900px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr; }
    .cart-layout { grid-template-columns: 1fr 340px; align-items: start; }
    .pd-layout { grid-template-columns: 1fr 1fr; align-items: start; }
    .bottom-nav { display: none; }
    .site-footer { padding-bottom: var(--s-7); }
    .site-main { padding-bottom: var(--s-7); }
}
@media (min-width: 1100px) {
    .product-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 639px) {
    .header-inner { grid-template-columns: 1fr auto; gap: var(--s-2); }
    .search-bar { grid-column: 1 / -1; order: 3; }
    .brand-text span { display: none; }
}

/* ============================================================
   PROMO STRIP — free delivery banner under hero
   ============================================================ */
.promo-strip {
    background: linear-gradient(90deg, var(--sage-soft), var(--saffron-soft));
    border: 1px solid var(--saffron);
    border-radius: var(--r);
    padding: 12px var(--s-4);
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s-6);
    animation: card-enter .5s var(--ease-out) both;
    animation-delay: .2s;
}
.promo-strip strong { color: var(--maroon); }
.promo-pill {
    display: inline-block;
    background: var(--maroon);
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    margin-right: 8px;
    box-shadow: 0 2px 6px rgba(160, 33, 27, .25);
}
@media (max-width: 540px) {
    .promo-strip { font-size: 12.5px; line-height: 1.5; }
    .promo-pill { display: block; margin: 0 auto 6px; max-width: 140px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .site-header, .site-footer, .bottom-nav { display: none; }
    body { background: white; }
}

/* ============================================================
   TOASTS
   ============================================================ */
.toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    background: var(--ink);
    color: var(--paper);
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    opacity: 0;
    transition: opacity .25s var(--ease-out), transform .3s var(--ease-spring);
    max-width: calc(100% - 32px);
    text-align: center;
    pointer-events: none;
}
.toast-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { background: var(--sage); }
.toast-error   { background: var(--paprika); }

/* ============================================================
   OFFLINE BANNER
   ============================================================ */
.offline-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 8px var(--s-4);
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    z-index: 200;
    transform: translateY(-100%);
    transition: transform .3s var(--ease-out);
}
.offline-banner.show { transform: translateY(0); }
.offline-banner .dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: #D86B5C;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1;  }
    50%      { opacity: .35; }
}

/* ============================================================
   SPINNER (used in buttons during async actions)
   ============================================================ */
.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   PWA INSTALL BANNER
   Slides up from the bottom on Android Chrome when the site
   is installable as a Progressive Web App.
   ============================================================ */
#pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
    border-radius: 16px 16px 0 0;
    padding: 0;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
#pwa-install-banner.pwa-banner-visible {
    transform: translateY(0);
}
.pwa-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.pwa-banner-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.pwa-banner-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.08);
}
.pwa-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pwa-banner-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #1B1410;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pwa-banner-text span {
    font-size: 12px;
    color: #74695E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pwa-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.pwa-btn-install {
    background: #A0211B;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, transform .1s;
}
.pwa-btn-install:active {
    background: #7A1714;
    transform: scale(.97);
}
.pwa-btn-dismiss {
    background: transparent;
    border: none;
    color: #74695E;
    font-size: 16px;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    line-height: 1;
    transition: background .15s;
}
.pwa-btn-dismiss:hover {
    background: rgba(0,0,0,.06);
}

/* Push page content up when banner is visible so it doesn't
   hide behind the fixed banner on short screens */
body.pwa-banner-open {
    padding-bottom: 80px;
}