/* =================================================================
   SKLEP - style.css
   pages/shop/style.css
   ================================================================= */
.shop-page{background:#fff}
.shop-page .nav{
  background:rgba(249,249,249,.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dark);
}

/* Shop hero */
.shop-hero{
  --shop-hero-edge:max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  min-height:clamp(21rem,34vw,28rem);
  border-bottom:1px solid var(--line-dark);
}
.shop-hero__panel{
  background:var(--frost);
  color:#fff;
  display:flex;
  align-items:center;
  padding:
    calc(clamp(2.2rem,4vw,3.5rem) + var(--anchor-offset))
    clamp(1.6rem,3vw,3.2rem)
    clamp(2.2rem,4vw,3.5rem)
    var(--shop-hero-edge);
}
.shop-hero__inner{
  width:100%;
  max-width:620px;
}
.shop-hero__rating{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.7rem;
  margin:0 0 1rem;
  font-size:clamp(.84rem,1vw,.96rem);
  color:rgba(255,255,255,.92);
}
.shop-hero__stars{
  color:#f0a338;
  letter-spacing:.05em;
  font-size:1.05em;
  white-space:nowrap;
}
.shop-hero__half{opacity:.45}
.shop-hero__title{
  font-family:var(--display);
  font-weight:330;
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:.98;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 1.45rem;
}
.shop-hero__features{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem 1.1rem;
}
.shop-hero__feature{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:.8rem;
  min-width:0;
  min-height:3.25rem;
}
.shop-hero__feature img{
  width:2.4rem;
  height:2.4rem;
  flex-shrink:0;
}
.shop-hero__feature span{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.45;
  color:rgba(255,255,255,.92);
}
.shop-hero__media{
  min-height:100%;
  background:var(--paper-2);
}
.shop-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
}

/* Certification badge */
.shop-badge{
  border-bottom:1px solid var(--line-dark);
}
.shop-badge__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(1.6rem,3vw,2.2rem) var(--gut);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:clamp(1rem,2vw,1.6rem);
}
.shop-badge__media{
  width:clamp(4.5rem,8vw,6.25rem);
  flex-shrink:0;
}
.shop-badge__media img{
  width:100%;
  height:auto;
  display:block;
}
.shop-badge__content p{
  margin:0;
  max-width:78ch;
  font-size:clamp(.92rem,1.05vw,1rem);
  line-height:1.7;
  color:var(--fog);
}

/* Filter tabs */
.shop-filters{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(1.6rem,3vw,2.2rem) var(--gut);
  display:flex;align-items:center;gap:.5rem;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line-dark);
  overflow:visible;
  scrollbar-width:none;
}
.shop-filters::-webkit-scrollbar{display:none}
.shop-filter{
  flex-shrink:0;
  padding:.5em 1.3em;
  border-radius:100px;
  border:1.5px solid var(--line-dark);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fog);background:transparent;
  cursor:pointer;
  transition:border-color .3s,background .3s,color .3s;
}
.shop-filter:hover{border-color:var(--frost);color:var(--frost)}
.shop-filter.is-active{
  background:var(--frost);color:var(--salt);border-color:var(--frost);
}

/* Product grid */
.shop-grid{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(2.5rem,5vw,4rem) var(--gut) clamp(4rem,8vw,7rem);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.4rem,2.5vw,2.8rem);
}
.shop-grid .card__media{aspect-ratio:3/4;border-radius:0}
.shop-grid .card__info{padding:1.4rem 0 0}
.shop-grid .card__kicker{font-size:.65rem;letter-spacing:.28em;margin-bottom:.7rem}
.shop-grid .card__head{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.shop-grid .card__name{font-size:clamp(1.4rem,2vw,1.9rem)}
.shop-grid .card__price-block{align-items:flex-start}
.shop-grid .card__price{display:block;font-size:1.1rem;color:var(--frost)}
.shop-grid .card__stock-status{text-align:left}
.shop-grid .card__desc{margin:.8rem 0 1.4rem;font-size:.92rem;line-height:1.7}
.shop-grid .card__add{padding:1em 1.4em;font-size:.72rem;background:var(--frost);border-color:var(--frost)}
.shop-grid .card__add:hover{background:var(--ink);border-color:var(--ink)}
.shop-grid .card__add.is-out-of-stock,
.shop-grid .card__add.is-out-of-stock:hover,
.shop-grid .card__add:disabled,
.shop-grid .card__add:disabled:hover{background:var(--frost);border-color:var(--frost);transform:none}

@media (max-width:1024px){
  .shop-intro{grid-template-columns:1fr;gap:1.2rem}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .shop-hero{
    grid-template-columns:1fr;
    min-height:0;
  }
  .shop-hero__panel{
    padding:
      calc(clamp(2.25rem,8vw,3.25rem) + var(--anchor-offset))
      var(--gut)
      clamp(2.25rem,8vw,3.25rem)
      var(--gut);
  }
  .shop-hero__media{
    aspect-ratio:4/3;
  }
  .shop-filters{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.65rem;
  }
  .shop-filter{
    width:100%;
    min-height:3rem;
    padding:.8rem .95rem;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.35;
    white-space:normal;
  }
  .shop-badge__inner{
    gap:1rem;
  }
}
@media (min-width:1500px){
  .shop-hero__media{
    height:700px;
    min-height:700px;
  }
}
@media (max-width:760px){
  .shop-grid{grid-template-columns:1fr}
  .shop-grid .card__media{aspect-ratio:4/5}
}
@media (max-width:560px){
  .shop-badge__inner{
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:.9rem;
  }
  .shop-badge__media{
    width:4.25rem;
  }
  .shop-badge__content p{
    font-size:.88rem;
    line-height:1.6;
  }
  .shop-filters{
    grid-template-columns:1fr;
  }
  .shop-hero__features{
    gap:.8rem .9rem;
  }
  .shop-hero__feature{
    gap:.65rem;
  }
  .shop-hero__feature img{
    width:2.1rem;
    height:2.1rem;
  }
  .shop-hero__feature span{
    font-size:.72rem;
    letter-spacing:.12em;
  }
}