/* Usama Silk — custom layer over Tailwind CDN. */

body { font-family: "Jost", -apple-system, sans-serif; }
.font-display { font-family: "Italiana", serif !important; }

[hidden] { display: none !important; }

/* buttons */
.btn-solid {
  display: inline-block; text-align: center;
  background: #141210; color: #f7f4ef;
  padding: 0.85rem 2.2rem; font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.btn-solid:hover { background: #b39355; color: #141210; }
.btn-solid:disabled { opacity: 0.55; cursor: wait; }
.btn-ghost {
  display: inline-block; text-align: center;
  border: 1px solid #141210; color: #141210;
  padding: 0.85rem 2rem; font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: all 0.2s;
}
.btn-ghost:hover { border-color: #b39355; color: #b39355; }
.btn-gold {
  display: inline-block; text-align: center;
  border: 1px solid #b39355; color: #cfb98a;
  padding: 0.85rem 2.2rem; font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: all 0.2s;
}
.btn-gold:hover { background: #b39355; color: #141210; }
.btn-gold:disabled { opacity: 0.55; cursor: wait; }

/* form fields */
.lbl { display: block; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(247,244,239,0.55); margin-bottom: 0.45rem; }
.lbl-l { display: block; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: #6b6560; margin-bottom: 0.45rem; }
.field-dark {
  width: 100%; background: transparent; color: #f7f4ef;
  border: 1px solid rgba(247,244,239,0.25); padding: 0.7rem 0.9rem; font-size: 0.9rem;
}
.field-dark::placeholder { color: rgba(247,244,239,0.35); }
.field-dark:focus { outline: none; border-color: #b39355; }
.field-light {
  width: 100%; background: #fff; color: #141210;
  border: 1px solid rgba(20,18,16,0.2); padding: 0.7rem 0.9rem; font-size: 0.9rem;
}
.field-light:focus { outline: none; border-color: #b39355; }
.field-light[readonly] { background: #eeeae2; color: #6b6560; }

.qty-btn { width: 1.5rem; height: 1.5rem; line-height: 1; color: #141210; }
.qty-btn:hover { color: #b39355; }

/* cart badge */
.cart-badge {
  position: absolute; top: -4px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #b39355; color: #141210;
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
  border-radius: 999px;
}
@keyframes cartpulse { 40% { transform: scale(1.25); } }
.cart-pulse { animation: cartpulse 0.4s ease; }

/* designer marquee */
.marquee { display: inline-block; animation: marquee 28s linear infinite; }
.marquee > span { display: inline-block; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* editorial cards */
.edit-card img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.edit-card:hover img { transform: scale(1.04); }

/* product cards */
.prod-card { cursor: pointer; }
.prod-card .prod-img { overflow: hidden; background: #eeeae2; }
.prod-card img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.prod-card:hover img { transform: scale(1.05); }
.prod-card .prod-line { height: 1px; background: #b39355; width: 0; transition: width 0.5s; }
.prod-card:hover .prod-line { width: 100%; }

/* filter buttons */
.filter-btn {
  padding: 0.5rem 1.2rem; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid rgba(20,18,16,0.2); color: #141210;
  transition: all 0.2s;
}
.filter-btn:hover { border-color: #b39355; color: #b39355; }
.filter-btn.is-on { background: #141210; border-color: #141210; color: #f7f4ef; }

/* size chips */
.size-chip {
  min-width: 2.6rem; padding: 0.45rem 0.7rem; text-align: center;
  border: 1px solid rgba(20,18,16,0.25); font-size: 12px; letter-spacing: 0.08em;
  cursor: pointer; transition: all 0.15s;
}
.size-chip.is-on { background: #141210; color: #f7f4ef; border-color: #141210; }

/* drop pills */
.pill-live, .pill-soon {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.35rem 0.9rem; border-radius: 999px;
}
.pill-live { background: #141210; color: #cfb98a; }
.pill-soon { border: 1px solid rgba(20,18,16,0.3); color: #6b6560; }

/* cart drawer (injected) */
#cart-drawer { position: fixed; inset: 0; z-index: 60; }
#cart-drawer .cart-scrim { position: absolute; inset: 0; background: rgba(20,18,16,0.55); }
#cart-drawer .cart-panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(420px, 92vw); background: #f7f4ef;
  display: flex; flex-direction: column;
  box-shadow: -24px 0 60px rgba(20,18,16,0.25);
  animation: slidein 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }

/* order tracker */
#timeline { display: flex; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.track-step {
  position: relative; flex: 1; min-width: 7rem; padding: 1.4rem 0.5rem 0;
  color: #6b6560; font-size: 0.82rem; text-align: center;
  letter-spacing: 0.06em;
}
.track-step::before {
  content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px;
  background: rgba(20,18,16,0.18);
}
.track-dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: #f7f4ef; border: 1px solid rgba(20,18,16,0.35);
}
.track-step.done { color: #141210; }
.track-step.done::before { background: #b39355; }
.track-step.done .track-dot { background: #b39355; border-color: #b39355; }
.track-step.now { color: #b39355; font-weight: 500; }
.track-step.now .track-dot {
  background: #b39355; border-color: #b39355;
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping {
  70% { box-shadow: 0 0 0 10px rgba(179, 147, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(179, 147, 85, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee, .track-step.now .track-dot { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
}