/* ============================================================
   Global Acoustic Solutions - Storefront styles
   Palette: charcoal + acoustic-felt teal + warm amber
   ============================================================ */
:root{
  --ink:#20242a;          /* charcoal text */
  --ink-soft:#4b5563;
  --muted:#6b7280;
  --paper:#faf9f6;        /* off-white bg */
  --paper-2:#f1efe9;
  --line:#e3e0d8;
  --teal:#2f7d6e;         /* acoustic-felt accent */
  --teal-dark:#245e53;
  --amber:#d69a3e;        /* sale / highlight */
  --white:#ffffff;
  --danger:#c0492f;
  --radius:14px;
  --shadow:0 6px 24px rgba(32,36,42,.08);
  --shadow-sm:0 2px 8px rgba(32,36,42,.06);
  --maxw:1600px;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--paper);line-height:1.6;font-size:16px;
}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-dark)}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;margin:0 0 .5em;font-weight:600;color:var(--ink)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:10px;border:1px solid transparent;
  font-weight:600;font-size:15px;cursor:pointer;transition:.18s;font-family:var(--font-body)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dark);color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;color:#fff}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--teal);color:var(--teal)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px;font-size:14px}

/* ---- Header ---- */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;gap:24px;padding:14px 20px;max-width:var(--maxw);margin:0 auto}
.logo{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink);display:flex;align-items:center;gap:10px}
.logo .logo-img{height:42px;width:auto;display:block}
.logo .logo-text{white-space:nowrap}
@media(max-width:560px){.logo .logo-text{font-size:16px}.logo .logo-img{height:34px}}
.logo .wave{display:inline-flex;gap:2px;align-items:flex-end;height:20px}
.logo .wave span{width:3px;background:var(--teal);border-radius:2px;animation:eq 1.1s ease-in-out infinite}
.logo .wave span:nth-child(1){height:8px;animation-delay:0s}
.logo .wave span:nth-child(2){height:18px;animation-delay:.15s}
.logo .wave span:nth-child(3){height:12px;animation-delay:.3s}
.logo .wave span:nth-child(4){height:16px;animation-delay:.45s}
@keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.logo .wave span{animation:none}}
.header-search{flex:1;max-width:460px}
.header-search form{display:flex}
.header-search input{flex:1;padding:10px 14px;border:1px solid var(--line);border-radius:10px 0 0 10px;font-size:15px;outline:none}
.header-search input:focus{border-color:var(--teal)}
.header-search button{border-radius:0 10px 10px 0;border:1px solid var(--teal);background:var(--teal);color:#fff;padding:0 16px;cursor:pointer}
.header-nav{display:flex;align-items:center;gap:18px;margin-left:auto;font-weight:500;font-size:15px}
.cart-link{position:relative;color:var(--ink)}
.cart-badge{position:absolute;top:-8px;right:-10px;background:var(--amber);color:#fff;font-size:11px;
  min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;padding:0 4px}

/* ---- Hero ---- */
.hero{background:linear-gradient(135deg,#20242a,#2b333b);color:#fff;overflow:hidden;position:relative}
.hero.has-slider{min-height:clamp(340px,44vw,560px);display:flex;align-items:center}
.hero-inner{max-width:var(--maxw);margin:0 auto;padding:70px 20px;position:relative;z-index:3;width:100%}
.hero.has-slider .hero-inner{padding-top:40px;padding-bottom:40px}
.hero h1{color:#fff;font-size:clamp(30px,5vw,52px);max-width:640px}
.hero p{color:#cfd3d8;font-size:18px;max-width:520px;margin-bottom:28px}
.hero .btn-primary{background:var(--amber)}
.hero .btn-primary:hover{background:#c1892f}
/* full-width image slider */
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease-in-out}
.hero-slide.active{opacity:1}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(24,28,33,.94) 0%,rgba(24,28,33,.78) 38%,rgba(24,28,33,.35) 70%,rgba(24,28,33,.15) 100%)}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;background:rgba(255,255,255,.15);color:#fff;border:none;width:44px;height:44px;border-radius:50%;font-size:18px;cursor:pointer;backdrop-filter:blur(4px);transition:.16s}
.hero-arrow:hover{background:rgba(255,255,255,.3)}
.hero-arrow.prev{left:18px}.hero-arrow.next{right:18px}
.hero-dots{position:absolute;bottom:18px;left:0;right:0;z-index:4;display:flex;justify-content:center;gap:8px}
.hero-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:.16s}
.hero-dot.active{background:var(--amber);width:24px;border-radius:5px}
.hero-bars{position:absolute;right:0;bottom:0;top:0;width:45%;display:flex;align-items:flex-end;gap:6px;
  padding:30px;opacity:.18;z-index:1}
.hero-bars span{flex:1;background:var(--teal);border-radius:4px 4px 0 0}

/* ---- Section ---- */
.section{padding:56px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:10px}
.eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--teal);font-weight:600;margin-bottom:6px}
.section h2{font-size:28px}

/* ---- Product grid + card ---- */
.grid{display:grid;gap:22px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.product-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.product-card .thumb{aspect-ratio:1/1;background:var(--paper-2);position:relative;overflow:hidden}
.product-card .thumb img{width:100%;height:100%;object-fit:cover}
.product-card .badge{position:absolute;top:10px;left:10px;background:var(--amber);color:#fff;font-size:11px;font-weight:700;padding:4px 8px;border-radius:6px}
.product-card .pc-media{display:block}
.product-card .body{padding:14px 16px;display:flex;flex-direction:column;flex:1}
.product-card .brand{font-size:12px;color:var(--teal);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.product-card .title{display:block;font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--ink);margin:4px 0 6px;line-height:1.35;text-decoration:none}
.product-card .title:hover{color:var(--teal)}
.product-card .pc-bottom{margin-top:auto;padding-top:8px}
.product-card .price{font-weight:700;font-size:18px;color:var(--ink)}
.product-card .mrp{font-size:14px;color:var(--muted);text-decoration:line-through;margin-left:6px;font-weight:400}
.product-card .nrc{font-size:12px;color:var(--muted);margin-top:2px}
.product-card .btn-cart{width:100%;margin-top:10px;padding:10px 12px;border:1px solid var(--teal);background:var(--teal);color:#fff;font-weight:600;font-size:14px;border-radius:9px;cursor:pointer;transition:.16s;font-family:inherit}
.product-card .btn-cart:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.product-card .btn-cart:disabled{background:var(--paper-2);border-color:var(--line);color:var(--muted);cursor:not-allowed}

/* ---- Filters + listing layout ---- */
.listing{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
.filters{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:90px}
.filters h4{font-size:15px;border-bottom:1px solid var(--line);padding-bottom:8px}
.filter-group{margin-bottom:18px}
.filter-group label{display:block;font-size:14px;padding:4px 0;color:var(--ink-soft);cursor:pointer}
.filter-group input{margin-right:8px}

/* ---- Product detail ---- */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.pd-gallery{background:var(--paper-2);border-radius:var(--radius);aspect-ratio:1/1;overflow:hidden}
.pd-gallery img{width:100%;height:100%;object-fit:cover}
.pd-info h1{font-size:30px}
.pd-price{font-size:28px;font-weight:700;margin:14px 0}
.pd-price .mrp{font-size:18px;color:var(--muted);text-decoration:line-through;margin-left:10px;font-weight:400}
.spec-table{width:100%;border-collapse:collapse;margin:20px 0}
.spec-table td{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec-table td:first-child{color:var(--muted);width:42%}
.qty-row{display:flex;align-items:center;gap:14px;margin:20px 0}
.qty-input{width:70px;padding:10px;border:1px solid var(--line);border-radius:8px;text-align:center}

/* ---- Cart / checkout ---- */
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.cart-item{display:grid;grid-template-columns:80px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item:last-child{border-bottom:none}
.cart-item .ci-thumb{width:80px;height:80px;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.cart-item .ci-thumb img{width:100%;height:100%;object-fit:cover}
.cart-item .ci-name{font-weight:600;color:var(--ink);text-decoration:none}
.cart-item .ci-name:hover{color:var(--teal)}
.cart-item .ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cart-item .ci-total{font-weight:700}
.cart-item .ci-remove{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.15s}
.cart-item .ci-remove:hover{background:#fbeae6;border-color:#f2c4b9;color:var(--danger)}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:15px}
.summary-total{display:flex;justify-content:space-between;padding:14px 0 0;margin-top:8px;border-top:1px solid var(--line);font-weight:700;font-size:19px}

/* ---- Forms ---- */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.form-control{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit;outline:none}
.form-control:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,125,110,.12)}
.auth-wrap{max-width:440px;margin:50px auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---- Flash / alerts ---- */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:15px}
.flash.success{background:#e7f4ef;color:var(--teal-dark);border:1px solid #bfe3d7}
.flash.error{background:#fbeae6;color:var(--danger);border:1px solid #f2c4b9}
.flash.info{background:#eef1f4;color:var(--ink-soft);border:1px solid #d9dee4}

/* ---- Order tracking timeline ---- */
.timeline{list-style:none;padding:0;margin:20px 0}
.timeline li{position:relative;padding:0 0 26px 32px;border-left:2px solid var(--line)}
.timeline li.done{border-left-color:var(--teal)}
.timeline li:last-child{border-left-color:transparent}
.timeline li::before{content:'';position:absolute;left:-8px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--line);border:2px solid var(--paper)}
.timeline li.done::before{background:var(--teal)}
.timeline li.current::before{background:var(--teal);box-shadow:0 0 0 4px rgba(47,125,110,.22)}
.timeline li.done::after{content:'\2713';position:absolute;left:-4px;top:0;font-size:9px;color:#fff;font-weight:700}
.timeline li .t-status{font-weight:600;color:var(--ink)}
.timeline li:not(.done) .t-status{color:var(--muted)}
.timeline li.current .t-status{color:var(--teal-dark)}
.timeline li .t-date{font-size:13px;color:var(--muted)}

/* ---- Footer ---- */
.site-footer{background:var(--ink);color:#c8ccd2;margin-top:60px;padding:44px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.site-footer h4{color:#fff;font-size:16px}
.site-footer a{color:#c8ccd2}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid #333a42;margin-top:30px;padding-top:16px;font-size:13px;color:#8b929b;text-align:center}

/* ---- Empty state ---- */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty h3{color:var(--ink)}

/* ---- Responsive ---- */
@media(max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .listing{grid-template-columns:1fr}
  .filters{position:static}
  .pd{grid-template-columns:1fr}
  .cart-layout{grid-template-columns:1fr}
  .header-search{display:none}
}
@media(max-width:560px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-bars{display:none}
  .hero-arrow{display:none}
  .hero-scrim{background:linear-gradient(180deg,rgba(24,28,33,.6),rgba(24,28,33,.9))}
}