/*
 * Sanary shared layout: header, breadcrumb, footer, brand / product cards.
 * Colours come from per-site themes (data-sl-theme, set by assets/sanary-layout.js
 * from the page's position in assets/sanary-site.js), so each site keeps its own
 * look while sharing one structure.
 */

sanary-header { display: contents; }
sanary-header:not(:defined) { display: block; min-height: 92px; }
sanary-footer { display: block; }
sanary-footer:not(:defined) { padding: 24px; }
sanary-brands, sanary-products { display: block; }
p + sanary-products, p + sanary-brands { margin-top: 36px; }

/* ── themes ───────────────────────────────────────────────────────────── */
[data-sl-theme] {
  --sl-page-bg: #f8faf8;
  --sl-bg: rgba(248, 250, 248, .9);
  --sl-fg: #18201d;
  --sl-muted: #5f6e67;
  --sl-line: rgba(24, 32, 29, .12);
  --sl-accent: #2f6f67;
  --sl-accent-soft: rgba(47, 111, 103, .12);
  --sl-surface: #ffffff;
  --sl-pill-bg: #14211f;
  --sl-pill-fg: #ffffff;
  --sl-footer-bg: #14211f;
  --sl-footer-fg: rgba(248, 250, 248, .92);
  --sl-footer-muted: rgba(248, 250, 248, .62);
  --sl-footer-line: rgba(248, 250, 248, .14);
}
[data-sl-theme="log"] {
  --sl-page-bg: #f7faf9; --sl-bg: rgba(247, 250, 249, .9); --sl-fg: #16211e; --sl-muted: #5b6b65;
  --sl-line: rgba(22, 33, 30, .12); --sl-accent: #3f7f81; --sl-accent-soft: rgba(79, 143, 145, .13);
  --sl-pill-bg: #123348; --sl-footer-bg: #123348;
}
[data-sl-theme="money"] {
  --sl-page-bg: #fbf7f3; --sl-bg: rgba(251, 247, 243, .9); --sl-fg: #493446; --sl-muted: #75696e;
  --sl-line: rgba(73, 52, 70, .14); --sl-accent: #9e5665; --sl-accent-soft: rgba(158, 86, 101, .12);
  --sl-pill-bg: #2f1f2d; --sl-footer-bg: #2f1f2d;
}
[data-sl-theme="beauty"] {
  --sl-page-bg: #fffcfc; --sl-bg: rgba(255, 252, 252, .92); --sl-fg: #493a43; --sl-muted: #6d5a66;
  --sl-line: #eadbe1; --sl-accent: #a63b64; --sl-accent-soft: rgba(166, 59, 100, .1);
  --sl-pill-bg: #a63b64; --sl-footer-bg: #493a43;
}
[data-sl-theme="dev"] {
  --sl-page-bg: #0d0f15; --sl-bg: rgba(13, 15, 21, .86); --sl-fg: #f5f6fb; --sl-muted: #a4a8b7;
  --sl-line: rgba(255, 255, 255, .12); --sl-accent: #8b7cff; --sl-accent-soft: rgba(139, 124, 255, .16);
  --sl-surface: #171a24; --sl-pill-bg: #f5f6fb; --sl-pill-fg: #0d0f15;
  --sl-footer-bg: #0d0f15; --sl-footer-fg: #f5f6fb; --sl-footer-muted: #a4a8b7; --sl-footer-line: rgba(255, 255, 255, .12);
}
[data-sl-theme="point"] {
  --sl-page-bg: #13091f; --sl-bg: rgba(19, 9, 31, .88); --sl-fg: #fff9ec; --sl-muted: #b9abc2;
  --sl-line: rgba(235, 198, 112, .22); --sl-accent: #ebc670; --sl-accent-soft: rgba(235, 198, 112, .14);
  --sl-surface: #241232; --sl-pill-bg: #ebc670; --sl-pill-fg: #13091f;
  --sl-footer-bg: #0d0616; --sl-footer-fg: #fff9ec; --sl-footer-muted: #b9abc2; --sl-footer-line: rgba(235, 198, 112, .2);
}

/* ── header ───────────────────────────────────────────────────────────── */
.sl-header {
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 1px solid transparent;
  background: var(--sl-bg); color: var(--sl-fg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sl-header.is-scrolled { border-color: var(--sl-line); box-shadow: 0 8px 28px rgba(0, 0, 0, .06); }
.sl-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 10px clamp(16px, 5vw, 68px);
}
.sl-header a, .sl-crumbs a, .sl-footer a, .sl-card { text-decoration: none; }
.sl-header a:focus-visible, .sl-crumbs a:focus-visible, .sl-footer a:focus-visible, .sl-card:focus-visible {
  outline: 2px solid var(--sl-accent); outline-offset: 3px; border-radius: 6px;
}

.sl-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: inherit; }
.sl-brand-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.sl-brand-text { display: block; min-width: 0; line-height: 1.3; }
.sl-brand-text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.sl-brand-text small { display: block; color: var(--sl-muted); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.sl-header-end { display: flex; align-items: center; gap: 18px; min-width: 0; }
.sl-local { display: flex; align-items: center; gap: 18px; font-size: 12px; }
.sl-local a { color: var(--sl-muted); white-space: nowrap; transition: color .2s ease; }
.sl-local a:hover { color: var(--sl-fg); }
.sl-local a[aria-current="page"] { color: var(--sl-fg); font-weight: 600; }
.sl-local a.is-disabled { opacity: .5; cursor: default; }
.sl-local .nav-cta, .sl-local .nav-price, .sl-local .nav-download, .sl-local .nav-pill {
  padding: 7px 14px; border-radius: 999px; background: var(--sl-pill-bg); color: var(--sl-pill-fg); font-weight: 600;
}
.sl-local .nav-cta:hover, .sl-local .nav-price:hover, .sl-local .nav-download:hover, .sl-local .nav-pill:hover { color: var(--sl-pill-fg); opacity: .88; }

.sl-lang {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px; flex: none;
  border: 1px solid var(--sl-line); border-radius: 999px; font-size: 11px; line-height: 1;
}
.sl-lang a, .sl-lang span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; white-space: nowrap; }
.sl-lang a { color: var(--sl-muted); }
.sl-lang a:hover { color: var(--sl-fg); }
.sl-lang [aria-current="page"] { background: var(--sl-accent-soft); color: var(--sl-fg); font-weight: 600; }
.sl-lang a[data-fallback] { text-decoration: underline dotted; text-underline-offset: 3px; }

/* ── breadcrumb ───────────────────────────────────────────────────────── */
.sl-crumbs {
  position: relative; z-index: 2;
  padding: 8px clamp(16px, 5vw, 68px);
  border-bottom: 1px solid var(--sl-line);
  background: var(--sl-page-bg); color: var(--sl-muted); font-size: 12px; line-height: 1.5;
}
.sl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 0; list-style: none; }
.sl-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* the "/" separator is decoration: give it empty alt text so screen readers do not announce it */
.sl-crumbs li:not(:last-child)::after { content: "/"; content: "/" / ""; opacity: .55; }
.sl-crumbs a { color: var(--sl-muted); }
.sl-crumbs a:hover { color: var(--sl-fg); text-decoration: underline; }
.sl-crumbs [aria-current="page"] { color: var(--sl-fg); font-weight: 600; overflow-wrap: anywhere; }

/* ── footer ───────────────────────────────────────────────────────────── */
.sl-footer { background: var(--sl-footer-bg); color: var(--sl-footer-fg); }
.sl-footer-inner { width: min(100% - 2 * clamp(16px, 5vw, 68px), 1180px); margin: 0 auto; padding: 40px 0 30px; }
.sl-footer-main { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 22px 40px; }
.sl-footer .sl-brand-text strong { font-size: 15px; letter-spacing: .1em; }
.sl-footer-nav { display: grid; gap: 12px; justify-items: end; }
.sl-footer-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.sl-footer-extra { font-size: 12px; }
.sl-footer-extra a { color: var(--sl-footer-muted); }
.sl-footer-base { font-size: 13px; font-weight: 500; }
.sl-footer-base a { color: var(--sl-footer-fg); }
.sl-footer a:hover { text-decoration: underline; }
.sl-copy { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--sl-footer-line); color: var(--sl-footer-muted); font-size: 11px; letter-spacing: .04em; }

/* ── cards (brands / products) ────────────────────────────────────────── */
.sl-cards { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.sl-cards-brand { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.sl-cards > li { display: flex; }
.sl-card {
  position: relative; display: flex; flex: 1; flex-direction: column; gap: 20px; overflow: hidden;
  padding: 30px 28px 24px; border: 1px solid var(--sl-line); border-radius: 10px;
  background: var(--sl-surface); color: var(--sl-fg);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sl-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--sl-card-accent, var(--sl-accent)); }
.sl-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sl-card-accent, var(--sl-accent)) 45%, var(--sl-line)); box-shadow: 0 18px 44px rgba(0, 0, 0, .09); }
.sl-card-icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 16px; background: var(--sl-card-accent, var(--sl-accent)); box-shadow: 0 12px 26px color-mix(in srgb, var(--sl-card-accent, var(--sl-accent)) 22%, transparent); }
.sl-card-img { width: 100%; height: 100%; object-fit: cover; }
.sl-glyph { display: grid; place-items: center; color: #fff; font-family: "Noto Serif JP", serif; font-size: 30px; font-weight: 500; line-height: 1; }
.sl-card-body { display: flex; flex: 1; flex-direction: column; gap: 10px; }
.sl-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sl-card-name { font-family: "Noto Serif JP", serif; font-size: clamp(21px, 2.4vw, 28px); font-weight: 400; line-height: 1.35; }
.sl-card-badge { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sl-card-accent, var(--sl-accent)) 14%, transparent); color: var(--sl-fg); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.sl-card-tagline { color: var(--sl-card-accent, var(--sl-accent)); font-size: 13px; font-weight: 600; letter-spacing: .03em; filter: brightness(.82); }
[data-sl-theme="dev"] .sl-card-tagline, [data-sl-theme="point"] .sl-card-tagline { filter: none; }
.sl-card-summary { color: var(--sl-muted); font-size: 14px; line-height: 1.85; }
.sl-card-cta { color: var(--sl-fg); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.sl-card:hover .sl-card-cta { color: var(--sl-card-accent, var(--sl-accent)); }
.sl-cards-product .sl-card { padding: 26px 24px 22px; }
.sl-cards-product .sl-card-name { font-size: 22px; }

/* Section heading used above card lists on dark / light pages alike */
.sl-section-title { margin: 0 0 28px; font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.01em; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sl-local a:not(.nav-cta):not(.nav-price):not(.nav-download):not(.nav-pill):not(.always):not([data-app-store]) { display: none; }
}
@media (max-width: 560px) {
  .sl-header-inner { gap: 10px; min-height: 56px; padding-block: 8px; }
  .sl-header-end { gap: 10px; }
  .sl-brand { gap: 9px; }
  .sl-brand-icon { width: 32px; height: 32px; border-radius: 9px; }
  .sl-brand-text strong { font-size: 13px; letter-spacing: .02em; }
  .sl-brand-text small { display: none; }
  .sl-local { gap: 10px; }
  .sl-local .nav-cta, .sl-local .nav-price, .sl-local .nav-download, .sl-local .nav-pill { padding: 6px 10px; font-size: 11px; }
  .sl-lang a, .sl-lang span { padding: 0 8px; }
  .sl-footer-nav { justify-items: start; }
  .sl-footer-nav ul { justify-content: flex-start; }
  .sl-card { padding: 26px 22px 20px; }
}
@media (max-width: 640px) {
  .sl-header[data-wrap] .sl-header-inner { flex-wrap: wrap; row-gap: 6px; }
  .sl-header[data-wrap] .sl-header-end { flex: 1 1 100%; justify-content: space-between; }
  .sl-header[data-wrap] .sl-local { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .sl-header[data-wrap] .sl-local::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-header, .sl-card { transition: none; }
  .sl-card:hover { transform: none; }
}