/* ============================================================
   cards.css — the product card (shared by every page)

   Layout follows the reference: image, then a static info block.
   Nothing ever overlays the price or the description — sizes,
   quantity, add-to-cart and wishlist all sit below, always visible.
   ============================================================ */

.pcard{position:relative;display:flex;flex-direction:column;background:transparent}

/* ---------------- media ---------------- */
.pcard__media{
  position:relative;display:block;overflow:hidden;background:var(--char);aspect-ratio:4/5;
}
.pcard__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e-out),opacity .55s var(--e-out);
}
.pcard__media .alt{position:absolute;inset:0;opacity:0}
.pcard:hover .pcard__media img{transform:scale(1.045)}
.pcard:hover .pcard__media .alt{opacity:1}
.pcard:hover .pcard__media .main{opacity:0}
.pcard__glow{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 50% at 50% 105%,rgba(236,28,36,.28),transparent 72%);
  transition:opacity .6s var(--e-out);
}
.pcard:hover .pcard__glow{opacity:1}
.pcard:hover .brackets{opacity:1}

/* flags — discount sits top-right like the reference, tags stack top-left */
.pcard__flags{position:absolute;top:0;left:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start}
.pcard__off{position:absolute;top:0;right:0;z-index:3}
.flag{
  padding:5px 10px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap;
}
.flag--sale{background:var(--red);color:#fff}
.flag--new{background:var(--bone);color:var(--ink)}
.flag--ltd{background:rgba(8,8,10,.55);color:var(--bone);
  border:1px solid rgba(233,230,223,.35);backdrop-filter:blur(6px)}

/* ---------------- body ---------------- */
.pcard__body{display:flex;flex-direction:column;padding-top:15px;flex:1}
.pcard__cat{
  font-family:var(--mono);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--red-ui);margin-bottom:6px;
}
.pcard__name{
  font-family:var(--head);font-weight:500;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--bone);line-height:1.35;transition:color .3s;
}
.pcard:hover .pcard__name{color:#fff}
.pcard__prow{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:9px}
.pcard__chip{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--red-ui);
  border:1px solid rgba(236,28,36,.4);padding:1px 5px;
}

/* options row — sizes or a quantity stepper, pinned to the bottom
   so every card in a row lines its button up with the others */
.pcard__opts{margin-top:14px;min-height:32px;display:flex;align-items:center}
.pcard__sizes{display:flex;gap:5px;flex-wrap:wrap}
.pcard__sizes .swatch{height:30px;min-width:32px;padding:0 8px;font-size:9.5px}
.pcard__opts.is-err .swatch:not(:disabled){border-color:rgba(236,28,36,.7);animation:cardShake .45s}
@keyframes cardShake{
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}   75%{transform:translateX(-2px)}
}
.pcard .qty{height:30px}
.pcard .qty button{width:26px;height:28px;font-size:12px}
.pcard .qty span{min-width:26px;font-size:10.5px}

/* buy row — always visible, never covers anything */
.pcard__buy{display:grid;grid-template-columns:1fr 42px;gap:7px;margin-top:12px}
.pcard__add{
  position:relative;height:42px;display:flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid rgba(233,230,223,.22);background:transparent;color:var(--bone);
  font-family:var(--head);font-weight:600;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;overflow:hidden;isolation:isolate;
  transition:color .3s var(--e-out),border-color .3s var(--e-out);
}
.pcard__add::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--bone);
  transform:translateY(101%);transition:transform .45s var(--e-out);
}
.pcard__add:hover{color:var(--ink);border-color:var(--bone)}
.pcard__add:hover::before{transform:translateY(0)}
.pcard__add.is-done{background:#14a34a;border-color:#14a34a;color:#fff}
.pcard__add.is-done::before{transform:translateY(101%)}
.pcard__add svg{transition:transform .4s var(--e-out)}
.pcard__add:hover svg{transform:translateX(4px)}

.pcard__wish{
  height:42px;display:grid;place-items:center;
  border:1px solid rgba(233,230,223,.22);color:var(--gray-2);
  transition:color .3s,border-color .3s,background .3s;
}
.pcard__wish:hover{color:var(--bone);border-color:var(--bone)}
.pcard__wish.is-on{color:var(--red-ui);border-color:rgba(236,28,36,.5)}
.pcard__wish.is-on svg{fill:var(--red-ui)}
.pcard__wish svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4}

/* sold out */
.pcard.is-out .pcard__media{filter:grayscale(.7) brightness(.75)}
.pcard__soldout{
  position:absolute;inset:auto 0 0 0;z-index:3;padding:9px;text-align:center;
  background:rgba(8,8,10,.8);backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gray-2);
}

/* ---------------- narrow screens ---------------- */
@media (max-width:600px){
  .pcard__name{font-size:12.5px}
  .pcard__buy{grid-template-columns:1fr 38px;gap:6px}
  .pcard__add{height:38px;font-size:9.5px;letter-spacing:.14em}
  .pcard__wish{height:38px}
  .pcard__sizes .swatch{height:28px;min-width:29px;padding:0 6px;font-size:9px}
}