/* ===========================================================================
   STOREFRONT — design system
   ---------------------------------------------------------------------------
   Brand: near-black ground, neon pink, blackletter display. One person selling
   their own video, photography, audio and templates to general consumers.

   Two risks this palette carries, and how they're handled:

   1. Dark + neon is a crowded look. What keeps this from reading generic is
      restraint — no glow on everything, no gradient borders, no purple haze
      behind every panel. The blackletter is the one loud element; everything
      else stays quiet so it can be.

   2. UnifrakturCook is close to unreadable below about 24px and has one
      weight only. It is therefore used for brand moments and large display
      ONLY — never a product name, never a label, never UI. Manrope carries
      everything a customer actually has to read.

   Contrast, measured against #010103:
      #FAF3FB  19.15  AAA   body and headings
      #CAC7D8  12.58  AAA   secondary text
      #E684E2   8.70  AAA   accent text and links
      #A17B92   5.72  AA    muted text — fine, but not for anything critical
      #5E59EA   4.06  large text and fills only
      #8D207C   2.61  FAILS as text. Surface and fill only.
   ========================================================================= */

:root {
  --bg:        #010103;
  --surface:   #190B1D;
  --surface-2: #24102A;
  --line:      #35183C;
  --line-soft: rgba(230,132,226,.14);

  --pink:      #E684E2;
  --pink-lift: #F5B3F3;
  --magenta:   #8D207C;
  --magenta-d: #560B4B;
  --electric:  #5E59EA;

  --text:      #FAF3FB;
  --text-2:    #CAC7D8;
  --text-3:    #A17B92;

  --display: 'UnifrakturCook', 'Manrope', cursive;
  --sans:    'Manrope', system-ui, -apple-system, sans-serif;

  --max:  1240px;
  --gut:  clamp(1.15rem, 4vw, 3rem);
  --ease: cubic-bezier(.22,.61,.36,1);
  --r:    4px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px; line-height: 1.65;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(100% - var(--gut)*2, var(--max)); margin-inline: auto; }

/* ── display type ────────────────────────────────────────────────────────
   Blackletter, large only. `letter-spacing` is positive because
   UnifrakturCook's default fit is tight and the forms collide at size. */

/* Blackletter is now reserved for the wordmark alone — see .hdr__mark and
   .ftr__mark. It reads as a signature at two words and large size; at heading
   size over detailed imagery it costs more legibility than it earns, which is
   the trade every customer loses.

   Headings are Manrope at weight 800 with negative tracking. Against precise,
   high-detail renders a tight mechanical sans holds its own; a soft decorative
   face just gets visually overrun. */

.d1 {
  font-family: var(--sans);
  font-size: clamp(2.3rem, 5.6vw, 3.9rem);
  line-height: 1.05; font-weight: 800;
  letter-spacing: -.03em;
  margin: 0; color: var(--text);
}
.d2 {
  font-family: var(--sans);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.15; font-weight: 800;
  letter-spacing: -.025em;
  margin: 0; color: var(--text);
}

/* The wordmark. The one place the blackletter stays. */
.brand { font-family: var(--display); font-weight: 400; letter-spacing: .02em; }

/* Sans heading, for anywhere blackletter would hurt comprehension — which is
   most places. Product names use this, deliberately. */
.h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700;
      letter-spacing: -.01em; margin: 0; }

.lede { font-size: 1.05rem; line-height: 1.75; color: var(--text-2);
        max-width: 56ch; margin: 0; }
.meta { font-size: .8rem; line-height: 1.5; color: var(--text-3); }

/* ── buttons ────────────────────────────────────────────────────────────
   Dark text on neon pink: 8.70:1. White on pink would be 2.2:1 and illegible,
   which is the mistake this palette invites. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.8rem;
  font-family: var(--sans); font-size: .92rem; font-weight: 700; line-height: 1;
  letter-spacing: .01em;
  border: 1px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease);
}
.btn--buy { background: var(--pink); color: var(--bg); border-color: var(--pink); }
.btn--buy:hover { background: var(--pink-lift); border-color: var(--pink-lift); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--pink); color: var(--pink); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.15rem 2rem; font-size: 1rem; }

/* ── header ─────────────────────────────────────────────────────────────── */

.hdr {
  position: sticky; top: 0; z-index: 40;
  background: rgba(1,1,3,.86);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 2rem; height: 68px; }
.hdr__mark {
  font-family: var(--display); font-size: 1.55rem; font-weight: 400;
  letter-spacing: .02em; text-decoration: none; margin-right: auto;
  color: var(--text); line-height: 1;
}
.hdr__nav { display: flex; gap: 1.6rem; }
.hdr__nav a {
  font-size: .9rem; font-weight: 600; color: var(--text-2); text-decoration: none;
  padding-bottom: .2rem; border-bottom: 1.5px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.hdr__nav a:hover { color: var(--text); }
.hdr__nav a[aria-current="page"] { color: var(--pink); border-bottom-color: var(--pink); }

.hdr__cart { display: flex; align-items: center; gap: .5rem;
             font-size: .9rem; font-weight: 600; text-decoration: none; }
.hdr__count {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 800; line-height: 1;
  background: var(--pink); color: var(--bg); border-radius: 10px;
}
@media (max-width: 680px) { .hdr__nav { display: none; } }

/* ── work tile ──────────────────────────────────────────────────────────
   On a near-black ground an image with no edge appears to float. A hairline
   in the brand's own pink, at low alpha, gives it a boundary without turning
   into a glowing frame. */

.tile { display: block; text-decoration: none; color: inherit; }
.tile__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  margin-bottom: .85rem;
  transition: border-color .25s var(--ease);
}
.tile:hover .tile__media { border-color: rgba(230,132,226,.45); }
.tile__media img { width: 100%; height: 100%; object-fit: cover;
                   transition: transform .6s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.04); }

.tile__kind {
  position: absolute; left: .6rem; top: .6rem;
  padding: .3rem .6rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text); background: rgba(1,1,3,.78);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(4px); border-radius: 2px;
}
.tile__dur {
  position: absolute; right: .6rem; bottom: .6rem;
  padding: .24rem .5rem;
  font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text); background: rgba(1,1,3,.78); border-radius: 2px;
}

.tile__name  { font-size: .95rem; font-weight: 600; margin: 0 0 .25rem; line-height: 1.45; }
.tile__price { font-size: .95rem; font-weight: 700; margin: 0; color: var(--pink);
               font-variant-numeric: tabular-nums; }
.tile__was   { font-weight: 500; color: var(--text-3); text-decoration: line-through;
               margin-left: .45rem; font-size: .87rem; }

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(1.9rem, 3vw, 2.9rem) clamp(1rem, 2vw, 1.75rem);
}
.grid > .tile--wide { grid-column: span 2; }
.grid > .tile--wide .tile__media { aspect-ratio: 16/9; }
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 1.4rem .85rem; }
  .grid > .tile--wide { grid-column: span 2; }
}

/* ── sections ───────────────────────────────────────────────────────────── */

.sec { padding-block: clamp(3rem, 7vw, 5.5rem); }
.sechead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: clamp(1.9rem, 3vw, 2.6rem);
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}
.sechead a { font-size: .88rem; font-weight: 700; color: var(--pink);
             text-decoration: none; white-space: nowrap; }
.sechead a:hover { color: var(--pink-lift); }

/* ── trust strip ─────────────────────────────────────────────────────────
   Magenta as a surface, which is the only safe use for it — as text on the
   ground it measures 2.61:1 and fails outright. */

.trust {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border-block: 1px solid var(--line);
}
.trust__i { background: var(--surface); padding: 1.5rem; }
.trust__t { font-size: .88rem; font-weight: 700; margin: 0 0 .3rem; color: var(--pink); }
.trust__b { font-size: .82rem; line-height: 1.65; color: var(--text-2); margin: 0; }
@media (max-width: 720px) { .trust { grid-template-columns: 1fr; } }

/* ── product page ───────────────────────────────────────────────────────── */

.pdp { display: grid; grid-template-columns: 1.65fr 1fr;
       gap: clamp(2rem, 4vw, 4rem); align-items: start;
       padding-block: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }

.pdp__stage {
  position: relative; background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r); overflow: hidden;
}
.pdp__stage img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }

.pdp__watermark {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; place-items: center;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.8rem); letter-spacing: .5em;
  text-indent: .5em;
  color: rgba(250,243,251,.26);
}

.pdp__playbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem;
  background: linear-gradient(transparent, rgba(1,1,3,.88));
}
.pdp__play {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: var(--pink); color: var(--bg); border: 0; border-radius: 50%;
  cursor: pointer; font-size: .85rem;
}
.pdp__track { flex: 1; height: 3px; background: rgba(250,243,251,.22); border-radius: 2px; }
.pdp__track span { display: block; width: 34%; height: 100%; background: var(--pink);
                   border-radius: 2px; }
.pdp__time { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--text-2); }

.pdp__thumbs { display: flex; gap: .5rem; margin-top: .8rem; }
.pdp__thumbs img {
  width: 88px; height: 62px; object-fit: cover; border-radius: 2px;
  border: 1px solid transparent; cursor: pointer; opacity: .45;
  transition: opacity .18s var(--ease), border-color .18s var(--ease);
}
.pdp__thumbs img:hover { opacity: .8; }
.pdp__thumbs img.is-on { opacity: 1; border-color: var(--pink); }

.buy { position: sticky; top: 92px; }
.buy__kind { display: inline-block; margin-bottom: .8rem;
             font-size: .72rem; font-weight: 800; letter-spacing: .08em;
             color: var(--pink); }
.buy__price {
  display: flex; align-items: baseline; gap: .65rem; margin: 1.1rem 0 .35rem;
  font-family: var(--sans); font-size: 2.2rem; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.buy__was { font-size: 1rem; font-weight: 500; color: var(--text-3);
            text-decoration: line-through; }
.buy__tax { font-size: .8rem; color: var(--text-3); margin: 0 0 1.6rem; }
.buy__actions { display: grid; gap: .65rem; margin-bottom: 1.6rem; }

.spec { border-top: 1px solid var(--line); margin: 0; }
.spec > div { display: flex; justify-content: space-between; gap: 1rem;
              padding: .75rem 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: .85rem; color: var(--text-3); margin: 0; }
.spec dd { font-size: .85rem; font-weight: 600; margin: 0; text-align: right;
           font-variant-numeric: tabular-nums; color: var(--text); }

/* Electric purple at 4.06:1 — safe as a surface tint, and the heading inside
   is large enough to clear the large-text threshold. */
.delivery {
  margin-top: 1.6rem; padding: 1rem 1.1rem;
  background: rgba(94,89,234,.12);
  border: 1px solid rgba(94,89,234,.3); border-radius: var(--r);
}
.delivery__t { font-size: .88rem; font-weight: 700; margin: 0 0 .2rem; color: var(--text); }
.delivery__b { font-size: .8rem; line-height: 1.6; color: var(--text-2); margin: 0; }

/* ── maker note ─────────────────────────────────────────────────────────── */

.maker {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.maker__face { width: 58px; height: 58px; flex: none; border-radius: 50%;
               object-fit: cover; border: 1px solid var(--line-soft); }
.maker__t { font-size: .95rem; font-weight: 700; margin: 0 0 .35rem; color: var(--pink); }
.maker__b { font-size: .88rem; line-height: 1.7; color: var(--text-2); margin: 0; }

/* ── footer ─────────────────────────────────────────────────────────────── */

.ftr { margin-top: clamp(3rem, 7vw, 5rem); padding-block: 3rem 2rem;
       background: var(--surface); border-top: 1px solid var(--line); }
.ftr__in { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
.ftr__mark { font-family: var(--display); font-size: 1.55rem; color: var(--text);
             margin: 0; line-height: 1; }
.ftr h4 { font-size: .8rem; font-weight: 700; color: var(--pink); margin: 0 0 .8rem;
          letter-spacing: .03em; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ftr a { font-size: .86rem; color: var(--text-2); text-decoration: none; }
.ftr a:hover { color: var(--pink); }
.ftr__base { margin-top: 2.4rem; padding-top: 1.3rem;
             border-top: 1px solid var(--line);
             font-size: .78rem; color: var(--text-3); }
@media (max-width: 720px) { .ftr__in { grid-template-columns: 1fr; gap: 1.9rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .tile:hover .tile__media img { transform: none; }
}

/* ═══ CART & CHECKOUT ═══════════════════════════════════════════════════════
   Added for the Blade storefront. Same tokens as everything above — no new
   colours, no new type sizes.
   ========================================================================= */

.page { padding-block: clamp(2rem, 5vw, 3.5rem); }
.page__head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
              padding-bottom: .9rem; border-bottom: 1px solid var(--line); }

/* ── cart ──────────────────────────────────────────────────────────────── */

.cart { display: grid; grid-template-columns: 1.7fr 1fr;
        gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .cart { grid-template-columns: 1fr; } }

.cart__line {
  display: grid; grid-template-columns: 96px 1fr auto;
  gap: 1.1rem; align-items: center;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.cart__thumb { width: 96px; height: 72px; object-fit: cover;
               border-radius: var(--r); border: 1px solid var(--line-soft); }
.cart__name { font-size: .95rem; font-weight: 600; margin: 0 0 .2rem; }
.cart__kind { font-size: .75rem; color: var(--text-3); margin: 0; }
.cart__price { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart__remove { background: none; border: 0; padding: 0; cursor: pointer;
                font-size: .78rem; color: var(--text-3); text-decoration: underline; }
.cart__remove:hover { color: var(--pink); }

/* Totals panel sticks so the checkout button stays reachable on a long cart. */
.totals { position: sticky; top: 92px; padding: clamp(1.25rem, 3vw, 1.75rem);
          background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--r); }
.totals__row { display: flex; justify-content: space-between; gap: 1rem;
               padding: .5rem 0; font-size: .9rem; color: var(--text-2); }
.totals__row--sum { margin-top: .6rem; padding-top: .9rem;
                    border-top: 1px solid var(--line);
                    font-size: 1.15rem; font-weight: 800; color: var(--text); }
.totals__row span:last-child { font-variant-numeric: tabular-nums; }

/* ── checkout ──────────────────────────────────────────────────────────── */

.checkout { display: grid; grid-template-columns: 1.2fr 1fr;
            gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .checkout { grid-template-columns: 1fr; } }

.field { display: block; margin-bottom: 1.15rem; }
.field > span { display: block; font-size: .8rem; font-weight: 700;
                margin-bottom: .4rem; color: var(--text-2); }
.field input {
  width: 100%; padding: .8rem .9rem;
  font-family: var(--sans); font-size: .95rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r);
}
.field input::placeholder { color: var(--text-3); }
.field input:focus { outline: none; border-color: var(--pink);
                     box-shadow: 0 0 0 3px rgba(230,132,226,.15); }

.field__error { display: block; margin-top: .35rem;
                font-size: .78rem; color: var(--pink-lift); }

/* Stripe injects its own iframe here; it needs a real box to mount into. */
#payment-element { min-height: 90px; margin-bottom: 1.25rem; }

.notice { padding: .9rem 1rem; border-radius: var(--r); font-size: .85rem;
          line-height: 1.6; margin-bottom: 1.25rem; }
.notice--error { background: rgba(230,132,226,.1);
                 border: 1px solid rgba(230,132,226,.35); color: var(--text); }
.notice--ok    { background: rgba(94,89,234,.12);
                 border: 1px solid rgba(94,89,234,.35); color: var(--text); }

/* ── downloads ─────────────────────────────────────────────────────────── */

.dl { display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; padding: 1rem 1.1rem; margin-bottom: .6rem;
      background: var(--surface); border: 1px solid var(--line);
      border-radius: var(--r); }
.dl__name { font-size: .92rem; font-weight: 600; margin: 0; }
.dl__meta { font-size: .78rem; color: var(--text-3); margin: .15rem 0 0; }

/* ── empty state ───────────────────────────────────────────────────────────
   An empty screen is an invitation to act, not a shrug. Always paired with the
   action that resolves it. */
.empty { padding: clamp(3rem, 8vw, 5rem) 1rem; text-align: center; }
.empty__t { font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem; }
.empty__b { font-size: .9rem; color: var(--text-2); margin: 0 0 1.5rem; }

/* ── flash ─────────────────────────────────────────────────────────────── */
.flash { padding: .85rem 1rem; margin-bottom: 1.5rem;
         background: rgba(94,89,234,.14); border: 1px solid rgba(94,89,234,.35);
         border-radius: var(--r); font-size: .88rem; }

/* ── payment method picker ────────────────────────────────────────────────
   FPX is listed first and pre-selected: most Malaysian buyers pay by online
   banking rather than card, and the default option is the one most people
   take. */

.pay-methods { display: grid; gap: .6rem; margin-bottom: 1.25rem; }

.pay-method {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.pay-method:hover { border-color: var(--pink); }
.pay-method:has(input:checked) {
  border-color: var(--pink); background: rgba(230,132,226,.08);
}
.pay-method input { accent-color: var(--pink); width: 17px; height: 17px; flex: none; }
.pay-method__body { display: grid; gap: .15rem; }
.pay-method__body strong { font-size: .95rem; font-weight: 700; }
.pay-method__body em { font-style: normal; font-size: .8rem; color: var(--text-3); }