/* ============================================================
   Gulpit Ingredient Library — all styles namespaced under .gp
   to avoid collisions with Avada/Fusion global CSS.
   ============================================================ */
.gp{
  --red:#d60000; --red-deep:#a80000;
  --green:#05ad48; --green-deep:#04853a;
  --yellow:#ffcf23; --gold:#d3931d;
  --paper:#fdf6e3; --paper-2:#f7edd2;
  --ink:#1a1a17; --ink-soft:#54544c;
  --line:rgba(26,26,23,.14);
  --radius:18px;
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  color:var(--ink); font-size:17px; line-height:1.6;
}
.gp *,.gp *::before,.gp *::after{box-sizing:border-box}
.gp h2,.gp h3,.gp h4{font-family:"Fraunces",Georgia,serif;line-height:1.1;margin:0}
.gp p{margin:0 0 1em}

/* ---- explorer bar ---- */
.gp-bar{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.gp-search{position:relative;width:100%}
.gp-search input{width:100%;padding:15px 18px 15px 48px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);font-size:16px;font-family:inherit;outline:none}
.gp-search input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(5,173,72,.16)}
.gp-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);opacity:.5}
.gp-filters{display:flex;gap:9px;flex-wrap:wrap}
.gp-chip{flex:1 1 auto;border:1.5px solid var(--line);background:var(--paper);color:var(--ink-soft);
  padding:11px 16px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.gp-chip:hover{border-color:var(--green)}
.gp-chip[aria-pressed="true"]{background:var(--green);color:#fff;border-color:var(--green)}
@media(min-width:721px){
  /* desktop: search + chips on one row, search flexible, chips natural size */
  .gp-bar{flex-direction:row;align-items:center;gap:18px}
  .gp-search{flex:1 1 auto}
  .gp-filters{flex:0 0 auto;justify-content:flex-end}
  .gp-chip{flex:0 0 auto}
}
.gp-count{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px}
.gp-count b{color:var(--ink)}

/* ---- grid + cards ---- */
.gp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;min-height:120px}
@media(max-width:980px){.gp-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.gp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.gp-grid{grid-template-columns:1fr}}
.gp-grid[aria-busy="true"]{opacity:.5;transition:opacity .2s}

.gp-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;padding:0;width:100%;display:block;line-height:0;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.gp-card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 14px 30px -18px rgba(26,26,23,.45)}
.gp-card:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.gp-thumb{display:block;aspect-ratio:1/1;position:relative;background:linear-gradient(150deg,var(--c1,#05ad48),var(--c2,#04853a));background-size:cover;background-position:center}
.gp-thumb .gp-ph{position:absolute;inset:10px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);font-size:11px;font-weight:600;letter-spacing:.03em;text-align:center;
  border:2px dashed rgba(255,255,255,.35);border-radius:12px;padding:6px}
.gp-cat{position:absolute;top:10px;left:10px;background:rgba(26,26,23,.7);color:#fbf9f0;
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px}
.gp-body{padding:15px 16px 18px;line-height:1.5}
.gp-body h3{font-size:1.24rem}
.gp-body .gp-latin{font-size:12.5px;color:var(--green);font-weight:600;margin-top:3px}
.gp-body .gp-blurb{font-size:13.5px;color:var(--ink-soft);margin:9px 0 0;line-height:1.5}
.gp-empty{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--ink-soft)}
.gp-empty b{color:var(--ink);font-family:"Fraunces",serif}

/* ---- pager ---- */
.gp-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:34px;flex-wrap:wrap}
.gp-pager button{min-width:42px;height:42px;padding:0 12px;border-radius:11px;border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s}
.gp-pager button:hover:not(:disabled):not([aria-current]){border-color:var(--green);color:var(--green)}
.gp-pager button[aria-current="true"]{background:var(--green);border-color:var(--green);color:#fff}
.gp-pager button:disabled{opacity:.4;cursor:not-allowed}
.gp-pager .gp-arrow{font-size:18px;line-height:1}
.gp-pager .gp-gap{color:var(--ink-soft);padding:0 2px}

/* ---- buttons ---- */
.gp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;
  padding:13px 26px;border-radius:10px;text-decoration:none;cursor:pointer;border:0;font-family:inherit;transition:background .18s,transform .18s}
.gp-btn:hover{transform:translateY(-2px)}
.gp-btn-primary{background:var(--red);color:#fff}
.gp-btn-primary:hover{background:var(--red-deep)}

/* ---- centered modal ---- */
.gp-overlay{position:fixed;inset:0;background:rgba(26,26,23,.55);backdrop-filter:blur(4px);z-index:2147483646;
  opacity:0;transition:opacity .25s}
.gp-overlay.gp-open{opacity:1}
.gp-modal{position:fixed;z-index:2147483647;left:50%;top:50%;transform:translate(-50%,-48%) scale(.97);
  width:min(560px,92vw);max-height:calc(100dvh - 140px);background:var(--paper);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;opacity:0;pointer-events:none;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);transition:opacity .25s,transform .25s}
.gp-modal.gp-open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
/* When JS anchors the modal below a sticky header, top is set explicitly and we
   must not translate it vertically back to centre. */
.gp-modal[data-anchored="1"]{top:auto}
.gp-modal[data-anchored="1"].gp-open{transform:translate(-50%,0) scale(1)}
.gp-modal[data-anchored="1"]{transform:translate(-50%,0) scale(.97)}
.gp-modal-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;border:0;
  background:rgba(26,26,23,.82);color:#fff;font-size:24px;line-height:1;cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center}
.gp-modal-close:hover{background:var(--red-deep)}
.gp-modal-hero{aspect-ratio:16/7;background:linear-gradient(150deg,var(--c1,#05ad48),var(--c2,#04853a));
  background-size:cover;background-position:center;position:relative;flex:none}
.gp-modal-cat{position:absolute;left:20px;bottom:14px;background:rgba(26,26,23,.7);color:#fff;
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px}
.gp-modal-scroll{overflow-y:auto;padding:24px 28px 8px;text-align:center}
.gp-modal-body{display:flex;flex-direction:column;min-height:0;flex:1}
.gp-modal-scroll h2{font-size:2rem;margin:0 0 2px}
.gp-modal-latin{font-style:italic;color:var(--ink-soft);font-family:"Fraunces",serif;margin-bottom:14px}
.gp-modal-intro{font-size:1.02rem;color:var(--ink-soft);margin-bottom:6px}
.gp-facets{text-align:left}
.gp-facet{border-top:1px solid var(--line);padding:16px 0}
.gp-facet .gp-fh{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.gp-facet .gp-fi{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--paper-2);color:var(--green)}
.gp-facet h4{font-size:1.1rem;margin:0}
.gp-facet p{font-size:14.5px;color:var(--ink-soft);margin:0}

/* Desktop: wider two-column modal. Height capped to the viewport minus room for a
   sticky header, so the top of the card (and its close button) always stays on screen. */
@media(min-width:800px){
  .gp-modal{width:min(940px,94vw);max-height:min(620px,calc(100vh - 140px));flex-direction:row;align-items:stretch}
  .gp-modal-hero{aspect-ratio:auto;width:42%;flex:none;align-self:stretch;height:auto;border-radius:0}
  .gp-modal-cat{left:22px;bottom:22px}
  .gp-modal-scroll{padding:44px 44px 8px}
  .gp-modal-scroll h2{font-size:2.4rem}
  .gp-modal-close{background:rgba(26,26,23,.62)}
}
.gp-modal-foot{border-top:1px solid var(--line);padding:18px 28px;flex:none}
.gp-modal-foot .gp-btn{width:100%}

@media (prefers-reduced-motion:reduce){
  .gp-overlay,.gp-modal,.gp-card,.gp-btn{transition:none}
}

/* ---- single ingredient page (plugin template) ---- */
.gp-single-page{background:var(--paper);font-family:"Hanken Grotesk",system-ui,sans-serif;color:#1a1a17}
.gp-single{max-width:860px;margin:0 auto;padding:44px 24px 90px}
.gp-single .gp-back{display:inline-block;color:#05ad48;font-weight:600;text-decoration:none;margin-bottom:26px;font-size:14px}
.gp-single .gp-back:hover{color:#04853a}
.gp-single-head{margin-bottom:26px}
.gp-single-cat{display:inline-block;background:#1a1a17;color:#fff;font-size:12px;font-weight:600;
  padding:5px 13px;border-radius:999px;margin-bottom:16px;letter-spacing:.02em}
.gp-single h1{font-family:"Fraunces",serif;font-size:clamp(2.4rem,5.5vw,3.6rem);margin:0 0 4px;line-height:1.03}
.gp-single-latin{font-style:italic;color:#54544c;font-family:"Fraunces",serif;font-size:1.15rem;margin-bottom:14px}
.gp-single-lead{font-size:1.22rem;color:#3f4a3f;max-width:60ch;margin:0}
.gp-single-hero{aspect-ratio:16/8;border-radius:20px;overflow:hidden;margin:0 0 36px;
  background:linear-gradient(150deg,var(--c1,#05ad48),var(--c2,#04853a));
  background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.gp-single-hero img{width:100%;height:100%;object-fit:cover;display:block}
.gp-single-hero-ph{color:rgba(255,255,255,.9);font-family:"Fraunces",serif;font-size:1.6rem;font-weight:600}
.gp-single-body{font-size:1.05rem;color:#3f4a3f;line-height:1.7;margin-bottom:20px}
.gp-single-body p{margin:0 0 1em}

.gp-single-facets{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:40px}
@media(max-width:640px){.gp-single-facets{grid-template-columns:1fr}}
.gp-single-facet{background:var(--paper);padding:26px 26px 28px}
.gp-single-facet h2{font-family:"Fraunces",serif;font-size:1.2rem;margin:0 0 8px;color:#05ad48}
.gp-single-facet p{margin:0;color:#54544c;font-size:15px;line-height:1.6}

.gp-single-cta{background:#1a1a17;color:#f6f0df;border-radius:20px;padding:38px 34px;text-align:center}
.gp-single-cta h3{font-family:"Fraunces",serif;font-size:1.7rem;margin:0 0 8px;color:#fff}
.gp-single-cta p{color:rgba(246,240,223,.8);margin:0 0 22px;font-size:1.02rem}
.gp-single-page .gp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;
  font-size:15px;padding:14px 28px;border-radius:10px;text-decoration:none;cursor:pointer;border:0;
  font-family:"Hanken Grotesk",system-ui,sans-serif;transition:background .18s,transform .18s}
.gp-single-page .gp-btn:hover{transform:translateY(-2px)}
.gp-single-page .gp-btn-primary{background:#d60000;color:#fff}
.gp-single-page .gp-btn-primary:hover{background:#a80000}