/* ============================================================
   MARKETPLACE — Voyage Static / Rolling / Signature
   Client-facing order flow. Cart is client-side (localStorage);
   order submits via Web3Forms (orders key).
   ============================================================ */
:root {
  --mkt-paper: #efeae0;
  --mkt-orange: #e0a15e;
  --mkt-mut: #8f887e;
  --mkt-ink: #0c0a08;
}

/* ---- cart button in topnav ---- */
.mkt-cartbtn {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid rgba(224,161,94,.55);
  background: rgba(224,161,94,.1);
  color: var(--mkt-paper);
}
.mkt-cartbtn__ic { flex: 0 0 auto; color: var(--mkt-orange); }
.mkt-cartbtn b { color: var(--mkt-orange); font-weight: 800; }
.mkt-cartbtn.bump { animation: mktcartbump .45s cubic-bezier(.2,1.3,.4,1); }
/* show the brief button at the top-right of the nav on mobile (the nav's meta
   is normally hidden < 820px); sits just left of the hamburger, compact icon + count */
@media (max-width: 820px) {
  [data-page="marketplace"] .topnav { grid-template-columns: 1fr auto auto; gap: 10px; }
  [data-page="marketplace"] .topnav__meta { display: block !important; }
  [data-page="marketplace"] .topnav__meta .btn { display: inline-flex !important; padding: 9px 13px; font-size: 12px; }
  .mkt-cartbtn__label { display: none; }
}
@keyframes mktcartbump { 0%{transform:scale(1)} 35%{transform:scale(1.16); border-color:var(--mkt-orange)} 100%{transform:scale(1)} }

/* add-to-cart feedback */
.mkt-add.pulse { animation: mktaddpulse .4s ease; }
@keyframes mktaddpulse { 0%{transform:scale(1)} 40%{transform:scale(.96)} 100%{transform:scale(1)} }

/* toast confirmation */
.mkt-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(24px); background: var(--mkt-orange); color: #14110e; font-weight: 800; font-size: 14px; letter-spacing: .01em; padding: 13px 22px; border-radius: 999px; box-shadow: 0 12px 34px rgba(0,0,0,.55); opacity: 0; pointer-events: none; z-index: 950; transition: opacity .22s ease, transform .28s cubic-bezier(.2,1.2,.4,1); white-space: nowrap; }
.mkt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- hero ---- */
.mkt-hero { padding: clamp(48px,7vw,96px) clamp(16px,4vw,64px) 24px; }
.mkt-hero__eyebrow { font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 13px; letter-spacing: .22em; color: var(--mkt-orange); text-transform: uppercase; margin-bottom: 18px; }
.mkt-hero__title { font-size: clamp(40px,7vw,88px); font-weight: 900; letter-spacing: -.03em; line-height: .98; }
.mkt-hero__title em { color: var(--mkt-orange); font-style: normal; }
.mkt-hero__sub { margin-top: 20px; font-size: clamp(16px,2vw,21px); color: #cfc7bb; max-width: 60ch; line-height: 1.5; }

/* ---- how it works ---- */
.mkt-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; padding: 30px clamp(16px,4vw,64px) 40px; }
.mkt-step { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 24px; background: rgba(255,255,255,.02); }
.mkt-step__no { font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 13px; color: var(--mkt-orange); letter-spacing: .1em; }
.mkt-step__t { font-size: 22px; font-weight: 800; margin: 10px 0 6px; letter-spacing: -.01em; }
.mkt-step__d { font-size: 15px; color: var(--mkt-mut); line-height: 1.5; }
@media (max-width: 820px){ .mkt-steps { grid-template-columns: 1fr; } }

/* ---- tier cards (index) ---- */
.mkt-tiers { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; padding: 8px clamp(16px,4vw,64px) 80px; }
@media (max-width: 1180px){ .mkt-tiers { grid-template-columns: repeat(2,1fr); } }

.mkt-tier { display: flex; flex-direction: column; border: 1.5px solid rgba(255,255,255,.14); border-radius: 20px; overflow: hidden; background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(13,12,10,.2)); text-decoration: none; color: var(--mkt-paper); transition: border-color .2s, transform .2s; }
.mkt-tier:hover { border-color: rgba(224,161,94,.5); transform: translateY(-3px); }
.mkt-tier__no { font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 12px; letter-spacing: .18em; color: var(--mkt-mut); }
.mkt-tier__body { padding: 30px 26px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mkt-tier__name { font-size: 32px; font-weight: 900; letter-spacing: -.02em; margin-top: 12px; }
.mkt-tier__tag { font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 11px; letter-spacing: .14em; color: var(--mkt-orange); text-transform: uppercase; }
.mkt-tier__desc { font-size: 15px; color: #cfc7bb; line-height: 1.5; margin-top: 6px; }
.mkt-tier__go { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.mkt-tier__go span { color: var(--mkt-orange); font-size: 22px; }
@media (max-width: 820px){ .mkt-tiers { grid-template-columns: 1fr; } }

/* ---- tier page hero ---- */
.mkt-thead { padding: clamp(40px,6vw,80px) clamp(16px,4vw,64px) 10px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 48px; align-items: center; }
.mkt-thead__text { min-width: 0; }
.mkt-thead__seal { justify-self: end; }
.mkt-seal { width: 250px; height: 250px; max-width: 100%; display: block; }
.mkt-seal__ringline { fill: none; stroke: rgba(224,161,94,.35); stroke-width: 1.3; }
.mkt-seal__ringtext { fill: var(--mkt-orange); font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 13px; letter-spacing: 2px; font-weight: 700; }
.mkt-seal__star { fill: var(--mkt-orange); font-size: 13px; }
.mkt-seal__spin { transform-box: view-box; transform-origin: 130px 130px; animation: mktspin 28s linear infinite; }
.mkt-seal__num { fill: var(--mkt-paper); font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 88px; }
.mkt-seal__days { fill: var(--mkt-orange); font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 19px; letter-spacing: .22em; font-weight: 700; }
@keyframes mktspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .mkt-seal__spin { animation: none; } }
@media (max-width: 860px){ .mkt-thead { grid-template-columns: 1fr; gap: 24px; } .mkt-thead__seal { justify-self: start; } .mkt-seal { width: 180px; height: 180px; } }
.mkt-thead__crumb { font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 12px; letter-spacing: .14em; color: var(--mkt-mut); text-transform: uppercase; }
.mkt-thead__crumb a { color: var(--mkt-mut); text-decoration: none; }
.mkt-thead__crumb a:hover { color: var(--mkt-orange); }
.mkt-thead__name { font-size: clamp(36px,6vw,72px); font-weight: 900; letter-spacing: -.03em; margin-top: 14px; }
.mkt-thead__name em { color: var(--mkt-orange); font-style: normal; }
.mkt-thead__desc { margin-top: 14px; font-size: 18px; color: #cfc7bb; max-width: 56ch; line-height: 1.5; }
.mkt-thead__frame { margin-top: 18px; font-size: 16px; line-height: 1.5; color: #cfc7bb; max-width: 62ch; border-left: 2px solid var(--mkt-orange); padding-left: 14px; }
.mkt-thead__frame b { color: var(--mkt-paper); font-weight: 700; }
.mkt-thead__hint { margin-top: 18px; font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--mkt-orange); max-width: 62ch; }

/* ---- reel grid ---- */
.ig-strip { padding: 26px clamp(16px, 4vw, 64px) 60px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.ig-card { border-radius: 18px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.16); background: #0d0c0a; box-shadow: 0 4px 18px rgba(0,0,0,.45); display: flex; flex-direction: column; min-height: 480px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ig-card:hover { transform: translateY(-3px); border-color: rgba(224,161,94,.45); box-shadow: 0 12px 30px rgba(0,0,0,.55); }
.ig-card__top { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1.5px solid rgba(255,255,255,.12); }
.ig-card__ref { font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 10px; letter-spacing: .16em; color: var(--mkt-mut); }
/* descriptive badges (style/use, not metrics) */
.ig-badge { font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 10px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; line-height: 1; display: inline-flex; align-items: center; gap: 6px; }
.ig-badge--pop { background: var(--mkt-orange); color: #14110e; }
.ig-badge--trend { background: rgba(224,161,94,.14); color: var(--mkt-orange); border: 1px solid rgba(224,161,94,.5); }
.ig-badge--new { background: rgba(184,198,158,.14); color: #b8c69e; border: 1px solid rgba(184,198,158,.5); }
.ig-badge--soc { background: transparent; color: var(--mkt-paper); border: 1px solid rgba(255,255,255,.28); }
.ig-card .instagram-media, .ig-card iframe.instagram-media { min-width: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; display: block !important; }
.ig-card__foot { padding: 12px; border-top: 1.5px solid rgba(255,255,255,.12); }
.mkt-add { width: 100%; cursor: pointer; border: 1.5px solid var(--mkt-orange); background: var(--mkt-orange); color: #14110e; font-family: var(--f-mono,'JetBrains Mono',monospace); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 13px; border-radius: 10px; transition: background .15s; }
.mkt-add:hover { background: #eab873; }
.mkt-add.is-added { background: transparent; color: var(--mkt-orange); }
.mkt-add.is-added::before { content: "✓ "; }
@media (max-width: 900px){ .ig-grid { grid-template-columns: 1fr; } .ig-card { min-height: 440px; } }

/* ---- mid-page CTA band with car image (bottom of each tier) ---- */
.mkt-cta { position: relative; overflow: hidden; text-align: center; padding: 100px clamp(16px,4vw,64px) 108px; border-top: 1px solid rgba(255,255,255,.08); }
.mkt-cta__bg { position: absolute; inset: 0; z-index: 0; background: url('assets/work-jesko-hero.jpg') center 50%/cover; }
.mkt-cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,7,6,.72) 0%, rgba(8,7,6,.84) 100%); }
.mkt-cta > *:not(.mkt-cta__bg) { position: relative; z-index: 1; }
.mkt-cta__lbl { display: block; font-size: 12px; letter-spacing: .24em; color: var(--mkt-orange); text-transform: uppercase; margin-bottom: 16px; }
.mkt-cta__h { font-size: clamp(32px,5vw,56px); font-weight: 900; letter-spacing: -.03em; line-height: 1.03; }
.mkt-cta__h em { color: var(--mkt-orange); font-style: normal; }
.mkt-cta__sub { margin: 16px auto 30px; font-size: 18px; color: #e7e1d6; max-width: 52ch; line-height: 1.5; }

/* ---- cart drawer (also the order form) ---- */
.mkt-drawer__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition: opacity .25s; z-index: 900; }
.mkt-drawer__overlay.open { opacity: 1; visibility: visible; }
.mkt-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 92vw); background: #100e0c; border-left: 1.5px solid rgba(224,161,94,.4); transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 901; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.6); }
.mkt-drawer.open { transform: translateX(0); }
.mkt-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.mkt-drawer__head h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.mkt-drawer__close { background: none; border: none; color: var(--mkt-paper); font-size: 26px; cursor: pointer; line-height: 1; }
.mkt-drawer__body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.mkt-cart-empty { color: var(--mkt-mut); font-size: 15px; text-align: center; padding: 40px 0; }
.mkt-cart-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mkt-cart-item { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px; }
.mkt-cart-item__txt { flex: 1; min-width: 0; }
.mkt-cart-item__t { font-size: 14px; font-weight: 700; }
.mkt-cart-item__u { font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 10px; color: var(--mkt-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-cart-item__rm { background: none; border: none; color: var(--mkt-mut); cursor: pointer; font-size: 18px; }
.mkt-cart-item__rm:hover { color: var(--mkt-orange); }

.mkt-form { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 12px; }
.mkt-form__lbl { font-family: var(--f-mono,'JetBrains Mono',monospace); font-size: 11px; letter-spacing: .16em; color: var(--mkt-orange); text-transform: uppercase; }
.mkt-form input, .mkt-form textarea { width: 100%; background: #0a0908; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 12px 14px; color: var(--mkt-paper); font-family: inherit; font-size: 15px; }
.mkt-form input:focus, .mkt-form textarea:focus { outline: none; border-color: var(--mkt-orange); }
.mkt-form textarea { resize: vertical; min-height: 70px; }
.mkt-form__submit { cursor: pointer; border: none; background: var(--mkt-orange); color: #14110e; font-weight: 800; font-size: 15px; padding: 15px; border-radius: 999px; margin-top: 4px; }
.mkt-form__submit:disabled { opacity: .45; cursor: not-allowed; }
.mkt-form__note { font-size: 11px; color: var(--mkt-mut); text-align: center; }
.mkt-form__ok { display: none; text-align: center; padding: 30px 10px; }
.mkt-form__ok.show { display: block; }
.mkt-form__ok h3 { color: var(--mkt-orange); font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.mkt-form__ok p { color: #cfc7bb; font-size: 15px; line-height: 1.5; }