/* ---------- Static Smokey Red-Room Theme ---------- */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg1:#250712;      /* deep wine */
  --bg2:#110208;      /* near-black burgundy */
  --gold:#FFD700;
  --gold-soft:#fff5c3;
}
html{scroll-behavior:smooth}
body{
  font-family:'Roboto',sans-serif; color:var(--gold); line-height:1.6;
  background:
    url('images/smoke-overlay.png') center/cover repeat,
    url('images/velvet-texture.jpg') center/cover fixed,
    linear-gradient(180deg, var(--bg1), var(--bg2));
  background-blend-mode: overlay, normal;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);}

h1,h2,h3{font-family:'Playfair Display',serif;color:var(--gold)}
p{color:#f7f1e3}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-soft)}
.container{max-width:1200px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

.btn,.btn-primary{background:var(--gold);color:#16030a;padding:.65rem 1.2rem;border:none;border-radius:6px;
  font-weight:700;cursor:pointer;transition:.25s;text-decoration:none;display:inline-block}
.btn:hover,.btn-primary:hover{background:var(--gold-soft)}

/* ---------- Luxury Header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.68);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,215,0,.22)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:14px;white-space:nowrap}
.brand-mark{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,215,0,.35);display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 30%, #6f0f24, #0a0104)}
.brand-mark:after{content:"AB";font-family:'Playfair Display',serif;font-weight:700;letter-spacing:1px}
.brand-name{font-family:'Playfair Display',serif;font-weight:700;letter-spacing:1.6px;font-size:1.4rem;line-height:1}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-weight:600;letter-spacing:.4px}
.menu-toggle{display:none;appearance:none;background:transparent;border:1px solid rgba(255,215,0,.35);
  color:var(--gold);padding:.45rem .6rem;border-radius:6px}
.icon-burger{width:20px;height:2px;background:var(--gold);position:relative;border-radius:2px;display:block}
.icon-burger:before,.icon-burger:after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--gold);border-radius:2px}
.icon-burger:before{top:-6px}.icon-burger:after{bottom:-6px}
@media (max-width:860px){
  .nav{display:none;position:absolute;top:74px;left:0;right:0;background:rgba(0,0,0,.78);padding:14px 20px;border-bottom:1px solid rgba(255,215,0,.18)}
  .nav.open{display:flex;flex-direction:column;gap:14px}
  .menu-toggle{display:block}
  .brand-name{font-size:1.25rem}
}

/* ---------- Hero ---------- */
.hero{display:flex;align-items:center;justify-content:center;height:56vh;text-align:center;position:relative}
.hero h1{font-size:2.7rem;margin-bottom:.6rem}
.hero p{font-size:1.1rem;color:var(--gold-soft)}

/* ---------- Sections & Cards ---------- */
.section{padding:3rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.card{background:rgba(0,0,0,.32);border:1px solid rgba(255,215,0,.18);border-radius:12px;overflow:hidden;transition:.25s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.card img{width:100%;height:220px;object-fit:cover;background:#16030a}
.card .pad{padding:1rem}

/* ---------- Product pages ---------- */
.product{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem}
@media(max-width:900px){.product{grid-template-columns:1fr}}
.gallery{background:rgba(0,0,0,.30);border:1px solid rgba(255,215,0,.18);border-radius:12px;padding:1rem}
.gallery .main{width:100%;height:520px;object-fit:cover;background:#16030a;border-radius:8px}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.75rem}
.thumbs img{width:100%;height:80px;object-fit:cover;background:#16030a;border-radius:6px;cursor:pointer;opacity:.9;transition:.2s}
.thumbs img:hover{opacity:1}

/* ---------- Footer ---------- */
footer{text-align:center;padding:2rem;background:rgba(0,0,0,.6);border-top:1px solid rgba(255,215,0,.22);margin-top:2rem}



/* ---------- Metallic Gold / Brass Text ---------- */
/* Utility class you can apply anywhere: .metallic or .brass */
.metallic, .brand-name, .nav a, h1, h2, h3 {
  color: transparent;
  background-image:
    radial-gradient(100% 180% at 10% 10%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(180deg, #fff6cc 0%, #f3da64 18%, #d4af37 45%, #b58b1a 60%, #f5e18a 78%, #9c7c1a 90%, #6e5410 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 2px 3px rgba(0,0,0,.35);
}
.brass {
  color: transparent;
  background-image:
    radial-gradient(100% 180% at 10% 10%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(180deg, #ffe9c3 0%, #e0b467 22%, #b88a3b 46%, #8f6d2a 60%, #e9c78e 78%, #6d5321 92%, #3f2f12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 1px 0 rgba(255,255,255,.2),
    0 2px 3px rgba(0,0,0,.4);
}
/* Make sure nav links behave well with clipped backgrounds */
.nav a { display:inline-block; }
.brand-name { letter-spacing: 2px; }
/* Optional subtle hover sheen */
.nav a:hover, h1:hover, h2:hover, h3:hover, .brand-name:hover {
  filter: brightness(1.05);
}



/* ---------- Solid Metallic Buttons (Gold/Brass) ---------- */
.btn, .btn-primary {
  position: relative;
  color: #16030a; /* deep burgundy text for contrast */
  border: 1px solid rgba(212,175,55,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 18px rgba(0,0,0,.25);
  background-image:
    linear-gradient(180deg,#fff6cc 0%,#f3da64 18%,#d4af37 45%,#b58b1a 60%,#f5e18a 78%,#9c7c1a 90%,#6e5410 100%);
  transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
}

.btn:hover, .btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 10px 26px rgba(0,0,0,.35);
}

/* Subtle diagonal sheen that sweeps on hover */
.btn::after, .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.25) 45%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}
.btn:hover::after, .btn-primary:hover::after {
  transform: translateX(120%);
}

/* Button text emboss */
.btn, .btn-primary {
  text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 2px 3px rgba(0,0,0,.35);
}

/* Size tweaks */
.btn, .btn-primary { padding: .7rem 1.3rem; border-radius: 8px; font-weight: 800; letter-spacing: .4px; }



.brand-mark{width:40px;height:40px}
.brand-mark:after{font-size: 0.95rem}



/* ---------- Labeled Option Fields ---------- */
.fieldset{display:grid;gap:.75rem;margin:1rem 0 1.25rem}
.field{display:grid;gap:.35rem}
.field label{font-weight:700;letter-spacing:.4px}
select, input[type="text"]{
  padding:.6rem .8rem;
  border:1px solid rgba(255,215,0,.30);
  border-radius:8px;
  background:rgba(0,0,0,.28);
  color:#FFD700;
}
select:focus{outline:2px solid rgba(255,215,0,.45);}
.help{font-size:.9rem;opacity:.85;color:#fff5c3}
/* space buttons away from fields */
.product .btn{margin-top:.5rem}



/* ---------- Field color & select styling refresh ---------- */
.field label{color:#ffffff}
select, input[type="text"]{
  color:#ffffff;
  background: rgba(16,2,8,.6);
  border:1px solid rgba(255,215,0,.55);
}

/* Custom gold arrow for selects */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path fill='%23FFD700' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 2.4rem;
}
select:focus{outline:2px solid rgba(255,215,0,.55);}
.help{color:#ffffffcc}



/* ---------- Static metallic buttons (no animation) ---------- */
.btn, .btn-primary {
  position: relative;
  color: #16030a;
  border: 1px solid rgba(212,175,55,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.25);
  background-image: linear-gradient(180deg,#fff6cc 0%,#f3da64 18%,#d4af37 45%,#b58b1a 60%,#f5e18a 78%,#9c7c1a 90%,#6e5410 100%);
  transition: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 2px 3px rgba(0,0,0,.35);
}
.btn::after, .btn-primary::after { content: none !important; }
.btn:hover, .btn-primary:hover {
  transform: none; filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.25);
}


/* --- Placeholder image blocks for tiles/listings --- */
.ph-img{display:flex;align-items:center;justify-content:center;width:100%;height:220px;background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,215,0,.18);font-weight:500;letter-spacing:.5px}
.tile-kicker{display:inline-block;font-size:.8rem;opacity:.8;margin-bottom:.25rem}
.breadcrumb{margin-bottom:1rem}
.breadcrumb a{color:var(--gold-soft);text-decoration:none;border-bottom:1px dotted rgba(255,215,0,.5)}
.breadcrumb a:hover{opacity:.85}

/* === Hero Redesign === */
.hero-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 7rem 1.5rem 5rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-family: 'Playfair Display', serif;
  margin: 0;
  line-height: 1.2;
}

.hero-title .hero-control {
  display: block;
  margin-top: 0.3rem;
}

.hero-subtitle {
  font-size: 1.05rem;
  max-width: 640px;
  margin: 1rem auto 0;
  color: var(--gold-soft);
  line-height: 1.6;
}


/* === Swatch Controls (2025-08-20) === */
.field .swatches{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.swatch{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,215,0,.55);cursor:pointer;position:relative}
.swatch:hover{box-shadow:0 0 0 3px rgba(255,215,0,.15)}
.swatch[data-selected="true"]{outline:2px solid var(--gold)}
.swatch[title]{}
/* Dual-tone/metallic effects */
.swatch.gold{background: linear-gradient(180deg,#fff5c3 0%,#ffd700 38%,#caa200 62%,#7a5e00 100%);}
.swatch.black{background:#000}
.swatch.brown{background:#6b3e2e}
.swatch.burgundy{background:#5a1323}
/* Stitching color approximations */
.swatch.red{background:#b00020}
.swatch.orange{background:#ff6a00}
.swatch.liquid-gold{background:linear-gradient(180deg,#fff5c3,#ffd700,#caa200,#7a5e00)}
.swatch.yellow{background:#ffd100}
.swatch.lime{background:#a8e10c}
.swatch.venom{background:#0dbf00}
.swatch.glacial{background:#7cc8ff}
.swatch.tidal{background:#1e6fff}
.swatch.plum{background:#69217a}
.swatch.kissed{background:#7b1230}
.swatch.rose{background:#b21c44}
.swatch.pink{background:#ff5ea2}
.swatch.white{background:#ffffff}

/* === Big Brass CTA === */
.button, .btn{font-weight:700}
.btn-brass-lg{
  display:inline-block;
  width:100%;
  max-width: 420px;
  padding:1rem 1.25rem;
  border-radius:12px;
  border:1px solid rgba(255,215,0,.55);
  background: linear-gradient(180deg,#fff5c3 0%, #ffd700 35%, #caa200 65%, #7a5e00 100%);
  color:#2b1400;
  text-align:center;
  font-size:1.15rem;
  letter-spacing:.3px;
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 #fff5c3;
}
.btn-brass-lg:hover{filter:saturate(1.03) brightness(1.03)}

/* === Hero boundary & height tweaks === */
.hero-main{
  padding: clamp(0.75rem, 2.5vw, 1.25rem) 0.75rem clamp(0.6rem, 2vw, 1rem);
  border-top: 0;
  border-bottom: 0;
}
/* Reduce spacing between hero and next section */
.hero-main + .section{padding-top:.5rem;margin-top:0}


/* === Hardware swatch styles (2025-08-20) === */
.swatch.brass{background:linear-gradient(180deg,#ffe9a6 0%, #e8c857 35%, #b99017 65%, #7a5e00 100%)}
.swatch.gold-plate{background:linear-gradient(180deg,#fff5c3 0%, #ffd700 35%, #caa200 65%, #7a5e00 100%)}
.swatch.nickel{background:linear-gradient(180deg,#f2f2f2 0%,#cfcfcf 50%,#a8a8a8 100%)}
.swatch.gunmetal{background:linear-gradient(180deg,#4b4f54 0%,#34383c 60%,#1e2124 100%)}
.swatch.matte-black{background:#000}





@media(max-width:480px){}


/* === Field titles with inline descriptions (dimmed gold) === */
.field-head{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;margin: .15rem 0 .25rem}
.field-head label{font-weight:700;color:var(--gold)}
.field-head .field-desc{font-size:.95rem;color:rgba(255,215,0,.78);opacity:.95;white-space:nowrap}
@media(max-width:520px){.field-head{flex-wrap:wrap}.field-head .field-desc{white-space:normal}}
/* Reduce extra spacing when we no longer show <small> under selects */
.field .swatches{margin-top:.4rem}

/* === Hero tightening (2025-08-20) === */
.hero-title{
  font-size: clamp(3.2rem, 7vw, 5rem); margin-bottom:.2rem; }
.hero-subtitle{ margin-top:.2rem; }
/* Pull the next section closer */
.hero-main + .section{padding-top:.5rem;margin-top:0}

/* === Category tile image === */
.tile-img{display:block;width:100%;height:220px;object-fit:cover;border-bottom:1px solid rgba(255,215,0,.18);background:#16030a}
@media(min-width:900px){.tile-img{height:260px}}


/* === Force hero compression (high specificity) === */
body .hero.hero-main{
  margin: 0 !important;
  padding: 0.6rem 0.75rem 0.5rem !important; /* very tight */
}
body .hero.hero-main .hero-title{
  font-size: clamp(3.2rem, 7vw, 5rem); margin: 0 0 .15rem 0 !important; }
body .hero.hero-main .hero-subtitle{ margin: .15rem 0 0 0 !important; }
body .hero.hero-main + .section{ padding-top: .35rem !important; margin-top: 0 !important; }
/* Also neutralize any default .hero margin/padding that may bleed in */
.hero{ margin: 0.5rem 0 0.35rem 0; padding: 0.5rem; }


/* === Hero interline spacing increase (subtitle gap) === */
body .hero.hero-main .hero-title{
  font-size: clamp(3.2rem, 7vw, 5rem); margin-bottom: 0 !important; }
body .hero.hero-main .hero-subtitle{ margin-top: 1.75em !important; } /* ~175% of subtitle font-size */


/* === Hero headline size & spacing tweaks === */
body .hero.hero-main .hero-title {
    font-size: 2.8rem !important; /* bump up ~20% globally */
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}
body .hero.hero-main .hero-subtitle {
    margin-top: 2.25em !important; /* ~225% subtitle spacing */
}

/* Responsive tweak: make sure mobile looks good */
@media (max-width: 768px) {
    body .hero.hero-main .hero-title {
        font-size: 2.2rem !important; /* slightly smaller on mobile but still bigger than before */
    }
}

/* === Hero interline spacing increase (subtitle gap) v2 === */
body .hero.hero-main .hero-subtitle{ margin-top: 2.1em !important; }


/* === Hero headline stacked + larger === */
.hero-title {
  text-align: center !important;
  font-size: clamp(4rem, 8vw, 6rem) !important;
  line-height: 1.1 !important;
}
.hero-title span {
  display: block;
}


/* === Centered Section Titles === */
.section-title {
  text-align: center !important;
  font-size: 2rem !important;
  margin-bottom: 1.2em;
  color: #d4af37; /* keep metallic gold look */
}
.main-title {
  font-size: 2.6rem !important; /* Bigger for Shop by Category */
}


/* === Center section headers & tweak sizes (2025-08-20) === */
.section h1, .section h2 { text-align: center; }
.section-title-main { font-size: clamp(2rem, 3.6vw, 2.6rem); }
/* Hide tiny 'Category' kicker labels under tiles */
.tile-kicker { display: none !important; }


/* === Match section headers to hero title metallic gold style (2025-08-20) === */
.section h1, .section h2 {
    background: linear-gradient(135deg, #d4af37, #f5e79e, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    font-family: 'Cinzel', serif; /* Assuming hero uses Cinzel or similar */
    font-weight: 700;
    letter-spacing: 2px;
    animation: shimmer 6s linear infinite;
    text-align: center;
}

@keyframes shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}


/* Center-align About and Contact section text */
#about p, #about h2,
#contact p, #contact h2 {
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
}