/* RYSU.STORE v12 — shop visual merge. Functionality stays in shop.js/pricing.js. */
body.shop-page.lab-page {
  --panel: rgba(255,255,255,.045);
  --panel2: rgba(255,255,255,.075);
  --line: rgba(255,255,255,.115);
  --ink: #080808;
  --ink2: #0d0d0d;
  padding-top: 86px;
}
body.shop-page.lab-page::before {
  background:
    radial-gradient(72vw 72vw at -10% 16%, color-mix(in srgb, var(--page-accent) 10%, transparent), transparent 55%),
    radial-gradient(72vw 72vw at 110% 48%, rgba(59,130,246,.055), transparent 57%),
    radial-gradient(58vw 48vw at 52% 96%, rgba(255,255,255,.03), transparent 62%),
    linear-gradient(132deg,#0c0b08 0%,#090909 50%,#090b0f 100%);
}
.shop-header {
  max-width: 1040px;
  padding: 92px 24px 10px;
}
.shop-header .hero-eyebrow {
  color: var(--page-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.shop-header h1 {
  margin: 16px 0 18px;
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size: clamp(54px,7.5vw,112px);
  font-weight: 950;
  line-height: .82;
  letter-spacing: -.06em;
}
.shop-header p { max-width: 670px; color: rgba(255,255,255,.5); font-size: 14px; white-space: normal; }
.currency-row { margin-top: 27px; }
.currency-toggle { border-color: rgba(255,255,255,.12); padding:5px; background:rgba(0,0,0,.30); backdrop-filter:blur(12px); }
.currency-toggle button { min-width:78px; padding:9px 16px; color:rgba(255,255,255,.53); }
.service-tabs {
  max-width: 920px;
  margin-top: 52px;
  gap: 7px;
  padding: 6px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(5,5,5,.48);
  backdrop-filter:blur(18px);
}
.service-tab {
  flex:1;
  min-width:0;
  border:0;
  border-radius:999px;
  padding:14px 17px;
  background:transparent;
  color:rgba(255,255,255,.43);
  font-size:11px;
  font-weight:900;
  letter-spacing:.07em;
  text-align:center;
  text-transform:uppercase;
}
.service-tab.active { color:var(--page-accent-ink); background:var(--page-accent); box-shadow:0 12px 36px color-mix(in srgb,var(--page-accent) 18%,transparent); }
.platform-row,.shop-step { max-width:900px; }
.platform-row { margin-top:34px; }
.platform-row .label,.step-label { color:rgba(255,255,255,.38); font-size:9px; font-weight:900; letter-spacing:.18em; }
.platform-pill,.day-pill,.express-pill,.streaming-pill {
  min-height:45px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.11);
  font-size:12px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.platform-pill:hover,.day-pill:hover,.express-pill:hover,.streaming-pill:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.28); }
.tier-grid { max-width:1180px; gap:18px; margin-top:42px; }
@media(min-width:900px){ .tier-grid { grid-template-columns:repeat(3,1fr); } .tier-grid:not(.expanded) .tier-card:nth-child(n+4){display:none;} }
.tier-card,.match-card,.coaching-item,.order-summary {
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.10);
  box-shadow:0 24px 70px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
}
.tier-card { transition:transform .28s cubic-bezier(.16,1,.3,1),border-color .28s ease,box-shadow .28s ease; }
.tier-card:hover { transform:translateY(-8px); box-shadow:0 34px 86px rgba(0,0,0,.34); }
.tier-card.selected { border-color:color-mix(in srgb,var(--page-accent) 75%,white 0%); background:linear-gradient(180deg,var(--page-accent-soft),rgba(255,255,255,.025)); }
.tier-header { height:190px; object-position:center; }
.tier-card-body,.coaching-item-body { padding:24px; }
.tier-rank,.tier-price,.order-total .amt,.match-stepper .count,.coaching-item .price,.coaching-stepper .count {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:950;
  letter-spacing:-.04em;
}
.tier-rank { font-size:34px; }
.tier-name { font-size:17px; font-weight:950; text-transform:uppercase; letter-spacing:-.02em; }
.tier-rewards { min-height:62px; color:rgba(255,255,255,.45); }
.tier-price-current { font-size:25px; }
.tier-card .badge { top:14px; right:14px; border-radius:999px; padding:7px 12px; font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
.show-ranks-toggle { max-width:1180px; }
.show-ranks-toggle button,.more-payment-toggle { border-radius:999px; border-style:solid; background:rgba(255,255,255,.025); }
.shop-step { margin-top:38px; }
.freq-toggle { padding:5px; background:rgba(255,255,255,.025); }
.freq-toggle button { min-height:40px; }
.match-card { max-width:620px; margin-top:46px; border-color:color-mix(in srgb,var(--page-accent) 65%,transparent); }
.match-card .tier-header { height:250px; }
.coaching-items { max-width:1180px; gap:18px; margin-top:42px; }
.coaching-item { border-color:rgba(255,255,255,.11); }
.coaching-item .tier-header { height:190px; }
.coaching-item h2 { font-size:19px; font-weight:950; text-transform:uppercase; }
.coaching-item p { color:rgba(255,255,255,.45); }
.order-wrap { max-width:760px; margin:72px auto 0; padding:0 24px; }
.order-summary { padding:30px; border-color:color-mix(in srgb,var(--page-accent) 40%,rgba(255,255,255,.10)); }
.order-summary h2 { margin:0 0 20px; font-size:28px; line-height:1; font-weight:950; text-transform:uppercase; letter-spacing:-.04em; }
.order-row { padding:11px 0; border-color:rgba(255,255,255,.08); }
.order-total { padding-top:8px; }
.order-total .amt { font-size:38px; }
.discount-code-row input,.discount-code-row button,.stripe-btn,.dm-row a,.more-payment-list a { border-radius:14px; }
.copy-btn,.paypal-btn,.stripe-btn { min-height:54px; border-radius:999px; }
.copy-btn { background:#fff; color:#090909; font-weight:950; letter-spacing:.05em; }
.stripe-btn { background:rgba(255,255,255,.035); }
.dm-row a { min-height:46px; }
.shop-page .lab-footer { margin-top:120px; }
@media(max-width:899px){
  body.shop-page.lab-page { padding-top:70px; }
  .shop-header { padding-top:72px; }
  .shop-header h1 { font-size:clamp(48px,15vw,76px); }
  .service-tabs { margin:32px 20px 0; padding:5px; border-radius:22px; display:grid; grid-template-columns:1fr 1fr; }
  .service-tab { width:100%; padding:12px 8px; font-size:9px; }
  .tier-header { height:158px; }
  .order-wrap { margin-top:50px; }
}
@media(max-width:580px){
  .shop-header { padding-inline:18px; }
  .shop-header p { font-size:13px; }
  .tier-grid,.coaching-items { padding-inline:18px; }
  .platform-row,.shop-step { padding-inline:18px; }
  .order-wrap { padding-inline:18px; }
  .order-summary { padding:22px 18px; }
  .dm-row { flex-direction:column; }
}


/* v13 shop */
body.shop-page.lab-page::before{
  background:
    linear-gradient(180deg,rgba(5,5,5,.66),rgba(5,5,5,.82)),
    url('/assets/imagenes/FondoGameplayStaticNegro.png') center/cover fixed no-repeat !important;
}
.shop-title-gold{color:#ffd21f}
.platform-row .label,.step-label{
  color:#ffd21f !important;
  font-size:13px !important;
  letter-spacing:.12em !important;
  line-height:1.25;
}
.shop-step .step-label{margin-bottom:12px}
.match-card .step-label{font-size:14px !important}
.match-discount-note{font-size:12px;line-height:1.55}
@media(max-width:580px){
  .match-card{
    width:calc(100% - 36px);
    max-width:none;
    margin:32px auto 0;
    border-radius:24px;
  }
  .match-card .tier-header{height:170px}
  .match-card .tier-card-body{padding:20px 18px}
  .match-stepper{margin-top:18px}
  .platform-row .label,.step-label{font-size:12px !important}
}


/* v14 shop refinements */
.shop-header p{display:none !important}
.shop-header h1,.shop-header .shop-title-gold{color:#fff !important}
.discount-tiers{max-width:none !important;width:100% !important;grid-template-columns:repeat(3,1fr) !important;gap:10px !important;margin-top:18px !important}
.discount-tiers div{min-height:62px;display:flex;flex-direction:column;justify-content:center;gap:6px;border-radius:18px;padding:10px 12px;text-align:center}
.discount-tiers div span,.discount-tiers div strong{display:block}
@media (min-width:900px){
  .tier-grid:not(.expanded) .tier-card[data-rank="3"],
  .tier-grid:not(.expanded) .tier-card[data-rank="4"],
  .tier-grid:not(.expanded) .tier-card[data-rank="5"]{display:none !important}
  .tier-grid:not(.expanded) .custom-request{display:flex !important}
}


/* v15 store density + checkout hierarchy */
body.shop-page.lab-page::before{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(8,8,8,.55),rgba(8,8,8,.90) 70%),
    linear-gradient(180deg,rgba(8,8,8,.60),rgba(8,8,8,.94)),
    url('/assets/imagenes/RYSU-BACKGROUND-v2.jpg') center/cover fixed no-repeat !important;
}
@media(min-width:900px){
  .shop-header{padding-top:18px !important;padding-bottom:2px !important}
  .shop-header h1{margin-top:10px !important;margin-bottom:12px !important}
  .currency-row{margin-top:15px !important}
  .service-tabs{margin-top:26px !important}
  .platform-row{margin-top:22px !important}
  .tier-grid{margin-top:28px !important}
  .tier-grid:not(.expanded) .custom-request{display:block !important}
  .tier-grid:not(.expanded) .custom-request .tier-rewards{display:block !important;visibility:visible !important;opacity:1 !important}
}
.order-actions{gap:10px !important}
.stripe-btn{display:flex !important;align-items:center !important;justify-content:center !important;background:#fff !important;border-color:#fff !important}
.stripe-btn-cards{justify-content:center !important;gap:12px !important}
.stripe-btn-cards img{height:22px !important;max-width:56px !important}
.copy-btn{background:rgba(255,255,255,.035) !important;color:#fff !important;border:1px solid rgba(255,255,255,.14) !important}


/* =====================================================================
   v16 Store final corrections
   ===================================================================== */
body.shop-page.lab-page{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(8,8,8,.55),rgba(8,8,8,.90) 70%),
    linear-gradient(180deg,rgba(8,8,8,.60),rgba(8,8,8,.94)),
    url('/assets/imagenes/RYSU-BACKGROUND-v2.jpg') center center / cover fixed no-repeat !important;
}
body.shop-page.lab-page::before{
  content:"" !important;
  position:fixed !important;
  inset:-30px !important;
  z-index:-1 !important;
  background:url('/assets/imagenes/RYSU-BACKGROUND-v2.jpg') center center / cover no-repeat !important;
  filter:blur(5px) !important;
  transform:scale(1.05) !important;
  opacity:.38 !important;
  pointer-events:none !important;
}
.custom-request .tier-rewards,
.tier-grid:not(.expanded) .custom-request .tier-rewards{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  min-height:62px !important;
}
@media(min-width:900px){
  .shop-header{padding-top:8px !important}
  .shop-header h1{margin-top:8px !important}
}


/* =====================================================================
   v17 store background blur polish
   ===================================================================== */
body.shop-page.lab-page{
  background:
    linear-gradient(180deg,rgba(8,8,8,.52),rgba(8,8,8,.84)),
    radial-gradient(60vw 50vw at 12% 20%,rgba(255,210,31,.10),transparent 60%),
    radial-gradient(50vw 50vw at 86% 30%,rgba(59,130,246,.11),transparent 62%),
    url('/assets/imagenes/RYSU-BACKGROUND-v2.jpg') center center / cover fixed no-repeat !important;
}
body.shop-page.lab-page::before{
  content:"" !important;position:fixed !important;inset:-40px !important;z-index:-1 !important;
  background:url('/assets/imagenes/RYSU-BACKGROUND-v2.jpg') center center / cover no-repeat !important;
  filter:blur(14px) saturate(.95) !important;transform:scale(1.08) !important;opacity:.52 !important;pointer-events:none !important;
}


/* =====================================================================
   v18 — darker blurred Store backdrop
   ===================================================================== */
body.shop-page.lab-page{background:#060606 !important}
body.shop-page.lab-page::before{
  inset:-46px !important;
  background:
    linear-gradient(180deg,rgba(3,3,3,.72),rgba(3,3,3,.90)),
    url('/assets/imagenes/RYSU-BACKGROUND-v2.jpg') center center / cover no-repeat !important;
  filter:blur(22px) saturate(.78) !important;
  transform:scale(1.10) !important;
  opacity:.82 !important;
}


/* =====================================================================
   v19 — visible Store backdrop, same treatment as Home
   ===================================================================== */
body.shop-page.lab-page{position:relative !important;isolation:isolate !important;background:#060606 !important;}
body.shop-page.lab-page::before{
  content:"" !important;position:fixed !important;inset:-38px !important;z-index:-2 !important;pointer-events:none !important;opacity:1 !important;
  background:
    radial-gradient(72vw 72vw at -10% 16%, rgba(255,210,31,.075), transparent 55%),
    radial-gradient(72vw 72vw at 110% 48%, rgba(59,130,246,.055), transparent 57%),
    linear-gradient(180deg,rgba(2,2,2,.76),rgba(2,2,2,.91)),
    url('/assets/imagenes/RYSU-BACKGROUND-v2.jpg') center center / cover no-repeat !important;
  filter:blur(17px) saturate(.68) brightness(.78) !important;transform:scale(1.07) !important;
}
body.shop-page.lab-page::after{background-image:none !important;opacity:.035 !important;}


/* =====================================================================
   v20 — reliable Shop backdrop + transparent footer
   ===================================================================== */
body.shop-page.lab-page{
  position:relative !important;
  isolation:auto !important;
  background:#070707 !important;
  min-height:100vh !important;
  overflow-x:hidden !important;
}

/* Kill legacy pseudo backdrops: the real layer below is deterministic. */
body.shop-page.lab-page::before,
body.shop-page.lab-page::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

.shop-fixed-backdrop{
  position:fixed;
  inset:-34px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(70vw 70vw at -8% 18%, rgba(255,210,31,.095), transparent 56%),
    radial-gradient(70vw 70vw at 108% 42%, rgba(59,130,246,.072), transparent 58%),
    linear-gradient(180deg,rgba(4,4,4,.52),rgba(4,4,4,.76)),
    url('/assets/imagenes/RYSU-BACKGROUND-v2.jpg') center center / cover no-repeat;
  filter:blur(14px) saturate(.72) brightness(.74);
  transform:scale(1.055);
  opacity:1;
  will-change:transform;
}

/* Main shop content sits above the fixed artwork without changing navbar positioning. */
.shop-header,
.service-tabs,
.platform-row,
[data-panel],
[data-panel-multi],
.shop-step,
.order-wrap,
.lab-footer{
  position:relative;
  z-index:1;
}

/* Footer: no opaque box, no clipping, backdrop remains visible through it. */
body.shop-page .lab-footer{
  background:transparent !important;
  background-color:transparent !important;
  overflow:visible !important;
  margin-top:82px !important;
  padding-top:38px !important;
  padding-bottom:30px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}
body.shop-page .lab-footer-main,
body.shop-page .lab-footer-payments,
body.shop-page .lab-footer-meta{
  background:transparent !important;
}
body.shop-page .lab-footer-payments{
  border-top-color:rgba(255,255,255,.07) !important;
  border-bottom-color:rgba(255,255,255,.07) !important;
}

@media(max-width:620px){
  body.shop-page .lab-footer{
    margin-top:54px !important;
    padding-top:26px !important;
    padding-bottom:18px !important;
  }
  .shop-fixed-backdrop{
    inset:-24px;
    filter:blur(12px) saturate(.70) brightness(.72);
    transform:scale(1.045);
  }
}


/* =====================================================================
   v21 — Shop: static gameplay backdrop, Rank 1/2/3 collapsed, dense mobile
   ===================================================================== */
body.shop-page.lab-page{
  background:#050505 url('/assets/imagenes/FondoGameplayStaticNegro.png') center top / cover fixed no-repeat !important;
}
.shop-fixed-backdrop{
  inset:0 !important;
  background:
    radial-gradient(68vw 68vw at -10% 18%,rgba(255,210,31,.095),transparent 56%),
    radial-gradient(68vw 68vw at 110% 44%,rgba(59,130,246,.075),transparent 58%) !important;
  filter:none !important;
  transform:none !important;
  opacity:1 !important;
}
body.shop-page .lab-footer,
body.shop-page .lab-footer-main,
body.shop-page .lab-footer-payments,
body.shop-page .lab-footer-meta{background:transparent !important}

@media(min-width:900px){
  .tier-grid:not(.expanded) .tier-card[data-rank="1"],
  .tier-grid:not(.expanded) .tier-card[data-rank="2"],
  .tier-grid:not(.expanded) .tier-card[data-rank="3"]{display:flex !important}
  .tier-grid:not(.expanded) .tier-card[data-rank="4"],
  .tier-grid:not(.expanded) .tier-card[data-rank="5"],
  .tier-grid:not(.expanded) .custom-request{display:none !important}
}

@media(max-width:620px){
  body.shop-page.lab-page{padding-top:70px !important}
  .shop-header{
    padding:18px 16px 0 !important;
    margin-bottom:0 !important;
  }
  .shop-header .hero-eyebrow{display:none !important}
  .shop-header h1{
    margin:0 0 10px !important;
    font-size:clamp(42px,13vw,62px) !important;
    line-height:.84 !important;
  }
  .currency-row{margin-top:8px !important}
  .service-tabs{margin-top:14px !important}
  .platform-row{margin-top:16px !important}
  .tier-grid{margin-top:18px !important}
}


/* v21.1 authoritative Shop backdrop */
body.shop-page.lab-page{
  background-color:#050505 !important;
  background-image:
    radial-gradient(68vw 68vw at -10% 18%,rgba(255,210,31,.095),transparent 56%),
    radial-gradient(68vw 68vw at 110% 44%,rgba(59,130,246,.075),transparent 58%),
    url('/assets/imagenes/FondoGameplayStaticNegro.png') !important;
  background-position:center top,center top,center top !important;
  background-size:auto,auto,cover !important;
  background-attachment:fixed,fixed,fixed !important;
  background-repeat:no-repeat !important;
}
.shop-fixed-backdrop{display:none !important}


/* =====================================================================
   v22 — subscription visibility + premium alternative payments
   ===================================================================== */
#freq-block{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  visibility:visible !important;
}
.more-payment-toggle{
  min-height:48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  font-size:9px !important;
  font-weight:950 !important;
  letter-spacing:.14em !important;
}
.more-payment-toggle span{font-size:16px;line-height:1}
.payment-method-cards.open{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
  margin-top:10px !important;
}
.payment-method-cards a{
  min-height:68px !important;
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:13px !important;
  padding:11px 14px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)) !important;
  color:#fff !important;
  text-decoration:none !important;
}
.payment-method-cards a:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(255,210,31,.32) !important;
  background:linear-gradient(180deg,rgba(255,210,31,.055),rgba(255,255,255,.022)) !important;
}
.pm-card-icon{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);
  font-size:20px;font-weight:950;
}
.pm-card-revolut{color:#fff;background:linear-gradient(145deg,#171717,#090909)}
.pm-card-bank{color:#ffd21f}
.pm-card-bank svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.pm-card-copy{display:block !important;min-width:0}
.pm-card-copy strong{display:block;font-size:12px;font-weight:950;letter-spacing:.01em}
.pm-card-copy small{display:block !important;margin-top:4px;color:rgba(255,255,255,.42) !important;font-size:9.5px !important;font-weight:500 !important}
.pm-card-arrow{font-size:17px;color:#ffd21f}


/* =====================================================================
   v23 — desktop initial rank descriptions are always visible
   ===================================================================== */
@media(min-width:900px){
  .tier-grid:not(.expanded) .tier-card[data-rank="1"],
  .tier-grid:not(.expanded) .tier-card[data-rank="2"],
  .tier-grid:not(.expanded) .tier-card[data-rank="3"]{
    display:flex !important;
    flex-direction:column !important;
  }
  .tier-grid:not(.expanded) .tier-card[data-rank="4"],
  .tier-grid:not(.expanded) .tier-card[data-rank="5"],
  .tier-grid:not(.expanded) .custom-request{
    display:none !important;
  }
  .tier-card[data-rank="1"] .tier-rewards,
  .tier-card[data-rank="2"] .tier-rewards,
  .tier-card[data-rank="3"] .tier-rewards{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
    min-height:62px !important;
    overflow:visible !important;
    color:rgba(255,255,255,.62) !important;
    font-size:13px !important;
    line-height:1.6 !important;
    margin-bottom:16px !important;
  }
  .tier-card[data-rank="1"] .tier-card-body,
  .tier-card[data-rank="2"] .tier-card-body,
  .tier-card[data-rank="3"] .tier-card-body{
    display:block !important;
    overflow:visible !important;
    height:auto !important;
  }
}


/* Checkout hardening */
.stripe-btn,
#copy-selections,
#more-payment-toggle{
  position:relative;
  z-index:1;
  pointer-events:auto !important;
  cursor:pointer !important;
}
.stripe-btn.is-loading{
  background:#fff !important;
  color:#080808 !important;
}
.stripe-loading-label{
  font-size:9px;
  font-weight:950;
  letter-spacing:.12em;
}
.more-payment-toggle.open{
  border-color:var(--page-accent) !important;
  color:#fff !important;
}


/* =====================================================================
   Rank artwork v2 — mobile emphasis
   Slight zoom only for Rank 1–5 and Custom Request.
   Desktop remains exactly at source framing.
   ===================================================================== */
@media(max-width:899px){
  .tier-card[data-rank]{
    overflow:hidden !important;
  }

  .tier-card[data-rank] .tier-header,
  .tier-card.custom-request .tier-header{
    transform:scale(1.10) !important;
    transform-origin:center 48% !important;
    transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
}

@media(max-width:580px){
  .tier-card[data-rank] .tier-header,
  .tier-card.custom-request .tier-header{
    transform:scale(1.13) !important;
    transform-origin:center 47% !important;
  }
}