/* ==========================================================================
   Shop — sidebar filters + AJAX results
   ========================================================================== */
.shop-layout{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:50px; align-items:start; }
.shop-filter-toggle{ display:none; }

/* ---------- Sidebar ---------- */
.shop-sidebar{ position:sticky; top:24px; }
.shop-widget{ margin-bottom:34px; padding-bottom:30px; border-bottom:1px solid #eee2bd; }
.shop-widget:last-of-type{ border-bottom:0; }
.shop-widget__title{
  font-size:20px; margin:0 0 18px; position:relative; padding-bottom:12px;
}
.shop-widget__title::after{ content:""; position:absolute; left:0; bottom:0; width:38px; height:2px; background:var(--yellow); }

.shop-search{ display:flex; }
.shop-search input{
  flex:1; min-width:0; padding:12px 14px; border:1px solid #e4d9b6; background:var(--cream-alt);
  font:400 15px var(--font-body); color:var(--dark); outline:0; border-radius:0;
  -webkit-appearance:none; appearance:none;
}
.shop-search input:focus{ border-color:var(--yellow-dark); }
.shop-search button{
  width:46px; border:0; background:var(--dark); color:var(--yellow); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; transition:background .2s,color .2s;
}
.shop-search button:hover{ background:var(--yellow); color:var(--dark); }
.shop-search svg{ width:18px; height:18px; }

/* Checkbox rows */
.shop-checks li{ margin:0; }
.shop-checks label{ display:flex; align-items:center; gap:12px; padding:8px 0; cursor:pointer; color:var(--dark-soft); transition:color .2s; }
.shop-checks label:hover{ color:var(--dark); }
.shop-checks input{ position:absolute; opacity:0; pointer-events:none; }
.shop-checks__box{
  width:18px; height:18px; border:1.5px solid #cfc49b; background:#fff; flex:none; position:relative; transition:all .2s;
}
.shop-checks__box::after{
  content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid var(--dark); border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transition:transform .18s;
}
.shop-checks input:checked + .shop-checks__box{ background:var(--yellow); border-color:var(--yellow-dark); }
.shop-checks input:checked + .shop-checks__box::after{ transform:rotate(45deg) scale(1); }
.shop-checks input:focus-visible + .shop-checks__box{ outline:2px solid var(--yellow-dark); outline-offset:2px; }
.shop-checks__name{ flex:1; }
.shop-checks__count{ font-size:12.5px; color:var(--text-muted); background:var(--cream-alt); padding:1px 9px; border-radius:20px; }

/* Dual price slider */
.shop-price{ position:relative; height:24px; margin:6px 4px 14px; }
.shop-price__track{ position:absolute; left:0; right:0; top:10px; height:4px; background:#eee2bd; border-radius:4px; }
.shop-price__fill{ position:absolute; top:0; bottom:0; background:var(--yellow); border-radius:4px; }
.shop-price__range{
  position:absolute; left:0; top:0; width:100%; height:24px; margin:0; background:none;
  pointer-events:none; -webkit-appearance:none; appearance:none;
}
.shop-price__range::-webkit-slider-runnable-track{ background:none; height:24px; }
.shop-price__range::-moz-range-track{ background:none; }
.shop-price__range::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; width:20px; height:20px; border-radius:50%; margin-top:2px;
  background:var(--dark); border:3px solid var(--yellow); cursor:grab; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .15s;
}
.shop-price__range::-moz-range-thumb{
  pointer-events:auto; width:14px; height:14px; border-radius:50%;
  background:var(--dark); border:3px solid var(--yellow); cursor:grab; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.shop-price__range:active::-webkit-slider-thumb{ transform:scale(1.15); cursor:grabbing; }
.shop-price__label{ font-size:14.5px; color:var(--text-muted); }
.shop-price__label strong{ color:var(--dark); font-weight:700; }

/* Buttons */
.shop-btn{
  display:block; width:100%; padding:14px 20px; border:0; cursor:pointer; margin-top:10px;
  background:var(--dark); color:var(--yellow); font:600 13px var(--font-btn); letter-spacing:.05em; text-transform:uppercase;
  transition:background .2s,color .2s;
}
.shop-btn:hover{ background:var(--yellow); color:var(--dark); }
.shop-btn--ghost{ background:transparent; color:var(--dark); border:1px solid #d8cd9f; }
.shop-btn--ghost:hover{ background:var(--cream); }
.shop-layout.has-js .shop-btn--apply{ display:none; }
.shop-empty .shop-btn{ display:inline-block; width:auto; padding:14px 30px; }

/* ---------- Main column ---------- */
.shop-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.shop-count{ margin:0; font-size:14px; color:var(--text-muted); }
.shop-sort{
  padding:10px 14px; border:1px solid #e4d9b6; background:var(--cream-alt); font:400 14px var(--font-body);
  color:var(--dark); cursor:pointer; max-width:100%;
}

/* Active filter chips */
.shop-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.shop-chips:empty{ display:none; }
.shop-chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 14px; font-size:13px;
  background:var(--cream); color:var(--dark); border:0; border-radius:30px; cursor:pointer; font-family:var(--font-body);
  animation:shopChipIn .25s ease;
}
.shop-chip span{ width:18px; height:18px; border-radius:50%; background:var(--dark); color:var(--yellow); font-size:13px; line-height:18px; text-align:center; }
.shop-chip:hover span{ background:#a33; color:#fff; }
.shop-chip--clear{ background:transparent; text-decoration:underline; padding:6px 8px; }
@keyframes shopChipIn{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:none; } }

/* Product grid: 3 columns beside the sidebar (overrides WooCommerce floats) */
.shop-layout .woocommerce ul.products, .shop-layout ul.products{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 28px; margin:0; padding:0;
}
.shop-layout ul.products::before, .shop-layout ul.products::after{ display:none !important; content:none !important; }
.woocommerce .shop-layout ul.products[class*="columns-"] li.product, .woocommerce-page .shop-layout ul.products[class*="columns-"] li.product{
  width:auto !important; float:none !important; margin:0 !important; clear:none !important;
}
.shop-layout ul.products li.product img{ width:100%; height:auto; }

/* Empty state */
.shop-empty{ text-align:center; padding:70px 20px; background:var(--cream-alt); border:1px dashed #d8cd9f; }
.shop-empty__icon{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--cream); color:var(--dark); display:flex; align-items:center; justify-content:center; }
.shop-empty__icon svg{ width:28px; height:28px; }
.shop-empty h3{ font-size:24px; margin-bottom:8px; }
.shop-empty p{ color:var(--text-muted); margin:0 0 22px; }

/* Pagination */
.shop-pagination{ display:flex; justify-content:center; gap:8px; margin-top:50px; flex-wrap:wrap; }
.shop-page{
  min-width:44px; height:44px; padding:0 12px; display:flex; align-items:center; justify-content:center;
  border:1px solid #e4d9b6; color:var(--dark); font:600 14px var(--font-btn); transition:all .2s;
}
.shop-page:hover{ background:var(--cream); }
.shop-page.is-current{ background:var(--yellow); border-color:var(--yellow); }

/* ---------- Loader ---------- */
.shop-results{ position:relative; min-height:260px; }
.shop-results [data-shop-products], .shop-results [data-shop-pagination]{ transition:opacity .3s, filter .3s, transform .3s; }
.shop-results.is-loading [data-shop-products],
.shop-results.is-loading [data-shop-pagination]{ opacity:.25; filter:blur(3px) saturate(.8); pointer-events:none; }
.shop-results.is-revealing [data-shop-products] li.product{ animation:shopIn .5s both; }
.shop-results.is-revealing [data-shop-products] li.product:nth-child(2){ animation-delay:.06s; }
.shop-results.is-revealing [data-shop-products] li.product:nth-child(3){ animation-delay:.12s; }
.shop-results.is-revealing [data-shop-products] li.product:nth-child(4){ animation-delay:.18s; }
.shop-results.is-revealing [data-shop-products] li.product:nth-child(n+5){ animation-delay:.24s; }
@keyframes shopIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.shop-loader{
  position:absolute; inset:0; z-index:5; display:flex; align-items:flex-start; justify-content:center; padding-top:120px;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; pointer-events:none;
}
.shop-results.is-loading .shop-loader{ opacity:1; visibility:visible; pointer-events:auto; }
.shop-loader__card{
  display:flex; flex-direction:column; align-items:center; gap:18px; padding:30px 44px;
  background:rgba(255,255,255,.92); border:1px solid #eee2bd; box-shadow:0 20px 60px color-mix(in srgb, var(--dark) calc(.18*100%), transparent);
  border-radius:8px; position:sticky; top:120px;
  transform:translateY(10px) scale(.96); transition:transform .3s;
}
.shop-results.is-loading .shop-loader__card{ transform:none; }
.shop-loader__ring{ position:relative; width:64px; height:64px; }
.shop-loader__ring span{ position:absolute; inset:0; border-radius:50%; border:4px solid transparent; }
.shop-loader__ring span:nth-child(1){ border-top-color:var(--yellow); border-right-color:var(--yellow); animation:shopSpin 1s linear infinite; }
.shop-loader__ring span:nth-child(2){ inset:10px; border-bottom-color:var(--dark); border-left-color:var(--dark); animation:shopSpin .8s linear infinite reverse; }
.shop-loader__ring i{
  position:absolute; left:50%; top:50%; width:12px; height:16px; margin:-8px 0 0 -6px; background:var(--yellow);
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; animation:shopPulse 1s ease-in-out infinite;
}
.shop-loader__text{ font:600 12.5px var(--font-btn); letter-spacing:.08em; text-transform:uppercase; color:var(--dark); white-space:nowrap; }
.shop-loader__text b{ animation:shopDot 1.2s infinite both; }
.shop-loader__text b:nth-of-type(2){ animation-delay:.2s; }
.shop-loader__text b:nth-of-type(3){ animation-delay:.4s; }
@keyframes shopSpin{ to{ transform:rotate(360deg); } }
@keyframes shopPulse{ 50%{ transform:scale(1.35); opacity:.7; } }
@keyframes shopDot{ 0%,80%,100%{ opacity:.15; } 40%{ opacity:1; } }

/* Thin progress bar across the top of the results */
.shop-results::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--yellow); z-index:6; opacity:0;
}
.shop-results.is-loading::before{ opacity:1; animation:shopBar 1.4s ease-in-out infinite; }
@keyframes shopBar{ 0%{ left:0; width:0; } 50%{ left:0; width:70%; } 100%{ left:100%; width:0; } }

@media (prefers-reduced-motion:reduce){
  .shop-loader__ring span, .shop-loader__ring i, .shop-loader__text b, .shop-results::before{ animation-duration:2.4s !important; }
  .shop-results.is-revealing [data-shop-products] li.product{ animation:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .shop-layout{ grid-template-columns:230px minmax(0,1fr); gap:32px; }
  .shop-layout ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .shop-layout{ grid-template-columns:1fr; gap:0; }
  .shop-filter-toggle{
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:14px; margin-bottom:20px;
    background:var(--dark); color:var(--yellow); border:0; font:600 13px var(--font-btn); letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
  }
  .shop-filter-toggle svg{ width:18px; height:18px; }
  .shop-sidebar{ position:static; display:none; margin-bottom:30px; padding:22px; background:var(--cream-alt); border:1px solid #eee2bd; }
  .shop-sidebar.is-open{ display:block; }
  .shop-layout ul.products{ gap:26px 16px; }
}
@media (max-width:460px){
  .shop-layout ul.products{ grid-template-columns:1fr; }
}

/* Product tags */
.shop-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.shop-tags a{ display:inline-block; padding:5px 14px; border:1px solid #e4d9b6; background:#fff; font-size:13.5px; color:var(--dark-soft); transition:all .2s; }
.shop-tags a:hover{ background:var(--yellow); border-color:var(--yellow); color:var(--dark); }

/* ---- Category tree in the filter sidebar ---- */
.shop-checks__depth-1 label{ padding-left:22px; font-size:.95em; }
.shop-checks__depth-2 label{ padding-left:44px; font-size:.95em; }
.shop-checks__depth-3 label{ padding-left:66px; font-size:.95em; }
.shop-checks__depth-0 .shop-checks__name{ font-weight:600; }