* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { font-family: "Times New Roman", Times, serif; margin: 0; padding: 0; }

.dark-theme {
  --page-bg: #000;
  --text: #fff;
  --rule: #555;
  --panel: #15130f;
  --button: #070605;
  --button-hover: #161310;
  --footer: #090909;
}

.light-theme {
  --page-bg: #fff;
  --text: #000;
  --rule: #aaa;
  --panel: #f0f0f0;
  --button: #fff;
  --button-hover: #eee;
  --footer: #f7f7f7;
}

.site-page { min-height: 100vh; padding: 1px 0; background: var(--page-bg); color: var(--text); }
a { color: var(--text); text-decoration: underline; }
.container { width: 900px; max-width: 95%; margin: 20px auto; }
.page-title { color: var(--text); font-size: 32px; font-weight: bold; text-align: center; margin: 10px 0 8px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0 0 12px; }
.box { border: 1px solid var(--rule); margin-bottom: 15px; }
.box-header { background: var(--panel); padding: 6px 8px; font-size: 15px; font-weight: bold; }
.box-content { padding: 10px; font-size: 14px; }
.product-images { display: flex; justify-content: center; align-items: center; }
.gallery { width: 600px; max-width: 100%; }
.gallery-container { position: relative; width: 100%; min-height: 1px; }
.product-image { display: block; width: 600px; max-width: 100%; height: auto; cursor: pointer; touch-action: pan-y; user-select: none; }
.carousel-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 7px; font-size: 12px; }
.carousel-count { min-width: 28px; }
.carousel-dots { display: flex; gap: 7px; }
.carousel-dot { width: 10px; height: 10px; padding: 0; border: 1px solid var(--text); border-radius: 50%; background: var(--page-bg); cursor: pointer; }
.carousel-dot.active { background: var(--text); }
.carousel-hint { width: 100%; text-align: center; }
.price-row { margin-top: 10px; }
.buy-button { display: inline-block; margin: 8px 0; padding: 2px 6px; border: 1px solid var(--text); background: var(--button); color: var(--text); text-decoration: underline; font-family: "Times New Roman", Times, serif; font-size: 14px; font-weight: normal; cursor: pointer; }
.buy-button:hover { background: var(--button-hover); }
.button-row { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.page-switch { margin: 0 0 15px; font-size: 14px; }
.footer { border-top: 1px solid var(--rule); padding: 10px 0; font-size: 13px; text-align: center; background: var(--footer); margin-top: 20px; }

@media (max-width: 768px) {
  .gallery { max-width: 420px; }
  .product-image { width: 100%; max-width: 420px; }
}