/* ==========================================================================
   MREMBO NATURALS — B2B BOTANICAL INGREDIENT CATALOG
   --------------------------------------------------------------------------
   Built on the design tokens already defined in index.html (--green,
   --turmeric, --terracotta, --cream, --line …) and the existing type scale
   (Newsreader display / Work Sans body / Quicksand labels).

   Every selector is scoped under .b2b-, #page-b2b or .ing- so nothing here
   can reach into the existing site.
   ========================================================================== */

/* ==========================================================================
   0. SHARED
   ========================================================================== */

/* The professional answer to a field we do not have. Used everywhere a
   specification, MOQ or certificate would otherwise be invented. */
.on-request{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.84rem;
  color:#000000; font-style:normal;
}
/* A middot, not an em dash. This renders on the page, so it falls under the
   site-wide rule that no user-facing text uses em dashes. */
.on-request::before{ content:"·  "; opacity:0.5; }

.b2b-note{
  font-size:0.83rem; line-height:1.62; color:var(--neutral);
  border-left:2px solid var(--line); padding-left:0.9rem;
}

.b2b-tag{
  display:inline-flex; align-items:center; gap:0.3rem;
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.68rem;
  letter-spacing:0.04em; padding:0.24rem 0.65rem; border-radius:999px;
  background:var(--cream-2); color:var(--ink); border:0;
  line-height:1.4;
}
.b2b-tag.app{ background:var(--green-soft); border-color:#F5E3C0; color:#000000; }
.b2b-tag.dim{ background:transparent; border-style:dashed; color:var(--neutral); }

.b2b-eyebrow{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.7rem;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--terracotta);
}

/* ==========================================================================
   1. CATALOG HERO
   ========================================================================== */

.b2b-hero{
  position:relative; overflow:hidden; color:#FFFFFF;
  background:linear-gradient(152deg,#000000 0%,#000000 46%,#000000 100%);
}
.b2b-hero-art{ position:absolute; inset:0; width:100%; height:100%; opacity:0.45; }
.b2b-hero .wrap{ position:relative; z-index:2; padding-top:4.6rem; padding-bottom:3.8rem; }
.b2b-hero h1{
  font-family:'Quicksand', sans-serif; font-weight:500; line-height:1.08;
  font-size:clamp(2rem, 4.6vw, 3.1rem); max-width:17ch; margin-top:0.9rem;
  text-wrap:balance;
}
.b2b-hero .b2b-eyebrow{ color:var(--turmeric); }
.b2b-hero .tagline{
  font-family:'Quicksand', sans-serif; font-style:normal; font-size:1.15rem;
  color:var(--turmeric-soft); margin-top:1rem;
}
.b2b-hero .lede{ color:rgba(245,227,192,0.9); max-width:56ch; margin-top:1rem; font-size:1rem; }

/* Audience strip — who this catalog is for. */
.b2b-aud{ display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:1.8rem; }
.b2b-aud span{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.73rem;
  padding:0.4rem 0.85rem; border-radius:999px;
  background:rgba(245,227,192,0.1); border:0;
  color:#F5E3C0;
}

/* Trust row — verified credentials only. */
.b2b-trust{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.4rem;
}
@media (max-width:900px){ .b2b-trust{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .b2b-trust{ grid-template-columns:1fr; } }
.b2b-trust div{
  background:rgba(245,227,192,0.07); border:0;
  border-radius:14px; padding:1rem 1.1rem;
}
.b2b-trust .tt{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.78rem;
  color:var(--terracotta); margin-bottom:0.3rem;
}
.b2b-trust .td{ font-size:0.78rem; line-height:1.5; color:#D88F04; }

/* ==========================================================================
   2. SEARCH & FILTER BAR
   ========================================================================== */

.b2b-toolbar{
  position:sticky; top:0; z-index:40;
  background:rgba(245,227,192,0.97); backdrop-filter:blur(10px);
 
  padding:0.9rem 0;
}
.b2b-toolbar .wrap{ display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; }

.b2b-search{ position:relative; flex:1 1 320px; min-width:0; }
.b2b-search input{
  width:100%; font-family:'Quicksand', sans-serif; font-size:0.92rem; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line); border-radius:999px;
  padding:0.75rem 2.6rem 0.75rem 2.8rem;
}
.b2b-search input:focus{ outline:2px solid var(--turmeric); outline-offset:1px; border-color:var(--turmeric); }
.b2b-search input::placeholder{ color:#000000; }
.b2b-search .si{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  width:17px; height:17px; stroke:var(--neutral); fill:none; stroke-width:2; pointer-events:none;
}
.b2b-search .sx{
  position:absolute; right:0.7rem; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; border:0; cursor:pointer;
  background:var(--cream-2); color:var(--ink); font-size:1rem; line-height:1;
  display:none; align-items:center; justify-content:center; padding:0;
}
.b2b-search.has-value .sx{ display:inline-flex; }

.b2b-filter-btn{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.82rem;
  padding:0.72rem 1.2rem; border-radius:999px; cursor:pointer;
  background:var(--white); border:0; color:var(--ink);
  display:inline-flex; align-items:center; gap:0.5rem; white-space:nowrap;
}
.b2b-filter-btn:hover{ border-color:#F5E3C0; }
.b2b-filter-btn[aria-expanded="true"]{ background:var(--green); border-color:var(--green); color:#FFFFFF; }
.b2b-filter-btn .count{
  background:var(--turmeric); color:#000000; border-radius:999px;
  font-size:0.68rem; padding:0.05rem 0.42rem; min-width:1.15rem; text-align:center;
}
.b2b-filter-btn[aria-expanded="true"] .count{ background:var(--turmeric); }

.b2b-count{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.8rem;
  color:var(--neutral); margin-left:auto; white-space:nowrap;
}

/* Filter panel */
.b2b-filters{
  display:none; margin-top:0.9rem; padding-top:1.3rem;
}
.b2b-filters.open{ display:block; }
.b2b-fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 1.8rem; }
@media (max-width:900px){ .b2b-fgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .b2b-fgrid{ grid-template-columns:1fr; } }
.b2b-fgroup h4{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.66rem;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--neutral);
  margin-bottom:0.6rem;
}
.b2b-fopts{ display:flex; flex-wrap:wrap; gap:0.4rem; }
.b2b-fopt{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.76rem;
  padding:0.38rem 0.85rem; border-radius:999px; cursor:pointer;
  background:var(--white); border:1.5px solid var(--line); color:var(--ink);
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.b2b-fopt:hover{ border-color:#F5E3C0; }
.b2b-fopt[aria-pressed="true"]{ background:var(--green); border-color:var(--green); color:#FFFFFF; }
.b2b-fclear{
  margin-top:1.3rem; display:flex; gap:0.7rem; align-items:center; flex-wrap:wrap;
}

/* ==========================================================================
   3. INGREDIENT CARDS
   ========================================================================== */

.ing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media (max-width:980px){ .ing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .ing-grid{ grid-template-columns:1fr; } }

.ing-card{
  background:var(--white); border:0; border-radius:20px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ing-card:hover{ transform:translateY(-5px); box-shadow:0 26px 44px -26px rgba(97,64,2,0.32); border-color:#F5E3C0; }
.ing-media{ height:190px; position:relative; overflow:hidden; background:var(--cream-2); flex:none; }
.ing-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.ing-card:hover .ing-media img{ transform:scale(1.05); }
.ing-media svg{ width:100%; height:100%; display:block; }
.ing-cat{
  position:absolute; top:0.85rem; left:0.85rem; z-index:2;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.63rem;
  letter-spacing:0.09em; text-transform:uppercase;
  padding:0.28rem 0.7rem; border-radius:999px;
  background:rgba(245,227,192,0.94); color:var(--ink); border:0;
}
.ing-body{ padding:1.25rem 1.35rem 1.4rem; display:flex; flex-direction:column; gap:0.55rem; flex:1; }
.ing-body h3{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.28rem; line-height:1.2; }
.ing-latin{ font-family:'Quicksand', sans-serif; font-style:normal; font-size:0.83rem; color:var(--neutral); margin-top:-0.25rem; }
.ing-short{ font-size:0.86rem; line-height:1.6; color:var(--neutral); flex:1; }
.ing-apps{ display:flex; flex-wrap:wrap; gap:0.3rem; }
.ing-cta{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.5rem; }
.ing-cta .btn{ flex:1 1 auto; justify-content:center; }

/* "Added" state on the request button. */
.btn-added{ background:var(--green-soft) !important; color:#000000 !important; border:0; box-shadow:none !important; }

.b2b-empty{
  background:var(--white); border:0; border-radius:18px;
  padding:3rem 2rem; text-align:center; grid-column:1 / -1;
}
.b2b-empty h3{ font-family:'Quicksand', sans-serif; font-size:1.3rem; margin-bottom:0.6rem; }
.b2b-empty p{ font-size:0.9rem; color:var(--neutral); line-height:1.6; max-width:46ch; margin:0 auto 1.2rem; }

/* Category section headers inside the catalog */
.b2b-cat-head{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  padding-bottom:0.8rem; border-bottom:2px solid var(--cat, var(--green));
  margin:2.8rem 0 1.6rem;
}
.b2b-cat-head:first-of-type{ margin-top:0; }
.b2b-cat-head h2{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.6rem; }
.b2b-cat-head .cc{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.7rem;
  letter-spacing:0.08em; color:var(--neutral);
}
.b2b-cat-head p{ font-size:0.86rem; line-height:1.55; color:var(--neutral); flex:1 1 340px; }

/* ==========================================================================
   4. SAMPLE REQUEST LIST (drawer + floating button)
   ========================================================================== */

.req-fab{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:120;
  display:none; align-items:center; gap:0.6rem;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.85rem;
  background:var(--green); color:#FFFFFF; border:0; cursor:pointer;
  padding:0.9rem 1.4rem; border-radius:999px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.7);
  transition:transform .18s ease, background-color .18s ease;
}
.req-fab.on{ display:inline-flex; }
.req-fab:hover{ transform:translateY(-3px); background:#000000; }
/* Without an explicit size the inline icon stretches to fill the button. */
.req-fab svg{ flex:none; width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; }
.req-fab .n{
  background:var(--turmeric); color:#000000; border-radius:999px;
  font-size:0.72rem; padding:0.1rem 0.5rem; min-width:1.3rem; text-align:center;
}
@media (max-width:600px){ .req-fab{ right:1rem; bottom:1rem; left:1rem; justify-content:center; } }

.req-drawer{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(97,64,2,0.6); backdrop-filter:blur(5px);
}
.req-drawer.open{ display:block; }
.req-sheet{
  position:absolute; top:0; right:0; bottom:0; width:min(460px, 94vw);
  background:var(--cream); 
  display:flex; flex-direction:column;
  box-shadow:-30px 0 70px -30px rgba(97,64,2,0.75);
  animation:reqIn .28s cubic-bezier(.22,.9,.28,1);
}
@keyframes reqIn{ from{ transform:translateX(100%) } to{ transform:none } }
@media (prefers-reduced-motion:reduce){ .req-sheet{ animation:none; } }
.req-head{
  padding:1.4rem 1.5rem 1.1rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
}
.req-head h2{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.4rem; }
.req-head p{ font-size:0.82rem; color:var(--neutral); margin-top:0.3rem; line-height:1.5; }
.req-close{
  flex:none; width:36px; height:36px; border-radius:50%; cursor:pointer;
  background:var(--cream-2); border:0; color:var(--ink);
  font-size:1.3rem; line-height:1;
}
.req-close:hover{ background:var(--mango); color:var(--ink); border-color:var(--mango); }
.req-body{ flex:1; overflow-y:auto; padding:1.2rem 1.5rem; }
.req-foot{ padding:1.1rem 1.5rem 1.4rem; background:var(--white); }
.req-foot .btn{ width:100%; justify-content:center; }

.req-item{
  display:flex; gap:0.9rem; align-items:center;
  background:var(--white); border:0; border-radius:14px;
  padding:0.7rem 0.8rem; margin-bottom:0.7rem;
}
.req-item .thumb{
  flex:none; width:56px; height:56px; border-radius:10px; overflow:hidden;
  background:var(--cream-2);
}
.req-item .thumb img, .req-item .thumb svg{ width:100%; height:100%; object-fit:cover; display:block; }
.req-item .rn{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.87rem; line-height:1.3; }
.req-item .rc{ font-size:0.74rem; color:var(--neutral); margin-top:0.15rem; }
.req-item .rx{
  flex:none; margin-left:auto; width:30px; height:30px; border-radius:50%;
  background:transparent; border:1px solid var(--line); color:var(--neutral);
  cursor:pointer; font-size:1.05rem; line-height:1;
}
.req-item .rx:hover{ background:var(--coral-soft, #F5E3C0); border-color:var(--coral); color:var(--coral); }

.req-empty{ text-align:center; padding:2.6rem 1rem; color:var(--neutral); }
.req-empty svg{ width:38px; height:38px; stroke:#F5E3C0; fill:none; stroke-width:1.5; margin:0 auto 1rem; }
.req-empty p{ font-size:0.88rem; line-height:1.6; max-width:32ch; margin:0 auto; }

/* ==========================================================================
   5. FORMS
   ========================================================================== */

.b2b-form-wrap{
  position:fixed; inset:0; z-index:210; display:none;
  background:rgba(97,64,2,0.72); backdrop-filter:blur(6px);
  overflow-y:auto; padding:2.5rem 1.2rem;
}
.b2b-form-wrap.open{ display:block; }
.b2b-form{
  background:var(--cream); border-radius:22px; max-width:820px; margin:0 auto;
  padding:2.2rem 2.3rem 2.4rem; position:relative;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.6);
}
@media (max-width:640px){ .b2b-form{ padding:1.6rem 1.3rem 1.8rem; border-radius:18px; } }
.b2b-form h2{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.75rem; line-height:1.15; max-width:22ch; }
.b2b-form > p.intro{ font-size:0.9rem; line-height:1.62; color:var(--neutral); margin-top:0.7rem; max-width:56ch; }

.fset{ border:0; padding:0; margin:1.9rem 0 0; }
.fset legend{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.66rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--terracotta);
  padding:0; margin-bottom:1rem;
}
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:0.9rem 1.1rem; }
@media (max-width:640px){ .frow{ grid-template-columns:1fr; } }
.fld{ display:flex; flex-direction:column; gap:0.32rem; }
.fld.wide{ grid-column:1 / -1; }
.fld label{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.7rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink);
}
.fld label .opt{ color:var(--neutral); font-weight:600; text-transform:none; letter-spacing:0; font-size:0.72rem; }
.fld label .req{ color:var(--terracotta); }
.fld input, .fld select, .fld textarea{
  font-family:'Quicksand', sans-serif; font-size:0.92rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:0.68rem 0.85rem; width:100%;
}
.fld textarea{ min-height:5.2rem; resize:vertical; line-height:1.55; }
.fld input:focus, .fld select:focus, .fld textarea:focus{ outline:2px solid var(--turmeric); outline-offset:1px; border-color:var(--turmeric); }
.fld input[aria-invalid="true"], .fld select[aria-invalid="true"], .fld textarea[aria-invalid="true"]{ border-color:var(--coral); background:#FFFFFF; }
.fld .err{ font-size:0.75rem; color:#D88F04; font-weight:600; display:none; }
.fld .err.on{ display:block; }
.fld .hint{ font-size:0.75rem; color:var(--neutral); line-height:1.45; }

/* Ingredients being requested, shown inside the form */
.f-ings{
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:1rem 1.1rem; display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center;
}
.f-ings .none{ font-size:0.86rem; color:var(--neutral); }

.consent{
  display:flex; gap:0.75rem; align-items:flex-start;
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:1rem 1.1rem; margin-top:1.6rem;
}
.consent input{ flex:none; width:19px; height:19px; margin-top:0.15rem; accent-color:var(--green); }
.consent label{ font-size:0.85rem; line-height:1.6; color:var(--ink); }
.consent.invalid{ border-color:var(--coral); background:#FFFFFF; }

.f-actions{ display:flex; gap:0.8rem; align-items:center; flex-wrap:wrap; margin-top:1.7rem; }
.f-status{ font-size:0.85rem; line-height:1.55; color:var(--neutral); flex:1 1 220px; }
.f-status.err{ color:#D88F04; font-weight:600; }

/* Success panel */
.f-done{ text-align:center; padding:1.5rem 0 0.5rem; }
.f-done .tick{
  width:58px; height:58px; border-radius:50%; background:var(--green-soft);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem;
}
.f-done .tick svg{ width:27px; height:27px; stroke:var(--green); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.f-done h2{ margin:0 auto; }
.f-done p{ font-size:0.92rem; line-height:1.65; color:var(--neutral); margin:0.9rem auto 0; max-width:48ch; }

/* ==========================================================================
   6. INGREDIENT DETAIL PAGE (generated pages at /ingredients/<slug>/)
   ========================================================================== */

.ing-detail-hero{
  background:linear-gradient(160deg,var(--green-soft),var(--cream));
 
}
.ing-detail-hero .wrap{ padding-top:2.2rem; padding-bottom:2.8rem; }

.crumbs{
  display:flex; gap:0.45rem; align-items:center; flex-wrap:wrap;
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.75rem;
  color:var(--neutral); margin-bottom:1.4rem;
}
.crumbs a{ color:var(--terracotta); }
.crumbs a:hover{ text-decoration:underline; }
.crumbs span.sep{ opacity:0.5; }

.ing-detail-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:2.6rem; align-items:start; }
@media (max-width:860px){ .ing-detail-grid{ grid-template-columns:1fr; gap:1.8rem; } }
.ing-hero-media{
  border-radius:20px; overflow:hidden; border:0;
  background:var(--white); aspect-ratio:1/1;
}
.ing-hero-media img, .ing-hero-media svg{ width:100%; height:100%; object-fit:cover; display:block; }

.ing-detail-grid h1{
  font-family:'Quicksand', sans-serif; font-weight:500; line-height:1.1;
  font-size:clamp(1.9rem, 4vw, 2.7rem); margin-top:0.5rem;
}
.ing-detail-grid .latin{
  font-family:'Quicksand', sans-serif; font-style:normal; font-size:1.05rem;
  color:var(--neutral); margin-top:0.4rem;
}
.ing-detail-grid .lede{ margin-top:1.1rem; }
.ing-detail-cta{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-top:1.8rem; }

/* Spec table */
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th, .spec-table td{
  text-align:left; padding:0.85rem 0;
  vertical-align:top;
}
.spec-table th{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.68rem;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--neutral);
  width:40%; padding-right:1.2rem;
}
.spec-table td{ font-size:0.92rem; line-height:1.55; color:var(--ink); }
.spec-table tr:last-child th, .spec-table tr:last-child td{ border-bottom:0; }
@media (max-width:560px){
  .spec-table th, .spec-table td{ display:block; width:100%; border-bottom:0; padding:0.2rem 0; }
  .spec-table th{ padding-top:0.9rem; }
  .spec-table td{ padding-bottom:0.9rem; }
}

.spec-src{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.66rem;
  color:#000000; display:block; margin-top:0.2rem;
}

.doc-card{
  background:var(--cream-2); border:0; border-radius:16px;
  padding:1.5rem 1.6rem;
}
.doc-card h3{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.2rem; margin-bottom:0.6rem; }
.doc-card ul{ list-style:none; margin:0.9rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.55rem; }
.doc-card li{ display:flex; gap:0.6rem; align-items:flex-start; font-size:0.87rem; line-height:1.55; color:var(--neutral); }
.doc-card li::before{ content:""; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--turmeric); margin-top:0.52rem; }

/* Sourcing story block */
.sourcing-card{
  border-radius:20px; overflow:hidden; border:0;
  background:linear-gradient(155deg,#000000,#000000 65%,#000000); color:#F5E3C0;
  padding:2rem 2.1rem;
}
@media (max-width:640px){ .sourcing-card{ padding:1.5rem 1.4rem; } }
.sourcing-card h3{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.5rem; color:#FFFFFF; }
.sourcing-card p{ font-size:0.92rem; line-height:1.65; color:#D88F04; margin-top:0.8rem; }
.sourcing-card .sc-rows{
  display:grid; gap:1rem; margin-top:1.6rem;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
@media (max-width:640px){ .sourcing-card .sc-rows{ grid-template-columns:1fr; } }
.sourcing-card .sc-row{
  background:rgba(245,227,192,0.07); border:0;
  border-radius:13px; padding:0.95rem 1rem;
}
.sourcing-card .sc-row .k{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.63rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--turmeric); margin-bottom:0.3rem;
}
.sourcing-card .sc-row .v{ font-size:0.87rem; line-height:1.5; color:#F5E3C0; }
.sourcing-card .sc-links{ display:flex; gap:0.7rem; flex-wrap:wrap; margin-top:1.6rem; }

.circular-note{
  background:var(--lime-soft); border:0; border-radius:14px;
  padding:1rem 1.2rem; font-size:0.88rem; line-height:1.6; color:#000000;
  display:flex; gap:0.8rem; align-items:flex-start; margin-top:1.2rem;
}
.circular-note svg{ flex:0 0 18px; width:18px; height:18px; stroke:#000000; fill:none; stroke-width:1.9; margin-top:0.12rem; }

/* Related ingredients */
.rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media (max-width:900px){ .rel-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .rel-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   7. STANDALONE PAGE CHROME (generated ingredient pages only)
   ========================================================================== */

.mini-head{
  position:sticky; top:0; z-index:50;
  background:rgba(245,227,192,0.96); backdrop-filter:blur(10px);
 
}
.mini-head .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.2rem; padding-top:0.7rem; padding-bottom:0.7rem;
}
.mini-head .brand{ display:flex; align-items:center; gap:0.7rem; }
.mini-head .brand img{
  width:44px; height:44px; border-radius:50%; background:#FFFFFF; padding:5px;
  box-shadow:0 4px 14px -6px rgba(97,64,2,0.35); object-fit:contain;
}
.mini-head .brand b{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.9rem; letter-spacing:0.02em;
}
.mini-nav{ display:flex; align-items:center; gap:0.25rem; flex-wrap:wrap; }
.mini-nav a{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.84rem;
  padding:0.55rem 0.8rem; border-radius:8px; color:var(--ink);
}
.mini-nav a:hover{ background:var(--cream-2); }
@media (max-width:760px){ .mini-nav a.hide-sm{ display:none; } }

.mini-foot{ background:var(--ink); color:#F5E3C0; padding:2.6rem 0 1.4rem; margin-top:0; }
.mini-foot .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-bottom:1.8rem; border-bottom:1px solid #000000; }
@media (max-width:760px){ .mini-foot .cols{ grid-template-columns:1fr; gap:1.5rem; } }
.mini-foot h5{
  font-family:'Quicksand',sans-serif; font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase; color:#D88F04; margin-bottom:0.8rem;
}
.mini-foot a, .mini-foot p{ display:block; font-size:0.85rem; color:#000000; margin-bottom:0.5rem; line-height:1.55; }
.mini-foot a:hover{ color:var(--turmeric); }
.mini-foot .bottom{ padding-top:1.2rem; font-size:0.75rem; color:#D88F04; display:flex; justify-content:space-between; gap:0.8rem; flex-wrap:wrap; }