.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.item{
  background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s;
}
.item:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}

.item__media{position:relative;aspect-ratio:3/4;background:var(--gray);overflow:hidden}
.item__slides{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.item__slide{min-width:100%;height:100%;position:relative}
.item__slide img{width:100%;height:100%;object-fit:cover;display:block}
.item__ph{
  width:100%;height:100%;display:grid;place-items:center;text-align:center;
  padding:20px;color:#9BB0B2;font-size:.78rem;background:var(--gray);
}
.item__nav{
  position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 6px 18px -8px rgba(4,88,91,.6);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .25s,background .2s;
}
.item:hover .item__nav,.item__nav:focus-visible{opacity:1}
.item__nav:hover{background:#fff}
.item__nav svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.item__nav--prev{left:12px}
.item__nav--next{right:12px}
.item__dots{
  position:absolute;left:0;right:0;bottom:12px;display:flex;gap:6px;justify-content:center;
}
.item__dot{
  width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(14,34,36,.25);transition:background .25s,width .25s;
}
.item__dot.is-on{background:var(--teal);width:18px;border-radius:4px}
.item__tag{
  position:absolute;top:14px;left:14px;z-index:2;background:var(--teal);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 12px;border-radius:999px;
}

.item__body{padding:24px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.item h3{font-size:1rem}
.item p{margin:0;font-size:.88rem;color:var(--ink-soft)}
.item__sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.item__size{
  border:1px solid var(--gray-line);border-radius:8px;padding:3px 9px;
  font-size:.74rem;color:var(--ink-soft);
}
.item__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--gray-line);
}
.item__price{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.05em;
  font-size:1.2rem;color:var(--teal-deep);white-space:nowrap;
}
.item__price small{display:block;font-size:.6rem;font-weight:500;letter-spacing:0;color:var(--ink-soft)}
.item .btn{padding:12px 22px;font-size:.84rem}

.shop-note{
  margin-top:26px;background:#fff;border:1px solid var(--gray-line);border-radius:var(--r-lg);
  padding:26px 30px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
}
.shop-note p{margin:0;font-size:.94rem;color:var(--ink-soft);max-width:60ch}
.shop-note b{
  display:block;margin-bottom:4px;color:var(--ink);font-size:1rem;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;
}

.modal{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:clamp(12px,4vw,40px);background:rgba(8,22,23,.9);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.modal.is-open{display:flex}
body.modal-open{overflow:hidden}
.modal__box{
  background:var(--ink);color:rgba(255,255,255,.78);border-radius:var(--r-lg);
  width:min(520px,100%);max-height:92vh;overflow:auto;padding:clamp(26px,4vw,40px);position:relative;
  animation:modalUp .45s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes modalUp{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.modal__close{
  position:absolute;top:16px;right:16px;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background .2s,transform .2s;
}
.modal__close:hover{background:var(--teal);transform:scale(1.06)}
.modal__close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.modal h2{color:#fff;font-size:clamp(1.15rem,2.4vw,1.5rem);text-transform:uppercase;padding-right:44px}
.modal__item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(255,255,255,.06);border-radius:14px;padding:14px 18px;margin:18px 0 22px;
}
.modal__item span{font-size:.92rem;color:#fff}
.modal__item b{font-family:var(--font-display);font-weight:700;color:var(--teal);white-space:nowrap;letter-spacing:-.04em}
.modal .form{display:grid;gap:14px}
.modal .btn{width:100%}

@media (max-width:1000px){ .shop{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .shop{grid-template-columns:1fr}
  .item__foot{flex-direction:column;align-items:stretch;gap:12px}
  .item .btn{width:100%}
}

.empty-shop{
  grid-column:1/-1;text-align:center;color:var(--ink-soft);font-size:.95rem;
  background:#fff;border:1px dashed var(--gray-line);border-radius:var(--r-lg);padding:44px 24px;margin:0;
}

.item__size{
  border:1.5px solid var(--gray-line);border-radius:9px;padding:5px 11px;
  font:inherit;font-size:.76rem;color:var(--ink-soft);background:#fff;
  cursor:pointer;transition:border-color .2s,background .2s,color .2s;
}
.item__size:hover{border-color:var(--teal);color:var(--teal-deep)}
.item__size.is-on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}

.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{
  border:1.5px solid rgba(255,255,255,.2);border-radius:10px;padding:9px 16px;
  font:inherit;font-size:.9rem;color:rgba(255,255,255,.8);background:rgba(255,255,255,.06);
  cursor:pointer;transition:.2s;
}
.pick:hover{border-color:var(--teal);color:#fff}
.pick.is-on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
.pick-hint{margin:8px 0 0;font-size:.76rem;color:rgba(255,255,255,.45)}
#order-size-row[data-invalid] .picks{
  outline:2px solid #FF7A6B;outline-offset:6px;border-radius:12px;
}
#order-size-row[data-invalid] .pick-hint{color:#FFB4A8}

.item__media{cursor:zoom-in}
.item__zoom{
  position:absolute;right:12px;top:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;pointer-events:none;
  opacity:0;transform:scale(.9);transition:opacity .25s,transform .25s;
  box-shadow:0 6px 18px -8px rgba(4,88,91,.6);
}
.item:hover .item__zoom{opacity:1;transform:none}
.item__zoom svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round}