:root {
  --yellow: #b4555e; --yellow-soft: #faecee; --green: #940b18; --green-dark: #7c0712;
  --ink: #281719; --muted: #756568; --line: #ecd9dc; --surface: #fcf8f8;
  --white: #fff; --on-primary: #fff; --success: #0c831f; --warning: #f6a800;
  --danger: #d83a56; --footer: #281719; --shadow: 0 14px 40px rgba(55, 22, 27, .09);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--surface); }
body { margin: 0; color: var(--ink); background: var(--surface); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.branding-pending .brand, .branding-pending .announcement, .branding-pending footer > div { visibility: hidden; }
body.cart-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 30%, transparent); outline-offset: 2px; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.announcement { min-height: 27px; padding: 6px 18px; color: var(--on-primary); background: var(--green-dark); text-align: center; font-size: 11px; font-weight: 850; letter-spacing: .04em; }
.site-header { position: sticky; z-index: 30; top: 0; display: grid; grid-template-columns: auto auto minmax(240px, 1fr) auto; gap: 18px; align-items: center; min-height: 78px; padding: 12px max(20px, calc((100vw - 1360px)/2)); background: color-mix(in srgb, var(--white) 96%, transparent); border-bottom: 1px solid var(--line); box-shadow: 0 4px 18px rgba(20,10,12,.04); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 170px; text-decoration: none; }
.brand-logo { width: 48px; height: 48px; flex: none; object-fit: contain; background: #fff; border-radius: 12px; }
.brand strong, .brand small { display: block; line-height: 1.05; }.brand strong { max-width: 150px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }.brand small { max-width: 150px; margin-top: 5px; overflow: hidden; color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.delivery-location { min-width: 170px; padding: 7px 10px; color: var(--ink); background: transparent; border: 0; text-align: left; cursor: pointer; }.delivery-location strong, .delivery-location span { display: block; }.delivery-location strong { font-size: 13px; }.delivery-location span { max-width: 210px; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.search { display: grid; grid-template-columns: auto 1fr auto; align-items: center; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: .18s; }.search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 10%, transparent); }.search > span { padding-left: 13px; color: var(--muted); font-size: 23px; }.search input { min-width: 0; padding: 12px 9px; background: transparent; border: 0; outline: 0; }.search button { align-self: stretch; padding: 0 16px; color: var(--green); background: transparent; border: 0; border-left: 1px solid var(--line); font-size: 12px; font-weight: 900; cursor: pointer; }
.header-actions { display: flex; align-items: center; gap: 8px; }.header-link { position: relative; padding: 10px 8px; font-size: 12px; font-weight: 850; text-decoration: none; }.nav-badge { position: absolute; top: 0; right: 0; min-width: 17px; padding: 2px 4px; color: #fff; background: var(--danger); border-radius: 20px; font-size: 9px; text-align: center; }.cart-button { padding: 11px 17px; color: var(--on-primary); background: var(--green); border: 0; border-radius: 10px; font-weight: 900; cursor: pointer; }.cart-button span { display: inline-grid; min-width: 20px; height: 20px; margin-left: 6px; place-items: center; color: var(--green); background: var(--white); border-radius: 50%; font-size: 10px; }
main { min-height: 72vh; padding: 22px max(20px, calc((100vw - 1360px)/2)) 76px; }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 385px; overflow: hidden; background: linear-gradient(125deg, var(--green-dark), var(--green)); border-radius: 24px; box-shadow: var(--shadow); }.hero-copy { padding: clamp(40px, 6vw, 74px); color: var(--on-primary); }.eyebrow { color: var(--green); font-size: 10px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }.hero .eyebrow { color: color-mix(in srgb, var(--yellow) 82%, #fff); }.hero h1 { max-width: 680px; margin: 10px 0 15px; font-size: clamp(38px, 5vw, 66px); line-height: .97; letter-spacing: -.052em; }.hero p { max-width: 590px; margin: 0 0 25px; color: color-mix(in srgb, var(--on-primary) 76%, transparent); line-height: 1.62; }
.hero.hero-admin-banner { display:block; min-height:0; background:transparent; }
.hero-admin-banner button { display:block; width:100%; padding:0; overflow:hidden; background:transparent; border:0; cursor:pointer; }
.hero-admin-banner img { display:block; width:100%; height:auto; }
.primary-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 18px; border-radius: 10px; font-weight: 900; text-decoration: none; cursor: pointer; transition: transform .16s, box-shadow .16s; }.primary-action { color: var(--on-primary); background: var(--green); border: 1px solid var(--green); }.hero .primary-action { color: var(--green-dark); background: var(--yellow); border-color: var(--yellow); }.secondary-action { color: var(--green); background: var(--white); border: 1px solid var(--line); }.primary-action:hover, .secondary-action:hover { box-shadow: 0 9px 22px rgba(25,10,13,.12); transform: translateY(-1px); }.primary-action:disabled { opacity: .48; cursor: not-allowed; transform: none; }.primary-action.full, .secondary-action.full { width: 100%; }
.secondary-action.danger { color: var(--danger); }
.hero-visual { position: relative; min-height: 340px; overflow: hidden; background: radial-gradient(circle at center, color-mix(in srgb, var(--yellow) 85%, #fff) 0 32%, transparent 33%); }.produce { position: absolute; display: grid; width: 128px; height: 128px; place-items: center; background: #fff; border: 8px solid rgba(255,255,255,.35); border-radius: 50%; box-shadow: 0 20px 35px rgba(22,5,8,.25); font-size: 62px; animation: float 4s ease-in-out infinite; }.produce-one { top: 12%; left: 4%; }.produce-two { top: 39%; right: 8%; animation-delay: -.9s; }.produce-three { bottom: 5%; left: 25%; animation-delay: -1.7s; }.delivery-badge { position: absolute; top: 11%; right: 12%; display: grid; width: 105px; height: 105px; place-items: center; align-content: center; color: var(--green-dark); background: var(--yellow); border: 6px solid rgba(255,255,255,.45); border-radius: 50%; transform: rotate(7deg); }.delivery-badge b { font-size: 25px; }.delivery-badge small { font-weight: 850; }
@keyframes float { 50% { transform: translateY(-12px) rotate(3deg); } }
.banner-strip { display: grid; grid-auto-columns: minmax(280px, 1fr); grid-auto-flow: column; gap: 14px; margin-top: 18px; overflow-x: auto; scroll-snap-type: x mandatory; }.banner-strip button { height: 180px; padding: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 18px; scroll-snap-align: start; cursor: pointer; }.banner-strip img { width: 100%; height: 100%; object-fit: cover; }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; padding: 13px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }.benefits > div { display: flex; justify-content: center; align-items: center; gap: 11px; padding: 7px 18px; border-right: 1px solid var(--line); }.benefits > div:last-child { border: 0; }.benefits > div > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--green); background: var(--yellow-soft); border-radius: 11px; font-weight: 950; }.benefits p, .benefits strong, .benefits small { display: block; margin: 0; }.benefits small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.content-section { padding-top: 48px; }.content-section.compact { padding-top: 12px; }.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; }.section-heading h2, .page-heading h1 { margin: 4px 0 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.04em; }.text-button { color: var(--green); background: transparent; border: 0; font-weight: 900; cursor: pointer; }
.category-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 13px; }.category-card { min-width: 0; padding: 11px; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: 15px; cursor: pointer; transition: .18s; }.category-card:hover { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); box-shadow: var(--shadow); transform: translateY(-3px); }.category-image { display: grid; width: 100%; height: auto; aspect-ratio: 1/1; margin-bottom: 9px; place-items: center; overflow: hidden; color: var(--green); background: var(--yellow-soft); border-radius: 11px; font-size: 30px; }.category-image img { width: 100%; height: 100%; object-fit: contain; }.category-card strong { display: -webkit-box; min-height: 34px; overflow: hidden; font-size: 13px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }.product-card { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 15px; transition: .18s; }.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }.wishlist-button { position: absolute; z-index: 2; top: 9px; right: 9px; display: grid; width: 34px; height: 34px; place-items: center; color: var(--ink); background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 50%; font-size: 20px; cursor: pointer; }.wishlist-button.active { color: var(--green); }.product-image { position: relative; display: grid; width: 100%; height: auto; aspect-ratio: 1/1; padding: 0; place-items: center; overflow: hidden; color: var(--muted); background: #f8f8f8; border: 0; cursor: pointer; }.product-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }.product-card:hover .product-image img { transform: scale(1.04); }.product-image em { position: absolute; top: 10px; left: 10px; padding: 4px 7px; color: #fff; background: var(--success); border-radius: 5px; font-size: 9px; font-style: normal; font-weight: 950; }.product-body { padding: 13px; }.product-body small { color: var(--muted); font-size: 10px; font-weight: 750; }.product-name { display: -webkit-box; width: 100%; min-height: 39px; margin: 6px 0 2px; padding: 0; overflow: hidden; color: var(--ink); background: transparent; border: 0; text-align: left; font-size: 14px; font-weight: 850; line-height: 1.3; cursor: pointer; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.unit { display: block; margin-bottom: 10px; color: var(--muted); font-size: 11px; }.product-footer { display: flex; justify-content: space-between; align-items: end; gap: 8px; }.product-footer > span strong, .product-footer del { display: block; white-space: nowrap; }.product-footer > span strong { font-size: 16px; }.product-footer del { color: var(--muted); font-size: 10px; }.product-footer > button { min-width: 65px; padding: 7px 13px; color: var(--green); background: color-mix(in srgb, var(--green) 5%, var(--white)); border: 1px solid var(--green); border-radius: 8px; font-weight: 950; cursor: pointer; }.product-footer > button:active { color: #fff; background: var(--green); transform: scale(.94); }
.page-heading { display: flex; align-items: center; gap: 17px; min-height: 110px; padding: 12px 0 24px; border-bottom: 1px solid var(--line); }.page-heading > a:not(.primary-action):not(.secondary-action), .page-heading > button:not(.primary-action):not(.secondary-action) { display: grid; width: 44px; height: 44px; flex: none; place-items: center; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 50%; font-size: 24px; text-decoration: none; cursor: pointer; }.page-heading > .primary-action, .page-heading > .secondary-action { flex: none; white-space: nowrap; }.page-heading > div { flex: 1; }.page-heading p { margin: 6px 0 0; color: var(--muted); }
.listing-layout { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding-top: 18px; }.subcategory-rail { display: flex; flex-direction: column; gap: 8px; }.subcategory-rail button { display: grid; min-height: 88px; padding: 8px; place-items: center; color: var(--ink); background: transparent; border: 0; border-radius: 12px; font-size: 11px; font-weight: 850; cursor: pointer; }.subcategory-rail button.active { color: var(--green); background: var(--yellow-soft); border-right: 3px solid var(--green); }.subcategory-rail img { width: 48px; height: 48px; object-fit: contain; }.sort-row { display: flex; justify-content: space-between; align-items: center; min-height: 48px; margin-bottom: 14px; padding: 0 4px 12px; border-bottom: 1px solid var(--line); }.sort-row select { padding: 8px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.product-detail { display: grid; grid-template-columns: minmax(0, .95fr) minmax(340px, .8fr); gap: 34px; padding-top: 24px; }.product-gallery-main { display: grid; width: 100%; aspect-ratio: 1/1; place-items: center; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 20px; }.product-gallery-main img { width: 100%; height: 100%; object-fit: contain; }.product-thumbnails { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; }.product-thumbnails button { width: 74px; height: 74px; flex: none; overflow: hidden; background: var(--white); border: 2px solid transparent; border-radius: 11px; cursor: pointer; }.product-thumbnails button.active { border-color: var(--green); }.product-thumbnails img { width: 100%; height: 100%; object-fit: contain; }.product-detail-copy { padding: clamp(20px, 4vw, 44px); background: var(--white); border: 1px solid var(--line); border-radius: 20px; }.product-detail-copy h1 { margin: 8px 0 10px; font-size: clamp(30px, 4vw, 48px); line-height: 1; }.detail-price { display: flex; align-items: center; gap: 11px; color: var(--green); font-size: 28px; font-weight: 950; }.detail-price del { color: var(--muted); font-size: 15px; font-weight: 500; }.stock { color: var(--success); font-weight: 850; }.stock.out { color: var(--danger); }.product-detail-copy > p:not(.stock) { color: var(--muted); line-height: 1.65; }.product-detail-copy label { display: grid; gap: 6px; margin-top: 18px; font-weight: 800; }.product-detail-copy select { padding: 11px; border: 1px solid var(--line); border-radius: 9px; }.detail-actions { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; margin-top: 22px; }.detail-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }.detail-benefits div { display: grid; min-height: 86px; place-items: center; align-content: center; color: var(--green); background: var(--yellow-soft); border-radius: 12px; font-size: 23px; }.detail-benefits strong { margin-top: 5px; color: var(--ink); font-size: 10px; }
.auth-shell { display: grid; grid-template-columns: 1fr minmax(360px, .75fr); gap: 28px; max-width: 1040px; margin: 40px auto; }.auth-copy { min-height: 510px; padding: 58px; color: var(--on-primary); background: linear-gradient(145deg, var(--green-dark), var(--green)); border-radius: 22px; }.auth-copy .eyebrow { color: var(--yellow); }.auth-copy h1 { margin: 12px 0; font-size: clamp(42px, 6vw, 68px); line-height: .95; }.auth-copy p { max-width: 470px; color: color-mix(in srgb, var(--on-primary) 75%, transparent); font-size: 17px; line-height: 1.6; }.form-card, .checkout-card, .cms-card, .chat-card { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 8px 30px rgba(30,10,14,.04); }.form-card { display: grid; align-content: center; gap: 14px; }.form-card form, .dialog-form { display: grid; gap: 14px; }.form-card label, .dialog-form label, .checkout-card > label { display: grid; gap: 6px; font-size: 12px; font-weight: 850; }.form-card input, .form-card textarea, .dialog-form input, .dialog-form textarea, .checkout-card input, .checkout-card textarea, .checkout-card select, .coupon-row input { width: 100%; padding: 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; outline: none; }.form-card textarea, .dialog-form textarea, .checkout-card textarea { min-height: 100px; resize: vertical; }.auth-links { display: flex; justify-content: space-between; gap: 10px; }.auth-links button, .address-card button, .checkout-card > button { padding: 5px 0; color: var(--green); background: transparent; border: 0; font-size: 11px; font-weight: 850; cursor: pointer; }.form-message { padding: 10px; background: var(--yellow-soft); border-radius: 8px; }
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 24px; }.account-grid a { display: grid; min-height: 165px; padding: 22px; align-content: center; text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: 17px; transition: .18s; }.account-grid a:hover { box-shadow: var(--shadow); transform: translateY(-2px); }.account-grid span { color: var(--green); font-size: 28px; }.account-grid strong { margin: 10px 0 3px; font-size: 17px; }.account-grid small { color: var(--muted); }
.address-list, .order-list, .notification-list { display: grid; gap: 12px; padding-top: 20px; }.address-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 15px; }.address-card.selected { border-color: var(--green); }.address-card h3 { margin: 5px 0; }.address-card p { margin: 4px 0; color: var(--muted); }.address-card > div:last-child { display: grid; gap: 8px; text-align: right; }.address-card > div:last-child button:last-child { color: var(--danger); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; padding-top: 22px; }.checkout-main { display: grid; gap: 14px; }.checkout-card h2, .checkout-summary h2 { margin: 0 0 17px; }.address-options { display: grid; gap: 9px; }.address-options label, .option-row { display: flex !important; align-items: flex-start; gap: 11px !important; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }.address-options input, .option-row input { width: auto; margin-top: 3px; }.address-options strong, .address-options small, .option-row strong, .option-row small { display: block; }.address-options small, .option-row small { margin-top: 3px; color: var(--muted); font-weight: 500; }.checkout-summary { position: sticky; top: 108px; height: fit-content; padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 17px; }.checkout-summary > div, .line-item { display: flex; justify-content: space-between; gap: 15px; padding: 7px 0; }.checkout-summary .total { padding-top: 14px; border-top: 1px solid var(--line); font-size: 18px; }.checkout-summary button { margin-top: 15px; }.checkout-summary > small { display: block; margin-top: 10px; color: var(--muted); line-height: 1.4; }
.order-card { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; width: 100%; padding: 19px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 14px; text-align: left; cursor: pointer; }.order-card > span strong, .order-card > span small { display: block; }.order-card > span:last-of-type { text-align: right; }.order-card small { margin-bottom: 4px; color: var(--muted); }.order-card > span:first-child strong { color: var(--green); text-transform: capitalize; }.order-detail-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 18px; padding-top: 20px; }.order-detail-grid > div, .order-detail-grid > aside { display: grid; align-content: start; gap: 14px; }.tracking-card { display: flex; justify-content: space-between; align-items: center; padding: 25px; color: var(--on-primary); background: var(--green); border-radius: 17px; }.tracking-card .eyebrow { color: var(--yellow); }.tracking-card h2 { margin: 7px 0; text-transform: capitalize; }.tracking-card p { margin: 0; color: color-mix(in srgb, var(--on-primary) 75%, transparent); }.tracking-card a { display: grid; width: 48px; height: 48px; place-items: center; color: var(--green); background: var(--white); border-radius: 50%; text-decoration: none; }.line-item span strong, .line-item span small { display: block; }.line-item small { margin-top: 3px; color: var(--muted); }.timeline { display: grid; gap: 14px; }.timeline > div { display: flex; gap: 10px; }.timeline i { display: grid; width: 28px; height: 28px; flex: none; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-style: normal; }.timeline span strong, .timeline span small { display: block; text-transform: capitalize; }.timeline small { color: var(--muted); }
.live-order-map { width: 100%; min-height: 390px; overflow: hidden; background: #edf2f7; border: 1px solid var(--line); border-radius: 17px; }.live-order-map.map-unavailable { display: grid; place-items: center; padding: 30px; text-align: center; }.live-order-map.map-unavailable > div { display: grid; max-width: 390px; place-items: center; gap: 8px; }.live-order-map.map-unavailable span { font-size: 46px; }.live-order-map.map-unavailable small { color: var(--muted); line-height: 1.5; }.delivery-partner-card { display: flex; align-items: center; gap: 13px; padding: 17px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 15px; }.delivery-partner-card > span { display: grid; width: 50px; height: 50px; place-items: center; background: var(--yellow-soft); border-radius: 50%; font-size: 25px; }.delivery-partner-card > div { min-width: 0; flex: 1; }.delivery-partner-card strong, .delivery-partner-card small { display: block; }.delivery-partner-card small { margin-top: 3px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }.delivery-partner-card b { padding: 7px 9px; background: var(--surface); border-radius: 8px; font-size: 11px; }
.heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }.seller-link { display: inline-block; margin: 0 0 12px; color: var(--green); font-weight: 850; text-decoration: none; }.seller-card { margin-top: 20px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 17px; }.seller-card h2 { margin-top: 0; }.seller-card p { color: var(--muted); }.seller-card strong { color: var(--success); }.reviews-section { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 18px; padding-top: 24px; }.reviews-section > div { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 17px; }.reviews-section h2 small { color: var(--muted); font-size: 13px; font-weight: 600; }.reviews-section article { padding: 14px 0; border-top: 1px solid var(--line); }.reviews-section article p { margin: 6px 0; }.reviews-section article small { color: var(--muted); }.wallet-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 20px; }.wallet-balance { display: grid; align-content: center; min-height: 250px; padding: 30px; color: var(--on-primary); background: linear-gradient(135deg, var(--green), var(--green-dark)); border-radius: 19px; }.wallet-balance strong { margin: 8px 0; font-size: clamp(38px, 6vw, 65px); }.wallet-balance small { color: color-mix(in srgb, var(--on-primary) 75%, transparent); }.ledger-list { display: grid; gap: 9px; }.ledger-list article { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }.ledger-list strong, .ledger-list small { display: block; }.ledger-list small { margin-top: 3px; color: var(--muted); }.ledger-list b { color: var(--danger); }.ledger-list b.credit { color: var(--success); }
.support-layout { display: grid; grid-template-columns: minmax(330px, .7fr) minmax(0, 1.3fr); gap: 18px; padding-top: 20px; }.support-list { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 17px; }.support-list h2 { margin-top: 0; }.support-list button { display: flex; justify-content: space-between; width: 100%; padding: 15px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }.support-list span strong, .support-list span small { display: block; }.support-list small { margin-top: 4px; color: var(--muted); }.chat-card { max-width: 850px; margin: 20px auto 0; }.messages { display: grid; gap: 10px; max-height: 55vh; overflow: auto; }.message { max-width: 75%; padding: 12px 14px; background: var(--surface); border-radius: 13px 13px 13px 3px; }.message.mine { justify-self: end; color: var(--on-primary); background: var(--green); border-radius: 13px 13px 3px 13px; }.message p { margin: 4px 0; }.message small { opacity: .7; }.chat-card form { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 16px; }.chat-card input { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.notification-card { display: flex; gap: 14px; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }.notification-card.unread { border-left: 4px solid var(--green); }.notification-card > span { color: var(--green); }.notification-card h3, .notification-card p { margin: 0 0 5px; }.notification-card p, .notification-card small { color: var(--muted); }
.cms-card { max-width: 900px; margin: 22px auto; font-size: 16px; line-height: 1.8; white-space: pre-line; }.empty-card, .page-state { display: grid; min-height: 260px; padding: 35px; place-items: center; align-content: center; color: var(--muted); background: var(--white); border: 1px solid var(--line); border-radius: 16px; text-align: center; }.empty-card h3, .page-state h1, .page-state p { margin: 5px 0; }.empty-card a, .page-state a { margin-top: 12px; color: var(--green); font-weight: 850; }.state-icon { display: grid; min-width: 55px; height: 55px; padding: 0 10px; place-items: center; color: var(--green); background: var(--yellow-soft); border-radius: 50%; font-weight: 950; }.spinner { width: 35px; height: 35px; border: 4px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: spin .7s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
.cart-panel { position: fixed; z-index: 60; top: 0; right: 0; width: min(450px, 100%); height: 100dvh; padding: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); overflow: auto; background: var(--white); box-shadow: -20px 0 60px rgba(20,10,12,.25); animation: slideIn .22s ease-out; }.cart-heading, .dialog-heading { display: flex; justify-content: space-between; align-items: start; }.cart-heading h2, .dialog-heading h2 { margin: 4px 0 20px; }.icon-button, .dialog-heading button { color: var(--ink); background: transparent; border: 0; font-size: 30px; cursor: pointer; }.cart-items { display: grid; gap: 10px; }.cart-item { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 11px; background: var(--surface); border-radius: 12px; }.cart-thumb { display: grid; width: 62px; height: 62px; place-items: center; overflow: hidden; background: #fff; border-radius: 9px; }.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }.cart-item strong, .cart-item small, .cart-item b { display: block; }.cart-item small { margin: 3px 0; color: var(--muted); }.quantity-control { display: grid; grid-template-columns: 27px 24px 27px; align-items: center; color: #fff; background: var(--green); border-radius: 8px; text-align: center; }.quantity-control button { height: 32px; color: #fff; background: transparent; border: 0; cursor: pointer; }.coupon-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 18px; }.coupon-row button { padding: 0 14px; color: var(--green); background: var(--yellow-soft); border: 1px solid var(--green); border-radius: 9px; font-weight: 850; cursor: pointer; }.cart-summary { display: grid; gap: 7px; margin: 20px 0; padding-top: 17px; border-top: 1px solid var(--line); }.cart-summary > div { display: flex; justify-content: space-between; }.cart-summary .total { padding-top: 12px; border-top: 1px solid var(--line); font-size: 18px; }.minimum-warning { padding: 8px; color: var(--danger); background: var(--yellow-soft); border-radius: 8px; font-size: 11px; }.backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(20,8,10,.55); backdrop-filter: blur(2px); }@keyframes slideIn { from { transform: translateX(100%); } }
.app-dialog { width: min(620px, calc(100% - 24px)); max-height: calc(100dvh - 30px); padding: 0; overflow: auto; color: var(--ink); background: var(--white); border: 0; border-radius: 20px; box-shadow: 0 25px 80px rgba(20,8,10,.3); }.app-dialog::backdrop { background: rgba(20,8,10,.57); backdrop-filter: blur(3px); }.dialog-form { padding: 24px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.form-grid .wide { grid-column: 1/-1; }.form-grid .check { display: flex; align-items: center; }.form-grid .check input { width: auto; }.success-dialog { position: relative; padding: 42px; overflow: hidden; text-align: center; }.success-check { display: grid; width: 88px; height: 88px; margin: auto; place-items: center; color: #fff; background: var(--success); border-radius: 50%; font-size: 50px; animation: successPop .5s cubic-bezier(.2,1.7,.4,1); }.confetti { position: absolute; top: 10px; left: 0; width: 100%; color: var(--yellow); font-size: 32px; letter-spacing: 16px; animation: confetti 1.5s ease-out infinite; }.success-dialog h2 { margin-bottom: 5px; font-size: 30px; }.success-dialog button { margin-top: 14px; }@keyframes successPop { from { opacity: 0; transform: scale(.25) rotate(-30deg); } }@keyframes confetti { from { opacity: 0; transform: translateY(-35px); } 40% { opacity: 1; } to { opacity: 0; transform: translateY(90px) rotate(20deg); } }
.toast { position: fixed; z-index: 100; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); max-width: min(380px, calc(100% - 40px)); padding: 13px 18px; color: #fff; background: var(--success); border-radius: 10px; box-shadow: 0 12px 35px rgba(20,8,10,.25); font-weight: 800; animation: toastIn .2s ease-out; }.toast[data-kind="error"] { background: var(--danger); }.toast[data-kind="warning"] { color: var(--ink); background: var(--warning); }@keyframes toastIn { from { opacity: 0; transform: translateY(15px); } }
.flying-product { position: fixed; z-index: 110; object-fit: contain; pointer-events: none; border-radius: 14px; animation: flyToCart .65s cubic-bezier(.5,0,.7,.2) forwards; }@keyframes flyToCart { to { width: 25px; height: 25px; opacity: .25; transform: translate(var(--fly-x), var(--fly-y)) rotate(18deg); } }
.site-footer { display: block; padding: 54px max(20px, calc((100vw - 1360px)/2)) max(30px, env(safe-area-inset-bottom)); color: #fff; background: var(--footer); }
.footer-grid { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); gap: clamp(24px, 3vw, 50px); }.footer-grid section { min-width: 0; }.footer-grid h3 { margin: 0 0 16px; color: #fff; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }.footer-grid nav, .footer-contact { display: grid; gap: 11px; }.footer-grid a { color: color-mix(in srgb, #fff 76%, transparent); font-size: 12px; font-weight: 650; text-decoration: none; }.footer-grid a:hover { color: #fff; }.footer-brand { display: grid; align-content: start; justify-items: start; }.footer-brand img { width: 58px; height: 58px; margin-bottom: 14px; object-fit: contain; background: #fff; border-radius: 14px; }.footer-brand strong { font-size: 21px; }.footer-brand > span { margin-top: 5px; opacity: .7; font-size: 11px; }.footer-brand p { max-width: 360px; margin: 18px 0 0; color: color-mix(in srgb, #fff 68%, transparent); font-size: 12px; line-height: 1.7; }.footer-contact span { color: color-mix(in srgb, #fff 70%, transparent); font-size: 12px; line-height: 1.55; }.footer-socials, .app-downloads { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }.footer-socials a, .app-downloads a { padding: 8px 10px; color: #fff; background: color-mix(in srgb, #fff 10%, transparent); border: 1px solid color-mix(in srgb, #fff 12%, transparent); border-radius: 8px; }.footer-grid #newsletter-section { grid-column: 2 / -1; padding-top: 5px; }.footer-grid #newsletter-form { display: grid; grid-template-columns: minmax(180px, 420px) auto; justify-content: start; gap: 8px; }.footer-grid #newsletter-form input { padding: 12px 14px; color: #fff; background: color-mix(in srgb, #fff 8%, transparent); border: 1px solid color-mix(in srgb, #fff 18%, transparent); border-radius: 9px; outline: 0; }.footer-grid #newsletter-form input::placeholder { color: color-mix(in srgb, #fff 55%, transparent); }.footer-grid #newsletter-form button { padding: 0 17px; color: var(--footer); background: #fff; border: 0; border-radius: 9px; font-weight: 900; cursor: pointer; }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 38px; padding-top: 20px; color: color-mix(in srgb, #fff 58%, transparent); border-top: 1px solid color-mix(in srgb, #fff 15%, transparent); font-size: 11px; }.footer-bottom a { color: #fff; text-decoration: none; font-weight: 800; }
.whatsapp-button { position: fixed; z-index: 45; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #fff; background: #25d366; border: 3px solid #fff; border-radius: 999px; box-shadow: 0 12px 30px rgba(10,80,35,.28); text-decoration: none; font-size: 12px; font-weight: 900; }.whatsapp-button::before { content: '☎'; font-size: 18px; }.whatsapp-button > span { display: inline; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 18px; padding-top: 22px; }.store-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 26px rgba(30,10,14,.04); cursor: pointer; transition: .18s; }.store-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }.store-cover { display: block; width: 100%; aspect-ratio: 16/7; object-fit: cover; background: linear-gradient(135deg, var(--yellow-soft), var(--surface)); }.store-copy { display: flex; gap: 14px; align-items: center; padding: 17px; }.store-logo { width: 58px; height: 58px; flex: none; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 50%; }.store-logo.placeholder { display: grid; place-items: center; color: var(--green); font-size: 10px; font-weight: 900; }.store-copy h2 { margin: 0; font-size: 17px; }.store-copy p { min-height: 32px; margin: 5px 0; color: var(--muted); font-size: 11px; }.store-copy strong { color: var(--success); font-size: 10px; }
.seller-profile-card { margin-top: 20px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }.seller-cover { width: 100%; max-height: 330px; aspect-ratio: 16/6; object-fit: cover; background: var(--yellow-soft); }.seller-profile-copy { display: flex; gap: 16px; align-items: center; padding: 20px; }.seller-profile-copy .seller-logo { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 50%; }.seller-profile-copy h2 { margin: 0; }.seller-profile-copy p { margin: 5px 0; color: var(--muted); }
.membership-hero { padding: clamp(34px, 6vw, 78px); color: #fff; background: linear-gradient(125deg, var(--footer), var(--green)); border-radius: 24px; box-shadow: var(--shadow); }.membership-hero .eyebrow { color: var(--yellow); }.membership-hero h1 { margin: 9px 0; font-size: clamp(38px, 6vw, 68px); }.membership-hero p { max-width: 620px; color: color-mix(in srgb, #fff 75%, transparent); }.membership-hero > strong { display: inline-block; margin-top: 12px; padding: 9px 12px; color: var(--footer); background: var(--yellow); border-radius: 9px; }.membership-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 17px; padding-top: 24px; }.membership-card { position: relative; padding: 25px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 30px rgba(30,10,14,.04); }.membership-card > em { position: absolute; top: 14px; right: 14px; padding: 5px 8px; color: var(--green); background: var(--yellow-soft); border-radius: 7px; font-size: 10px; font-style: normal; font-weight: 950; }.membership-card h2 { margin: 0 0 8px; }.membership-card > p { min-height: 42px; color: var(--muted); }.membership-price { margin: 18px 0; color: var(--green); font-size: 31px; font-weight: 950; }.membership-price small { color: var(--muted); font-size: 11px; }.membership-card ul { min-height: 110px; padding-left: 20px; color: var(--muted); font-size: 12px; line-height: 1.8; }.membership-card form, .vendor-registration { display: grid; gap: 12px; }.membership-card label, .vendor-registration label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }.membership-card input, .membership-card select, .vendor-registration input, .vendor-registration textarea { width: 100%; padding: 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }.vendor-registration { max-width: 820px; margin: 22px auto; padding: 25px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }.vendor-registration textarea { min-height: 100px; resize: vertical; }
.membership-upsell { display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin-bottom:10px; padding:14px; color:#fff; background:linear-gradient(135deg,var(--green-dark),var(--green)); border-radius:14px; box-shadow:0 9px 24px color-mix(in srgb,var(--green) 25%,transparent); }.membership-upsell > span { color:var(--yellow); font-size:9px; font-weight:950; letter-spacing:.06em; }.membership-upsell > strong,.membership-upsell > small { grid-column:1; }.membership-upsell > small { color:color-mix(in srgb,#fff 75%,transparent); font-size:10px; line-height:1.4; }.membership-upsell > button { grid-column:2; grid-row:1/4; align-self:center; padding:10px 11px; color:var(--green); background:#fff; border:0; border-radius:9px; font-size:10px; font-weight:950; cursor:pointer; }.membership-active-row { padding:11px 13px; color:var(--green); background:var(--yellow-soft); border-radius:10px; }
.site-footer .footer-social-block { display:block !important; visibility:visible !important; opacity:1 !important; }.footer-social-block h4 { margin:20px 0 9px; color:#fff; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }.footer-social-block .footer-socials { margin-top:0; }.footer-socials a { display:grid; width:42px; height:42px; padding:0; place-items:center; color:#fff; background:color-mix(in srgb,#fff 16%,transparent); border:1px solid color-mix(in srgb,#fff 30%,transparent); border-radius:50%; transition:.18s; }.footer-socials a:hover,.footer-socials a:focus-visible { color:var(--footer); background:#fff; transform:translateY(-2px); }.footer-socials svg { width:20px; height:20px; fill:currentColor; }
.vendor-registration-page { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(460px,1.2fr); gap:24px; max-width:1180px; margin:28px auto; align-items:stretch; }.vendor-registration-hero { display:flex; flex-direction:column; min-height:650px; padding:clamp(32px,5vw,62px); color:var(--on-primary); background:linear-gradient(145deg,var(--green-dark),var(--green)); border-radius:24px; box-shadow:var(--shadow); }.vendor-registration-hero .eyebrow { color:var(--yellow); }.vendor-registration-hero h1 { margin:13px 0; font-size:clamp(38px,5vw,60px); line-height:1; letter-spacing:-.045em; }.vendor-registration-hero p { color:color-mix(in srgb,var(--on-primary) 78%,transparent); line-height:1.65; }.vendor-registration-hero ul { display:grid; gap:12px; padding:22px 0 0; margin:0; list-style:none; }.vendor-registration-hero li::before { content:'✓'; margin-right:9px; color:var(--yellow); font-weight:950; }.vendor-back-link { margin-top:auto; padding-top:30px; color:var(--on-primary); font-weight:850; text-decoration:none; }.vendor-registration-form { display:grid; align-content:start; gap:17px; padding:clamp(24px,4vw,42px); background:var(--white); border:1px solid var(--line); border-radius:24px; box-shadow:0 12px 38px rgba(30,10,14,.06); }.vendor-form-heading h2 { margin:6px 0; font-size:30px; }.vendor-form-heading p,.vendor-registration-form > small { color:var(--muted); }.vendor-registration-form label { display:grid; gap:7px; color:var(--ink); font-size:12px; font-weight:850; }.vendor-registration-form input,.vendor-registration-form textarea { width:100%; padding:13px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px; outline:0; }.vendor-registration-form input:focus,.vendor-registration-form textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 10%,transparent); }.vendor-registration-form textarea { min-height:105px; resize:vertical; }.vendor-upload-note { padding:11px 13px; color:var(--muted); background:var(--yellow-soft); border-radius:10px; font-size:11px; }
@media (max-width: 1050px) { .site-header { grid-template-columns: auto 1fr auto; }.delivery-location { display: none; }.search { grid-column: 1/-1; grid-row: 2; }.product-detail { gap: 18px; }.account-grid { grid-template-columns: repeat(2, 1fr); }.vendor-registration-page { grid-template-columns:1fr; max-width:780px; }.vendor-registration-hero { min-height:0; }.vendor-back-link { margin-top:20px; } }
@media (max-width: 760px) {
  .announcement { font-size: 9px; }.site-header { gap: 8px; padding: 9px 12px; }.brand { min-width: 0; }.brand-logo { width: 42px; height: 42px; }.brand strong { max-width: 110px; font-size: 15px; }.brand small { display: none; }.header-actions { margin-left: auto; }.header-link { padding: 8px 5px; font-size: 0; }.header-link::before { content: '🔔'; color: var(--green); font-size: 15px; }.header-link#account-link::before { content: '👤'; }.cart-button { padding: 9px 10px; font-size: 11px; }
  main { padding: 13px 11px calc(66px + env(safe-area-inset-bottom)); }.hero { grid-template-columns: 1fr; min-height: 0; border-radius: 18px; }.hero-copy { padding: 34px 23px; }.hero h1 { font-size: 39px; }.hero-visual { min-height: 230px; }.produce { width: 96px; height: 96px; font-size: 47px; }.delivery-badge { width: 82px; height: 82px; }.delivery-badge b { font-size: 20px; }
  .benefits { grid-template-columns: 1fr; padding: 6px 13px; }.benefits > div { justify-content: flex-start; padding: 10px 4px; border-right: 0; border-bottom: 1px solid var(--line); }.content-section { padding-top: 36px; }.category-list { display: flex; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }.category-card { min-width: 122px; scroll-snap-align: start; }.category-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }.category-directory .category-card { min-width: 0; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.product-body { padding: 10px; }.product-footer > button { min-width: 53px; padding: 7px 8px; }.page-heading { min-height: 93px; gap: 11px; }.page-heading > a:not(.primary-action):not(.secondary-action), .page-heading > button:not(.primary-action):not(.secondary-action) { width: 39px; height: 39px; }.page-heading > .primary-action, .page-heading > .secondary-action { padding: 9px 12px; font-size: 11px; }
  .listing-layout { grid-template-columns: 92px minmax(0, 1fr); gap: 9px; }.subcategory-rail button { min-height: 76px; padding: 5px; }.sort-row { align-items: flex-start; flex-direction: column; gap: 8px; }.product-detail { grid-template-columns: 1fr; }.product-detail-copy { padding: 22px 16px; }.detail-benefits { gap: 5px; }.detail-actions { grid-template-columns: 1fr; }
  .auth-shell { grid-template-columns: 1fr; margin: 10px auto; }.auth-copy { min-height: 270px; padding: 35px 25px; }.auth-copy h1 { font-size: 44px; }.form-card { padding: 18px; }.vendor-registration-page { margin:4px auto; gap:12px; }.vendor-registration-hero,.vendor-registration-form { padding:25px 20px; border-radius:18px; }.vendor-registration-hero h1 { font-size:36px; }.vendor-registration-form .form-grid { grid-template-columns:1fr; }.vendor-registration-form .form-grid .wide { grid-column:auto; }.account-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.account-grid a { min-height: 135px; padding: 15px; }.address-card { align-items: flex-start; flex-direction: column; }.address-card > div:last-child { grid-auto-flow: column; text-align: left; }
  .checkout-layout, .order-detail-grid, .support-layout { grid-template-columns: 1fr; }.checkout-summary { position: static; }.order-card { grid-template-columns: 1fr auto; }.order-card > b { display: none; }.tracking-card { align-items: flex-start; }.form-grid { grid-template-columns: 1fr; }.form-grid .wide { grid-column: auto; }.cart-panel { padding: 18px 14px; }.message { max-width: 88%; }
  .live-order-map { min-height: 310px; border-radius: 14px; }
  .reviews-section, .wallet-layout { grid-template-columns: 1fr; }.heading-actions { width: 100%; }.heading-actions > * { flex: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid #newsletter-section { grid-column: 1/-1; }.store-grid { grid-template-columns: 1fr; }.whatsapp-button span { display: none; }.whatsapp-button { width: 50px; height: 50px; justify-content: center; padding: 0; }.membership-hero { padding: 35px 23px; border-radius: 18px; }.membership-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; }.footer-grid #newsletter-section { grid-column: auto; }.footer-grid #newsletter-form { grid-template-columns: 1fr; }.footer-grid #newsletter-form button { min-height: 43px; }.footer-bottom { align-items: flex-start; flex-direction: column; }.seller-profile-copy { align-items: flex-start; }.header-link#stores-link { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }