/* Kane's Observations — Shop All filter and sort controls. */
body:has(.shop-filter-dialog[open]){overflow:hidden}
.shop-discovery-controls{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
}
.shop-filter-toggle,
.shop-sort-control{
  min-height:44px;
  border:1px solid #b7c5cd;
  border-radius:7px;
  background:#fffdf8;
  color:#273b47;
  box-shadow:0 4px 12px rgba(23,35,43,.06);
}
.shop-filter-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 17px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.shop-filter-toggle::before{
  width:14px;
  height:14px;
  border-top:2px solid currentColor;
  border-bottom:2px solid currentColor;
  content:"";
  background:linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat;
  clip-path:polygon(0 0,100% 0,65% 42%,65% 100%,35% 100%,35% 42%);
}
.shop-filter-toggle:hover,
.shop-filter-toggle:focus-visible,
.shop-sort-control:focus-within{
  border-color:#517893;
  outline:3px solid rgba(81,120,147,.18);
  outline-offset:2px;
}
.shop-filter-toggle:disabled,
.shop-sort-control:has(select:disabled){
  opacity:.55;
  cursor:not-allowed;
}
.shop-filter-badge{
  display:grid;
  min-width:22px;
  height:22px;
  place-items:center;
  padding:0 6px;
  border-radius:999px;
  background:#517893;
  color:#fff;
  font-size:11px;
  letter-spacing:0;
}
.shop-filter-badge[hidden]{display:none}
.shop-sort-control{
  display:flex;
  align-items:center;
  overflow:hidden;
}
.shop-sort-control>span{
  padding:0 0 0 14px;
  color:#61727c;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.shop-sort-control select{
  min-width:174px;
  height:42px;
  padding:0 34px 0 9px;
  border:0;
  background:transparent;
  color:#17232b;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  outline:0;
}
.shop-filter-dialog{
  width:min(580px,calc(100% - 32px));
  max-height:min(760px,calc(100dvh - 40px));
  margin:auto;
  padding:0;
  overflow:hidden;
  border:1px solid #bdc9d0;
  border-radius:16px;
  background:#fffdf8;
  color:#17232b;
  box-shadow:0 24px 80px rgba(10,22,29,.28);
}
.shop-filter-dialog::backdrop{
  background:rgba(10,20,26,.62);
  backdrop-filter:blur(3px);
}
.shop-filter-panel{
  max-height:inherit;
  overflow:auto;
  overscroll-behavior:contain;
}
.shop-filter-head{
  position:sticky;
  z-index:2;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px 19px;
  border-bottom:1px solid #d7dee2;
  background:rgba(255,253,248,.96);
  backdrop-filter:blur(10px);
}
.shop-filter-eyebrow{
  display:block;
  margin-bottom:5px;
  color:#517893;
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.shop-filter-head h3{
  margin:0;
  color:#17232b;
  font:600 30px/1 Georgia,'Times New Roman',serif;
  letter-spacing:-.025em;
}
.shop-filter-close{
  display:grid;
  width:44px;
  height:44px;
  flex:0 0 44px;
  place-items:center;
  border:1px solid #c4cfd5;
  border-radius:50%;
  background:#f6f8f8;
  color:#315f7c;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.shop-filter-close:hover,
.shop-filter-close:focus-visible{
  border-color:#517893;
  background:#eaf0f3;
  outline:3px solid rgba(81,120,147,.18);
  outline-offset:2px;
}
.shop-filter-section{
  padding:22px 24px;
  border-bottom:1px solid #e0e5e8;
}
.shop-filter-section h4{
  margin:0 0 14px;
  color:#314955;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.shop-main .shop-filter-dialog .shop-filters{
  display:grid!important;
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px!important;
  overflow:visible!important;
}
.shop-main .shop-filter-dialog .shop-filter{
  min-width:0;
  min-height:44px;
  padding:8px 10px;
  border:1px solid #c4cfd5;
  border-radius:7px;
  background:#f7f8f6;
  color:#50636e;
  font-size:9px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.shop-main .shop-filter-dialog .shop-filter:hover,
.shop-main .shop-filter-dialog .shop-filter:focus-visible,
.shop-main .shop-filter-dialog .shop-filter[aria-pressed="true"]{
  border-color:#517893;
  background:#517893;
  color:#fff;
  outline:none;
}
.shop-main .shop-filter-dialog .shop-filter:focus-visible{
  box-shadow:0 0 0 3px rgba(81,120,147,.2);
}
.shop-price-range{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:12px;
  align-items:end;
}
.shop-price-range label{
  display:grid;
  min-width:0;
  gap:7px;
  color:#5b6c75;
  font-size:11px;
  font-weight:700;
}
.shop-price-input{
  display:flex;
  min-height:48px;
  align-items:center;
  border:1px solid #bcc8cf;
  border-radius:7px;
  background:#fff;
}
.shop-price-input:focus-within{
  border-color:#517893;
  box-shadow:0 0 0 3px rgba(81,120,147,.16);
}
.shop-price-input b{
  padding-left:13px;
  color:#517893;
  font-size:15px;
}
.shop-price-input input{
  width:100%;
  min-width:0;
  min-height:46px;
  padding:0 11px 0 6px;
  border:0;
  background:transparent;
  color:#17232b;
  font-size:16px;
  outline:0;
}
.shop-price-separator{
  padding-bottom:15px;
  color:#7a8991;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.shop-stock-section{padding-block:19px}
.shop-stock-toggle{
  display:flex;
  min-height:44px;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.shop-stock-toggle input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}
.shop-stock-toggle>span{
  position:relative;
  width:46px;
  height:26px;
  flex:0 0 46px;
  border:1px solid #aebcc4;
  border-radius:999px;
  background:#dfe6e9;
  transition:background .18s ease,border-color .18s ease;
}
.shop-stock-toggle>span::after{
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 5px rgba(18,34,43,.2);
  content:"";
  transition:transform .18s ease;
}
.shop-stock-toggle input:checked+span{
  border-color:#517893;
  background:#517893;
}
.shop-stock-toggle input:checked+span::after{transform:translateX(20px)}
.shop-stock-toggle input:focus-visible+span{outline:3px solid rgba(81,120,147,.2);outline-offset:2px}
.shop-stock-toggle strong{color:#334b58;font-size:13px}
.shop-filter-actions{
  position:sticky;
  bottom:0;
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:10px;
  padding:18px 24px;
  border-top:1px solid #d7dee2;
  background:rgba(255,253,248,.97);
  backdrop-filter:blur(10px);
}
.shop-filter-clear,
.shop-filter-apply{
  min-height:48px;
  padding:0 15px;
  border-radius:7px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.shop-filter-clear{
  border:1px solid #b9c6cd;
  background:#fff;
  color:#45616f;
}
.shop-filter-apply{
  border:1px solid #517893;
  background:#517893;
  color:#fff;
}
.shop-filter-clear:hover,
.shop-filter-clear:focus-visible,
.shop-filter-apply:hover,
.shop-filter-apply:focus-visible{
  outline:3px solid rgba(81,120,147,.18);
  outline-offset:2px;
}
.shop-filter-apply:hover,.shop-filter-apply:focus-visible{background:#315f7c}

@media(max-width:600px){
  .shop-main .shop-toolbar{
    width:100%;
    align-items:stretch!important;
    gap:10px!important;
  }
  .shop-discovery-controls{
    display:grid;
    width:100%;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  }
  .shop-filter-toggle{width:100%;min-height:48px}
  .shop-sort-control{width:100%;min-height:48px}
  .shop-sort-control>span{display:none}
  .shop-sort-control select{width:100%;min-width:0;height:46px;padding-left:13px;font-size:13px}
  .shop-main .shop-result-count{padding-left:1px!important}
  .shop-filter-dialog{
    width:100%;
    max-width:none;
    max-height:min(86dvh,720px);
    margin:auto 0 0;
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:18px 18px 0 0;
  }
  .shop-filter-head{padding:19px 18px 16px}
  .shop-filter-head h3{font-size:28px}
  .shop-filter-section{padding:19px 18px}
  .shop-main .shop-filter-dialog .shop-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-main .shop-filter-dialog .shop-filter{min-height:48px;font-size:10px}
  .shop-price-range{grid-template-columns:1fr 1fr;gap:10px}
  .shop-price-separator{display:none}
  .shop-filter-actions{padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
}

@media(max-width:370px){
  .shop-discovery-controls{grid-template-columns:1fr}
  .shop-price-range{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .shop-stock-toggle>span,.shop-stock-toggle>span::after{transition:none}
}