:root {
  --page-bg: #0B0B0C;
  --ink-on-dark: #ECECEC;
  --oxide: #B5673F;
  --link: #6699FF;
  --link-on-white: #1a0dab;
  --admin-green: #2e7d32;

  --onyx-header: #2B2B2E;
  --onyx-header-text: #E8E8EA;
  --onyx-body: #C9C9CD;
  --onyx-body-text: #1A1A1B;

  --border: #3A3A3D;
  --border-light: #555;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink-on-dark);
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 14px;
}
a { color: var(--link); }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--onyx-header); border-bottom: 1px solid var(--border);
  padding: 10px 14px; font-size: 14px;
}
.topbar a { text-decoration: none; color: var(--onyx-header-text); }

/* ---------- home page ---------- */

.logo-wrap { text-align: center; padding: 30px 10px 10px; }
.logo {
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 0.15em;
  font-size: 8vw;
  color: var(--ink-on-dark);
  margin: 0;
}

hr.divider { border: none; border-top: 1px solid var(--border-light); margin: 20px 14px; }

.page-title { text-align: center; font-size: 1.6rem; font-weight: bold; margin: 10px 0; color: var(--ink-on-dark); }

.box {
  border: 1px solid var(--border-light);
  margin: 0 12px 16px;
}
.box-header { padding: 6px 10px; font-weight: bold; font-size: 1rem; }
.box-body { padding: 10px; }

.box.products .box-header { background: var(--onyx-header); color: var(--onyx-header-text); }
.box.products .box-body { background: var(--onyx-body); color: var(--onyx-body-text); }

.box.onyx .box-header { background: var(--onyx-header); color: var(--onyx-header-text); }
.box.onyx .box-body { background: #ffffff; color: #111; }
.box.onyx a { color: var(--link-on-white); }

.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 720px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
.product-link { text-decoration: none; }
.product {
  background: #ffffff;
  border: 1px solid #999;
  padding: 8px;
  text-align: center;
}
.product-img {
  aspect-ratio: 4/5;
  background: #e8e8e8;
  border: 1px solid #ccc;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: #777; margin-bottom: 6px;
}
.product-name { font-weight: bold; font-size: 0.9rem; color: #111; }
.product-price { font-size: 0.85rem; color: #111; }
.sold-out { color: var(--link-on-white); text-decoration: underline; font-size: 0.85rem; }

ul.faq-list { margin: 0; padding-left: 20px; }
ul.faq-list li { margin-bottom: 6px; }
ul.faq-list a { color: var(--link-on-white); }

.qa-block { margin-bottom: 14px; }
.qa-block .q { font-weight: bold; color: #333; margin-bottom: 4px; }

.footer { text-align: center; font-size: 0.8rem; padding: 20px 14px 40px; color: #999; }
.footer a { color: var(--link); }

/* ---------- product page ---------- */

.carousel { background: #f4f1ea; border-bottom: 1px solid var(--border-light); padding: 20px 0 10px; }
.carousel-img {
  height: 320px; margin: 0 20px; background: #e0dccf; border: 1px solid #bbb;
  display: flex; align-items: center; justify-content: center; color: #777; font-size: 0.8rem;
}
.dots { text-align: center; margin-top: 12px; font-size: 1.2rem; color: #999; }
.dots .active { color: #333; }

.pdp-body { background: #ffffff; color: #111; padding: 16px; }

.title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.title-row input { width: 16px; height: 16px; }
.product-name-pdp { font-weight: bold; font-size: 1rem; }
.admin-tag { color: var(--admin-green); font-weight: bold; }
.sku { color: #444; }

.desc { margin-bottom: 6px; }

.spec-list { margin: 0 0 16px; line-height: 1.7; }
.spec-list .row { display: flex; gap: 6px; }
.spec-list .label { min-width: 130px; }

.price { font-weight: bold; font-size: 1.1rem; margin-bottom: 14px; }

.field-wrap { border: 1px solid #999; padding: 8px 10px 10px; margin-bottom: 14px; position: relative; }
.field-label { position: absolute; top: -9px; left: 8px; background: #fff; padding: 0 6px; font-size: 0.75rem; color: #777; }
.field-wrap select { font-family: inherit; font-size: 0.9rem; padding: 4px; }

.add-to-cart { font-family: inherit; font-size: 0.9rem; padding: 8px 18px; margin-bottom: 20px; display: inline-block; }
.add-to-cart[disabled] { color: #999; }

.pdp-footer-links { text-align: center; font-size: 0.85rem; margin-bottom: 14px; }
.pdp-footer-links a { color: var(--link-on-white); }
.pdp-copyright { text-align: center; font-size: 0.75rem; color: #666; margin-bottom: 0; }

.domain-bar { background: #1c1c1e; color: #ccc; text-align: center; padding: 14px; font-size: 0.9rem; margin-top: 16px; }

.logo-img {
  width: clamp(160px, 22vw, 240px);
  height: auto;
  display: block;
  margin: 0 auto;
}