/* Isolated presentation layer. Existing filter markup remains the query source. */
body.hm-pdm-shop-panel .filters-area.custom-content,
body.hm-pdm-shop-panel .hm-filter-overlay { display:none !important; }
body.hm-pdm-shop-panel .shop-loop-head { text-align:left; }
body.hm-pdm-shop-panel .shop-loop-head .basel-filter-buttons {
  display:flex !important; align-items:center; width:max-content; height:30px;
  margin:12px 0 18px 0; padding:0; border:0; background:transparent;
  line-height:1; vertical-align:top;
}
body.hm-pdm-shop-panel .shop-loop-head .open-filters {
  display:inline-flex !important; align-items:center; justify-content:center; gap:7px;
  box-sizing:border-box !important; height:30px !important; min-height:30px !important;
  padding:0 10px !important; border:1px solid #d6d6d6; border-radius:999px;
  font:600 12px/1 'Lato',sans-serif !important; color:#282828; text-transform:none; white-space:nowrap;
}
body.hm-pdm-shop-panel .shop-loop-head .open-filters::before,
body.hm-pdm-shop-panel .shop-loop-head .open-filters::after { display:none; }
body.hm-pdm-shop-panel .shop-loop-head .open-filters svg { width:18px; height:18px; }
body.hm-pdm-shop-panel .shop-loop-head .hm-pdm-filter-toolbar {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; clear:both; margin:12px 0 18px;
}
body.hm-pdm-shop-panel .shop-loop-head .hm-pdm-filter-toolbar .basel-filter-buttons {
  margin:0 !important; flex:none;
}
body.hm-pdm-shop-panel .hm-pdm-active-chips { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
body.hm-pdm-shop-panel .hm-pdm-active-chips[hidden] { display:none !important; }
body.hm-pdm-shop-panel .hm-pdm-active-chip {
  display:inline-flex; align-items:center; box-sizing:border-box; max-width:min(290px,100%);
  height:30px; min-height:30px; padding:0 10px; border:1px solid #b5b5b5; border-radius:999px;
  background:#f1f1f1; color:#373737; font:600 12px/1 'Lato',sans-serif;
  text-transform:none; box-shadow:none; cursor:pointer;
}
body.hm-pdm-shop-panel .hm-pdm-active-chip:hover { background:#e9e9e9; border-color:#a8a8a8; }
body.hm-pdm-shop-panel .hm-pdm-active-chip:focus-visible { outline:2px solid #da3399; outline-offset:2px; }
body.hm-pdm-shop-panel .hm-pdm-chip-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.hm-pdm-shop-panel .hm-pdm-chip-x { flex:none; margin-left:8px; font-size:16px; line-height:1; font-weight:400; }
body.hm-pdm-shop-panel .hm-pdm-chip-error:empty { display:none; }
body.hm-pdm-shop-panel .hm-pdm-chip-error { color:#9b275f; font-size:12px; }
html.hm-sf-lock { overflow:hidden !important; }
body.hm-sf-lock { overflow:hidden !important; }
#hm-sf-layer {
  --sf-ink:#292929; --sf-muted:#767676; --sf-line:#dfdfdf; --sf-pink:#efafc7;
  position:fixed; inset:0; z-index:1000000; visibility:hidden; pointer-events:none;
  transition:visibility 360ms; font-family:'Lato',sans-serif; color:var(--sf-ink);
}
#hm-sf-layer * { box-sizing:border-box; }
#hm-sf-layer.is-open { visibility:visible; pointer-events:auto; }
#hm-sf-layer .hm-sf-backdrop {
  position:absolute; inset:0; background:rgba(28,22,27,.25); opacity:0;
  transition:opacity 320ms ease;
}
#hm-sf-layer.is-open .hm-sf-backdrop { opacity:1; }
#hm-sf-panel {
  position:absolute; inset:0 0 0 auto; width:460px; max-width:100%;
  height:100%; height:100dvh; display:flex; flex-direction:column;
  background:#fff; box-shadow:-12px 0 44px rgba(25,20,23,.12);
  transform:translate3d(100%,0,0); transition:transform 350ms cubic-bezier(.22,.7,.25,1);
}
#hm-sf-layer.is-open #hm-sf-panel { transform:translate3d(0,0,0); }
#hm-sf-layer button { font-family:inherit; cursor:pointer; text-transform:none; box-shadow:none; }
#hm-sf-layer button:focus-visible,
#hm-sf-layer input:focus-visible { outline:2px solid #932957; outline-offset:4px; }
#hm-sf-layer .hm-sf-header {
  flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-height:82px; padding:16px 28px; border-bottom:1px solid var(--sf-line);
}
#hm-sf-layer .hm-sf-title { font:700 19px/1.25 'Lato',sans-serif; margin:0; color:var(--sf-ink); }
#hm-sf-layer .hm-sf-reset {
  justify-self:start; border:0; padding:10px 0; min-height:44px; background:none;
  color:var(--sf-ink); font-size:12px; line-height:1.25; text-decoration:underline;
  text-underline-offset:3px; text-align:left;
}
#hm-sf-layer .hm-sf-reset:disabled { color:#929292; cursor:default; }
#hm-sf-layer .hm-sf-close {
  display:grid; place-items:center; justify-self:end; width:44px; height:44px;
  padding:10px; border:0; background:none; color:var(--sf-ink);
}
#hm-sf-layer .hm-sf-close svg { width:21px; height:21px; }
#hm-sf-layer .hm-sf-scroll {
  flex:1; min-height:0; padding:0 28px 18px; overflow-y:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:#d2d2d2 transparent;
}
#hm-sf-layer .hm-sf-section { border-bottom:1px solid var(--sf-line); margin:0; padding:0; }
#hm-sf-layer .hm-sf-section-heading { margin:0; padding:0; }
#hm-sf-layer .hm-sf-section-toggle {
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  width:100%; min-height:73px; border:0; padding:22px 0; background:none;
  color:var(--sf-ink); font:700 18px/1.3 'Lato',sans-serif; text-align:left;
}
#hm-sf-layer .hm-sf-section-toggle::after {
  content:''; width:9px; height:9px; flex:none; margin:0 4px 4px 0;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform 180ms;
}
#hm-sf-layer .hm-sf-section-toggle[aria-expanded="true"]::after { transform:rotate(225deg); margin-bottom:-4px; }
#hm-sf-layer .hm-sf-summary { display:block; margin-top:7px; font:400 14px/1.35 'Lato',sans-serif; color:var(--sf-muted); }
#hm-sf-layer .hm-sf-options { padding:0 0 24px; }
#hm-sf-layer [hidden] { display:none !important; }
#hm-sf-layer .hm-sf-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
#hm-sf-layer .hm-sf-list.hm-sf-colours { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
#hm-sf-layer .hm-sf-option { display:flex; align-items:center; gap:13px; min-height:45px; margin:0; padding:7px 0; }
#hm-sf-layer .hm-sf-option input {
  appearance:none; -webkit-appearance:none; flex:0 0 24px; width:24px; height:24px;
  margin:0; padding:0; border:1.5px solid #858585; border-radius:50% !important;
  background:#fff; box-shadow:none; cursor:pointer; transition:background 130ms,border-color 130ms;
}
#hm-sf-layer .hm-sf-option input:checked {
  border-color:#282828; background:radial-gradient(circle at center,#fff 0 3px,#282828 3.5px);
}
#hm-sf-layer .hm-sf-option input:disabled { opacity:.4; cursor:not-allowed; }
#hm-sf-layer .hm-sf-option label {
  flex:1; margin:0; padding:0; color:var(--sf-ink); cursor:pointer;
  font:400 16px/1.4 'Lato',sans-serif; letter-spacing:0; text-transform:none;
}
#hm-sf-layer .hm-sf-option:has(input:disabled) label { color:#929292; }
#hm-sf-layer .hm-sf-colours input { background:var(--sf-swatch,#fff); border-color:#a0a0a0; }
#hm-sf-layer .hm-sf-colours input:checked {
  outline:2px solid #292929; outline-offset:3px;
  background:var(--sf-swatch,#292929); box-shadow:inset 0 0 0 3px #fff;
}
#hm-sf-layer .hm-sf-colours input:focus-visible { outline:3px solid #932957; }
#hm-sf-layer .hm-sf-more {
  display:inline-flex; align-items:center; gap:9px; border:0; background:none;
  padding:11px 0 0; min-height:44px; color:var(--sf-ink); font-size:14px; line-height:1.4;
  text-decoration:underline; text-underline-offset:4px;
}
#hm-sf-layer .hm-sf-price-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
#hm-sf-layer .hm-sf-price-label { display:block; color:var(--sf-muted); font-size:13px; margin:0 0 8px; }
#hm-sf-layer .hm-sf-price-input {
  width:100%; height:48px; padding:10px 12px; border:1px solid #bdbdbd;
  border-radius:4px; background:#fff; color:var(--sf-ink); font:400 16px/1.3 'Lato',sans-serif;
}
#hm-sf-layer .hm-sf-price-error { margin:10px 0 0; color:#a02739; font-size:13px; }
#hm-sf-layer .hm-sf-footer {
  flex:none; padding:22px 28px max(24px,env(safe-area-inset-bottom)); border-top:1px solid #f0f0f0;
  background:#fff; box-shadow:0 -7px 18px rgba(255,255,255,.9);
}
#hm-sf-layer .hm-sf-apply {
  display:block; width:100%; min-height:52px; padding:15px 16px; border:0; border-radius:999px;
  background:var(--sf-pink); color:#292929; font-size:15px; line-height:1.4;
  font-weight:700; letter-spacing:.055em; text-transform:uppercase;
}
#hm-sf-layer .hm-sf-apply:hover { background:#eaa0bc; }
#hm-sf-layer .hm-sf-apply:disabled { opacity:.55; cursor:wait; }
#hm-sf-layer .hm-sf-status { font-size:13px; line-height:1.4; color:var(--sf-muted); margin:0; }
#hm-sf-layer .hm-sf-status:not(:empty) { margin-top:10px; text-align:center; }
@media(max-width:767px) {
  #hm-sf-panel { width:100%; max-width:none; box-shadow:none; }
  #hm-sf-layer .hm-sf-header { min-height:77px; padding:12px 20px; padding-top:max(12px,env(safe-area-inset-top)); }
  #hm-sf-layer .hm-sf-title { font-size:18px; }
  #hm-sf-layer .hm-sf-scroll { padding-left:24px; padding-right:24px; }
  #hm-sf-layer .hm-sf-footer { padding:20px 24px max(22px,env(safe-area-inset-bottom)); }
  #hm-sf-layer .hm-sf-section-toggle { min-height:72px; }
}
@media(max-width:360px) {
  #hm-sf-layer .hm-sf-header { padding-left:14px; padding-right:10px; }
  #hm-sf-layer .hm-sf-title { font-size:16px; }
  #hm-sf-layer .hm-sf-scroll { padding-left:20px; padding-right:20px; }
  #hm-sf-layer .hm-sf-option { gap:10px; }
  #hm-sf-layer .hm-sf-option label { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) {
  #hm-sf-layer,#hm-sf-panel,#hm-sf-layer .hm-sf-backdrop,#hm-sf-layer .hm-sf-section-toggle::after { transition:none; }
}
