/* =========================================================
   AXIS SHOP V2
   Premium framed card redesign
   Background/layout logic preserved
   ========================================================= */

.shop-page{
  margin:0;
  padding:0;
  background:#02070d;
}

.shop-stage{
  box-sizing:border-box;
  width:100%;
  min-height:1000px;
  padding:0 20px 54px;

  background-image:
    linear-gradient(
      180deg,
      rgba(1,7,13,.05) 0%,
      rgba(1,7,13,.08) 52%,
      rgba(2,7,13,.42) 82%,
      #02070d 100%
    ),
    url("../img/axis-shop-bg.png");
  background-repeat:no-repeat,no-repeat;
  background-position:center top,center top;
  background-size:100% auto,100% auto;
}

.shop-heading,
.shop-products,
.shop-grid{
  background:transparent !important;
}

.shop-heading{
  box-sizing:border-box;
  height:340px;
  padding-top:170px;
  text-align:center;
  text-shadow:0 4px 18px #000,0 0 24px rgba(0,0,0,.82);
}

.shop-heading .eyebrow{
  margin:0 0 8px;
  color:#7bdfff;
  font-size:13px;
  font-weight:900;
  letter-spacing:4px;
}

.shop-heading h1{
  margin:0;
  color:#fff;
  font-size:clamp(42px,4vw,64px);
  line-height:.95;
  font-weight:900;
  letter-spacing:3px;
}

.shop-heading .shop-subtitle{
  margin:16px 0 0;
  color:#d9ecf7;
  font-size:18px;
  font-weight:700;
  letter-spacing:.8px;
}

.shop-products{
  width:min(1260px,100%);
  margin:0 auto;
  padding:0;
}

.shop-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  align-items:stretch;
}

/* =========================================================
   PREMIUM SCI-FI CARD SHELL
   ========================================================= */

.product-card{
  --accent:#22aaff;
  --accent-bright:#65cfff;
  --accent-dark:#0568bb;

  position:relative;
  box-sizing:border-box;
  min-height:610px;
  padding:24px 28px 28px;
  display:flex;
  flex-direction:column;
  text-align:center;
  overflow:hidden;

  color:#eef8ff;

  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 35%),
    linear-gradient(180deg,#13283b 0%,#0c1a28 48%,#07121e 100%);

  border:2px solid color-mix(in srgb,var(--accent) 82%,#d7ecf7);

  clip-path:polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px),
    0 16px
  );

  box-shadow:
    0 22px 40px rgba(0,0,0,.42),
    0 0 18px color-mix(in srgb,var(--accent) 28%,transparent),
    inset 0 0 34px rgba(0,0,0,.30),
    inset 0 0 18px color-mix(in srgb,var(--accent) 9%,transparent);
}

/* Inner armored frame */
.product-card::before{
  content:"";
  position:absolute;
  inset:7px;
  pointer-events:none;
  z-index:0;

  border:1px solid color-mix(in srgb,var(--accent) 58%,#8298aa);

  clip-path:polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );

  box-shadow:
    inset 0 0 18px rgba(0,0,0,.35),
    0 0 10px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* Very subtle vertical armor texture */
.product-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.22;
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(255,255,255,.03) 8.5%,transparent 9%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 35%);
}

.product-card > *{
  position:relative;
  z-index:2;
}

/* Decorative corner armor */
.card-corner{
  position:absolute;
  width:34px;
  height:34px;
  z-index:3;
  pointer-events:none;
}

.card-corner::before,
.card-corner::after{
  content:"";
  position:absolute;
  background:linear-gradient(90deg,#d8e8f1,var(--accent),#d8e8f1);
  box-shadow:0 0 8px color-mix(in srgb,var(--accent) 45%,transparent);
}

.corner-tl{top:0;left:0}
.corner-tr{top:0;right:0;transform:scaleX(-1)}
.corner-bl{bottom:0;left:0;transform:scaleY(-1)}
.corner-br{bottom:0;right:0;transform:scale(-1)}

.card-corner::before{
  width:26px;
  height:3px;
  top:5px;
  left:6px;
}

.card-corner::after{
  width:3px;
  height:26px;
  top:6px;
  left:5px;
}

/* =========================================================
   EMBLEM
   ========================================================= */

.product-art{
  position:relative;
  height:205px;
  margin:0 auto 2px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-art::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:170px;
  height:24px;
  transform:translateX(-50%);
  border-radius:50%;
  background:color-mix(in srgb,var(--accent) 24%,rgba(0,0,0,.48));
  filter:blur(11px);
  z-index:0;
}

.product-art img{
  position:relative;
  z-index:2;
  display:block;
  max-width:235px;
  max-height:200px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 8px 6px rgba(0,0,0,.28))
    drop-shadow(0 17px 16px rgba(0,0,0,.24))
    drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 16%,transparent));
}

/* =========================================================
   TITLE / PRICE / DURATION MODULES
   ========================================================= */

.product-card h2{
  margin:0 0 12px;
  color:#f7fbff;
  font-size:30px;
  line-height:1;
  font-weight:950;
  letter-spacing:.7px;
  text-shadow:
    0 2px 2px rgba(0,0,0,.75),
    0 0 10px color-mix(in srgb,var(--accent) 20%,transparent);
}

.price-box{
  align-self:center;
  min-width:170px;
  padding:8px 22px;
  margin:0 auto 7px;

  color:#fff;
  font-size:24px;
  font-weight:950;
  line-height:1;
  letter-spacing:.3px;

  border:1px solid var(--accent-bright);

  clip-path:none;
  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--accent) 84%,#ffffff),
      color-mix(in srgb,var(--accent-dark) 92%,#07111d)
    );

  box-shadow:
    0 0 12px color-mix(in srgb,var(--accent) 34%,transparent),
    inset 0 0 10px rgba(255,255,255,.16);
}

.duration-bar{
  align-self:center;
  min-width:220px;
  padding:6px 18px;
  margin-bottom:18px;

  color:#eaf5fb;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.3px;

  border:1px solid color-mix(in srgb,var(--accent) 45%,#6f8494);

  clip-path:polygon(
    9px 0,
    calc(100% - 9px) 0,
    100% 50%,
    calc(100% - 9px) 100%,
    9px 100%,
    0 50%
  );

  background:
    linear-gradient(180deg,#102334,#091522);

  box-shadow:
    inset 0 0 12px rgba(0,0,0,.45),
    0 0 8px color-mix(in srgb,var(--accent) 12%,transparent);
}

/* =========================================================
   FEATURES
   ========================================================= */

.feature-list{
  list-style:none;
  width:100%;
  margin:0 0 24px;
  padding:0;
  text-align:left;
  color:#e2edf3;
  font-size:14px;
  line-height:1.35;
}

.feature-list li{
  position:relative;
  padding:8px 0 8px 34px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.05));
}

.feature-list li::before{
  content:"✓";
  position:absolute;
  left:2px;
  top:5px;

  color:var(--accent-bright);
  font-size:22px;
  font-weight:950;

  text-shadow:
    0 0 5px var(--accent),
    0 0 10px color-mix(in srgb,var(--accent) 80%,transparent);
}

/* =========================================================
   BUY BUTTON
   ========================================================= */

.buy-button{
  display:block;
  margin-top:auto;
  padding:15px 20px;

  color:#fff;
  text-decoration:none;
  text-align:center;
  font-size:16px;
  font-weight:950;
  letter-spacing:.8px;

  border:1px solid var(--accent-bright);

  clip-path:polygon(
    12px 0,
    calc(100% - 12px) 0,
    100% 50%,
    calc(100% - 12px) 100%,
    12px 100%,
    0 50%
  );

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--accent) 88%,#ffffff),
      color-mix(in srgb,var(--accent-dark) 94%,#07111d)
    );

  box-shadow:
    0 6px 14px rgba(0,0,0,.28),
    0 0 14px color-mix(in srgb,var(--accent) 38%,transparent),
    inset 0 0 12px rgba(255,255,255,.14);
}

.buy-button:hover{
  filter:brightness(1.12);
  transform:translateY(-1px);
  box-shadow:
    0 8px 18px rgba(0,0,0,.35),
    0 0 20px color-mix(in srgb,var(--accent) 55%,transparent);
}

.cart-icon{
  display:inline-flex;
  width:28px;
  height:28px;
  margin-left:12px;
  vertical-align:middle;
  align-items:center;
  justify-content:center;
}

.cart-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.55));
}

/* Product color themes */
.titanium{
  --accent:#08a8ff;
  --accent-bright:#6ed7ff;
  --accent-dark:#0062d5;
}

.platinum{
  --accent:#a63dff;
  --accent-bright:#d49cff;
  --accent-dark:#6720c7;
}

.coins{
  --accent:#f0a400;
  --accent-bright:#ffd86a;
  --accent-dark:#a96700;
}

/* =========================================================
   NOTE / PAYNOW LEGAL
   ========================================================= */

.shop-note{
  box-sizing:border-box;
  margin-top:24px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(44,191,255,.35);
  background:rgba(3,14,23,.88);
  color:#a9c4d4;
  font-size:13px;
  line-height:1.5;
}

.shop-note-vip{
  padding:16px 20px;
}

.shop-note-vip strong{
  font-size:16px;
  font-weight:900;
  font-family:Arial, Helvetica, sans-serif;
  letter-spacing:.4px;
  color:#54d2ff;
  text-shadow:
    0 0 4px rgba(84,210,255,.85),
    0 0 10px rgba(0,174,255,.45);
}

.shop-note-paynow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:16px 20px 17px;
  border-top:1px solid rgba(44,191,255,.28);
  background:
    linear-gradient(180deg,rgba(8,29,44,.62),rgba(3,17,28,.72));
  text-align:left;
}

.paynow-shield{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.paynow-shield svg{
  width:30px;
  height:30px;
  fill:none;
  stroke:#42caff;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(66,202,255,.34));
}

.paynow-copy{
  min-width:0;
}

.paynow-mor{
  color:#d8e8f1;
  font-size:14px;
  line-height:1.45;
}

.paynow-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 12px;
  margin-top:5px;
  font-size:14px;
  line-height:1.4;
}

.paynow-links a{
  color:#54d2ff;
  text-decoration:underline;
  text-underline-offset:2px;
}

.paynow-links a:hover{
  color:#9ae8ff;
}

.paynow-links span{
  color:#55788c;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){
  .shop-stage{
    min-height:1000px;
    background-size:100% auto,100% auto;
  }

  .shop-heading{
    height:300px;
    padding-top:145px;
  }

  .shop-grid{
    grid-template-columns:1fr;
    max-width:680px;
    margin:0 auto;
  }

  .product-card{
    min-height:auto;
  }
}

@media(max-width:700px){
  .shop-note-paynow{
    align-items:flex-start;
    justify-content:flex-start;
    padding:15px 16px 16px;
  }

.paynow-shield{
  flex:0 0 auto;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.paynow-shield svg{
  width:58px;       /* ← actual icon width */
  height:58px;      /* ← actual icon height */
  fill:none;
  stroke:#42caff;
}

  .paynow-links{
    gap:5px 8px;
  }


  .shop-stage{
    padding-left:10px;
    padding-right:10px;
  }

  .shop-heading{
    height:270px;
    padding-top:125px;
  }

  .shop-heading .shop-subtitle{
    font-size:14px;
  }

  .product-card{
    padding:20px 20px 24px;
  }

  .product-art{
    height:175px;
  }

  .product-art img{
    max-width:195px;
    max-height:170px;
  }

  .price-box{
    min-width:150px;
  }

  .duration-bar{
    min-width:190px;
  }
}