:root {
  --vs-max: 44rem;       /* article reading width */
  --vs-page-max: 68rem;  /* wide layout: home hero / card grids */
  --vs-fg: #1a1a1a;
  --vs-muted: #656d76;
  --vs-accent: #0a6b4f;
  --vs-accent-dark: #084f3b;
  --vs-border: #e3e6e8;
  --vs-bg-subtle: #f6f8f7;
  --vs-radius: 10px;
  --vs-shadow: 0 1px 2px rgba(20, 30, 25, 0.06), 0 1px 8px rgba(20, 30, 25, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--vs-fg);
  font: 16px/1.7 -apple-system, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: #fff;
}

a { color: var(--vs-accent); }
a:hover { color: var(--vs-accent-dark); }
a:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; }

.vs-container { max-width: var(--vs-max); margin: 0 auto; padding: 0 1rem; }
.home .vs-container { max-width: var(--vs-page-max); }

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.vs-site-header {
  border-bottom: 1px solid var(--vs-border);
  padding: 1rem 0;
}
.vs-site-header .vs-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}

.vs-logo { margin: 0; line-height: 1; min-width: 0; max-width: 100%; }
.vs-logo a { display: inline-block; max-width: 100%; text-decoration: none; }
.vs-logo img {
  display: block;
  width: min(12.2rem, 100%);   /* 36px tall at 720:133; never wider than the header */
  height: auto;                /* aspect ratio comes from the width/height attributes */
}

.vs-nav { flex: 1 1 auto; }
.vs-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}
.vs-nav a {
  text-decoration: none;
  font-size: .9375rem;
  color: var(--vs-fg);
}
.vs-nav a:hover { color: var(--vs-accent); }
.vs-nav .vs-nav-primary a {
  color: #fff;
  background: var(--vs-accent);
  padding: .4em .9em;
  border-radius: 999px;
  font-weight: 600;
}
.vs-nav .vs-nav-primary a:hover { background: var(--vs-accent-dark); color: #fff; }

@media (max-width: 480px) {
  .vs-logo img { width: min(10.15rem, 100%); }
  .vs-site-header .vs-container { flex-direction: column; align-items: flex-start; }
  .vs-nav ul { justify-content: flex-start; }
}

.vs-main { padding: 2rem 0 3rem; }

/* ---------------------------------------------------------------------- */
/* Home: hero + card grids                                                 */
/* ---------------------------------------------------------------------- */

.vs-hero { padding: .5rem 0 2rem; max-width: 42rem; }
.vs-hero h1 { font-size: 1.75rem; margin: 0 0 .75rem; }
.vs-hero p { color: var(--vs-muted); margin: 0 0 .5rem; }
.vs-hero .vs-disclosure { margin-top: 1rem; }

.vs-section-title {
  font-size: 1.125rem;
  margin: 0 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--vs-border);
}

.vs-cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.vs-cta-card {
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius);
  padding: 1.25rem;
  background: #fff;
  box-shadow: var(--vs-shadow);
}
.vs-cta-card--primary {
  border-color: var(--vs-accent);
  background: var(--vs-bg-subtle);
}
.vs-cta-card h3 { margin: 0 0 .4rem; font-size: 1.0625rem; }
.vs-cta-card p { margin: 0 0 1rem; color: var(--vs-muted); font-size: .9375rem; }
.vs-cta-card .vs-btn { display: inline-block; }

.vs-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.vs-article-card {
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius);
  padding: 1rem 1.1rem;
  background: #fff;
}
.vs-article-card a {
  text-decoration: none;
  color: var(--vs-fg);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
}
.vs-article-card a:hover { color: var(--vs-accent); }

.vs-btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: .9375rem;
  padding: .55em 1.1em;
  border-radius: 8px;
  border: 1px solid var(--vs-accent);
  color: var(--vs-accent);
  background: #fff;
}
.vs-btn:hover { background: var(--vs-accent); color: #fff; }
.vs-btn--solid { background: var(--vs-accent); color: #fff; }
.vs-btn--solid:hover { background: var(--vs-accent-dark); color: #fff; }

/* ---------------------------------------------------------------------- */
/* Article content                                                         */
/* ---------------------------------------------------------------------- */

.vs-entry { max-width: var(--vs-max); }
.home .vs-entry { max-width: none; }

.vs-entry + .vs-entry { margin-top: 2.5rem; border-top: 1px solid var(--vs-border); padding-top: 2.5rem; }
.vs-entry-title { margin: 0 0 .25rem; font-size: 1.5rem; line-height: 1.4; }
.vs-entry-title a { text-decoration: none; color: inherit; }
.vs-entry-meta { color: var(--vs-muted); font-size: .875rem; margin-bottom: 1rem; }

.vs-entry-content { font-size: 1.0625rem; line-height: 1.9; }
.vs-entry-content > p,
.vs-entry-content > ul,
.vs-entry-content > ol { margin: 0 0 1.4em; }

.vs-entry-content h2 {
  font-size: 1.3125rem;
  margin: 2.2em 0 .8em;
  padding-bottom: .4em;
  border-bottom: 2px solid var(--vs-border);
}
.vs-entry-content h3 {
  font-size: 1.125rem;
  margin: 1.8em 0 .6em;
  color: var(--vs-accent-dark);
}
.vs-entry-content > h2:first-child,
.vs-entry-content > h3:first-child { margin-top: 0; }

.vs-entry-content ul,
.vs-entry-content ol { padding-left: 1.4em; }
.vs-entry-content li { margin-bottom: .5em; }
.vs-entry-content li:last-child { margin-bottom: 0; }

.vs-entry-content strong { font-weight: 700; }

/* Tables: readable on desktop, horizontally scrollable on narrow screens
   without letting the page itself overflow (see functions.php table wrap). */
.vs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.6em 0;
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius);
}
.vs-entry-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: .9375rem;
}
.vs-entry-content th,
.vs-entry-content td {
  border: 1px solid var(--vs-border);
  padding: .6em .8em;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}
.vs-entry-content thead th {
  background: var(--vs-bg-subtle);
  font-weight: 600;
  white-space: nowrap;
}
.vs-entry-content tbody tr:nth-child(even) { background: #fbfcfb; }
.vs-entry-content figcaption {
  font-size: .8125rem;
  color: var(--vs-muted);
  padding: .5em .8em 0;
}

/* Generic note / callout box, available for future use inside article body. */
.vs-callout {
  border: 1px solid var(--vs-border);
  border-left: 4px solid var(--vs-accent);
  background: var(--vs-bg-subtle);
  border-radius: 0 var(--vs-radius) var(--vs-radius) 0;
  padding: 1em 1.2em;
  margin: 1.6em 0;
  font-size: .9375rem;
}

/* Amazon disclosure line: same wording site-wide, just styled. */
.vs-disclosure {
  font-size: .8125rem;
  color: var(--vs-muted);
  margin: 1.5em 0 .75em;
}

/* ---------------------------------------------------------------------- */
/* Amazon CTA - image-less product card                                   */
/* Structure keeps an empty, zero-height media slot so a product image can */
/* be dropped in later (Phase D+) without any markup change.              */
/* ---------------------------------------------------------------------- */

.vs-product-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.8em;
}
.vs-product-card {
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius);
  background: #fff;
  box-shadow: var(--vs-shadow);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.vs-product-card__image-slot {
  display: none; /* becomes a real image block once product images are available */
}
.vs-product-card__image-slot:not(:empty) {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--vs-radius) - 2px);
  overflow: hidden;
  background: var(--vs-bg-subtle);
}
.vs-product-card__image-slot img { width: 100%; height: 100%; object-fit: contain; }

.vs-product-card__maker {
  margin: 0;
  font-size: .8125rem;
  color: var(--vs-muted);
}
.vs-product-card__model {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.vs-product-card__spec {
  margin: 0;
  font-size: .875rem;
  color: var(--vs-muted);
  line-height: 1.6;
  flex: 1 1 auto;
}
.vs-product-card__cta {
  margin-top: .25rem;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.vs-site-footer {
  border-top: 1px solid var(--vs-border);
  padding: 2rem 0;
  color: var(--vs-muted);
  font-size: .875rem;
}
.vs-footer-brand { margin: 0 0 .75rem; font-weight: 700; color: var(--vs-fg); }
.vs-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.vs-footer-links a { text-decoration: none; color: var(--vs-fg); }
.vs-footer-links a:hover { color: var(--vs-accent); }
.vs-footer-disclosure { margin: 0; font-size: .8125rem; }

.vs-pagination { margin-top: 2rem; display: flex; gap: 1rem; }

/* ---------------------------------------------------------------------- */
/* Small-viewport safety (tested down to ~360px)                          */
/* ---------------------------------------------------------------------- */

@media (max-width: 400px) {
  .vs-cta-grid,
  .vs-article-grid,
  .vs-product-cards { grid-template-columns: 1fr; }
}

/* Travel experience hub: repeat one section per genuinely used product. */
.vs-travel-hub .vs-travel-items { display: grid; gap: 2rem; }
.vs-travel-hub .vs-travel-item { min-width: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--vs-border); border-radius: var(--vs-radius); background: #fff; }
.vs-travel-hub .vs-travel-item__label { color: var(--vs-accent); font-size: .875rem; font-weight: 700; }
.vs-travel-hub .vs-travel-item__specs { padding: 1rem; background: var(--vs-bg-subtle); border-radius: var(--vs-radius); }
.vs-travel-hub .vs-travel-item__source { color: var(--vs-muted); font-size: .8125rem; }
.vs-travel-hub .vs-btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Prime sale 2026: text-first product cards, scoped to the campaign. */
.vs-prime-sale { --vs-prime-soft: #f5f8f6; }
.vs-prime-sale > p:first-of-type { font-size: .8125rem; color: var(--vs-muted); }
.vs-prime-sale > h2 { margin: 2.25rem 0 .9rem; font-size: 1.3rem; line-height: 1.35; padding-bottom: .6rem; border-bottom: 2px solid var(--vs-accent); }
.vs-prime-sale .vs-prime-note { padding: .75rem 1rem; background: var(--vs-prime-soft); border-radius: 8px; color: var(--vs-muted); font-size: .8125rem; }
.vs-prime-sale .vs-travel-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
.vs-prime-sale .vs-prime-card { min-width: 0; display: flex; flex-direction: column; gap: .55rem; padding: 1rem; border: 1px solid var(--vs-border); border-radius: 12px; box-shadow: 0 2px 8px rgba(15,35,25,.05); }
.vs-prime-sale .vs-prime-card > * { margin: 0; }
.vs-prime-sale .vs-prime-card__media { aspect-ratio: 1 / 1; width: 100%; max-width: 320px; margin: 0 auto; background: #fff; border: 1px solid var(--vs-border); border-radius: 8px; overflow: hidden; }
.vs-prime-sale .vs-prime-card__media a { display: block; width: 100%; height: 100%; }
.vs-prime-sale .vs-prime-card__media img { display: block; width: 100%; height: 100%; box-sizing: border-box; padding: .5rem; object-fit: contain; }
.vs-prime-sale .vs-prime-card__eyebrow { font-size: .73rem; line-height: 1.4; color: var(--vs-accent); font-weight: 700; }
.vs-prime-sale .vs-prime-card__title { font-size: 1.02rem; line-height: 1.45; overflow-wrap: anywhere; margin: 0; }
.vs-prime-sale .vs-prime-card > p:not(.vs-prime-card__eyebrow):not(.vs-prime-card__pending):not(.vs-prime-card__unit):not(.vs-prime-card__footnote):not(.vs-prime-card__saving) { font-size: .83rem; color: var(--vs-muted); line-height: 1.6; }
.vs-prime-sale .vs-prime-card__offer { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.vs-prime-sale .vs-prime-card__price { font-weight: 800; font-size: 1.65rem; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.vs-prime-sale .vs-prime-card__discount { display: inline-block; border-radius: 4px; padding: .12rem .45rem; color: #9c311a; background: #fff0e8; font-weight: 750; font-size: .75rem; white-space: nowrap; }
.vs-prime-sale .vs-prime-card__saving { font-size: .86rem; line-height: 1.45; color: #8d3425; font-weight: 600; }
.vs-prime-sale .vs-prime-card__saving strong { font-size: 1rem; font-weight: 800; }
.vs-prime-sale .vs-prime-card__unit { font-size: .83rem; font-weight: 700; }
.vs-prime-sale .vs-prime-card__footnote,.vs-prime-sale .vs-prime-card__pending { font-size: .75rem; line-height: 1.5; color: var(--vs-muted); }
.vs-prime-sale .vs-prime-card > p:last-child { margin-top: auto; padding-top: .65rem; }
.vs-prime-sale .vs-prime-card .vs-btn { display: block; width: 100%; padding: .65rem .5rem; text-align: center; text-decoration: none; border-radius: 8px; font-weight: 700; font-size: .87rem; }
@media (max-width: 620px) {
  .vs-prime-sale .vs-travel-items { grid-template-columns: minmax(0,1fr); gap: .75rem; }
  .vs-prime-sale .vs-prime-card { padding: 1rem; }
  .vs-prime-sale .vs-prime-card__price { font-size: 1.6rem; }
}