/* EmbroLab catalogue/search results v2.
   Ported from embrolab-html/embrolab-search-results.html without embedded images. */

:root{
  --shop-primary:#7a1f2b;
  --shop-primary-bright:#a11a39;
  --shop-accent:#d4a017;
  --shop-ink:#111111;
  --shop-muted:#707070;
  --shop-surface:#f8f8f8;
  --shop-white:#ffffff;
  --shop-line:rgba(17,17,17,.1);
  --shop-radius-sm:8px;
  --shop-radius-lg:20px;
  --shop-page-width:1718px;
}

body{background:var(--shop-white)}

.shop-page{
  width:calc(100% - 202px);
  max-width:var(--shop-page-width);
  margin:60px auto 119px;
  padding:0;
  display:grid;
  grid-template-columns:412px minmax(0,1fr);
  gap:32px;
  align-items:start;
}

.shop-sidebar{width:auto;max-width:none}
@media(min-width:1025px){
  .shop-sidebar{
    position:sticky;
    top:var(--shop-sidebar-top, 179px);
    align-self:start;
    max-height:calc(100dvh - var(--shop-sidebar-top, 179px) - 24px);
    overflow-y:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    border-radius:var(--shop-radius-lg);
  }
  .shop-sidebar::-webkit-scrollbar{display:none}
}
.shop-filter{
  min-height:850px;
  padding:32px 30px 23px;
  display:flex;
  flex-direction:column;
  gap:32px;
  border:1px solid rgba(191,191,191,.5);
  border-radius:var(--shop-radius-lg);
  background:var(--shop-surface);
}
.shop-filter__row{display:flex;align-items:center;gap:12px}
.shop-filter__label{
  color:var(--shop-ink);
  font-size:16px;
  font-weight:500;
  line-height:26px;
  letter-spacing:-.32px;
  text-transform:capitalize;
  white-space:nowrap;
}
.shop-filter__line{height:1px;flex:1;background:var(--shop-line)}
.shop-filter__divider{width:100%;height:1px;margin:0;border:0;background:var(--shop-line)}

.shop-search{display:flex;flex-direction:column;gap:8px}
.shop-search__input{
  width:100%;
  height:48px;
  display:flex;
  align-items:center;
  padding:0 16px;
  border:1px solid #e7e7e7;
  border-radius:78px;
  background:var(--shop-white);
}
.shop-search__input input{
  width:100%;
  height:100%;
  padding:0 8px 0 0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--shop-ink);
  font-family:inherit;
  font-size:16px;
  line-height:26px;
  letter-spacing:.32px;
}
.shop-search__input img{width:20px;height:20px;flex:0 0 auto;object-fit:contain}

.shop-price{display:flex;flex-direction:column;gap:0}
.shop-price-slider{position:relative;height:16px;margin:29px 1px 23px}
.shop-price-slider__track{
  position:absolute;
  top:6px;
  right:8px;
  left:8px;
  height:4px;
  border-radius:4px;
  background:#e1e1e1;
  overflow:hidden;
}
.shop-price-slider__fill{
  position:absolute;
  top:0;
  bottom:0;
  border-radius:inherit;
  background:var(--shop-accent);
}
.shop-price-slider input[type=range]{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:16px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  pointer-events:none;
  appearance:none;
  -webkit-appearance:none;
}
.shop-price-slider input[type=range]::-webkit-slider-runnable-track{height:4px;background:transparent}
.shop-price-slider input[type=range]::-webkit-slider-thumb{
  width:16px;
  height:16px;
  margin-top:-6px;
  border:5px solid var(--shop-accent);
  border-radius:50%;
  background:var(--shop-white);
  pointer-events:auto;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.shop-price-slider input[type=range]::-moz-range-track{height:4px;background:transparent}
.shop-price-slider input[type=range]::-moz-range-thumb{
  width:6px;
  height:6px;
  border:5px solid var(--shop-accent);
  border-radius:50%;
  background:var(--shop-white);
  pointer-events:auto;
  cursor:pointer;
}
.shop-price__values{display:flex;align-items:center;justify-content:space-between}
.shop-price__pill{
  min-width:108px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:0 24px;
  border:1px solid var(--shop-line);
  border-radius:74px;
  background:var(--shop-surface);
  color:var(--shop-ink);
  font-size:16px;
  font-weight:500;
}
.shop-price__pill--max{min-width:117px;border-color:var(--shop-accent);background:var(--shop-accent);color:#fff}
.shop-price__pill span:first-child{font-family:'Host Grotesk',Arial,sans-serif;font-size:22px;line-height:32px}

.shop-categories{display:flex;flex-direction:column;gap:12px}
.shop-cat-list{display:flex;flex-direction:column}
.shop-cat-item{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border:0;
  border-radius:var(--shop-radius-sm);
  background:transparent;
}
.shop-cat-item__label{
  color:var(--shop-ink);
  font-size:16px;
  font-weight:500;
  line-height:26px;
  letter-spacing:-.32px;
  text-transform:capitalize;
}
.shop-cat-item__icon{width:26px;height:26px;flex:0 0 auto;object-fit:contain}
.shop-cat-item--active{padding-left:9px;border-left:1px solid var(--shop-accent);background:rgba(212,160,23,.13)}
.shop-cat-group{display:flex;flex-direction:column}
.shop-cat-sublist{
  position:relative;
  margin:0 0 0 24px;
  padding:0 0 0 10px;
  display:grid;
  gap:6px;
  border-left:1px solid var(--shop-line);
}
.shop-cat-sub-item{
  min-height:46px;
  display:flex;
  align-items:center;
  padding:10px;
  border-radius:var(--shop-radius-sm);
  background:var(--shop-white);
  color:var(--shop-ink);
  font-size:16px;
  font-weight:500;
  line-height:26px;
  letter-spacing:-.32px;
  text-transform:capitalize;
}
.shop-cat-sub-item--active{color:var(--shop-accent)}

.shop-results{min-width:0}
.shop-results__heading{
  min-height:32px;
  margin:0 0 32px;
  color:rgba(17,17,17,.6);
  font-size:24px;
  font-weight:400;
  line-height:32px;
  text-transform:capitalize;
  white-space:normal;
}
.shop-results__heading strong{color:var(--shop-ink);font-weight:600}
.shop-empty{grid-column:1/-1;margin:0;padding:64px 24px;border:1px dashed rgba(17,17,17,.18);border-radius:20px;color:rgba(17,17,17,.6);font-size:18px;text-align:center}
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

.shop-load-more{
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--shop-line);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}
.shop-load-more__summary{margin:0;color:var(--shop-muted);font-size:14px;line-height:22px}
.shop-load-more__summary strong{color:var(--shop-ink);font-weight:600}
.shop-load-more__progress{
  display:block;
  width:200px;
  max-width:100%;
  height:4px;
  overflow:hidden;
  border:0;
  border-radius:4px;
  background:#eee8e4;
  color:var(--shop-primary);
  appearance:none;
  -webkit-appearance:none;
}
.shop-load-more__progress::-webkit-progress-bar{border-radius:4px;background:#eee8e4}
.shop-load-more__progress::-webkit-progress-value{border-radius:4px;background:var(--shop-primary)}
.shop-load-more__progress::-moz-progress-bar{border-radius:4px;background:var(--shop-primary)}
.shop-load-more__button{
  width:200px;
  max-width:100%;
  min-height:50px;
  margin-top:8px;
  padding:12px 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--shop-primary);
  border-radius:100px;
  background:var(--shop-primary);
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  line-height:24px;
  transition:background-color .2s ease,opacity .2s ease;
}
.shop-load-more__button:hover:not(:disabled){background:var(--shop-primary-bright)}
.shop-load-more__button:focus-visible{outline:2px solid var(--shop-primary);outline-offset:4px}
.shop-load-more__button:disabled{opacity:.65;cursor:wait}

@media(max-width:1280px){
  .shop-page{width:calc(100% - 64px)}
}

@media(max-width:1024px){
  .shop-page{width:calc(100% - 48px);margin-top:60px;margin-bottom:90px;grid-template-columns:1fr}
  .shop-filter{min-height:0}
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:768px){
  .shop-page{width:calc(100% - 32px);margin-top:40px;margin-bottom:64px;gap:36px}
  .shop-filter{padding:28px 24px}
  .shop-results__heading{margin-bottom:24px;font-size:20px;line-height:28px}
  .shop-grid{grid-template-columns:1fr;gap:32px}
  .shop-load-more{margin-top:32px;padding-top:24px}
}

@media(max-width:600px){
  .shop-price__pill{min-width:104px;padding:0 18px}
  .shop-cat-sublist{margin-left:12px}
}

@media(prefers-reduced-motion:reduce){
  .shop-load-more__button{transition:none}
}