/* ORSO Store — storefront styles, Showcase 6 look: near-black page, lime brand, gold accents, green price buttons. */
:root {
  --bg: #04070a;
  --panel: #0b1014;
  --panel-2: #10171c;
  --line: #222c33;
  --text: #f3f6f4;
  --muted: #9aa6ad;
  --lime: #b9f34a;
  --gold: #f5b72e;
  --gold-line: #e9b23a;
  --cash: #57e07f;
  --bp: #59b8ff;
  --vip: #ffb02e;
  --green-1: #3f8f1f;
  --green-2: #1d5a10;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0%, #142019 0%, transparent 55%), var(--bg);
  color: var(--text);
  font: 15px/1.45 "Roboto Condensed", Arial, sans-serif;
}
a { color: var(--lime); text-underline-offset: 3px; }
.wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Title */
.hero { text-align: center; padding: 34px 16px 18px; }
.hero__title { font: 700 clamp(40px, 7vw, 60px)/1 Oswald, sans-serif; color: var(--text); text-decoration: none; letter-spacing: -.5px; }
.hero__title span { color: var(--lime); }
.hero__sub { margin: 10px 0 0; color: #d6dde1; font-size: 17px; }
.hero__sub b { color: var(--lime); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border: 0; border-radius: 10px;
  background: var(--lime); color: #0d1607; font: 700 17px/1 "Roboto Condensed", sans-serif;
  text-decoration: none; cursor: pointer; transition: transform .12s, filter .12s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, .tab:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn--dark { background: #151c21; color: var(--text); border: 1px solid #39444c; font-size: 15px; }

/* Promo, alerts */
.promo { max-width: 760px; margin: 0 auto 16px; padding: 12px 18px; border-radius: var(--radius); background: linear-gradient(90deg, #3a1409, #1b0d08); border: 1px solid #ff6b3d77; text-align: center; font-size: 17px; }
.promo b { font: 700 24px Oswald, sans-serif; color: #ff8a4c; margin-right: 6px; }
.alert { max-width: 760px; margin: 12px auto; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.alert--ok { border-color: #b9f34a77; }
.alert--bad { border-color: #ff6b6b77; color: #ffd8d4; }
.alert--muted { color: var(--muted); }

/* Account */
.account { max-width: 760px; margin: 0 auto 18px; padding: 18px 22px; border-radius: var(--radius); background: rgba(11, 16, 20, .9); border: 1px solid var(--line); }
.account--search h1 { font: 700 clamp(26px, 5vw, 34px)/1.1 Oswald, sans-serif; margin: 6px 0 6px; text-transform: uppercase; }
.account--search p { color: var(--muted); margin: 0 0 14px; }
.step { color: var(--lime); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
.search label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.search__row { display: flex; gap: 10px; flex-wrap: wrap; }
.search input { flex: 1 1 240px; }
.search input, .buy input[type=email] {
  min-height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid #39444c;
  background: #070b0e; color: var(--text); font: 600 18px "Roboto Condensed", sans-serif; letter-spacing: .5px;
}
.account--found { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.account__info { margin: 0; font: 600 18px/1.35 Oswald, sans-serif; }
.account__info div { display: flex; gap: 6px; }
.account__info dd { margin: 0; color: var(--lime); overflow-wrap: anywhere; }

/* Tabs */
.tabs { display: flex; gap: 12px 26px; flex-wrap: wrap; justify-content: center; margin: 4px 0 18px; }
.tab {
  min-width: 120px; min-height: 42px; padding: 0 22px; border-radius: 10px; border: 1px solid #303a41;
  background: linear-gradient(180deg, #19222a, #10161b); color: #c9d2d7; font: 600 16px "Roboto Condensed", sans-serif; cursor: pointer;
}
.tab[aria-selected="true"] { color: #fff; border-color: var(--gold-line); background: linear-gradient(180deg, #4a3612, #2a1f0c); box-shadow: 0 0 18px rgba(233, 178, 58, .25); }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; max-width: 1150px; margin: 0 auto; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 8px 8px 10px;
  border-radius: var(--radius); background: var(--panel); border: 1px solid #1d262c;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .15s;
}
.card:hover { transform: translateY(-3px); }
.card--hit { border-color: var(--gold-line); box-shadow: 0 0 22px rgba(233, 178, 58, .28); }
.card__ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  padding: 3px 12px; border-radius: 4px; background: linear-gradient(180deg, #ffd04f, #e5a51c); color: #2a1a00;
  font: 700 12px Oswald, sans-serif; letter-spacing: .5px; text-transform: uppercase;
}
.card__ribbon i { font-size: 10px; }
.card__art { position: relative; border-radius: 10px; overflow: hidden; background: #070b0e; }
/* Card art is 725×1000 (portrait). */
.card__art img { display: block; width: 100%; height: auto; aspect-ratio: 725 / 1000; object-fit: cover; }
.card__head { position: absolute; inset: 0 0 auto; padding: 14px 10px 30px; text-align: center; background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent); }
.card__title { margin: 0; font: 700 clamp(22px, 2.6vw, 32px)/1.05 Oswald, sans-serif; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .75); }
.card__title small { font-size: .75em; }
.card--combo .card__title { font-size: clamp(18px, 2vw, 25px); }
.card--combo .card__title small { margin: 0 .1em; }
.card__sub { display: block; margin-top: 4px; font: italic 700 13px/1.2 "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .3px; text-shadow: 0 1px 6px #000; }
.card__sub em { font-style: italic; color: var(--gold); }
.card__badge {
  position: absolute; top: 31%; right: 10px; padding: 6px 8px; border-radius: 4px;
  background: linear-gradient(180deg, #ff3b35, #c4141a); color: #fff; font: 700 15px Oswald, sans-serif; box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.card__badge--sale { top: 10px; left: 10px; right: auto; }
.card__benefit { margin: 0; text-align: center; font-weight: 700; font-size: 14px; color: #f0e6c8; }
.card__benefit i { color: var(--gold); margin-right: 4px; }
.card__buy {
  width: 100%; min-height: 50px; border-radius: 9px; border: 1px solid #6fd13a;
  background: linear-gradient(180deg, var(--green-1), var(--green-2)); color: #fff; font: 700 24px/1 Oswald, sans-serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.card__buy s { font-size: 16px; opacity: .65; font-weight: 500; }
.card__buy:disabled { background: #1a2126; border-color: #333d44; color: var(--muted); font-size: 18px; }
.cur { font-style: normal; }
.cur--gold { color: var(--gold); }
.cur--cash { color: var(--cash); }
.cur--bp { color: var(--bp); }
.cur--vip { color: var(--vip); }
.cur--lime { color: var(--lime); }
.panel__caption { text-align: center; color: var(--muted); margin: 18px 0 0; }

/* Trust + footer */
.trust { list-style: none; padding: 0; margin: 28px auto 10px; max-width: 900px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.trust li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--muted); font-size: 13px; border-right: 1px solid var(--line); }
.trust li:last-child { border-right: 0; }
.trust i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; background: #16221a; color: var(--lime); }
.trust b { display: block; color: var(--text); font-size: 15px; }
.store-caption { margin: 8px 0 36px; color: #dfe6e2; }
.foot { border-top: 1px solid var(--line); padding: 22px 0 36px; color: var(--muted); font-size: 14px; }
.foot__row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot b { color: var(--text); }
.foot nav { display: flex; flex-direction: column; gap: 6px; }

/* Purchase dialog */
.buy { width: min(460px, 100% - 32px); padding: 0; border: 1px solid #39444c; border-radius: 18px; background: var(--panel-2); color: var(--text); }
.buy::backdrop { background: rgba(0, 0, 0, .75); }
.buy__form { padding: 24px; position: relative; display: flex; flex-direction: column; gap: 8px; }
.buy__close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 28px; cursor: pointer; }
.buy h2 { font: 700 24px Oswald, sans-serif; margin: 0; text-transform: uppercase; }
.buy__product { font: 700 22px Oswald, sans-serif; color: var(--lime); margin: 6px 0 0; }
.buy__desc, .buy__for, .buy__legal { margin: 0; color: var(--muted); font-size: 14px; }
.buy label { font-size: 14px; color: var(--muted); margin-top: 8px; }
.buy__hint { margin: 0; font-size: 14px; color: #ffd27a; }
.buy__hint button { padding: 0; border: 0; background: none; color: var(--lime); font: inherit; text-decoration: underline; cursor: pointer; }
.buy__pay { margin-top: 8px; background: linear-gradient(180deg, var(--green-1), var(--green-2)); color: #fff; border: 1px solid #6fd13a; font: 700 20px Oswald, sans-serif; min-height: 52px; }

/* Message pages (payment errors) */
.notice-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.notice-card { max-width: 520px; padding: 32px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); text-align: center; }
.notice-card h1 { font: 700 26px Oswald, sans-serif; color: var(--lime); margin-top: 0; }

@media (max-width: 600px) {
  .tabs { gap: 8px; }
  .tab { min-width: 0; flex: 1 1 40%; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card { padding: 6px 6px 8px; gap: 8px; }
  .card__title { font-size: 19px; }
  .card--combo .card__title { font-size: 15px; }
  .card__sub { font-size: 11px; }
  .card__head { padding: 10px 6px 24px; }
  .card__badge { font-size: 13px; padding: 4px 6px; }
  .card__benefit { font-size: 12px; }
  .card__buy { font-size: 19px; min-height: 44px; }
  .card__buy s { font-size: 13px; }
  .trust li { border-right: 0; border-bottom: 1px solid var(--line); }
  .account { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }