/* Quickly — dedicated grocery homepage */
.grc{
  --ink:#0A241D;--ink2:#123D2E;--em:#0F6B4F;--em2:#0A7A54;--em3:#1E8A63;
  --lime:#DDF57F;--cream:#F7F4EA;--paper:#FFFFFF;--mint:#F1FBF6;
  --line:#E4EBDD;--line2:#EEF3E7;--muted:#6B7A74;--muted2:#96A399;
  --disp:'Bricolage Grotesque',var(--font-display,system-ui),sans-serif;
  --body:'Manrope',var(--font-body,system-ui),sans-serif;
  font-family:var(--body);color:var(--ink);
}
.grc *{box-sizing:border-box}
.grc .wrap{max-width:1280px;margin:0 auto;padding:0 22px}
.grc a{text-decoration:none}
.grc :focus-visible{outline:2px solid var(--em);outline-offset:3px;border-radius:6px}

/* Hero */
.grc-hero{position:relative;overflow:hidden;background:
  radial-gradient(115% 150% at 92% -10%,#E6F8ED 0%,#F4FBF6 42%,#FAFCF6 100%);
  border-bottom:1px solid #E5F0E7}
.grc-hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(15,107,79,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(15,107,79,.06) 1px,transparent 1px);
  background-size:38px 38px;mask-image:radial-gradient(80% 120% at 85% 0%,#000 4%,transparent 72%)}
.grc-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)}
.grc-orb--a{right:-90px;top:-160px;width:420px;height:420px;background:radial-gradient(circle,rgba(221,245,127,.55),rgba(221,245,127,0) 68%)}
.grc-orb--b{left:-120px;bottom:-210px;width:380px;height:380px;background:radial-gradient(circle,rgba(30,138,99,.14),rgba(30,138,99,0) 70%)}
.grc-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:42px;align-items:center;padding-top:54px;padding-bottom:48px}
.grc-kicker{display:inline-flex;align-items:center;gap:8px;font-size:9px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--em2)}
.grc-kicker i{width:18px;height:1px;background:var(--em)}
.grc-copy h1{margin:15px 0 13px;font-family:var(--disp);font-size:clamp(38px,5vw,62px);line-height:.98;letter-spacing:-.055em;font-weight:600;color:var(--ink)}
.grc-copy h1 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:var(--em)}
.grc-copy>p{max-width:560px;margin:0;font-size:13px;line-height:1.72;color:#53675E}
.grc-search{display:flex;align-items:center;gap:9px;max-width:580px;margin-top:22px;padding:6px 6px 6px 15px;border:1px solid #CFE3D5;border-radius:14px;background:#fff;
  box-shadow:0 18px 42px -30px rgba(10,36,29,.45)}
.grc-search .ic{width:17px;height:17px;color:#7D9488;flex:none}
.grc-search input{flex:1;min-width:0;height:42px;border:0;background:transparent;outline:0;font:inherit;font-size:12.5px;color:var(--ink)}
.grc-search input::placeholder{color:#9DAA9F}
.grc-search button{height:42px;padding:0 18px;border:0;border-radius:9px;background:var(--ink);color:#F5F8EA;font:inherit;font-size:10px;font-weight:800;letter-spacing:.04em;cursor:pointer;transition:background .16s}
.grc-search button:hover{background:var(--em)}
.grc-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.grc-quick a{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #DCE8D8;border-radius:99px;background:rgba(255,255,255,.78);
  font-size:9px;font-weight:800;color:#5A6D60;transition:.15s}
.grc-quick a b{font-size:8px;color:#91A08F;font-weight:800}
.grc-quick a:hover{border-color:#B6D5BE;background:#fff;color:var(--em)}
.grc-quick a.is-on{background:var(--ink);border-color:var(--ink);color:#F5F8EA}
.grc-quick a.is-on b{color:var(--lime)}

/* Hero pass */
.grc-pass{position:relative;overflow:hidden;padding:24px;border-radius:22px;color:#F5F8EA;
  background:radial-gradient(120% 150% at 100% 0%,#1C8B64 0%,#0F6B4F 45%,#0A3D2E 100%);
  box-shadow:0 30px 60px -38px rgba(10,61,46,.6)}
.grc-pass:after{content:"";position:absolute;right:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(221,245,127,.18)}
.grc-pass-kicker{display:inline-flex;align-items:center;gap:6px;font-size:8px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.grc-pass strong{display:block;margin:16px 0 10px;font-family:var(--disp);font-size:25px;line-height:1.15;letter-spacing:-.04em;font-weight:500;color:#fff}
.grc-pass strong em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;color:var(--lime);font-weight:400}
.grc-pass p{position:relative;z-index:1;margin:0;font-size:10px;line-height:1.62;color:#CBE2D2}
.grc-pass ul{position:relative;z-index:1;display:grid;gap:6px;margin:16px 0 18px;padding:0;list-style:none}
.grc-pass li{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:700;color:#E7F2E2}
.grc-pass li .ic{width:13px;height:13px;color:var(--lime);flex:none}
.grc-pass-stamp{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid rgba(255,255,255,.22);border-radius:99px;
  background:rgba(255,255,255,.08);font-size:7.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#DFF0D4}

/* Strip */
.grc-strip{border-bottom:1px solid var(--line);background:#0A241D;color:#DCEBDD;overflow:hidden}
.grc-strip-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:44px;white-space:nowrap}
.grc-strip-in span{font-size:8px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#C7DEC9}
.grc-strip-in i{width:4px;height:4px;border-radius:50%;background:var(--lime);flex:none}

/* Shelf */
.grc-shelf{padding:38px 0 12px;background:#FBFAF5}
.grc-shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.grc-label{display:block;font-size:8px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--em)}
.grc-shelf-head h2{margin:6px 0 4px;font-family:var(--disp);font-size:clamp(24px,3vw,34px);line-height:1;letter-spacing:-.045em;font-weight:600}
.grc-shelf-head p{margin:0;font-size:10px;color:var(--muted2)}
.grc-sort{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.grc-sort label{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7E8C80}
.grc-sort select{height:36px;border:1px solid #DCE5D5;border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:10px;font-weight:700;padding:0 9px;outline:0}
.grc-sort select:focus{border-color:#9AC7AE;box-shadow:0 0 0 3px rgba(15,107,79,.1)}
.grc-reset{font-size:9px;font-weight:800;color:#A24E39;padding:5px 2px}
.grc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.grc-grid .product-tile,.grc-grid .p-card{height:100%}
.grc-inf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:26px 0 18px;min-height:58px}
.grc-inf .inf-spin{width:18px;height:18px;border:2px solid #DCE9D9;border-top-color:var(--em);border-radius:50%;animation:grcSpin .8s linear infinite;display:none}
.grc-inf.is-loading .inf-spin{display:block}
.grc-inf .inf-status{margin:0;font-size:9px;font-weight:700;color:#93A093;text-align:center}
.grc-inf .inf-retry{height:32px;padding:0 13px;border:1px solid #DCE5D5;border-radius:8px;background:#fff;font:inherit;font-size:9px;font-weight:800;color:var(--ink);cursor:pointer}
.grc-inf .inf-retry[hidden]{display:none}
@keyframes grcSpin{to{transform:rotate(360deg)}}

/* Empty */
.grc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:52px 24px 60px;border:1px dashed #D8E4D2;border-radius:20px;background:#fff}
.grc-empty-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--mint);color:var(--em);border:1px solid #D7EADB;margin-bottom:12px}
.grc-empty h2{margin:0 0 5px;font-family:var(--disp);font-size:21px;letter-spacing:-.035em;font-weight:600}
.grc-empty p{max-width:480px;margin:0;font-size:10.5px;line-height:1.65;color:#85938A}
.grc-empty-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.grc-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border-radius:9px;font-size:9.5px;font-weight:800;transition:.15s}
.grc-btn--ink{background:var(--ink);color:#F5F8EA}
.grc-btn--ink:hover{background:var(--em)}
.grc-btn--ghost{border:1px solid #DCE5D5;background:#fff;color:var(--ink)}
.grc-btn--ghost:hover{border-color:#B7D2BF;background:#F8FCF7}

/* Promise */
.grc-promise{padding:34px 0 48px;background:#FBFAF5;border-top:1px solid var(--line2)}
.grc-promise-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grc-promise article{padding:17px 16px;border:1px solid var(--line);border-radius:15px;background:#fff}
.grc-promise-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--mint);color:var(--em);border:1px solid #D8EBDD;margin-bottom:10px}
.grc-promise h3{margin:0 0 4px;font-family:var(--disp);font-size:13px;letter-spacing:-.02em;font-weight:600}
.grc-promise p{margin:0;font-size:9.5px;line-height:1.6;color:#7F8E85}

@media(max-width:1100px){
  .grc-hero-in{grid-template-columns:1fr .72fr;gap:26px}
  .grc-copy h1{font-size:47px}
  .grc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grc-promise-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .grc-strip-in span:nth-of-type(n+4),.grc-strip-in i:nth-of-type(n+4){display:none}
  .grc-hero-in{grid-template-columns:1fr;padding-top:34px;padding-bottom:30px;gap:22px}
  .grc-copy h1{font-size:42px}
  .grc-pass{max-width:none}
  .grc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grc-strip-in{gap:10px;overflow-x:auto;justify-content:flex-start}
  .grc-strip-in::-webkit-scrollbar{display:none}
}
@media(max-width:640px){
  .grc{padding-bottom:76px}
  .grc .wrap{padding:0 14px}
  .grc-hero-in{padding-top:26px;padding-bottom:24px}
  .grc-copy h1{font-size:35px;line-height:1.02}
  .grc-copy>p{font-size:11.5px}
  .grc-search{padding:5px 5px 5px 12px;border-radius:12px;margin-top:16px}
  .grc-search input{height:39px;font-size:11.5px}
  .grc-search button{height:39px;padding:0 13px}
  .grc-quick{gap:5px;margin-top:11px}
  .grc-quick a{padding:5px 8px;font-size:8.5px}
  .grc-pass{padding:19px;border-radius:18px}
  .grc-pass strong{font-size:22px}
  .grc-shelf{padding-top:26px}
  .grc-shelf-head{gap:12px;margin-bottom:14px}
  .grc-shelf-head h2{font-size:25px}
  .grc-grid{gap:9px}
  .grc-promise{padding:26px 0 34px}
  .grc-promise-in{grid-template-columns:1fr;gap:8px}
  .grc-promise article{padding:14px}
}
@media(prefers-reduced-motion:reduce){.grc *{animation:none!important;transition:none!important}}
