/* AGRREEN storefront design system (brand policy: greens #0a2418 / #1C2B24 / #0f3322, cream #f3ead6, turmeric gold #e8b13a, leaf #7cc27a, chilli red only for small accents; Fraunces headings, Hind body). Loaded after store.css and motion.css on every storefront page, so it restyles the existing components without touching their markup. Colours come from the tokens in base.html, so a festival theme still applies. Scale: radius 8 (controls) / 12 (cards) / 16 (panels) / 999 (pills) shadow xs (resting) / md (raised) / lg (hover, popovers) */ :root{ --r-sm:8px; --r-md:12px; --r-lg:16px; --sh-xs:0 1px 2px rgba(10,36,24,.06); --sh-md:0 1px 3px rgba(10,36,24,.06),0 6px 16px -4px rgba(10,36,24,.08); --sh-lg:0 4px 8px -2px rgba(10,36,24,.08),0 16px 32px -8px rgba(10,36,24,.16); --focus:0 0 0 3px rgba(232,177,58,.45); --surface:#ffffff; } /* ---------- base ---------- */ body{background:var(--tint);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;} h1,h2,.section-head h2,.offers-h,.process-title,.shop-head h1{font-family:var(--head-font);letter-spacing:-.01em;} :focus-visible{outline:none;box-shadow:var(--focus);} /* SaaS-clean surfaces: no paper grain, no spice texture */ body,.section-card,.cart-summary,.checkout-form,.auth-box,.order-card, .shop-filters,.shop-toolbar,.pd-layout,.hero-carousel,.cat-icons,.trust-strip,.prod-card{background-image:none;} .flash{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-md);} .flash.error{border-color:var(--off-accent);color:var(--off-accent);} /* ---------- utility bar + header ---------- */ .util-bar{background:var(--forest-2);color:rgba(243,234,214,.75);border-bottom:1px solid rgba(243,234,214,.08);} .util-bar a:hover{color:var(--ag-cream);} header{background:var(--forest-2);border-bottom:0;} .header-main{padding:12px 20px;gap:24px;} .logo-badge{background:#fff;border-radius:var(--r-sm);padding:6px 10px;box-shadow:none;} .logo-img{height:56px;} .search-bar{border-radius:var(--r-sm);border:1px solid transparent;box-shadow:none;height:44px;} .search-bar:focus-within{border-color:var(--gold);box-shadow:var(--focus);} .search-bar select{border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--tint);} .search-bar button{border-radius:0 var(--r-sm) var(--r-sm) 0;} .header-icons .icon-item{border-radius:var(--r-sm);} .header-icons a.icon-item:hover,.header-icons .account-dropdown-wrap:hover > .icon-item{background:rgba(243,234,214,.1);} .cart-count{background:var(--gold);color:var(--forest-2);} .account-dropdown,.search-suggestions{border-radius:var(--r-md);border:1px solid var(--line);box-shadow:var(--sh-lg);} .account-dropdown a:hover,.search-suggestions a:hover{background:var(--tint);} .cat-nav{background:var(--forest-2);border-top:1px solid rgba(243,234,214,.08);border-bottom:0;} .cat-nav::before{background:linear-gradient(to right,var(--forest-2),transparent);} .cat-nav::after{background:linear-gradient(to left,var(--forest-2),transparent);} .cat-nav a{opacity:.78;} .cat-nav a::after{background:var(--gold);height:2px;border-radius:2px;} .cat-nav a.nav-deals{color:var(--gold);opacity:1;font-weight:700;} html.mt-scrolled header{box-shadow:0 1px 0 rgba(243,234,214,.06),0 8px 24px rgba(10,36,24,.25);} /* ---------- panels / sections ---------- */ .section-card,.shop-filters,.shop-toolbar,.cat-icons,.trust-strip,.cart-summary,.checkout-form,.auth-box,.order-card,.pd-layout{ background-color:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs);} .section-card{padding:24px;margin-bottom:16px;} .section-head{margin-bottom:18px;} .section-head h2{font-size:22px;font-weight:700;color:var(--ink);} .section-head .see-all{color:var(--forest);text-decoration:none;font-weight:600;} .section-head .see-all:hover{text-decoration:underline;} .head-icon{background:var(--tint);color:var(--forest);} /* ---------- product cards ---------- */ .prod-scroll,.shop-grid{gap:16px;} .prod-card{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;box-shadow:var(--sh-xs);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;} .prod-card:hover,body.premium-look .prod-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:transparent;} body.premium-look .prod-card{box-shadow:var(--sh-md);} .prod-thumb{border-radius:var(--r-sm);background-color:#fff;} .prod-card:hover .prod-thumb img{transform:scale(1.03);} .prod-title{font-size:14.5px;font-weight:600;line-height:1.35;height:40px;} .prod-title a:hover{text-decoration:none;color:var(--forest);} .prod-region{font-size:12px;} .prod-region::before{content:"";} .prod-gi{color:var(--ok);font-size:11.5px;} .prod-rating{color:var(--brass);} .prod-rating .count{color:var(--muted);font-weight:500;} .prod-price .now{font-size:19px;color:var(--price);} .prod-price .off{text-decoration:none;color:var(--off-accent);} .prod-badge{border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700;box-shadow:none;background:var(--forest);color:var(--ag-cream);} .prod-badge.deal{background:var(--off-accent);color:#fff;} .prod-badge.best{background:var(--gold);color:var(--forest-2);} .prod-badge.out{background:#fff;color:var(--muted);border:1px solid var(--line);} .prod-quickadd{height:40px;} .btn-cart-quick{height:40px;border-radius:var(--r-sm);border:0;background:var(--forest);color:var(--ag-cream);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;} .btn-cart-quick:hover{background:var(--forest-3);color:#fff;} .btn-cart-quick.added{background:var(--ok);} .btn-cart-quick.added:hover{background:var(--forest);} .prod-quickadd .qty-btn,.qty-stepper .qty-btn{width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--forest);} .prod-quickadd .qty-btn:hover,.qty-stepper .qty-btn:hover{background:var(--forest);border-color:var(--forest);color:var(--ag-cream);} .wishlist-heart{border-color:var(--line);box-shadow:var(--sh-xs);} .wishlist-heart.active{color:var(--off-accent);border-color:var(--off-accent);} /* ---------- buttons ---------- */ .btn{border-radius:var(--r-sm);font-weight:600;padding:12px 22px;transition:background-color .15s,box-shadow .15s,transform .15s;} .btn-cart{background:var(--gold);border-color:var(--gold);color:var(--forest-2);} .btn-cart:hover{background:var(--brass);border-color:var(--brass);} .btn-buy{background:var(--forest);color:var(--ag-cream);} .btn-buy:hover{background:var(--forest-3);} .btn-outline{background:var(--surface);border:1px solid var(--line);color:var(--ink);} .btn-outline:hover{border-color:var(--forest);} .wishlist-heart-lg{border-radius:var(--r-sm);border:1px solid var(--line);} .place-order{border-radius:var(--r-sm);background:var(--forest);color:var(--ag-cream);} .place-order:hover{background:var(--forest-3);} /* ---------- forms ---------- */ .checkout-form .form-control,.auth-box input,.auth-box select,.auth-box textarea,.pd-pincode-check input{border:1px solid var(--line);border-radius:var(--r-sm);} .checkout-form .form-control:focus,.auth-box input:focus,.pd-pincode-check input:focus{border-color:var(--gold);box-shadow:var(--focus);outline:none;} .pay-option{border:1px solid var(--line);border-radius:var(--r-md);} .pay-option.selected{border-color:var(--forest);background:var(--tint);box-shadow:0 0 0 1px var(--forest);} .section-label .dot{background:var(--tint);color:var(--forest);} .section-label h3{color:var(--ink);} /* ---------- banners / process / trust (classic homepage + about) ---------- */ .hero-slide-wrap,.full-banner-grid .full-banner{border-radius:var(--r-lg);box-shadow:none;} .process-band,.about-hero{background:var(--forest-2);border-radius:var(--r-lg);} .step-card,.badge{border-radius:var(--r-md);box-shadow:var(--sh-md);} .badge-icon{background:var(--gold);color:var(--forest-2);} .step-icon{color:var(--forest);box-shadow:none;} /* ---------- footer ---------- */ footer{background:var(--forest-2);color:rgba(243,234,214,.75);border-top:0;} footer h6{color:var(--ag-cream) !important;} .foot-icon{background:rgba(232,177,58,.16);color:var(--gold);} .foot-col a{color:rgba(243,234,214,.75);} .foot-col a:hover{color:var(--ag-cream);} .foot-payments,.foot-bottom{border-top-color:rgba(243,234,214,.1);} .foot-bottom{color:rgba(243,234,214,.6);} footer .btn-buy{background:var(--gold);color:var(--forest-2);} footer .btn-buy:hover{background:var(--brass);} /* ---------- welcome popup ---------- */ .welcome-popup{border-radius:var(--r-lg);box-shadow:var(--sh-lg);} .welcome-popup .shop-btn{border-radius:var(--r-sm);background:var(--forest);color:var(--ag-cream);} /* ---------- mobile app chrome ---------- */ @media(max-width:768px){ .logo-img{height:32px !important;} .header-main .search-bar{border-radius:var(--r-sm) !important;} .cat-nav{background:var(--forest-2);} .cat-nav a{border-radius:999px;background:rgba(243,234,214,.08);} .app-tabbar a{color:var(--muted);} .app-tabbar a.on{color:var(--forest);} .app-tabbar a.on::before{background:var(--gold);} .tab-cart-count{background:var(--gold);color:var(--forest-2);} .section-card{padding:16px;border-radius:var(--r-md);} } @media (hover:none){ .prod-card:hover{transform:none;box-shadow:var(--sh-xs);border-color:var(--line);} } /* ---------- product page ---------- */ .recipe-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%; background:var(--tint);border:1px solid var(--line);color:var(--forest);font:700 18px/1 var(--head-font);} /* ---------- icons (icon() helper, Lucide sprite) ---------- */ .ic{width:1em;height:1em;flex-shrink:0;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .head-icon,.chip-dot,.section-label .dot,.foot-icon,.ty-icon,.about-trust-icon,.recipe-icon,.delivery-step-dot, .callout-icon,.free-ship-icon,.util-icon{display:inline-flex;align-items:center;justify-content:center;} .head-icon .ic,.chip-dot .ic,.section-label .dot .ic,.ty-icon .ic,.about-trust-icon .ic,.recipe-icon .ic, .delivery-step-dot .ic,.callout-icon .ic{width:56%;height:56%;} .foot-icon .ic{width:12px;height:12px;} .util-icon .ic,.free-ship-icon .ic{width:14px;height:14px;} .cat-nav .all-cat .ic{width:15px;height:15px;margin-right:4px;} .prod-gi::before{content:"";} .prod-gi{display:inline-flex;align-items:center;gap:4px;} .pd-gi,.pd-meta-label{display:inline-flex;align-items:center;gap:6px;} .recipe-icon{color:var(--forest);} .recipe-icon .ic{stroke-width:1.75;} /* ---------- 3D cards ---------- Resting: a layered shadow and a lit top edge give every card depth. With a mouse, tilt.js leans the card toward the pointer (.is-tilting) (owner 2026-10-22: no white glare following the mouse, so only the gold one on the dark "why" cards is left). */ .prod-card,.lx-item,.lx-stepcard,.lx-why-cards > div{ position:relative;transform-style:preserve-3d;will-change:transform; box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 1px rgba(10,36,24,.04),0 2px 4px rgba(10,36,24,.05),0 8px 16px -6px rgba(10,36,24,.10);} .lx-why-cards > div{box-shadow:inset 0 1px 0 rgba(243,234,214,.10),0 2px 4px rgba(0,0,0,.18),0 12px 24px -8px rgba(0,0,0,.4);} .prod-card::after,.lx-item::after,.lx-stepcard::after,.lx-why-cards > div::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease; background:none;} .lx-why-cards > div::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(232,177,58,.16),transparent 45%);} .is-tilting::after{opacity:1;} .prod-card.is-tilting,.lx-item.is-tilting,.lx-stepcard.is-tilting{ border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 12px -4px rgba(10,36,24,.12),0 24px 48px -12px rgba(10,36,24,.28);} .lx-why-cards > div.is-tilting{box-shadow:inset 0 1px 0 rgba(243,234,214,.14),0 8px 16px -4px rgba(0,0,0,.3),0 28px 56px -12px rgba(0,0,0,.55);} /* the photo floats a little above the card */ .is-tiltable .prod-thumb img,.is-tiltable .lx-ph img{transition:transform .35s ease;} .is-tilting .prod-thumb img,.is-tilting .lx-ph img{transform:scale(1.05) translateY(-2px);} /* tilt.js owns the hover transform on these cards */ .prod-card.is-tiltable:hover,.lx-item.is-tiltable:hover{transform:none;} /* ---------- shop page: products fill the full row ---------- auto-fill kept empty columns when there are fewer products than fit (4 products, 5 columns at 1920px); auto-fit stretches the real ones. Cards keep store.css's 360px cap, so 1-2 search results stay card-sized. */ @media (min-width:1025px){ .shop-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));} } /* ---------- product page: photo and details share the full width ---------- store.css fixes the gallery at 420px, which left the photo small next to a very wide details column on big screens. Here the columns split ~45/55, the photo grows to a square up to 620px and stays in view while the details scroll. */ @media (min-width:1025px){ .pd-layout{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;} /* top clears the sticky header (~135px); the height cap keeps photo + thumbs on a 768px-tall laptop screen */ .pd-gallery{position:sticky;top:150px;align-self:start;max-width:min(620px,calc(100vh - 330px));width:100%;justify-self:center;} .pd-gallery .main-img{height:auto;aspect-ratio:1;} .pd-thumb-btn{width:76px;height:76px;} .fbt-item{width:140px;} } /* ---------- small layout fixes ---------- */ /* the header slides up when scrolling down; without this its shadow stayed as a dark strip at the top */ html.mt-header-hidden header{box-shadow:none;} @media (max-width:599px){ /* 2-column product grids: an odd last card sits centred instead of alone on the left */ .lx-grid > :last-child:nth-child(odd),.shop-grid > :last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;} .lx-grid > :last-child:nth-child(odd){width:calc(50% - 6px);} /* .lx-grid gap 12px */ .shop-grid > :last-child:nth-child(odd){width:calc(50% - 8px);} /* .shop-grid gap 16px (above) */ } /* Bulk & wholesale enquiry page (/bulk-order) */ .bulk-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:28px;align-items:start;max-width:1100px;padding-top:24px;padding-bottom:24px;} .bulk-intro h1{font-size:clamp(26px,4vw,36px);color:var(--forest-2);margin:0 0 10px;} .bulk-lead{color:var(--sub);margin:0 0 18px;} .bulk-points{list-style:none;margin:0;padding:0;display:grid;gap:12px;} .bulk-points li{display:flex;gap:12px;align-items:flex-start;} .bulk-points b{display:block;color:var(--ink);font-size:14.5px;} .bulk-points div span{color:var(--sub);font-size:13px;} .bulk-ic{flex:0 0 38px;height:38px;border-radius:var(--r-sm);background:var(--forest-2);color:var(--gold);display:flex;align-items:center;justify-content:center;} .bulk-ic svg{width:20px;height:20px;} .bulk-card h2{font-size:20px;margin:0 0 4px;} .bulk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px;} .bulk-chip{border:1px solid var(--line);background:var(--surface);color:var(--forest-2);border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer;min-height:34px;} .bulk-chip:hover,.bulk-chip:focus-visible{border-color:var(--gold);} .bulk-upper{text-transform:uppercase;} .bulk-card select.gc-input{background-color:var(--surface);min-height:44px;} .bulk-submit{margin-top:14px;min-height:46px;font-size:15px;} .bulk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;} @media (max-width:860px){.bulk-wrap{grid-template-columns:1fr;gap:16px;}} /* Distributorship application (/distributorship) and status page */ .dst-intro{position:sticky;top:90px;} .dst-status-link{margin-top:18px;font-size:14px;color:var(--sub);} .dst-status-link a,.dst-status .gc-note a{color:var(--forest);font-weight:600;text-decoration:underline;} .dst-h{font-size:18px;margin:22px 0 2px;padding-top:16px;border-top:1px solid var(--line);color:var(--forest-2);} .dst-h:first-of-type{margin-top:0;padding-top:0;border-top:0;} .dst-h1{font-size:clamp(22px,3.4vw,30px);margin:0 0 8px;color:var(--forest-2);} .dst-sub{color:var(--sub);font-size:13.5px;margin:2px 0 6px;} .dst-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;} .dst-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0;} .dst-doc{display:flex;flex-direction:column;gap:6px;border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px;background:var(--tint);cursor:pointer;min-width:0;} .dst-doc-label{font-size:13px;font-weight:600;color:var(--ink);} .dst-doc input[type=file]{font-size:12.5px;max-width:100%;} .dst-consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13.5px;line-height:1.5;color:var(--ink);cursor:pointer;} .dst-consent input{margin-top:4px;width:18px;height:18px;flex:0 0 18px;accent-color:var(--forest);} .dst-status{max-width:720px;padding-top:24px;padding-bottom:24px;} .dst-ref{font-size:13px;color:var(--sub);margin:0 0 2px;letter-spacing:.04em;} .dst-badge{display:inline-block;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;background:var(--tint);color:var(--forest-2);border:1px solid var(--line);margin:0 0 12px;} .dst-badge.dst-approved{background:var(--forest);color:var(--ag-cream);border-color:var(--forest);} .dst-badge.dst-info_requested{background:var(--gold);color:var(--forest-2);border-color:var(--gold);} .dst-ask{border-left:3px solid var(--gold);background:var(--tint);padding:12px 14px;border-radius:var(--r-sm);margin:12px 0;} .dst-ask p{margin:4px 0 0;white-space:pre-line;} .dst-doclist{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px;font-size:14px;} .dst-doclist li{display:flex;gap:8px;align-items:center;} .dst-doclist svg{width:16px;height:16px;color:var(--forest);} @media (max-width:860px){.dst-intro{position:static;}} @media (max-width:600px){.dst-grid3,.dst-docs{grid-template-columns:1fr;}} /* Distributor lookup results (distributor_lookup.js) */ .dl-out{margin:12px 0 4px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm);background:var(--tint);padding:12px 14px;display:grid;gap:10px;} .dl-out[hidden]{display:none;} .dl-head{margin:0;font-weight:700;color:var(--forest-2);} .dl-card{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:14px;min-width:0;overflow-wrap:anywhere;} .dl-card b{font-size:15px;color:var(--ink);} .dl-terr,.dl-addr{color:var(--sub);font-size:13px;} .dl-links{display:flex;flex-wrap:wrap;gap:4px 14px;} .dl-links a{color:var(--forest);font-weight:600;text-decoration:underline;} .dl-note,.dl-none{margin:0;font-size:13px;color:var(--sub);} .dst-status .gc-note a{color:var(--forest);font-weight:600;text-decoration:underline;} /* Header refresh to the owner's mockup (2026-10-22): rounded cream search with a gold button, pill category links, gold "Today's Deals" pill. Desktop/tablet only; the phone header (store.css ≤768px) keeps its layout. */ @media (min-width:769px){ .header-main{max-width:1280px;gap:36px;padding:14px 32px;} .search-bar{flex:1 1 auto;max-width:640px;height:46px;border-radius:12px;overflow:hidden;background:#fbf6e8;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.2);} .search-bar:focus-within{box-shadow:0 0 0 2px var(--gold);border:0;} .search-bar select{border-radius:0;background:#efe7d0;color:var(--ink);font-weight:600;font-size:13px;min-width:148px;padding:0 10px 0 14px;} .search-bar input{background:transparent;font-size:15px;} .search-bar button{width:54px;padding:0;border-radius:0;background:var(--gold);color:var(--forest-2);display:grid;place-items:center;} .search-bar button:hover{background:var(--gold);filter:brightness(1.08);color:var(--forest-2);} .header-icons .icon-item{padding:9px 12px;border-radius:10px;} .cat-nav .wrap{max-width:1280px;margin:0 auto;padding:0 32px;gap:6px;min-height:48px;} .cat-nav a{opacity:1;color:rgba(243,234,214,.74);padding:8px 14px;border-radius:8px;font-size:14.5px;font-weight:500;transition:color .2s,background-color .2s;} .cat-nav a::after{display:none;} .cat-nav a:hover{color:var(--ag-cream);background:rgba(243,234,214,.07);} .cat-nav a.all-cat{color:var(--ag-cream);font-weight:600;background:rgba(243,234,214,.09);margin-right:10px;display:inline-flex;align-items:center;gap:9px;} .cat-nav a.nav-deals{order:99;margin-left:auto;background:var(--gold);color:var(--forest-2);font-weight:700;} .cat-nav a.nav-deals:hover{background:var(--gold);filter:brightness(1.08);color:var(--forest-2);} } /* whole-card links (card_link.js) */ .is-card-link{cursor:pointer;} .is-card-link[role="link"]:focus-visible{outline:3px solid var(--gold,#e8b13a);outline-offset:3px;} /* ---------- header search: category picker (replaces the native