/* ============================================================
   From Nature With Love — design system
   Tokens extracted directly from the Sketch handoff:
   colors from the artboard fills, type from the font descriptors,
   1600px artboard → 1440px content container.
   ============================================================ */
:root{
  /* Core palette (Sketch fill colors, by frequency) */
  --ink:#484E47;          /* primary text / dark olive */
  --ink-deep:#3E453D;     /* darkest surface */
  --ink-soft:#4D4D4D;
  --muted:#5C645B;       /* WCAG AA secondary text on all FNWL light grounds */
  --rule:#D8D8D8;
  --rule-soft:#E3E2D7;
  --control-border:#7B7E75; /* >=3:1 non-text contrast on FNWL light grounds */
  --control-border-soft:#868C82; /* softer outlined controls; >=3:1 on paper/paper-2 */

  --green:#698264;        /* primary brand green */
  --green-deep:#5D7059;
  --green-mid:#889D7F;
  --green-light:#B8CEAE;
  --sage-wash:var(--cream-2); /* matches newsletter background */

  --bronze:#7E5829;       /* primary accessible bronze for controls / focus / mixed backgrounds */
  --bronze-soft:#8C6538;  /* lighter bronze for small labels on paper/paper-2; WCAG AA */
  --bronze-deep:#68451F;  /* stronger bronze hover/accent */

  --cream:#DFDFC9;        /* section background */
  --cream-2:#E0DFCA;
  --cream-3:#EFEEDD;
  --paper:#FFFDF2;        /* page background */
  --paper-2:#F7F4E3;
  --white:#FFFFFF;        /* text/rules on dark only — never a page or panel ground */
  --sale:#C71C48;

  --container:1460px;      /* product grid spans 72→1531 on the 1600 artboard */
  --container-wide:1512px; /* header spans 41→1552 */
  --gutter:32px;
  --radius:2px;
  --radius-lg:4px;

  --serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --shadow-card:0 2px 14px rgba(72,78,71,.08);
  --shadow-pop:0 12px 44px rgba(72,78,71,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.22;margin:0 0 .5em;color:var(--ink)}
/* Sizes taken from the artboard text layers, not chosen. */
h1{font-size:55px;line-height:62px;letter-spacing:-.021em}   /* 55/62, -1.146px */
h2{font-size:42px;line-height:52px}
h3{font-size:24px;line-height:38px}
h4{font-size:19px}
.h-cta{font-size:48px;line-height:55px}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- Typographic utilities ---------- */
.eyebrow{
  font-family:var(--sans);font-weight:900;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze-soft);margin:0 0 12px
}
.eyebrow-light{color:var(--green-light)}
.lede{font-size:24px;line-height:38px;color:var(--ink)}
.small{font-size:14px}
.crumbs{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--bronze-soft);margin-bottom:14px}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:var(--muted)}
.crumbs .crumb-sep{color:var(--muted)}


/* ---------- Buttons ---------- */
/* Measured from the artboard: 204x61, label inset 27px, 1px rule at 143px,
   arrow centred in the remaining 61px cell. */
.btn{
  display:inline-flex;align-items:stretch;min-height:61px;
  font-weight:900;font-size:14px;letter-spacing:.083em;text-transform:uppercase;
  background:var(--paper);border:1px solid var(--control-border-soft);color:var(--ink);
  border-radius:0;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease);
  text-align:left;padding:0;
}
.btn > span:first-child{display:flex;align-items:center;padding:0 27px}
.btn::after{
  content:"→";display:flex;align-items:center;justify-content:center;
  width:59px;flex:0 0 59px;border-left:1px solid var(--rule);color:var(--bronze);font-size:16px;
}
.btn:hover{background:var(--cream-3)}
.btn-solid{background:var(--green-deep);border-color:var(--green-deep);color:var(--white)}
.btn-solid::after{border-left-color:rgba(255,255,255,.34);color:var(--cream)}
.btn-solid:hover{background:var(--ink-deep);border-color:var(--ink-deep)}
.btn-onimage{background:var(--paper-2);border-color:var(--paper-2)}
.btn-onimage::after{border-left-color:var(--ink)}
.btn-light{background:transparent;border-color:var(--white);color:var(--white)}
.btn-light::after{border-left-color:rgba(255,255,255,.5);color:var(--white)}
.btn-light:hover{background:rgba(255,255,255,.12)}
.btn-outline{background:transparent}
.btn-sm{min-height:44px;font-size:12px}
.btn-sm > span:first-child{padding:0 18px}
.btn-sm::after{width:42px;flex-basis:42px}
.btn-block{width:100%}
.btn-block > span:first-child{flex:1}
.btn-plain::after{content:none}
.btn-plain > span:first-child{justify-content:center;flex:1}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link-arrow{font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);display:inline-flex;gap:7px;align-items:center}
.link-arrow:hover{color:var(--bronze-deep);gap:11px;transition:gap .18s var(--ease)}

/* ---------- Header ---------- */
.utility{background:var(--paper);font-size:12px;letter-spacing:.04em;border-bottom:1px solid var(--rule-soft)}
.utility .wrap{display:flex;justify-content:flex-end;gap:26px;align-items:center;height:34px;max-width:var(--container-wide)}
.utility a{color:var(--muted);font-weight:700}
.utility a:hover{color:var(--bronze)}
.masthead{background:var(--paper);position:sticky;top:0;z-index:80}
.masthead > .wrap{display:flex;align-items:center;height:113px;max-width:var(--container-wide);gap:0}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo-img{width:232px;height:auto;display:block}
.logo-img-footer{width:312px;margin:0 auto}
.masthead > .wrap > nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.mainnav{display:flex;gap:56px;justify-content:center;margin:0;padding:0;min-width:0;flex-wrap:nowrap}
.mainnav > li{list-style:none}
/* The mega panel spans the full header, so it must be positioned against
   .masthead (position:sticky = a containing block), NOT the nav item.
   Making the <li> relative constrains the panel to the width of its
   trigger and collapses the column grid. */
.navlink{
  display:flex;flex-direction:column;align-items:center;gap:5px;height:113px;justify-content:center;
  font-weight:900;font-size:14px;letter-spacing:.083em;text-transform:uppercase;color:var(--ink);
  border:0;background:none;cursor:pointer;padding:0
}
.navlink .caret{font-size:9px;color:var(--bronze)}
.navlink:hover,.navlink[aria-expanded="true"]{color:var(--bronze)}
.headtools{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:900;letter-spacing:.083em;text-transform:uppercase;flex:0 0 auto;white-space:nowrap}
.headtools a:hover{color:var(--bronze)}
.headtools .search{font-size:26px;line-height:1;transform:translateY(-2px);padding:2px 6px;background:none;border:0;cursor:pointer;color:var(--ink)}
.headtools .search:hover{color:var(--bronze)}

/* Search panel */
.searchbar{display:none;border-bottom:1px solid var(--rule-soft);background:var(--paper-2)}
.searchbar[data-open="true"]{display:block}
.searchbar .wrap{max-width:var(--container-wide);padding-top:24px;padding-bottom:28px}
.searchbar form{display:flex;gap:0;align-items:stretch;border:1px solid var(--control-border-soft);border-radius:0;background:var(--paper)}
.searchbar input{border:0;border-radius:0;background:transparent;font-size:19px;padding:18px 22px;flex:1}
.searchbar input:focus{outline:none}
.searchbar input:focus-visible{outline:none}
.searchbar form:focus-within{outline:2px solid var(--bronze-soft);outline-offset:2px;border-radius:0}
.searchbar .go{background:var(--green-deep);color:var(--white);border:0;padding:0 30px;font-weight:900;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.searchbar .go:hover{background:var(--ink-deep)}
.searchbar .hint{font-size:13px;color:var(--muted);margin:12px 0 0}
.results{list-style:none;margin:20px 0 0;padding:0;max-height:380px;overflow-y:auto;
  border-top:1px solid var(--rule-soft)}
.results li{border-bottom:1px solid var(--rule-soft)}
.results a{display:flex;justify-content:space-between;gap:20px;padding:13px 4px;align-items:baseline}
.results a:hover{background:var(--cream-3)}
.results .nm{font-weight:700}
.results .ct{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pill{background:var(--bronze);color:#fff;border-radius:999px;padding:1px 7px;font-size:10px;margin-left:6px}
.burger{display:none;background:none;border:0;cursor:pointer;font-size:22px;line-height:1;padding:6px}

/* ---------- Mega menu ---------- */
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--paper);
  max-height:calc(100vh - 122px);overflow-y:auto;
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--cream);box-shadow:var(--shadow-pop);
  z-index:90;display:none
}
.mega[data-open="true"]{display:block}
.mega > .wrap{display:block;height:auto;max-width:var(--container-wide)}
.mega-inner{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 300px;gap:34px;padding:38px 0 46px;align-items:start}
.mega .mega-heading{font-family:var(--sans);font-weight:900;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-soft);margin:0 0 14px}
.mega ul{list-style:none;margin:0;padding:0}
.mega li{margin-bottom:9px}
.mega li a{font-size:15px;color:var(--ink)}
.mega li a:hover{color:var(--bronze);text-decoration:underline}
.mega-feature{background:var(--cream-3);padding:26px;border-radius:var(--radius-lg)}
.mega-feature .mega-heading{color:var(--ink);font-family:var(--serif);font-size:19px;text-transform:none;letter-spacing:0}
.mega-col + .mega-col-group{margin-top:26px}

/* ---------- Mobile menu ---------- */
.mobilemenu{display:none;position:fixed;inset:0;background:var(--paper);z-index:200;overflow-y:auto;padding-bottom:60px}
.mobilemenu[data-open="true"]{display:block}
.mobilemenu-top{display:flex;justify-content:space-between;align-items:center;height:72px;border-bottom:1px solid var(--rule-soft);padding:0 20px}
.mobilemenu details{border-bottom:1px solid var(--rule-soft)}
.mobilemenu summary{padding:18px 20px;font-weight:900;font-size:14px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.mobilemenu summary::-webkit-details-marker{display:none}
.mobilemenu details ul{list-style:none;margin:0;padding:0 20px 18px}
.mobilemenu details li{padding:9px 0;border-top:1px solid var(--rule-soft)}
.mobilemenu-direct{border-bottom:1px solid var(--rule-soft)}
.mobilemenu-direct a{
  display:block;
  padding:18px 20px;
  font-weight:900;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- Promo ribbon ---------- */
.ribbon{background:var(--cream);color:var(--ink);text-align:center;padding:18px 20px;min-height:90px}
.ribbon b{font-size:20px;line-height:28px}
.ribbon p{font-size:14px;color:var(--ink-soft);margin:4px 0 0}

/* ---------- Hero ---------- */
/* The artboard hero sits on the page ground, not on a dark image. */
.hero{position:relative;background:var(--paper);color:var(--ink);overflow:hidden}
.hero-leaves{position:absolute;left:-90px;top:40px;width:430px;opacity:.5;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:600px 1fr;gap:110px;
  align-items:start;padding:100px 32px 120px}
.hero h1{max-width:12ch;margin-bottom:34px}
.hero .lede{max-width:34ch;margin-bottom:36px}
.hero-figure{position:relative;height:612px}
.hero-shot{width:600px;max-width:100%;height:612px;object-fit:cover;background:var(--cream)}
.hero-figure{display:flex;justify-content:flex-start}
.hero-usda{width:56px;height:auto;position:absolute;left:22px;bottom:96px;z-index:2}
.hero-badge .price{font-family:var(--serif);font-size:22px}

/* Page hero (interior) */
.pagehero{background:var(--paper-2);border-bottom:1px solid var(--rule-soft);padding:56px 0 60px;text-align:center}
.pagehero.left{text-align:left}
.pagehero h1{margin-bottom:16px}
.pagehero .lede{max-width:70ch;margin:0 auto}
.pagehero.left .lede{margin:0}

/* ---------- Sections ---------- */
.section{padding:86px 0}
.section-tight{padding:56px 0}
.bg-cream{background:var(--cream-3)}
.bg-paper2{background:var(--paper-2)}
.bg-sage-wash{background:var(--sage-wash)}
.bg-white{background:var(--paper)}   /* the artboards never use pure white as a ground */
.bg-dark{background:var(--ink-deep);color:#EFEEDD}
.bg-dark h2,.bg-dark h3{color:#fff}
.section-head{text-align:center;max-width:880px;margin:0 auto 56px}
.section-head .lede{margin-top:10px}
.section-head.left{text-align:left;margin-left:0}

/* ---------- Product grid ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:39px}  /* 373 pitch − 334 card */
.pgrid-3{grid-template-columns:repeat(3,1fr)}
/* 334x419 on the artboard: image well, 1px rule, then a 73px split footer. */
.card{background:var(--paper-2);border:0;border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .2s var(--ease)}
.card:hover{box-shadow:var(--shadow-card)}
.card-media{position:relative;aspect-ratio:334/346;background:transparent;overflow:hidden}
.card-img{width:100%;height:100%;object-fit:contain;padding:26px;transition:transform .4s var(--ease)}
.card:hover .card-img{transform:scale(1.04)}
.postcard .card-img{object-fit:cover;padding:0}
.card-body{display:flex;align-items:stretch;border-top:1px solid var(--cream);min-height:73px;flex:1}
.card-name{flex:1;display:flex;align-items:center;padding:20px 22px;margin:0;
  font-family:var(--sans);font-weight:900;font-size:14px;line-height:21px;letter-spacing:.083em;
  text-transform:uppercase;color:var(--ink-soft)}
.card:hover .card-name{color:var(--bronze)}
.card-price{flex:0 0 107px;display:flex;align-items:center;padding:20px 0 20px 22px;
  border-left:1px solid var(--cream);font-weight:900;font-size:14px;letter-spacing:.083em;color:var(--ink-soft)}
.card-price s{display:block;color:var(--muted);font-weight:400;font-size:12px}
.card-body .card-cat{position:static;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze-soft);margin:0 0 8px;background:none;padding:0}
.postcard .card-body{display:block;padding:20px 22px 24px;border-top:1px solid var(--cream);min-height:0}
.postcard .card-name{display:block;padding:0;font-family:var(--serif);font-size:19px;line-height:27px;
  letter-spacing:0;text-transform:none;color:var(--ink)}
.tags{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.tag{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:2px;background:var(--ink);color:#fff}
.tag-sale{background:var(--sale)}
.tag-new{background:var(--bronze)}
.tag-org{background:var(--green-deep)}
.tag-bulk{background:var(--green-mid);color:var(--ink-deep)}

/* ---------- Category layout ---------- */
.cat-layout{display:grid;grid-template-columns:270px 1fr;gap:46px;align-items:start}
.facets h3{font-family:var(--sans);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-soft);margin-bottom:16px}
.facet{border-top:1px solid var(--rule-soft);padding:18px 0}
.facet h4{font-family:var(--sans);font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.facet label{display:flex;gap:10px;align-items:center;font-size:14px;padding:5px 0;cursor:pointer}
.facet input{accent-color:var(--green-deep);width:15px;height:15px}
fieldset.facet{
  min-width:0;
  margin:0;
  padding:18px 0;
  border:0;
  border-top:1px solid var(--rule-soft);
}
fieldset.facet legend{
  padding:0;
  margin:0 0 12px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.toolbar .count{font-size:14px;color:var(--muted)}
select,input[type=text],input[type=email],input[type=tel],input[type=number],textarea{
  font:inherit;font-size:15px;padding:13px 14px;border:1px solid var(--control-border);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);width:100%}
textarea{min-height:150px;resize:vertical}
label.field{display:block;margin-bottom:18px}
label.field > span{display:block;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}

/* ---------- Product detail ---------- */
.pdp-top{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:44px 0 66px;align-items:start}
.pdp-media{aspect-ratio:1/1;border-radius:var(--radius-lg);background:var(--paper-2);
  border:1px solid var(--rule-soft);overflow:hidden}
.pdp-img{width:100%;height:100%;object-fit:contain;padding:34px}
.pdp h1{font-size:42px;margin-bottom:14px}
.price-range{font-size:22px;font-weight:900;margin:0 0 22px}
.stars{color:var(--bronze);letter-spacing:2px}
.buybox{border:1px solid var(--rule-soft);background:var(--paper);border-radius:var(--radius-lg);padding:24px;margin-bottom:22px}
.buyrow{display:grid;grid-template-columns:1fr 108px;gap:14px;margin-bottom:16px}
.notice{background:var(--paper-2);border-left:3px solid var(--green-mid);padding:14px 16px;font-size:13px;color:var(--ink-soft);border-radius:0 2px 2px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.chip{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--green-mid);
  color:var(--green-deep);padding:6px 11px;border-radius:999px}
.spec{list-style:none;margin:0;padding:0;font-size:15px}
.spec li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.spec b{flex:0 0 42%;font-weight:900;font-size:13px;letter-spacing:.04em}
.twocol{display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:start}
.docstrip{background:var(--green-deep);color:#fff;border-radius:var(--radius-lg);padding:38px 44px;text-align:center;margin:14px 0 60px}
.docstrip h3{color:#fff;margin-bottom:22px}
.doclinks{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.doclink{background:var(--paper);color:var(--ink);padding:15px 22px;border-radius:var(--radius);font-weight:900;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:flex;gap:12px;align-items:center;min-width:250px}
.doclink span{flex:1;text-align:left}
.doclink-icon{width:22px;height:22px;flex:0 0 22px}
.doclink-ext{width:13px;height:13px;flex:0 0 13px;opacity:.55}
.doclink:hover{background:var(--cream-3)}
.tick{list-style:none;margin:0;padding:0}
.tick li{position:relative;padding:5px 0 5px 22px;font-size:15px}
.tick li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--green-mid)}
.advisory{background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:var(--radius-lg);padding:30px 32px}
.advisory h4{font-family:var(--sans);font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.advisory p{font-size:14px;color:var(--ink-soft)}
.review{border-top:1px solid var(--rule-soft);padding:22px 0}
.review-meta{font-size:12px;color:var(--muted);margin-bottom:8px}

/* ---------- Bulk inquiry ---------- */
.bulkbox{border:1.5px solid var(--green-mid);background:var(--paper-2);border-radius:var(--radius-lg);padding:26px;margin-bottom:22px}
.bulkbox h3{font-family:var(--sans);font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);margin-bottom:6px}
.bulkbox .hint{font-size:13px;color:var(--ink-soft);margin-bottom:18px}
.bulkrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--rule-soft)}
.bulkrow .lbl{font-weight:700;font-size:15px}
.bulkrow .sub{font-size:12px;color:var(--muted)}
.inquiry-table{width:100%;border-collapse:collapse;font-size:15px}
.inquiry-table th{text-align:left;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:0 14px 12px 0;border-bottom:1px solid var(--rule)}
.inquiry-table td{padding:16px 14px 16px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.empty{text-align:center;padding:70px 20px;border:1px dashed var(--rule);border-radius:var(--radius-lg);color:var(--muted)}

/* ---------- Cart / checkout ---------- */
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.cart-table td{padding:20px 12px 20px 0;border-bottom:1px solid var(--rule-soft)}
.totals{background:var(--paper-2);border-radius:var(--radius-lg);padding:26px 28px}
.totals dl{display:grid;grid-template-columns:1fr auto;gap:12px 20px;margin:0}
.totals dt{font-size:15px}
.totals dd{margin:0;text-align:right;font-weight:900}
.totals .grand{border-top:1px solid var(--rule);padding-top:14px;margin-top:6px;font-size:19px}
.steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 36px;flex-wrap:wrap}
.steps li{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:9px 16px;border:1px solid var(--rule);border-radius:999px}
.steps li[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Editorial / blog ---------- */
.postcard{display:flex;flex-direction:column}
.postcard .card-media{aspect-ratio:16/11}
.post-body{max-width:760px;margin:0 auto}
.post-body h2{font-size:28px;margin-top:44px}
.post-body ul,.post-body ol{padding-left:22px}
.post-body li{margin-bottom:8px}
.callout{background:var(--paper-2);border-left:3px solid var(--bronze);padding:22px 26px;border-radius:0 4px 4px 0;margin:32px 0}

/* ---------- Split / blurbs ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split-top{align-items:start}
.split-media{aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--cream-3)}
.split-img{width:100%;height:100%;object-fit:cover}
.blurbs{display:grid;gap:26px}
.blurbs{gap:46px}
.blurb{border:0;padding:0;display:flex;gap:44px;align-items:flex-start}
.blurb-icon{width:70px;height:70px;flex:0 0 70px;object-fit:contain;margin-top:2px}
.blurb h3{margin-bottom:8px}
.blurb-link{font-family:var(--serif);font-size:24px;line-height:36px;font-weight:700;color:var(--ink)}
.blurb-link:hover{color:var(--bronze)}
.blurb p{font-size:16px;line-height:26px}
.blurb p{font-size:15px;color:var(--ink-soft);margin:0}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.tile{background:var(--paper);border:1px solid var(--rule-soft);border-radius:var(--radius-lg);padding:32px}
.tile h3{font-size:20px}
.tile p{font-size:15px;color:var(--ink-soft);margin:0}

/* ---------- Testimonial ---------- */
.testimonial{position:relative;max-width:1210px;margin:46px auto 0;text-align:center;
  background:var(--paper);border:2px solid #E5E4CF;padding:74px 90px 56px}
.testimonial .mark{position:absolute;top:-46px;left:50%;transform:translateX(-50%);
  font-family:var(--serif);font-size:76px;line-height:1;color:var(--green-mid)}
.testimonial .q{font-family:var(--serif);font-size:42px;line-height:48px;margin-bottom:22px}
.testimonial .qsmaller{font-family:var(--serif);font-size:34px;line-height:40px;margin-bottom:22px}
.testimonial p{font-size:16px;line-height:26px;color:var(--ink-soft);font-style:italic;max-width:76ch;margin:0 auto}
.testimonial cite{display:block;margin-top:24px;font-style:normal;font-size:14px;font-weight:900;letter-spacing:.083em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--rule-soft)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{padding:24px 40px 24px 0;font-family:var(--serif);font-size:19px;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:22px;font-family:var(--sans);font-size:24px;color:var(--bronze)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 60px 26px 0;color:var(--ink-soft)}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.member-media{aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;background:var(--cream-2);margin-bottom:14px}
.member-img{width:100%;height:100%;object-fit:cover}
.member:hover .member-img{filter:saturate(1.06)}
.member h4{margin-bottom:2px}
.member p{font-size:14px;color:var(--muted);margin:0}

/* ---------- Full width CTA ---------- */
/* Inset CTA panel: 1211x513, botanical bitmap under a #5D7059 tint. */
.panel-cta{position:relative;max-width:1211px;margin:0 auto;color:#fff;text-align:center;
  padding:85px 60px;overflow:hidden;background:var(--green-deep)}
.panel-cta .panel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.panel-cta > *{position:relative}
.panel-cta h2{color:#fff;font-size:48px;line-height:55px;margin-bottom:18px}
.panel-cta .sub{font-size:24px;line-height:38px;margin-bottom:14px}
.panel-cta p{max-width:64ch;margin:0 auto 26px;font-size:16px;line-height:26px;color:#EFEEDD}
.panel-cta .btn{margin-top:8px}

.cta{position:relative;color:#fff;text-align:center;padding:110px 0;overflow:hidden}
.cta-bg{position:absolute;inset:0;overflow:hidden;background:linear-gradient(115deg,#3E453D,#5D7059 55%,#698264)}
.cta-img{width:100%;height:100%;object-fit:cover;opacity:.5}
.cta-bg::after{content:"";position:absolute;inset:0;background:rgba(62,69,61,.62)}
.cta .wrap{position:relative}
.cta h2{color:#fff;font-size:42px}
.cta p{max-width:52ch;margin:0 auto 32px;color:#EFEEDD}

/* ---------- Newsletter + footer ---------- */
.newsletter{background:var(--cream-2);padding:40px 0}
.newsletter .wrap{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.newsletter p{flex:1 1 340px;margin:0;font-size:15px}
.newsletter form{display:flex;gap:12px;flex:1 1 420px}
.newsletter input{flex:1}

/* Search/newsletter/stock fields use the square control treatment established
   by the redesign. Focus remains clearly visible without the heavier bronze ring. */
.product-search-form input[type=text],
.newsletter input[type=email],
.stock-form input[type=email]{
  border-color:var(--control-border-soft);
  border-radius:0;
}
.product-search-form input[type=text]:focus-visible,
.newsletter input[type=email]:focus-visible,
.stock-form input[type=email]:focus-visible{
  outline:2px solid var(--bronze-soft);
  outline-offset:2px;
  border-radius:0;
}
.footer{background:var(--ink-deep);color:#CFD3C9;padding:66px 0 34px;font-size:14px}
.footer a:hover{color:var(--green-light)}
.footer-brand{text-align:center;margin-bottom:44px}
.footer-brand .logo{color:#fff}
.footcols{display:grid;grid-template-columns:repeat(6,1fr);gap:30px;margin-bottom:44px}
.footcols h2{font-family:var(--sans);font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.footcols ul{list-style:none;margin:0;padding:0}
.footcols li{margin-bottom:9px}
.certrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding:30px 0;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}
.certrow{align-items:center;gap:26px}
.certmark{height:56px;width:auto;object-fit:contain;background:var(--paper);border-radius:3px;padding:5px 8px}
.certnote{text-align:center;font-size:12px;color:#9AA096;margin:18px 0 0}
.legal{padding-top:26px;text-align:center;font-size:12px;color:#9AA096;line-height:1.9}
.disclaimer{max-width:900px;margin:22px auto 0;font-size:11px;color:#868C82;line-height:1.75}

/* ---------- Consolidated homepage refinements ---------- */
/* Integrated from the former prototype-overrides.css. */
.search-icon-svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.search{display:inline-flex;align-items:center;justify-content:center}
.certificate-buttons{display:flex;justify-content:center;flex-wrap:wrap;margin:18px 0 14px}
.certificate-buttons a{border:1px solid rgba(62,69,61,.28);padding:10px 16px;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.06em;text-decoration:none;color:inherit;background:#f7f3e7}
.certificate-buttons a+a{border-left:0}

/* Orbit light footer treatment. */
.footer{background:var(--paper);color:var(--ink);border-top:1px solid var(--rule-soft)}
.footer a{color:var(--ink); text-decoration: underline; }
.footer a:hover{color:var(--bronze-deep);text-decoration:underline}
.footer-brand .logo{color:var(--ink)}
.footcols h2{color:var(--ink)}
.certrow{border-top:1px solid var(--rule-soft);border-bottom:0}
.certmark{background:transparent}
.certnote{color:var(--muted);padding-bottom:24px;margin-bottom:0;border-bottom:1px solid var(--rule-soft)}
.legal,.disclaimer{color:var(--muted)}

/* Orbit-style thin navigation chevrons. */
.navlink .caret{display:inline-block;width:7px;height:7px;margin-left:7px;font-size:0;line-height:0;color:transparent;border-right:1px solid #9a7959;border-bottom:1px solid #9a7959;transform:translateY(-2px) rotate(45deg);transform-origin:center}

/* Final testimonial quote positioning. */
.testimonial .mark{position:absolute;top:0;left:50%;width:auto;height:auto;padding:0 12px;background:var(--paper);transform:translateX(-50%);font-family:var(--serif);font-size:100px;line-height:60px;color:var(--green-mid);text-align:center;z-index:2}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .footcols{grid-template-columns:repeat(3,1fr)}
  .team{grid-template-columns:repeat(3,1fr)}
  .mega-inner{grid-template-columns:repeat(3,1fr)}
  .mega-feature{grid-column:span 3}
}
@media (max-width:940px){
  h1{font-size:38px;line-height:44px}h2{font-size:29px;line-height:36px}
  .lede{font-size:19px;line-height:30px}
  .testimonial .q{font-size:27px;line-height:34px}
  .cta h2{font-size:32px}
  .masthead > .wrap{height:72px}
  .mainnav,.headtools .desk{display:none}
  .burger{display:block}
  .masthead > .wrap{height:72px;justify-content:space-between}
  .logo-img{width:168px}
  .certmark{height:42px}
  .blurb{gap:14px}.blurb-icon{width:42px;height:42px;flex-basis:42px}
  .pdp-top,.twocol,.split,.cat-layout,.hero .wrap{grid-template-columns:1fr;gap:38px}
  .hero-figure{height:auto}.hero-shot{width:100%;height:auto;aspect-ratio:600/612}
  .hero-leaves{display:none}
  .testimonial{padding:60px 26px 40px}
  .panel-cta{padding:56px 24px}.panel-cta h2{font-size:32px;line-height:38px}
  .trio{grid-template-columns:1fr}
  .section{padding:60px 0}
  .hero .wrap{padding:76px 24px 92px}
  .hero-badge{position:static;margin-top:34px;max-width:none}
  .facets{border:1px solid var(--rule-soft);border-radius:4px;padding:20px}
}
@media (max-width:680px){
  :root{--gutter:20px}
  .pgrid,.pgrid-3,.team{grid-template-columns:repeat(2,1fr)}
  .footcols{grid-template-columns:repeat(2,1fr)}
  .newsletter form{flex-direction:column}
  .buyrow{grid-template-columns:1fr}
  .cart-table thead{display:none}
  .cart-table tr{display:grid;grid-template-columns:1fr auto;padding:14px 0;border-bottom:1px solid var(--rule-soft)}
  .cart-table td{border:0;padding:3px 0}
}

/* Intermediate desktop / tablet-landscape refinement.
   Prevents the full desktop header and hero from becoming cramped before the mobile breakpoint. */
@media (min-width:941px) and (max-width:1320px){
  :root{--gutter:28px}
  .masthead > .wrap{height:96px;gap:18px}
  .logo-img{width:205px}
  .mainnav{gap:30px}
  .navlink{height:96px;font-size:13px;letter-spacing:.065em}
  .headtools{gap:16px;font-size:13px;letter-spacing:.055em}
  .headtools .search{padding-left:2px;padding-right:2px}

  .hero-leaves{left:-105px;top:58px;width:390px}
  .hero .wrap{grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:clamp(48px,6vw,80px);padding:82px 28px 96px;align-items:start}
  .hero h1{font-size:clamp(44px,4.25vw,55px);line-height:1.12;max-width:11.5ch;margin-bottom:28px}
  .hero .lede{font-size:clamp(19px,1.75vw,23px);line-height:1.55;max-width:32ch;margin-bottom:30px}
  .hero-figure{height:auto;min-width:0}
  .hero-shot{width:100%;height:auto;aspect-ratio:600/612;object-fit:cover}
  .hero-usda{left:18px;bottom:10%}
}

@media (max-width:650px){
  .certificate-buttons{gap:8px}
  .certificate-buttons a{border:1px solid rgba(62,69,61,.28)!important}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---------- iPhone / narrow-phone homepage refinements ----------
   Reassessed against iPhone 16 Pro screenshots, September 2026. */
@media (max-width:680px){
  /* Header: preserve the two utility links but give the logo/tools clearer separation. */
  .masthead > .wrap{padding-left:20px;padding-right:20px;gap:18px}
  .logo-img{width:150px}
  .headtools{gap:18px;font-size:13px;letter-spacing:.055em}

  /* The original tablet/mobile spacing was too generous on a phone. */
  .hero .wrap{padding:38px 20px 44px;gap:30px}
  .hero h1{margin-bottom:24px}
  .hero .lede{margin-bottom:28px}
  .section{padding:42px 0}
  .section-tight{padding:38px 0}
  .section-head{margin-bottom:34px}

  /* Keep merchandise in two columns on phones. Removing the price cell gives
     the product name the full card width while preserving useful browsing density. */
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
  .pgrid-3{grid-template-columns:1fr}
  .card-body{min-height:72px}
  .card-name{padding:15px 34px 15px 16px;font-size:12px;line-height:18px;letter-spacing:.065em;position:relative}
  .card-name a{display:block;width:100%}
  .card-name a::after{content:"›";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:18px;line-height:1;color:var(--ink-soft)}
  .card-price{display:none}
  .card-media{aspect-ratio:1/1}
  .card-img{padding:18px}
  .tags{top:10px;left:10px;gap:5px}
  .tag{font-size:8px;letter-spacing:.1em;padding:4px 7px}

  /* The editorial cards need reading width, not the merchandise-card density. */
  .postcard .card-media{aspect-ratio:16/10}
  .postcard .card-body{padding:18px 18px 22px}
  .postcard .card-name{padding:0;font-size:20px;line-height:28px}
  .postcard .card-name a::after{position:static;display:inline;margin-left:5px;transform:none;font-size:20px}
  .postcard .small{font-size:14px;line-height:1.6}

  /* Supporting content: tighten excess vertical air without making sections crowded. */
  .testimonial{margin-top:28px;padding:52px 22px 34px}
  .testimonial .mark{font-size:82px;line-height:52px}
  .split{gap:30px}
  .blurbs{gap:30px}
  .trio{gap:18px}
  .tile{padding:24px}
  .panel-cta{padding:44px 22px}
  .panel-cta p{margin-bottom:22px}
  .cta{padding:62px 0}
  .cta p{margin-bottom:26px}

  /* Newsletter/footer: equal side gutters and slightly less vertical padding. */
  .newsletter{padding:34px 0}
  .newsletter .wrap{gap:22px}
  .footer{padding:48px 0 28px}
  .footer > .wrap{padding-left:20px;padding-right:20px}
  .footer-brand{margin-bottom:34px}
  .footcols{gap:26px 22px;margin-bottom:34px}
  .certrow{gap:18px;padding:26px 0}
}

/* ---------- Product-card arrow + testimonial spacing refinements ---------- */
/* Product cards: keep the chevron consistently aligned at the right edge on all viewports. */
.card:not(.postcard) .card-name{position:relative;padding-right:42px}
.card:not(.postcard) .card-name a{display:block;width:100%}
.card:not(.postcard) .card-name a::after{
  content:"›";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  line-height:1;
  color:var(--ink-soft);
}
.card:not(.postcard):hover .card-name a::after{color:var(--bronze)}

/* Testimonial: reduce the visual top/bottom air and compensate for the oversized quote mark. */
.testimonial{padding:58px 90px 46px}

@media (max-width:940px){
  .testimonial{padding:46px 26px 34px}
}

@media (max-width:680px){
  .card:not(.postcard) .card-name{padding:15px 34px 15px 16px}
  .card:not(.postcard) .card-name a::after{right:16px;font-size:18px}
  .testimonial{padding:42px 22px 30px}
}

/* ---------- Main Ingredients page refinements ---------- */
.ingredients-featured-head{
  margin-bottom:32px;
}
.ingredients-featured-head h2{
  font-size:29px;
}
.ingredients-seasonal-head{
  margin:58px auto 36px;
}

/* Category/collection tiles: preserve Josh's structure while matching the
   tighter spacing established for the redesigned homepage. */
#main .tile{
  padding:28px;
}
#main .tile h3{
  margin-bottom:8px;
}
#main .tile .small{
  margin-bottom:0;
}

/* The shared product-card rule supplies the right-aligned chevron.
   Prices are intentionally omitted from this page's markup. */

@media (max-width:940px){
  .pagehero{
    padding:42px 0 46px;
  }
  .ingredients-featured-head{
    margin-bottom:26px;
  }
  .ingredients-seasonal-head{
    margin:46px auto 30px;
  }
  #main .tile{
    padding:24px;
  }
}

@media (max-width:680px){
  .pagehero{
    padding:34px 0 38px;
  }
  .pagehero h1{
    margin-bottom:12px;
  }
  .pagehero .lede{
    font-size:18px;
    line-height:28px;
  }

  /* Category and collection cards need reading width on phones, just like
     the editorial cards on the homepage. */
  #main .pgrid-3{
    grid-template-columns:1fr;
    gap:16px;
  }
  #main .tile{
    padding:22px;
  }
  #main .tile h3{
    font-size:19px;
    line-height:28px;
  }
  .ingredients-seasonal-head{
    margin:38px auto 26px;
  }
}

/* Category / collection card interaction */
.tile {
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.tile:hover {
    transform: translateY(-3px);
    border-color: #c9c3b3;
    background-color: #fffdf7;
    box-shadow: 0 8px 20px rgba(62, 69, 61, 0.08);
}

.tile h3 {
    transition: color 0.2s ease;
}

.tile:hover h3 {
    color: var(--bronze-deep);
}

.tile:active {
    transform: translateY(-1px);
    border-color: #c9c3b3;
    background-color: #fffdf7;
}

.tile:focus-visible {
    outline: 2px solid var(--bronze);
    outline-offset: 3px;
}


/* ==========================================================
   VEGETABLE BUTTERS / PRODUCT CATEGORY PAGE
   Add to the end of /wendy/css/site.css
   ========================================================== */

.butter-intro-copy{
  max-width:82ch;
  font-size:17px;
  line-height:1.75;
}

.butter-intro-copy p:last-child{
  margin-bottom:0;
}

.butter-products-section{
  padding-top:34px;
}

.butter-cat-layout{
  align-items:start;
}

.butter-results{
  min-width:0;
}

.butter-toolbar{
  margin-bottom:26px;
}

.butter-sort-label{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.butter-sort-label select{
  width:auto;
  min-width:150px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  padding-right:46px;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%23484E47' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
}

.butter-product{
  min-width:0;
}

.butter-product[hidden]{
  display:none !important;
}

.butter-card{
  height:100%;
}

/* Product name and chevron share the full width of the card.
   This preserves the desktop treatment we established on the homepage. */
.butter-card .card-name{
  width:100%;
  padding:0;
}

.butter-card .card-name a{
  width:100%;
  min-height:73px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px;
  color:inherit;
}

.butter-card .card-name a > span:first-child{
  min-width:0;
}

.butter-card .product-chevron{
  flex:0 0 auto;
  margin-left:auto;
  color:var(--bronze);
  font-size:18px;
  line-height:1;
  transform:translateX(0);
  transition:transform .18s var(--ease);
}

.butter-card:hover .product-chevron{
  transform:translateX(4px);
}

.tag-special{
  background:var(--bronze);
}

.butter-filter-toggle{
  display:none;
  width:100%;
  margin:0 0 20px;
  padding:14px 16px;
  border:1px solid var(--control-border-soft);
  background:var(--paper-2);
  color:var(--ink);
  font:900 13px/1 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  justify-content:space-between;
  align-items:center;
}

.butter-filter-toggle b{
  color:var(--bronze);
  font-size:20px;
  line-height:1;
}

.butter-empty{
  margin-top:20px;
}

@media (max-width:940px){
  .butter-products-section{
    padding-top:28px;
  }

  .butter-filter-toggle{
    display:flex;
  }

  .butter-facets{
    display:none;
    margin-bottom:28px;
  }

  .butter-facets.is-open{
    display:block;
  }

  .butter-cat-layout{
    display:block;
  }

  /* Give category products more width than the generic site grid. */
  .butter-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:680px){
  .butter-intro-copy{
    font-size:16px;
    line-height:1.7;
  }

  .butter-products-section{
    padding-top:22px;
  }

  .butter-toolbar{
    align-items:flex-start;
    margin-bottom:20px;
  }

  .butter-sort-label{
    width:100%;
    justify-content:space-between;
  }

  .butter-sort-label select{
    flex:1;
    max-width:220px;
  }

  /* One product per row on phones: avoids the narrow, choppy cards
     we identified during the homepage mobile review. */
  .butter-product-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .butter-card .card-media{
    aspect-ratio:4/3;
  }

  .butter-card .card-img{
    padding:22px;
  }

  .butter-card .card-name a{
    min-height:68px;
    padding:17px 18px;
    gap:14px;
  }
}


/* ==========================================================
   VEGETABLE BUTTERS - 09/28/2026 refinements
   ========================================================== */
.butter-intro-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:56px;align-items:center}
.butter-intro-copy{max-width:none}
.butter-intro-visual {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--paper) !important;
}

.butter-intro-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: contain;
    mix-blend-mode: multiply; !important;
}

/* One chevron only: supplied by the shared .card-name a::after rule. */
.butter-card .card-name{width:100%;padding-right:42px}
.butter-card .card-name a{display:block;width:100%;min-height:0;padding:20px 22px}
.butter-card .card-name a::after{right:20px}
.butter-card .product-chevron{display:none!important}

.butter-bulk-section{padding-top:0}
.butter-bulkbox{display:flex;align-items:center;justify-content:space-between;gap:36px;padding:30px 34px;margin-bottom:0}
.butter-bulkbox .butter-bulk-copy{max-width:72ch}
.butter-bulkbox h3{margin-bottom:9px}
.butter-bulkbox .hint{margin:0;font-size:15px;line-height:1.6}
.butter-bulkbox .btn{flex:0 0 auto}

@media (max-width:940px){
  .butter-intro-layout{grid-template-columns:1fr 1fr;gap:32px}
  .butter-intro-visual img{min-height:240px}
  .butter-bulkbox{gap:24px;padding:28px}
}
@media (max-width:680px){
  .butter-intro-layout{grid-template-columns:1fr;gap:24px}
  .butter-intro-visual img{min-height:0;aspect-ratio:16/9}
  .butter-card .card-name{padding-right:34px}
  .butter-card .card-name a{padding:17px 18px}
  .butter-card .card-name a::after{right:16px}
  .butter-bulkbox{display:block;padding:24px 22px}
  .butter-bulkbox .hint{margin-bottom:20px}
  .butter-bulkbox .btn{width:100%}
}


/* ---------- Vegetable Butters alignment refinements ---------- */
/* Let the page-hero description extend farther right before wrapping. */
.pagehero.left .butter-pagehero-lede{
  max-width:82ch;
}

/* Align the bulk-pricing panel with the ingredient-results column rather
   than spanning the full page container. */
.butter-bulk-section .wrap{
  padding-left:calc(var(--gutter) + 316px);
}

@media (max-width:940px){
  .butter-bulk-section .wrap{
    padding-left:var(--gutter);
  }
}

@media (max-width:680px){
  .pagehero.left .butter-pagehero-lede{
    max-width:none;
  }
}
/* ---------- Photo Colorization Attempt ---------- */
.butter-card .card-media {
    background: var(--paper-2);
}

.butter-card .card-img {
    mix-blend-mode: multiply;
}






/* ==========================================================
   PRODUCT DETAIL PAGE - development redesign
   ========================================================== */
.pdp-description > :first-child{margin-top:0}
.pdp-description > :last-child{margin-bottom:0}
.pdp .buybox .price-range{font-size:20px;margin-bottom:0}
.pdp .buybox select,
.pdp .buybox input[type=number],
.stock-form input[type=email]{border-color:var(--control-border-soft)}
.pdp .buybox select:disabled,.pdp .buybox option:disabled{color:var(--muted)}
.pdp-subhead{
  font-size:24px;
  line-height:38px;
}
.pdp-product-info .pdp-subhead{margin-bottom:10px}
.docstrip .pdp-subhead{color:var(--white);margin-bottom:22px}
@media (max-width:680px){
  .pdp-top{padding:30px 0 42px}
  .pdp h1{font-size:34px}
  .pdp-img{padding:22px}
  .twocol{gap:34px}
  .spec li{display:grid;grid-template-columns:1fr;gap:3px}
  .spec b{font-size:12px}
  .docstrip{padding:30px 20px;margin-bottom:42px}
  .doclink{min-width:0;width:100%}
}


/* ==========================================================
   PRODUCT DETAIL PAGE - layout refinement 09/29/2026
   Product Info sits below purchase controls; missing product
   images are omitted rather than displaying a placeholder.
   ========================================================== */
.pdp-purchase-column .pdp-product-info{margin-top:34px}
.pdp-purchase-column .pdp-product-info h3{margin-bottom:10px}
.pdp-description-section{padding-top:10px}
.pdp-description-section .pdp-description{max-width:none}
.pdp-top.pdp-top-no-image{grid-template-columns:minmax(0,760px);justify-content:center}
.pdp-top.pdp-top-no-image .pdp-purchase-column{width:100%}

@media (max-width:940px){
  .pdp-purchase-column .pdp-product-info{margin-top:28px}
  .pdp-top.pdp-top-no-image{grid-template-columns:1fr}
}

@media (max-width:680px){
  .pdp-purchase-column .pdp-product-info{margin-top:26px}
  .pdp-description-section{padding-top:0}
}

/* ==========================================================
   PRODUCT DETAIL PAGE - no-image desktop refinement 09/29/2026
   On products without an image, purchase controls and Product Info
   share the desktop row. Mobile/tablet retains the stacked layout.
   ========================================================== */
@media (min-width:941px){
  .pdp-top.pdp-top-no-image{
    grid-template-columns:minmax(0,1fr);
    max-width:none;
    margin-left:0;
    margin-right:0;
  }

  .pdp-top.pdp-top-no-image .pdp-purchase-column{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);
    column-gap:56px;
    align-items:start;
  }

  .pdp-top.pdp-top-no-image .crumbs,
  .pdp-top.pdp-top-no-image h1,
  .pdp-top.pdp-top-no-image .pdp-rating-summary{
    grid-column:1 / -1;
  }

  .pdp-top.pdp-top-no-image form{
    grid-column:1;
  }

  .pdp-top.pdp-top-no-image .pdp-product-info{
    grid-column:2;
    grid-row:auto;
    margin-top:0;
  }
}


/* ---------- Product detail image background treatment ---------- */
/* Match the vegetable-butter product cards: the image's white ground blends into paper-2. */
.pdp-media {
    background: var(--paper-2);
}

.pdp-media .pdp-img {
    mix-blend-mode: multiply;
}


/* ==========================================================
   HEADER NAVIGATION - mobile utility refinement 10/01/2026
   Inquiry removed from the header. On mobile, Account, Cart,
   Search and Menu remain directly accessible.
   ========================================================== */
.mobile-account{display:none}
.account-icon-svg,.burger-icon-svg{
  width:21px;height:21px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.headtools .mobile-account,
.headtools .search,
.headtools .burger{
  align-items:center;justify-content:center;
}

@media (max-width:940px){
  .mobile-account{display:inline-flex}
  .headtools{gap:12px}
  .headtools .mobile-account,
  .headtools .search,
  .headtools .burger{
    width:36px;height:36px;padding:7px;flex:0 0 36px;
    color:var(--ink);background:none;border:0;
  }
  .headtools .search{display:inline-flex;transform:none;font-size:inherit}
  .burger{display:inline-flex;font-size:inherit}
  .cart-link{display:inline-flex;align-items:center;gap:3px}
  .cart-link .pill{margin-left:2px}
}

@media (max-width:680px){
  .masthead > .wrap{padding-left:16px;padding-right:16px;gap:10px}
  .logo-img{width:138px}
  .headtools{gap:6px;font-size:12px;letter-spacing:.045em}
  .headtools .mobile-account,
  .headtools .search,
  .headtools .burger{width:34px;height:34px;padding:6px;flex-basis:34px}
  .account-icon-svg,.burger-icon-svg,.search-icon-svg{width:20px;height:20px}
  .pill{padding:1px 6px;font-size:9px}
}

@media (max-width:390px){
  .logo-img{width:128px}
  .headtools{gap:4px}
  .cart-link{font-size:11px}
}


/* ==========================================================
   MOBILE SEARCH PANEL - compact refinement 10/01/2026
   Keep search usable on phones without an oversized field/button.
   ========================================================== */
@media (max-width:680px){
  .searchbar .wrap{
    padding-top:14px;
    padding-bottom:14px;
  }

  .searchbar form{
    min-height:48px;
    border-width:1px;
  }

  .searchbar input{
    min-width:0;
    height:48px;
    padding:10px 14px;
    font-size:16px;
    line-height:1.25;
  }

  .searchbar .go{
    flex:0 0 auto;
    min-width:96px;
    height:48px;
    padding:0 18px;
    font-size:12px;
    letter-spacing:.11em;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .searchbar .hint{
    margin-top:8px;
  }
}

@media (max-width:390px){
  .searchbar .go{
    min-width:88px;
    padding-left:14px;
    padding-right:14px;
  }
}


/* ==========================================================
   CATEGORY INTRODUCTION - CONTINUE READING
   Native <details>/<summary> treatment for long PAGETEXT copy.
   ========================================================== */

.category-readmore{
  margin-top:18px;
}

.category-readmore > summary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  list-style:none;
  cursor:pointer;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.4;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bronze);
  transition:color .18s var(--ease);
}

.category-readmore > summary::-webkit-details-marker{
  display:none;
}

.category-readmore > summary::after{
  content:"↓";
  font-size:15px;
  line-height:1;
  color:var(--bronze);
}

.category-readmore > summary:hover{
  color:var(--bronze-deep);
}

.category-readmore[open] > summary::after{
  content:"↑";
}

.category-readmore .category-readmore-less{
  display:none;
}

.category-readmore[open] .category-readmore-more{
  display:none;
}

.category-readmore[open] .category-readmore-less{
  display:inline;
}

.category-readmore-content{
  margin-top:22px;
}

.category-readmore-content > :first-child{
  margin-top:0;
}

.category-readmore-content > :last-child{
  margin-bottom:0;
}

.category-readmore > summary:focus-visible{
  outline:2px solid var(--bronze);
  outline-offset:4px;
}

@media (max-width:680px){
  .category-readmore{
    margin-top:16px;
  }

  .category-readmore-content{
    margin-top:18px;
  }
}


/* ==========================================================
   PRODUCT DETAIL - SIZE / PRODUCT ALERTS
   Preserves legacy Catalog/Product alert logic in the redesign.
   ========================================================== */

.pdp-alert-stack{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.pdp-alert-stack:empty{
  display:none;
}

.pdp-size-alert-group{
  display:grid;
  gap:10px;
}

.pdp-size-alert-group[hidden]{
  display:none !important;
}

.pdp-alert{
  margin:0;
  line-height:1.55;
}

.pdp-alert strong{
  color:var(--ink);
}

.pdp-product-alerts{
  margin-top:10px;
}

.pdp-size-hint{
  display:block;
  margin-top:8px;
  color:var(--bronze-deep);
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}

.pdp-size-hint[hidden]{
  display:none !important;
}

#pdp-size option[data-has-alerts="1"]{
  font-weight:700;
}

@media (max-width:680px){
  .pdp-alert-stack{
    gap:8px;
    margin-top:12px;
  }
}


/* ==========================================================
   PRODUCT DETAIL - ALIGN ADD TO CART WITH QTY FIELD
   Keep the existing form-control sizing; reduce only the PDP button.
   ========================================================== */

.pdp .buyrow .btn{
  min-height:53px;
  height:53px;
}


/* ==========================================================
   PRODUCT DETAIL - BACK IN STOCK NOTIFICATION
   ========================================================== */

.pdp-stock-summary{
  margin-top:14px;
}

.pdp-stock-notify{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-top:14px;
  padding:16px 18px;
  background:var(--paper-2);
  border-left:3px solid var(--green-mid);
}

.pdp-stock-notify[hidden]{
  display:none !important;
}

.pdp-stock-notify-copy{
  min-width:0;
}

.pdp-stock-notify-copy strong{
  display:block;
  margin-bottom:2px;
  color:var(--ink);
  font-size:14px;
}

.pdp-stock-notify-copy span{
  display:block;
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.5;
}

.pdp-stock-notify-btn{
  flex:0 0 auto;
  min-width:220px;
}

@media (max-width:680px){
  .pdp-stock-notify{
    display:block;
    padding:16px;
  }

  .pdp-stock-notify-btn{
    width:100%;
    margin-top:14px;
  }
}


/* ==========================================================
   BACK IN STOCK NOTIFICATION PAGE
   ========================================================== */

.stock-panel{
  border:1px solid var(--rule-soft);
  background:var(--paper);
  padding:34px;
}

.stock-panel h1{
  font-size:36px;
  margin-bottom:16px;
}

.stock-product{
  font-size:18px;
  margin-bottom:4px;
}

.stock-size{
  color:var(--muted);
  margin-bottom:18px;
}

.stock-form{
  margin-top:26px;
}

.stock-form .field{
  max-width:520px;
}

.stock-error{
  margin:18px 0;
}

.stock-success .btn{
  margin-top:12px;
}

.stock-similar{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--rule-soft);
}

.stock-similar strong{
  display:block;
  margin-bottom:4px;
}

.stock-similar a{
  color:var(--bronze);
  text-decoration:underline;
}

@media (max-width:680px){
  .stock-panel{
    padding:24px 20px;
  }

  .stock-panel h1{
    font-size:30px;
  }
}


/* ==========================================================
   PRODUCT DETAIL - STOCK NOTIFICATION CLARITY
   ========================================================== */

.pdp-stock-help{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.pdp-stock-help[hidden]{
  display:none !important;
}

.pdp-stock-notify-all{
  margin-top:14px;
}


/* ==========================================================
   PRODUCT DETAIL - CUSTOMER RATINGS & REVIEWS
   ========================================================== */

.pdp-rating-summary{
  margin:0 0 22px;
}

.pdp-rating-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink-soft);
  font-size:13px;
}

.pdp-rating-link:hover{
  color:var(--bronze-deep);
}

.pdp-stars{
  color:var(--green-mid);
  font-size:18px;
  line-height:1;
  letter-spacing:2px;
  white-space:nowrap;
}

.pdp-stars-large{
  font-size:25px;
  margin-bottom:8px;
}

.pdp-reviews-section{
  border-top:1px solid var(--rule-soft);
}

.pdp-reviews-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:36px;
  margin-bottom:34px;
}

.pdp-reviews-head h2{
  margin-bottom:0;
}

.pdp-review-summary-box{
  flex:0 0 auto;
  min-width:190px;
  padding:18px 22px;
  border:1px solid var(--rule-soft);
  background:var(--paper-2);
}

.pdp-review-summary-box strong{
  font-size:16px;
}

.pdp-review-count{
  margin-top:2px;
  color:var(--muted);
  font-size:13px;
}

.pdp-review-list{
  border-top:1px solid var(--rule-soft);
}

.pdp-review{
  padding:28px 0;
  border-bottom:1px solid var(--rule-soft);
}

.pdp-review-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:10px;
}

.pdp-review-rating{
  display:flex;
  align-items:center;
  gap:10px;
}

.pdp-review-rating strong{
  font-size:13px;
}

.pdp-review-date{
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
}

.pdp-review-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px 18px;
  margin-bottom:14px;
  color:var(--muted);
  font-size:13px;
}

.pdp-review-comments{
  max-width:90ch;
  font-size:16px;
  line-height:1.7;
  color:var(--ink-soft);
}

.pdp-review-response{
  max-width:90ch;
  margin-top:18px;
  padding:16px 18px;
  background:var(--paper-2);
  border-left:3px solid var(--green-mid);
  color:var(--ink-soft);
}

.pdp-review-response > strong{
  display:block;
  margin-bottom:4px;
  color:var(--ink);
  font-size:13px;
  letter-spacing:.04em;
}

.pdp-review-response p{
  margin:0;
}

.pdp-reviews-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-top:26px;
}

.pdp-review-disclosure{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--rule-soft);
  max-width:90ch;
  font-size:13px;
  color:var(--muted);
}

.pdp-review-disclosure strong{
  display:block;
  margin-bottom:5px;
  color:var(--ink);
}

@media (max-width:680px){
  .pdp-rating-link{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

  .pdp-reviews-head{
    display:block;
    margin-bottom:26px;
  }

  .pdp-review-summary-box{
    margin-top:20px;
    min-width:0;
  }

  .pdp-review-top{
    display:block;
  }

  .pdp-review-date{
    display:block;
    margin-top:7px;
  }

  .pdp-review-rating{
    flex-wrap:wrap;
  }

  .pdp-reviews-footer{
    display:block;
  }

  .pdp-reviews-footer .btn{
    width:100%;
    margin-top:18px;
  }
}


/* ==========================================================
   PRODUCT REVIEWS - BUTTON RESPONSIVE FIX + ALL REVIEWS PAGE
   ========================================================== */

/* Keep the product-page reviews CTA compact at every viewport.
   It should not inherit full-width mobile button behavior. */
.pdp-reviews-footer{
  align-items:center;
}

.pdp-reviews-footer .btn{
  width:auto !important;
  max-width:100%;
  flex:0 0 auto;
  align-self:flex-start;
}

@media (max-width:680px){
  .pdp-reviews-footer{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .pdp-reviews-footer .btn{
    width:auto !important;
    margin-top:0;
  }
}

/* /soap/comments.asp */
.reviews-page-summary{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
  color:var(--ink-soft);
}

.reviews-page-summary strong{
  color:var(--ink);
}

.reviews-page-wrap{
  max-width:1120px;
}

.reviews-page-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}

.reviews-page-list{
  border-top:1px solid var(--rule-soft);
}

.reviews-page-review{
  padding:30px 0;
}

.reviews-page-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:30px;
}

.reviews-return-btn{
  width:auto !important;
  flex:0 0 auto;
}

.reviews-page-disclosure{
  margin-top:34px;
}

.reviews-empty{
  max-width:760px;
  margin:0 auto;
}

.reviews-empty h2{
  margin-bottom:10px;
}

@media (max-width:680px){
  .reviews-page-summary{
    align-items:flex-start;
    gap:8px 10px;
  }

  .reviews-page-toolbar,
  .reviews-page-bottom{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .reviews-page-review{
    padding:24px 0;
  }

  .reviews-return-btn{
    width:auto !important;
  }
}


/* ==========================================================
   HOMEPAGE - FNWL REWARDS PROMO
   Layout + accessibility refinement
   ========================================================== */

.rewards-promo-section{
  padding-top:68px;
  padding-bottom:68px;
}

.rewards-promo{
  display:grid;
  grid-template-columns:minmax(360px,.92fr) minmax(0,1.38fr);
  max-width:1210px;
  margin:0 auto;
  background:var(--paper);
  border:1px solid var(--rule-soft);
}

.rewards-promo-accent{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:44px 46px;
  background:var(--green-deep);
  color:var(--white);
}

.rewards-promo-accent .eyebrow{
  color:var(--white);
  margin-bottom:14px;
}

.rewards-promo-accent h2{
  color:var(--white);
  font-size:32px;
  line-height:1.3;
  margin-bottom:18px;
  max-width:none;
}

.rewards-promo-intro{
  max-width:none;
  margin:0;
  color:var(--white);
  font-size:17px;
  line-height:1.65;
}

.rewards-promo-details{
  padding:40px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.rewards-promo-highlight{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  column-gap:22px;
  padding-bottom:24px;
  margin-bottom:24px;
  border-bottom:1px solid var(--rule-soft);
}

.rewards-promo-percent{
  display:block;
  font-family:var(--serif);
  font-size:48px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.035em;
  color:var(--green-deep);
  white-space:nowrap;
}

.rewards-promo-highlight > span:last-child{
  max-width:none;
  color:var(--ink);
  font-size:17px;
  line-height:1.55;
}

.rewards-promo-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  margin:0 0 24px;
}

.rewards-promo-points strong{
  display:block;
  margin-bottom:5px;
  color:var(--ink);
  font-size:14px;
  letter-spacing:.03em;
}

.rewards-promo-points span{
  display:block;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.6;
}

.rewards-promo-footer{
  display:block;
  padding-top:20px;
  border-top:1px solid var(--rule-soft);
}

.rewards-promo-fine{
  width:100%;
  max-width:none;
  margin:0 0 22px;
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.6;
}

.rewards-promo-footer .btn{
  display:flex;
  width:fit-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:940px){
  .rewards-promo{
    grid-template-columns:1fr;
  }

  .rewards-promo-accent{
    padding:38px;
  }

  .rewards-promo-accent h2,
  .rewards-promo-intro{
    max-width:none;
  }

  .rewards-promo-details{
    padding:38px;
  }

  .rewards-promo-highlight > span:last-child,
  .rewards-promo-fine{
    max-width:none;
  }
}

@media (max-width:680px){
  .rewards-promo-section{
    padding-top:42px;
    padding-bottom:42px;
  }

  .rewards-promo-accent,
  .rewards-promo-details{
    padding:28px 24px;
  }

  .rewards-promo-accent h2{
    font-size:28px;
    line-height:1.32;
  }

  .rewards-promo-highlight{
    grid-template-columns:auto minmax(0,1fr);
    column-gap:16px;
    align-items:center;
  }

  .rewards-promo-percent{
    font-size:42px;
  }

  .rewards-promo-highlight > span:last-child{
    font-size:16px;
  }

  .rewards-promo-points{
    grid-template-columns:1fr;
    gap:18px;
  }

  .rewards-promo-footer .btn{
    width:fit-content;
    max-width:100%;
  }
}

@media (max-width:430px){
  .rewards-promo-highlight{
    grid-template-columns:1fr;
    row-gap:8px;
  }
}


/* ---------- Homepage testimonial section alternation ---------- */
.testimonial-section{
  padding-top:70px;
  padding-bottom:70px;
}

@media (max-width:940px){
  .testimonial-section{
    padding-top:54px;
    padding-bottom:54px;
  }
}

@media (max-width:680px){
  .testimonial-section{
    padding-top:42px;
    padding-bottom:42px;
  }
}


/* ==========================================================
   ACCESSIBILITY FOUNDATIONS - WCAG 2.2 AA
   ========================================================== */

/* Do not rely on browser-default low-contrast placeholder colors. */
::placeholder{
  color:var(--muted);
  opacity:1;
}

/* Editorial links must be visually identifiable without relying on color alone. */
main p a:not(.btn):not(.link-arrow):not(.blurb-link){
  color:var(--bronze-deep);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
main p a:not(.btn):not(.link-arrow):not(.blurb-link):hover{
  text-decoration-thickness:2px;
}

/* Ensure footer headings retain the existing visual treatment after semantic upgrade. */
.footcols h2{
  font-family:var(--sans);
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bronze-soft);
  margin-bottom:14px;
}

/* Visible keyboard focus for mega-menu links and mobile disclosure summaries. */
.mega a:focus-visible,
.mobilemenu a:focus-visible,
.mobilemenu summary:focus-visible{
  outline:3px solid var(--bronze);
  outline-offset:3px;
}
.doclink:focus-visible{
  outline:3px solid var(--white);
  outline-offset:3px;
}

/* Prevent hidden mobile navigation from participating in interaction. */
.mobilemenu[data-open="false"]{
  visibility:hidden;
}
.mobilemenu[data-open="true"]{
  visibility:visible;
}

/* ==========================================================
   FOOTER NAVIGATION - FINAL ALIGNMENT
   ========================================================== */
.footer-wrap-wide{
  max-width:var(--container-wide);
  width:100%;
}

.footer-nav{
  width:100%;
  margin-bottom:44px;
}
.footer-nav ul{
  list-style:none;
  margin:0;
  padding:0;
}
.footer-nav li{
  margin-bottom:9px;
}
.footer-nav a{
  color:var(--ink);
}
.footer-nav a:hover{
  color:var(--bronze-deep);
  text-decoration:underline;
}
.footer-nav h2{
  font-family:var(--sans);
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bronze-soft);
  margin:0 0 18px;
}

/* Desktop: one single grid for both rows. Explicit column placement prevents
   any auto-placement/cascade issue and keeps the two rows perfectly aligned. */
.footer.footer .footer-nav-desktop-grid{
  display:grid !important;
  grid-template-columns:max-content max-content max-content max-content !important;
  justify-content:space-between !important;
  align-items:start;
  width:100% !important;
  column-gap:28px;
  row-gap:0;
}
.footer-nav-desktop-grid .footer-group{
  min-width:0;
}
.footer-nav-desktop-grid .footer-col-1{grid-column:1}
.footer-nav-desktop-grid .footer-col-2{grid-column:2}
.footer-nav-desktop-grid .footer-col-3{grid-column:3}
.footer-nav-desktop-grid .footer-col-4{grid-column:4}
.footer-nav-desktop-grid .footer-row-1{grid-row:1}
.footer-nav-desktop-grid .footer-row-2{grid-row:3}
.footer-nav-divider{
  grid-column:1 / -1;
  grid-row:2;
  height:1px;
  width:100%;
  margin:34px 0;
  background:var(--rule-soft);
}

.footer.footer .footer-nav-mobile{
  display:none !important;
}

@media (max-width:940px){
  .footer.footer .footer-nav-desktop{
    display:none !important;
  }
  .footer.footer .footer-nav-mobile{
    display:grid !important;
    grid-template-columns:max-content max-content;
    justify-content:space-between;
    align-items:start;
    column-gap:24px;
    row-gap:34px;
    width:100%;
  }
}

@media (max-width:430px){
  .footer.footer .footer-nav-mobile{
    grid-template-columns:1fr;
    justify-content:stretch;
  }
}

/* ==========================================================
   SHOPPING CART - /viewcart.asp
   Classic ASP cart functionality with redesigned FNWL styling
   ========================================================== */
.cart-pagehero{
  padding-top:48px;
  padding-bottom:52px;
}
.cart-pagehero .lede{
  max-width:64ch;
}
.cart-account-meta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-top:18px;
  color:var(--muted);
  font-size:13px;
}
.cart-main-section{
  padding-top:64px;
}
.cart-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,390px);
  gap:54px;
  align-items:start;
}
.cart-items-column{
  min-width:0;
}
.cart-summary-column{
  min-width:0;
}
.cart-summary{
  position:sticky;
  top:132px;
  padding:30px;
  background:var(--paper-2);
  border:1px solid var(--rule-soft);
}
.cart-summary h2{
  font-size:28px;
  line-height:1.3;
  margin-bottom:24px;
}
.cart-summary-list{
  margin:0 0 24px;
}
.cart-summary-list > div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  padding:10px 0;
}
.cart-summary-list dt{
  color:var(--ink-soft);
}
.cart-summary-list dd{
  margin:0;
  text-align:right;
  font-weight:700;
}
.cart-summary-total{
  margin-top:6px;
  padding-top:17px !important;
  border-top:1px solid var(--rule);
  font-size:18px;
}
.cart-summary-total dt,
.cart-summary-total dd{
  color:var(--ink);
}
.cart-summary .btn + .btn{
  margin-top:10px;
}
.cart-btn-disabled{
  opacity:.55;
  cursor:not-allowed;
}
.cart-secondary-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:20px;
  font-size:13px;
}
.cart-secondary-actions a,
.cart-bulk-note a{
  color:var(--bronze-deep);
  text-decoration:underline;
  text-underline-offset:3px;
}
.cart-bulk-note{
  margin-top:20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.cart-table-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--rule-soft);
  background:var(--paper);
}
.cart-table-modern{
  min-width:760px;
  margin:0;
}
.cart-table-modern th,
.cart-table-modern td{
  vertical-align:middle;
}
.cart-table-modern thead th{
  padding:14px 16px;
  background:var(--paper-2);
  border-bottom:1px solid var(--rule);
  color:var(--ink);
}
.cart-table-modern tbody th,
.cart-table-modern tbody td{
  padding:20px 16px;
  border-bottom:1px solid var(--rule-soft);
}
.cart-table-modern tbody tr:last-child th,
.cart-table-modern tbody tr:last-child td{
  border-bottom:0;
}
.cart-product{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:280px;
  text-align:left;
}
.cart-thumb{
  width:72px;
  height:72px;
  flex:0 0 72px;
  object-fit:contain;
  background:var(--paper-2);
  mix-blend-mode:multiply;
}
.cart-product-copy{
  min-width:0;
}
.cart-product-name{
  font-weight:700;
  color:var(--ink);
}
.cart-product-name:hover{
  color:var(--bronze-deep);
  text-decoration:underline;
}
.cart-item-status{
  display:block;
  margin-top:5px;
  color:var(--bronze-deep);
  font-size:12px;
  font-weight:700;
}
.cart-item-oos{
  background:var(--paper-2);
}
.cart-item-oos .cart-product-name,
.cart-item-oos td:not(.cart-item-actions){
  color:var(--muted);
}
.cart-qty-form{
  display:flex;
  align-items:center;
  gap:8px;
}
.cart-qty-input{
  width:72px !important;
  min-height:44px;
  padding:9px 10px !important;
  border-color:var(--control-border-soft) !important;
  border-radius:0 !important;
}
.cart-update-btn{
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--control-border-soft);
  background:var(--paper);
  color:var(--ink);
  font-weight:900;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.cart-update-btn:hover{
  background:var(--cream-3);
}
.cart-line-total{
  font-weight:700;
}
.cart-item-actions{
  text-align:right;
}
.cart-remove-link,
.cart-action-link{
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:3px;
}
.cart-remove-link{
  color:var(--bronze-deep);
}
.cart-action-link{
  color:var(--green-deep);
}
.cart-empty{
  display:flex;
  min-height:260px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:42px 24px;
  border:1px dashed var(--rule);
  text-align:center;
}
.cart-empty p{
  margin:0;
  color:var(--muted);
}
.cart-status,
.cart-processing-announcement,
.cart-change-notice{
  margin-bottom:24px;
}
.cart-change-notice{
  padding:20px 22px;
  background:var(--paper-2);
  border-left:3px solid var(--green-mid);
}
.cart-change-notice h2{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.cart-change-notice p{
  margin-bottom:10px;
}
.cart-change-list{
  margin:10px 0 0;
  padding-left:20px;
}
.cart-change-list a{
  color:var(--bronze-deep);
  text-decoration:underline;
}
.cart-small-order-note,
.cart-shipping-note{
  margin-top:18px;
}
.cart-item-notes{
  margin-top:24px;
  padding:22px;
  border:1px solid var(--rule-soft);
}
.cart-item-notes h2{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.5;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.cart-item-notes ul{
  margin:0;
  padding-left:20px;
}
.cart-sample-program{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);
  gap:34px;
  align-items:center;
  margin-top:40px;
  padding:32px 34px;
  background:var(--paper-2);
  border:1px solid var(--rule-soft);
}
.cart-sample-program h2{
  font-size:25px;
  line-height:1.4;
  margin-bottom:16px;
}
.cart-sample-levels{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:0 0 14px;
  padding:0;
  list-style:none;
  color:var(--ink-soft);
  font-size:14px;
}
.cart-sample-image img{
  width:100%;
  max-height:190px;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.cart-sample-program .small{
  color:var(--muted);
}
.cart-sample-program .link-arrow{
  margin-top:4px;
}

@media (max-width:940px){
  .cart-layout{
    grid-template-columns:1fr;
    gap:34px;
  }
  .cart-summary{
    position:static;
  }
  .cart-sample-program{
    grid-template-columns:1fr;
  }
  .cart-sample-image{
    max-width:420px;
  }
}

@media (max-width:680px){
  .cart-pagehero{
    padding-top:34px;
    padding-bottom:38px;
  }
  .cart-main-section{
    padding-top:38px;
  }
  .cart-account-meta{
    justify-content:flex-start;
  }
  .cart-table-wrap{
    overflow:visible;
    border:0;
  }
  .cart-table-modern{
    min-width:0;
    width:100%;
  }
  .cart-table-modern thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .cart-table-modern tbody,
  .cart-table-modern tr,
  .cart-table-modern th,
  .cart-table-modern td{
    display:block;
    width:100%;
  }
  .cart-table-modern tbody tr{
    padding:20px;
    margin-bottom:18px;
    border:1px solid var(--rule-soft);
    background:var(--paper);
  }
  .cart-table-modern tbody th,
  .cart-table-modern tbody td{
    padding:8px 0;
    border:0;
  }
  .cart-table-modern td[data-label]{
    display:grid;
    grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr);
    gap:16px;
    align-items:center;
  }
  .cart-table-modern td[data-label]::before{
    content:attr(data-label);
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--bronze-soft);
  }
  .cart-product{
    min-width:0;
    gap:14px;
    margin-bottom:8px;
  }
  .cart-thumb{
    width:64px;
    height:64px;
    flex-basis:64px;
  }
  .cart-qty-form{
    justify-content:flex-start;
  }
  .cart-item-actions{
    padding-top:14px !important;
    margin-top:8px;
    border-top:1px solid var(--rule-soft) !important;
    text-align:left;
  }
  .cart-summary{
    padding:24px 20px;
  }
  .cart-sample-program{
    margin-top:30px;
    padding:26px 22px;
  }
  .cart-sample-levels{
    display:block;
  }
  .cart-sample-levels li + li{
    margin-top:6px;
  }
}


/* ==========================================================
   ABOUT US - /help/about.asp
   ========================================================== */

.about-pagehero{
  text-align:left;
}

.about-pagehero .lede{
  max-width:72ch;
  margin-left:0;
  margin-right:0;
}

.about-intro-grid{
  align-items:center;
}

.about-intro-media{
  min-height:420px;
  aspect-ratio:4/3;
  border-radius:0;
  background:var(--paper-2);
}

.about-intro-media .split-img{
  height:100%;
  object-fit:cover;
}

.about-copy{
  max-width:68ch;
}

.about-copy .lede{
  font-size:21px;
  line-height:1.65;
}

.about-copy .link-arrow{
  margin-top:8px;
}

.about-values .section-head{
  margin-bottom:40px;
}

.about-value-card{
  height:100%;
  border-radius:0;
  background:var(--paper);
}

.about-value-card h3{
  margin-bottom:10px;
}

.about-story-head{
  max-width:920px;
  margin-bottom:0;
}

.about-story-head .lede{
  font-size:21px;
  line-height:1.7;
}

.about-story-action{
  margin-top:28px;
}

.about-story-action .btn{
  width:fit-content;
}

.about-craft-grid{
  align-items:start;
}

.about-blurbs{
  gap:34px;
}

.about-blurbs .blurb,
.about-media-links .blurb{
  gap:24px;
}

.about-blurbs .blurb-link,
.about-media-links .blurb-link{
  font-size:22px;
  line-height:1.4;
}

.about-testimonial-section{
  padding-top:72px;
  padding-bottom:72px;
}

.about-testimonial{
  margin-top:0;
}

.about-testimonial blockquote{
  margin:0;
}

.about-testimonial figcaption{
  margin-top:24px;
}

.about-testimonial cite{
  margin-top:0;
}

.about-media-links{
  gap:30px;
}

.about-media-links .blurb{
  padding-bottom:26px;
  border-bottom:1px solid var(--rule-soft);
}

.about-media-links .blurb:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.about-cta{
  margin-top:0;
}

@media (max-width:940px){
  .about-pagehero{
    padding-top:42px;
    padding-bottom:46px;
  }

  .about-intro-media{
    min-height:320px;
  }

  .about-copy{
    max-width:none;
  }

  .about-copy .lede,
  .about-story-head .lede{
    font-size:19px;
  }

  .about-testimonial-section{
    padding-top:54px;
    padding-bottom:54px;
  }
}

@media (max-width:680px){
  .about-pagehero{
    padding-top:34px;
    padding-bottom:38px;
  }

  .about-intro-media{
    min-height:0;
    aspect-ratio:16/10;
  }

  .about-values .section-head{
    text-align:left;
    margin-bottom:28px;
  }

  .about-value-card{
    padding:24px 22px;
  }

  .about-story-head{
    text-align:left;
  }

  .about-story-action{
    margin-top:24px;
  }

  .about-blurbs{
    gap:28px;
  }

  .about-blurbs .blurb,
  .about-media-links .blurb{
    gap:16px;
  }

  .about-blurbs .blurb-icon{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .about-testimonial-section{
    padding-top:42px;
    padding-bottom:42px;
  }

  .about-media-links{
    gap:24px;
  }
}


/* ==========================================================
   FNWL DIFFERENCE - /help/quality-ethics-service.asp
   ========================================================== */

.difference-pagehero{
  text-align:left;
}

.difference-pagehero .lede{
  max-width:76ch;
  margin-left:0;
  margin-right:0;
}

.difference-pillars .section-head{
  max-width:900px;
  margin-bottom:44px;
}

.difference-pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  max-width:1120px;
  margin:0 auto;
}

.difference-pillar{
  min-width:0;
  padding:0 42px;
  text-align:center;
}

.difference-pillar + .difference-pillar{
  border-left:1px solid var(--rule);
}

.difference-pillar-icon{
  width:170px;
  height:170px;
  object-fit:contain;
  margin:0 auto 18px;
}

.difference-pillar h3{
  font-family:var(--sans);
  font-size:18px;
  line-height:1.35;
  letter-spacing:.035em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.difference-pillar p{
  max-width:30ch;
  margin:0 auto;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.65;
}

.difference-intro{
  padding-top:68px;
  padding-bottom:68px;
}

.difference-intro-copy{
  max-width:900px;
  margin:0 auto 34px;
  text-align:center;
}

.difference-intro-quote{
  margin:0;
  font-family:var(--serif);
  font-size:28px;
  line-height:1.55;
  font-style:italic;
  color:var(--ink);
}

.difference-product-figure{
  max-width:1040px;
  margin:0 auto;
}

.difference-product-figure img{
  width:100%;
  height:auto;
  mix-blend-mode:multiply;
}

.difference-details .section-head{
  max-width:900px;
  margin-bottom:46px;
}

.difference-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.difference-detail-card{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:20px;
  align-items:start;
  padding:30px 32px;
  border:1px solid var(--rule-soft);
  background:var(--paper-2);
}

.difference-detail-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:1.5px solid var(--green-deep);
  border-radius:50%;
  color:var(--green-deep);
  font-size:27px;
  font-weight:700;
  line-height:1;
}

.difference-detail-card h3{
  margin:0 0 12px;
  font-size:21px;
  line-height:1.4;
}

.difference-detail-card ul{
  margin:0;
  padding-left:20px;
  color:var(--ink-soft);
}

.difference-detail-card li{
  margin:0 0 7px;
  line-height:1.6;
}

.difference-detail-card li:last-child{
  margin-bottom:0;
}

.difference-cta{
  max-width:960px;
  margin:0 auto;
  text-align:center;
}

.difference-cta h2{
  margin-bottom:18px;
}

.difference-cta .lede{
  max-width:64ch;
  margin:0 auto 28px;
}

.difference-cta-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.difference-brand-link{
  margin-top:30px;
  font-size:14px;
}

.difference-brand-link a{
  color:var(--bronze-deep);
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width:940px){
  .difference-pillar{
    padding-left:26px;
    padding-right:26px;
  }

  .difference-pillar-icon{
    width:145px;
    height:145px;
  }

  .difference-detail-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:680px){
  .difference-pagehero{
    padding-top:34px;
    padding-bottom:38px;
  }

  .difference-pillars .section-head{
    text-align:left;
    margin-bottom:30px;
  }

  .difference-pillar-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .difference-pillar{
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    column-gap:20px;
    row-gap:4px;
    align-items:center;
    padding:24px 0;
    text-align:left;
  }

  .difference-pillar + .difference-pillar{
    border-left:0;
    border-top:1px solid var(--rule-soft);
  }

  .difference-pillar-icon{
    grid-row:1 / span 2;
    width:96px;
    height:96px;
    margin:0;
  }

  .difference-pillar h3{
    margin:0;
    font-size:17px;
  }

  .difference-pillar p{
    max-width:none;
    margin:0;
  }

  .difference-intro{
    padding-top:42px;
    padding-bottom:42px;
  }

  .difference-intro-copy{
    text-align:left;
    margin-bottom:24px;
  }

  .difference-intro-quote{
    font-size:22px;
    line-height:1.55;
  }

  .difference-details .section-head{
    text-align:left;
    margin-bottom:30px;
  }

  .difference-detail-card{
    grid-template-columns:42px minmax(0,1fr);
    gap:15px;
    padding:24px 20px;
  }

  .difference-detail-icon{
    width:38px;
    height:38px;
    font-size:22px;
  }

  .difference-detail-card h3{
    font-size:19px;
    line-height:1.45;
  }

  .difference-detail-card ul{
    padding-left:18px;
  }

  .difference-cta{
    text-align:left;
  }

  .difference-cta .lede{
    margin-left:0;
    margin-right:0;
  }

  .difference-cta-actions{
    justify-content:flex-start;
  }
}

/* ==========================================================
   CONTACT US - /contact.asp form controls (10/16/2026)
   Fix default-type text inputs that did not match input[type=text].
   Keep this scoped to the contact form, not other FNWL forms.
   ========================================================== */
.contact-panel .contact-fields .field > input,
.contact-panel .contact-fields .field > select,
.contact-panel .contact-fields .field > textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  font:inherit;
  font-size:16px;
  line-height:1.45;
  padding:13px 14px;
  border:1px solid var(--control-border-soft);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
}
.contact-panel .contact-fields .field > input,
.contact-panel .contact-fields .field > select{
  min-height:48px;
}
/* Soft but keyboard-visible focus; replaces the 3px bronze outline. */
.contact-panel .contact-fields .field > input:focus-visible,
.contact-panel .contact-fields .field > select:focus-visible,
.contact-panel .contact-fields .field > textarea:focus-visible{
  outline:2px solid var(--green-deep);
  outline-offset:1px;
  border-color:var(--green-deep);
  border-radius:0;
}

/* ==========================================================
   GIVING BACK - /help/giving-back.asp
   Uses the same wrap, section, and tile design as Ingredients.
   ========================================================== */
.giving-hero{text-align:left}
.giving-intro{width:100%}
.giving-intro > p{max-width:none;font-size:17px;line-height:1.75}
.giving-intro-figure{width:100%;max-width:none;margin:32px 0 0}
.giving-intro-figure img{width:100%;height:auto}
.giving-subhead{max-width:none;font-family:var(--serif);font-size:21px;line-height:1.55;margin:0 0 24px}
.giving-initiatives{width:100%;max-width:none;margin:0;padding-left:25px}
.giving-initiatives li{padding-left:4px;margin-bottom:12px;line-height:1.7}
.giving-initiatives li:last-child{margin-bottom:0}
/* Match Ingredients tile colors, border, padding and interaction. */
.giving-program-grid,.giving-affiliations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:26px}
#main .giving-program,#main .giving-affiliation,#main .giving-charity,#main .giving-project{min-width:0;padding:28px;background:var(--paper);border:1px solid var(--rule-soft)}
.giving-program h3,.giving-affiliation h3,.giving-project h3{font-size:20px;line-height:1.4;margin:0 0 10px}
.giving-program p,.giving-affiliation p,.giving-project p,.giving-charity p{font-size:15px;line-height:1.7;color:var(--ink-soft);margin:0}
.giving-program h3 a,.giving-affiliation h3 a,.giving-charity h4 a,.giving-project h3 a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bronze-soft);text-underline-offset:3px}
.giving-program h3 a:hover,.giving-affiliation h3 a:hover,.giving-charity h4 a:hover,.giving-project h3 a:hover{color:var(--bronze-deep)}
.giving-category{padding:30px 0 0;margin-top:30px;border-top:1px solid var(--rule-soft)}
.giving-category:first-of-type{padding-top:0;margin-top:30px;border-top:0}
.giving-category h3{font-size:25px;line-height:1.4;margin:0 0 18px}
/* Precisely one charity card per row at every viewport width. */
.giving-charity-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
#main .giving-charity{width:100%;max-width:none;background:var(--paper);padding:24px 28px}
.giving-charity h4{font-size:20px;line-height:1.4;margin:0 0 8px}
.giving-charity p{max-width:108ch}
.giving-affiliations{grid-template-columns:repeat(2,minmax(0,1fr))}
.giving-affiliation-logo{height:128px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.giving-affiliation-logo img{width:auto;height:auto;max-height:120px;max-width:100%;object-fit:contain}
.giving-affiliation p + p{margin-top:14px}
.giving-project{margin-top:26px}
@media(max-width:940px){.giving-program-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.giving-affiliations{grid-template-columns:1fr}.giving-subhead{font-size:19px}}
@media(max-width:680px){.giving-intro > p{font-size:16px}.giving-program-grid{grid-template-columns:1fr;gap:16px}.giving-charity-grid{gap:14px}.giving-category{margin-top:26px;padding-top:26px}.giving-category h3{font-size:22px}#main .giving-program,#main .giving-affiliation,#main .giving-charity,#main .giving-project{padding:22px}.giving-initiatives{padding-left:22px}.giving-affiliation-logo{height:auto;min-height:100px}}

/* ==========================================================
   CUSTOMER TESTIMONIALS - /help/testimonials.asp
   The cards reuse the EXACT homepage .testimonial / .mark / .q
   treatments. Do not override the shared decorative quote rules.
   ========================================================== */
.testimonials-page-intro > :last-child{margin-bottom:0}
.testimonials-list-section .testimonials-entry{margin:0 auto}
.testimonials-list-section .testimonials-entry + .testimonials-entry{margin-top:52px}
.testimonials-list-section .testimonials-entry blockquote{margin:0}
.testimonials-list-section .testimonials-entry figcaption{margin:0}
@media(max-width:940px){
  .testimonials-list-section .testimonials-entry + .testimonials-entry{margin-top:40px}
}
@media(max-width:680px){
  .testimonials-list-section .testimonials-entry + .testimonials-entry{margin-top:28px}
}

/* ==========================================================
   CAREERS - /jobs/default.asp and /jobs/jobdetails.asp
   Shared FNWL wrap/hero/tile system; no page-local CSS.
   ========================================================== */
.jobs-intro > :last-child{margin-bottom:0}
.jobs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}
.jobs-card{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.jobs-card h2{font-size:24px;line-height:1.4;margin:0}
.jobs-card h2 a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bronze-soft);text-underline-offset:4px}
.jobs-card h2 a:hover{color:var(--bronze-deep)}
.jobs-card .jobs-location{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0}
.jobs-card .link-arrow{margin-top:auto}
.jobs-empty{padding:32px;border:1px solid var(--rule-soft);background:var(--paper-2);font-size:17px}
.jobs-empty p{margin:0}
.jobs-detail-content{font-size:16px;line-height:1.75;overflow-wrap:anywhere}
.jobs-detail-content > :first-child{margin-top:0}
.jobs-detail-content > :last-child{margin-bottom:0}
.jobs-detail-content h2{font-size:28px;line-height:1.4;margin:32px 0 14px}
.jobs-detail-content h3{font-size:22px;line-height:1.45;margin:26px 0 12px}
.jobs-detail-content ul,.jobs-detail-content ol{padding-left:24px;margin:0 0 20px}
.jobs-detail-content li{margin-bottom:8px}
.jobs-detail-content a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.jobs-detail-content a:hover{text-decoration-thickness:2px}
.jobs-detail-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.jobs-detail-panel{padding:36px;background:var(--paper);border:1px solid var(--rule-soft)}
.jobs-detail-back{margin-top:28px}
.jobs-status{padding:26px 30px;background:var(--paper-2);border-left:3px solid var(--green-deep)}
.jobs-status p{margin:0}
@media(max-width:940px){.jobs-list{grid-template-columns:1fr}}
@media(max-width:680px){.jobs-list{gap:16px}.jobs-card h2{font-size:21px}#main .jobs-card{padding:22px}.jobs-detail-panel{padding:24px 20px}.jobs-detail-content h2{font-size:24px}.jobs-detail-content h3{font-size:20px}.jobs-status{padding:22px 20px}}

/* ==========================================================
   PRODUCT QUESTIONS - /product-questions.asp
   Shared contact form layout; no embedded or inline ASP CSS.
   ========================================================== */
.product-questions-main{background:var(--paper)}
.product-questions-main .contact-columns{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:52px;align-items:start}
.product-questions-main .contact-panel{padding:0;background:transparent;min-width:0}
.product-questions-main .contact-panel h2,.product-questions-main .contact-details h2{font-size:29px;margin-bottom:14px}
.product-questions-main .contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.product-questions-main .contact-fields .field{min-width:0}
.product-questions-main .contact-fields .contact-full{grid-column:1/-1}
.product-questions-main .contact-required{color:var(--bronze-deep)}
.product-questions-main .contact-helper{font-size:13px;color:var(--muted);margin-bottom:24px}
.product-questions-main .contact-section{padding-top:54px}
.product-questions-main .contact-details{padding-top:5px}
.product-questions-main .contact-detail-block{margin-bottom:24px}
.product-questions-main .contact-detail-block:last-child{margin-bottom:0}
.product-questions-main .contact-detail-block a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.product-questions-main .contact-alert{padding:15px 18px;margin:0 0 24px;border-left:4px solid var(--bronze);background:var(--cream-3)}
.product-questions-main .contact-alert-success{border-left-color:var(--green-deep)}
.product-questions-main .contact-email-section{border-top:1px solid var(--rule-soft)}
.product-questions-main .contact-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.product-questions-main .contact-panel select,.product-questions-main .contact-panel input,.product-questions-main .contact-panel textarea{font-size:16px}
.product-questions-main .contact-panel .btn{margin-top:20px}
.product-questions-main .contact-details h3{font-family:var(--sans);font-size:17px;margin:0 0 8px}
.product-questions-main .contact-panel .cf-turnstile{margin:18px 0}
.product-questions-main .product-questions-intro{margin-bottom:28px}
.product-questions-main .contact-postal-address{font-style:normal}
.product-questions-main .product-questions-other h2{font-size:29px;margin-bottom:12px}
.product-questions-main .product-questions-other p{max-width:78ch;margin-bottom:24px}
.product-questions-main .product-questions-other p a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.product-questions-main .contact-panel .contact-fields .field > input,
.product-questions-main .contact-panel .contact-fields .field > textarea{
  display:block;width:100%;max-width:100%;min-width:0;font:inherit;font-size:16px;line-height:1.45;
  padding:13px 14px;border:1px solid var(--control-border-soft);border-radius:0;
  background:var(--paper);color:var(--ink)
}
.product-questions-main .contact-panel .contact-fields .field > input{min-height:48px}
.product-questions-main .contact-panel .contact-fields .field > input:focus-visible,
.product-questions-main .contact-panel .contact-fields .field > textarea:focus-visible{
  outline:2px solid var(--green-deep);outline-offset:1px;border-color:var(--green-deep);border-radius:0
}
@media(max-width:940px){
 .product-questions-main .contact-columns{grid-template-columns:1fr;gap:34px}
}
@media(max-width:680px){
 .product-questions-main .contact-fields{grid-template-columns:1fr}
 .product-questions-main .contact-panel h2,.product-questions-main .contact-details h2,.product-questions-main .product-questions-other h2{font-size:25px}
 .product-questions-main .contact-panel .btn{max-width:100%}
}

/* ==========================================================
   REUSABLE PRODUCT QUESTIONS CTA
   Matches the Bulk & Wholesale section directly above it.
   Use this full section on other FNWL pages as needed.
   ========================================================== */
.product-questions-cta-section .product-questions-cta-content{
  margin-bottom:0;
}
.product-questions-cta-action{
  margin:20px 0 0;
}

/* ==========================================================
   INCI DIRECTORY - /resources/inci.asp
   One database record per table row, with side-by-side columns.
   ========================================================== */
.inci-pagehero{text-align:left}
.inci-directory-section{padding-top:62px}
.inci-intro{margin-bottom:34px;font-size:16px;line-height:1.75}
.inci-intro > :first-child{margin-top:0}
.inci-intro > :last-child{margin-bottom:0}
.inci-table-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.inci-table{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--paper);font-size:16px;line-height:1.6}
.inci-table thead{background:var(--cream-3)}
.inci-table thead th{padding:19px 24px;text-align:left;font-family:var(--sans);font-size:14px;font-weight:900;letter-spacing:.06em;color:var(--ink);border-bottom:2px solid var(--control-border-soft)}
.inci-table thead th:first-child{width:40%}
.inci-table tbody th,.inci-table tbody td{padding:17px 24px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule-soft);overflow-wrap:anywhere;word-break:normal}
.inci-table tbody th{font-weight:700}
.inci-table tbody tr:nth-child(even){background:var(--paper-2)}
.inci-table tbody tr:hover{background:var(--cream-3)}
.inci-table tbody a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.inci-table tbody a:hover{text-decoration-thickness:2px}
.inci-table tbody a:focus-visible{outline:3px solid var(--bronze);outline-offset:3px}
@media(max-width:680px){
  .inci-directory-section{padding-top:38px}
  .inci-intro{margin-bottom:25px}
  .inci-table{font-size:14px}
  .inci-table thead th{padding:14px 12px;font-size:12px}
  .inci-table tbody th,.inci-table tbody td{padding:14px 12px}
  .inci-table thead th:first-child{width:43%}
}


/* ==========================================================
   SHELF LIFE DIRECTORY - /resources/shelflife.asp
   Matches the INCI directory: one product per table row.
   ========================================================== */
.shelflife-pagehero{text-align:left}
.shelflife-directory-section{padding-top:62px}
.shelflife-intro{margin-bottom:34px;font-size:16px;line-height:1.75}
.shelflife-intro > :first-child{margin-top:0}
.shelflife-intro > :last-child{margin-bottom:0}
.shelflife-table-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.shelflife-table{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--paper);font-size:16px;line-height:1.6}
.shelflife-table thead{background:var(--cream-3)}
.shelflife-table thead th{padding:19px 24px;text-align:left;font-family:var(--sans);font-size:14px;font-weight:900;letter-spacing:.06em;color:var(--ink);border-bottom:2px solid var(--control-border-soft)}
.shelflife-table thead th:first-child{width:40%}
.shelflife-table tbody th,.shelflife-table tbody td{padding:17px 24px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule-soft);overflow-wrap:anywhere;word-break:normal}
.shelflife-table tbody th{font-weight:700}
.shelflife-table tbody tr:nth-child(even){background:var(--paper-2)}
.shelflife-table tbody tr:hover{background:var(--cream-3)}
.shelflife-table tbody a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.shelflife-table tbody a:hover{text-decoration-thickness:2px}
.shelflife-table tbody a:focus-visible{outline:3px solid var(--bronze);outline-offset:3px}
@media(max-width:680px){
  .shelflife-directory-section{padding-top:38px}
  .shelflife-intro{margin-bottom:25px}
  .shelflife-table{font-size:14px}
  .shelflife-table thead th{padding:14px 12px;font-size:12px}
  .shelflife-table tbody th,.shelflife-table tbody td{padding:14px 12px}
  .shelflife-table thead th:first-child{width:43%}
}

/* ==========================================================
   SAPONIFICATION VALUES - /resources/sapon.asp
   Follows INCI/Shelf Life directories: a single data record per row.
   ========================================================== */
.sapon-pagehero{text-align:left}
.sapon-directory-section{padding-top:62px}
.sapon-intro{margin-bottom:34px;font-size:16px;line-height:1.75}
.sapon-intro > :first-child{margin-top:0}
.sapon-intro > :last-child{margin-bottom:0}
.sapon-table-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.sapon-table{
  width:100%;min-width:780px;border-collapse:collapse;table-layout:auto;
  background:var(--paper);font-size:16px;line-height:1.6
}
.sapon-table thead{background:var(--cream-3)}
.sapon-table thead th{
  padding:19px 24px;text-align:left;font-family:var(--sans);font-size:14px;
  font-weight:900;letter-spacing:.06em;color:var(--ink);
  border-bottom:2px solid var(--control-border-soft)
}
.sapon-table tbody th,.sapon-table tbody td{
  padding:17px 24px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule-soft);overflow-wrap:anywhere
}
.sapon-table tbody th{font-weight:700}
.sapon-table .sapon-numeric{text-align:right;white-space:nowrap}
.sapon-table tbody tr:nth-child(even){background:var(--paper-2)}
.sapon-table tbody tr:hover{background:var(--cream-3)}
.sapon-table tbody a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.sapon-table tbody a:hover{text-decoration-thickness:2px}
.sapon-table tbody a:focus-visible{outline:3px solid var(--bronze);outline-offset:3px}
@media(max-width:680px){
  .sapon-directory-section{padding-top:38px}
  .sapon-intro{margin-bottom:25px}
  .sapon-table{font-size:14px}
  .sapon-table thead th{padding:14px 12px;font-size:12px}
  .sapon-table tbody th,.sapon-table tbody td{padding:14px 12px}
}

/* ==========================================================
   RESOURCES & LINKS - /resources/links.asp
   Uses shared FNWL section, wrap and tile treatments.
   ========================================================== */
.resource-links-intro{margin-bottom:32px;font-size:16px;line-height:1.75}
.resource-links-intro > :first-child{margin-top:0}
.resource-links-intro > :last-child{margin-bottom:0}
.resource-links-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
#main .resource-links-feature{
  display:flex;flex-direction:column;min-width:0;
  padding:32px;background:var(--paper);border:1px solid var(--rule-soft)
}
.resource-links-logo{height:160px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.resource-links-logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.resource-links-logo img{display:block;width:auto;max-width:100%;height:auto;max-height:150px;object-fit:contain}
.resource-links-feature-copy p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-soft)}
.resource-links-feature-copy a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.resource-links-feature-copy a:hover{text-decoration-thickness:2px}
.resource-links-secondary h2{margin-bottom:28px}
.resource-links-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;border-top:1px solid var(--rule-soft)}
.resource-links-item{border-bottom:1px solid var(--rule-soft);min-width:0}
.resource-links-item > a,.resource-links-item > span{
  display:block;overflow-wrap:anywhere;padding:17px 14px;
  font-size:17px;line-height:1.6
}
.resource-links-item > a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.resource-links-item > a:hover{background:var(--cream-3);text-decoration-thickness:2px}
.resource-links-item > a:focus-visible{outline:3px solid var(--bronze);outline-offset:-3px}
.resource-links-unavailable > span{color:var(--muted)}
@media(max-width:940px){
  .resource-links-features{grid-template-columns:minmax(0,1fr)}
  .resource-links-logo{height:140px}
}
@media(max-width:680px){
  #main .resource-links-feature{padding:24px}
  .resource-links-logo{height:125px;margin-bottom:18px}
  .resource-links-logo img{max-height:118px}
  .resource-links-item > a,.resource-links-item > span{font-size:16px;padding:15px 6px}
}


/* ==========================================================
   INFORMATION LIBRARY - index, categories and article pages
   Page components use standard FNWL .wrap, .pagehero, .section and .tile.
   ========================================================== */
.library-index-intro-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:54px;align-items:center}
.library-index-intro-copy{min-width:0;font-size:17px;line-height:1.8}
.library-index-intro-copy > :first-child{margin-top:0}
.library-index-intro-image img{width:100%;height:auto;object-fit:contain}
.library-index-browse h2{margin-bottom:30px}
.library-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
#main .library-category-card{display:flex;min-width:0;padding:28px;background:var(--paper);border:1px solid var(--rule-soft)}
.library-category-card h3{font-size:21px;line-height:1.45;margin:0;width:100%}
.library-category-card a{display:block;color:var(--ink);text-decoration:underline;text-decoration-color:var(--bronze-soft);text-underline-offset:4px}
.library-category-card a:hover{color:var(--bronze-deep)}
.library-category-card a:focus-visible{outline:3px solid var(--bronze);outline-offset:4px}
.library-category-listing{scroll-margin-top:145px;padding:36px 0;border-bottom:1px solid var(--rule-soft)}
.library-category-listing:first-child{padding-top:0}
.library-category-listing h2{font-size:30px;margin:0 0 0px}
.library-category-content{overflow-wrap:anywhere;line-height:1.75}
.library-category-content a,.library-category-articles a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.library-category-content a:hover,.library-category-articles a:hover{text-decoration-thickness:2px}
.library-category-content table{max-width:100%;width:100%;border-collapse:collapse}
.library-category-content td{padding:10px 14px;vertical-align:top}
.library-category-content ul,.library-category-articles ul{padding-left:24px}
.library-category-content li,.library-category-articles li{padding:5px 0}
.library-index-outro{padding-top:38px;overflow-wrap:anywhere}
.library-article-section{padding-top:58px}
.library-article-body{max-width:100%;font-size:17px;line-height:1.8;overflow-wrap:anywhere}
.library-article-body > :first-child{margin-top:0}
.library-article-body p,.library-article-body .BodyText{max-width:none;line-height:1.8}
.library-article-body h2,.library-article-body .libraryh2{margin:38px 0 16px;font-size:29px;line-height:1.35}
.library-article-body h3{margin:30px 0 14px;font-size:23px;line-height:1.4}
.library-article-body h4{margin:28px 0 12px;font-size:19px;line-height:1.45}
.library-article-body a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.library-article-body a:hover{text-decoration-thickness:2px}
.library-article-body :is(a,button,input,select,summary):focus-visible{outline:3px solid var(--bronze);outline-offset:3px}
.library-article-body :is(ul,ol){padding-left:28px;margin-bottom:24px}
.library-article-body li{margin-bottom:9px}
.library-article-body img{max-width:100%;height:auto}
.library-article-body blockquote{border-left:3px solid var(--bronze);padding:16px 24px;margin:30px 0;background:var(--paper-2)}
.library-article-body :is(table){max-width:100%;border-collapse:collapse;font-size:15px;line-height:1.6;margin:24px 0}
.library-article-body :is(th,td){padding:10px 13px;vertical-align:top;border:1px solid var(--rule-soft)}
.library-article-body th{background:var(--cream-3);text-align:left}
.library-article-body :is(tr:nth-child(even)){background:var(--paper-2)}
.library-article-body :is(table[width]){width:auto;max-width:100%}
.library-article-body{overflow-x:auto}
.library-article-return{margin-top:40px;padding-top:26px;border-top:1px solid var(--rule-soft)}
.library-article-return .btn{width:fit-content;max-width:100%}
.library-category-page .library-category-articles{margin-top:26px}
@media(max-width:940px){
 .library-index-intro-layout{grid-template-columns:1fr;gap:28px}
 .library-index-intro-image{max-width:700px}
 .library-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
 .library-category-grid{grid-template-columns:1fr;gap:16px}
 #main .library-category-card{padding:22px}
 .library-article-section{padding-top:38px}
 .library-article-body{font-size:16px}
 .library-article-body h2,.library-article-body .libraryh2{font-size:24px}
 .library-category-listing h2{font-size:25px}
 .library-article-body :is(th,td){padding:8px 10px;font-size:14px}
 .library-article-return .btn{font-size:12px}
}

.library-article-body .library-legacy-style-1{margin-top: 4em;}

.library-article-body .library-legacy-style-2{font-size: 150%; margin-bottom: 1em; margin-top: 2em;}

.library-article-body .library-legacy-style-3{margin-bottom: 1em;}

.library-article-body .library-legacy-style-4{margin: 0px; padding: 0px; border: 1px; border-color: #CCCCCC; border-style: dotted; padding: 5px; font-weight: bold;}

.library-article-body .library-legacy-style-5{margin: 0px; padding: 0px; border: 1px; border-color: #CCCCCC; border-style: dotted; padding: 5px;}

.library-article-body .library-legacy-style-6{font-size: 8pt; font-weight: normal;}

.library-article-body .library-legacy-style-7{margin: auto;}

.library-article-body .library-legacy-style-8{margin: auto; border-style: solid; border-width: thin;}

.library-article-body .library-legacy-style-9{font-size: 8pt;}

.library-article-body .library-legacy-style-10{border: 1px solid #999999;}

.library-article-body .library-legacy-style-11{font-size: 10pt; font-weight: bold;}

.library-article-body .library-legacy-style-12{border: 1px solid #e4e7dd;}

.library-article-body .library-legacy-style-13{font-size: 7pt;}

.library-article-body .library-legacy-style-14{padding-top: 1em;}

.library-article-body .library-legacy-style-15{float: left; margin-right: 1em; margin-top: 1em; margin-bottom: 1em;}

.library-article-body .library-legacy-style-16{clear: left;}

.library-article-body .library-legacy-style-17{font-weight: bold; font-size: 12pt;}

.library-article-body .library-legacy-style-18{list-style-image: url(/images/bulletsquare.gif); margin-left: 0px; padding: 10px; font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif;}

.library-article-body .library-legacy-style-19{padding-bottom: 1em;}

.library-article-body .library-legacy-style-20{font-size: 160%;}

.library-article-body .library-legacy-style-21{font-size: 140%;}

.library-article-body .library-legacy-style-22{font-size: 150%;}

.library-article-body .library-legacy-style-23{font-size: 150%; margin-bottom: 1em;}

.library-article-body .library-legacy-style-24{list-style-type: disc; margin-left: 20px; padding-left: 20px; line-height: 1.6;}

.library-article-body .library-legacy-style-26{font-weight: bold;}

.library-article-body .library-legacy-style-27{text-align: center;}

.library-article-body .library-legacy-style-28{padding-right: 15px; padding-bottom: 10px; margin: 0px}

.library-article-body .library-legacy-style-29{margin-top: 1em;}

.library-article-body .library-legacy-style-30{font-size: 150%; padding-top: 1em;}

/* Legacy CSS moved out of coldprocess.asp */

.custom-list 
li { margin-bottom: 1em; }



.library-article-body .library-eo-profile-name{font-size:140%}

/* ==========================================================
   INFORMATION LIBRARY INDEX - alignment and compact categories
   Mirrors /includes/category-page-products.asp layout conventions.
   ========================================================== */
.library-index-page .library-pagehero .crumbs{margin-bottom:14px}
.library-index-page .library-index-intro{padding-top:54px;padding-bottom:58px}
.library-index-page .library-index-intro-layout{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center;
  gap:56px;
  width:100%;
}
.library-index-page .library-index-intro-copy{min-width:0;max-width:none;font-size:17px;line-height:1.75}
.library-index-page .library-index-intro-copy p{max-width:none}
.library-index-page .library-index-intro-image{
  width:100%;min-width:0;max-width:100%;height:290px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--paper);
}
.library-index-page .library-index-intro-image img{
  display:block;width:100%;height:100%;max-height:290px;
  object-fit:contain;
}
.library-index-page .library-index-browse h2{margin:0 0 26px}
.library-index-page .library-category-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;gap:18px 22px;width:100%;
}
#main.library-index-page .library-category-card{
  display:flex;align-items:stretch;min-width:0;min-height:0;
  margin:0;padding:0;background:var(--paper);
  border:1px solid var(--rule-soft);
}
.library-index-page .library-category-card h3{
  width:100%;margin:0;font-size:19px;line-height:1.4;
}
.library-index-page .library-category-card h3 a{
  display:flex;align-items:center;width:100%;height:100%;min-height:82px;
  padding:18px 22px;color:var(--ink);text-decoration:none;
}
.library-index-page .library-category-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.library-index-page .library-category-card h3 a:focus-visible{outline:3px solid var(--bronze);outline-offset:-4px}
@media(max-width:940px){
  .library-index-page .library-index-intro-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
  .library-index-page .library-index-intro-image{height:240px}
  .library-index-page .library-index-intro-image img{max-height:240px}
  .library-index-page .library-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .library-index-page .library-index-intro{padding-top:38px;padding-bottom:42px}
  .library-index-page .library-index-intro-layout{grid-template-columns:1fr;gap:22px}
  .library-index-page .library-index-intro-image{height:220px}
  .library-index-page .library-index-intro-image img{max-height:220px}
  .library-index-page .library-category-grid{grid-template-columns:1fr;gap:12px}
  #main.library-index-page .library-category-card{padding:0}
  .library-index-page .library-category-card h3{font-size:18px}
  .library-index-page .library-category-card h3 a{min-height:64px;padding:14px 18px}
}

/* INFORMATION LIBRARY ARTICLE LAYOUT - consistent with the index design.
   The heading, prose, lists and data tables share one readable 1200px
   measure. The main site gutters remain unchanged. No article-wide overrides. */
.library-article-page .library-pagehero h1,
.library-category-page .library-pagehero h1,
.library-article-page .library-article-body,
.library-category-page .library-article-body{
  width:100%;
  max-width:1200px;
  margin-left:0;
  margin-right:0;
}
.library-article-page .library-article-body :is(p,ul,ol,blockquote),
.library-category-page .library-article-body :is(p,ul,ol,blockquote){
  max-width:100%;
}
.library-article-page .library-article-body > :is(table),
.library-category-page .library-article-body > :is(table){
  width:100%;
  max-width:100%;
}
/* Reading-width constraints also apply to unwrapped legacy prose within
   the article element itself; do not depend on whether the source uses p. */
.library-article-page .library-article-body,
.library-category-page .library-article-body{line-height:1.8}
@media(max-width:680px){
  .library-article-page .library-pagehero h1,
  .library-category-page .library-pagehero h1{overflow-wrap:anywhere}
}

/* ==========================================================
   RESOURCES INDEX - /resources/default.asp
   Uses Giving Back's .giving-charity card treatment and the shared
   .crumbs, .pagehero, .wrap and .section styles.
   Database-supplied PAGETEXT is not replaced with hardcoded resources.
   ========================================================== */
.resources-directory{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
#main .resources-directory .resources-entry{width:100%;max-width:none;min-width:0;padding:24px 28px;background:var(--paper);border:1px solid var(--rule-soft)}
.resources-entry > :first-child{margin-top:0;margin-bottom:8px;font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.4}
.resources-entry > :first-child a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bronze-soft);text-underline-offset:3px}
.resources-entry > :first-child a:hover{color:var(--bronze-deep)}
.resources-entry blockquote{margin:0;padding:0;border:0;background:none;font-size:15px;line-height:1.7;color:var(--ink-soft)}
.resources-entry blockquote :last-child{margin-bottom:0}
.resources-entry blockquote a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.resources-entry a:focus-visible{outline:3px solid var(--bronze);outline-offset:3px}
/* Gracefully style any legacy resource entry whose stored HTML does not
   match the linked-heading + blockquote format, without hiding content. */
.resources-directory > blockquote{margin:0 0 12px;padding:18px 28px;background:var(--paper);border:1px solid var(--rule-soft);font-size:15px;line-height:1.7}
.resources-directory > blockquote > :last-child{margin-bottom:0}
.resources-directory > p{margin:0}
.resources-directory > p a{color:var(--ink);font-family:var(--serif);font-size:20px;font-weight:700;text-decoration:underline;text-decoration-color:var(--bronze-soft);text-underline-offset:3px}
@media(max-width:680px){
 .resources-directory{gap:14px}
 #main .resources-directory .resources-entry{padding:22px}
 .resources-entry > :first-child,.resources-directory > p a{font-size:19px}
 .resources-directory > blockquote{padding:18px 22px}
}

/* FNWL account pages: login, menu and registration */

.account-page{background:var(--paper);padding-bottom:72px}.account-page .pagehero{text-align:left}.account-page .pagehero h1{margin-bottom:0}.account-section{padding-top:48px}.account-intro{max-width:900px;margin-bottom:30px}.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}.account-panel{border:1px solid var(--rule-soft);background:var(--paper-2);padding:32px}.account-panel h2,.account-panel h3{font-family:var(--sans);font-size:23px;line-height:1.25;margin:0 0 20px}.account-field{display:block;margin-bottom:18px}.account-field>span{display:block;font-weight:800;font-size:14px;margin-bottom:7px}.account-panel input[type=email],.account-panel input[type=password],.account-panel input[type=text],.account-panel select{width:100%;max-width:100%;font-size:16px;padding:12px;border:1px solid var(--control-border-soft);background:white;color:var(--ink)}.account-toggle{display:flex;gap:8px;align-items:center;font-size:14px;margin:0 0 20px}.account-help{font-size:14px;margin-top:18px}.account-alert{border-left:4px solid var(--bronze);padding:14px 18px;background:var(--cream-3);margin:0 0 20px}.account-alert--success{border-left-color:var(--green-deep)}.account-benefits{margin:18px 0 0;padding-left:22px}.account-benefits li{margin-bottom:9px}.account-turnstile{margin:20px 0}.account-menu-grid{display:grid;grid-template-columns:minmax(260px,1.25fr) repeat(2,minmax(220px,1fr));gap:24px;align-items:start}.account-menu-grid .account-panel{height:100%}.account-menu-grid h2{margin-bottom:15px}.account-links{list-style:none;padding:0;margin:0 0 24px}.account-links li{margin-bottom:12px}.account-links a,.account-panel a{color:var(--bronze-deep);text-underline-offset:3px}.account-subtitle{margin:25px 0 12px;font-weight:900;font-size:16px}.account-detail{margin:0 0 20px}.account-detail dt{font-size:13px;font-weight:800;margin-bottom:4px}.account-detail dd{margin:0;overflow-wrap:anywhere}.account-register{max-width:800px;margin:0 auto}.account-register-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}.account-register-grid .full{grid-column:1/-1}.account-register .account-panel{background:transparent}.account-register .account-panel .btn{margin-top:18px}.account-check{display:flex;gap:10px;align-items:start;margin:0 0 20px}.account-check input{margin-top:5px}.account-announcement{margin-top:30px}.account-announcement:empty{display:none}@media(max-width:980px){.account-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-menu-grid>.account-panel:first-child{grid-column:1/-1}}@media(max-width:700px){.account-grid,.account-menu-grid,.account-register-grid{grid-template-columns:1fr}.account-menu-grid>.account-panel:first-child,.account-register-grid .full{grid-column:auto}.account-panel{padding:22px}.account-page .pagehero{padding:35px 0}}



/* ==========================================================
   ACCOUNT - CUSTOMER CLASSIFICATION /account/custtype_change.asp
   Keeps account panels and standard buttons consistent.
   ========================================================== */
.account-custtype-layout{max-width:800px;margin:0 auto}
.account-custtype-page .account-intro{max-width:none}
.account-custtype-page .account-panel{background:var(--paper-2)}
.account-custtype-page .account-panel select{display:block;width:100%;min-height:50px;border-radius:0;background:var(--paper);color:var(--ink)}
.account-custtype-page .account-panel select:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px;border-color:var(--green-deep)}
.account-custtype-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.account-custtype-page .account-custtype-actions .btn{min-width:180px}
@media(max-width:680px){
  .account-custtype-actions{flex-direction:column;align-items:stretch}
  .account-custtype-page .account-custtype-actions .btn{width:100%}
}

.account-classification-update{font-size:11px}
.account-tax-form-missing{color:#a02e1f}


/* ==========================================================
   ACCOUNT - SALES TAX INFORMATION /account/sales-tax-info.asp
   Responsive replacement for legacy /taxpop.asp popup.
   ========================================================== */
.account-sales-tax-layout{max-width:900px;margin:0 auto}
.account-sales-tax-content{font-size:16px;line-height:1.75;overflow-wrap:anywhere}
.account-sales-tax-content > :last-child{margin-bottom:0}
.account-sales-tax-content a,.account-tax-info-link a{color:var(--bronze-deep);text-decoration:underline;text-underline-offset:3px}
.account-sales-tax-content :is(ul,ol){padding-left:25px;margin-bottom:20px}
.account-sales-tax-content li{margin-bottom:8px}
.account-sales-tax-content :is(table,img){max-width:100%;height:auto}
.account-sales-tax-seals{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;margin:36px 0 28px;padding:22px;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.account-sales-tax-seals img{display:block;max-width:100%;height:auto}
.account-sales-tax-actions{display:flex;justify-content:flex-start;margin-top:30px}
.account-tax-info-link{margin-top:12px}
@media(max-width:680px){
  .account-sales-tax-content{font-size:15px}
  .account-sales-tax-seals{gap:18px;padding:20px 8px}
  .account-sales-tax-actions .btn{max-width:100%}
}

/* ==========================================================
   ACCOUNT - CHANGE EMAIL ADDRESS /account/emailchange.asp
   ========================================================== */
.account-emailchange-layout{max-width:800px;margin:0 auto}
.account-emailchange-page .account-intro{max-width:none}
.account-emailchange-page .account-panel{background:var(--paper-2)}
.account-emailchange-page .account-panel input[type=email],
.account-emailchange-page .account-panel input[type=text]{display:block;width:100%;min-height:50px;margin-bottom:18px;border-radius:0;background:var(--paper);color:var(--ink)}
.account-emailchange-page .account-panel input:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px;border-color:var(--green-deep)}
.account-emailchange-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.account-emailchange-page .account-emailchange-actions .btn{max-width:100%}
@media(max-width:680px){
  .account-emailchange-actions{flex-direction:column;align-items:stretch}
  .account-emailchange-page .account-emailchange-actions .btn{width:100%}
}