*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-soft: #FFF9FB;
  --navy: #4B465D;
  --accent: #C98E9F;
  --accent-sub: #E9CBD5;
  --accent-pale: rgba(201,142,159,0.11);
  --navy-pale: rgba(75,70,93,0.06);
  --text: #403A49;
  --muted: #6B6475;
  --muted-light: #968FA1;
  --border: rgba(75,70,93,0.12);
  --border-accent: rgba(201,142,159,0.26);
  --shadow: 0 12px 34px rgba(90,76,106,0.08);
  --shadow-soft: 0 4px 16px rgba(90,76,106,0.05);
}
html {
  scroll-behavior:smooth;
  min-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
}
body {
  min-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans JP", sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#root {
  min-height:100vh;
  overflow:visible;
}
a { text-decoration:none; color:inherit; }
button {
  cursor:pointer;
  border:none;
  outline:none;
  background:none;
  font:inherit;
  touch-action:pan-y;
}
::selection { background:#E7B8C2; color:#333; }

.page-shell { min-height:60vh; background:var(--bg); }
.page-wrap {
  --wrap-inline: 40px;
  padding-top:52px;
  padding-bottom:76px;
}
.page-back-links { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.page-back-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}
.page-hero-card {
  background:transparent;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--border);
  padding:28px 0 26px;
  margin-bottom:32px;
}
.filter-panel {
  background:linear-gradient(180deg, rgba(255,249,251,0.82) 0%, rgba(255,255,255,0.96) 100%);
  border-top:1px solid var(--accent-sub);
  border-bottom:1px solid var(--border);
  padding:18px 0 20px;
  margin-bottom:28px;
}
.filter-panel__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.filter-group__head {
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.filter-group__title {
  font-size:11px;
  color:var(--navy);
  font-weight:700;
  letter-spacing:0.08em;
}
.filter-group__note {
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
}
.filter-pills { display:flex; gap:8px; flex-wrap:wrap; }
.filter-pill {
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  line-height:1.4;
  color:var(--navy);
  background:rgba(255,255,255,0.96);
  border:1px solid var(--border);
  transition:background 140ms ease, color 140ms ease, border-color 140ms ease;
  white-space:nowrap;
}
.filter-pill:hover { background:var(--surface-soft); }
.filter-pill.is-active {
  color:var(--surface);
  background:var(--accent);
  border-color:var(--accent);
}
.catalog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:24px 20px;
}
.catalog-grid--compact {
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.product-card {
  background:#FFFFFF;
  border:1px solid rgba(75,70,93,0.08);
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  touch-action:pan-y;
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.product-card:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow-soft);
  border-color:var(--border-accent);
}
.product-card__media { padding:14px; background:linear-gradient(180deg, #fff9fb 0%, #ffffff 100%); }
.product-card__image-frame {
  width:100%;
  aspect-ratio:16 / 10;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-card__image {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:var(--surface);
}
.product-card__content {
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.product-card__badges {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.badge {
  display:inline-flex;
  align-items:center;
  border-radius:4px;
  padding:3px 8px;
  font-size:11px;
  line-height:1.4;
  font-weight:700;
}
.badge--category {
  color:var(--surface);
  background:var(--accent);
}
.badge--outline {
  color:var(--accent);
  border:1px solid var(--accent-sub);
  font-size:10px;
  font-weight:600;
  padding:2px 7px;
}
.badge--soft {
  color:var(--navy);
  background:var(--accent-pale);
  border:1px solid var(--border-accent);
}
.product-card__title {
  font-size:15px;
  line-height:1.55;
  color:var(--navy);
  font-weight:700;
  margin-bottom:7px;
}
.product-card__meta,
.product-card__desc,
.product-card__fit {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}
.product-card__desc {
  font-size:13px;
  line-height:1.8;
  color:var(--text);
  margin:10px 0 12px;
}
.product-card__fit { margin-bottom:16px; }
.product-card__footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.product-card__price-block { display:grid; gap:4px; }
.product-card__price {
  font-size:16px;
  line-height:1.4;
  color:var(--navy);
  font-weight:700;
}
.product-card__price-note {
  font-size:11px;
  line-height:1.5;
  color:var(--muted-light);
}
.product-card__actions {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.guide-entry-section {
  background:linear-gradient(180deg, rgba(255,249,251,0.72) 0%, #ffffff 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.guide-entry-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.guide-entry-card {
  text-align:left;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(75,70,93,0.1);
  padding:0;
  min-height:320px;
  display:flex;
  flex-direction:column;
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  overflow:hidden;
}
.guide-entry-card:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
  border-color:var(--border-accent);
}
.guide-entry-card__image-wrap {
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
}
.guide-entry-card__image {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.guide-entry-card__image-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(36,33,46,0.08) 0%, rgba(36,33,46,0.44) 100%);
}
.guide-entry-card__image-label {
  position:absolute;
  left:16px;
  bottom:14px;
  font-size:10px;
  line-height:1.4;
  letter-spacing:0.12em;
  font-weight:700;
  color:#fff;
}
.guide-entry-card__body {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 20px 18px;
  flex:1;
}
.guide-entry-card__eyebrow {
  font-size:10px;
  line-height:1.4;
  letter-spacing:0.12em;
  font-weight:700;
  color:var(--accent);
}
.guide-entry-card__title {
  font-size:18px;
  line-height:1.55;
  font-weight:700;
  color:var(--navy);
}
.guide-entry-card__kicker {
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
}
.guide-entry-card__desc {
  font-size:13px;
  line-height:1.8;
  color:var(--text);
}
.guide-entry-card__meta {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:auto;
}
.guide-entry-card__meta span {
  font-size:11px;
  line-height:1.4;
  color:var(--navy);
  background:var(--accent-pale);
  border:1px solid var(--border-accent);
  padding:4px 8px;
}
.guide-entry-card__link {
  font-size:12px;
  line-height:1.5;
  color:var(--accent);
  border-bottom:1px solid var(--accent-sub);
  padding-bottom:1px;
  align-self:flex-start;
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  line-height:1.5;
  padding-bottom:1px;
  border-bottom:1px solid transparent;
}
.text-link--subtle {
  color:var(--muted);
  border-bottom-color:var(--border);
}
.text-link--accent {
  color:var(--accent);
  border-bottom-color:var(--accent-sub);
}
.editorial-note-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.editorial-note {
  border-top:1px solid var(--navy);
  padding-top:12px;
  font-size:12px;
  line-height:1.85;
  color:var(--muted);
}
.editorial-divider {
  display:flex;
  align-items:center;
  gap:14px;
}
.editorial-divider::before {
  content:"";
  width:54px;
  height:1px;
  background:var(--accent);
  flex-shrink:0;
}
.editorial-kinds {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.editorial-kind {
  position:relative;
  text-align:left;
  padding:22px 18px 20px;
  border-right:1px solid var(--border);
  background:transparent;
  touch-action:pan-y;
  transition:background 160ms ease, transform 160ms ease;
}
.editorial-kind:last-child { border-right:none; }
.editorial-kind:hover {
  background:var(--surface-soft);
  transform:translateY(-2px);
}
.editorial-kind__index {
  font-size:11px;
  line-height:1.3;
  letter-spacing:0.18em;
  color:var(--accent);
  margin-bottom:18px;
}
.editorial-kind__sub {
  font-size:11px;
  line-height:1.6;
  letter-spacing:0.08em;
  color:var(--muted-light);
  text-transform:uppercase;
  margin-bottom:10px;
}
.editorial-kind__title {
  font-size:17px;
  line-height:1.45;
  color:var(--navy);
  font-weight:700;
  margin-bottom:10px;
}
.editorial-kind__desc {
  font-size:12px;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:12px;
}
.editorial-kind__fit {
  font-size:11px;
  line-height:1.7;
  color:var(--navy);
  margin-bottom:12px;
  opacity:0.85;
}
.editorial-kind__link {
  font-size:12px;
  line-height:1.6;
  color:var(--navy);
  border-bottom:1px solid var(--border);
  padding-bottom:2px;
}
.persona-route-head {
  display:grid;
  gap:8px;
  margin-bottom:18px;
}
.persona-route-head__label {
  font-size:10px;
  letter-spacing:0.18em;
  color:var(--accent);
}
.persona-route-head__title {
  font-size:22px;
  line-height:1.45;
  color:var(--navy);
  font-weight:700;
}
.persona-route-head__text {
  font-size:13px;
  line-height:1.85;
  color:var(--muted);
  max-width:700px;
}
.persona-route-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.persona-route-card {
  text-align:left;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--border);
  padding:14px 0 14px;
  background:transparent;
  transition:background 150ms ease, padding-left 150ms ease;
}
.persona-route-card:hover {
  background:rgba(201,142,159,0.05);
  padding-left:10px;
}
.persona-route-card__label {
  font-size:14px;
  line-height:1.55;
  color:var(--navy);
  font-weight:700;
  margin-bottom:6px;
}
.persona-route-card__text {
  font-size:12px;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:10px;
}
.persona-route-card__link {
  font-size:12px;
  line-height:1.6;
  color:var(--accent);
  border-bottom:1px solid var(--accent-sub);
  display:inline-flex;
  padding-bottom:2px;
}
.ranking-axis-strip {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.ranking-axis-strip__item {
  font-size:11px;
  line-height:1.5;
  color:var(--navy);
  border:1px solid var(--border);
  background:var(--surface-soft);
  padding:6px 10px;
  border-radius:999px;
}
.role-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.role-card {
  text-align:left;
  background:transparent;
  border-top:2px solid var(--navy);
  border-bottom:1px solid var(--border);
  padding:16px 0 16px 0;
  touch-action:pan-y;
  transition:background 160ms ease, padding-left 160ms ease;
}
.role-card:hover {
  background:rgba(255,255,255,0.45);
  padding-left:10px;
}
.role-card__head {
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:10px;
}
.role-card__key {
  font-size:22px;
  line-height:1;
  color:var(--accent);
  font-weight:700;
  min-width:24px;
}
.role-card__title {
  font-size:15px;
  line-height:1.45;
  color:var(--navy);
  font-weight:700;
}
.role-card__sub {
  font-size:13px;
  line-height:1.7;
  color:var(--navy);
  margin-bottom:8px;
}
.role-card__desc {
  font-size:13px;
  line-height:1.85;
  color:var(--muted);
}
.ranking-feature {
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:0;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--border);
  margin-bottom:12px;
  touch-action:pan-y;
}
.ranking-feature__media {
  aspect-ratio:4 / 3;
  min-height:auto;
  background:linear-gradient(180deg, #f4ede7 0%, #fffdfa 100%);
  border-right:1px solid var(--border);
  padding:18px;
}
.ranking-feature__image {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#fff;
}
.ranking-feature__body {
  padding:22px 22px 20px;
  display:flex;
  flex-direction:column;
}
.ranking-feature__eyebrow {
  font-size:11px;
  line-height:1.4;
  letter-spacing:0.16em;
  color:var(--accent);
  margin-bottom:14px;
}
.ranking-feature__title {
  font-size:24px;
  line-height:1.4;
  color:var(--navy);
  font-weight:700;
  margin-bottom:10px;
}
.ranking-feature__desc {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:14px;
}
.ranking-feature__meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.ranking-list {
  border-top:1px solid var(--border);
}
.ranking-list-item {
  display:grid;
  grid-template-columns:44px 76px minmax(0,1fr) 120px;
  align-items:center;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
  text-align:left;
  touch-action:pan-y;
  transition:background 150ms ease;
}
.ranking-list-item:hover { background:rgba(255,255,255,0.5); }
.ranking-list-item__index {
  font-size:18px;
  line-height:1;
  color:var(--accent);
  font-weight:700;
  text-align:right;
}
.ranking-list-item__thumb {
  width:76px;
  height:57px;
  border:1px solid var(--border);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ranking-list-item__thumb img {
  width:100%;
  height:100%;
  object-fit:contain;
}
.ranking-list-item__title {
  font-size:14px;
  line-height:1.55;
  color:var(--navy);
  font-weight:700;
  margin-bottom:5px;
}
.ranking-list-item__text {
  font-size:12px;
  line-height:1.75;
  color:var(--muted);
}
.ranking-list-item__cta {
  justify-self:end;
  font-size:12px;
  line-height:1.6;
  color:var(--navy);
  border-bottom:1px solid var(--border);
  padding-bottom:2px;
}
.text-link--disabled {
  color:var(--muted-light);
  border-bottom-color:var(--border);
  cursor:default;
}
.info-note-grid {
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:16px;
  margin-top:44px;
}
.info-note-card,
.section-card {
  background:transparent;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--border);
  padding:18px 0 18px;
}
.info-note-card__title,
.section-card__title {
  font-size:13px;
  line-height:1.6;
  color:var(--navy);
  font-weight:700;
  margin-bottom:8px;
}
.info-note-card__body,
.section-card__body {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
}
.review-list {
  display:grid;
  gap:12px;
}
.review-item {
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg);
  padding:14px 15px;
}
.review-item__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.review-item__name {
  font-size:13px;
  line-height:1.5;
  color:var(--navy);
}
.review-item__rating {
  font-size:11px;
  line-height:1.4;
  color:var(--accent);
  border:1px solid var(--border-accent);
  border-radius:999px;
  padding:4px 8px;
  background:var(--surface);
}
.review-item__body {
  font-size:13px;
  line-height:1.85;
  color:var(--text);
}
.review-item__date {
  margin-top:8px;
  font-size:11px;
  line-height:1.5;
  color:var(--muted-light);
}
.review-form {
  display:grid;
  gap:16px;
}
.review-form__header {
  margin-bottom:16px;
}
.review-form__note,
.review-form__subnote {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
}
.review-form__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.review-field {
  display:grid;
  gap:8px;
}
.review-field__label {
  font-size:12px;
  line-height:1.5;
  color:var(--navy);
  font-weight:700;
}
.review-field__input {
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:13px;
  line-height:1.6;
  padding:12px 14px;
}
.review-field__textarea {
  min-height:132px;
  resize:vertical;
}
.review-form__actions {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.review-form__message {
  margin-top:12px;
  font-size:12px;
  line-height:1.7;
  color:var(--navy);
  background:var(--surface-soft);
  border-left:2px solid var(--accent);
  padding:10px 12px;
}
.hero-split {
  border-bottom:1px solid rgba(47,58,86,0.14);
}
.hero-photo__overlay {
  width:100%;
}
.hero-photo__overlay::after {
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:140px;
  background:linear-gradient(180deg, rgba(22,22,27,0) 0%, rgba(22,22,27,0.12) 100%);
  pointer-events:none;
}
.hero-photo__credit {
  text-transform:none;
}
.info-note-card--tint,
.section-card--accent {
  background:linear-gradient(180deg, rgba(201,142,159,0.07) 0%, rgba(255,255,255,0.98) 100%);
  box-shadow:none;
}
.editorial-page-shell {
  min-height:60vh;
  background:var(--bg);
}
.editorial-page-wrap {
  padding-top:52px;
  padding-bottom:76px;
}
.editorial-hero {
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:34px;
  align-items:start;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--border);
  padding:26px 0 30px;
  margin-bottom:40px;
}
.editorial-hero__media {
  background:linear-gradient(180deg, #fff9fb 0%, #ffffff 100%);
  border:1px solid var(--border);
  padding:16px;
  position:relative;
}
.editorial-hero__media img {
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  display:block;
  border:1px solid var(--border);
}
.editorial-hero__credit {
  display:inline-flex;
  margin-top:10px;
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  padding-bottom:1px;
}
.editorial-count {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}
.editorial-count strong {
  color:var(--navy);
  font-size:18px;
}
.editorial-stack {
  display:grid;
  gap:18px;
  max-width:780px;
  margin:0 auto;
}
.editorial-block {
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--border);
  padding:18px 0 18px;
  background:transparent;
}
.editorial-block--soft {
  background:linear-gradient(180deg, rgba(201,142,159,0.07) 0%, rgba(255,255,255,0.98) 100%);
  padding:18px 18px 18px;
  border:1px solid var(--border);
}
.editorial-block__title {
  font-size:17px;
  line-height:1.55;
  color:var(--navy);
  font-weight:700;
  margin-bottom:10px;
}
.editorial-block__body {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
}
.guide-list-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px 18px;
}
.guide-list-card {
  display:flex;
  flex-direction:column;
  cursor:pointer;
  background:#FFFFFF;
  border-bottom:1px solid var(--border);
  border-top:1px solid var(--navy);
  transition:transform 160ms ease, background 160ms ease;
}
.guide-list-card:hover {
  transform:translateY(-2px);
  background:#FFFFFF;
}
.guide-list-card__media {
  padding:0 0 14px;
}
.guide-list-card__media img {
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
  border:1px solid var(--border);
}
.guide-list-card__body {
  display:flex;
  flex-direction:column;
  flex:1;
  padding:0 0 18px;
}
.guide-list-card__quick-facts {
  display:grid;
  gap:8px;
  margin-bottom:16px;
}
.guide-list-card__quick-fact {
  font-size:12px;
  line-height:1.7;
  color:var(--text);
  background:var(--surface-soft);
  border-left:2px solid var(--accent-sub);
  padding:8px 10px;
}
.editorial-label {
  font-size:11px;
  color:var(--accent);
  border:1px solid var(--accent-sub);
  border-radius:0;
  padding:3px 8px;
  font-weight:600;
}
.editorial-chip-button {
  font-size:12px;
  color:var(--navy);
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 13px;
}
.surface-grid {
  display:grid;
  gap:16px;
}
.surface-grid--two { grid-template-columns:1fr 1fr; }
.surface-grid--split { grid-template-columns:0.9fr 1.1fr; }
.detail-hero {
  display:grid;
  grid-template-columns:0.78fr 1.22fr;
  gap:32px;
  align-items:start;
  margin-bottom:32px;
  background:transparent;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--border);
  padding:28px 0 30px;
  overflow:visible;
}
.detail-hero__media-shell {
  padding:18px;
  background:linear-gradient(180deg, #f4ede7 0%, #fffdfa 100%);
  border:1px solid var(--border);
}
.detail-hero__image-frame {
  width:100%;
  aspect-ratio:4 / 3;
  background:var(--surface);
  border:1px solid var(--border);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.detail-hero__image {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:var(--surface);
}
.detail-hero__kicker {
  font-size:11px;
  line-height:1.4;
  letter-spacing:0.14em;
  color:var(--accent);
  margin-bottom:12px;
}
.detail-hero__title {
  font-size:clamp(26px, 3vw, 38px);
  line-height:1.48;
  color:var(--navy);
  font-weight:700;
  letter-spacing:0.01em;
  margin-bottom:14px;
}
.detail-hero__summary {
  font-size:14px;
  line-height:1.95;
  color:var(--muted);
  max-width:620px;
  margin-bottom:20px;
}
.detail-chip-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.detail-mini-facts {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:20px;
}
.detail-mini-fact {
  border-top:1px solid var(--navy);
  padding-top:10px;
}
.detail-mini-fact__label {
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  margin-bottom:4px;
}
.detail-mini-fact__value {
  font-size:13px;
  line-height:1.7;
  color:var(--navy);
  font-weight:700;
}
.detail-hero__purchase {
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.detail-price-note {
  font-size:11px;
  line-height:1.6;
  color:var(--muted-light);
}
.detail-content-layout {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,0.8fr);
  gap:34px;
  align-items:start;
}
.detail-content-main {
  display:grid;
  gap:26px;
}
.detail-content-side {
  display:grid;
  gap:18px;
}
.detail-section {
  padding:0 0 22px;
  border-bottom:1px solid var(--border);
}
.detail-section--soft {
  background:var(--surface);
  border:1px solid var(--border);
  padding:22px 22px 24px;
}
.detail-section__head {
  margin-bottom:14px;
}
.detail-section__eyebrow {
  font-size:11px;
  line-height:1.4;
  letter-spacing:0.16em;
  color:var(--accent);
  margin-bottom:8px;
}
.detail-section__title {
  font-size:20px;
  line-height:1.45;
  color:var(--navy);
  font-weight:700;
}
.detail-pros-cons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.detail-pros-cons__col {
  display:grid;
  gap:10px;
}
.detail-pros-cons__label {
  font-size:12px;
  line-height:1.5;
  color:var(--navy);
  font-weight:700;
}
.detail-aside-card {
  background:var(--surface);
  border:1px solid var(--border);
  padding:20px 20px 22px;
}
.detail-aside-card--accent {
  background:var(--navy-pale);
}
.detail-legal-note {
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.detail-legal-note__title {
  font-size:12px;
  line-height:1.5;
  color:var(--navy);
  font-weight:700;
  margin-bottom:10px;
}
.detail-related-card {
  text-align:left;
  background:transparent;
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--border);
  padding:16px 0 14px;
  transition:background 150ms ease, padding-left 150ms ease;
}
.detail-related-card:hover {
  background:rgba(255,255,255,0.42);
  padding-left:10px;
}
.detail-related-card__eyebrow {
  font-size:11px;
  line-height:1.5;
  letter-spacing:0.08em;
  color:var(--accent);
  font-weight:700;
  margin-bottom:8px;
}
.detail-related-card__title {
  font-size:15px;
  line-height:1.6;
  color:var(--navy);
  font-weight:700;
  margin-bottom:6px;
}
.detail-related-card__text {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:10px;
}
.detail-related-card__link {
  font-size:12px;
  line-height:1.6;
  color:var(--navy);
  border-bottom:1px solid var(--border);
  padding-bottom:2px;
  display:inline-flex;
}
.buy-link-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  line-height:1.4;
  color:var(--surface);
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:999px;
  padding:10px 20px;
}
.buy-link-button.is-disabled {
  background:#d8c0c7;
  border-color:#d8c0c7;
  cursor:default;
}
.data-table { display:grid; gap:10px; }
.data-row {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px;
  border-bottom:1px solid var(--border);
  padding-bottom:9px;
}
.data-row__label {
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}
.data-row__value {
  font-size:13px;
  line-height:1.7;
  color:var(--text);
}
.bullet-list { display:grid; gap:9px; }
.bullet-list__item {
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.bullet-list__dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-top:9px;
  flex-shrink:0;
}
.bullet-list__text {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
}
.related-chip-list { display:flex; gap:10px; flex-wrap:wrap; }
.related-chip {
  display:inline-flex;
  align-items:center;
  font-size:13px;
  line-height:1.4;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:9px 16px;
}
.guide-hero-facts {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}
.guide-hero-fact {
  background:rgba(255,255,255,0.72);
  border:1px solid var(--border);
  padding:12px 14px;
}
.guide-hero-fact__label {
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  margin-bottom:5px;
}
.guide-hero-fact__value {
  font-size:13px;
  line-height:1.75;
  color:var(--navy);
  font-weight:700;
}
.guide-quick-answer {
  background:linear-gradient(180deg, #fff7f6 0%, #fffdfa 100%);
  border:1px solid var(--border);
  padding:22px 24px 24px;
}
.guide-quick-answer__eyebrow {
  font-size:11px;
  line-height:1.5;
  letter-spacing:0.14em;
  color:var(--accent);
  margin-bottom:10px;
}
.guide-quick-answer__text {
  font-size:15px;
  line-height:1.95;
  color:var(--navy);
  font-weight:700;
}
.guide-toc {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.guide-toc__chip {
  display:inline-flex;
  align-items:center;
  font-size:12px;
  line-height:1.5;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:9px 14px;
}
.guide-summary-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.guide-summary-card {
  border-top:1px solid var(--navy);
  border-bottom:1px solid var(--border);
  padding:16px 0 14px;
}
.guide-summary-card__label {
  font-size:11px;
  line-height:1.5;
  letter-spacing:0.12em;
  color:var(--accent);
  margin-bottom:10px;
}
.guide-summary-card__value {
  font-size:16px;
  line-height:1.7;
  color:var(--navy);
  font-weight:700;
  margin-bottom:8px;
}
.guide-summary-card__note {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
}
.guide-steps {
  display:grid;
  gap:12px;
}
.guide-step-card {
  display:grid;
  grid-template-columns:92px 1fr;
  gap:14px;
  align-items:start;
  border-bottom:1px solid var(--border);
  padding-bottom:12px;
}
.guide-step-card__index {
  font-size:11px;
  line-height:1.5;
  letter-spacing:0.14em;
  color:var(--accent);
  padding-top:4px;
}
.guide-step-card__text {
  font-size:14px;
  line-height:1.9;
  color:var(--text);
}
.guide-related-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.guide-related-guide {
  text-align:left;
  background:#fff;
  border:1px solid var(--border);
  padding:18px 18px 20px;
}
.guide-related-guide__eyebrow {
  font-size:11px;
  line-height:1.5;
  letter-spacing:0.12em;
  color:var(--accent);
  margin-bottom:8px;
}
.guide-related-guide__title {
  font-size:15px;
  line-height:1.65;
  color:var(--navy);
  font-weight:700;
  margin-bottom:8px;
}
.guide-related-guide__text {
  font-size:12px;
  line-height:1.85;
  color:var(--muted);
  margin-bottom:12px;
}
.guide-related-guide__link {
  font-size:12px;
  line-height:1.6;
  color:var(--navy);
  border-bottom:1px solid var(--border);
  display:inline-flex;
  padding-bottom:2px;
}
.stack-section {
  margin-top:36px;
  padding-top:32px;
  border-top:1px solid var(--border);
}

@media (max-width:767px) {
  .editorial-page-wrap {
    padding-top:30px;
    padding-bottom:56px;
  }
  .page-wrap {
    --wrap-inline: 40px;
    padding-top:30px;
    padding-bottom:56px;
  }
  .page-hero-card { padding:24px 22px; margin-bottom:24px; }
  .page-back-links { margin-bottom:22px; }
  .filter-panel { padding:18px 16px; margin-bottom:22px; }
  .filter-panel__grid,
  .surface-grid--two,
  .surface-grid--split,
  .detail-hero,
  .detail-content-layout,
  .detail-pros-cons,
  .info-note-grid,
  .review-form__grid { grid-template-columns:1fr; }
  .detail-hero {
    gap:22px;
    padding:22px 0 24px;
    margin-bottom:30px;
  }
  .detail-hero__media-shell { padding:18px; }
  .detail-mini-facts { grid-template-columns:1fr; }
  .detail-content-main { gap:22px; }
  .detail-content-side { gap:14px; }
  .info-note-grid { margin-top:34px; }
  .info-note-card,
  .section-card { padding:22px 20px; }
  .data-row { grid-template-columns:1fr; gap:3px; }
  .catalog-grid { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
  .catalog-grid--compact { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
  .product-card__content { padding:17px 17px 18px; }
  .product-card__footer { align-items:flex-start; }
  .hero-split       { min-height:620px !important; }
  .hero-photo__overlay::after { height:90px; }
  .nav-links        { display:none !important; }
  .ranking-layout   { flex-direction:column !important; }
  .scene-grid       { grid-template-columns:1fr !important; }
  .editorial-note-grid,
  .editorial-kinds,
  .role-grid,
  .guide-entry-grid,
  .guide-summary-grid,
  .guide-related-grid,
  .ranking-feature,
  .persona-route-grid,
  .editorial-hero { grid-template-columns:1fr; }
  .guide-hero-facts { grid-template-columns:1fr; }
  .guide-step-card { grid-template-columns:1fr; gap:8px; }
  .editorial-kind {
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .editorial-kind:last-child { border-bottom:none; }
  .ranking-feature__media {
    min-height:auto;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .ranking-feature__body { padding:18px 0 0; }
  .ranking-list-item {
    grid-template-columns:34px 64px minmax(0,1fr);
    gap:14px;
  }
  .ranking-list-item__cta { justify-self:start; grid-column:2 / -1; }
  .trust-grid       { grid-template-columns:1fr !important; gap:28px !important; }
  .footer-inner     { grid-template-columns:1fr !important; gap:20px !important; }
  .chip-bar-inner   { flex-wrap:wrap !important; }
}
@media (max-width:480px) {
  .page-wrap {
    --wrap-inline: 22px;
    padding-top:28px;
    padding-bottom:48px;
  }
  .page-hero-card,
  .filter-panel,
  .detail-hero,
  .detail-section--soft,
  .detail-aside-card,
  .detail-related-card,
  .info-note-card,
  .section-card,
  .editorial-block--soft,
  .editorial-hero__media { padding-left:18px; padding-right:18px; }
  .filter-pill,
  .related-chip { width:100%; justify-content:center; }
  .scene-grid       { grid-template-columns:1fr !important; }
}