/* =========================================================
   BRIDAL LUXE – Global Theme (for all pages)
   Palette: Ivory (#FFFAF5), Deep Maroon (#7a0026), Gold (#d4af37), Charcoal (#111)
   Fonts: Playfair Display (headings), Montserrat (UI/body)
   ========================================================= */
:root{
  --bg:#FFFAF5; --panel:#ffffff; --ink:#111; --muted:#6f6f6f; --line:#ece7e1;
  --brand:#7a0026; --brand-2:#b80d3a; --gold:#d4af37; --success:#138a36; --danger:#c81e1e;
  --radius:16px; --shadow:0 12px 34px rgba(17,17,17,.08); --shadow-2:0 18px 50px rgba(17,17,17,.12);
  --max:1200px; --space:clamp(14px,2vw,22px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
img{display:block;width:100%;height:auto;object-fit:cover;background:#f6f6f6}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer}
.container{max-width:var(--max);margin:auto;padding:0 var(--space)}
.section{padding:clamp(18px,3.2vw,40px) 0}
.title{font-family:"Playfair Display",serif;letter-spacing:.2px}
.eyebrow{font-size:.78rem;color:var(--muted);letter-spacing:.18em;text-transform:uppercase}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--line);margin:16px 0;border:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:999px;font-weight:800;transition:.25s}
.btn:focus-visible{outline:3px solid rgba(212,175,55,.45);outline-offset:2px}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink);background:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-gold{background:linear-gradient(135deg,#f3e7c7,#d4af37);color:#111;font-weight:900;box-shadow:0 10px 24px rgba(212,175,55,.18)}

/* Notice */
.notice{background:#111;color:#fff;font-size:.85rem;text-align:center;padding:8px 10px}
.notice a{text-decoration:underline;color:#fff}

/* ============ Header / Navbar ============ */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:#7a0026;           /* ya var(--brand) */
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.15);
  backdrop-filter:none;
}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--space)}
.brand img{height:20px}
.primary-nav{display:flex;align-items:center;gap:16px}
.primary-nav a{padding:10px 12px;border-radius:10px;color:#222;font-weight:700}
.primary-nav a:hover{background:#f5f2ee}
.right{display:flex;align-items:center;gap:10px}
/* ---- Global logo styles (add near end of nav.css) ---- */
.site-header .logo{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.site-header .logo-img{ height:34px; width:auto; display:block; }
@media (min-width:960px){ .site-header .logo-img{ height:38px; } }

/* Big stylish cart */
.icon-btn{display:inline-grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#111,#2a2a2a);border:1px solid #000;box-shadow:0 10px 24px rgba(0,0,0,.20);transition:transform .18s ease}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn.cart{position:relative;width:48px;height:48px}
.icon-btn .bag{width:24px;height:24px;stroke:#fff;stroke-width:1.8;fill:none}
.cart-badge{position:absolute;top:-6px;right:-7px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#e11d48;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.icon-btn.cart.added{animation:cart-bump .5s ease}
@keyframes cart-bump{0%{transform:scale(1)}30%{transform:scale(1.12)}100%{transform:scale(1)}}
#currency{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#fff}

/* Mobile menu */
.hamburger{display:none}
@media(max-width:960px){
  .primary-nav{
    display:none;position:absolute;left:0;right:0;top:62px;
    background:#7a0026;                 /* ya var(--brand) */
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.15);
    padding:8px var(--space);
    flex-direction:column;gap:6px
  }
  .site-header.open .primary-nav{display:flex}
  .hamburger{
    display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
    border:0; border-radius:999px;
    background:transparent;             /* white chip hata diya */
    color:#fff;                         /* icon white dikhe */
  }
}

/* ============ Category Chips ============ */
.catbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.cat-scroll{display:flex;gap:10px;overflow:auto;padding:10px var(--space)}
.cat-pill{white-space:nowrap;border:1px solid var(--line);padding:10px 14px;border-radius:999px;background:#fff;font-weight:800;color:#222}
.cat-pill.active{border-color:var(--brand);color:#fff;background:linear-gradient(180deg,#991414,#6f0b0b)}
section[id^="cat-"]{scroll-margin-top:90px}

/* ============ Breadcrumbs ============ */
#breadcrumbs{background:#fafafa;border-bottom:1px solid var(--line)}
.bc-wrap{max-width:var(--max);margin:auto;padding:8px var(--space);font-size:.9rem;color:#444}
.bc-wrap a{color:#222}
.bc-wrap .sep{opacity:.5;margin:0 6px}

/* ============ Product Cards (optional, if used) ============ */
.grid{display:grid;gap:16px}
@media(min-width:680px){ .grid.cols-2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)} }
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:.25s;position:relative}
.card:hover{transform:translateY(-4px)}
.card-media img{aspect-ratio:3/4;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.04)}
.card.badged::before{content:attr(data-badge);position:absolute;z-index:2;top:12px;left:12px;background:var(--gold);color:#111;padding:6px 10px;border-radius:999px;font-weight:900;font-size:.8rem;box-shadow:var(--shadow)}
.card-body{padding:12px}
.card-title{font-weight:900}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 8px}
.price{font-weight:900}
.old{color:#a5a5a5;text-decoration:line-through;font-weight:700;margin-left:8px}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:520px){ .card-actions{grid-template-columns:1fr} }

/* ============ Forms (Checkout/Contact) ============ */
.form{display:grid;gap:12px}
.form .row{display:grid;gap:10px}
@media(min-width:760px){ .form .row.two{grid-template-columns:1fr 1fr} .form .row.three{grid-template-columns:1fr 1fr 1fr} }
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
label{font-weight:700;margin-bottom:6px;display:block}
.help{font-size:.88rem;color:var(--muted)}

/* ============ Tables (if needed) ============ */
.table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left}

/* ====== Footer styles removed (moved to footer.css) ====== */

/* Back to top */
.backtop{position:fixed;right:14px;bottom:14px;width:44px;height:44px;border-radius:999px;background:#111;color:#fff;display:grid;place-items:center;border:1px solid #000;box-shadow:0 10px 24px rgba(0,0,0,.15);cursor:pointer}
.backtop.hidden{display:none}

/* ========= FINAL MAROON HEADER FIX ========= */

/* Header background + text */
.site-header{
  background: var(--brand) !important;   /* maroon */
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
  backdrop-filter: none !important;
}

/* No white boxes behind icons */
.site-header .icon-btn,
.site-header .icon-btn.cart{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.site-header .icon-btn svg,
.site-header .icon-btn .bag{ stroke:#fff !important; fill:none; }

/* Currency on dark header */
.site-header #currency{
  background: transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.30) !important;
}
.site-header #currency option{ color:#111; }

/* Mobile menu must be maroon */
@media (max-width:960px){
  .site-header .primary-nav{
    position: fixed !important;
    inset: 64px 0 0 0 !important;
    background: var(--brand) !important;
    color:#fff !important;
    border-bottom: 1px solid rgba(255,255,255,.15) !important;
    padding: 12px var(--space) !important;
    flex-direction: column !important;
    gap: 6px !important;
    z-index: 1100 !important;
  }
  .site-header.open .primary-nav{ display:flex !important; }
  .site-header .primary-nav a{
    color:#fff !important;
    background: transparent !important;
  }
  /* hamburger button no white */
  .site-header .hamburger{
    background: transparent !important;
    border: 0 !important;
    color:#fff !important;
  }
}

/* Category quick bar in header theme */
.site-header .catbar{
  background: var(--brand) !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.site-header .cat-pill{
  background: rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  color:#fff !important;
}
.site-header .cat-pill.active{
  background:#fff !important;
  color: var(--brand) !important;
  border-color:#fff !important;
}

/* === Mobile overflow hard fixes (put at very end of nav.css) === */
html, body { max-width:100%; overflow-x:hidden; }
* { box-sizing: border-box; }

/* Images/banners never wider than screen */
img, video, canvas, svg { max-width:100%; height:auto; }

/* Common wrappers must not force extra width */
.container { width:100%; max-width:1180px; margin:0 auto; padding:0 var(--space,16px); }
.grid, .row, section, header, footer, .nav-row, .catbar, .cat-scroll { min-width:0; }

/* Avoid 100vw overflow issues on mobile (scrollbar width problem) */
[class*="fullwidth"], .search-drawer, .search-drawer .sd-panel,
.site-header, .nav-row, .catbar { max-width:100%; }

/* Mobile menu panel should not push page width */
@media (max-width: 959.98px){
  .site-header .primary-nav{
    left:0; right:0; max-width:100%;
    overflow-x:hidden;
  }
}

/* === FINAL DESKTOP HEADER TEXT FIX === */
.site-header .primary-nav a{
  color:#fff !important;
  background:transparent !important;
}
.site-header .primary-nav a:hover{
  color:#ffe3b3 !important;
}
.site-header .brand .wordmark{ color:#fff !important; }

/* === Header currency size tweak (keep cart fully visible) === */
.site-header #currency{
  height: 34px;           /* compact */
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1;
  width: auto;
  min-width: fit-content;
  max-width: 96px;
  border-radius: 999px;
}
.site-header .right{ gap: 8px; }  /* thoda gap kam */

/* even tighter on mobiles */
@media (max-width:960px){
  .site-header #currency{
    height: 32px;
    padding: 6px 8px;
    font-size: 12px;
    max-width: 84px;
  }
  .site-header .icon-btn{ width:40px; height:40px; }
}

/* === Header icon spacing tighten === */
.site-header .right{
  gap: 4px !important;         /* 10px -> 4px */
  flex-wrap: nowrap !important;
}
.site-header #currency{
  margin: 0 !important;
  height: 32px !important;
  padding: 5px 6px !important;
  font-size: 12px !important;
  max-width: 78px !important;  /* thoda aur chhota */
  flex: 0 1 78px !important;   /* allow shrink first */
}
.site-header .icon-btn{
  width: 38px !important;
  height: 38px !important;
}

/* ultra-small phones */
@media (max-width: 360px){
  .site-header .right{ gap: 2px !important; }
  .site-header #currency{ max-width: 72px !important; flex-basis: 72px !important; }
}
