/* =========================================================
   LOJA.CSS
   INFRONEX STORE PREMIUM
========================================================= */

/* =========================================================
   HERO
========================================================= */

.store-hero{

  position:relative;

  padding-top:190px;

  padding-bottom:120px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #020409 0%,
      #061827 45%,
      #020409 100%
    );
}

.store-hero::before{

  content:"";

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(0,255,156,.18),
      transparent 30%
    ),

    radial-gradient(
      circle at 80% 30%,
      rgba(10,132,255,.22),
      transparent 35%
    );

  pointer-events:none;
}

.store-hero .container{

  position:relative;

  z-index:2;
}

.store-hero h1{

  max-width:900px;

  font-size:
    clamp(48px,6vw,86px);

  line-height:.95;

  letter-spacing:-4px;

  margin:20px 0 25px;
}

.store-hero p{

  max-width:720px;

  font-size:18px;

  color:#d8d8d8;
}

/* =========================================================
   SECTION
========================================================= */

.store-section{

  padding:110px 0;

  background:
    linear-gradient(
      135deg,
      #020409 0%,
      #071424 50%,
      #020409 100%
    );
}

/* =========================================================
   TOOLBAR
========================================================= */

.store-toolbar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-bottom:45px;
}

.store-toolbar h2{

  font-size:
    clamp(34px,4vw,56px);

  line-height:1;
}

.store-toolbar p{

  margin-top:10px;

  color:#d8d8d8;
}

.store-toolbar select{

  width:280px;

  min-width:280px;
}

/* =========================================================
   GRID
========================================================= */

.products-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:24px;
}

/* =========================================================
   CARD
========================================================= */

.product-card{

  position:relative;

  padding:35px;

  border-radius:30px;

  overflow:hidden;

  background:
    rgba(8,14,24,.74);

  border:
    1px solid rgba(0,255,156,.16);

  transition:.4s ease;

  backdrop-filter:blur(16px);
}

.product-card::before{

  content:"";

  position:absolute;

  width:220px;
  height:220px;

  right:-100px;
  top:-100px;

  background:
    radial-gradient(
      circle,
      rgba(10,132,255,.22),
      transparent 70%
    );
}

.product-card:hover{

  transform:
    translateY(-10px)
    scale(1.01);

  border-color:
    rgba(0,255,156,.42);

  box-shadow:
    0 0 40px rgba(0,255,156,.10);
}

/* =========================================================
   IMAGE
========================================================= */

.product-image{

  width:90px;
  height:90px;

  border-radius:24px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:26px;

  background:
    linear-gradient(
      135deg,
      rgba(0,255,156,.14),
      rgba(10,132,255,.14)
    );

  border:
    1px solid rgba(0,255,156,.20);
}

.product-image i{

  font-size:38px;

  color:#00FF9C;
}

/* =========================================================
   TEXT
========================================================= */

.product-card small{

  display:inline-block;

  margin-bottom:12px;

  color:#00FF9C;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:1px;
}

.product-card h3{

  font-size:28px;

  line-height:1.1;

  margin-bottom:18px;
}

.product-card p{

  color:#d8d8d8;

  margin-bottom:25px;

  line-height:1.8;
}

.product-price{

  font-size:22px;

  font-weight:900;

  color:#ffffff;

  margin-bottom:28px;
}

/* =========================================================
   ACTIONS
========================================================= */

.product-card-actions{

  display:flex;

  flex-direction:column;

  gap:14px;
}

.product-card-actions .btn-primary,
.product-card-actions .btn-secondary{

  width:100%;
}

/* =========================================================
   CART
========================================================= */

.cart-box{

  margin-top:55px;

  padding:40px;

  border-radius:30px;

  background:
    rgba(8,14,24,.74);

  border:
    1px solid rgba(0,255,156,.18);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:25px;

  backdrop-filter:blur(18px);
}

.cart-box h3{

  font-size:32px;

  margin-bottom:12px;
}

.cart-box p{

  color:#d8d8d8;
}

/* =========================================================
   PRODUTO PAGE
========================================================= */

.product-page{

  padding-top:180px;

  padding-bottom:110px;

  background:
    linear-gradient(
      135deg,
      #020409 0%,
      #071424 50%,
      #020409 100%
    );
}

.product-wrapper{

  display:grid;

  grid-template-columns:
    420px 1fr;

  gap:50px;

  align-items:center;
}

/* =========================================================
   VISUAL
========================================================= */

.product-visual{

  height:420px;

  border-radius:36px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
    linear-gradient(
      135deg,
      rgba(0,255,156,.12),
      rgba(10,132,255,.12)
    );

  border:
    1px solid rgba(0,255,156,.18);

  box-shadow:
    0 24px 80px rgba(0,0,0,.42);
}

.product-visual i{

  font-size:120px;

  color:#00FF9C;
}

/* =========================================================
   INFO
========================================================= */

.product-info small{

  color:#00FF9C;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:1px;
}

.product-info h1{

  font-size:
    clamp(42px,5vw,72px);

  line-height:.95;

  letter-spacing:-3px;

  margin:18px 0 22px;
}

.product-info p{

  color:#d8d8d8;

  line-height:1.8;

  margin-bottom:25px;
}

.product-actions{

  display:flex;

  gap:16px;

  flex-wrap:wrap;

  margin-top:35px;
}

.product-list{

  margin-top:35px;

  display:grid;

  gap:14px;
}

.product-list li{

  display:flex;

  align-items:center;

  gap:10px;

  color:#d8d8d8;
}

.product-list i{

  color:#00FF9C;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width:1100px){

  .products-grid{

    grid-template-columns:
      repeat(2,1fr);
  }

  .product-wrapper{

    grid-template-columns:1fr;
  }

}

@media(max-width:768px){

  .store-toolbar,
  .cart-box{

    flex-direction:column;

    align-items:flex-start;
  }

  .store-toolbar select{

    width:100%;

    min-width:100%;
  }

  .products-grid{

    grid-template-columns:1fr;
  }

  .product-visual{

    height:300px;
  }

  .product-visual i{

    font-size:90px;
  }

  .product-actions{

    flex-direction:column;
  }

  .product-actions .btn-primary,
  .product-actions .btn-secondary{

    width:100%;
  }

}