/* Shared public-facing KISARAGI surface. Product media always keeps source color. */
:root {
  color-scheme: light;
  --ink: #17221d;
  --ink-soft: #25352d;
  --paper: #f4f5f2;
  --surface: #ffffff;
  --line: #d8ded9;
  --muted: #66716b;
  --accent: #166547;
  --accent-hover: #0f4b34;
  --warm: #d7c584;
  --danger: #983e34;
}

body[data-catalog-page="shop"],
body[data-catalog-page="checkout"] {
  background: var(--paper);
  color: var(--ink);
}

body.age-gate-locked {
  overflow: hidden;
}

.site-header {
  border-color: var(--line);
  background: rgb(255 255 255 / .97);
}

.site-header .brand,
footer .brand {
  min-height: 44px;
}

.brand-copy {
  display: grid;
  line-height: 1.05;
}

.brand-copy small {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .11em;
}

.brand-mark {
  overflow: hidden;
  border: 1px solid var(--accent);
  background: var(--surface);
}

.brand-mark img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: none;
}

.site-header nav a,
.text-link,
footer > a:not(.brand),
.back-link {
  color: var(--muted);
}

.site-header nav a:hover,
.text-link:hover,
footer > a:not(.brand):hover,
.back-link:hover {
  color: var(--accent);
}

.cart-toggle,
.icon-button {
  border-color: var(--line);
  color: var(--ink);
}

.cart-toggle b {
  background: var(--accent);
  color: #ffffff;
}

.mode-switch-group,
.mode-switch-btn,
.search input,
.filter-select select,
.filter-reset,
.filter-options button,
.button.quiet {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.mode-switch-btn[aria-pressed="true"],
.filter-options button[aria-pressed="true"],
.button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.button.primary:hover {
  background: var(--accent-hover);
}

.hero h1,
.section-heading h2,
.age-card h1,
.review-card h2,
.intro h1 {
  font-family: "Noto Serif JP", Georgia, "Yu Mincho", serif;
  letter-spacing: 0;
}

.hero-image,
.hero-image figcaption,
.product-image-link,
.product-empty {
  background: #f4f5f2;
}

.hero-image figcaption,
.product-empty {
  color: #57534b;
}

.hero-image img,
.product-image-link .product-image,
.product-image {
  filter: none !important;
  mix-blend-mode: normal !important;
}

.notice {
  border-color: #c9d7cd;
  background: #eef4ef;
  color: var(--muted);
}

.catalog,
.product-card,
.age-card,
.review-card,
.cart-panel,
.kisaragi-popover-card {
  background: var(--surface);
  color: var(--ink);
}

.product-grid {
  border-color: var(--line);
  background: var(--line);
}

.product-detail-link,
.add-button,
.citation-button {
  border-color: var(--line);
  color: var(--ink);
}

.product-detail-link:hover,
.add-button:hover,
.citation-button:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.product-meta,
.price,
.overline,
.eyebrow {
  color: var(--accent);
}

.quantity-control button {
  background: var(--surface);
  color: var(--ink);
}

.quantity-control button:hover {
  background: #e8f0ea;
}

footer {
  border-top: 1px solid #26372f;
  background: #111815;
  color: #c7d0cb;
}

footer .brand-mark {
  border-color: var(--warm);
  background: var(--warm);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .65rem 1rem;
}

.footer-links a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: .76rem;
  text-decoration: none;
}

.footer-links a:hover { color: var(--accent); }

.age-gate,
.review-modal,
.kisaragi-popover-backdrop {
  background: rgb(0 0 0 / .82);
}

@media (max-width: 760px) {
  .site-header {
    min-height: 64px;
    flex-wrap: nowrap;
    gap: .65rem;
    padding: .55rem 1rem;
  }

  .site-header nav,
  .site-header .mode-switch-group {
    display: none !important;
  }

  .site-header .cart-toggle {
    order: initial;
    margin-left: auto;
  }

  .brand-copy small {
    display: none;
  }

  .mobile-dock {
    border-color: rgb(255 255 255 / .14);
    background: rgb(20 20 20 / .96);
  }

  .mobile-dock a,
  .mobile-dock button {
    color: var(--muted);
  }

  .mobile-dock button[aria-pressed="true"] {
    background: var(--accent);
    color: #ffffff;
  }

  #catalog,
  #guide {
    scroll-margin-top: 72px;
  }

  .footer-links { justify-content: flex-start; }
}