/* ─── shop filters, taken from the design file with a CSS parser ─── */
.pc-filters .fsw{width:15px;height:15px;border-radius:100px;display:inline-block;flex:none;margin-right:2px;box-shadow:inset 0 0 0 1px rgba(22,53,31,.2)}
/* Sticky only when asked for, and never on a small screen where a panel that
   follows you eats the page. The design's offset assumed its own fixed
   header; here it is measured from the top of the viewport. */
.pc-filters{align-self:start;padding-right:4px}
.pc-filters--stick{position:sticky;top:var(--pc-stick,96px);
  max-height:calc(100vh - var(--pc-stick,96px) - 24px);overflow:auto}
.pc-filters .fgroup{border-bottom:1px solid var(--pc-line);padding:18px 0}
.pc-filters .fgroup:first-child{padding-top:0}
.pc-filters .fgroup h4{margin-bottom:13px}
.pc-filters .fopt{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:var(--pc-fs-base);color:var(--pc-ink-60);cursor:pointer}
.pc-filters .fopt input{accent-color:var(--pc-leaf);width:16px;height:16px}
.pc-filters .fopt:hover{color:var(--pc-ink)}
.pc-filters .fopt em{font-style:normal;margin-left:auto;color:var(--pc-ink-40);font-size:var(--pc-fs-sm)}
.pc-filters .sel{border:1px solid var(--pc-line);background:var(--pc-white);border-radius:100px;padding:10px 16px;font-size:var(--pc-fs-sm)}


/* an option that would return nothing stays visible but greyed, so the list
   does not shuffle under the pointer as boxes are ticked */
.pc-filters .fopt.is-off{opacity:.42;cursor:default}
.pc-filters .fopt.is-off:hover{color:var(--pc-ink-60)}

.pc-filters .fgroup--do{border-bottom:0;display:flex;align-items:center;gap:14px}
.pc-filters__clear{font-size:var(--pc-fs-sm);color:var(--pc-ink-40);text-decoration:underline}
.pc-filters__clear:hover{color:var(--pc-flag)}
.pc-filters.is-busy{opacity:.55;pointer-events:none}

/* the panel is a form; a theme should not dress its controls up */
.pc-filters,.pc-filters h4{margin:0}
.pc-filters .fopt input{margin:0}

/* ─── category tiles, taken from the design file ─── */
.cats{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(10px,1.4vw,18px)}
.cat{display:block;text-align:center}
.cat .arch{aspect-ratio:3/4.1;border-radius:50% 50% 16px 16px / 30% 30% 2% 2%;margin-bottom:11px;transition:box-shadow .3s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1)}
.cat:hover .arch{transform:translateY(-5px);box-shadow:0 10px 30px -12px rgba(22,53,31,.18)}
.cat b{display:block;font-size:var(--pc-fs-base);font-weight:600;line-height:var(--pc-lh-snug)}
.cat span{font-size:var(--pc-fs-xs);color:var(--pc-ink-60)}



/* a category with no picture yet, so the row does not have a hole in it */
.cat__none{display:grid;place-items:center;width:100%;height:100%;color:var(--pc-leaf);
  background:var(--pc-glass-2)}
.cat{color:var(--pc-ink);text-decoration:none}
.cat:hover b{color:var(--pc-leaf)}
.cat .arch img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;display:block;margin:0}
.cat .arch{position:relative;overflow:hidden;background:var(--pc-glass-2)}
.cat .arch--sq{aspect-ratio:1/1}
.cat .arch--soft{aspect-ratio:1/1;border-radius:16px}


/* delivers to */
.pc-city .sel{width:100%}
.pc-city__note{margin-top:10px}
.pc-filters .sel,.pc-city .sel{appearance:none;-webkit-appearance:none;
  border:1px solid var(--pc-line);border-radius:10px;padding:9px 32px 9px 12px;
  background:var(--pc-white) no-repeat right 11px center/12px 7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 7%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 stroke=%27%2316231A%27 stroke-width=%271.6%27 fill=%27none%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  font:inherit;font-size:var(--pc-fs-sm);color:var(--pc-ink);cursor:pointer}
.pc-filters .sel:focus,.pc-city .sel:focus{outline:2px solid var(--pc-leaf);outline-offset:2px}