:root{
	--accent:#0b63d6;
	--bg:#f5f7fb;
	--card:#fff;
	--text:#0f1724;
	--muted:#6b7280;
	--border:rgba(15,23,36,0.08);
	--shadow:0 10px 28px rgba(15,23,36,0.06);
}

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

html{
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
	scroll-behavior:smooth;
}

body{
	font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
	margin:0;
	color:var(--text);
	background:var(--bg);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

img{
	max-width:100%;
	display:block;
	height:auto;
}

a{
	color:inherit;
	text-decoration:none;
	-webkit-tap-highlight-color:transparent;
}

button,
input,
select,
textarea{
	font:inherit;
	-webkit-appearance:none;
	appearance:none;
	border-radius:0;
}

.container{
	max-width:1100px;
	margin:0 auto;
	padding:24px;
}

.site-header{
	position:sticky;
	top:0;
	z-index:1000;
	background:#fff;
	border-bottom:1px solid rgba(15,23,36,0.06);
	box-shadow:0 2px 10px rgba(15,23,36,0.04);
}

.header-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}

.brand{
	display:flex;
	align-items:center;
}

.brand .logo{
	height:44px;
	width:auto;
}

.site-footer .logo{
	height:48px !important;
	width:auto !important;
}

.site-footer img.logo{
	max-height:48px !important;
	width:auto !important;
}

section.products.container,
section.products.container .product-grid,
section.products.container h2 {
	display:none !important;
}

.nav{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:18px;
}

.nav a{
	color:var(--muted);
	font-weight:500;
}

/* Mobile menu toggle */
.menu-toggle{
	display:flex;
	background:transparent;
	border:0;
	width:44px;
	height:44px;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	position:relative;
	z-index:1001;
}
.menu-toggle .hamburger{
	display:block;
	width:20px;
	height:2px;
	background:var(--text);
	position:relative;
	transition:0.3s ease;
}
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after{
	content:'';
	position:absolute;
	left:0;
	width:100%;
	height:2px;
	background:var(--text);
	transition:0.3s ease;
}
.menu-toggle .hamburger::before{
	top:-6px;
}
.menu-toggle .hamburger::after{
	top:6px;
}
.menu-toggle.has-items::after{
	content:'';
	position:absolute;
	top:10px;
	right:10px;
	width:10px;
	height:10px;
	border-radius:50%;
	background:#dc2626;
	box-shadow:0 0 0 2px #fff;
}
.site-header.nav-open .hamburger{
	background:transparent;
}
.site-header.nav-open .hamburger::before{
	transform: translateY(6px) rotate(45deg);
}
.site-header.nav-open .hamburger::after{
	transform: translateY(-6px) rotate(-45deg);
}

.nav{
	display:none;
	flex-direction:column;
	align-items:flex-start;
	gap:10px;
	position:absolute;
	top:100%;
	left:0;
	right:0;
	padding:16px 20px;
	background:var(--card);
	border-bottom-left-radius:12px;
	border-bottom-right-radius:12px;
	box-shadow:0 8px 20px rgba(15,23,36,0.08);
}
.site-header.nav-open .nav{
	display:flex;
}

@media (max-width:900px){
	.nav{
		position:static;
		padding:12px 20px;
		border-radius:0 0 12px 12px;
		box-shadow:0 8px 20px rgba(15,23,36,0.08);
	}
	.site-header .container{ padding:12px 18px }
}

.nav a:hover{
	color:var(--text);
}

.cart-link{
	font-weight:600;
}

.payment-result{
	border:1px solid rgba(15,23,36,0.12);
	background:#fff;
	padding:18px;
	border-radius:16px;
	box-shadow:0 12px 24px rgba(15,23,36,0.06);
}

.payment-result-card h3{
	margin:0 0 12px;
	font-size:1.1rem;
}

.payment-result-card ul{
	list-style:none;
	padding:0;
	margin:0;
}

.payment-result-card li{
	margin-bottom:8px;
}

.payment-result-card strong{
	color:var(--text);
}

.hero{
	padding:54px 0;
	background:linear-gradient(120deg,#f7fafc 0%,#eef6ff 100%);
}

.hero-inner{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:36px;
	align-items:center;
}

.hero-text h1{
	font-size:clamp(2rem,4vw,3.2rem);
	line-height:1.15;
	margin:0 0 12px;
}

.lead{
	color:var(--muted);
	margin:0 0 18px;
}

.hero-media{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	width:100%;
}

.hero-media img{
	width:min(420px,100%);
	border-radius:16px;
	box-shadow:var(--shadow);
}

.hero-btn-mobile{
	display:none;
	width:100%;
	margin-top:0;
	align-self:stretch;
	text-align:center;
}

.features{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
	margin:32px auto;
}

.feature,
.product-card,
.cart-item,
.cart-summary,
.product-detail,
form{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:16px;
	box-shadow:var(--shadow);
}

.feature{
	padding:22px;
}

.product-card{
	padding:14px;
	text-align:center;
}

.products h2{
	margin:0 0 16px;
}

.product-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:18px;
}

.price{
	font-weight:700;
	color:var(--accent);
	margin:8px 0;
	font-size:1.05rem;
}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:auto;
	padding:12px 18px;
	background:var(--accent);
	color:#fff;
	border:0;
	border-radius:10px;
	cursor:pointer;
	font-weight:600;
	line-height:1;
	-webkit-appearance:none;
	appearance:none;
}

.btn:hover{
	filter:brightness(.95);
}

.btn:active{
	transform:translateY(1px);
}

.btn-small{
	display:inline-block;
	padding:6px 12px;
	background:var(--accent);
	color:#fff;
	border:0;
	border-radius:6px;
	cursor:pointer;
	font-size:0.9rem;
	font-weight:500;
}

input,
select,
textarea{
	width:100%;
	padding:12px 14px;
	border:1px solid var(--border);
	border-radius:10px;
	background:#fff;
	color:var(--text);
	font-family:inherit;
}

input:focus,
select:focus,
button:focus,
textarea:focus,
a:focus{
	outline:2px solid rgba(11,99,214,.28);
	outline-offset:2px;
}

.site-footer{
	margin-top:40px;
	padding:36px 0;
	color:var(--muted);
}

.footer-grid{
	display:flex;
	gap:40px;
	align-items:flex-start;
	justify-content:space-between;
}

.product-detail{
	padding:20px;
}

.detail-grid{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:28px;
	align-items:start;
}

.detail-image img{
	width:100%;
	border-radius:16px;
}

.detail-info h1{
	margin-top:0;
}

.product-list{
	margin:16px 0;
	padding-left:18px;
}

.product-actions{
	display:grid;
	gap:14px;
	margin-top:18px;
}

label{
	display:block;
	margin:10px 0;
	font-weight:500;
}

#cartContents{
	margin-top:18px;
	display:grid;
	gap:12px;
	margin-bottom:20px;
}

.cart-item{
	display:flex;
	gap:14px;
	align-items:flex-start;
	padding:14px;
	background:var(--card);
	border:1px solid var(--border);
	border-radius:12px;
}

.cart-item .meta{
	flex:1;
}

.cart-item h4{
	margin:0 0 4px;
	font-size:1rem;
}

.cart-controls{
	display:flex;
	gap:10px;
	align-items:center;
	flex-wrap:wrap;
}

.cart-controls input[type=number]{
	width:60px;
	padding:8px;
	border:1px solid var(--border);
	border-radius:6px;
}

.cart-summary{
	padding:18px;
	background:var(--card);
	border:1px solid var(--border);
	border-radius:12px;
}

.cart-summary h3{
	margin-top:0;
}

.cart-summary ul{
	margin:0;
	padding-left:18px;
	list-style:none;
}

.cart-summary li{
	padding:8px 0;
	color:var(--text);
}

.small-muted{
	color:var(--muted);
	font-size:0.9rem;
}

.subscribe-form{
	display:flex;
	gap:8px;
	align-items:center;
	flex-wrap:wrap;
}

.subscribe-form input[type="email"]{
	min-width:220px;
}

form{
	padding:18px;
	margin-top:16px;
}

.checkout-layout{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
	align-items:stretch;
}

.checkout-layout > div,
.checkout-layout > form{
	width:100%;
	min-height:100%;
	margin-top:0;
}

.checkout-layout #orderSummary,
.checkout-layout #checkoutForm{
	height:100%;
}

.checkout-layout #checkoutForm{
	display:flex;
	flex-direction:column;
}

.checkout-layout #checkoutForm p{
	margin-bottom:0;
}

@media(max-width:900px){
	.hero-inner,
	.detail-grid{
		grid-template-columns:1fr;
	}
	.features{
		grid-template-columns:1fr;
	}
	.footer-grid{
		flex-direction:column;
		gap:18px;
	}
	.cart-item{
		align-items:flex-start;
		flex-direction:column;
	}
	.cart-item img{
		width:100%;
		max-width:220px;
	}
	.checkout-layout{
		grid-template-columns:1fr;
	}
}

@media(max-width:600px){
	.container{
		padding:14px;
	}
	.header-row{
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
		gap:10px;
	}
	.brand .logo{
		height:34px;
	}
	.nav{
		gap:8px;
		font-size:13px;
		justify-content:flex-end;
	}
	.hero{
		padding:22px 0;
	}
	.hero-inner{
		display:grid;
		grid-template-columns:1fr;
		gap:18px;
	}
	.hero-text h1{
		font-size:1.7rem;
	}
	.hero-media{
		width:100%;
		align-items:stretch;
	}
	.hero-media img{
		width:100%;
	}
	.hero-btn-mobile{
		display:block;
		width:100%;
		max-width:100%;
		margin-top:0;
		align-self:stretch;
		justify-content:center;
		text-align:center;
		display:block;
	}
	.btn{
		width:100%;
		display:block;
		text-align:center;
	}
	.feature,
	.product-card{
		padding:16px;
	}
}

#toastContainer{
  position:fixed;
  right:20px;
  bottom:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2000;
  pointer-events:none;
}

.toast-notification{
  min-width:240px;
  max-width:320px;
  padding:14px 16px;
  background:rgba(15,23,36,0.95);
  color:#fff;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(15,23,36,0.18);
  opacity:0;
  transform:translateY(12px);
  transition:opacity 220ms ease, transform 220ms ease;
  pointer-events:auto;
}

.toast-visible{
  opacity:1;
  transform:translateY(0);
}

.confirm-dialog p{
  margin:0 0 18px;
  line-height:1.6;
}

.confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
}

.confirm-actions .btn-secondary,
.confirm-actions .btn-danger{
  min-width:88px;
}

.btn-secondary{
  background:#f3f4f6;
  color:#111;
}

.btn-danger{
  background:#ef4444;
  color:#fff;
}