:root{
  --bg:#0f0f0f;
  --fg:#D6D8DA;
  --muted:#D6D8DA;
  --line:#2a2a2a;
  --card:#161616;
  --pill:#D6D8DA;
  --pillText:#D6D8DA;
  --pillAlt:#222222;
  --radius:16px;
  --shadow: 0 10px 28px rgba(0,0,0,.35);
  --max: 1040px;
  --base:17px;   /* ← add this line */
}
a:link {
  color: #d4a25a;   /* warm brass */
  text-decoration: none;
}

a:visited {
  color: #d4a25a;   /* slightly darker brass */
}

a:hover {
  color: #f0c27a;   /* lighter on hover */
  text-decoration: none;
}

a:active {
  color: #D6D8DA;   /* momentary click feedback */
  }
  
 :root{
  --font-body: Source Sans 3, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-head: Cinzel, Georgia, "Times New Roman", serif;
  }
body{
  margin:0;
  padding:0 18px;
  font-family:var(--font-body);
  font-size:var(--base);
  line-height:1.45;
  color:var(--fg);
  background:var(--bg);
}
h1,h2,.featuredHeader,.sectionHeader,.productName,.subGallery,.filterTitle,.pageTitle,.mainGallery,.breadcrumb,.pills,.btn,.email{ font-family: var(--font-head); }

/* Force body font everywhere (explicit, no guessing) */
body,
a,
input,
select,
textarea,
.meta,
.desc,
.email,
.navlink{
  font-family: var(--font-body);
}
 /* ---------- PRODUCT GRID ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(220px,1fr));
  gap:18px;
}


/* ---------- SECTION HEADERS ---------- */

.sectionHeader{
  grid-column:1 / -1;

  margin:20px 0 18px;
  padding:0;

  font-size:22px;
  font-weight:500;
  letter-spacing:.5px;

  color:#d4a25a;

  display:flex;
  align-items:center;
}

.sectionHeader::after{
  content:"";
  flex:1;
  height:1px;
  margin-left:14px;
  background:rgba(212,162,90,.4);

}
.featuredHeader{
  grid-column:1 / -1;

  margin:20px 0 -10px;
  padding:6px 18px;

  font-size:22px;
  font-weight:200;
  letter-spacing:.6px;

  text-align:center;
  color:#D6D8DA;

  background:linear-gradient(
    90deg,
    #050505 0%,
    #3a2a17 50%,
    #050505 100%
  );

  border-radius:100px;

  box-shadow:
    0 0 0 1px #000000,
    0 0 5px rgba(212,162,90,.35),
    inset 0 0 5px rgba(212,162,90,.12);
}
.productName{
  grid-column:1 / -1;
  margin:0px 0 14px;
  color:#d4a25a;
  font-weight:400;
  font-size:20px;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
}

/* horizontal rule */
.productName::after{
  content:"";
  flex:1;
  height:.5px;
  background:#d4a25a;
  margin-left:14px;
  margin-right:14px;
  opacity:.35;     /* soft line */
}

/* index center nav*/
.sectionHeader::after{
  content:"";
  flex:1;
  height:1px;
  margin-left:14px;
  background:rgba(212,162,90,.35);  /* soft brass divider */
}
.indexCenter{
  grid-column:1 / -1;
  width:100%;
  box-sizing:border-box;

  margin:8px 0 4px;
  padding:12px 18px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:linear-gradient(
  to right,
  rgba(212,162,90,.00),
  rgba(212,162,90,.28),
  rgba(212,162,90,.00)
);
  
  border-radius:6px;

  color:#D6D8DA;
  font-weight:400;
  font-size:18px;
  letter-spacing:.5px;
/* product page header bar */
}
.productCenter{
  width:100%;
  box-sizing:border-box;

  margin:0px 0 0px;
  padding:12px 18px;

  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;

  background:linear-gradient(
    to right,
    rgba(212,162,90,.00),
    rgba(212,162,90,.18),
    rgba(212,162,90,.00)
  );

  border-radius:6px;
}

/* left / center / right alignment */
.productCenter .brand{ justify-self:start; }
.productCenter .navGroup{ justify-self:center; display:flex; gap:14px; }
.productCenter .email{ justify-self:right; }

.email{
  color:#D6D8DA;
  font-weight:400;
  font-size:18px;
  letter-spacing:.5px;
  margin-left:auto;
  justify-self:right;
}
.mainGallery{
  grid-column:1 / -1;
  text-align:center;
  margin:18px 0 10px;

  color:#f0c27a;
  font-size:28px;
  letter-spacing:.9px;

  text-shadow:
    0 0 6px rgba(224,179,111,.45),
    0 0 16px rgba(224,179,111,.30),
    0 0 36px rgba(224,179,111,.18);
}
.subGallery{
  text-align:center;
  margin:0px 0 25px;

  color:#D6D8DA;
  font-size:28x;
  letter-spacing:.9px;

  text-shadow:
    0 0 6px rgba(224,179,111,.45),
    0 0 16px rgba(224,179,111,.30),
    0 0 36px rgba(224,179,111,.18);
}

/* ---------- CARD IMAGE CONSISTENCY ---------- */

.card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}


/* ---------- RESPONSIVE BREAKPOINTS ---------- */

@media (max-width:1100px){
  .grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:800px){
  .grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:500px){
  .grid{
    grid-template-columns:1fr;
  }
}
.siteTitle{
  width: 600px;      /* not max-width */
  max-width: 100%;   /* don’t overflow on mobile */
  height: auto;
  display: block;
  align-items: center;   /* center it */
}
.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0px;
  align-items: center;   /* this centers them */
}
.name {
  color: #f0c27a;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.brandLogo {
  height: auto;
  width: 200px;
  display: block;
}
input[type="search"], select{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  font-size:14px;
  min-width:220px;
  background:var(--card);
}
/* smooth interaction */
/* hover */
input[type="search"]:hover, select:hover{
  border-color: rgba(212,162,90,.85);  /* brass */
  background-color: rgba(255,255,255,.02);
}
*{box-sizing:border-box}
.wrap{
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}
.topbar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
  padding-right:18px;
}
.brand img{height:auto;width:800;display:block}
.brand .name{font-weight:700}
.brand .tag{color:var(--muted);font-size:14px}

.hero {
  padding: 20px 0 10px;
}

.heroGrid {
  display: grid;
  grid-template-columns: 1.5fr .5fr;
  gap: 16px;
  align-items: stretch;
}

.heroCard {
  overflow: hidden;
  position: relative;
}
.heroCard::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.25) 100%);
  pointer-events:none;
  border:1px solid rgba(255,255,255,.06);
}
.heroImg {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
  background:var(--card);

  filter: contrast(1.05) saturate(1.06);
}
.heroText{
  padding: 0px 5px 0px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  background:linear-gradient(
    to right,
    rgba(212,162,90,.00),
    rgba(212,162,90,.18),
    rgba(212,162,90,.00)
  );
}
/* Hero Logo */
.heroLogo {
  width: 35%;
  max-width: 260px;
  height: auto;
  display: block;
  margin: 0 auto 8px auto;
}
/* Mobile adjustment */
@media (max-width: 860px) {
  .heroGrid {
    grid-template-columns: 1fr;
  }

  .heroLogo {
    width: 60%;
    max-width: 320px;
  }

  .heroImg {
    height: 280px;
  }
}main{padding:8px 0 36px}
.sectionTitle{display:flex;align-items:baseline;gap:10px;margin:18px 0 10px}
.sectionTitle h2{margin:0;font-size:18px}
.sectionTitle .count{color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column}
.cardImg{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#222222}
.cardBody{padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.title{font-weight:700}
.meta{color:var(--muted);font-size:13px;display:flex;gap:10px;flex-wrap:wrap}
.price{font-weight:700}
.pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line);background:var(--card)}
.pill.sold{background:var(--pill);color:var(--pillText);border-color:var(--pill)}
.pill.progress{background:var(--pillAlt)}
.btnRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.btn{display:inline-block;text-decoration:none;padding:9px 10px;border-radius:12px;border:1px solid var(--fg);font-size:14px}
.btn.secondary{border-color:var(--line)}
footer{
  border-top:1px solid #D6D8DA;
  margin-top:60px;
  padding-top:20px;
}/* product page */
.breadcrumb
{
	color:var(--muted);
	font-size:13px;
	padding:20px 0 0;
	margin-bottom:18px;
}
.noDesc{
  font-style:italic;
  opacity:.75;
  margin-top:12px;
}
.productGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:12px}
.mainImg{
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  background:var(--card);
  display:block;
}
.filterTitle{
  font-size:18px;
  letter-spacing:1px;
  color:#d4a25a;
  margin-bottom:10px;
}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;padding:12px;border-top:1px solid var(--line)}
.thumb{width:84px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--line);cursor:pointer;background:#222222}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 16px;box-shadow:var(--shadow);background:var(--card)}
.panel h1{font-size:22px;margin:0 0 8px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;margin:10px 0 12px;color:var(--muted);font-size:14px}
.kv div:nth-child(odd){color:#D6D8DA}
.desc{margin-top:14px}
.desc h2{margin:16px 0 8px;font-size:16px}
.desc ul{margin:8px 0 10px;padding-left:20px;color:var(--muted)}
.desc p{color:var(--muted)}
@media (max-width: 860px){
  .heroGrid{grid-template-columns:1fr}
  .productGrid{grid-template-columns:1fr}
  .mainImg{height:320px}
  }
  
  /* ---------- MAIN NAV ---------- */
  .navGroup{
  display:flex;
  gap:12px;
  align-items:center;
  }
 nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-self:center;
}
 
.navlink{
	padding:8px 10px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:14px;background:var(--card)
	}
/* ---------- CARD HOVER LIFT ---------- */

.card{
  transition: transform .22s ease, box-shadow .22s ease;
}

.card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 14px 32px rgba(0,0,0,.5);
}
/* ---------- GLOBAL TYPE SCALE ---------- */

.navlink{ font-size:calc(var(--base) - 1px); }

.meta{ font-size:calc(var(--base) - 2px); }

.kv{ font-size:calc(var(--base) - 1px); }

.pill{ font-size:calc(var(--base) - 3px); }

.btn{ font-size:calc(var(--base) - 1px); }

.brand .tag{ font-size:calc(var(--base) - 1px); }

.footer{ font-size:calc(var(--base) - 2px); }

/* ---------- ABOUT PAGE HERO ---------- */

.aboutHero{
  grid-template-columns:1fr;
}

.aboutHero .heroImg{
  height:380px;
}



/* ---------- ABOUT CONTENT GRID ---------- */

.aboutGrid{
  display:grid;
  grid-template-columns: 2fr 0.9fr;
  gap:32px;
  margin-top:28px;
}

.aboutText{
  line-height:1.6;
}

.aboutText h1{
  margin-top:0;
  margin-bottom:14px;
  color:#d4a25a;
}

.aboutImages{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.aboutImages img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}



/* ---------- MOBILE ---------- */

@media (max-width:860px){

  .aboutGrid{
    grid-template-columns:1fr;
  }

  .aboutImages{
    flex-direction:row;
    flex-wrap:wrap;
  }

  .aboutImages img{
    width:48%;
  }
}

/* ---------- PANORAMIC ---------- */
.panoWrap{
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 18px 0;
  border-radius:10px;
  overflow:hidden;
}

.aboutPano{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  cursor: grab;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.aboutPano:active{
  cursor: grabbing;
}

#panorama{
  display: none;
  width: 100%;
  max-width: 100%;
  height: 420px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

#closePano{
  display: none;
  margin-top: 10px;
  color: #d4a25a;
}

.panoOverlay{
  position: absolute;
  top: 20px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 28px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  color: #d4a25a;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.panoIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(212,162,90,.55);
  font-size: 18px;
  color: #d4a25a;
}

.panoLabel{
  white-space: nowrap;
}

.panoBtn{
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  font:inherit;
  color:#d4a25a;
}

.panoOverlay,
.panoOverlay .panoLabel{
  color:#d4a25a;
}

button.panoBtn{
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 10px;
  font: inherit;
  color: #d4a25a !important;
  text-decoration: none;
  box-shadow: none;
}

button.panoBtn.navlink{
  color: #d4a25a !important;
}

/* ---------- BUTTONS: links + form submit ---------- */
.btn,
button.btn,
input[type="submit"].btn{
  display:inline-block;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--fg);
  font-size:calc(var(--base) - 1px);
  font-family:var(--font-head);
  text-decoration:none;
  background:transparent;
  color:#d4a25a;
  cursor:pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
  appearance:none;
  -webkit-appearance:none;
}

.btn:hover,
button.btn:hover,
input[type="submit"].btn:hover{
  color:#f0c27a;
  border-color:#f0c27a;
  background:rgba(212,162,90,.08);
  box-shadow:0 0 10px rgba(212,162,90,.18);
}

.btn:active,
button.btn:active,
input[type="submit"].btn:active{
  color:#D6D8DA;
  border-color:#D6D8DA;
}

.btn.secondary{
  border-color:var(--line);
}