/*
Theme Name: Zenzi Wear Pro
Theme URI: http://example.com/zenzi-wear-pro
Author: Generated by ChatGPT for user
Description: Enhanced fashion export / catalog WordPress theme inspired by ROX. Colors: red, black, white. Catalog-first layout with inquiry buttons and WhatsApp contact.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: zenzi-wear-pro
*/
:root{
  --zenzi-red: #cc0000;
  --zenzi-black: #0b0b0b;
  --zenzi-white: #ffffff;
  --zenzi-gray: #f6f6f6;
  --container-max: 1300px;
  --gap: 20px;
}
*{box-sizing:border-box}
body{font-family: "Helvetica Neue", Arial, sans-serif; margin:0; color:var(--zenzi-black); background:var(--zenzi-white);}
a{color:var(--zenzi-red); text-decoration:none}
.site-header{background:linear-gradient(90deg,var(--zenzi-black),#222); color:var(--zenzi-white); padding:14px 0; position:sticky; top:0; z-index:99;}
.header-inner{max-width:var(--container-max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 18px;}
.site-title a{color:var(--zenzi-white); font-weight:800; font-size:22px; letter-spacing:0.4px;}
.primary-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:14px; align-items:center;}
.primary-nav li a{color:var(--zenzi-white); padding:8px; font-size:15px; opacity:0.95;}
.hero{display:grid; grid-template-columns: 1fr 520px; gap:var(--gap); align-items:center; padding:48px 18px; background:linear-gradient(180deg, #fff, var(--zenzi-gray));}
.hero-left{max-width:740px;}
.hero h1{font-size:44px; margin:0 0 12px 0; color:var(--zenzi-black);}
.hero p{color:#333; margin:0 0 18px 0; font-size:16px;}
.hero-cta{display:flex; gap:12px; align-items:center;}
.btn-primary{background:var(--zenzi-red); color:var(--zenzi-white); padding:12px 18px; border-radius:6px; font-weight:700;}
.btn-outline{border:2px solid var(--zenzi-black); padding:10px 16px; border-radius:6px; background:transparent; color:var(--zenzi-black)}

/* Right hero visual */
.hero-right{display:flex; justify-content:center; align-items:center;}
.hero-card{width:100%; max-width:460px; background:var(--zenzi-black); color:var(--zenzi-white); padding:22px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.2); text-align:center;}
.hero-card img{max-width:100%; height:auto; border-radius:8px;}

/* Packages */
.packages{max-width:var(--container-max); margin:30px auto; padding:0 18px;}
.packages-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.package{background:var(--zenzi-white); border:1px solid #e9e9e9; padding:18px; border-radius:8px; text-align:center; transition:transform .25s ease, box-shadow .25s ease;}
.package:hover{transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.08);}
.package h3{margin:8px 0 6px 0;}
.package p{color:#666; font-size:14px;}
.inquire-btn{display:inline-block; margin-top:12px; background:var(--zenzi-red); color:var(--zenzi-white); padding:10px 14px; border-radius:6px; font-weight:700;}

/* Features section */
.features{background:linear-gradient(180deg,var(--zenzi-gray),#fff); padding:36px 18px; margin-top:18px;}
.features-grid{max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns: repeat(3,1fr); gap:18px;}
.feature{background:var(--zenzi-white); padding:18px; text-align:center; border-radius:8px;}

/* Testimonials */
.testimonials{max-width:var(--container-max); margin:36px auto; padding:0 18px;}
.testimonial{background:#fff; border-left:4px solid var(--zenzi-red); padding:14px; margin-bottom:12px; border-radius:6px;}

/* Newsletter */
.newsletter{background:var(--zenzi-black); color:var(--zenzi-white); padding:20px; text-align:center; margin-top:24px;}
.newsletter input{padding:10px 12px; border-radius:6px; border:1px solid #ccc; width:260px; margin-right:8px;}

/* Footer */
.site-footer{background:#0b0b0b; color:#ddd; padding:26px 18px; margin-top:30px; text-align:center;}

/* Responsive */
@media(max-width:980px){ .hero{grid-template-columns:1fr; padding:26px 12px;} .hero-right{order: -1} .features-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .features-grid{grid-template-columns:1fr} .primary-nav ul{display:none} .hero h1{font-size:28px} }