/*
Theme Name: Ecom Master
Theme URI: https://www.shubhamgarg.com
Author: Shubham Garg
Author URI: https://www.shubhamgarg.com
Description: A modern, elegant, light-mode WooCommerce theme for jewellery stores. Built for great mobile UX and Elementor compatibility. Uses max two fonts.
Version: 1.0.0
Text Domain: ecom-master
Tags: ecommerce, woocommerce, elementor, responsive, light, accessibility-ready
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Root variables for light mode */
:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --primary:#111827;
  --accent:#b78b5c; /* warm gold */
  --accent-contrast:#ffffff;
  --border:#e5e7eb;
  --radius:16px;
  --shadow:0 10px 25px rgba(0,0,0,.06);
}

/* Typography */
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  font-size:16px;
}
h1,h2,h3,h4,h5,h6{
  margin:0 0 .6rem;
  line-height:1.2;
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
  color:var(--primary);
}
a{color:var(--primary); text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%; height:auto; display:block}

.container{
  width:min(1200px, 92%);
  margin:0 auto;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff8;
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.site-brand{display:flex; align-items:center; gap:.6rem}
.site-brand .logo{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg, #f7e7ce, #e3c08d); box-shadow:var(--shadow)}
.site-title{font-weight:700; letter-spacing:.2px}

/* Nav */
.nav{display:flex; gap:1rem; align-items:center}
.nav a{padding:.45rem .7rem; border-radius:12px}
.nav a.cta{background:var(--accent); color:var(--accent-contrast); box-shadow:var(--shadow)}

/* Mobile nav */
.menu-toggle{display:none; background:none; border:none; font-size:1.4rem}
@media (max-width: 900px){
  .nav{display:none}
  .menu-toggle{display:block}
  .mobile-menu{display:none; border-top:1px solid var(--border); padding:.6rem 0}
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block; padding:.6rem 0}
}

/* Hero slider */
.hero{
  position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); margin:1rem 0 2rem;
}
.slide{
  min-height:58vh;
  display:grid; place-items:center;
  padding:clamp(2rem, 4vw, 5rem);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  color:#fff; text-align:center;
}
.slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
.slide > .content{position:relative; z-index:1; max-width:900px}
.slide h1{font-size:clamp(2rem, 6vw, 3.5rem); color:#fff}
.slide p{color:#f3f4f6; margin: .6rem 0 1.2rem}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.1rem; border-radius:999px; border:1px solid #fff3;
  background:linear-gradient(135deg, var(--accent), #e5b074);
  color:#fff; box-shadow:var(--shadow); font-weight:600;
}

/* Category grid */
.section{margin:3rem 0}
.section-header{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1rem}
.section-title{font-size:1.8rem}
.grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(12, 1fr);
}
.card{
  grid-column:span 4;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
@media (max-width: 900px){
  .card{grid-column:span 6}
}
@media (max-width: 600px){
  .card{grid-column:span 12}
}

.card .img-wrap{aspect-ratio: 4/3; overflow:hidden}
.card .img-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.card:hover .img-wrap img{transform:scale(1.03)}
.card .body{padding:1rem}
.card .title{font-size:1.1rem; margin:0 0 .3rem}
.card .muted{color:var(--muted); font-size:.9rem}

/* WooCommerce tweaks */
.woocommerce .products .product{
  border:1px solid var(--border); padding:1rem; border-radius:16px; overflow:hidden;
  transition:transform .2s ease;
}
.woocommerce .products .product:hover{transform:translateY(-2px)}
.woocommerce div.product .product_title{font-family:'Playfair Display', serif}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--accent); color:#fff; border-radius:999px; padding:.6rem 1rem; border:none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{opacity:.95}

/* Footer */
.site-footer{border-top:1px solid var(--border); margin-top:3rem; background:#fff}
.site-footer .footer-inner{display:grid; gap:1rem; grid-template-columns:repeat(12,1fr); padding:2rem 0}
.site-footer .col{grid-column:span 3}
@media (max-width: 900px){.site-footer .col{grid-column:span 6}}
@media (max-width: 600px){.site-footer .col{grid-column:span 12}}
.site-footer .copyright{border-top:1px solid var(--border); padding:1rem 0; color:var(--muted); text-align:center}