Theme Name:   Trayfull Astra Child
Theme URI:    https://trayfull.in
Description:  Astra Child Theme for Trayfull Supermarket
Author:       Trayfull
Author URI:   https://trayfull.in
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  trayfull-child
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Hind+Madurai:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════
   TRAYFULL DESIGN TOKENS
═══════════════════════════════════════════════════════════ */
:root {
  --g900: #0A3D1F; --g800: #1B5E20; --g700: #2E7D32; --g600: #388E3C;
  --g100: #E8F5E9; --g050: #F1FBF3; --mint: #D6F5E3; --sage: #A8D5B8;
  --o600: #E65100; --o700: #BF360C; --o100: #FFF3EE;
  --blue: #1565C0; --blul: #E3F2FD;
  --wa:   #25D366; --wad:  #128C7E;
  --ink:  #0F1923; --text: #1E293B; --mute: #64748B; --faint: #94A3B8;
  --bdr:  #E2E8F0; --bg:   #F8FAF8; --sur:  #FFFFFF;
  --r06: 6px; --r10: 10px; --r14: 14px; --r20: 20px; --rpill: 100px;
  --s1: 0 1px 3px rgba(0,0,0,.08);
  --s2: 0 4px 12px rgba(0,0,0,.09);
  --s3: 0 10px 30px rgba(0,0,0,.11);
  --s4: 0 20px 60px rgba(0,0,0,.13);
  --fh: 'Outfit', sans-serif;
  --fb: 'Plus Jakarta Sans', sans-serif;
  --ft: 'Hind Madurai', sans-serif;
  --max: 1260px;
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--fb); color: var(--text); background: var(--bg); overflow-x: hidden; }
a    { text-decoration: none; color: inherit; }
img  { max-width: 100%; display: block; }
button { cursor: pointer; font-family: var(--fh); border: none; background: none; }
::selection { background: #A8F0C4; color: var(--g900); }

/* ── LAYOUT ─────────────────────────────────────────────── */
.wrap     { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.sec      { padding: 72px 0; }
.sec-sm   { padding: 48px 0; }
.s-white  { background: var(--sur); }
.s-bg     { background: var(--bg); }
.s-green  { background: var(--g800); }
.s-dark   { background: var(--g900); }
.s-blue   { background: var(--blul); }

/* ── SECTION HEADER ─────────────────────────────────────── */
.sec-hdr   { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.sec-title { font-family: var(--fh); font-size: clamp(20px,2.2vw,26px); font-weight: 700; color: var(--ink); line-height: 1.25; }
.sec-sub   { font-size: 14px; color: var(--mute); margin-top: 4px; }
.sec-link  { font-family: var(--fh); font-size: 13.5px; font-weight: 600; color: var(--g700); white-space: nowrap; flex-shrink: 0; transition: color .15s; }
.sec-link:hover { color: var(--g800); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn      { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--fh); font-weight: 700; font-size: 14px; border-radius: var(--r10); padding: 11px 22px; transition: all .2s; cursor: pointer; border: none; white-space: nowrap; text-decoration: none; }
.btn-lg   { padding: 14px 32px; font-size: 15px; border-radius: var(--r14); }
.btn-xl   { padding: 16px 44px; font-size: 16px; border-radius: var(--r14); }
.btn-sm   { padding: 8px 16px; font-size: 13px; border-radius: var(--r06); }
.btn-grn  { background: var(--g700); color: #fff; }
.btn-grn:hover  { background: var(--g800); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(46,125,50,.35); }
.btn-org  { background: var(--o600); color: #fff; }
.btn-org:hover  { background: var(--o700); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(230,81,0,.35); }
.btn-wa   { background: var(--wa); color: #fff; }
.btn-wa:hover   { background: var(--wad); }
.btn-wht  { background: #fff; color: var(--g800); }
.btn-wht:hover  { background: var(--g050); }
.btn-blu  { background: var(--blue); color: #fff; }
.btn-blu:hover  { background: #0D47A1; }
.btn-ghost { background: transparent; color: var(--g700); border: 1.5px solid var(--g600); }
.btn-ghost:hover { background: var(--g100); }

/* ── TICKER ──────────────────────────────────────────────── */
.tf-ticker { background: var(--g900); height: 34px; overflow: hidden; display: flex; align-items: center; }
.ticker-inner { display: flex; align-items: center; gap: 40px; animation: tfTick 30s linear infinite; white-space: nowrap; }
.ticker-item  { font-family: var(--fh); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 8px; }
.ticker-sep   { color: rgba(255,255,255,.25); font-size: 10px; }
@keyframes tfTick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── PRE-HEADER ──────────────────────────────────────────── */
.tf-preheader { background: var(--g800); padding: 0; height: 36px; display: flex; align-items: center; }
.ph-inner     { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ph-left      { display: flex; align-items: center; gap: 16px; }
.ph-item      { font-family: var(--fh); font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 5px; }
.ph-wa        { display: flex; align-items: center; gap: 7px; font-family: var(--fh); font-size: 12px; font-weight: 700; color: #A8F0C4; background: rgba(255,255,255,.1); padding: 4px 12px; border-radius: var(--rpill); transition: background .15s; }
.ph-wa:hover  { background: rgba(255,255,255,.18); }

/* ── STICKY HEADER ───────────────────────────────────────── */
.tf-header        { position: sticky; top: 0; z-index: 9000; background: var(--sur); border-bottom: 1px solid var(--bdr); transition: box-shadow .2s; }
.tf-header.stuck  { box-shadow: 0 2px 16px rgba(0,0,0,.08); }
.hdr-inner        { display: grid; grid-template-columns: 20% 60% 20%; align-items: center; height: 68px; gap: 16px; }
.hdr-logo         { font-family: var(--fh); font-size: 22px; font-weight: 900; color: var(--g900); letter-spacing: -.5px; text-decoration: none; }
.hdr-logo span    { color: var(--o600); }
.hdr-search       { position: relative; }
.hdr-search input { width: 100%; padding: 9px 16px 9px 42px; border: 1.5px solid var(--bdr); border-radius: var(--rpill); font-family: var(--fb); font-size: 14px; color: var(--text); background: var(--bg); transition: border-color .2s; outline: none; }
.hdr-search input:focus { border-color: var(--g600); background: var(--sur); }
.hdr-search-ico   { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 16px; pointer-events: none; }
.hdr-right        { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.hdr-wa-btn       { display: flex; align-items: center; gap: 6px; background: var(--wa); color: #fff; font-family: var(--fh); font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: var(--rpill); transition: background .2s; text-decoration: none; }
.hdr-wa-btn:hover { background: var(--wad); }
.ham              { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; border: none; background: none; }
.ham span         { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all .2s; }

/* ── CATEGORY NAV BAR ────────────────────────────────────── */
.cat-bar { background: var(--sur); border-bottom: 1px solid var(--bdr); overflow-x: auto; scrollbar-width: none; position: sticky; top: 68px; z-index: 8900; }
.cat-bar::-webkit-scrollbar { display: none; }
.cat-bar-inner { display: flex; align-items: stretch; min-width: max-content; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.cat-tab       { display: flex; align-items: center; gap: 6px; padding: 10px 16px; font-family: var(--fh); font-size: 12.5px; font-weight: 600; color: var(--mute); border-bottom: 2.5px solid transparent; text-decoration: none; transition: all .2s; white-space: nowrap; }
.cat-tab:hover, .cat-tab.active { color: var(--o600); border-bottom-color: var(--o600); background: #FFFBF9; }
.cat-tab .ct-em { font-size: 15px; }

/* ── HERO SECTION ────────────────────────────────────────── */
.tf-hero    { background: var(--g900); padding: 64px 0; min-height: 520px; display: flex; align-items: center; position: relative; overflow: hidden; }
.tf-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(46,125,50,.18) 0%, transparent 70%); pointer-events: none; }
.hero-grid  { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center; position: relative; z-index: 1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--rpill); padding: 5px 14px; font-family: var(--fh); font-size: 12px; font-weight: 600; color: #A8F0C4; margin-bottom: 18px; }
.hero-h1    { font-family: var(--fh); font-size: clamp(26px,3.8vw,48px); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 16px; }
.hero-sub   { font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: 28px; max-width: 540px; }
.hero-btns  { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.1); border-radius: var(--r10); overflow: hidden; }
.h-stat     { background: rgba(255,255,255,.07); padding: 14px 12px; text-align: center; }
.h-stat-n   { font-family: var(--fh); font-size: 20px; font-weight: 800; color: #A8F0C4; line-height: 1; margin-bottom: 4px; }
.h-stat-l   { font-size: 11px; color: rgba(255,255,255,.55); line-height: 1.3; }

/* ── HERO PANEL (right) ──────────────────────────────────── */
.hero-panel { background: var(--sur); border-radius: var(--r20); overflow: hidden; box-shadow: var(--s4); }
.hp-hd      { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--g050); border-bottom: 1px solid var(--bdr); }
.hp-title   { font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--ink); }
.hp-live    { font-family: var(--fh); font-size: 11px; font-weight: 700; color: var(--wa); background: #E8F5E9; padding: 3px 9px; border-radius: var(--rpill); }
.hp-items   { display: flex; flex-direction: column; }
.hp-row     { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--bdr); text-decoration: none; transition: background .15s; cursor: pointer; }
.hp-row:hover { background: var(--bg); }
.hp-row:last-child { border-bottom: none; }
.hp-em      { font-size: 28px; width: 38px; text-align: center; flex-shrink: 0; }
.hp-info    { flex: 1; min-width: 0; }
.hp-name    { font-family: var(--fh); font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-sub     { font-size: 11.5px; color: var(--mute); margin-top: 1px; }
.hp-rt      { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hp-price   { font-family: var(--fh); font-size: 16px; font-weight: 800; color: var(--o600); }
.hp-plus    { width: 24px; height: 24px; background: var(--wa); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; transition: transform .15s; }
.hp-row:hover .hp-plus { transform: scale(1.1); }
.hp-ft      { padding: 14px 18px; background: var(--bg); }

/* ── DEALS STRIP ─────────────────────────────────────────── */
.deals-strip { background: linear-gradient(135deg, #E65100 0%, #BF360C 100%); padding: 14px 0; }
.ds-inner    { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 4px; }
.ds-inner::-webkit-scrollbar { display: none; }
.ds-label    { font-family: var(--fh); font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.ds-sep      { color: rgba(255,255,255,.2); flex-shrink: 0; }
.ds-chip     { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: var(--rpill); padding: 5px 14px; white-space: nowrap; flex-shrink: 0; text-decoration: none; transition: background .15s; cursor: pointer; }
.ds-chip:hover { background: rgba(255,255,255,.25); }
.ds-em       { font-size: 14px; }
.ds-name     { font-family: var(--fh); font-size: 12px; font-weight: 600; color: #fff; }
.ds-price    { font-family: var(--fh); font-size: 13px; font-weight: 800; color: #FFD580; }
.ds-count    { font-family: var(--fh); font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.7); background: rgba(0,0,0,.2); padding: 2px 8px; border-radius: var(--rpill); }

/* ── TRUST STRIP ─────────────────────────────────────────── */
.trust-inner { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr); }
.t-item      { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-right: 1px solid var(--bdr); }
.t-item:last-child { border-right: none; }
.t-ico       { width: 36px; height: 36px; background: var(--g050); border-radius: var(--r10); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.t-ttl       { font-family: var(--fh); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.t-sub       { font-size: 11px; color: var(--mute); margin-top: 1px; }

/* ── CATEGORY GRID ───────────────────────────────────────── */
.catgrid { display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: 200px 160px; gap: 12px; }
.cg      { position: relative; border-radius: var(--r14); overflow: hidden; display: flex; align-items: flex-end; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.cg:hover { transform: translateY(-3px); box-shadow: var(--s3); }
.cg.tall  { grid-row: 1/3; }
.cg-fill  { position: absolute; inset: 0; transition: transform .4s; }
.cg:hover .cg-fill { transform: scale(1.05); }
.cg-ov    { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, transparent); }
.cg-body  { position: relative; z-index: 2; padding: 14px; width: 100%; }
.cg-em    { font-size: 30px; line-height: 1; margin-bottom: 4px; display: block; }
.cg-name  { font-family: var(--fh); font-size: 15px; font-weight: 800; color: #fff; line-height: 1.2; }
.cg-sub   { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 2px; }
.cg-veg .cg-fill   { background: linear-gradient(140deg,#1B4D2A,#2E7D32); }
.cg-fruit .cg-fill { background: linear-gradient(140deg,#7F1D1D,#B71C1C); }
.cg-dairy .cg-fill { background: linear-gradient(140deg,#0D3880,#1565C0); }
.cg-groc .cg-fill  { background: linear-gradient(140deg,#3E1A6E,#6A1B9A); }
.cg-leafy .cg-fill { background: linear-gradient(140deg,#1A3D1A,#388E3C); }
.cg-snack .cg-fill { background: linear-gradient(140deg,#7F2700,#E64A00); }
.cg-bev .cg-fill   { background: linear-gradient(140deg,#004D40,#00695C); }
.cg-home .cg-fill  { background: linear-gradient(140deg,#1A237E,#283593); }

/* ── PRICE TABS ──────────────────────────────────────────── */
.p-tabs     { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex-wrap: wrap; }
.p-tabs::-webkit-scrollbar { display: none; }
.p-tab      { padding: 9px 18px; font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--mute); border: 1.5px solid var(--bdr); border-radius: var(--rpill); background: var(--sur); cursor: pointer; transition: all .2s; white-space: nowrap; }
.p-tab:hover, .p-tab.on { background: var(--g050); border-color: var(--g600); color: var(--g700); }
.p-tab.dairy.on { background: var(--blul); border-color: var(--blue); color: var(--blue); }
.p-tbl-wrap { display: none; }
.p-tbl-wrap.on { display: block; }
.upd-badge  { display: inline-flex; align-items: center; gap: 6px; background: var(--g100); border: 1px solid var(--sage); border-radius: var(--rpill); padding: 4px 14px; font-family: var(--fh); font-size: 12px; font-weight: 700; color: var(--g700); }

/* ── PRODUCT GRID ────────────────────────────────────────── */
.tf-grid    { display: grid; grid-template-columns: repeat(auto-fill,minmax(188px,1fr)); gap: 14px; }
.tf-hscroll { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.tf-hscroll::-webkit-scrollbar { display: none; }
.tf-hscroll .tf-card { flex-shrink: 0; width: 188px; }

/* ── PRODUCT CARD ────────────────────────────────────────── */
.tf-card    { background: var(--sur); border-radius: var(--r14); overflow: hidden; border: 1px solid var(--bdr); transition: all .22s; position: relative; display: flex; flex-direction: column; }
.tf-card:hover { box-shadow: var(--s3); transform: translateY(-4px); border-color: var(--sage); }
.tf-bwrap   { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-direction: column; gap: 4px; }
.tf-badge   { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--rpill); font-family: var(--fh); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: #fff; line-height: 1; }
.tf-img     { height: 160px; display: flex; align-items: center; justify-content: center; background: var(--bg); font-size: 68px; overflow: hidden; flex-shrink: 0; transition: font-size .3s; }
.tf-card:hover .tf-img { font-size: 78px; }
.tf-img-blue { background: var(--blul); }
.tf-body    { padding: 12px 14px 10px; flex: 1; display: flex; flex-direction: column; }
.tf-cat     { font-family: var(--fh); font-size: 10.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.tf-name    { font-family: var(--fh); font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.25; margin-bottom: 2px; }
.tf-tamil   { font-size: 12px; color: var(--mute); font-family: var(--ft); margin-bottom: 8px; }
.tf-unit    { font-size: 12px; color: var(--faint); background: var(--bg); padding: 2px 8px; border-radius: var(--rpill); display: inline-block; margin-bottom: 10px; }
.tf-prow    { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.tf-price   { font-family: var(--fh); font-size: 20px; font-weight: 800; color: var(--o600); line-height: 1; }
.tf-price-blue { color: var(--blue); }
.tf-mrp     { font-size: 12px; color: var(--faint); text-decoration: line-through; }
.tf-save    { font-size: 11px; font-weight: 700; color: var(--wa); background: var(--g100); padding: 2px 6px; border-radius: var(--rpill); }
.tf-wabtn   { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 0; color: #fff; font-family: var(--fh); font-size: 12.5px; font-weight: 700; border-radius: 0 0 var(--r14) var(--r14); border: none; cursor: pointer; transition: background .2s; text-decoration: none; margin-top: auto; }

/* ── COMBO CARDS ─────────────────────────────────────────── */
.combo-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.combo-card  { background: var(--sur); border-radius: var(--r20); overflow: hidden; border: 1.5px solid var(--bdr); transition: all .22s; position: relative; }
.combo-card:hover { box-shadow: var(--s3); transform: translateY(-4px); border-color: var(--sage); }
.combo-card.featured { border-color: var(--o600); box-shadow: 0 0 0 1px var(--o600); }
.combo-ftag  { position: absolute; top: 14px; right: 14px; }
.combo-top   { padding: 20px 20px 14px; background: var(--g050); border-bottom: 1px solid var(--bdr); }
.combo-ems   { font-size: 38px; margin-bottom: 8px; line-height: 1; }
.combo-name  { font-family: var(--fh); font-size: 17px; font-weight: 800; color: var(--ink); }
.combo-body  { padding: 16px 20px; }
.combo-items { font-size: 13px; color: var(--mute); line-height: 1.65; margin-bottom: 12px; }
.combo-pr    { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.combo-price { font-family: var(--fh); font-size: 24px; font-weight: 900; color: var(--o600); }
.combo-mrp   { font-size: 14px; color: var(--faint); text-decoration: line-through; }
.combo-save  { font-size: 12.5px; font-weight: 700; color: var(--g700); background: var(--g100); padding: 3px 8px; border-radius: var(--rpill); }
.tf-combobtn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; color: #fff; font-family: var(--fh); font-size: 13.5px; font-weight: 700; border-radius: var(--r10); text-decoration: none; transition: opacity .2s; width: 100%; }
.tf-combobtn:hover { opacity: .88; }

/* ── OFFER CARDS ─────────────────────────────────────────── */
.offer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.offer-hero { grid-row: 1/3; background: linear-gradient(135deg,#7F1D1D,#C62828); border-radius: var(--r20); padding: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; }
.offer-hero::before { content:''; position: absolute; width: 200px; height: 200px; top: -40px; right: -40px; background: rgba(255,255,255,.07); border-radius: 50%; }
.offer-sm   { background: var(--sur); border-radius: var(--r14); padding: 18px; border: 1px solid var(--bdr); transition: all .2s; display: flex; flex-direction: column; }
.offer-sm:hover { box-shadow: var(--s2); border-color: #CBD5E1; transform: translateY(-2px); }
.os-badge   { font-family: var(--fh); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--rpill); color: #fff; display: inline-block; margin-bottom: 10px; }
.os-em      { font-size: 34px; margin-bottom: 8px; }
.os-name    { font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.os-desc    { font-size: 12.5px; color: var(--mute); margin-bottom: 10px; line-height: 1.5; }
.os-pr      { display: flex; align-items: baseline; gap: 7px; margin-bottom: 12px; }
.os-price   { font-family: var(--fh); font-size: 21px; font-weight: 800; color: var(--o600); }
.os-mrp     { font-size: 13px; color: var(--faint); text-decoration: line-through; }
.os-sv      { font-size: 12px; font-weight: 700; color: var(--g700); }
.tf-offerbtn { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px; color: #fff; font-family: var(--fh); font-size: 13px; font-weight: 700; border-radius: var(--r10); text-decoration: none; transition: opacity .2s; width: 100%; }
.tf-offerbtn:hover { opacity: .88; }

/* ── FRESHNESS PROMISE ───────────────────────────────────── */
.fresh-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.fresh-item { padding: 36px 28px; text-align: center; border-right: 1px solid rgba(255,255,255,.1); }
.fresh-item:last-child { border-right: none; }
.fresh-ico  { width: 64px; height: 64px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; }
.fresh-ttl  { font-family: var(--fh); font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.fresh-desc { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.65; max-width: 220px; margin: 0 auto; }

/* ── DELIVERY ────────────────────────────────────────────── */
.slot-grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px; }
.slot-card  { background: var(--sur); border: 1.5px solid var(--bdr); border-radius: var(--r14); padding: 18px 14px; text-align: center; cursor: pointer; transition: all .2s; }
.slot-card:hover, .slot-card.on { border-color: var(--g600); background: var(--g050); }
.sc-time    { font-family: var(--fh); font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.sc-sub     { font-size: 12px; color: var(--mute); margin-bottom: 8px; }
.sc-open    { background: var(--g100); color: var(--g700); font-family: var(--fh); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--rpill); }
.area-grid  { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
.area-pill  { padding: 7px 16px; background: var(--sur); border: 1.5px solid var(--bdr); border-radius: var(--rpill); font-family: var(--fh); font-size: 13px; font-weight: 600; color: var(--mute); cursor: pointer; transition: all .15s; }
.area-pill:hover { border-color: var(--g600); color: var(--g700); background: var(--g050); }
.del-policy { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 22px; }
.dp-card    { background: var(--sur); border-radius: var(--r14); padding: 18px 14px; text-align: center; border: 1px solid var(--bdr); }
.dp-ico     { font-size: 26px; margin-bottom: 8px; }
.dp-val     { font-family: var(--fh); font-size: 15px; font-weight: 800; color: var(--g700); margin-bottom: 3px; }
.dp-lbl     { font-size: 12px; color: var(--mute); }

/* ── WA STEPS ────────────────────────────────────────────── */
.wa-steps     { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; position: relative; margin-bottom: 48px; }
.wa-steps::before { content: ''; position: absolute; top: 28px; left: 16%; right: 16%; height: 1.5px; background: rgba(255,255,255,.08); }
.wa-step      { text-align: center; position: relative; z-index: 1; }
.ws-num       { width: 56px; height: 56px; background: var(--o600); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 22px; font-weight: 800; color: #fff; margin: 0 auto 14px; }
.ws-ico       { font-size: 32px; margin-bottom: 10px; }
.ws-ttl       { font-family: var(--fh); font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.ws-desc      { font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.6; max-width: 200px; margin: 0 auto; }

/* ── TESTIMONIALS ────────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.testi-card { background: var(--sur); border-radius: var(--r14); padding: 24px; border: 1px solid var(--bdr); border-left: 4px solid var(--sage); transition: all .2s; }
.testi-card:hover { box-shadow: var(--s2); }
.t-stars    { font-size: 14px; color: #FF8F00; margin-bottom: 10px; letter-spacing: 2px; }
.t-text     { font-size: 14px; color: var(--mute); line-height: 1.7; margin-bottom: 18px; font-style: italic; }
.t-auth     { display: flex; align-items: center; gap: 11px; }
.t-av       { width: 40px; height: 40px; background: var(--g800); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.t-name     { font-family: var(--fh); font-size: 14px; font-weight: 700; color: var(--ink); }
.t-loc      { font-size: 12px; color: var(--mute); }

/* ── BRAND STRIP ─────────────────────────────────────────── */
.brand-inner { display: flex; align-items: center; gap: 8px; padding: 18px 20px; max-width: var(--max); margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.brand-lbl   { font-family: var(--fh); font-size: 11px; font-weight: 700; color: var(--faint); letter-spacing: 1px; text-transform: uppercase; margin-right: 6px; }
.brand-pill  { padding: 6px 14px; background: var(--bg); border: 1.5px solid var(--bdr); border-radius: var(--rpill); font-family: var(--fh); font-size: 12px; font-weight: 700; color: var(--mute); flex-shrink: 0; transition: all .15s; }
.brand-pill:hover { border-color: var(--sage); color: var(--g700); background: var(--g050); }

/* ── FOOTER ──────────────────────────────────────────────── */
.tf-footer  { background: #0A1F0E; padding: 56px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 40px; }
.footer-logo { font-family: var(--fh); font-size: 24px; font-weight: 900; color: #fff; margin-bottom: 10px; }
.footer-logo span { color: var(--o600); }
.footer-tag  { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.6; margin-bottom: 18px; }
.footer-wa   { display: inline-flex; align-items: center; gap: 7px; background: var(--wa); color: #fff; font-family: var(--fh); font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: var(--rpill); text-decoration: none; transition: background .2s; }
.footer-wa:hover { background: var(--wad); }
.footer-col-ttl { font-family: var(--fh); font-size: 11px; font-weight: 700; color: rgba(255,255,255,.3); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
.footer-links   { display: flex; flex-direction: column; gap: 9px; }
.footer-link    { font-size: 13.5px; color: rgba(255,255,255,.55); text-decoration: none; transition: color .15s; }
.footer-link:hover { color: rgba(255,255,255,.9); }
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.55); margin-bottom: 10px; line-height: 1.5; }
.footer-contact-item strong { color: rgba(255,255,255,.8); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-copy   { font-size: 12.5px; color: rgba(255,255,255,.3); }
.footer-hours  { font-size: 12px; color: rgba(255,255,255,.4); }

/* ── MOBILE DRAWER ───────────────────────────────────────── */
.mob-drawer   { display: none; position: fixed; inset: 0; z-index: 9500; }
.mob-drawer.open { display: block; }
.drawer-bg    { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.drawer-panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(320px,85vw); background: var(--sur); display: flex; flex-direction: column; overflow-y: auto; transform: translateX(-100%); transition: transform .3s; }
.mob-drawer.open .drawer-panel { transform: translateX(0); }
.drawer-hdr   { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--g900); flex-shrink: 0; }
.drawer-logo  { font-family: var(--fh); font-size: 20px; font-weight: 900; color: #fff; }
.drawer-logo span { color: var(--o600); }
.drawer-close { color: rgba(255,255,255,.7); font-size: 20px; border: none; background: none; cursor: pointer; padding: 4px; }
.d-sec        { padding: 16px 0 4px; flex-shrink: 0; }
.d-sec-ttl    { font-family: var(--fh); font-size: 10.5px; font-weight: 700; color: var(--faint); letter-spacing: 1.5px; text-transform: uppercase; padding: 0 20px 6px; }
.d-links      { display: flex; flex-direction: column; }
.d-link       { display: flex; align-items: center; gap: 12px; padding: 11px 20px; font-family: var(--fh); font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; transition: background .15s; }
.d-link:hover, .d-link.hot { background: var(--g050); color: var(--g700); }
.d-link.hot   { color: var(--o600); }
.d-em         { font-size: 18px; width: 26px; text-align: center; }
.drawer-div   { height: 1px; background: var(--bdr); margin: 8px 20px; }
.drawer-ctas  { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; margin-top: auto; border-top: 1px solid var(--bdr); }

/* ── FLOATING WA BUTTON ──────────────────────────────────── */
.float-wa     { position: fixed; bottom: 24px; right: 24px; z-index: 8000; width: 58px; height: 58px; background: var(--wa); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.45); animation: waPulse 2.5s infinite; text-decoration: none; transition: transform .2s; }
.float-wa:hover { transform: scale(1.1); }
@keyframes waPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.25); }
  50%      { box-shadow: 0 4px 20px rgba(37,211,102,.45), 0 0 0 14px rgba(37,211,102,0); }
}

/* ── MOBILE STICKY BAR ───────────────────────────────────── */
.mob-bar       { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 8001; height: 54px; background: var(--sur); border-top: 1px solid var(--bdr); }
.mob-bar-inner { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.mbb           { display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--fh); font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: none; height: 100%; border: none; cursor: pointer; }
.mbb-call      { background: var(--g700); }
.mbb-wa        { background: var(--wa); }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 780px; margin: 0 auto; }
.faq-item { background: var(--sur); border: 1px solid var(--bdr); border-radius: var(--r10); overflow: hidden; }
.faq-q    { width: 100%; padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; font-family: var(--fh); font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; background: none; border: none; text-align: left; transition: background .15s; gap: 12px; }
.faq-q:hover, .faq-q.open { background: var(--g050); color: var(--g700); }
.faq-arr  { transition: transform .25s; color: var(--g700); font-size: 17px; flex-shrink: 0; }
.faq-q.open .faq-arr { transform: rotate(180deg); }
.faq-a    { display: none; padding: 0 18px 15px; font-size: 14px; color: var(--mute); line-height: 1.75; }
.faq-a.open { display: block; }

/* ── PRICE TABLE (TablePress) ────────────────────────────── */
.p-tbl { width: 100% !important; border-collapse: collapse !important; }
.p-tbl thead th { padding: 11px 16px; font-family: var(--fh); font-size: 11.5px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .6px; background: var(--bg); border-bottom: 2px solid var(--bdr); text-align: left; }
.p-tbl tbody tr { border-bottom: 1px solid var(--bdr); transition: background .12s; }
.p-tbl tbody tr:hover { background: #F8FFF8; }
.p-tbl tbody td { padding: 11px 16px; font-size: 14px; vertical-align: middle; }

/* ── UTILITIES ───────────────────────────────────────────── */
.full-cta  { border-radius: var(--r14); padding: 20px; text-align: center; margin-top: 28px; }
.full-cta p { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 8px; }
.full-cta.grn { background: var(--g700); }
.full-cta.org { background: var(--o600); }
.full-cta.blu { background: var(--blue); }
.nav-hot  { background: var(--o600); color: #fff !important; padding: 4px 12px; border-radius: var(--rpill); }

/* ══ RESPONSIVE ═════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .catgrid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; }
  .cg.tall { grid-row: auto; height: 180px; }
  .cg      { height: 170px; }
  .offer-grid { grid-template-columns: 1fr 1fr; }
  .offer-hero { grid-row: auto; }
  .combo-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .sec    { padding: 52px 0; }
  .hdr-inner { grid-template-columns: auto 1fr auto; }
  .hdr-search { grid-column: 1/-1; grid-row: 2; padding-bottom: 12px; }
  .tf-header { height: auto; }
  .ham    { display: flex; }
  .hdr-wa-btn { display: none; }
  .ph-left .ph-item:not(:first-child) { display: none; }
  .trust-inner { grid-template-columns: 1fr 1fr; }
  .t-item:nth-child(2n) { border-right: none; }
  .t-item { border-bottom: 1px solid var(--bdr); }
  .catgrid { grid-template-columns: 1fr 1fr; }
  .cg     { height: 150px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { display: none; }
  .combo-grid, .testi-grid, .slot-grid, .del-policy, .footer-grid { grid-template-columns: 1fr; }
  .fresh-grid { grid-template-columns: 1fr; }
  .fresh-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .offer-grid { grid-template-columns: 1fr; }
  .tf-grid    { grid-template-columns: repeat(2,1fr); }
  .float-wa   { bottom: 62px; width: 52px; height: 52px; }
  .mob-bar    { display: block; }
  .wa-steps   { grid-template-columns: 1fr; }
  .wa-steps::before { display: none; }
  .hero-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .tf-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .tf-hscroll .tf-card { width: 160px; }
  .tf-img  { height: 130px; font-size: 56px; }
  .wrap    { padding: 0 14px; }
}