/* Header Logo Image Styling */
.logo-img {
  height: 48px;               /* Adjust for your header size */
  width: auto;
  border-radius: 12px;        /* Optional rounding */
  box-shadow: 0 0 8px rgba(0,0,0,0.6); /* Subtle depth effect */
  object-fit: contain;
    background-color: #3a0808;  /* Refined Garnet header tone */
  padding: 4px;               /* Keeps spacing inside dark headers */
}

/* Site core variables and layout (moved from inline styles in index.html) */
:root{
  /* Dark Mode Palette */
  --red-900: #d41d2a;   /* brighter red for visibility on dark */
  --red-950: #8b1219;   /* darker red for accents */
  --ink:     #e8e8e8;   /* light text for dark backgrounds */
  --paper:   #0f0f0f;   /* very dark page background */
  --note:    #1a1414;   /* dark red-tinted note background */
  --blue:    #3d8fff;   /* lighter blue for dark mode contrast */
  --ring:    rgba(61,143,255,0.15);
  --shadow:  0 10px 30px rgba(0,0,0,0.5);
  --r:       14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.55;
  font-weight:700; /* bold by default as requested */
  font-size:16px; /* improve mobile readability */
}

/* Layout */
.container{max-width:1120px; margin:auto; padding:22px}
header{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border-bottom:1px solid rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:40px; height:40px; border-radius:14px;
  background:radial-gradient(72% 72% at 30% 30%, #bf2028 0%, var(--red-900) 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.12), inset 0 0 8px rgba(255,255,255,.06);
}
.title{font-family:Cinzel, serif; letter-spacing:.6px; font-size:22px; color:var(--ink)}

nav{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; min-height:44px; border-radius:12px;
  border:2px solid transparent;              /* filled CTA style */
  background:linear-gradient(180deg,var(--blue), #2b6fcf);
  color:#fff; text-decoration:none; box-shadow:var(--shadow);
  transition: transform .05s ease, box-shadow .12s ease, filter .12s ease;
  font-weight:800;
}
.btn:hover{box-shadow:0 0 0 6px rgba(61,143,255,.15), var(--shadow); filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:3px solid rgba(61,143,255,.3); outline-offset:3px}

.hero{padding:54px 0 24px}
h1,h2,h3{margin:0 0 10px; font-family:Cinzel, serif; color:var(--ink)}
h1{font-size:46px}
h2{font-size:32px}
.tag{color:var(--ink); opacity:.85}

/* Red bar headings for sections */
.redbar{
  display:inline-block;
  background:linear-gradient(180deg,var(--red-900), var(--red-950));
  color:#fff; padding:10px 16px; border-radius:12px;
  border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow)
}

/* Cards + grid */
.section{margin:26px 0}
.card{
  background:#1a1a1a; border:1px solid #333;
  border-radius:var(--r); padding:22px; box-shadow:var(--shadow)
}
.grid{display:grid; gap:18px}
@media(min-width:920px){ .grid.cols-2{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1100px){ .grid.cols-3{ grid-template-columns:repeat(3,1fr) } }

/* Model viewer frame */
model-viewer{width:100%; height:320px; border-radius:14px;
  background:#1a1a1a; border:1px solid #333; box-shadow: inset 0 0 18px rgba(0,0,0,.3)}

/* Notes callout */
.note{
  margin-top:12px; background:var(--note);
  border-left:6px solid var(--blue);
  padding:12px 14px; border-radius:12px; color:var(--ink); font-weight:700;
}

/* Footer */
footer{margin-top:40px; background:var(--red-950); border-top:1px solid rgba(0,0,0,.6)}
.foot{max-width:1120px; margin:auto; padding:18px 22px; color:#fff; display:flex; justify-content:space-between; flex-wrap:wrap}
footer .foot span:first-child {
  font-size:1rem;
}
footer .foot span:last-child {
  font-size:.95rem;
}

/* Links on dark backgrounds */
a.text{color:#7db3ff; text-underline-offset:3px}
a{color:var(--blue)}

/* small helpers used by product pages */
.product-gallery{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.product-gallery{grid-template-columns:2fr 1fr}}
.thumbs{display:flex;flex-direction:column;gap:8px}
.specs{background:#1a1a1a;padding:18px;border-radius:14px;border:1px solid #333;box-shadow:var(--shadow)}


/* Scrollable image gallery container */
.gallery-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Horizontal scroll strip */
.image-gallery {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-behavior: smooth;
  padding: 10px 0;
  scrollbar-width: thin;
}

.image-gallery::-webkit-scrollbar {
  height: 8px;
}

.image-gallery::-webkit-scrollbar-thumb {
  background-color: #a00;
  border-radius: 4px;
}

/* Individual image cards */
.image-slide {
  flex: 0 0 auto;
  text-align: center;
  background-color: #1a1a1a;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transition: transform 0.3s ease-in-out;
}

.image-slide:hover {
  transform: scale(1.05);
}

.image-slide img {
  max-width: 280px;
  border-radius: 8px;
}

.image-slide p {
  font-size: 0.9em;
  color: var(--ink);
  margin-top: 6px;
}

/* Scroll buttons */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(64, 0, 0, 0.85);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
}

.scroll-btn:hover {
  background-color: #a00;
}

.scroll-btn.left {
  left: 5px;
}

.scroll-btn.right {
  right: 5px;
}