/* Work Sans + clean weight */
.sd-dictionary{
  max-width:1120px;
  margin:0 auto;
  color:#111;
  font-family:'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight:400;
}

/* ---------- FILTER (single inline accordion box) ---------- */
.sd-filterbox{
  display:inline-block;
  padding:0;
  margin:12px 0 24px;
  /* no border at all */
  border:0;
  background:transparent;
}
.sd-filterbtn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  color:#111;
  font-size:16px;
  font-weight:400; /* lighter */
  line-height:1;
}
.sd-filterbtn-left{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.sd-filtericon{display:inline-flex}
.sd-filterchev{display:inline-flex}
.sd-filterx{
  display:none;
  font-size:20px;
  line-height:1;
  margin-left:6px;
}

/* open state: chevron -> X, but same position/size */
.sd-filterbox.is-open .sd-filterchev{display:none}
.sd-filterbox.is-open .sd-filterx{display:inline}

/* content expands under the SAME box (no popover) */
.sd-filtercontent{
  max-height:0;
  overflow:hidden;
  transition:max-height 220ms ease;
  margin-top:10px;
}
.sd-filterbox.is-open .sd-filtercontent{
  max-height:420px;
}

/* smaller text inside filter list */
.sd-filteropt{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:14px 0;
  font-size:14px;
  font-weight:400;
}
.sd-filteropt input{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:#111; /* checked black */
}
.sd-filteropt span{
  display:block;
  max-width:360px; /* prevents widening / keeps same button width feel */
  line-height:1.25;
}

/* ---------- HEADINGS (lighter) ---------- */
.sd-category{margin:30px 0 0}
.sd-category-title{
  font-size:44px;
  line-height:1.05;
  margin:0 0 14px;
  font-weight:400 !important; /* requested */
}
.sd-letter{
  font-size:26px;
  margin:0 0 10px;
  font-weight:400; /* requested */
}

/* Letter grid */
.sd-letter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width: 980px){
  .sd-letter-grid{grid-template-columns:repeat(2,1fr)}
  .sd-category-title{font-size:36px}
}
@media (max-width: 620px){
  .sd-letter-grid{grid-template-columns:1fr}
  .sd-category-title{font-size:30px}
}

/* Cards */
.sd-cards-col{display:flex;flex-direction:column;gap:22px}
.sd-card{background:#fff;border-radius:0;overflow:hidden;opacity:1;transition:opacity 160ms ease}
/* Force image size smaller (theme-proof) */
.sd-card-media img{
  width:100% !important;
  height:90px !important;
  max-height:90px !important;
  min-height:90px !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

/* Bar + body background */
.sd-card-bar{
  width:100%;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 14px;border:0;border-radius:0;
  background:#E0D9CE;
  cursor:pointer;
}
.sd-card-title{font-size:18px;font-weight:500;text-align:left;margin:0;color:#111}

/* Chevron circle */
.sd-card-chevron{
  width:30px;height:30px;border-radius:999px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform 220ms ease;
}
.sd-card-bar[aria-expanded="true"] .sd-card-chevron{transform:rotate(180deg)}

/* Expand */
.sd-card-body{
  max-height:0;overflow:hidden;transition:max-height 260ms ease;
  border-top:1px solid rgba(0,0,0,.06);
  background:#E0D9CE;
}
.sd-card-body-inner{padding:14px 14px 18px;max-height:220px;overflow:auto}

/* Vegan row */
.sd-vegan-row{display:flex;align-items:center;gap:10px;margin:6px 0 10px;color:#111;font-size:16px;font-weight:400}
.sd-vegan-icon{
  width:30px;height:30px;border-radius:999px;
  border:2px solid #111;display:flex;align-items:center;justify-content:center;
}
.sd-divider{border:0;border-top:1px solid rgba(0,0,0,.25);margin:12px 0 14px}

/* v3.10.2: Flowing grid to avoid empty gaps (JS converts letter-columns into this) */
.sd-items-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px 28px;
  align-items:start;
}
@media (max-width: 980px){
  .sd-items-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 620px){
  .sd-items-grid{grid-template-columns:1fr;}
}
.sd-letter-first::before{
  content: attr(data-letter);
  display:block;
  font-weight:400 !important;
  font-size:26px;
  margin:0 0 10px;
  color:#111;
}

/* v3.10.5: Keep letters OUTSIDE cards (above) AND align all cards on the same row.
   We reserve the same "letter space" for every card, but only the first card of each letter shows the letter text. */
.sd-items-grid .sd-card::before{
  content:"" !important;
  display:block !important;
  height:34px !important;        /* reserved space for letter */
  margin:0 0 10px 0 !important;  /* gap between letter and image */
  position:static !important;
}
.sd-items-grid .sd-letter-first::before{
  content: attr(data-letter) !important;
  font-weight:400 !important;
  font-size:26px !important;
  line-height:34px !important;
  color:#111 !important;
  height:34px !important;
  margin:0 0 10px 0 !important;
  position:static !important;
}

/* v3.10.6: Fade card without affecting title/letters (parent opacity affects children) */
.sd-card{position:relative}
.sd-card::after{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  background:rgba(255,255,255,0.40);
  pointer-events:none;
  z-index:1;
  transition:opacity 160ms ease;
}
.sd-card.is-open::after{opacity:0}
.sd-card-bar,
.sd-letter-first::before{position:relative;z-index:2}
.sd-card-media,
.sd-card-body{position:relative;z-index:0}

/* v3.10.8: Keep letters readable by not fading the letter row area */
.sd-card::after{
  top:44px !important; /* 34px letter row + 10px gap */
}

/* v3.10.8: Keep card heights consistent by clamping long titles when collapsed */
.sd-card:not(.is-open) .sd-card-title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
}

/* Ensure title bar height stays consistent across cards */
.sd-card-bar{
  min-height:64px;
}

/* When open, show full title */
.sd-card.is-open .sd-card-title{
  display:block;
  -webkit-line-clamp:unset;
  overflow:visible;
}

/* Mobile: smaller letter headings */
@media (max-width: 620px){
  .sd-letter-first::before{font-size:20px !important;}
}

/* v3.10.9: Clamp titles to ONE line with ellipsis when collapsed */
.sd-card:not(.is-open) .sd-card-title{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* When open, show full title (wrap as needed) */
.sd-card.is-open .sd-card-title{
  white-space:normal !important;
  overflow:visible !important;
}

/* Letter size 20px when screen < 500px */
@media (max-width: 500px){
  .sd-letter-first::before{
    font-size:20px !important;
  }
}

/* v3.11.0: Keep chevron button perfectly round (no compression) */
.sd-card-chevron{
  flex:0 0 30px !important;
  min-width:30px !important;
  min-height:30px !important;
  width:30px !important;
  height:30px !important;
  border-radius:999px !important;
}
.sd-card-bar{
  align-items:center;
}

/* Letter size: 20px when viewport <= 500px (extra-safe selectors) */
@media (max-width: 500px){
  .sd-letter-first::before{
    font-size:20px !important;
  }
}
/* Some themes set container scaling; also cover device-width media */
@media (max-device-width: 500px){
  .sd-letter-first::before{
    font-size:20px !important;
  }
}

/* v3.11.1: On hover, remove fade overlay (full opacity preview) */
.sd-card:hover::after{
  opacity:0 !important;
}