/*
Theme Name: WS Bags React-Style Theme
Theme URI: http://wsbag.store/
Author: Nadim
Author URI: http://wsbag.store/
Description: React-style WordPress theme mimicking modern Tailwind layout (hero, cards, contact).
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: wsbags-react
Tags: custom, bags, gifts, responsive
*/

/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:#f8fafc; color:#0f172a; line-height:1.6;}
a{color:inherit;text-decoration:none}

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

/* Header */
.site-header{background:#ffffff;border-bottom:1px solid #e6edf3;box-shadow:0 1px 2px rgba(15,23,42,0.03);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 12px;}
.brand{display:flex;align-items:center;gap:12px;}
.logo-badge{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#10b981);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;}
.site-title{font-weight:800;font-size:18px;}
.site-sub{font-size:13px;color:#64748b;}

/* Hero */
.hero{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;padding:48px 12px;}
.hero-content h1{font-size:34px;line-height:1.05;color:#0f172a;margin-bottom:12px;}
.hero-content p{color:#475569;margin-bottom:18px;}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:600;cursor:pointer}
.btn-primary{background:#10b981;color:#fff;box-shadow:0 6px 18px rgba(16,185,129,0.12);}
.btn-outline{border:1px solid #cbd5e1;border-radius:10px;padding:12px 18px;background:#fff;color:#0f172a}

/* Hero image */
.hero-media img{width:100%;height:320px;object-fit:cover;border-radius:16px;box-shadow:0 10px 30px rgba(2,6,23,0.08);}

/* Products grid */
.section{padding:40px 12px;background:transparent;}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:18px;}
.card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(2,6,23,0.06);}
.card img{width:100%;height:160px;object-fit:cover}
.card-body{padding:16px}
.card-body h3{font-size:18px;margin-bottom:6px}
.card-body p{color:#64748b;font-size:14px;margin-bottom:12px}
.card-actions{display:flex;justify-content:space-between;align-items:center}

/* Why choose us */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.feature{background:#fff;padding:20px;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,23,0.04);}

/* Contact form area */
.contact-card{background:#fff;padding:22px;border-radius:14px;box-shadow:0 10px 30px rgba(2,6,23,0.06);}
.input,textarea{width:100%;padding:12px;border:1px solid #e6edf3;border-radius:8px;margin-top:8px}
textarea{min-height:120px;resize:vertical}
.contact-meta{margin-top:12px;color:#475569;font-size:15px}

/* Footer */
.site-footer{background:#0f172a;color:#fff;padding:24px;border-top:1px solid rgba(255,255,255,0.02);}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}

/* Responsive */
@media(min-width:768px){ .hero{grid-template-columns:1fr 1fr} .hero-media img{height:360px} }