/*
Theme Name: Khaleeji Perfume
Theme URI: https://example.com/khaleeji-perfume
Author: ChatGPT
Author URI: https://example.com
Description: A clean, fast, WooCommerce-ready theme inspired by luxury oud & perfume storefronts. Includes a hero, category banners, and product grid homepage.
Version: 1.0.0
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: khaleeji-perfume
Tags: e-commerce, woocommerce, responsive, rtl-ready, blog
*/

/* Base reset & typography */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: #222;
  background: #fff;
}

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

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 999;
  background: #ffffffd9; backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #eee;
}
.topbar { font-size: 14px; background:#0f172a; color:#fff; padding: 6px 0; text-align:center; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#111; font-weight:700; font-size:20px; letter-spacing:0.5px;}
.brand-logo { width:40px; height:40px; border-radius:50%; background:#111; display:inline-block; }
.nav-toggle { display:none; background:none; border:1px solid #ddd; padding:8px 10px; border-radius:6px; }
.primary-nav { display:flex; gap: 20px; }
.primary-nav a { text-decoration:none; color:#111; font-weight:600; padding:8px 0; }
.primary-nav a:hover { color:#6b1f1f; }

/* Hero */
.hero {
  position: relative; min-height: 72vh; display:flex; align-items:center;
  color:#fff; background:#000 url('./assets/img/hero.jpg') center/cover no-repeat;
}
.hero::after {
  content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.2));
}
.hero-inner { position:relative; z-index:1; }
.kicker { text-transform:uppercase; letter-spacing:2px; font-size:12px; opacity:.9; }
.hero h1 { font-size: clamp(32px, 6vw, 64px); margin: 6px 0 10px; }
.hero p { font-size: clamp(16px, 2.5vw, 19px); max-width: 700px; opacity:.95; }
.btn {
  display:inline-block; border:1px solid #fff; padding: 12px 18px; border-radius: 999px;
  text-decoration:none; color:#fff; margin-right: 10px; font-weight:600;
}
.btn.primary { background:#6b1f1f; border-color:#6b1f1f; }
.btn.alt { background: transparent; }
.btn:hover { opacity:.9; transform: translateY(-1px); transition: all .2s ease; }

/* Category banners */
.banners { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin:40px 0; }
.banner {
  border-radius:14px; overflow:hidden; position:relative; min-height:220px;
  background:#eee url('./assets/img/banner.jpg') center/cover no-repeat;
}
.banner .label { position:absolute; inset: auto 16px 16px 16px; background:#ffffffdd; padding:10px 12px; border-radius:10px; font-weight:700; }
.banner a { color:#111; text-decoration:none; }

/* Section */
.section { padding: 52px 0; }
.section h2 { font-size: clamp(24px, 4vw, 36px); margin: 0 0 16px; }
.section .subtitle { color:#666; margin-bottom: 24px; }

/* Product grid (WooCommerce shortcode wrappers) */
.products-wrap { margin-top: 10px; }
.products-wrap .woocommerce { --wc-product-card-gap: 20px; }
.woocommerce ul.products { gap: var(--wc-product-card-gap); }
.woocommerce ul.products li.product { border:1px solid #eee; border-radius:12px; padding:10px; overflow:hidden; }
.woocommerce ul.products li.product .button { border-radius:999px; }

/* Promo strip */
.promo-strip { background:#f8f6f4; padding: 18px 0; text-align:center; font-weight:600; border-top:1px solid #eee; border-bottom:1px solid #eee; }

/* Testimonials */
.testimonials { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.testimonial { border:1px solid #eee; border-radius:12px; padding:18px; }
.testimonial .stars { color:#eab308; }
.testimonial .author { font-weight:700; margin-top:8px; }

/* Footer */
.site-footer { background:#0b0f19; color:#e5e7eb; padding: 40px 0 20px; }
.site-footer a { color:#e5e7eb; text-decoration:none; }
.footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #1f2937; padding-top:16px; margin-top:24px; font-size:14px; }
.newsletter input[type='email'] { padding:10px 12px; width: 70%; border-radius:8px; border:1px solid #334155; background:#0f172a; color:#fff; }
.newsletter button { padding:10px 16px; border-radius:8px; border:0; background:#6b1f1f; color:#fff; font-weight:700; }

/* Responsive */
@media (max-width: 960px) {
  .primary-nav { display:none; }
  .nav-toggle { display:inline-block; }
  .banners { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}