/* ============================================================
   category.css — Just Bake listing page (category + sub-category)
   ============================================================ */

/* ============ TOKENS ============ */
:root{
  --head-color:#1D364D;
  --text-color:#3C4B64;
  --livid-macaron:#AECDDD;
  --creamwhip:#E3CBA9;
  --golden-brown:#93400C;
  --amber:#E59819;
  --grey:#726C6C;
  --edge:#EDEEF3;
  --f3:#F3F3F3;
  --pearl-white:#FAFCFE;
  --unhatched:#E8EAE4;
  --line:#C9D0D8;
  --rust:#84461F;
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --shell:1440px;
  --rail:316px;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--unhatched);color:var(--text-color);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;color:var(--head-color)}
:focus-visible{outline:2px solid var(--head-color);outline-offset:2px;border-radius:4px}

/* ============ PAGE SHELL ============ */
.wrap{margin:0 auto;padding:0 var(--gutter) 30px}
.page-head{border-top:1px solid #F6FAFF;padding-top:20px;border-bottom:1px solid #F6FAFF}
.page-head hr{border:0;border-top:1px solid #fff;margin:0}
h1{margin:0 0 30px;font-size:40px;line-height:1.2;color:#19325C;font-weight:400 !important;letter-spacing:-.3px}

.page-head-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.page-head-row h1{margin:0 0 20px}
.page-head-row .breadcrumb{background:none;padding:0;margin:0 0 20px}

/* ============ BREADCRUMB ============ */
.breadcrumb{margin:0 0 6px}
.breadcrumb ol{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:0;padding:0;list-style:none;
}
.breadcrumb li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--grey);white-space:nowrap}
.breadcrumb li a{color:#19325C;text-decoration:none;transition:color .15s ease}
.breadcrumb li a:hover{color:var(--head-color)}
.breadcrumb li[aria-current="page"]{color:var(--head-color);font-weight:500}
.breadcrumb li.sep{color:#B9C3CF}
.breadcrumb li.sep svg{display:block;width:14px;height:14px}
.breadcrumb svg{display:block}

/* ============ LISTING LAYOUT ============ */
.listing{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:22px;padding-top:26px;align-items:start;
}
.side-head{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.results-row{grid-column:2;grid-row:1;display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-bottom:16px}
.filters{grid-column:1;grid-row:2}
.grid{grid-column:2;grid-row:2}

.count{margin:0;font-size:17px;font-weight:400;color:#140342;flex:none}
.side-head strong{font-size:17px;font-weight:400;color:#140342}
.side-head button{font-size:15px;color:var(--grey)}

/* ============ FILTER SIDEBAR ============ */
.filters{background:var(--pearl-white);border-radius:6px;padding:18px}

.mode{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode button{height:42px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--head-color);font-size:15px}
.mode button[aria-pressed="true"]{background:#41546E;border-color:#41546E;color:#fff}
.mode-note{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--text-color)}

/* Express Cakes page: single locked pill, no Scheduled option */
.mode-locked{grid-template-columns:1fr}
.mode button:disabled{
  background:#41546E;border-color:#41546E;color:#fff;
  cursor:default;opacity:1;
}

.facet{border-top:1px solid var(--line);margin-top:18px;padding-top:6px}
.facet:first-of-type{border-top:0;margin-top:8px}
.facet-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;font-size:18px;font-weight:600;color:var(--head-color);
}
.facet-head svg{transition:transform .18s ease;color:var(--head-color);flex:none}
.facet-head[aria-expanded="false"] svg{transform:rotate(180deg)}
.facet-body{padding-bottom:14px}
.facet-body[hidden]{display:none}

.filter-row{
  display:flex;align-items:center;gap:12px;padding:7px 0;
  font-size:15px;color:var(--text-color);cursor:pointer;
}
.filter-row .label{flex:1;min-width:0}
.filter-row .num{color:var(--grey);font-size:14px;flex:none}
.filter-row input:disabled + .label{color:var(--head-color);font-weight:600}

/* ---- custom checkbox / radio ---- */
input[type=checkbox],input[type=radio]{
  appearance:none;-webkit-appearance:none;flex:none;margin:0;width:22px;height:22px;
  border:1.5px solid var(--head-color);background:#fff;cursor:pointer;position:relative;
}
input[type=checkbox]{border-radius:6px;border-color:#B9C3CF}
input[type=checkbox]:checked{background:#41546E;border-color:#41546E}
input[type=checkbox]:checked::after{
  content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
input[type=checkbox]:disabled{opacity:.85;cursor:default}
input[type=radio]{border-radius:50%}
input[type=radio]:checked::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--head-color)}

.show-more{width:100%;height:40px;margin-top:12px;border-radius:6px;background:#41546E;color:#fff;font-size:15px}

/* ---- range slider ---- */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;margin:10px 0 18px;
  background:linear-gradient(var(--livid-macaron),var(--livid-macaron));cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--head-color);border:3px solid #DCE7F0;box-shadow:0 0 0 1px var(--head-color);
}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--head-color);border:3px solid #DCE7F0;
}

.boxes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.boxes.one{grid-template-columns:1fr;max-width:96px}
.boxes input[type=text]{
  width:100%;height:42px;border:1px solid var(--line);border-radius:6px;
  background:#fff;padding:0 14px;outline:none;font-size:15px;
}

.stars{display:inline-flex;gap:3px}
.stars svg{width:14px;height:14px;fill:var(--amber)}

/* ============ PRODUCT GRID ============ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 24px}

/* grid items default to min-width:auto and refuse to shrink —
   without min-width:0 the title can never ellipsis, it just widens */
.grid > .pcard{min-width:0}
.pcard{display:flex;flex-direction:column;min-width:0}

.shot{
  position:relative;display:block;border-radius:6px;overflow:hidden;
  aspect-ratio:314/300;background:#EDE7DF;
}
.shot img{width:100%;height:100%;object-fit:cover}
.off{
  position:absolute;top:12px;right:12px;background:#fff;border-radius:6px;padding:5px 8px;
  font-size:11px;font-weight:600;line-height:1.15;text-align:center;color:#000;
}

/* ---- title row ---- */
.pcard-title{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin:14px 0 0;min-width:0;
}

/* the h2 is a flex row so the JS chevron sits beside the name on the
   same line — overflow must stay visible or the button gets clipped */
.pcard-title h2{
  flex:1 1 auto;min-width:0;margin:0;
  display:flex;align-items:baseline;gap:4px;
  overflow:visible;
  font-size:17px;font-weight:500;line-height:1.35;color:var(--head-color);
}

/* the name does the clipping. text-overflow is clip, not ellipsis:
   pname.js draws a ▾ chevron and two indicators read as a bug */
.pname{
  flex:1 1 auto;min-width:0;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:clip;
  color:inherit;text-decoration:none;
}
.pname.is-expanded{white-space:normal;overflow:visible}

/* the ▾ / ▴ toggle, injected by pname.js only when the name overflows */
.pname-more{
  flex:0 0 auto;padding:0 2px;line-height:1;
  font-size:11px;color:var(--grey);
  background:none;border:0;cursor:pointer;
}
.pname-more:hover{color:var(--head-color)}

.pcard-rate{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;font-size:15px;color:var(--head-color);
}
.pcard-rate svg{width:14px;height:14px;fill:#CDAF8C}

/* ---- foot row ----
   Neither child may shrink below its content: min-width:0 here is what
   let the price truncate to "₹ 6" while the button slid on top of it.
   With flex:0 0 auto on both, a card too narrow for the pair wraps the
   button onto its own line instead of overlapping. */
.pcard-foot{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;row-gap:8px;margin-top:16px;
}
.price-row{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.price{font-size:16px;font-weight:500;color:var(--rust);white-space:nowrap}
.weight-pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:26px;padding:0 12px;border-radius:8px;
  background:#EDF0F8;color:#1B3358;
  font-size:12px;font-weight:500;line-height:1;white-space:nowrap;
}
.add{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:6px 18px;border-radius:6px;
  background:#41546E;color:#fff;font-size:15px;white-space:nowrap;
}
.add svg{width:17px;height:17px;flex:none}

.no-results{grid-column:1/-1;text-align:center;padding:40px 0;color:var(--text-color);font-size:16px}

/* ============ CARD HOVER ============ */
.shot-holder{position:relative}
.pcard .shot img{transition:filter .3s ease}
.pcard:hover .shot img{filter:sepia(.3) saturate(1.4) brightness(.92) hue-rotate(-8deg)}
.pcard .add{transition:background .25s ease}
.pcard:hover .add{background:var(--rust)}

.pcard .wish-btn{
  position:absolute;bottom:14px;right:14px;width:38px;height:38px;
  border-radius:50%;background:#F6FAFF;border:none;display:flex;
  align-items:center;justify-content:center;color:#7a7a7a;cursor:pointer;
  opacity:0;transform:translateY(8px) scale(.9);
  transition:opacity .25s ease,transform .25s ease,color .2s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:3;
}
.pcard .wish-btn svg{width:18px;height:18px}
.pcard:hover .wish-btn{opacity:1;transform:translateY(0) scale(1)}
.pcard .wish-btn.is-active{color:#E0455F}
.pcard .wish-btn.is-active svg{fill:#E0455F}
.pcard .wish-btn.pop svg{animation:jbHeartPop .35s ease}
@keyframes jbHeartPop{
  0%{transform:scale(1)}
  40%{transform:scale(1.3)}
  100%{transform:scale(1)}
}
@media (hover:none){
  .pcard .wish-btn{opacity:1;transform:none}
}

/* ============ QUANTITY STEPPER ============ */
.add-stepper{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  height:40px;padding:6px 14px;border-radius:6px;background:#41546E;
}
.add-stepper button{
  background:none;border:none;color:#fff;font-size:16px;
  line-height:1;cursor:pointer;padding:0;width:14px;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent;
}
.add-stepper button:focus,
.add-stepper button:active{outline:none;box-shadow:none}
.add-stepper output{font-size:15px;font-weight:500;color:#fff;min-width:14px;text-align:center}

/* ============ BATCH LOADER ============ */
.loadbar{
  grid-column:1/-1;display:none;align-items:center;justify-content:center;gap:11px;
  padding:26px 0 8px;color:var(--text-color);font-size:14px;
}
.loadbar.show{display:flex}
.spin{
  width:20px;height:20px;border:2px solid #C9D0D8;border-top-color:var(--head-color);
  border-radius:50%;animation:jbspin .7s linear infinite;
}
@keyframes jbspin{to{transform:rotate(360deg)}}

/* ============ APPLIED FILTER CHIPS (desktop) ============ */
.applied{display:none;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:0}
.applied.show{display:flex}
.chip-clear{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:6px;
  background:#41546E;color:#fff;font-size:13px;line-height:1;transition:background .15s ease;
}
.chip-clear:hover{background:var(--head-color)}
.chip-clear .x{font-size:16px;line-height:1;opacity:.8}

/* ============ STICKY SIDEBAR — DESKTOP ONLY ============ */
@media (min-width:1025px){
  .filters{
    position:sticky;
    top:24px;   /* JS drifts this so the rail scrolls to its own bottom
                   before it pins — see the sticky-rail script at the
                   foot of the listing pages */
    will-change:top;
  }
}

/* mobile-only chrome, hidden on desktop */
.mfilter{display:none}

/* ============ 1151–1400px: trim the rail ============ */
@media (min-width:1151px) and (max-width:1400px){
  .listing{--rail:270px;column-gap:18px}
  .grid{gap:30px 20px}
}

/* ============ 901–1150px: three cards, narrow rail ============
   The sidebar is the thing to shrink here, not the card count —
   at 316px it left the cards too narrow for price + button. */
@media (min-width:901px) and (max-width:1150px){
  .listing{--rail:228px;column-gap:16px}
  .filters{padding:14px}
  .facet-head{font-size:16px;padding:10px 0}
  .filter-row{font-size:14px;gap:10px;padding:6px 0}
  .filter-row .num{font-size:13px}
  .mode{gap:8px}
  .mode button{height:38px;font-size:14px}
  .mode-note{font-size:13px}
  .boxes{gap:10px}
  .boxes input[type=text]{height:38px;padding:0 10px;font-size:14px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  input[type=checkbox]:checked::after{left:6px;top:3px}

  .grid{gap:26px 16px}
  .pcard-title h2{font-size:15px}
  .pcard-rate{font-size:14px}
  .pcard-rate svg{width:13px;height:13px}
  .pcard-foot{margin-top:12px;gap:8px}
  .price{font-size:15px}
  .weight-pill{height:24px;padding:0 9px;font-size:11px}
  .add{height:36px;padding:0 12px;font-size:13px;gap:6px}
  .add svg{width:15px;height:15px}
  .add-stepper{height:36px;padding:0 12px;gap:12px}
}

/* ============ ≤1024px ============ */
@media (max-width:1024px){
  .about-cards-left,.about-cards-right{flex-direction:row}
  .cat-grid{grid-template-columns:1fr}
  .product-grid,.occ-grid{grid-template-columns:repeat(2,1fr)}
  .t-row{grid-template-columns:1fr}
  .photocake{grid-template-columns:1fr;text-align:center}
  .photocake-img-wrap{order:-1}
}
@media (max-width: 768px){
  .wrap{
    padding-bottom: 20px;
  }
}
/* ============ ≤900px — MOBILE ============ */
@media (max-width:900px){
  .wrap{padding:0 var(--gutter)}
  .page-head{padding-top:16px}
  h1{font-size:28px;margin-bottom:16px}

  .listing{display:flex;flex-direction:column;padding-top:0; padding-bottom:20px;}
  .side-head{display:none}
  .filters{display:none}
  .applied{display:none !important}
  .results-row{order:3;margin:16px 0 14px}
  .count{font-size:16px}
  .mode-note{font-size:13px}

  /* ---- product grid ---- */
  .grid{order:4;grid-template-columns:1fr 1fr;gap:26px 14px}
  .shot{aspect-ratio:170/155;border-radius:6px}
  .off{top:8px;right:8px;padding:4px 6px;font-size:9px}

  /* row 1: name + rating */
  .pcard-title{margin-top:10px;align-items:flex-start;gap:8px}
  .pcard-title h2{font-size:14px;line-height:1.3}
  .pcard-rate{font-size:13px;padding-top:1px}
  .pcard-rate svg{width:12px;height:12px}

  /* rows 2 + 3: price/weight, then a full-width cart control */
  .pcard-foot{
    flex-direction:column;align-items:stretch;
    flex-wrap:nowrap;gap:8px;margin-top:8px;
  }
  .price-row{display:flex;justify-content:flex-start;gap:8px}
  .price{font-size:14px}
  .weight-pill{height:22px;padding:0 10px;font-size:11px;border-radius:6px}

  .cart-controls{width:100%}
  .add{
    width:100%;justify-content:center;
    height:34px;padding:0 10px;font-size:12px;gap:6px;border-radius:6px;
  }
  .add svg{width:14px;height:14px}
  .add-stepper{width:100%;height:34px;padding:0 12px;gap:14px}
  .add-stepper button{width:14px;font-size:14px}
  .add-stepper output{font-size:13px}

  .pcard .wish-btn{width:32px;height:32px;bottom:8px;right:8px}
  .pcard .wish-btn svg{width:15px;height:15px}

  /* ---- sticky filter bar ---- */
  .mfilter{
    display:block;order:2;
    position:sticky;top:0;z-index:40;
    /* .listing is a flex column here — without these the bar grows to fit
       the chips instead of letting them scroll sideways */
    width:100%;min-width:0;max-width:100%;
    margin:0;padding:12px 0 0;
    background:var(--unhatched);
    border-bottom:1px solid rgba(29,54,77,.10);
  }

  .mfilter-head{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px}
  .mfilter-head strong{
    display:inline-flex;align-items:center;gap:8px;
    font-size:17px;font-weight:500;color:#140342;line-height:1;
  }
  .mfilter-head button{font-size:14px;color:var(--grey);line-height:1}
  .mfilter-head .fcount{
    display:none;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 6px;
    border-radius:6px;background:var(--head-color);color:#fff;
    font-size:11px;font-weight:600;line-height:1;
  }
  .mfilter-head.has-count .fcount{display:inline-flex}

  .mrail-wrap{position:relative;min-width:0;overflow:hidden}
  .mrail-wrap::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:26px;pointer-events:none;
    background:linear-gradient(90deg,rgba(232,234,228,0),rgba(232,234,228,.95));
  }
  .mrail{
    display:flex;gap:10px;padding:2px 0 12px;
    width:100%;min-width:0;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:#B4BFCB transparent;
  }
  .mrail::-webkit-scrollbar{height:4px}
  .mrail::-webkit-scrollbar-track{background:transparent}
  .mrail::-webkit-scrollbar-thumb{background:#B4BFCB;border-radius:6px}

  .mchip{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;
    border:1px solid var(--line);border-radius:6px;background:#fff;
    color:var(--head-color);font-size:14px;white-space:nowrap;
    transition:background .15s ease,border-color .15s ease,color .15s ease;
  }
  .mchip .num{color:var(--grey);font-size:13px}
  .mchip .caret{width:13px;height:8px;flex:none;transition:transform .18s ease}
  .mchip[aria-expanded="true"]{border-color:var(--head-color);background:#fff}
  .mchip[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .mchip[aria-pressed="true"],
  .mchip.is-on{background:#41546E;border-color:#41546E;color:#fff}
  .mchip[aria-pressed="true"] .num,
  .mchip.is-on .num{color:rgba(255,255,255,.75)}
  .mchip:disabled{cursor:default;opacity:1}

  .mpanel{
    display:none;margin:0 0 12px;background:var(--pearl-white);
    border:1px solid var(--line);border-radius:6px;padding:4px 16px 12px;
    box-shadow:0 12px 26px rgba(29,54,77,.12);
  }
  .mpanel.open{display:block}
  .mpanel .facet{border-top:0;margin-top:0;padding-top:0}
  .mpanel .facet-head{display:none}            /* the chip is already the heading */
  .mpanel .facet-body{padding-bottom:4px}
  .mpanel .facet-body[hidden]{display:block}   /* never collapsed inside a panel */
  .mpanel .filter-row{padding:10px 0}
  .mpanel .filter-row + .filter-row{border-top:1px solid #EFF2F6}
  .mpanel input[type=range]{margin:14px 0 16px}
  .mpanel-foot{
    display:flex;justify-content:space-between;align-items:center;
    border-top:1px solid var(--line);margin-top:6px;padding-top:12px;
  }
  .mpanel-foot button{font-size:14px;color:var(--grey)}
  .mpanel-foot .done{height:36px;padding:0 20px;border-radius:6px;background:#41546E;color:#fff;font-size:14px}
}

/* ============ ≤600px ============ */
@media (max-width:600px){
  .page-head-row{flex-direction:column;align-items:flex-start;gap:8px}
  .breadcrumb{order:-1;margin:0 0 4px}
  .breadcrumb li{font-size:12px}
}

/* ============ MOTION ============ */
@media (prefers-reduced-motion:no-preference){
  .mode button,.add,.show-more{transition:background-color .15s ease,color .15s ease}
}

/* =====================================================================
   MOBILE FILTER: trigger row + two-pane drawer
   Replaces the old .mrail chip strip. Everything sits inside the same
   768px query the rail used, so the desktop sidebar is untouched.
   .mfilter also carries style="display:none" inline, so a stale copy of
   this file hides the trigger rather than dumping raw markup on the
   page - !important is what lets the query beat that inline style.
   ===================================================================== */
.mfd{display:none}

@media (max-width:768px){

  /* the row reads "Filters ⌄" on the left, "Clear All" on the right,
     exactly like the old .mfilter-head - no box, no background */
  .mfilter{
    display:flex !important;align-items:center;justify-content:space-between;
    gap:12px;padding:14px 0px;
  }
  .mfilter-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:0;border:0;background:transparent;color:#19325C;
    font-family:var(--font-secondary);font-size:16px;line-height:1;
  }
  .mfilter-btn strong{font-weight:500}
  /* the caret sits straight after the word, not pushed to the edge */
  .mfilter-btn .caret{width:14px;height:9px;flex:0 0 auto;transition:transform .18s ease}
  .mfilter-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .mfilter-btn .fcount{
    display:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
    background:#19325C;color:#fff;font-size:12px;
    align-items:center;justify-content:center;
  }
  .mfilter-btn.has-count .fcount{display:inline-flex !important}

  .mfilter #mclear{
    padding:0;border:0;background:transparent;
    font-family:var(--font-secondary);font-size:14px;color:var(--grey,#5A6B84);line-height:1;
  }

  /* ---- drawer ---- */
  .mfd{display:block;position:fixed;inset:0;z-index:9999}
  .mfd[hidden]{display:none !important}
  .mfd-scrim{position:absolute;inset:0;background:rgba(29,54,77,.45)}

  .mfd-sheet{
    position:absolute;left:0;right:0;bottom:0;
    display:flex;flex-direction:column;max-height:88vh;
    background:#fff;border-radius:16px 16px 0 0;overflow:hidden;
  }

  .mfd-head{
    display:flex;align-items:center;gap:12px;padding:14px 16px;
    background:#19325C;color:#F6FAFF;flex:0 0 auto;
  }
  .mfd-head strong{font-family:var(--font-secondary);font-size:16px;font-weight:500}
  .mfd-back{
    display:flex;align-items:center;justify-content:center;width:26px;height:26px;
    padding:0;border:0;background:transparent;color:#F6FAFF;
  }
  .mfd-count{margin-left:auto;font-size:13px;color:#CDAF8C}

  /* two panes, each scrolling on its own so a long option list never
     drags the group column out of view */
  .mfd-main{display:flex;flex:1 1 auto;min-height:0}

  .mfd-groups{
    width:132px;flex:0 0 auto;overflow-y:auto;
    background:#F6F4EF;border-right:1px solid #E7E2D8;
  }
  .mfd-group{
    display:flex;align-items:center;gap:6px;width:100%;padding:15px 12px;
    border:0;border-left:3px solid transparent;background:transparent;text-align:left;
    font-family:var(--font-secondary);font-size:14px;color:#5A6B84;line-height:1.2;
  }
  .mfd-group.is-on{background:#fff;color:#19325C;border-left-color:#CDAF8C}
  .mfd-group .n{
    margin-left:auto;background:#19325C;color:#fff;
    font-size:11px;border-radius:9px;padding:1px 6px;
  }

  .mfd-body{flex:1 1 auto;min-width:0;overflow-y:auto;padding:6px 14px}
  /* the borrowed facet drops its sidebar chrome inside the drawer */
  .mfd-body .facet{border:0;padding:0;margin:0}
  .mfd-body .facet-head{display:none}
  .mfd-body .facet-body{display:block !important;padding:6px 0}
  .mfd-body .mode{display:flex;gap:10px;padding:10px 0}
  .mfd-body .mode button{flex:1}
  .mfd-body .mode-note{font-size:13px;color:#5A6B84;margin:4px 0 0}

  .mfd-foot{display:flex;flex:0 0 auto;border-top:1px solid #E7E2D8}
  .mfd-foot button{
    flex:1;padding:14px;border:0;background:#fff;
    font-family:var(--font-secondary);font-size:15px;color:#5A6B84;
  }
  .mfd-foot #mfdClear{border-right:1px solid #E7E2D8}
  .mfd-foot .done{background:#19325C;color:#fff;font-weight:500}
}

/* SEO copy above the footer - same rules as index1.css so the
   listing pages and the homepage render this block identically. */
.seo-block{
  background:#e5e4e3;
  padding:36px var(--gutter);
  border-top:1px solid #EADFCF;
}
.seo-block h2{
  font-family: var(--font-secondary);
  font-style:normal;
  font-size:32px;
  line-height:1.2;
  color:#19325C;
  margin:0 0 16px;
}
.seo-block h3{
  font-family: var(--font-secondary);
  font-style:normal;
  font-size:22px;
  line-height:1.25;
  color:#19325C;
  margin:28px 0 10px;
}
.seo-block p{
  font-family:var(--font-secondary);
  font-size:15px;
  line-height:1.75;
  color:#425671;
  margin:0 0 12px;
}
.seo-list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
}
.seo-list li{
  position:relative;
  padding-left:22px;
  font-family:var(--font-secondary);
  font-size:15px;
  line-height:1.75;
  color:#425671;
  margin-bottom:8px;
}
.seo-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#CDAF8C;
}
.seo-list strong{color:#19325C;font-weight:600}

@media (max-width:768px){
  .seo-block{padding:36px var(--gutter)}
  .seo-block h2{font-size:24px}
  .seo-block h3{font-size:19px}
  .seo-block p,.seo-list li{font-size:14px;line-height:1.7}}