.alert{
  margin:0 0 20px; padding:14px 18px; border-radius:var(--r);
  font-size:14px; line-height:1.6;
  border:1px solid var(--line-soft); background:rgba(61,61,61,.22); color:var(--muted);
}
.alert--success{ border-color:var(--line-cyan); background:rgba(155,251,250,.08); color:var(--cream); }
.alert--error{ border-color:rgba(203,67,55,.5); background:rgba(203,67,55,.12); color:var(--cream); }
.alert--info{ border-color:var(--line); }
.alert a{ color:var(--cyan); }

.form{ display:block; }
.form__row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:560px){ .form__row2{ grid-template-columns:1fr; } }

.field{ display:block; margin-bottom:16px; }
.field > span{
  display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:8px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="url"],
.field input[type="search"],
.field select,
.field textarea{
  width:100%; height:50px; padding:0 16px;
  background:rgba(18,16,14,.55); color:var(--cream);
  border:1px solid var(--line-soft); border-radius:var(--r);
  font-size:14.5px; transition:border-color .3s var(--ease);
}
.field textarea{ height:auto; padding:14px 16px; line-height:1.7; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--red); outline:none; }
.field input:disabled{ opacity:.55; }
.field input[type="file"]{
  width:100%; padding:13px 14px; background:rgba(18,16,14,.55);
  border:1px dashed var(--line); border-radius:var(--r); font-size:13.5px; color:var(--muted);
}
.field__hint{ display:block; margin-top:7px; font-size:12px; font-style:normal; color:var(--muted-2); line-height:1.55; }
.field__hint code{ color:var(--cyan); }

.check{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--muted); cursor:pointer; margin:6px 0 18px; }
.check input{ margin-top:3px; accent-color:var(--red); width:17px; height:17px; }

.form .btn{ margin-top:6px; }
.form__legal{ margin:16px 0 0; font-size:12.5px; color:var(--muted-2); }
.form__legal a{ color:var(--cyan); }

.shop__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(18px,2.6vw,30px);
}
.pcard{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(61,61,61,.30),rgba(61,61,61,.06));
  transition:border-color .4s var(--ease), transform .4s var(--ease-out);
}
.pcard:hover{ border-color:var(--line); transform:translateY(-4px); }
.pcard__media{
  position:relative; display:block; aspect-ratio:3/4; overflow:hidden;
  background:rgba(18,16,14,.6);
}
.pcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.pcard:hover .pcard__media img{ transform:scale(1.05); }
.pcard__ph{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(203,67,55,.18), transparent 60%),
    radial-gradient(ellipse at 75% 80%, rgba(155,251,250,.12), transparent 60%);
}
.pcard__ph svg{ width:44px; height:44px; fill:none; stroke:var(--cyan); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.pcard__ph em{ font-style:normal; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); }
.pcard__ph--lg{ position:relative; aspect-ratio:3/4; border:1px solid var(--line-soft); border-radius:var(--r); }
.pcard__ph--lg svg{ width:64px; height:64px; }
.pcard__owned{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--cyan); color:var(--ink);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px;
}
.pcard__body{ display:flex; flex-direction:column; flex:1; padding:20px 20px 22px; }
.pcard__title{ font-family:var(--display); font-size:17px; line-height:1.25; text-transform:uppercase; margin:0 0 8px; }
.pcard__title a:hover{ color:var(--cyan); }
.pcard__sub{ color:var(--muted); font-size:13.5px; margin:0 0 12px; }
.pcard__meta{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.pcard__meta span{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
  border:1px solid var(--line-soft); border-radius:100px; padding:4px 10px;
}
.pcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
.pcard__price{ font-family:var(--display); font-size:20px; color:var(--red); }
.pcard__foot .btn{ height:42px; padding:0 16px; font-size:11px; }
.shop__note{ margin-top:clamp(30px,4vw,46px); text-align:center; font-size:13px; color:var(--muted-2); }

.product{ padding-top:clamp(130px,16vh,180px); }
.product__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,70px); align-items:start; }
.product__media img,
.product__media .pcard__ph--lg{
  width:100%; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 40px 90px -45px rgba(0,0,0,.95);
}
.product__specs{ margin:26px 0 30px; }
.product__buy{
  padding:24px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(165deg,rgba(61,61,61,.34),rgba(18,16,14,.6));
}
.product__price{
  display:block; font-family:var(--display); font-size:clamp(28px,3.4vw,40px);
  color:var(--red); line-height:1; margin-bottom:18px;
}
.product__note{ margin:14px 0 0; font-size:12.5px; color:var(--muted-2); }
.product__desc{ margin-top:34px; padding-top:28px; border-top:1px solid var(--line-soft); }
.product__desc p{ color:var(--muted); }
@media (max-width:900px){ .product__grid{ grid-template-columns:1fr; } .product__media{ max-width:340px; } }

.auth{ padding-top:clamp(130px,16vh,180px); }
.auth__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.auth__grid--narrow{ grid-template-columns:minmax(0,560px); justify-content:center; }
@media (max-width:900px){ .auth__grid{ grid-template-columns:1fr; } }

.auth__panel{
  padding:clamp(24px,3vw,36px);
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(165deg,rgba(61,61,61,.34),rgba(18,16,14,.7));
}
.auth__tabs{ display:flex; gap:4px; margin-bottom:26px; border-bottom:1px solid var(--line-soft); }
.auth__tabs a{
  padding:10px 2px; margin-right:22px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); border-bottom:2px solid transparent; transition:color .3s, border-color .3s;
}
.auth__tabs a.is-on{ color:var(--cream); border-bottom-color:var(--red); }
.auth__tabs a:hover{ color:var(--cream); }

.account{ padding-top:clamp(130px,16vh,180px); }
.account__h{
  font-family:var(--display); font-size:clamp(17px,1.7vw,21px); text-transform:uppercase;
  margin:0 0 18px; scroll-margin-top:110px;
}
.account__empty{
  padding:34px; text-align:center; border:1px dashed var(--line-soft); border-radius:var(--r);
  color:var(--muted);
}
.account__empty p{ margin-bottom:18px; }

.orders{ display:grid; gap:12px; margin-bottom:clamp(40px,5vw,60px); }
.order{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:20px 22px; border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(61,61,61,.28),rgba(61,61,61,.05));
  transition:border-color .35s var(--ease);
}
.order:hover{ border-color:var(--line); }
.order h3{ font-family:var(--display); font-size:16px; text-transform:uppercase; margin:0 0 8px; }
.order__meta{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:0; font-size:12px; color:var(--muted-2); }
.order .btn{ height:44px; padding:0 20px; font-size:11px; }

.account__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,34px); }
@media (max-width:800px){ .account__cols{ grid-template-columns:1fr; } }
.account__box{
  padding:26px; border:1px solid var(--line-soft); border-radius:var(--r);
  background:rgba(61,61,61,.16);
}
.account__out{ display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(34px,4vw,50px); }

.preview{
  padding:18px 22px; margin-bottom:8px;
  border:1px solid rgba(203,67,55,.5); border-radius:var(--r);
  background:rgba(203,67,55,.12); color:var(--cream); font-size:13.5px; line-height:1.65;
}
.preview strong{ display:block; margin-bottom:8px; }
.preview ul{ display:grid; gap:6px; margin:0; }
.preview li{ color:var(--muted); }
.preview a{ color:var(--cyan); }
.pcard--draft{ opacity:.62; }
.pcard__owned--draft{ background:var(--red); color:#fff; }
.pcard__why{ margin:0 0 12px; font-size:12px; color:var(--muted-2); }
.pcard__why a{ color:var(--cyan); }