/* Generated from shop.html <style> by scripts/build-wp-shop.py */
  :root{--paper:#F3EEE1;--paper-raise:#FAF5EA;--ink:#17140F;--ink-soft:#6F6353;--gold:#B08D3E;--gold-bright:#CDA85A;--fig:#5A2330;--pistachio:#7C8A4E;--hairline:rgba(23,20,15,0.12)}
  html.no-js .reveal{opacity:1;transform:none}
  *{box-sizing:border-box}html,body{margin:0;padding:0}
  body{background:var(--paper);color:var(--ink);font-family:'Hanken Grotesk',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  ::selection{background:var(--gold);color:#fff}
  h1,h2,h3,h4{font-family:'Cormorant',serif;font-weight:600;letter-spacing:-0.005em;line-height:1.05;margin:0}
  p{line-height:1.7;margin:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
  .wrap{max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px}@media(min-width:768px){.wrap{padding-left:40px;padding-right:40px}}
  .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
  .grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.4;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E")}
  .nav{position:sticky;top:0;z-index:50;background:rgba(243,238,225,.85);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hairline)}
  .ulink{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .4s cubic-bezier(.22,1,.36,1)}
.ulink:hover{text-decoration-color:var(--gold)}
/* Primary nav: a hairline of gold drawn under the word, not a browser underline.
   It grows from the left on hover and retracts to the right on leave, and the
   current page keeps its own drawn, so "here" and "going here" speak the same
   language instead of two. */
.nav nav a.ulink{position:relative}
.nav nav a.ulink,.nav nav a.ulink:hover{text-decoration-color:transparent}
.nav nav a.ulink::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transform:scaleX(0);transform-origin:right center;
  transition:transform .42s cubic-bezier(.22,1,.36,1)}
.nav nav a.ulink:hover::after,.nav nav a.ulink:focus-visible::after,.nav nav a.ulink.active::after{
  transform:scaleX(1);transform-origin:left center}
.nav nav a.ulink:focus-visible{outline:2px solid var(--fig);outline-offset:6px;border-radius:3px}
@media(prefers-reduced-motion:reduce){
  .nav nav a.ulink::after{transform:scaleX(1);opacity:0;transition:opacity .2s}
  .nav nav a.ulink:hover::after,.nav nav a.ulink:focus-visible::after,.nav nav a.ulink.active::after{opacity:1}}
  .nav a.active{color:var(--gold)}
  .btn{position:relative;display:inline-flex;align-items:center;gap:.6em;padding:15px 28px;border-radius:999px;font-weight:600;font-size:14px;overflow:hidden;will-change:transform}
  .btn-ghost{border:1px solid var(--hairline);color:var(--ink)}.btn-ghost:hover{border-color:var(--ink)}
  .btn:focus-visible{outline:2px solid var(--fig);outline-offset:3px}
  .pcard{background:var(--paper-raise);border:1px solid var(--hairline);border-radius:18px;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
  .card-photo{transition:transform .6s cubic-bezier(.2,.7,.2,1)}.pcard:hover .card-photo{transform:scale(1.045)}
  @media (prefers-reduced-motion:reduce){.card-photo{transition:none}.pcard:hover .card-photo{transform:none}}
  .pcard:hover{transform:translateY(-8px);box-shadow:0 34px 60px -28px rgba(90,35,48,.35)}
  .pcard .art{transition:transform .9s cubic-bezier(.2,.7,.2,1)}.pcard:hover .art{transform:scale(1.05)}
  .chip{border:1px solid var(--hairline);border-radius:999px;padding:9px 18px;font-size:13px;font-weight:600;white-space:nowrap;transition:.25s}.chip.on,.chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .vpill{border:1px solid var(--hairline);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:600;transition:.25s;cursor:pointer}.vpill.on,.vpill:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .addbtn{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s,box-shadow .35s}
  .addbtn svg{width:16px;height:16px;display:block}
  .addbtn:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(176,141,62,.65)}
  .addbtn:active{transform:translateY(0) scale(.93);transition-duration:.1s}
  .addbtn:focus-visible{outline:2px solid var(--fig);outline-offset:2px}
  .fcheck{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:14px;color:var(--ink-soft);border-bottom:1px solid var(--hairline);transition:color .2s;cursor:pointer}.fcheck:hover{color:var(--ink)}.fcheck.on{color:var(--ink);font-weight:600}
  .fcheck .box{width:18px;height:18px;border:1.5px solid var(--hairline);border-radius:5px;position:relative;transition:background .2s,border-color .2s}
  .fcheck.on .box{background:var(--ink);border-color:var(--ink)}
  .fcheck.on .box::after{content:"";position:absolute;left:50%;top:47%;width:4px;height:8px;border:solid var(--paper);border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
  .reveal{opacity:0;transform:translateY(22px)}
  .hide-sb::-webkit-scrollbar{display:none}.hide-sb{scrollbar-width:none}
  /* filter rail scrolls internally when taller than the viewport, with a slim on-brand scrollbar */
  .filter-rail{scrollbar-width:thin;scrollbar-color:rgba(23,20,15,.22) transparent}
  .filter-rail::-webkit-scrollbar{width:6px}
  .filter-rail::-webkit-scrollbar-thumb{background:rgba(23,20,15,.2);border-radius:3px}
  .filter-rail::-webkit-scrollbar-thumb:hover{background:rgba(23,20,15,.34)}
  .filter-rail::-webkit-scrollbar-track{background:transparent}
  /* filters panel: static sidebar on desktop, slide-in drawer on mobile */
  .filter-toggle,.filters-close,.filters-done{display:none}
  @media (max-width:1023px){
    .filters-panel{position:fixed;top:0;left:0;bottom:0;width:min(340px,88vw);z-index:95;
      background:var(--paper);border-right:1px solid var(--hairline);
      box-shadow:34px 0 70px -34px rgba(23,20,15,.5);
      transform:translateX(-102%);transition:transform .44s cubic-bezier(.6,.02,.1,1);
      overflow-y:auto;padding:24px 20px 28px;overscroll-behavior:contain}
    .filters-panel.open{transform:none}
    .filters-panel .sticky{position:static;max-height:none;overflow:visible;padding-right:0}
    .filters-close{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
      border-radius:999px;border:1px solid var(--hairline);color:var(--ink);background:var(--paper-raise);
      transition:border-color .2s,color .2s,background .2s}
    .filters-close:hover{border-color:var(--ink);color:var(--gold)}
    .filters-close:focus-visible{outline:2px solid var(--fig);outline-offset:2px}
    .filters-done{display:block;width:100%;margin-top:22px;padding:14px;border-radius:999px;
      background:var(--ink);color:var(--paper);font-weight:600;font-size:14px;letter-spacing:.01em;
      transition:background .2s,transform .1s}
    .filters-done:hover{background:var(--fig)}
    .filters-done:active{transform:scale(.98)}
    .filters-scrim{position:fixed;inset:0;z-index:94;background:rgba(23,20,15,.5);
      opacity:0;visibility:hidden;transition:opacity .44s ease,visibility .44s ease}
    .filters-scrim.open{opacity:1;visibility:visible}
    .filter-toggle{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
      border:1px solid var(--hairline);background:var(--paper);color:var(--ink);
      font-size:13px;font-weight:600;letter-spacing:.01em;transition:border-color .2s,color .2s;cursor:pointer}
    .filter-toggle:hover{border-color:var(--ink);color:var(--gold)}
    .filter-toggle:focus-visible{outline:2px solid var(--fig);outline-offset:2px}
    .filter-toggle .ft-count:empty{display:none}
    .filter-toggle .ft-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;
      background:var(--gold);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
  }
  @media (prefers-reduced-motion:reduce){
    .filters-panel,.filters-scrim{transition:opacity .01s}
  }
  /* custom select (no native dropdowns) */
  .csel{position:relative;font-size:14px}
  .csel-btn{display:inline-flex;align-items:center;gap:14px;min-width:190px;justify-content:space-between;background:var(--paper);border:1px solid var(--hairline);border-radius:999px;padding:10px 16px;font-weight:500;color:var(--ink);transition:border-color .2s,box-shadow .2s;cursor:pointer}
  .csel-btn:hover{border-color:var(--ink)}
  .csel-btn:focus-visible{outline:2px solid var(--fig);outline-offset:2px}
  .csel.open .csel-btn{border-color:var(--ink);box-shadow:0 0 0 3px rgba(176,141,62,.16)}
  .csel-btn svg{transition:transform .3s cubic-bezier(.6,.05,.1,1);color:var(--ink-soft);flex:none}
  .csel.open .csel-btn svg{transform:rotate(180deg)}
  .csel-list{position:absolute;top:calc(100% + 8px);right:0;min-width:100%;background:var(--paper-raise);border:1px solid var(--hairline);border-radius:12px;box-shadow:0 26px 50px -24px rgba(23,20,15,.45);padding:6px;z-index:40;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s}
  .csel.open .csel-list{opacity:1;visibility:visible;transform:none}
  .csel-opt{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:8px;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s;color:var(--ink-soft)}
  .csel-opt:hover,.csel-opt.active{background:rgba(23,20,15,.06);color:var(--ink)}
  .csel-opt[aria-selected="true"]{color:var(--ink);font-weight:600}
  .csel-opt .tick{opacity:0;color:var(--gold);font-weight:700}
  .csel-opt[aria-selected="true"] .tick{opacity:1}
  @media(prefers-reduced-motion:reduce){.csel-list,.csel-btn svg{transition:none}}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}*{scroll-behavior:auto!important}}
/* ---------- the toolbar ----------
   Every control is sized by its own text, so "3 categories" and "Price: High
   to Low" are never clipped, and the row wraps rather than overlapping or
   pushing the page sideways. Each label stays on one line; the row is what
   gives way. */
.shop-bar{flex-wrap:wrap;gap:10px 12px;align-items:center}
.shop-bar > div{min-width:0;flex-wrap:wrap;gap:10px 12px}
.shop-bar .csel{flex:0 0 auto}
.shop-bar .csel-btn{flex:0 0 auto;min-width:0;white-space:nowrap}
.shop-bar .csel-cur{white-space:nowrap}
.shop-bar .filter-toggle{flex:0 0 auto;white-space:nowrap}
.csel-cats.has-value .csel-btn{border-color:var(--ink);color:var(--ink)}
/* The menus hang off the button in fixed position (placed by js/shop.js), so
   no scrolling row, overflow rule or stacking context can cut one off, and a
   button near the edge of the screen still gets a menu that fits. */
.shop-bar .csel-list{
  position:fixed;top:auto;left:auto;right:auto;
  min-width:184px;max-width:calc(100vw - 24px);
  max-height:min(62vh,440px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:639.98px){
  .shop-bar{gap:8px}
  .shop-bar > div{gap:8px}
  .shop-count{font-size:13px;white-space:nowrap}
  .shop-count-lbl{display:none}
}
/* Loading skeleton: shown in the markup until the catalogue renders, so the page never opens blank. */
.skel{display:block;position:relative;overflow:hidden;background:rgba(23,20,15,.07);border-radius:8px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(250,245,234,.75),transparent);animation:sdfSkel 1.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sdfSkel{to{transform:translateX(100%)}}
.skel-chip{height:40px;border-radius:999px;flex:none}
.skel-card{background:var(--paper-raise);border:1px solid var(--hairline);border-radius:18px;overflow:hidden}
.skel-img{aspect-ratio:4/5;border-radius:0}
.skel-line{height:11px;margin-bottom:12px}
.skel-line.lg{height:20px}
.skel-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.skel-foot .skel-line{margin:0}
.skel-dot{width:42px;height:42px;border-radius:50%;flex:none}
.skel-row{padding:13px 0;border-bottom:1px solid var(--hairline)}
.skel-row .skel{height:12px}
#count .skel{display:inline-block;width:20px;height:12px;vertical-align:-1px}
#grid[aria-busy="true"] .skel-card:nth-child(n+3){display:none}
@media(min-width:640px){#grid[aria-busy="true"] .skel-card:nth-child(n+3){display:block}}
@media(prefers-reduced-motion:reduce){.skel::after{animation:none}}
/* the search blurb is empty until a search fills it in */
.sdf-empty-hide:empty{display:none}
/* Desktop: the drawer overlay is never shown, and must not take a grid cell. */
@media(min-width:1024px){.filters-scrim{display:none}}

/* ---------- phones: two per row, and filters as dropdowns ----------
   Cards get half the width, so the text and the button centre up and the
   button carries its label. The category pills become a multi-select dropdown
   in the toolbar, the Filters dropdown keeps the price options, and the product
   count is stated once (the header's copy is hidden, the live one stays). */
@media(max-width:639.98px){
  #chips{display:none!important}
  #cat-count{display:none!important}

  #grid{gap:10px}
  .pcard{border-radius:14px}
  .pcard > div:last-child{padding:10px 10px 12px;text-align:center}
  .pcard > div:last-child > div:first-child{font-size:9px;letter-spacing:.12em;margin-bottom:4px}
  .pcard h3{font-size:14px;line-height:1.3;min-height:36px;margin-bottom:2px}
  .pcard > div:last-child > div:nth-child(3){font-size:11px;margin-bottom:8px}
  .pcard > div:last-child > div:last-child{flex-direction:column;align-items:center;justify-content:center;gap:8px}
  .pcard > div:last-child > div:last-child > div{display:flex;align-items:baseline;justify-content:center;gap:6px}
  .pcard > div:last-child > div:last-child > div span:first-child{font-size:16px}
  .pcard .addbtn{
    width:100%;height:40px;border-radius:999px;gap:7px;
    font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:600;letter-spacing:.01em}
  .pcard .addbtn svg{width:14px;height:14px}
  .pcard .addbtn-txt{display:inline}
  .pcard .absolute.z-10.top-3.left-3{top:8px;left:8px;font-size:10px;padding:2px 7px}

  /* Categories, Filters and Featured on one line, and nothing else on it. The
     count was a second row for a number the header already gives. */
  .shop-count{display:none!important}
  .shop-bar .csel-btn{padding:9px 12px;font-size:12.5px;gap:7px}
  .csel-cats{order:-1}

  /* the three price options read as one row of choices */
  #f-price{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  #f-price .vpill{
    display:inline-flex;align-items:center;justify-content:center;
    height:38px;padding:0 6px;font-size:11.5px;white-space:nowrap}
}
/* the add button keeps its icon-only round shape from small tablets up */
@media(min-width:640px){.pcard .addbtn-txt{display:none}}
/* The Categories dropdown stands in for the pills and the sidebar's category
   list, both of which a phone does not show. Anywhere else it would duplicate
   the list that is already on screen. */
@media(min-width:640px){.csel-cats{display:none}}

/* ---------- filters as a dropdown, not a drawer (phones and tablets) ---------- */
@media(max-width:1023px){
  .filters-panel{
    top:auto;left:12px;right:12px;bottom:auto;width:auto;max-width:none;
    max-height:min(60vh,460px);overflow-y:auto;
    background:var(--paper-raise);border:1px solid var(--hairline);border-right:1px solid var(--hairline);
    border-radius:16px;box-shadow:0 30px 60px -28px rgba(23,20,15,.5);
    padding:16px 16px 18px;
    transform:translateY(-8px) scale(.99);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s,transform .24s cubic-bezier(.22,1,.36,1),visibility .24s}
  .filters-panel.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .filters-scrim{background:rgba(23,20,15,.32)}
  .filters-panel .filter-rail{max-height:none}
  /* categories have their own dropdown on phones; this panel is the price */
  .filters-panel h3{font-size:18px}
  .filters-panel .filters-done{margin-top:16px;padding:12px}
}
@media(max-width:639.98px){
  /* categories live in their own dropdown on phones, so the whole category
     block (heading included) and the reassurance card come out of this panel */
  .filters-panel #f-cat-block{display:none}
  .filters-panel .rounded-2xl{display:none}
}
@media(prefers-reduced-motion:reduce){.filters-panel{transition:opacity .01s}}
/* Sorting lives in the toolbar on a desktop, where there is room for it, and
   inside the Filters panel on a phone, where the toolbar is Categories and
   Filters and nothing else. One setting, one place to change it per size. */
#f-sort-block{display:none}
@media(max-width:639.98px){
  #f-sort-block{display:block}
  #f-sort{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  #f-sort .vpill{
    display:inline-flex;align-items:center;justify-content:center;
    height:38px;padding:0 8px;font-size:11.5px;white-space:nowrap}
  .shop-bar #sort{display:none}
}