/* Variables, base isolation, hero, stat/trust primitives.
   Source range before split: assets/css/shop.css:1-657. */

/* ALVIRAN SHOP v3 Premium Matches Homepage Design Language Variables, colors, panels, typography from home.css */

/* Variables */
.alv-shop-wrap {
  --purple: #8B5CF6; --purple-l: #A78BFA; --purple-d: #7C3AED;
  --gold: #F9C86C; --gold-d: #F59E0B;
  --green: #34D399; --red: #EF4444;
  --bg: #0C0C0C; --bg-card: #161616; --bg-deep: #0a0a0a; --bg-mid: #1a1a1a; --bg-rich: #1f1f1f;
  --text: #F3F1FA; --muted: rgba(243,241,250,.65); --dim: rgba(243,241,250,.5);
  --border: rgba(255,255,255,.11); --border-l: rgba(255,255,255,.16);
  --font: 'Outfit','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease: cubic-bezier(.4,0,.2,1); --r: 18px; --r-sm: 12px; --r-pill: 999px;
}

/* Base */
.alv-shop-wrap, .alv-shop-wrap *, .alv-shop-wrap *::before, .alv-shop-wrap *::after { box-sizing: border-box !important; margin: 0; padding: 0; }
.alv-shop-wrap { position: relative; min-height: 100vh; background: var(--bg) !important; color: var(--text) !important; font-family: var(--font) !important; overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; text-align: center !important; }
.alv-shop-wrap a { color: inherit; text-decoration: none; }
.alv-shop-wrap p { color: var(--muted); margin: 0; text-align: inherit; }
.alv-shop-wrap h1, .alv-shop-wrap h2, .alv-shop-wrap h3 { font-weight: 800; line-height: 1.1; color: var(--text) !important; margin: 0; text-align: inherit; }
.alv-shop-wrap svg { display: inline-block; vertical-align: middle; }

/* Theme isolation only what's actually needed */
.alv-shop-wrap h1, .alv-shop-wrap h2, .alv-shop-wrap h3 { font-family: var(--font); }
.alv-shop-wrap .alv-shop-card, .alv-shop-wrap .alv-shop-card * { text-align: left; }
.alv-shop-wrap .alv-shop-faq-q, .alv-shop-wrap .alv-shop-faq-a { text-align: left; }
.alv-shop-wrap .alv-shop-modal-panel, .alv-shop-wrap .alv-shop-modal-panel * { text-align: left; }
.alv-shop-wrap .alv-shop-custom-banner, .alv-shop-wrap .alv-shop-custom-banner * { text-align: left; }

/* Fixed BG identical to homepage .page-bg */
.alv-shop-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: layout style paint; }
.alv-shop-bg::before { content: ""; position: absolute; top: -20%; left: -10%; width: 70%; height: 70%; background: radial-gradient(circle, rgba(139,92,246,.18), transparent 70%); opacity: .12; }
.alv-shop-bg::after  { content: ""; position: absolute; bottom: -20%; right: -10%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(249,200,108,.12), transparent 70%); opacity: .12; }
@media (min-width: 769px) {
  .alv-shop-bg::before { filter: blur(50px); animation: _sBg1 25s ease-in-out infinite; will-change: transform; opacity: 1; }
  .alv-shop-bg::after  { filter: blur(50px); animation: _sBg2 30s ease-in-out infinite; will-change: transform; opacity: 1; }
}
@keyframes _sBg1 { 0%,100% { transform: translate(0,0) } 50% { transform: translate(5%,10%) } }
@keyframes _sBg2 { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-5%,-10%) } }
.alv-shop-noise, .alv-shop-blob, .alv-shop-blob-1, .alv-shop-blob-2, .alv-shop-blob-3 { display: none; }

/* Container */
.alv-shop-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 40px 1.5rem 70px; }

/* Gradient text matching homepage .grad-text */
.alv-shop-grad { background: linear-gradient(135deg, var(--gold) 0%, #fff 50%, var(--gold) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: _sShimmer 3s linear infinite; }
@keyframes _sShimmer { 0% { background-position: 0% center } 100% { background-position: 200% center } }

/* Panel matching homepage .panel */
.alv-shop-panel { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--r); box-shadow: 0 10px 40px rgba(0,0,0,.3); transition: transform .3s ease, border-color .3s ease; }
.alv-shop-panel:hover { transform: translateY(-4px); border-color: rgba(249,200,108,.25); }

/* SVG defaults stroke/fill only, NO global size */
.alv-shop-wrap svg:not([width]) { width: 16px; height: 16px; }
.alv-shop-wrap svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* HERO redesigned */

.alv-shop-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 1.5rem;
  padding-top: .25rem;
  animation: _sFadeUp .6s ease both;
}

/* Eyebrow label */
.alv-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(249,200,108,.7);
  margin-bottom: .65rem;
}
.alv-hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34D399;
  flex-shrink: 0;
  position: relative;
}
.alv-hero-eyebrow-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #34D399;
  animation: _sPulse-dot 2.2s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes _sPulse-dot {
  0%   { transform: scale(1);   opacity: .6; }
  60%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}
.alv-hero-eyebrow-sep { color: rgba(255,255,255,.18); }

/* Badge homepage .badge-gold style (kept for potential other uses) */
.alv-shop-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: var(--r-pill); font-size: .75rem; font-weight: 600; background: rgba(249,200,108,.08); border: 1px solid rgba(249,200,108,.2); color: var(--gold); margin-bottom: 1rem; letter-spacing: .04em; }
.alv-shop-badge svg { width: 13px; height: 13px; stroke: var(--gold); }

.alv-shop-hero-title { font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 900; letter-spacing: -.03em; margin: 0 auto .5rem; text-align: center; }
.alv-shop-hero-sub { font-size: 1rem; color: var(--muted); margin: 0 auto 1.25rem; max-width: 540px; line-height: 1.7; text-align: center; }

/* Trust Cards */
/* Replaces old .alv-shop-trust pill badges                                 */

.alv-hero-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 1.2rem;
}

.alv-hero-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  transition: border-color .2s, background .2s;
  white-space: nowrap;
}
.alv-hero-card:hover {
  background: #1a1a1a;
  border-color: rgba(255,255,255,.14);
}

/* Icon container colored square */
.alv-hero-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.alv-hero-card-icon svg {
  width: 16px;
  height: 16px;
}

/* Shield icon */
.alv-hero-card-icon--shield {
  background: rgba(249,200,108,.08);
  border: 1px solid rgba(249,200,108,.2);
  color: var(--gold);
}
/* Access green */
.alv-hero-card-icon--access {
  background: #0f2318;
  border: 1px solid #1a4a2a;
  color: #34D399;
}
/* Speed gold */
.alv-hero-card-icon--speed {
  background: #231c0a;
  border: 1px solid #4a3a10;
  color: #F9C86C;
}
/* Protect verified */
.alv-hero-card-icon--protect {
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.2);
  color: #34D399;
}

/* Card text */
.alv-hero-card-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.alv-hero-card-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.alv-hero-card-sub {
  font-size: .75rem;
  color: var(--dim);
  font-weight: 500;
  letter-spacing: .02em;
}

/* Trust cards removed replaced by stat bar */
.alv-shop-trust { display: none !important; }
.alv-shop-trust-badge { display: none !important; }
.alv-shop-shield { display: none; }
.alv-hero-cards { display: none !important; }

/* Social Proof Stat Bar */
.alv-shop-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: .9rem;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 9px 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.alv-shop-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0 14px;
}
.alv-shop-stat-num {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.2;
}
/* Star in rating no inline SVG needed anymore */
.alv-stat-star {
  color: #F9C86C;
  font-style: normal;
  font-size: .9em;
}
.alv-shop-stat-plus { color: var(--gold); font-size: .85em; }
.alv-shop-stat-unit { font-size: .7em; font-weight: 600; color: var(--muted); }
.alv-shop-stat-label { font-size: .75rem; color: var(--dim); font-weight: 500; letter-spacing: .03em; white-space: nowrap; }
.alv-shop-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,.08); flex-shrink: 0; }

/* -- ALVIRAN trust system ----------------------------------------------- */
#alv-shop-app .alv-shop-standard-container {
  padding-top: 0;
  padding-bottom: 58px;
}

#alv-shop-app .alv-shop-standard {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
  gap: 18px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 12%, rgba(244, 199, 109, .10), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(0, 182, 122, .08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018)),
    rgba(12, 13, 18, .86);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .045);
}

#alv-shop-app .alv-shop-standard-main,
#alv-shop-app .alv-shop-standard-proof {
  min-width: 0;
}

#alv-shop-app .alv-shop-standard-main {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(6px, 1.5vw, 12px);
}

#alv-shop-app .alv-shop-standard-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(244, 199, 109, .18);
  border-radius: 999px;
  background: rgba(244, 199, 109, .065);
  color: rgba(255, 232, 177, .88);
  font-size: .66rem;
  font-weight: 920;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

#alv-shop-app .alv-shop-standard-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #42d88d;
  box-shadow: 0 0 0 5px rgba(66, 216, 141, .10);
}

#alv-shop-app .alv-shop-standard h2 {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 248, 234, .96);
  font-size: clamp(1.62rem, 3vw, 2.58rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.04;
  text-align: left;
}

#alv-shop-app .alv-shop-standard-main p {
  max-width: 610px;
  margin: 0;
  color: rgba(255, 248, 234, .62);
  font-size: .88rem;
  font-weight: 580;
  line-height: 1.5;
  text-align: left;
}

#alv-shop-app .alv-shop-standard-main > strong {
  color: rgba(255, 248, 234, .82);
  font-size: .82rem;
  font-weight: 880;
  line-height: 1.35;
}

#alv-shop-app .alv-shop-standard-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

#alv-shop-app .alv-shop-standard-flow span {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .078);
  border-radius: 12px;
  background: rgba(255, 255, 255, .032);
}

#alv-shop-app .alv-shop-standard-flow span::after {
  content: "";
  position: absolute;
  inset: auto 12px 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(244, 199, 109, .72), rgba(66, 216, 141, .58));
  opacity: .72;
}

#alv-shop-app .alv-shop-standard-flow small {
  color: rgba(244, 199, 109, .68);
  font-size: .6rem;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: 1;
}

#alv-shop-app .alv-shop-standard-flow b {
  color: rgba(255, 248, 234, .88);
  font-size: .75rem;
  font-weight: 860;
  line-height: 1.18;
}

/* Quality Promise pill sits under the 4-step flow */
#alv-shop-app .alv-shop-standard-promise {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(249, 200, 108, .10);
  border: 1px solid rgba(249, 200, 108, .32);
  color: var(--gold);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
  align-self: flex-start;
  max-width: 100%;
}
#alv-shop-app .alv-shop-standard-promise strong {
  color: #FFD68F;
  font-weight: 800;
}
#alv-shop-app .alv-shop-standard-promise:hover {
  background: rgba(249, 200, 108, .18);
  border-color: rgba(249, 200, 108, .55);
}
#alv-shop-app .alv-shop-standard-promise:hover .alv-shop-standard-promise-arrow {
  transform: translateX(3px);
}
#alv-shop-app .alv-shop-standard-promise-icon {
  stroke: var(--gold);
  flex-shrink: 0;
}
#alv-shop-app .alv-shop-standard-promise-arrow {
  stroke: currentColor;
  flex-shrink: 0;
  transition: transform .2s ease;
}

#alv-shop-app .alv-shop-standard-proof {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(0, 182, 122, .12);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(0, 182, 122, .075), transparent 44%),
    rgba(0, 0, 0, .18);
}

#alv-shop-app .alv-shop-standard-trustpilot {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid rgba(0, 182, 122, .16);
  border-radius: 12px;
  background: rgba(0, 182, 122, .065);
  color: rgba(219, 255, 241, .92);
  text-decoration: none !important;
}

#alv-shop-app .alv-shop-standard-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(0, 182, 122, .12);
  color: #00b67a;
}

#alv-shop-app .alv-shop-standard-star svg {
  width: 18px;
  height: 18px;
}

#alv-shop-app .alv-shop-standard-trustpilot small,
#alv-shop-app .alv-shop-standard-trustpilot b {
  display: block;
}

#alv-shop-app .alv-shop-standard-trustpilot small {
  color: #00d68a;
  font-size: .66rem;
  font-weight: 920;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

#alv-shop-app .alv-shop-standard-trustpilot b {
  margin-top: 4px;
  color: rgba(255, 248, 234, .88);
  font-size: .82rem;
  font-weight: 860;
  line-height: 1.2;
}

#alv-shop-app .alv-shop-standard-reviews {
  display: grid;
  gap: 8px;
}

#alv-shop-app .alv-shop-standard-reviews article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 11px;
  background: rgba(255, 255, 255, .028);
}

#alv-shop-app .alv-shop-standard-reviews span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  border: 1px solid rgba(0, 182, 122, .20);
  border-radius: 8px;
  background: rgba(0, 182, 122, .075);
  color: #00d68a;
  font-size: .64rem;
  font-weight: 920;
  line-height: 1;
}

#alv-shop-app .alv-shop-standard-reviews p {
  margin: 0;
  overflow: hidden;
  color: rgba(255, 248, 234, .70);
  font-size: .75rem;
  font-weight: 620;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#alv-shop-app .alv-shop-standard-reviews footer {
  margin: 0;
  padding: 0;
  border: 0;
  color: rgba(255, 248, 234, .42);
  font-size: .66rem;
  font-weight: 820;
  text-align: right;
}

@media (max-width: 900px) {
  #alv-shop-app .alv-shop-standard {
    grid-template-columns: 1fr;
  }

  #alv-shop-app .alv-shop-standard-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  #alv-shop-app .alv-shop-standard-container {
    padding-bottom: 36px;
  }

  #alv-shop-app .alv-shop-standard {
    padding: 13px;
    border-radius: 15px;
  }

  #alv-shop-app .alv-shop-standard-flow {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  #alv-shop-app .alv-shop-standard-flow span {
    min-height: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    padding: 10px;
  }

  #alv-shop-app .alv-shop-standard-reviews article {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  #alv-shop-app .alv-shop-standard-reviews footer {
    display: none;
  }
}

/* Pay hint cards + mobile wallet */
.alv-pay-hint-mobile { color: rgba(255,255,255,.35); }

/* Trustpilot strip */
.alv-shop-trustpilot-strip {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px 18px;
  background: rgba(0,179,122,.06);
  border: 1px solid rgba(0,179,122,.18);
  border-radius: 30px;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.alv-shop-trustpilot-strip:hover {
  background: rgba(0,179,122,.1);
  border-color: rgba(0,179,122,.3);
}
.alv-shop-tp-stars {
  font-size: .85rem;
  color: #00B37A;
  letter-spacing: .04em;
  line-height: 1;
}
.alv-shop-tp-label {
  font-size: .72rem;
  font-weight: 700;
  color: #00B37A;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .alv-hero-eyebrow { flex-wrap: wrap; justify-content: center; }
  .alv-hero-cards { gap: 6px; }
  .alv-hero-card { padding: 8px 12px 8px 10px; gap: 8px; }
  .alv-hero-card-icon { width: 30px; height: 30px; border-radius: 8px; }
  .alv-hero-card-icon svg { width: 14px; height: 14px; }
  .alv-hero-card-title { font-size: .78rem; }
  .alv-hero-card-sub { font-size: .72rem; }
}
@media (max-width: 480px) {
  .alv-shop-stats { gap: 0; padding: 7px 10px; }
  .alv-shop-stat { padding: 0 8px; }
  .alv-shop-stat-divider { display: none; }
  .alv-shop-hero-title { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  .alv-shop-stat-num { font-size: .88rem; }
  .alv-shop-stat-label { font-size: .68rem; }
}

/* Scarcity Badge */
.alv-card-scarcity {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .63rem;
  font-weight: 800;
  color: #fff;
  background: #991b1b;
  border: 1px solid #7f1d1d;
  border-radius: 5px;
  padding: 2px 7px;
  margin-bottom: 5px;
  letter-spacing: .03em;
  animation: _sPulse 2s ease-in-out infinite;
}
@keyframes _sPulse { 0%,100%{opacity:1} 50%{opacity:.7} }

/* Price Anchor (strikethrough original price) */
.alv-card-price-anchor { display: flex; align-items: baseline; gap: 6px; }
.alv-card-price-orig {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(243,241,250,.3);
  text-decoration: line-through;
  text-decoration-color: rgba(239,68,68,.5);
}