/* Beautified styles for Pet Needs Shop - visual updates only */
:root{
	--accent:#2b9f6b;
	--accent-2:#2075b6;
	--muted:#6b7280;
	--bg:#f6f7fb;
	--card:#ffffff;
	--radius:12px;
	--shadow: 0 8px 30px rgba(18,24,31,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	margin:0;
	color:#111827;
	background:var(--bg);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.5;
}

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

/* Header */
.site-header{
	background:rgba(255,255,255,0.85);
	backdrop-filter:blur(6px);
	border-bottom:1px solid #eef2f6;
	position:sticky;top:0;z-index:40;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{font-weight:800;margin:0;font-size:1.2rem;color:#0f172a}
.site-header nav{display:flex;gap:10px;align-items:center}
.site-header nav a{
	color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600;font-size:0.95rem
}
.site-header nav a:hover{background:#f3f6fb;color:#0f172a}
.site-header nav a.active{background:var(--accent);color:#fff}

/* Hero */
.hero{padding:56px 0}
.hero-inner{display:grid;grid-template-columns:1fr 460px;gap:30px;align-items:center}
.hero-left h1{font-size:2.4rem;margin:0 0 12px;line-height:1.05}
.lead{color:#374151;font-size:1.05rem}
.hero-image img{width:100%;height:360px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);display:block}
.hero-actions{margin-top:18px;display:flex;gap:12px}
.cta{display:inline-block;padding:12px 20px;background:var(--accent);color:#fff;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(43,159,107,0.18)}
.ghost{display:inline-block;padding:12px 18px;background:transparent;border:1px solid #e6eef8;color:#0f172a;border-radius:10px;text-decoration:none;font-weight:700}

/* Cards & grid */
.card{background:var(--card);border-radius:var(--radius);padding:18px;margin:20px 0;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card.product{overflow:hidden;padding:0;border-radius:10px}
.product-img{width:100%;height:200px;object-fit:cover;display:block}
.product-body{padding:16px}
.card.product h4{margin:0 0 6px;font-size:1.05rem}
.price{font-weight:800;color:var(--accent);margin-top:8px}
.small{font-size:13px;color:var(--muted)}

/* Buttons */
.btn{display:inline-block;padding:9px 14px;background:var(--accent-2);color:#fff;border-radius:10px;text-decoration:none;font-weight:700}
.btn.ghost{background:transparent;color:var(--accent-2);border:1px solid rgba(32,117,182,0.12)}
.btn:focus{outline:3px solid rgba(32,117,182,0.12);outline-offset:2px}

/* Forms and tables (admin) */
input[type="text"], input[type="number"], input[type="password"], textarea, select{
	width:100%;padding:10px;border:1px solid #e6edf3;border-radius:8px;background:#fff;font-size:0.95rem;color:#0f172a
}
/*label{display:block;margin-bottom:6px;font-weight:700;color:#0f172a;font-size:0.95rem}*/
/* small inline labels (if used) */
/*.form-label-inline{display:inline-block;margin-right:8px;font-weight:600}*/
/* Name input specific styling (and similar name fields) */
#pname, #pprice,#pimgfile, #pimg, input[name="name"]{
	padding:12px 14px;
	width:100%;
	border:1px solid #e6edf6;
	border-radius:8px;
	background:#ffffff;
	font-size:1rem;
	color:#0f172a;
	transition:box-shadow .12s ease, border-color .12s ease, transform .06s ease;
	box-shadow: inset 0 1px 0 rgba(16,24,40,0.02);
}
#pname:focus,#pimgfile:focus, #pprice:focus, #pimg:focus, input[name="name"]:focus{
	border-color:var(--accent-2);
	box-shadow:0 8px 24px rgba(32,117,182,0.10);
	outline:none;
	transform:translateY(-1px);
}
#pname::placeholder,#pimgfile::placeholder, #pprice::placeholder, #pimg::placeholder, input[name="name"]::placeholder{color:#94a3b8}
table{width:100%;border-collapse:collapse}
table thead th{font-weight:700;text-align:left;padding:10px;color:var(--muted);font-size:13px}
table tbody td{padding:10px;border-top:1px solid #f1f5f9}
.admin-grid{display:grid;grid-template-columns:1fr 360px;gap:18px}

/* Footer */
.site-footer{padding:28px 0;text-align:center;color:var(--muted);font-size:14px}

/* Notifications */
.note{color:#9b2c2c;background:#fff5f5;padding:10px;border-radius:8px;border:1px solid #ffe3e3}

/* Homepage specific styles (kept names for compatibility) */
.hero-landing{padding:64px 0;background:linear-gradient(180deg,#f7fff9,#ffffff)}
.hero-grid{display:grid;grid-template-columns:1fr 480px;gap:28px;align-items:center}
.hero-left{padding-right:18px}
.hero-right .hero-image-card{max-width:520px;margin-left:auto}
.hero-left h1{font-size:2.25rem;margin:0 0 12px}
.hero-features{list-style:none;padding:0;margin:18px 0 0;display:flex;gap:12px;color:var(--muted)}
.hero-image-card img{width:100%;border-radius:14px;box-shadow:var(--shadow);display:block}

.features{padding-top:18px;padding-bottom:18px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature h4{margin:0 0 8px}

.spotlight h3{margin-top:0}
.spot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.product-spot img{width:100%;height:160px;object-fit:cover}
.product-spot .spot-body{padding:12px}

.testimonials{margin-top:12px}
.test-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.test-grid blockquote{background:#fff;padding:16px;border-radius:8px;border-left:4px solid var(--accent);margin:0}
.test-grid cite{display:block;margin-top:8px;color:#666;font-size:13px}

.cta-card .cta-inner{display:flex;justify-content:space-between;align-items:center}

/* Responsive tweaks */
@media (max-width:980px){
	.hero-inner{grid-template-columns:1fr}
	.hero-image img{height:260px}
	.features-grid{grid-template-columns:1fr}
}

@media (max-width:520px){
	.product-img{height:140px}
	.container{padding:16px}
}