.shop{ padding-block-start:clamp(124px,18vh,220px); min-block-size:100svh; }
.shop__head{ max-inline-size:1400px; }
.shop .sec__note{ max-width:52ch; }

.shop__bar{
  margin-block-start:clamp(40px,5.4vw,84px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(16px,2vw,32px);
  border-block-end:1px solid var(--line);
}
.shop__vat{
  padding-block-end:14px; white-space:nowrap;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-faint);
}
html[lang="he"] .shop__vat{ letter-spacing:.04em; text-transform:none; font-size:12.5px; }
.filters{ position:relative; min-inline-size:0; }
.filters__list{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 clamp(18px,2.6vw,44px);
  margin:0; padding:0; list-style:none;
}
.filters__b{
  position:relative; display:inline-flex; align-items:baseline; gap:.7em;
  min-block-size:44px; padding-block:10px 14px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-dim);
  white-space:nowrap; transition:color .35s var(--ease);
}
html[lang="he"] .filters__b{ letter-spacing:.04em; text-transform:none; font-size:13px; }
.filters__b:hover,.filters__b[aria-pressed="true"]{ color:var(--paper); }
.filters__c{
  font-size:10px; letter-spacing:.14em; color:var(--paper-faint);
  font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
  transition:color .35s var(--ease);
}
.filters__b[aria-pressed="true"] .filters__c{ color:var(--accent); }
.filters__b:focus-visible{ outline-offset:-2px; }

.filters__bar{
  position:absolute; inset-block-start:0; left:0; inline-size:1px; block-size:1px;
  background:var(--accent); transform-origin:0 50%; pointer-events:none;
  transform:translate(var(--x,0px),var(--y,0px)) scaleX(var(--w,0));
  transition:transform .55s var(--ease-out); opacity:0;
}
.filters__bar.is-on{ opacity:1; }
@media (max-width:640px){
  .shop__bar{ flex-direction:column; align-items:stretch; gap:6px; }
  .shop__vat{ padding-block-end:0; }

  .filters{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-mask-image:linear-gradient(to right,#000 88%,transparent); mask-image:linear-gradient(to right,#000 88%,transparent); }
  .filters::-webkit-scrollbar{ display:none; }
  html[dir="rtl"] .filters{ -webkit-mask-image:linear-gradient(to left,#000 88%,transparent); mask-image:linear-gradient(to left,#000 88%,transparent); }
  .filters__list{ flex-wrap:nowrap; gap:0 18px; }
  .filters__b{ letter-spacing:.14em; }
}

.grid{
  margin-block-start:clamp(44px,6vw,92px);
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap); row-gap:clamp(56px,7vw,110px);
  align-items:start; outline:0;
}
.card{ grid-column:span 12; position:relative; min-inline-size:0; }
.card.is-off{ display:none; }
@media (min-width:641px){
  .card{ grid-column:span 6; }
  .card--wide{ grid-column:span 12; }
}
@media (min-width:1100px){
  .card{ grid-column:span 4; }
  .card--wide{ grid-column:span 8; }

  .card--drop{ margin-block-start:clamp(28px,4vh,60px); }
}

.card__in{
  position:relative;
  transition:transform .6s var(--ease-out), opacity .32s var(--ease);
  will-change:transform;
}
.card__in.is-fade{ opacity:0; transform:translateY(10px); transition-delay:0ms; }
.card__in.is-fade-in{ transition-delay:var(--fd,0ms); }
@media (hover:hover) and (pointer:fine){
  .card:hover .card__in{ transform:translateY(-4px); }
  .card:hover .plate--ph{ border-color:var(--paper-dim); }
  .card:hover .plate--ph::before{ border-color:var(--line); }
  .card:hover .card__cap{ border-block-start-color:rgba(244,242,238,.32); }
}
.card__media{ position:relative; }

.card__pic{
  position:relative; display:block; aspect-ratio:4 / 5; inline-size:100%;
  overflow:hidden; background:var(--ink-2); border:1px solid var(--line-soft);
  transition:border-color .5s var(--ease);
}
.card__pic img{
  inline-size:100%; block-size:100%; object-fit:cover; object-position:center 30%;
  transform:scale(1.02); transition:transform 1.2s var(--ease-out);
}
.card__picN{
  position:absolute; inset-block-end:14px; inset-inline-end:16px; z-index:1;
  font-family:var(--display); font-weight:700; font-style:italic;
  font-size:clamp(1.2rem,1.6vw,1.6rem); line-height:1; color:var(--paper);
  font-variant-numeric:tabular-nums; text-shadow:0 1px 14px rgba(0,0,0,.6);
}
html[lang="he"] .card__picN{ font-style:normal; }
@media (hover:hover) and (pointer:fine){
  .card:hover .card__pic{ border-color:var(--paper-dim); }
  .card:hover .card__pic img{ transform:scale(1.06); }
}
html.reduce-motion .card__pic img{ transition:none; transform:none; }
.card .plate--ph{ transition:border-color .5s var(--ease); }
.card .plate--ph::before{ transition:border-color .5s var(--ease); }

.card .ph__n{ font-size:clamp(2rem,3vw,3rem); }
.card__ribbon{
  position:absolute; inset-block-start:16px; inset-inline-start:16px; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 10px 4px; border:1px solid var(--paper-faint); color:var(--paper-dim);
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; line-height:1;
  background:var(--ink-2);
}
html[lang="he"] .card__ribbon{ letter-spacing:.08em; text-transform:none; font-size:11.5px; }

.card__ribbon::before{ content:""; inline-size:5px; block-size:5px; background:var(--accent); border-radius:50%; flex:none; }

.card__cap{
  margin-block-start:16px; padding-block-start:14px;
  border-block-start:1px solid var(--line);
  transition:border-color .5s var(--ease);
  display:flex; flex-direction:column; gap:12px;
}
.card__meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-faint);
  font-variant-numeric:tabular-nums;
}
html[lang="he"] .card__meta{ letter-spacing:.04em; text-transform:none; font-size:12px; }
.card__meta > span{ display:inline-flex; align-items:baseline; gap:.9em; min-inline-size:0; }
.card__n{ color:var(--paper-dim); }
.card__catl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card__sku{ direction:ltr; unicode-bidi:isolate; white-space:nowrap; flex:none; }
.card__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
}
.card__name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.45rem,2vw,2rem); line-height:1.08; letter-spacing:-.015em;
  min-inline-size:0;
}
html[lang="he"] .card__name{ letter-spacing:0; line-height:1.2; }
.card__price{
  flex:none; display:inline-flex; align-items:baseline; gap:.5em;
  font-size:clamp(1rem,1.15vw,1.15rem); font-weight:500; color:var(--paper);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.card__from{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-faint); font-weight:400; }
html[lang="he"] .card__from{ letter-spacing:.04em; text-transform:none; font-size:12px; }
.card__desc{
  color:var(--paper-dim); font-size:clamp(13.5px,.98vw,15.5px); line-height:1.6;
  max-width:44ch;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

.card__sizes{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.card__sizesL{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-faint);
  margin-inline-end:6px;
}
html[lang="he"] .card__sizesL{ letter-spacing:.04em; text-transform:none; font-size:12px; }
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:32px; padding-inline:12px;
  border:1px solid var(--line); color:var(--paper-dim);
  font-size:11px; letter-spacing:.1em; font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate;
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
@media (hover:hover){ .chip:hover{ border-color:var(--paper-dim); color:var(--paper); } }
.chip[aria-checked="true"]{ border-color:var(--paper); color:var(--paper); }
.chip:focus-visible{ outline-offset:2px; }
@media (pointer:coarse){ .chip{ min-block-size:40px; } }

.card__act{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block-start:12px; border-block-start:1px solid var(--line-soft);
}
.card__add{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  min-block-size:44px; margin-inline-start:-2px; padding-inline:2px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cta);
  font-weight:500; white-space:nowrap;
  transition:color .35s var(--ease);
}
html[lang="he"] .card__add{ letter-spacing:.06em; text-transform:none; font-size:13px; }
.card__add i{ display:block; inline-size:22px; block-size:1px; background:currentColor; transition:inline-size .45s var(--ease-out); }
@media (hover:hover){ .card__add:hover i{ inline-size:38px; } }
.card__add b{ display:none; font-weight:400; }
.card__add.is-added{ color:var(--paper); }
.card__add.is-added i{ display:none; }
.card__add.is-added b{ display:inline; }
.card__qtyNote{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
html[lang="he"] .card__qtyNote{ letter-spacing:.04em; text-transform:none; font-size:12px; }

@media (min-width:641px){
  .card--wide .card__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--gap); align-items:end; }
  .card--wide .card__cap{ margin-block-start:0; padding-block-start:0; border-block-start:0; gap:16px; }
  .card--wide .card__meta{ padding-block-end:14px; border-block-end:1px solid var(--line); transition:border-color .5s var(--ease); }
  .card--wide .card__name{ font-size:clamp(1.9rem,3.2vw,3.4rem); }
  .card--wide .card__desc{ -webkit-line-clamp:3; }
  .card--wide .card__act{ margin-block-start:6px; }
}
@media (hover:hover) and (pointer:fine) and (min-width:641px){
  .card--wide:hover .card__meta{ border-block-end-color:rgba(244,242,238,.32); }
}

.shop__empty{
  margin-block-start:clamp(44px,6vw,92px);
  font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,2.2vw,2.1rem); color:var(--paper-dim);
}

.hdr__bagCount.is-bump{ animation:bagBump .5s var(--ease-out); }
@keyframes bagBump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.45); } 100%{ transform:scale(1); } }

html.reduce-motion .card__in,html.reduce-motion .filters__bar,html.reduce-motion .chip{ transition:none; }
html.reduce-motion .hdr__bagCount.is-bump{ animation:none; }