/**

* Products Page
*
* @package A2Z_Woo_Solutions
  */

/* =========================================================
BASE
========================================================= */

.products-page {
position: relative;
overflow: hidden;
background: var(--bp-background);
color: var(--bp-text);
}

.products-page *,
.products-page *::before,
.products-page *::after {
box-sizing: border-box;
}

.products-page .container {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
}

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

.products-hero {
position: relative;
padding: 150px 0 120px;
overflow: hidden;
background:
linear-gradient(
135deg,
var(--bp-background) 0%,
var(--bp-blue-soft) 55%,
var(--bp-pink-soft) 100%
);
}

.products-hero__background {
position: absolute;
inset: 0;
pointer-events: none;
}

/* Grid */

.products-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(
rgba(33, 25, 201, 0.045) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(33, 25, 201, 0.045) 1px,
transparent 1px
);
background-size: 55px 55px;
mask-image:
linear-gradient(
to bottom,
black,
transparent
);
}

/* Floating Orbs */

.products-orb {
position: absolute;
border-radius: 50%;
filter: blur(30px);
opacity: 0.6;
animation: productsOrbFloat 8s ease-in-out infinite;
}

.products-orb--one {
top: -100px;
left: -100px;
width: 420px;
height: 420px;
background: var(--bp-blue-pale);
}

.products-orb--two {
right: -100px;
top: 80px;
width: 380px;
height: 380px;
background: var(--bp-pink-pale);
animation-delay: 3s;
}

@keyframes productsOrbFloat {

 
0%,
100% {
	transform: translate(0, 0);
}

50% {
	transform: translate(25px, -25px);
}
 

}

/* Hero Layout */

.products-hero__container {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr minmax(400px, 520px);
align-items: center;
gap: 80px;
}

/* Eyebrow */

.products-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
padding: 9px 15px;
border: 1px solid var(--bp-border-blue);
border-radius: 999px;
background: rgba(255, 255, 255, 0.75);
color: var(--bp-blue);
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
}

.products-eyebrow__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bp-pink);
box-shadow: 0 0 0 6px var(--bp-pink-pale);
}

/* Heading */

.products-hero h1 {
margin: 0;
font-size: clamp(52px, 6vw, 76px);
line-height: 1.03;
letter-spacing: -3px;
}

.products-hero h1 span {
display: block;
background:
linear-gradient(
90deg,
var(--bp-blue),
var(--bp-pink)
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.products-hero__content > p {
max-width: 620px;
margin: 28px 0;
color: var(--bp-text-muted);
font-size: 18px;
line-height: 1.8;
}

/* Stats */

.products-hero__stats {
display: flex;
gap: 35px;
margin-top: 40px;
}

.products-stat {
display: grid;
gap: 4px;
}

.products-stat strong {
color: var(--bp-blue);
font-size: 26px;
font-weight: 800;
}

.products-stat span {
color: var(--bp-text-muted);
font-size: 12px;
font-weight: 700;
}

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

.products-hero__visual {
position: relative;
}

.products-dashboard {
position: relative;
z-index: 2;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 26px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 40px 100px rgba(33, 25, 201, 0.16);
backdrop-filter: blur(20px);
overflow: hidden;
animation: productsDashboardFloat 6s ease-in-out infinite;
}

@keyframes productsDashboardFloat {

 
0%,
100% {
	transform: translateY(0);
}

50% {
	transform: translateY(-10px);
}
 

}

/* Dashboard Header */

.products-dashboard__header {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 24px;
border-bottom: 1px solid var(--bp-border);
color: var(--bp-text);
font-size: 13px;
font-weight: 800;
}

.products-dashboard__dots {
display: flex;
gap: 6px;
}

.products-dashboard__dots span {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--bp-border);
}

.products-dashboard__dots span:first-child {
background: var(--bp-pink);
}

.products-dashboard__dots span:nth-child(2) {
background: var(--bp-blue-light);
}

/* Dashboard Body */

.products-dashboard__body {
padding: 30px;
background: var(--bp-background-soft);
}

.products-dashboard__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
}

.products-dashboard__title span,
.products-dashboard__title strong {
display: block;
}

.products-dashboard__title span {
margin-bottom: 5px;
color: var(--bp-text-light);
font-size: 11px;
}

.products-dashboard__title strong {
font-size: 19px;
}

/* Status */

.products-dashboard__status {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border-radius: 999px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
font-size: 10px;
font-weight: 800;
}

.products-dashboard__status span {
width: 7px;
height: 7px;
margin: 0;
border-radius: 50%;
background: var(--bp-blue);
}

/* Mini Cards */

.products-dashboard__cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}

.products-mini-card {
display: flex;
align-items: center;
gap: 12px;
padding: 18px;
border: 1px solid var(--bp-border);
border-radius: 15px;
background: var(--bp-white);
}

.products-mini-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 11px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
font-size: 18px;
font-weight: 800;
}

.products-mini-card__icon--pink {
background: var(--bp-pink-pale);
color: var(--bp-pink);
}

.products-mini-card strong,
.products-mini-card span {
display: block;
}

.products-mini-card strong {
margin-bottom: 4px;
font-size: 11px;
}

.products-mini-card div span {
color: var(--bp-text-light);
font-size: 10px;
}

/* Chart */

.products-dashboard__chart {
margin-top: 18px;
padding: 22px;
border: 1px solid var(--bp-border);
border-radius: 16px;
background: var(--bp-white);
}

.products-chart__label {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
}

.products-chart__label span {
color: var(--bp-text-muted);
font-size: 11px;
}

.products-chart__label strong {
color: var(--bp-blue);
font-size: 11px;
}

.products-chart__bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 90px;
gap: 8px;
}

.products-chart__bars span {
flex: 1;
border-radius: 5px 5px 2px 2px;
background:
linear-gradient(
to top,
var(--bp-blue),
var(--bp-blue-light)
);
animation: productsBars 2s ease-in-out infinite alternate;
}

.products-chart__bars span:nth-child(1) {
height: 30%;
}

.products-chart__bars span:nth-child(2) {
height: 60%;
}

.products-chart__bars span:nth-child(3) {
height: 45%;
}

.products-chart__bars span:nth-child(4) {
height: 85%;
}

.products-chart__bars span:nth-child(5) {
height: 55%;
}

.products-chart__bars span:nth-child(6) {
height: 95%;
}

.products-chart__bars span:nth-child(7) {
height: 75%;
}

@keyframes productsBars {

 
from {
	transform: scaleY(0.85);
	transform-origin: bottom;
}

to {
	transform: scaleY(1);
	transform-origin: bottom;
}
 

}

/* Floating Badge */

.products-floating-badge {
position: absolute;
z-index: 3;
right: -45px;
bottom: 45px;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 17px;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 16px;
background: rgba(255, 255, 255, 0.95);
box-shadow: var(--bp-shadow);
backdrop-filter: blur(15px);
animation: productsBadgeFloat 5s ease-in-out infinite;
}

@keyframes productsBadgeFloat {

 
0%,
100% {
	transform: translateY(0);
}

50% {
	transform: translateY(-10px);
}
 

}

.products-floating-badge > span {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
font-weight: 900;
}

.products-floating-badge strong,
.products-floating-badge small {
display: block;
}

.products-floating-badge strong {
font-size: 11px;
}

.products-floating-badge small {
margin-top: 4px;
color: var(--bp-text-light);
font-size: 9px;
}

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

.products-list {
padding: 130px 0;
background: var(--bp-white);
}

.products-section-heading {
max-width: 720px;
margin-bottom: 70px;
}

.products-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
color: var(--bp-blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.5px;
}

.products-section-eyebrow::before {
width: 26px;
height: 2px;
background: var(--bp-pink);
content: "";
}

.products-section-heading h2 {
margin: 0 0 20px;
font-size: clamp(38px, 5vw, 60px);
line-height: 1.08;
letter-spacing: -2px;
}

.products-section-heading h2 span {
color: var(--bp-blue);
}

.products-section-heading p {
margin: 0;
color: var(--bp-text-muted);
font-size: 17px;
line-height: 1.8;
}

/* =========================================================
PRODUCT CARDS
========================================================= */

.products-grid-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
align-items: stretch;
}

.product-card {
position: relative;
display: flex;
flex-direction: column;
padding: 42px;
border: 1px solid var(--bp-border);
border-radius: 30px;
background: var(--bp-background);
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}

.product-card:hover {
transform: translateY(-8px);
border-color: var(--bp-border-blue);
box-shadow: var(--bp-shadow-hover);
}

/* Premium Card */

.product-card--premium {
border-color: var(--bp-border-pink);
background:
linear-gradient(
180deg,
var(--bp-white),
var(--bp-pink-soft)
);
}

.product-card--premium:hover {
border-color: var(--bp-pink);
}

/* Advanced Badge */

.product-card__popular {
position: absolute;
top: 22px;
right: 22px;
padding: 7px 12px;
border-radius: 999px;
background: var(--bp-pink);
color: var(--bp-white);
font-size: 9px;
font-weight: 900;
letter-spacing: 1px;
}

/* Card Top */

.product-card__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
}

.product-card__badge {
padding: 7px 11px;
border-radius: 999px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
}

.product-card__badge--premium {
background: var(--bp-pink-pale);
color: var(--bp-pink);
}

.product-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
border-radius: 17px;
background: var(--bp-blue);
color: var(--bp-white);
font-size: 22px;
font-weight: 800;
}

.product-card__icon--premium {
background: var(--bp-pink);
}

/* Product Heading */

.product-card h2 {
margin: 0 0 16px;
font-size: clamp(26px, 3vw, 34px);
line-height: 1.2;
letter-spacing: -1px;
}

.product-card h2 span {
display: block;
color: var(--bp-blue);
}

.product-card--premium h2 span {
color: var(--bp-pink);
}

.product-card__description {
min-height: 78px;
margin: 0 0 35px;
color: var(--bp-text-muted);
font-size: 15px;
line-height: 1.75;
}

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

.product-card__features {
margin-bottom: 30px;
}

.product-card__features h3 {
margin: 0 0 20px;
font-size: 14px;
}

.product-card__features ul {
display: grid;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}

.product-card__features li {
display: flex;
align-items: center;
gap: 12px;
color: var(--bp-text-muted);
font-size: 14px;
}

.product-card__features li > span {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 7px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
font-size: 11px;
font-weight: 900;
}

.product-card--premium .product-card__features li > span {
background: var(--bp-pink-pale);
color: var(--bp-pink);
}

/* =========================================================
DROPDOWNS
========================================================= */

.product-card__dropdowns {
display: grid;
gap: 10px;
margin-top: auto;
}

.product-dropdown {
border: 1px solid var(--bp-border);
border-radius: 13px;
background: var(--bp-white);
overflow: hidden;
transition: border-color 0.2s ease;
}

.product-dropdown:hover {
border-color: var(--bp-border-blue);
}

.product-card--premium .product-dropdown:hover {
border-color: var(--bp-border-pink);
}

.product-dropdown summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 16px;
list-style: none;
cursor: pointer;
font-size: 13px;
font-weight: 700;
}

.product-dropdown summary::-webkit-details-marker {
display: none;
}

.product-dropdown__icon {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--bp-blue-pale);
color: var(--bp-blue);
font-size: 18px;
transition: transform 0.25s ease;
}

.product-card--premium .product-dropdown__icon {
background: var(--bp-pink-pale);
color: var(--bp-pink);
}

.product-dropdown[open] .product-dropdown__icon {
transform: rotate(45deg);
}

.product-dropdown__content {
padding: 0 16px 18px;
}

.product-dropdown__content p {
margin: 0;
color: var(--bp-text-muted);
font-size: 13px;
line-height: 1.75;
}

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

.product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid var(--bp-border);
}

.product-card__price strong,
.product-card__price span {
display: block;
}

.product-card__price strong {
color: var(--bp-text);
font-size: 20px;
}

.product-card__price span {
margin-top: 4px;
color: var(--bp-text-light);
font-size: 11px;
}

/* Buttons */

.product-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 50px;
padding: 0 20px;
border-radius: 13px;
font-size: 13px;
font-weight: 800;
text-decoration: none;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}

.product-button:hover {
transform: translateY(-3px);
}

.product-button span {
font-size: 19px;
transition: transform 0.25s ease;
}

.product-button:hover span {
transform: translateX(4px);
}

.product-button--primary {
background: var(--bp-blue);
color: var(--bp-white);
box-shadow: var(--bp-shadow);
}

.product-button--primary:hover {
background: var(--bp-blue-light);
box-shadow: var(--bp-shadow-hover);
}

.product-button--premium {
background: var(--bp-pink);
color: var(--bp-white);
box-shadow: 0 18px 50px rgba(229, 27, 120, 0.18);
}

.product-button--premium:hover {
background: var(--bp-pink-light);
}

.product-button--light {
background: var(--bp-white);
color: var(--bp-blue);
}

/* =========================================================
CTA
========================================================= */

.products-cta {
padding: 0 0 120px;
background: var(--bp-white);
}

.products-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
padding: 75px;
border-radius: 35px;
background:
radial-gradient(
circle at top right,
rgba(229, 27, 120, 0.25),
transparent 35%
),
linear-gradient(
135deg,
var(--bp-deep),
var(--bp-blue)
);
color: var(--bp-white);
}

.products-section-eyebrow--light {
color: rgba(255, 255, 255, 0.75);
}

.products-cta h2 {
max-width: 650px;
margin: 0 0 15px;
font-size: clamp(34px, 5vw, 55px);
line-height: 1.1;
letter-spacing: -2px;
}

.products-cta h2 span {
color: var(--bp-pink-light);
}

.products-cta p {
max-width: 600px;
margin: 0;
color: rgba(255, 255, 255, 0.7);
font-size: 15px;
line-height: 1.8;
}

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

@media (max-width: 1050px) {

 
.products-hero__container {
	grid-template-columns: 1fr;
	gap: 70px;
}

.products-hero__content {
	max-width: 750px;
	margin: 0 auto;
	text-align: center;
}

.products-hero__content > p {
	margin-right: auto;
	margin-left: auto;
}

.products-hero__stats {
	justify-content: center;
}

.products-hero__visual {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.products-cta__inner {
	flex-direction: column;
	align-items: flex-start;
}
 

}

@media (max-width: 850px) {

 
.products-grid-list {
	grid-template-columns: 1fr;
	max-width: 650px;
	margin: 0 auto;
}
 

}

@media (max-width: 600px) {

 
.products-page .container {
	width: min(100% - 30px, 1180px);
}

.products-hero {
	padding: 120px 0 80px;
}

.products-hero h1 {
	font-size: 45px;
	letter-spacing: -2px;
}

.products-hero__content > p {
	font-size: 16px;
}

.products-dashboard__body {
	padding: 20px;
}

.products-dashboard__cards {
	grid-template-columns: 1fr;
}

.products-floating-badge {
	display: none;
}

.products-hero__stats {
	gap: 20px;
}

.products-stat strong {
	font-size: 22px;
}

.products-list {
	padding: 80px 0;
}

.product-card {
	padding: 28px;
	border-radius: 23px;
}

.product-card__footer {
	flex-direction: column;
	align-items: stretch;
}

.product-button {
	width: 100%;
}

.products-cta {
	padding-bottom: 80px;
}

.products-cta__inner {
	padding: 50px 28px;
	border-radius: 25px;
}
 

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

 
.products-page *,
.products-page *::before,
.products-page *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
}
 

}