/* DairyGold Store — storefront styles.
Deliberately hand-written and small: no Bootstrap, no build step, one file
to upload. The ERP's admin theme is not reused here — this is a consumer site. */
:root {
--ink: #16202c;
--ink-soft: #5b6673;
--line: #e6e2db;
--line-cool: #e4e7ec;
--bg: #ffffff;
/* Warm off-white page. White cards only read as cards when the page behind
them is not also pure white — the old flat-on-white look was the main
reason nothing had any hierarchy. */
--page: #faf8f5;
--bg-soft: #f4f1ec;
--brand: #0f7b6c;
--brand-dark: #0a4f45;
--brand-tint: #eef6f4;
--accent: #d98324;
--danger: #b42318;
--ok: #067647;
--radius: 14px;
--radius-sm: 10px;
--shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.07);
--shadow-lg: 0 2px 4px rgba(16,24,40,.05), 0 18px 44px rgba(16,24,40,.11);
--wrap: 1240px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--ink);
background: var(--page);
-webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.018em; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
h3 { font-size: 1.05rem; }
.muted { color: var(--ink-soft); }
.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }
.section { padding-block: 3.25rem; }
/* Full-bleed tinted band. Negative margins rather than a wrapping element, so
a section can be tinted without changing the markup around it. */
.section-tint {
background: var(--bg-soft);
border-block: 1px solid var(--line);
padding-inline: max(4vw, calc((100vw - var(--wrap)) / 2));
width: 100%;
max-width: none;
}
.section-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.section-head h2 { margin: 0; }
.section-more { font-size: .9rem; font-weight: 600; white-space: nowrap; }
/* Admin preview banner — only rendered for a signed-in admin on a closed store */
.preview-bar {
background: #7c2d12; color: #fff; text-align: center;
padding: .5rem 1rem; font-size: .85rem; font-weight: 600;
}
.preview-bar a { color: #fed7aa; margin-left: .75rem; text-decoration: underline; }
/* ================================================================ HEADER ==
Trade notice, then a sticky header. The notice scrolls away on purpose so
it does not spend sticky height on every page. */
.topline {
background: var(--brand-dark); color: #d8ece8;
font-size: .8rem; letter-spacing: .01em;
}
.topline-inner {
display: flex; align-items: center; gap: .75rem;
min-height: 36px; flex-wrap: wrap;
}
.topline-sep { width: 1px; height: 12px; background: rgba(255,255,255,.25); }
.topline-tel { margin-left: auto; color: #fff; font-weight: 600; }
.topline-tel:hover { text-decoration: underline; }
.site-header {
position: sticky; top: 0; z-index: 40;
background: rgba(255,255,255,.94);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
display: grid; place-items: center; width: 36px; height: 36px;
border-radius: 10px; background: var(--brand); color: #fff;
font-weight: 800; font-size: 1.1rem; flex: none;
}
.brand-name { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.main-nav { display: flex; align-items: center; gap: 1.4rem; margin-left: 2rem; flex: 1; }
.main-nav > a { color: var(--ink); font-size: .93rem; font-weight: 500; }
.main-nav > a:hover { color: var(--brand); text-decoration: none; }
.nav-spacer { flex: 1; }
/* Categories dropdown — hover on pointer devices, click elsewhere (store.js
adds .is-open, since there is no hover on a touchscreen). */
.nav-drop { position: relative; }
.nav-drop-btn {
display: inline-flex; align-items: center; gap: .3rem;
padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; font-size: .93rem; font-weight: 500; color: var(--ink);
}
.nav-drop-btn:hover { color: var(--brand); }
.nav-caret { width: 14px; height: 14px; transition: transform .15s ease; }
.nav-drop.is-open .nav-caret { transform: rotate(180deg); }
.nav-drop-menu {
position: absolute; top: calc(100% + .75rem); left: -1rem;
min-width: 240px; padding: .5rem;
background: #fff; border: 1px solid var(--line);
border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav-drop.is-open .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
.nav-drop-menu a {
display: block; padding: .5rem .7rem; border-radius: 8px;
color: var(--ink); font-size: .9rem;
}
.nav-drop-menu a:hover { background: var(--brand-tint); color: var(--brand-dark); text-decoration: none; }
@media (hover: hover) and (min-width: 861px) {
.nav-drop:hover .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
.nav-drop:hover .nav-caret { transform: rotate(180deg); }
}
.cart-link {
position: relative; display: inline-flex; align-items: center; gap: .4rem;
padding: .5rem .9rem; border-radius: 999px;
background: var(--brand); color: #fff; font-weight: 600; font-size: .9rem;
}
.cart-link:hover { background: var(--brand-dark); text-decoration: none; }
.cart-link svg { width: 18px; height: 18px; fill: currentColor; }
.cart-link .badge {
display: inline-block; min-width: 20px; padding: 0 5px;
background: #fff; color: var(--brand-dark); border-radius: 999px;
font-size: .74rem; font-weight: 800; line-height: 19px; text-align: center;
}
.nav-cta {
padding: .45rem .9rem; border: 1px solid var(--line);
border-radius: 999px; font-weight: 600;
}
.nav-cta:hover { border-color: var(--brand); background: var(--brand-tint); }
/* Burger + off-canvas drawer, driven by a checkbox so the menu still opens
with JavaScript off. */
.nav-burger { display: none; }
.nav-scrim { display: none; }
@media (max-width: 860px) {
.nav-burger {
display: grid; place-items: center; width: 40px; height: 40px;
margin-left: auto; border-radius: 10px; cursor: pointer;
border: 1px solid var(--line); color: var(--ink);
}
.nav-burger svg { width: 20px; height: 20px; }
/* The off-canvas menu below is parked off the right edge when closed, and
its box still counted towards the document width — the whole page could
be dragged sideways by 320px on a phone, revealing a strip of blank
white. `clip` rather than `hidden`: hidden would turn the body into a
scroll container and break every position: sticky inside it. */
html, body { overflow-x: hidden; overflow-x: clip; }
.main-nav {
position: fixed; inset: 0 0 0 auto; z-index: 60;
width: min(320px, 86vw); margin: 0; padding: 1.25rem;
flex-direction: column; align-items: stretch; gap: .25rem;
background: #fff; border-left: 1px solid var(--line);
box-shadow: var(--shadow-lg);
transform: translateX(100%); transition: transform .22s ease;
overflow-y: auto;
}
.nav-state:checked ~ .main-nav { transform: none; }
.main-nav > a { padding: .7rem .25rem; border-bottom: 1px solid var(--line); }
.nav-spacer { display: none; }
.nav-cta, .cart-link { justify-content: center; margin-top: .75rem; }
.nav-drop-btn { padding: .7rem .25rem; width: 100%; justify-content: space-between; border-bottom: 1px solid var(--line); }
.nav-drop-menu {
position: static; opacity: 1; visibility: visible; transform: none;
box-shadow: none; border: 0; padding: .25rem 0 .25rem .5rem;
min-width: 0; display: none;
}
.nav-drop.is-open .nav-drop-menu { display: block; }
.nav-state:checked ~ .nav-scrim {
display: block; position: fixed; inset: 0; z-index: 50;
background: rgba(16,24,40,.45);
}
}
/* ================================================================ FOOTER == */
.site-footer { margin-top: 4rem; background: #101a24; color: #b9c4d0; }
.footer-grid {
display: grid; gap: 2.5rem;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, .7fr);
padding-block: 3rem 2.5rem;
}
.footer-grid h3 {
font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
color: #7f8c9b; margin-bottom: 1rem;
}
.footer-brand .muted { color: #92a0af; font-size: .89rem; max-width: 38ch; }
.brand-footer .brand-name { color: #fff; }
.footer-contact { display: flex; flex-direction: column; gap: .3rem; margin-top: 1rem; font-size: .9rem; }
.footer-contact a { color: #fff; font-weight: 600; }
/* Category links with thumbnails — a B2B buyer scans for the line they order,
and a picture finds it faster than a word does. */
.footer-cat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.footer-cat {
display: flex; align-items: center; gap: .7rem;
padding: .45rem; border-radius: var(--radius-sm);
color: #dbe3ea; font-size: .9rem;
}
.footer-cat:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.footer-cat-img {
width: 46px; height: 46px; flex: none; border-radius: 8px; overflow: hidden;
background: rgba(255,255,255,.08); display: grid; place-items: center;
}
.footer-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.footer-cat-blank { font-weight: 800; color: #6f7d8c; }
.footer-cat-text { display: flex; flex-direction: column; line-height: 1.3; }
.footer-cat-text small { color: #7f8c9b; font-size: .76rem; }
.footer-links { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.footer-links a { color: #b9c4d0; font-size: .9rem; }
.footer-links a:hover { color: #fff; }
.footer-base { border-top: 1px solid rgba(255,255,255,.09); }
.footer-base-inner {
display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
padding-block: 1.1rem; font-size: .82rem; color: #7f8c9b;
}
.footer-base .muted { color: #7f8c9b; }
/* ------------------------------------------------------------- we accept */
.footer-pay { border-top: 1px solid rgba(255,255,255,.09); }
.footer-pay-inner {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: .6rem 1rem; padding-block: 1rem;
}
.footer-pay-label {
font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: #8b97a5;
}
.footer-pay-list {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: .5rem; margin: 0; padding: 0; list-style: none;
}
/* The badges sit on a dark footer and several of them are white cards, so
they get their own light chip rather than floating on the background —
otherwise the white-card marks look like holes and the dark ones vanish. */
.footer-pay-list li {
display: flex; align-items: center; justify-content: center;
background: #fff; border-radius: 5px; padding: 3px 5px; line-height: 0;
}
/* width/height are on the ![]()
to reserve space before the file loads.
Releasing the height axis is mandatory: constraining only the width leaves
the attribute's pixel height in force and the badge renders stretched. */
.footer-pay-list img { display: block; width: 44px; height: auto; }
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* ------------------------------------------------------ whatsapp button */
.wa-float {
position: fixed; right: 18px; bottom: 18px;
display: flex; align-items: center; justify-content: center;
width: 54px; height: 54px; border-radius: 14px;
background: #25d366; color: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,.22);
/* Above the sticky header (40) but below every scrim and panel — the mobile
nav and mini-cart scrims are 50/60 and their panels 60/61. A floating
button painting on top of an open modal is a mis-tap waiting to happen,
and matching 60 exactly would do that: equal z-index falls back to DOM
order, and this element is last in the document. */
z-index: 45;
transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.wa-float:focus-visible { outline: 3px solid #0b3d6b; outline-offset: 3px; }
@media (max-width: 520px) {
.wa-float { right: 12px; bottom: 12px; width: 48px; height: 48px; border-radius: 12px; }
.wa-float svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.wa-float { transition: none; }
.wa-float:hover { transform: none; }
}
/* ---------------------------------------------------------------- flashes */
.flash { margin-top: 1rem; padding: .75rem 1rem; border-radius: var(--radius); font-size: .95rem; }
.flash-error { background: #fef3f2; color: var(--danger); border: 1px solid #fecdca; }
.flash-ok { background: #ecfdf3; color: var(--ok); border: 1px solid #abefc6; }
/* ========================================================== HERO SLIDER ==
Every slide is in the document; the active one is opacity 1 and the rest 0,
stacked. Cross-fading rather than sliding a track keeps it to two rules and
means no layout maths has to agree with the JS. */
.hero-slider {
position: relative; overflow: hidden;
background: var(--bg-soft);
}
.hs-track { position: relative; height: clamp(360px, 42vw, 540px); }
.hs-slide {
position: absolute; inset: 0;
opacity: 0; transition: opacity .6s ease;
display: flex; align-items: center;
}
.hs-slide.is-active { opacity: 1; z-index: 1; }
.hs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim behind the copy only. A wash over the whole image would flatten the
product photography that is the point of the slide. */
.hs-veil { position: absolute; inset: 0; }
.hs-veil-left { background: linear-gradient(90deg, rgba(8,14,20,.78) 0%, rgba(8,14,20,.5) 42%, rgba(8,14,20,0) 72%); }
.hs-veil-right { background: linear-gradient(270deg, rgba(8,14,20,.78) 0%, rgba(8,14,20,.5) 42%, rgba(8,14,20,0) 72%); }
.hs-veil-center { background: linear-gradient(0deg, rgba(8,14,20,.6), rgba(8,14,20,.35)); }
.hs-copy { position: relative; z-index: 2; color: #fff; }
.hs-copy h2 {
font-size: clamp(1.7rem, 3.8vw, 3rem); color: #fff;
margin: 0 0 .6rem; max-width: 22ch; text-wrap: balance;
}
.hs-copy p {
font-size: clamp(.95rem, 1.4vw, 1.1rem); color: rgba(255,255,255,.9);
margin: 0 0 1.5rem; max-width: 46ch;
}
.hs-copy-right { text-align: right; margin-left: auto; }
.hs-copy-right h2, .hs-copy-right p { margin-left: auto; }
.hs-copy-center { text-align: center; }
.hs-copy-center h2, .hs-copy-center p { margin-inline: auto; }
.hs-arrow {
position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
display: grid; place-items: center; width: 42px; height: 42px;
border: 0; border-radius: 999px; cursor: pointer;
background: rgba(255,255,255,.85); color: var(--ink);
box-shadow: var(--shadow);
}
.hs-arrow:hover { background: #fff; }
.hs-arrow svg { width: 20px; height: 20px; }
.hs-prev { left: 1rem; }
.hs-next { right: 1rem; }
.hs-dots {
position: absolute; z-index: 3; bottom: 1.1rem; left: 0; right: 0;
display: flex; justify-content: center; gap: .45rem;
}
.hs-dot {
width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
background: rgba(255,255,255,.5); cursor: pointer; transition: width .2s ease;
}
.hs-dot.is-active { background: #fff; width: 26px; }
@media (prefers-reduced-motion: reduce) {
.hs-slide { transition: none; }
}
@media (max-width: 620px) {
.hs-arrow { display: none; }
.hs-veil-left, .hs-veil-right, .hs-veil-center {
background: linear-gradient(0deg, rgba(8,14,20,.82) 15%, rgba(8,14,20,.35) 100%);
}
/* Copy drops to the bottom on a narrow screen, where a left/right split
leaves no usable width for either the words or the picture. */
.hs-slide { align-items: flex-end; }
.hs-copy { padding-bottom: 3rem; text-align: left; }
.hs-copy h2, .hs-copy p { margin-inline: 0; max-width: none; }
.hs-copy-right, .hs-copy-center { text-align: left; }
}
/* Fallback hero, shown until banners are configured. */
.hero-plain {
background: linear-gradient(180deg, var(--brand-tint), var(--page));
border-bottom: 1px solid var(--line);
padding-block: 4.5rem 4rem; text-align: center;
}
.hero-sub { max-width: 48ch; margin: 0 auto 1.75rem; color: var(--ink-soft); font-size: 1.05rem; }
/* ============================================================== BUTTONS == */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
padding: .68rem 1.35rem; border: 1px solid transparent;
border-radius: 999px; font-weight: 600; font-size: .93rem; cursor: pointer;
transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-lg { padding: .85rem 1.8rem; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
/* ========================================================= TRUST STRIP == */
.trust { background: #fff; border-bottom: 1px solid var(--line); }
.trust-inner {
display: grid; gap: 1.25rem 2rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
padding-block: 1.5rem;
}
.trust-item { display: flex; align-items: flex-start; gap: .75rem; }
.trust-item svg { width: 22px; height: 22px; flex: none; fill: var(--brand); margin-top: .15rem; }
.trust-item strong { display: block; font-size: .92rem; }
.trust-item span { display: block; font-size: .82rem; color: var(--ink-soft); line-height: 1.45; }
/* ============================================================ CATEGORIES == */
.cat-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cat-card {
display: block; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--radius);
color: var(--ink); background: #fff;
transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.cat-card:hover {
border-color: transparent; box-shadow: var(--shadow-lg);
transform: translateY(-3px); text-decoration: none;
}
.cat-img { position: relative; aspect-ratio: 4 / 3; background: var(--bg-soft); display: grid; place-items: center; }
.cat-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-img-blank { font-size: 2.5rem; font-weight: 800; color: #cfc8bd; }
.cat-body { padding: .9rem 1rem 1.05rem; }
.cat-name { display: block; font-weight: 700; font-size: 1rem; }
.cat-body small { font-size: .82rem; }
/* ============================================================= TRADE CTA == */
.trade-cta {
display: flex; align-items: center; justify-content: space-between;
gap: 2rem; flex-wrap: wrap;
padding: 2.25rem; border-radius: var(--radius);
background: var(--brand-dark); color: #fff;
}
.trade-cta h2 { color: #fff; margin: 0 0 .4rem; }
.trade-cta .muted { color: rgba(255,255,255,.78); margin: 0; max-width: 52ch; font-size: .95rem; }
.trade-cta-acts { display: flex; gap: .75rem; flex-wrap: wrap; }
.trade-cta .btn-primary { background: #fff; color: var(--brand-dark); }
.trade-cta .btn-primary:hover { background: #e9f5f2; }
.trade-cta .btn:not(.btn-primary) {
background: transparent !important; border-color: rgba(255,255,255,.45) !important; color: #fff !important;
}
.cat-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem 1.75rem; }
.chip {
padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px;
font-size: .9rem; color: var(--ink); background: #fff;
}
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip:hover { text-decoration: none; border-color: var(--brand); }
/* ------------------------------------------------------------ product grid */
/* 250px, not 230: the price row is nowrap, so the column has to be wide
enough to hold "₹2,000.00 ₹1,250.00 38% off" without the row spilling
out of the card. Narrowing this again will push the price over the edge. */
.prod-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* ---- one-row slider (homepage sections) ---- */
/* A horizontally scrolling flex row rather than a JS carousel: it scrolls with
a trackpad, a touch swipe, shift+wheel and the keyboard before a single line
of script runs. The arrows are an accelerator on top of that, not the
mechanism — with JS off the row still works. */
.rail { position: relative; }
.prod-rail {
display: flex; gap: 1.25rem;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
/* Room for the card's hover lift, which would otherwise be clipped by the
scroll container. */
padding: 4px 4px 8px;
margin: -4px -4px -8px;
/* Without this the 4px padding above becomes the first card's snap
position, so the row rests at scrollLeft 4 instead of 0 and the "scroll
left" arrow stays live at the very start of the row. */
scroll-padding-inline: 4px;
scrollbar-width: none;
}
.prod-rail::-webkit-scrollbar { display: none; }
/* Exactly four across at desktop width, and never narrower than the width the
one-row price needs. */
.prod-rail > .prod-card {
flex: 0 0 calc((100% - 3 * 1.25rem) / 4);
min-width: 250px;
scroll-snap-align: start;
}
.rail-nav {
position: absolute; top: 38%; z-index: 2;
width: 40px; height: 40px; border-radius: 999px;
display: grid; place-items: center;
background: #fff; border: 1px solid var(--line);
box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
color: var(--ink); cursor: pointer;
transition: opacity .15s ease, background .15s ease;
}
.rail-nav svg { width: 18px; height: 18px; fill: currentColor; }
.rail-nav:hover { background: var(--bg-soft); }
.rail-prev { left: -18px; }
.rail-next { right: -18px; }
/* Hidden rather than greyed at the ends: a permanently dead control is
clutter, and the row's own edge already says there is nothing further. */
.rail-nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 1100px) {
/* The arrows would sit outside the viewport at this width, so they come
inside the rail and the cards size themselves instead. */
.rail-prev { left: 4px; }
.rail-next { right: 4px; }
.prod-rail > .prod-card { flex: 0 0 min(72%, 280px); }
}
@media (max-width: 520px) {
/* On a phone the one-row price was fitting into the card with about 2px to
spare, and the row is nowrap — the next product with a five-figure MRP
would have pushed it out of the card rather than wrapping. Trimming the
type and the card padding buys roughly 30px of headroom. */
.prod-body { padding: .8rem .85rem 1rem; }
.price { font-size: .98rem; gap: .3rem; }
.price-mrp { font-size: .8em; }
.price-off { font-size: .68rem; padding: .1rem .3rem; }
}
/* Flex column so the body can stretch and push the price to the bottom.
Titles run to one or two lines and descriptions vary, so without this the
price sits at a different height on every card in the row. */
.prod-card {
display: flex; flex-direction: column; color: var(--ink); background: #fff;
border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
transition: box-shadow .15s ease, transform .15s ease;
}
.prod-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.prod-img { position: relative; aspect-ratio: 4 / 3; background: var(--bg-soft); }
.prod-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-badge {
position: absolute; top: .6rem; left: .6rem;
background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
padding: .2rem .55rem; border-radius: 999px; letter-spacing: .02em;
}
.prod-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.prod-body h3 { font-size: 1rem; margin-bottom: .25rem; }
.prod-body .muted { font-size: .85rem; margin: 0 0 .6rem; }
.size-chip {
display: inline-block; padding: .1rem .45rem; border-radius: 6px;
background: var(--bg-soft); border: 1px solid var(--line);
font-size: .75rem; font-weight: 700; color: var(--ink);
letter-spacing: .01em; white-space: nowrap;
}
.size-more { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }
/* One row, never two. `nowrap` is the guarantee; margin-top: auto is what
bottom-aligns it across every card in the row regardless of how long the
titles and descriptions above it ran. */
.price {
font-weight: 700; margin: 0; margin-top: auto;
display: flex; align-items: baseline; flex-wrap: nowrap; gap: .4rem;
white-space: nowrap;
}
.price .from { font-weight: 400; font-size: .8rem; color: var(--ink-soft); }
.price-now { line-height: 1.25; }
/* ----------------------------------------------------------- product page */
.crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.pd-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
/* height:auto is REQUIRED here, not cosmetic. The tag carries width/height
attributes so the browser can reserve the space before the file loads —
that is what stops the page jumping as images arrive. But setting
width:100% without releasing the other axis leaves the attribute's pixel
height in force, and a 1200x1200 photo then renders 420 wide by 1200
tall: stretched to nearly three times its proper height.
Never constrain one axis of an image without freeing the other. */
.pd-media img {
width: 100%; height: auto;
border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-soft);
}
.pd-thumbs { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.pd-thumb { width: 68px; height: 68px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.pd-thumb.is-active { border-color: var(--brand); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-short { color: var(--ink-soft); margin-bottom: 1.5rem; }
.variant-picker { border: 0; padding: 0; margin: 0 0 1.25rem; }
.variant-picker legend { font-weight: 600; font-size: .9rem; padding: 0 0 .5rem; }
.variant {
display: flex; align-items: center; gap: .75rem;
padding: .75rem .9rem; margin-bottom: .5rem;
border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.variant:has(input:checked) { border-color: var(--brand); background: #f2f8f6; }
.variant-label { flex: 1; }
.variant-price { font-weight: 700; white-space: nowrap; }
.variant-price s { font-weight: 400; font-size: .85rem; margin-left: .35rem; }
/* The saving pill, same component as on the listing card so the two cannot
drift apart in look or in meaning. */
.variant-price .price-off { margin-left: .4rem; vertical-align: middle; }
.qty-row { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.qty-row input { width: 90px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; }
.variant-block { margin-bottom: .5rem; }
.variant-block .variant { margin-bottom: 0; }
.variant-block.is-selected .variant { border-color: var(--brand); background: #f2f8f6; }
/* Buy-more-save-more, as a progression rather than a loose list: quantity 1
is always the first step, so each later step reads as "then it drops
further" instead of a set of disconnected facts. */
.tier-ladder {
display: flex; flex-wrap: wrap; gap: .4rem;
margin: .4rem 0 .75rem .2rem;
}
.tier-step {
display: flex; flex-direction: column; align-items: center; gap: .1rem;
min-width: 64px; padding: .35rem .55rem;
border: 1px solid var(--line); border-radius: 8px;
font-size: .74rem; color: var(--ink-soft); background: #fff;
}
.tier-step.is-active {
border-color: var(--brand); background: var(--brand); color: #fff;
}
.ts-qty { font-weight: 600; font-size: .72rem; letter-spacing: .01em; }
.tier-step:not(.is-active) .ts-qty { color: var(--ink); }
.ts-price { font-size: .82rem; font-weight: 700; }
.ts-save {
font-size: .68rem; font-weight: 600;
color: var(--brand-dark); background: #f2f8f6;
border-radius: 999px; padding: 0 .35rem;
}
.tier-step.is-active .ts-save { color: #fff; background: rgba(255,255,255,.22); }
.pd-price-line { margin: -.25rem 0 1rem; font-size: .9rem; color: var(--ink-soft); }
.pd-price-line strong { color: var(--ink); }
.pd-save {
display: inline-block; margin-left: .5rem; padding: .1rem .5rem;
background: #f2f8f6; color: var(--brand-dark); border-radius: 999px; font-size: .78rem;
}
/* Placeholder-image disclaimer — product listing card and detail page. */
.prod-img-note {
position: absolute; left: 0; right: 0; bottom: 0;
padding: .3rem .5rem; font-size: .68rem; text-align: center;
color: #fff; background: rgba(16,24,40,.55);
}
.pd-img-note {
margin: .5rem 0 0; font-size: .78rem; font-style: italic; color: var(--ink-soft);
}
.lead-note {
margin-top: 1.25rem; padding: .7rem .9rem;
background: var(--bg-soft); border-left: 3px solid var(--accent);
border-radius: 0 8px 8px 0; font-size: .9rem; color: var(--ink-soft);
}
.pd-desc { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
/* ------------------------------------------------------------------- cart */
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.cart-table th {
text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
color: var(--ink-soft); font-weight: 600; padding: .5rem .6rem; border-bottom: 1px solid var(--line);
}
.cart-table td { padding: .85rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.cart-table .line-total { font-weight: 700; white-space: nowrap; }
.cart-table .cart-size { white-space: nowrap; width: 1%; }
.qty-input { width: 72px; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; }
.small { font-size: .85rem; }
.cart-actions { margin-bottom: 2rem; }
.btn:not(.btn-primary) { background: #fff; border-color: var(--line); color: var(--ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Category grouping — mirrors how the staff order screen prints an order */
.cart-group { margin-bottom: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cart-group-head {
display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
padding: .75rem 1rem; background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.cart-group .cart-table { margin: 0; }
.cart-group .cart-table td, .cart-group .cart-table th { padding-inline: 1rem; }
.cart-table tfoot .cat-total td {
font-weight: 700; background: #f2f8f6; border-bottom: 0; border-top: 1px solid var(--line);
}
.cart-lower { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; justify-content: space-between; }
.qty-summary {
min-width: 240px; padding: 1.25rem;
border: 1px solid var(--line); border-radius: var(--radius);
}
.qty-summary h3 { font-size: .95rem; margin-bottom: .5rem; }
.mini-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.mini-table td { padding: .3rem 0; }
.mini-table td:last-child { text-align: right; font-weight: 600; }
.mini-table .mini-total td { border-top: 1px solid var(--line); padding-top: .5rem; font-weight: 700; }
.cart-summary {
flex: 1; max-width: 380px; margin-left: auto; padding: 1.25rem;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft);
}
.sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .95rem; }
.sum-row strong { font-size: 1.1rem; }
/* Category eyebrow + veg/non-veg mark */
/* Now carries the size chip alongside the category name, so it is a flex row
that wraps rather than an inline block — a long category name plus a chip
must drop the chip to the next line, not overflow the card. */
.prod-cat {
display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
color: var(--ink-soft); font-weight: 600; margin-bottom: .3rem;
}
/* Reset the inherited uppercase/letter-spacing: "4L" is a unit, not a label. */
.prod-cat .size-chip { text-transform: none; letter-spacing: 0; }
.food-mark {
display: inline-block; width: 13px; height: 13px; border-radius: 2px;
border: 1.5px solid currentColor; position: relative; vertical-align: middle; margin-left: .35rem;
}
.food-mark::after {
content: ''; position: absolute; inset: 0; margin: auto;
width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.food-mark.veg { color: #067647; }
.food-mark.nonveg { color: #b42318; }
.pd-specs { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem; margin-top: 1.5rem; font-size: .9rem; }
.pd-specs dt { color: var(--ink-soft); }
.pd-specs dd { margin: 0; font-weight: 600; }
.variant-label small { display: block; font-weight: 400; font-size: .8rem; }
.holding { text-align: center; padding-block: 5rem; }
.static-page { max-width: 70ch; }
.static-page h2 { margin-top: 1.75rem; }
/* ------------------------------------------------------------------ small */
@media (max-width: 820px) {
.pd-grid { grid-template-columns: 1fr; gap: 1.75rem; }
.cart-summary { max-width: none; }
.cart-lower { flex-direction: column; }
.qty-summary { width: 100%; }
.cart-group { overflow-x: auto; }
}
/* =========================================================== ACCOUNT ====
Customer account area: sign in / register, dashboard, orders, addresses.
Shares the storefront tokens above - no separate theme. */
/* ---- auth cards (sign in / register) ---- */
.auth-wrap { display: flex; justify-content: center; padding-block: 3rem 4rem; }
.auth-card {
width: min(420px, 100%);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 2rem;
}
.auth-card h1 { font-size: 1.5rem; margin-bottom: .25rem; }
.auth-card .muted { font-size: .9rem; margin-top: 0; }
.auth-alt { margin: 1.25rem 0 0; text-align: center; font-size: .9rem; color: var(--ink-soft); }
/* ---- forms ---- */
.stack { display: block; }
.stack label {
display: block; margin: 1rem 0 .35rem;
font-size: .85rem; font-weight: 600; color: var(--ink);
}
.stack label.check {
display: flex; align-items: center; gap: .5rem;
font-weight: 500; margin-top: 1rem;
}
.stack label.check input { width: auto; margin: 0; }
.stack .opt { font-weight: 400; color: var(--ink-soft); font-size: .8rem; }
.stack input[type="text"],
.stack input[type="tel"],
.stack input[type="email"],
.stack input[type="password"],
.stack input[type="number"],
.stack select,
.stack textarea {
width: 100%; padding: .6rem .7rem;
border: 1px solid var(--line); border-radius: 8px;
font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
}
.stack input:focus, .stack select:focus, .stack textarea:focus {
outline: none; border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(15,123,108,.12);
}
.stack input:disabled { background: var(--bg-soft); color: var(--ink-soft); }
.stack .hint { display: block; margin-top: .3rem; font-size: .8rem; color: var(--ink-soft); }
.stack button { margin-top: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1rem; }
.row-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }
.row-actions a { font-size: .9rem; }
.row-actions a.danger { color: var(--danger); }
.btn-ghost { background: transparent !important; border-color: transparent !important; color: var(--ink-soft) !important; }
/* ---- account shell ---- */
.acct { padding-block: 2rem 4rem; }
.acct h1 { font-size: 1.6rem; }
.crumb { font-size: .9rem; margin: 0 0 .75rem; }
.acct-nav {
display: flex; gap: .25rem; flex-wrap: wrap;
border-bottom: 1px solid var(--line);
margin-bottom: 1.75rem;
}
.acct-nav a {
padding: .6rem .9rem; font-size: .92rem; color: var(--ink-soft);
border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.acct-nav a:hover { color: var(--ink); text-decoration: none; }
.acct-nav a.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.acct-nav-out { margin-left: auto; }
.acct-hello { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.25rem; }
.acct-hello strong { font-size: 1.05rem; }
.acct-actions { margin-bottom: 1.25rem; }
/* ---- stat row ---- */
.stat-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem; margin-bottom: 1.75rem;
}
.stat {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.1rem 1.25rem;
}
.stat b { display: block; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; }
.stat span { font-size: .82rem; color: var(--ink-soft); }
/* ---- panels ---- */
.panel {
background: #fff; border: 1px solid var(--line);
border-radius: var(--radius); margin-bottom: 1.5rem; overflow: hidden;
}
.panel-narrow { max-width: 640px; }
.panel-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.panel-head h2 { font-size: 1rem; margin: 0; }
.panel-head a { font-size: .85rem; }
.panel-body { padding: 1.25rem; }
.acct-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.empty { padding: 2.5rem 1.25rem; text-align: center; color: var(--ink-soft); }
.empty p { margin: 0 0 1rem; }
/* ---- tables ---- */
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: .7rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); }
.table thead th {
font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
color: var(--ink-soft); font-weight: 600; background: var(--bg-soft);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot th { background: var(--bg-soft); font-size: .85rem; border-bottom: 0; }
.table .r { text-align: right; }
/* ---- tags / statuses ---- */
.tag {
display: inline-block; padding: .2rem .55rem; border-radius: 999px;
font-size: .75rem; font-weight: 600; background: var(--bg-soft); color: var(--ink-soft);
border: 1px solid var(--line); white-space: nowrap;
}
.tag-lg { font-size: .85rem; padding: .35rem .8rem; }
.tag-ok { background: #ecfdf3; color: var(--ok); border-color: #abefc6; }
.st-confirmed { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.st-in-production { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.st-dispatched { background: #ecfdf3; color: var(--ok); border-color: #abefc6; }
.st-delivered { background: #ecfdf3; color: #05603a; border-color: #6ce9a6; }
.st-cancelled { background: #fef3f2; color: var(--danger); border-color: #fecdca; }
.st-awaiting-payment { background: #f2f4f7; color: #475467; border-color: #e4e7ec; }
/* ---- progress bar (mirrors the ERP's DONE/BAL bar) ---- */
.prog { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; min-width: 80px; }
.prog span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.prog-cell small { font-size: .75rem; color: var(--ink-soft); }
.prog-wide .prog { height: 10px; }
.prog-legend {
display: flex; gap: 1.5rem; margin-top: .6rem;
font-size: .85rem; color: var(--ink-soft);
}
.prog-legend strong { color: var(--ink); }
.note { font-size: .85rem; margin-bottom: 0; }
/* ---- order detail ---- */
.order-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.order-head h1 { margin-bottom: .15rem; }
.order-head p { margin: 0; font-size: .9rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem; margin: 0; font-size: .92rem; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; text-align: right; }
.money-kv dd { font-variant-numeric: tabular-nums; }
.kv .tot { font-weight: 700; font-size: 1.05rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
display: flex; gap: 1rem; padding: .5rem 0;
border-left: 2px solid var(--line); padding-left: 1rem; margin-left: .25rem;
}
.timeline .when { color: var(--ink-soft); font-size: .82rem; min-width: 10rem; }
/* ---- addresses ---- */
.addr { font-style: normal; font-size: .92rem; line-height: 1.6; }
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.addr-card { margin-bottom: 0; }
.addr-label { font-weight: 600; margin: .5rem 0 .25rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
@media (max-width: 780px) {
.acct-cols, .grid-2, .grid-3 { grid-template-columns: 1fr; }
.acct-nav-out { margin-left: 0; }
.table th, .table td { padding: .6rem .75rem; }
/* Wide tables scroll inside their panel rather than the page. */
.panel { overflow-x: auto; }
}
.timeline .what { font-size: .9rem; }
/* ======================================================= CONFIRM DIALOG ==
Stands in for window.confirm(), which renders as an unstyled "site says"
box. Driven by store.js; built once on first use. */
.confirm-overlay {
position: fixed; inset: 0; z-index: 100;
display: grid; place-items: center; padding: 1.25rem;
background: rgba(16,24,40,.5); backdrop-filter: blur(2px);
opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s;
}
.confirm-overlay.is-open { opacity: 1; visibility: visible; }
.confirm-box {
width: min(400px, 100%); padding: 1.6rem;
background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
transform: scale(.96); transition: transform .16s ease;
}
.confirm-overlay.is-open .confirm-box { transform: none; }
.confirm-msg { margin: 0 0 1.4rem; font-size: 1rem; line-height: 1.5; }
.confirm-acts { display: flex; justify-content: flex-end; gap: .6rem; }
/* ========================================================= RESTYLE PASS ==
Everything below re-tunes components defined earlier in this file so the
inner pages match the new homepage: the page is warm off-white now, so a
plain white card needs no border to read as a card, and the old cool-grey
fills look out of place against it. */
/* Cards and panels lift off the page instead of being outlined. */
.prod-card, .panel, .auth-card, .stat, .qty-summary, .cart-group {
border-color: var(--line);
box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.prod-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.prod-body h3 { font-size: 1.02rem; }
.prod-badge { border-radius: 6px; letter-spacing: .03em; text-transform: uppercase; }
.price { font-size: 1.05rem; }
/* Warm the greys that were picked against a pure-white page. */
.panel-head, .cart-group-head, .table thead th, .table tfoot th,
.cart-summary, .lead-note { background: var(--bg-soft); }
.cart-table tfoot .cat-total td { background: var(--brand-tint); }
/* Inputs: bigger target, rounder, and a focus ring that is actually visible. */
.stack input[type="text"], .stack input[type="tel"], .stack input[type="email"],
.stack input[type="password"], .stack input[type="number"],
.stack select, .stack textarea,
.qty-row input, .qty-input {
border-radius: var(--radius-sm); padding: .65rem .8rem;
}
.qty-row input:focus, .qty-input:focus {
outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,123,108,.12);
}
/* Chips and variant rows follow the pill language of the buttons. */
.chip { padding: .45rem 1rem; font-weight: 500; }
.chip.is-active { box-shadow: 0 1px 2px rgba(11,93,81,.3); }
.variant { border-radius: var(--radius-sm); }
.variant-block.is-selected .variant,
.variant:has(input:checked) { background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand); }
/* Page-level headings get room to breathe now the container is wider. */
.acct, .static-page { padding-block: 2.5rem 4rem; }
.crumbs { margin-bottom: 1.5rem; }
.pd-grid { gap: 3rem; }
.pd-media img { border-radius: var(--radius); }
.holding { padding-block: 6rem; }
/* ================================================ GST, MIN QTY, PINCODE ==
Everything the storefront needed for minimum order quantities, per-line
GST, and the cart's delivery check.
-------------------------------------------------------------------- */
/* ---- minimum order quantity ---- */
/* Stated under the pack it belongs to, because the minimum is per-variant
and a single note near the button could not say which pack it meant. */
.variant-min {
margin: .35rem 0 0;
padding-left: .1rem;
font-size: .82rem;
font-weight: 600;
color: var(--brand-dark);
}
.qty-min-note {
margin-left: .6rem;
font-size: .82rem;
font-weight: 600;
color: var(--brand-dark);
}
.qty-min-note[hidden] { display: none; }
/* In the cart the note sits under the number rather than beside it — the
qty column is narrow and beside would push the table wider. */
.qty-min {
display: block;
margin-top: .25rem;
font-size: .75rem;
font-weight: 600;
color: var(--brand-dark);
white-space: nowrap;
}
/* ---- tax ---- */
.pd-tax-note {
margin: .4rem 0 .9rem;
font-size: .86rem;
color: var(--ink-soft);
}
/* ---- cart summary ---- */
.sum-row small { font-weight: 400; }
/* The one line that is actually the answer, separated from the working
above it. */
.sum-row.sum-total {
margin-top: .5rem;
padding-top: .7rem;
border-top: 1px solid var(--line);
font-size: 1.02rem;
}
.sum-row.sum-total strong { font-size: 1.25rem; }
/* ---- delivery check ---- */
.pin-check {
margin: 0 0 1.1rem;
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--line);
}
.pin-check label {
display: block;
margin-bottom: .4rem;
font-size: .85rem;
font-weight: 600;
}
.pin-row { display: flex; gap: .5rem; }
.pin-row input {
flex: 1 1 auto;
min-width: 0;
padding: .5rem .65rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: #fff;
font: inherit;
/* Tabular figures so 111111 and 560001 are the same width — a pincode
field that reflows as you type reads as broken. */
font-variant-numeric: tabular-nums;
letter-spacing: .06em;
}
.pin-row input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-tint);
}
.pin-row .btn { flex: 0 0 auto; }
.pin-ok, .pin-bad {
margin: .55rem 0 0;
font-size: .85rem;
line-height: 1.5;
}
.pin-ok { color: var(--brand-dark); }
.pin-bad { color: #8a3f16; }
.pin-bad a { color: inherit; font-weight: 600; }
/* Tap-to-call under an unserviceable-pincode message. Sits on its own line
at full width so it is a clear next step rather than a link lost in the
sentence, and so it is a comfortable thumb target on a phone — which is
where a tel: link actually does anything. */
.pin-call {
display: inline-flex;
align-items: center;
gap: .4rem;
margin-top: .5rem;
background: #8a3f16;
border-color: #8a3f16;
color: #fff;
}
.pin-call:hover,
.pin-call:focus { background: #6f320f; border-color: #6f320f; color: #fff; }
@media (max-width: 420px) {
.pin-call { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
.pin-row { flex-wrap: wrap; }
.pin-row .btn { width: 100%; }
}
/* ========================================================== mini cart ===
* Slide-over cart panel. Hidden and out of the tab order until store.js
* opens it, so a visitor without JavaScript never meets an empty box —
* they get the ordinary /cart page instead.
*/
.mc-scrim {
position: fixed; inset: 0; z-index: 60;
background: rgba(15, 23, 26, .45);
opacity: 0; transition: opacity .22s ease;
}
.mc-scrim.is-open { opacity: 1; }
.mini-cart {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
width: min(420px, 92vw);
display: flex; flex-direction: column;
background: var(--bg, #fff);
box-shadow: -18px 0 48px rgba(15, 23, 26, .18);
transform: translateX(100%);
transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.mini-cart.is-open { transform: translateX(0); }
.mini-cart.is-busy { opacity: .6; pointer-events: none; }
.mc-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* Stops the page behind the panel scrolling under the shopper's finger. */
body.mc-locked { overflow: hidden; }
.mc-head {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 1.1rem 1.25rem;
border-bottom: 1px solid var(--line, #e6e6e6);
flex: 0 0 auto;
}
.mc-title { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
.mc-bag { width: 20px; height: 20px; }
.mc-close {
background: none; border: 0; cursor: pointer; padding: .35rem;
color: var(--ink-soft, #666); line-height: 0; border-radius: 6px;
}
.mc-close:hover { background: var(--surface-2, #f4f4f4); color: inherit; }
.mc-close svg { width: 20px; height: 20px; }
.mc-notice {
margin: 0; padding: .7rem 1.25rem;
background: #fff7e6; border-bottom: 1px solid #f0dcb0;
font-size: .85rem; color: #7a5200;
}
/* The only scrolling region, so the total and the button below it stay put
however many lines are in the cart. */
.mc-body { flex: 1 1 auto; overflow-y: auto; padding: .5rem 1.25rem; min-height: 0; }
.mc-empty { display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; }
.mc-line { display: flex; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line, #eee); }
.mc-line:last-child { border-bottom: 0; }
.mc-line-main { flex: 1 1 auto; min-width: 0; }
.mc-line-title { display: block; font-weight: 600; text-decoration: none; color: inherit; }
.mc-line-title:hover { text-decoration: underline; }
.mc-line-var {
display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
font-size: .82rem; color: var(--ink-soft, #666); margin-top: .2rem;
}
.mc-line-var .size-chip { font-size: .7rem; padding: .05rem .35rem; }
.mc-line-row { display: flex; align-items: center; gap: .85rem; margin-top: .6rem; }
.mc-min { display: block; font-size: .75rem; color: var(--ink-soft, #666); margin-top: .35rem; }
.mc-line-money { text-align: right; white-space: nowrap; }
.mc-line-money small { display: block; font-size: .75rem; margin-top: .15rem; }
.mc-step { display: inline-flex; align-items: center; border: 1px solid var(--line, #ddd); border-radius: 999px; }
.mc-step-btn {
background: none; border: 0; cursor: pointer;
width: 30px; height: 30px; font-size: 1rem; line-height: 1;
color: var(--ink-soft, #555); border-radius: 999px;
}
.mc-step-btn:hover { background: var(--surface-2, #f4f4f4); color: inherit; }
.mc-step-qty {
width: 42px; border: 0; text-align: center; font-size: .9rem;
background: none; padding: 0; -moz-appearance: textfield;
}
.mc-step-qty::-webkit-outer-spin-button,
.mc-step-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mc-step-qty:focus { outline: none; }
.mc-remove { font-size: .8rem; color: var(--ink-soft, #666); }
.mc-foot {
flex: 0 0 auto; padding: 1.1rem 1.25rem;
border-top: 1px solid var(--line, #e6e6e6);
background: var(--surface-2, #fafafa);
}
.mc-sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.mc-sum strong { font-size: 1.15rem; }
.mc-note { margin: .45rem 0 .9rem; font-size: .82rem; color: var(--ink-soft, #666); }
@media (prefers-reduced-motion: reduce) {
.mini-cart, .mc-scrim { transition: none; }
}
/* ------------------------------------------------- cart page quantity ---
* The − / + buttons are injected by store.js, so they only ever appear
* where they actually work.
*/
.qty-cell { display: inline-flex; align-items: center; gap: .25rem; }
.qty-btn {
background: none; border: 1px solid var(--line, #ddd); border-radius: 6px;
width: 28px; height: 28px; cursor: pointer; line-height: 1;
color: var(--ink-soft, #555); font-size: .95rem;
}
.qty-btn:hover { background: var(--surface-2, #f4f4f4); color: inherit; }
form.is-updating { opacity: .55; pointer-events: none; }
/* An inclusive-mode GST row is information, not another charge, so it is
indented away from the lines that do add up. */
.sum-row.sum-sub { padding-left: .9rem; font-size: .88rem; color: var(--ink-soft, #666); }
/* ==================================================== private label ====
* Homepage band and the About page.
*/
.pl-band {
background: var(--brand-deep, #0f4c3a);
color: #fff;
border-radius: 18px;
padding: clamp(1.75rem, 4vw, 3rem);
}
.pl-eyebrow {
display: inline-block;
font-size: .74rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
opacity: .75; margin-bottom: .6rem;
}
.pl-band h2 { margin: 0 0 .75rem; font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.pl-copy { max-width: 62ch; }
.pl-band p { opacity: .92; }
.pl-points { margin: 1.1rem 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.pl-points li { position: relative; padding-left: 1.5rem; opacity: .92; }
.pl-points li::before { content: "→"; position: absolute; left: 0; opacity: .7; }
.pl-acts { display: flex; flex-wrap: wrap; gap: .75rem; }
.pl-band .btn:not(.btn-primary) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.pl-band .btn:not(.btn-primary):hover { background: rgba(255, 255, 255, .12); }
.about-page .pl-eyebrow { color: var(--brand, #0f766e); opacity: 1; }
.about-lede { font-size: 1.12rem; line-height: 1.65; }
.about-grid {
display: grid; gap: 1rem; margin: 1.5rem 0 2rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.about-card {
border: 1px solid var(--line, #e6e6e6); border-radius: 12px;
padding: 1.1rem 1.15rem; background: var(--surface-2, #fafafa);
}
.about-card h3 { margin: 0 0 .4rem; font-size: 1rem; }
.about-card p { margin: 0; font-size: .9rem; color: var(--ink-soft, #555); }
.about-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* --------------------------------------------------------- static pages */
.static-page { max-width: 76ch; }
.static-page h2 { margin-top: 2rem; font-size: 1.2rem; }
.static-page h3 { margin-top: 1.35rem; font-size: 1rem; }
.static-page p, .static-page li { line-height: 1.7; }
.static-page ul { padding-left: 1.25rem; }
.static-page li { margin-bottom: .4rem; }
.about-page { max-width: 82ch; }
/* ============================================== recently viewed ===
* A horizontal rail of what this visitor looked at, above the footer.
* Scrolls rather than wraps: this is a secondary aid, and letting it
* grow to three rows would push the footer off a phone screen.
*/
.recent-strip {
border-top: 1px solid var(--line);
background: var(--page);
padding: 1.6rem 0 1.9rem;
}
.recent-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; margin-bottom: .9rem;
}
.recent-head h2 { font-size: 1.05rem; margin: 0; letter-spacing: -.01em; }
.recent-all { font-size: .85rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.recent-all:hover { text-decoration: underline; }
.recent-rail {
display: flex;
gap: .8rem;
overflow-x: auto;
padding-bottom: .5rem;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.recent-rail:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-sm); }
.recent-rail::-webkit-scrollbar { height: 6px; }
.recent-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.recent-card {
flex: 0 0 148px;
scroll-snap-align: start;
display: flex; flex-direction: column; gap: .4rem;
padding: .55rem;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
text-decoration: none; color: inherit;
transition: border-color .15s, transform .15s;
}
.recent-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.recent-img {
display: block; aspect-ratio: 1 / 1; overflow: hidden;
border-radius: 8px; background: var(--bg-soft);
}
.recent-img img { width: 100%; height: 100%; object-fit: cover; }
.recent-name {
font-size: .82rem; font-weight: 600; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.recent-price { font-size: .78rem; color: var(--ink-soft); }
/* ==================================================== cart page ===
* The cart carries the most consequential numbers on the site, so it
* gets more visual structure than the rest of the storefront rather
* than less.
*/
.cart-head {
display: flex; align-items: baseline; gap: .75rem;
margin-bottom: 1rem; flex-wrap: wrap;
}
.cart-count {
font-size: .82rem; font-weight: 600; color: var(--ink-soft);
background: var(--bg-soft); padding: .2rem .6rem; border-radius: 999px;
}
.cart-empty {
display: grid; place-items: center; gap: .85rem;
padding: 3.5rem 1rem; text-align: center;
background: var(--page); border: 1px solid var(--line);
border-radius: var(--radius); margin-top: 1rem;
}
.cart-empty-ico { width: 42px; height: 42px; fill: var(--line); }
.save-banner {
display: flex; align-items: center; gap: .55rem;
margin: 0 0 1.1rem;
padding: .7rem .95rem;
background: #ecfdf3;
border: 1px solid #abefc6;
border-radius: var(--radius-sm);
color: #05603a;
font-size: .9rem;
}
.save-banner svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.save-banner strong { font-weight: 700; }
.price-cell { line-height: 1.35; }
.price-cell strong { display: block; font-weight: 650; }
.price-cell .was {
display: inline-block; font-size: .78rem; color: var(--ink-soft); margin-top: .1rem;
}
.tier-tag {
display: inline-block; margin-top: .15rem;
font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
color: var(--brand); background: var(--brand-tint);
padding: .1rem .38rem; border-radius: 4px;
}
.sum-row.sum-save { color: #05603a; }
.sum-row.sum-save strong { color: #05603a; }
.mc-save {
display: inline-block; margin-top: .15rem;
font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
color: var(--brand); background: var(--brand-tint);
padding: .08rem .34rem; border-radius: 4px;
}
.mc-sum-save { color: #05603a; }
.mc-sum-save strong { color: #05603a; }
@media (max-width: 640px) {
.recent-card { flex-basis: 128px; }
}
/* ------------------------------------------- private label band (v2) ---
* Overrides the block above. The band was tall enough on a laptop to push
* both the catalog above it and the sign-up CTA below it off screen, so
* the padding is smaller, the type is smaller, and an optional picture
* takes the right-hand half.
*/
.pl-band {
padding: clamp(1.25rem, 2.4vw, 1.9rem);
border-radius: 16px;
}
.pl-band h2 {
margin: 0 0 .5rem;
font-size: clamp(1.3rem, 2.2vw, 1.65rem);
}
.pl-band p { font-size: .93rem; line-height: 1.55; margin: 0; }
.pl-copy { max-width: 56ch; }
.pl-points { margin: .85rem 0 1.1rem; gap: .35rem; font-size: .9rem; }
.pl-points li { padding-left: 1.35rem; }
/* Two columns only when there is actually a picture — an empty half of a
dark panel reads as a failed image, not as breathing room. */
.pl-band.has-img {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: clamp(1.25rem, 3vw, 2.25rem);
align-items: center;
}
.pl-band.has-img .pl-copy { max-width: none; }
.pl-media {
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 3;
background: rgba(255, 255, 255, .08);
}
.pl-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-b2b {
margin-top: 1rem;
padding-top: .85rem;
border-top: 1px solid rgba(255, 255, 255, .18);
font-size: .88rem;
opacity: .92;
}
.pl-b2b a {
color: #fff;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
@media (max-width: 860px) {
/* The picture goes above the copy rather than disappearing — it is the
only thing on this panel that shows what the factory actually makes. */
.pl-band.has-img { grid-template-columns: 1fr; }
.pl-band.has-img .pl-media { order: -1; aspect-ratio: 16 / 9; }
}
/* ---------------------------------------------------------------- packs ---
Products sold in sealed boxes show the box count alongside the piece
count. Muted and parenthetical: the piece price is the number a trade
buyer compares on, so the box figure supports it rather than competing. */
.pd-boxes {
color: var(--muted);
font-weight: 500;
white-space: nowrap;
}
/* ------------------------------------------------- card MRP / saving --- */
/* The struck MRP is deliberately quieter and smaller than the price being
charged. The number the customer actually pays has to be the one their
eye lands on first — a bold strike-through next to a plain price reads
as the opposite. */
.price-mrp {
color: var(--ink-soft);
font-weight: 500;
font-size: .85em;
text-decoration-thickness: 1px;
}
/* Spacing between these two comes from the flex gap on .price, not from
margins here — margins would double up with it. */
.price-off {
display: inline-block;
padding: .1rem .4rem;
border-radius: 999px;
background: var(--ok-soft, #e7f7ed);
color: var(--ok, #1a7f45);
font-size: .72rem;
font-weight: 700;
letter-spacing: .01em;
vertical-align: middle;
}
/* A section can carry a line of supporting copy under its heading. The
heading and the "see all" link stay on one baseline; the subtitle hangs
below the heading rather than pushing the link down with it. */
.section-head > div:first-child { min-width: 0; }
.section-sub { margin: .15rem 0 0; font-size: .9rem; }
/* ============================================================ CHECKOUT ==
Two columns on desktop, one on mobile, with the summary sticky beside a
long item list. */
.co-grid {
display: grid; grid-template-columns: minmax(0, 1fr) 340px;
gap: 2rem; align-items: start;
}
.co-h { font-size: 1rem; margin: 1.5rem 0 .75rem; }
.co-main > .co-h:first-child { margin-top: 0; }
.co-addresses { display: grid; gap: .6rem; }
.co-addr {
display: flex; gap: .7rem; align-items: flex-start;
border: 1px solid var(--line, #e3e8ee); border-radius: var(--radius);
padding: .8rem .9rem; cursor: pointer;
}
.co-addr.is-on { border-color: var(--brand, #0f7b6c); background: #f6fbfa; }
.co-addr input { margin-top: .25rem; flex: none; }
.co-addr-body { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.co-addr-tag {
align-self: flex-start; font-size: .7rem; text-transform: uppercase;
letter-spacing: .05em; background: var(--bg-soft, #f1f5f9);
padding: .1rem .45rem; border-radius: 4px;
}
.co-items { display: grid; gap: 1rem; }
.co-cat { border: 1px solid var(--line, #e3e8ee); border-radius: var(--radius); overflow: hidden; }
.co-cat-head {
background: var(--bg-soft, #f8fafc); padding: .55rem .9rem;
font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.co-size { font-weight: 600; opacity: .7; margin-left: .4rem; }
.co-line {
display: grid; grid-template-columns: minmax(0,1fr) auto auto;
gap: .5rem 1rem; align-items: baseline;
padding: .6rem .9rem; border-top: 1px solid var(--line, #e3e8ee); font-size: .9rem;
}
.co-line-name small { display: block; opacity: .65; font-size: .8rem; }
.co-line-qty { opacity: .75; white-space: nowrap; }
.co-line-amt { font-weight: 600; white-space: nowrap; }
.co-summary {
position: sticky; top: 90px;
border: 1px solid var(--line, #e3e8ee); border-radius: var(--radius); padding: 1.1rem;
}
.co-summary .co-h { margin-top: 0; }
.co-paynote {
background: var(--bg-soft, #f8fafc); border-radius: 8px;
padding: .75rem .85rem; margin: .9rem 0; font-size: .85rem;
}
.co-paynote p { margin: .35rem 0 0; }
/* ---- order placed ---- */
.co-done { text-align: center; padding: 1rem 0 2rem; }
.co-done-mark {
width: 56px; height: 56px; margin: 0 auto .8rem; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #ecfdf3; color: #067647; font-size: 1.8rem;
}
.co-done-num { font-size: 1.05rem; }
.co-pay { border: 2px solid var(--brand, #0f7b6c); border-radius: var(--radius);
padding: 1.25rem; margin-bottom: 2rem; }
.co-pay h2 { margin-top: 0; }
.co-pay-amount {
display: flex; justify-content: space-between; align-items: baseline;
gap: 1rem; padding: .7rem .9rem; margin: .9rem 0;
background: var(--bg-soft, #f8fafc); border-radius: 8px;
}
.co-pay-amount strong { font-size: 1.3rem; }
.co-pay-box { border: 1px solid var(--line, #e3e8ee); border-radius: 8px; padding: 1rem; }
.co-pay-box h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em;
margin: 0 0 .5rem; }
.co-pay-box h3 + * { margin-top: 0; }
.co-pay-dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem;
margin: 0 0 1rem; font-size: .92rem; }
.co-pay-dl dt { opacity: .7; }
/* Account numbers, IFSC and UPI ids get copied by hand off this page, so
they are set in a monospace face where 0/O and 1/l are distinguishable. */
.co-pay-dl dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.co-pay-ref { margin: 0; font-size: .9rem; }
.co-pay-contact { margin: .5rem 0 0; padding-left: 1.1rem; }
.co-recap { margin-bottom: 2rem; }
.co-recap-sum { margin-top: 1rem; max-width: 340px; margin-left: auto; }
@media (max-width: 900px) {
.co-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.co-summary { position: static; }
}
@media (max-width: 520px) {
.co-line { grid-template-columns: minmax(0,1fr) auto; }
.co-line-qty { grid-column: 1; opacity: .7; }
.co-recap-sum { max-width: none; }
}
/* ============================================================ address form ===
The add/edit delivery address form. Sectioned rather than one long column:
eleven fields in an unbroken run is hard to scan, and grouping them by what
they answer (who / where / filing) gives the eye somewhere to rest.
========================================================================== */
.af-head { margin-bottom: 1.1rem; }
.af-head h1 { margin: 0 0 .25rem; }
.af-legend { margin: 0; font-size: .88rem; color: var(--ink-soft); }
/* The required marker. Colour alone is never the signal — the asterisk itself
carries the meaning, and the legend above spells it out in words, so this
still reads for anyone who cannot distinguish the red. aria-hidden on the
marker keeps screen readers off a decorative "star"; the inputs' own
`required` attribute is what announces the constraint. */
.af-req {
color: var(--danger);
font-weight: 700;
margin-left: .1rem;
}
.af-opt {
margin-left: .3rem;
font-size: .78rem;
font-weight: 400;
color: var(--ink-soft);
}
.af-card { border-radius: 14px; }
.af-form { display: block; }
/* No padding-bottom here. It used to stack with the next section's own
margin-top AND padding-top, putting a ~4rem hole either side of every
divider. One gap above the rule, one below, nothing else. */
.af-section + .af-section {
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
}
.af-section-title {
margin: 0 0 .7rem;
font-size: .78rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-soft);
}
.af-field { margin-bottom: .8rem; }
.af-field:last-child { margin-bottom: 0; }
/* A grid cell is as tall as the tallest in its row, so a field whose
neighbour carries a hint used to sit in a pool of dead space. Pinning the
cells to the top of the row keeps the inputs aligned and moves the slack
below both, where it reads as ordinary spacing. */
.af-grid > .af-field { align-self: start; }
.af-field label {
display: block;
margin-bottom: .3rem;
font-size: .9rem;
font-weight: 600;
}
.af-field input[type="text"],
.af-field input[type="tel"],
.af-field input[type="email"] {
width: 100%;
padding: .65rem .8rem;
font: inherit;
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color .12s ease, box-shadow .12s ease;
}
.af-field input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-tint);
}
/* :user-invalid, not :invalid — the plain form paints every empty required
field red the instant the page loads, before the customer has typed
anything. :user-invalid waits until the field has actually been interacted
with. Browsers without support simply show no red, which is the right way
for this to degrade. (A :not(:placeholder-shown) trick would NOT work: an
input with no placeholder never matches :placeholder-shown, so every
placeholder-less required field would go red on load.) */
.af-field input:user-invalid { border-color: var(--danger); }
.af-hint {
margin: .3rem 0 0;
font-size: .78rem;
line-height: 1.45;
color: var(--ink-soft);
}
.af-grid { display: grid; gap: 0 1rem; }
.af-grid-2 { grid-template-columns: 1fr 1fr; }
.af-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.af-check {
display: flex;
align-items: flex-start;
gap: .6rem;
padding: .8rem .9rem;
background: var(--brand-tint);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
}
.af-check input { margin-top: .2rem; flex: 0 0 auto; }
.af-check strong { display: block; font-size: .9rem; font-weight: 600; }
.af-check .af-hint { margin-top: .15rem; }
/* A ticklist of several options (product interest, "how did you hear about
us") — same .af-check pill, laid out to wrap instead of stacking one per
line, which is unreadable past about six items. */
.af-check-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: .5rem;
}
.af-check-grid .af-check { padding: .6rem .8rem; }
/* Not yet decided / consent: their own line below the grid rather than one
more cell in it, since ticking either is a different kind of answer than
ticking a product. */
.ta-not-decided { margin-top: .6rem; }
/* A yes/no pair. Two .af-check pills side by side rather than a native
radio row — keeps the same tap target size as every other choice on this
form instead of a small dot that is easy to miss on a phone. */
.af-radio-row { display: flex; gap: .6rem; }
.af-radio-row .af-check { flex: 1 1 0; justify-content: center; }
/* Required, so it earns its own visual weight rather than blending into the
pill list above it — this is the one tick that gates the whole submit. */
.ta-consent .af-check {
background: var(--bg);
border-color: var(--brand);
}
.af-actions {
display: flex;
gap: .6rem;
margin-top: 1.35rem;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
}
@media (max-width: 600px) {
/* One column on a phone. A three-across city/state/pincode row squeezes
each box below a usable width long before the viewport gets narrow. */
.af-grid-2,
.af-grid-3 { grid-template-columns: 1fr; }
.af-actions { flex-direction: column; }
.af-actions .btn { width: 100%; text-align: center; }
}
/* ---------------------------------------------------------------------------
Tasting appointments (/tasting)
Reuses the .af-* form kit from the address form for every input, so the two
forms cannot drift apart. Only what is genuinely new to this page lives
here: the slot picker, the two-column layout and the confirmation card.
--------------------------------------------------------------------------- */
.ta-page { padding-block: 2rem 4rem; }
.ta-head { margin-bottom: 1.25rem; }
.ta-head h1 { font-size: 1.9rem; margin-bottom: .35rem; }
.ta-intro { margin: 0; max-width: 62ch; color: var(--ink-soft); }
.ta-cols {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 1.5rem;
align-items: start;
margin-top: 1.25rem;
}
.ta-card { border-radius: 14px; }
.ta-aside { display: flex; flex-direction: column; gap: 1rem; }
.ta-steps { margin: 0; padding-left: 1.15rem; font-size: .9rem; color: var(--ink-soft); }
.ta-steps li + li { margin-top: .4rem; }
.ta-contact { display: flex; flex-direction: column; gap: .5rem; }
/* The date bar sits in its own