/* eSIM Plan Hub — draft homepage
   Isolated from etd-store production styles.
   Visual language: fresh, bright travel — white canvas, airy cards. */

:root {
  /* 搜索栏国家胶囊与目录页结果胶囊共用这组颜色，改一处两处同时变 */
  --capsule: #f6c344;
  --catalog-bg: #e6eaf0;
  --capsule-ink: #3a2d00;
  --paper: #f7f7f8;
  --paper-deep: #f7f7f8;
  --cream: #ffffff;
  --card: #ffffff;
  --ink: #172033;
  --ink-soft: #55565f;
  --muted: #55565f;
  --on-dark: #ffffff;
  --line: #d5d8dd;
  --line-strong: #667085;
  --accent: #006b63;
  --accent-deep: #00564f;
  --accent-soft: #e6faf7;
  --sea: #006b63;
  --sea-soft: #e6faf7;
  --gold: #ffe14a;
  --brand: #ea580c;
  /* Text-safe orange. --brand (#ea580c) is only 3.56:1 on white, which passes
     WCAG AA for large display text but fails for body text and for white text
     on an orange fill. Use --brand-ink (5.46:1) anywhere the orange carries
     small text or sits behind white text. */
  --brand-ink: #b8430a;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.06);
  --shadow-tight: 0 8px 24px rgba(0, 0, 0, 0.045);
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --header-h: 90px;
  --wrap: 1180px;
  --font-display: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", sans-serif;
  --font-ui: "Figtree", "Avenir Next", "Segoe UI", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.eph-draft-shell {
  --etd-bg: var(--paper);
  --etd-surface: var(--card);
  --etd-ink: var(--ink);
  --etd-muted: var(--muted);
  --etd-line: var(--line);
  --etd-navy: var(--ink);
  --etd-yellow: var(--accent);
  --etd-yellow-edge: var(--accent-deep);
  --etd-accent: var(--accent);
  --etd-signal: var(--accent);
  --etd-signal-soft: var(--accent-soft);
}

img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 80;
  background: var(--ink);
  color: var(--on-dark);
  padding: 8px 14px;
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: min(var(--wrap), calc(100% - 40px));
  margin-inline: auto;
}

/* .site-header is sticky and --header-h tall, so an anchor jump would otherwise
   park the section heading underneath it. */
section[id],
main[id] {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.eyebrow-ico { color: var(--accent); }
.eyebrow-ico svg { width: 16px; height: 16px; }
.eyebrow--brand { gap: 10px; }
.eyebrow-mark {
  display: block;
  width: 22px;
  height: 31px;
  object-fit: contain;
  flex: 0 0 auto;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink);
}

.lede {
  color: var(--ink-soft);
  font-size: 1.06rem;
  max-width: 42rem;
}

.placeholder-note {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Grain + atmosphere */
.page-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--paper);
}

.site { position: relative; z-index: 1; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  backdrop-filter: blur(98px);
  -webkit-backdrop-filter: blur(98px);
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.92);
}
.header-inner {
  width: min(var(--wrap), calc(100% - 40px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0px;
  flex: 0 0 auto;
}
.brand-logo {
  display: block;
  height: 42px;
  width: auto;
}
.brand-mark-img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--ink);
  color: var(--on-dark);
  display: grid;
  place-items: center;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
/* Header and footer share one lockup: same mark size, same tracking. */
.site-header .brand-mark-img,
.site-footer .brand-mark-img {
  width: 60px;
  height: 60px;
}
.site-header .brand-name,
.site-footer .brand-name {
  letter-spacing: -0.12em;
  /* The text block is already centred against the 60px card, but the first line's
     box carries the 28px Caveat "easy" and its empty ascender space makes the
     wordmark read high, so nudge it down optically. The margin claws back part of
     the gap the card leaves: the PNG is 90x128 with no transparent padding, so
     object-fit: contain letterboxes it by 8.9px on each side inside the square box.
     Both values are applied to header and footer together -- one lockup. */
  position: relative;
  top: 3px;
  margin-left: -7px;
  /* 2026-09-05: the two halves of the wordmark swap the site's existing tokens.
     "TravelData" takes the orange so it ties to the SIM-card mark and so the
     descriptive half -- the one a first-time search visitor reads to work out
     what the site sells -- carries the colour. --brand-ink (#b8430a), not the
     card's own #f34600: on the footer's green the card orange only reaches
     2.52:1 and goes muddy, this reaches 3.73:1. Scoped to header/footer so the
     draft shells in index.html / catalog.html are untouched. */
  color: var(--brand-ink);
}
/* ...and "easy" takes the ink the wordmark gave up. Deliberately --ink and not
   #000: nothing else on the site is pure black, and it would out-weigh every
   other glyph around it. */
.site-header .brand-easy,
.site-footer .brand-easy {
  color: var(--ink);
  /* Base .brand-easy leaves 3px after the script "y"; the wordmark reads as two
     words rather than one lockup at that spacing, so pull "TravelData" back in.
     The markup also has a literal space between the spans, which is why this
     goes negative to close the same visual gap. */
  margin-right: 1px;
}
.brand-sub {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-top: 1px;
}
.brand-easy {
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-weight: 600;
  font-size: 28px;
  color: var(--brand-ink);
  letter-spacing: -0.03em;
  margin-right: 3px;
  position: relative;
  top: 1.5px;
}

.nav-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.nav-main {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav-main a {
  position: relative;
  padding: 6px 0;
}
.nav-main a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav-main a:hover::after,
.nav-main a:focus-visible::after { transform: scaleX(1); }

/* Language toggle in the primary nav (2026-09-05): plain text in brand orange (owner asked for no pill/icon).
   .nav-lang--bar is a duplicate that only shows on small screens, next to the menu button. */
.nav-lang {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  color: var(--brand-ink, #b8430a);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
.nav-lang:hover,
.nav-lang:focus-visible { color: var(--brand, #ea580c); }
.nav-main .nav-lang { margin-right: 4px; }
.nav-main .nav-lang::after { background: var(--brand, #ea580c); }
.nav-lang--bar { display: none; margin-left: auto; }
.nav-lang__short { display: none; }
@media (max-width: 980px) {
  .nav-lang--bar { display: inline-flex; }
  .nav-main .nav-lang { display: none; }
}
@media (max-width: 480px) {
  .header-inner { gap: 12px; }
  .nav-lang--bar + .menu-toggle { margin-left: 0; flex: none; }
  .nav-lang--bar .nav-lang__full { display: none; }
  .nav-lang--bar .nav-lang__short { display: inline; }
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  font-weight: 500;
  letter-spacing: 0;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 10px 16px;
}
.btn-ghost:hover { background: var(--paper); }
.btn-outline {
  background: var(--card);
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 10px 16px;
}
.btn-outline:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}
/* 原来这里把头部的 .btn-outline 强改成品牌橙实心，导致 Find a plan 和 Checkout
   两个同权重的亮橙并排、没有主次。2026-09-03 改为：头部只留一个墨绿实心主按钮
   （.btn-fill，与产品页 Check out、搜索栏 Search 同色），Checkout 整个移除
   （购物车流程已取消，从头部进结账多半是空车）。
   这条覆盖一并删掉，否则以后往头部加 .btn-outline 会莫名变成橙色。 */
.btn-fill {
  background: var(--accent);
  color: var(--on-dark);
}
.btn-fill:hover { background: var(--accent-deep); }
.btn-accent {
  background: var(--accent);
  color: var(--on-dark);
}
.btn-accent:hover { background: var(--accent-deep); }

/* "View all destinations" 按钮: 橙底白字 + 悬停动效 */
[data-dest-expand] {
  background: var(--brand-ink);
  color: var(--on-dark);
  border-color: var(--brand-ink);
  padding: 11px 22px;
  font-weight: 600;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
[data-dest-expand]:hover {
  background: #9a3808;
  color: var(--on-dark);
  border-color: #9a3808;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(234, 88, 12, 0.35);
}

.menu-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
}
.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  /* 不能用 overflow: hidden —— 首页搜索的国家下拉（.search-results，
     position:absolute，max-height 360px）是 .hero 的后代，一旦这里裁剪，
     超出 hero 底边的部分会被切掉，实测只剩约 100px 可见（约两行国家）。
     背景图不需要靠这层裁剪：.hero-media 自己有 overflow:hidden 且
     position:absolute inset:0，.hero-globe / ::after / .stamp 全在它内部。 */
  overflow: visible;
  display: flex;
  align-items: center;
  min-height: min(68vh, 640px);
  padding: 48px 0 64px;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-media picture {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  height: 100%;
  display: block;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: 78% 36%;
}
.hero-media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  background: linear-gradient(90deg, var(--paper) 0%, rgb(247 247 248 / 0.4) 10%, transparent 28%);
  pointer-events: none;
}
.hero-globe {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 92% 46%;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 36rem;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  color: var(--ink);
}
.hero h1 em {
  display: inline-block;
  font-family: "Caveat Brush", "Caveat", "Bradley Hand", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 1.7em;
  line-height: 0.65;
  letter-spacing: 0.01em;
  color: var(--brand);
  transform: skewX(-14deg) rotate(-2deg) translateY(0.02em);
  padding: 0 0.06em 0 0.02em;
  margin-right: 0.04em;
}
@font-face {
  font-family: "BlowBrush";
  src: url("../fonts/blowbrush-price.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0024, U+002C, U+002E, U+0030-0039;
}
.hero-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 26px;
  margin: 0 0 10px;
}
.hero-price__label {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.hero-price__num {
  position: relative;
  display: inline-block;
  font-family: "BlowBrush", "Caveat", "Bradley Hand", cursive;
  font-weight: 400;
  font-size: clamp(4.4rem, 9.2vw, 7rem);
  line-height: 0.9;
  letter-spacing: 0.03em;
  color: var(--brand);
  transform: rotate(-4deg);
  transform-origin: left bottom;
  padding: 0.06em 0.12em 0.08em;
  margin: 0 0 0.16em 6px;
}
/* hand-drawn marker underline, like a supermarket price tag */
.hero-price__num::after {
  content: "";
  position: absolute;
  left: 0.05em;
  right: 0.05em;
  bottom: -0.1em;
  height: 0.2em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'><path d='M3 14 C 40 4, 90 20, 130 9 S 185 6, 197 12' fill='none' stroke='%23006B63' stroke-width='6' stroke-linecap='round' opacity='0.9'/></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
}
.hero-price__cur {
  font-size: 0.6em;
  vertical-align: 0.3em;
  margin-right: 0.06em;
  font-weight: 400;
}
.hero-price__note {
  flex-basis: 100%;
  margin-top: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.hero-copy {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 36rem;
  margin: 0 0 20px;
}

.search-card {
  position: relative;
  z-index: 5;
  background: var(--card);
  border-radius: 28px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.search-card:focus-within { z-index: 20; }
.search-card label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2px 8px 10px;
}
.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 6px 6px 6px 16px;
}
.search-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-row svg { flex: 0 0 auto; color: var(--muted); }
.search-row input {
  /* 胶囊占位后输入框不能被压没：给一个保底宽度，装不下时整行换行 */
  flex: 1 1 140px;
  min-width: 120px;
  border: 0;
  background: transparent;
  padding: 14px 8px;
  outline: none;
  font-size: 1.05rem;
}
/* The rule above is (0,1,1) and silently outranked the global :focus-visible
   (0,1,0) below, leaving this input with no keyboard focus indicator at all.
   Restore it here at matching specificity. */
.search-row input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.search-row input::placeholder { color: var(--muted); }
.search-go {
  border: 0;
  background: var(--accent);
  color: var(--on-dark);
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 500;
  cursor: pointer;
}
/* The search card is the primary call to action on every screen size:
   brand teal card, white input row, orange button. The mobile full-screen
   picker (.is-search-open) keeps its own look. */
.search-card:not(.is-search-open) {
  background: linear-gradient(135deg, #006b63 0%, #00564f 100%);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(0, 84, 77, 0.28);
}
.search-card:not(.is-search-open) > label {
  color: #d9f3ee;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.search-card:not(.is-search-open) .search-row {
  position: relative;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}
.search-card:not(.is-search-open) .search-row > svg { color: var(--accent); }
.search-card:not(.is-search-open) .search-row input { font-weight: 600; }
.search-card:not(.is-search-open) .search-row input::placeholder { color: var(--ink); font-weight: 600; }
.search-card:not(.is-search-open) .search-go {
  background: var(--brand);
  font-weight: 700;
  padding: 13px 22px;
  box-shadow: 0 4px 10px rgba(234, 88, 12, 0.3);
}
.search-card:not(.is-search-open) .search-go:hover { background: var(--brand-ink); }
.search-go:hover { background: var(--accent-deep); }

.search-results {
  display: none;
  position: absolute;
  left: 18px;
  right: 18px;
  top: calc(100% - 8px);
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 12;
  padding: 8px;
  max-height: min(360px, 60vh);
}
.search-results.open { display: block; }
.search-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
}
.search-item:hover,
.search-item[aria-selected="true"] { background: var(--accent-soft); }
.search-item .flag {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper-deep);
  font-size: 20px;
}
.search-item .flag .flag-img {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
}
.search-item .meta { display: flex; flex-direction: column; gap: 1px; }
.search-item .name { font-style: italic; font-weight: 400; color: var(--brand-ink); }
.search-item .price { font-size: 13px; color: var(--muted); }
.search-empty {
  padding: 14px 12px;
  color: var(--muted);
  font-size: 14px;
}

.hero-visual {
  position: relative;
  min-height: 420px;
}
.hero-visual--globe {
  min-height: 0;
  margin-right: -8px;
}
.hero-media .stamp {
  pointer-events: auto;
  left: auto;
  right: 4%;
  bottom: 14%;
}
.orb {
  position: absolute;
  inset: 18px 8px 8px 28px;
  border-radius: 40px;
  background: linear-gradient(180deg, #9fcff2 0%, #e9f2ff 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.orb svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}
.stamp {
  position: absolute;
  right: -6px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: 22px;
  padding: 14px 16px;
  box-shadow: var(--shadow-tight);
  min-width: 180px;
  border: 1px solid var(--line);
}
.stamp-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex: 0 0 auto;
}
.stamp b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.stamp span { color: var(--muted); font-size: 13px; }

/* Trust strip */
.trust-strip {
  padding: 8px 0 12px;
}
.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: color-mix(in srgb, var(--cream) 70%, white);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 10px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
}
.trust-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--sea-soft);
  color: var(--sea);
  flex: 0 0 auto;
}
.eph-icon,
.trust-ico svg,
.ico-dot svg,
.stamp-ico svg,
.step-ico svg,
.eyebrow-ico svg,
.product-specs svg,
.product-assurances svg,
.product-coverage-ico svg,
.product-detail-grid svg {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.trust-item strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.trust-item div span {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

/* Educate */
.edu {
  padding: 88px 0 40px;
}
.edu-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.edu-card {
  /* DOM order is .edu-copy then .edu-card so the section's <h2> precedes the
     card's <h3>; without this the document outline jumped h1 -> h3. `order`
     keeps the card on the left where it has always been. */
  order: -1;
  background: #eef1f8;
  color: var(--ink);
  border-radius: 36px;
  min-height: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
}
.edu-card-media {
  background: #eef1f8;
  padding: 8px 8px 0;
}
.edu-card-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.edu-card-copy {
  padding: 4px 28px 28px;
  background: var(--card);
}
.edu-chip {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.edu-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  line-height: 1.18;
  margin: 14px 0 8px;
  letter-spacing: -0.02em;
  max-width: 12ch;
}
.edu-card p { color: var(--ink-soft); max-width: 32ch; }
.edu-copy .facts {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}
.fact {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.fact b { display: block; font-size: 1.02rem; }
.fact span { color: var(--muted); font-size: 14px; }
.num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent-deep);
}

/* Destinations */
.destinations {
  padding: 72px 0 40px;
}
.destinations:not(.catalog-dest) {
  background: #aee0cb;
}
.dest-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
}
.dest-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 0;
  gap: 8px;
  margin: 22px 0 26px;
}
.dest-tab {
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  cursor: pointer;
}
.dest-tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--on-dark);
  border-color: var(--accent);
  box-shadow: none;
}
.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dest-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border-radius: 24px;
  padding: 18px 20px;
  min-height: 104px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(17, 19, 24, 0.045);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.dest-card:hover,
.dest-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.dest-flag {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  font-size: 30px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
.dest-flag .flag-img {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
}
.dest-card .copy { flex: 1; min-width: 0; }
.dest-card .name {
  display: block;
  font-size: 1.06rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
}
.dest-card .from {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px;
}
.chev {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--ink);
  flex: 0 0 auto;
}
.dest-actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.dest-panel[hidden] { display: none !important; }

/* Why */
.why {
  padding: 80px 0 30px;
}
.why-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  margin-top: 36px;
}
.why-feature,
.why-stack article {
  background: var(--card);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(17, 19, 24, 0.04);
}
.why-feature {
  padding: 0;
  color: var(--ink);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.why-feature-media {
  flex: 1 1 auto;
  min-height: 320px;
  position: relative;
}
.why-feature-media picture,
.why-feature-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.why-feature-media img {
  max-width: none;
  object-fit: cover;
  object-position: 38% 28%;
}
.why-feature-copy {
  position: relative;
  padding: 22px 150px 24px 24px;
  background: var(--card);
}
.why-feature-mark {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: 84px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(234, 88, 12, 0.22));
}
@media (max-width: 640px) {
  .why-feature-copy { padding-right: 24px; }
  .why-feature-mark { display: none; }
}
.why-feature h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
  max-width: 16ch;
}
.why-feature p { color: var(--ink-soft); max-width: 38ch; }
.why-stack { display: grid; gap: 16px; }
.why-stack h3 {
  margin: 10px 0 8px;
  /* was 1.18rem: 0.32px apart from .step h3's 1.2rem at the same heading level,
     a difference nobody can see and no scale produces. */
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.why-stack p { color: var(--ink-soft); }
.ico-dot {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* How */
.how {
  padding: 72px 0;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.step {
  position: relative;
  overflow: hidden;
  background: #aee0cb;
  border-radius: 28px;
  padding: 28px 26px 32px;
  min-height: 280px;
  border: 1px solid transparent;
}
.step-mark {
  position: absolute;
  right: -10px;
  bottom: -18px;
  width: 92px;
  height: 131px;
  object-fit: contain;
  opacity: 0.22;
  transform: rotate(-12deg);
  pointer-events: none;
}
.step > * { position: relative; }
.step > .step-mark { position: absolute; }
.step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}
.step-ico {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: var(--accent-deep);
  box-shadow: 0 6px 16px rgba(0, 84, 77, 0.14), 0 0 0 1px rgba(0, 84, 77, 0.06);
}
.step-ico svg {
  width: 32px;
  height: 32px;
}
.step-num {
  font-family: var(--font-display);
  font-size: 2.35rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.step h3 {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.step p { color: var(--ink-soft); margin: 0 0 10px; }
.step p:last-child { margin-bottom: 0; }
.step .step-note {
  font-size: 0.92rem;
  line-height: 1.5;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 84, 77, 0.14);
}

/* Reviews placeholder */
.reviews {
  padding: 20px 0 60px;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.review-card {
  background: var(--card);
  border-radius: 24px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  min-height: 220px;
}
.review-card .stars { letter-spacing: 2px; color: var(--ink); margin-bottom: 14px; }
.review-card p { color: var(--ink-soft); }
.review-card footer {
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
}

/* FAQ */
.faq {
  padding: 72px 0 96px;
}
.faq .wrap {
  max-width: 1040px;
  text-align: center;
}
.faq .eyebrow {
  justify-content: center;
}
.faq .section-title {
  text-align: center;
}
.faq-list {
  margin-top: 36px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.faq-item button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 13px 18px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
}
.faq-item button .q {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: inherit;
  transition: color 0.18s ease;
}
.faq-item button:hover .q {
  color: var(--accent);
}
.faq-item .icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: transform 0.25s ease, color 0.18s ease;
}
.faq-item .icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.faq-item[open] .icon {
  transform: rotate(180deg);
  color: var(--accent);
}
.faq-item .answer {
  display: none;
  padding: 0 18px 16px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}
.faq-item .answer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 720px) {
  .faq-list { grid-template-columns: 1fr; gap: 10px; }
}
.faq-item[open] .answer {
  display: block;
  animation: faqReveal 0.28s ease;
}
@keyframes faqReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer */
.site-footer {
  background: #aee0cb;
  color: var(--ink-soft);
  padding: 64px 0 28px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 32px;
}
.foot-brand p {
  color: var(--ink-soft);
  margin-top: 14px;
  max-width: 28ch;
}
.site-footer h4 {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); }
.foot-col summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  -webkit-user-select: none;
  user-select: none;
}
.foot-col > ul {
  display: none;
}
.foot-col[open] > ul {
  display: grid;
}
.foot-col summary::-webkit-details-marker {
  display: none;
}
.foot-col summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-soft);
}
.foot-col[open] summary::after {
  content: "−";
}
@media (min-width: 981px) {
  .foot-col summary {
    pointer-events: none;
    cursor: default;
  }
  .foot-col summary::after {
    display: none;
  }
}
@media (max-width: 980px) {
  .foot-grid {
    gap: 12px;
  }
  .foot-col summary {
    margin-bottom: 0;
  }
  .foot-col[open] summary {
    margin-bottom: 14px;
  }
}
.foot-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.foot-social__ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  transition: background 0.15s ease;
}
.foot-social:hover .foot-social__ico { background: var(--accent-deep); }
.foot-social:hover { color: var(--accent-deep); }
.foot-legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.draft-banner {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  width: min(720px, calc(100% - 32px));
  margin: 0 auto 16px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow);
}
.draft-banner b { color: var(--gold); }

/* Specificity (0,1,0): any `.class element { outline: none }` outranks this and
   removes the focus ring with no warning. If you set outline:none anywhere, pair
   it with a matching :focus-visible rule (see .search-row input above). */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Catalog / plans page */
.catalog-hero {
  padding: 28px 0 8px;
}
.catalog-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 12px;
}
.catalog-hero .lede {
  margin-bottom: 22px;
}
.catalog-switch {
  display: none;
  margin: -8px 0 18px;
  font-size: 14px;
}
.catalog-switch a { color: var(--accent-deep); }
.eph-has-destination .catalog-switch { display: block; }
.eph-draft-catalog.eph-has-destination .catalog-dest { display: none; }
.eph-draft-catalog:not(.eph-has-destination) .catalog-body { display: none; }
.eph-draft-catalog .catalog-dest.destinations {
  padding-top: 8px;
  padding-bottom: 64px;
}
.catalog-hero .eyebrow a {
  color: var(--accent-deep);
}
.search-card--compact {
  max-width: 720px;
  padding: 14px 14px 12px;
  border-radius: 24px;
}
.search-card--compact .search-row {
  padding: 4px 4px 4px 14px;
}
.search-card--compact .search-row input {
  padding: 12px 8px;
}
.catalog-body {
  padding: 28px 0 80px;
}

.eph-draft-catalog .etd-results-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 22px;
}
.eph-draft-catalog .etd-results-bar h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  color: var(--ink);
}
.eph-draft-catalog .etd-dest-pill {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--capsule);
  color: var(--capsule-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.2;
}
.eph-draft-catalog .etd-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.eph-draft-catalog .etd-sort select {
  appearance: none;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font: inherit;
  color: var(--ink);
}

.eph-draft-catalog .etd-catalog {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.eph-draft-catalog .etd-filter {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px 16px 16px;
  box-shadow: var(--shadow-tight);
}
.eph-draft-catalog .etd-filter-group + .etd-filter-group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.eph-draft-catalog .etd-filter-group h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.eph-draft-catalog .etd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.eph-draft-catalog .etd-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.eph-draft-catalog .etd-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.eph-draft-catalog .etd-pill:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-dark);
}
.eph-draft-catalog .etd-clear {
  width: 100%;
  min-height: 40px;
  margin-top: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.eph-draft-catalog .etd-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.eph-draft-catalog .etd-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(17, 19, 24, 0.045);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.eph-draft-catalog .etd-plan-card::before { display: none; }
.eph-draft-catalog .etd-plan-card:hover,
.eph-draft-catalog .etd-plan-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.eph-draft-catalog .etd-plan-kicker {
  display: inline-flex;
  align-self: start;
  min-height: 22px;
  margin-bottom: 10px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.eph-draft-catalog .etd-plan-card--regional .etd-plan-kicker,
.eph-draft-catalog .etd-plan-card--topup .etd-plan-kicker,
.eph-draft-catalog .etd-plan-card--local .etd-plan-kicker,
.eph-draft-catalog .etd-plan-card--global .etd-plan-kicker {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.eph-draft-catalog .etd-plan-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.eph-draft-catalog .etd-plan-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.eph-draft-catalog .etd-plan-facts div {
  min-width: 0;
  padding: 0 10px 0 0;
  background: transparent;
  border: 0;
}
.eph-draft-catalog .etd-plan-facts div + div {
  padding: 0 0 0 12px;
  border-left: 1px solid var(--line);
}
.eph-draft-catalog .etd-plan-facts span,
.eph-draft-catalog .etd-plan-coverage span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eph-draft-catalog .etd-plan-facts strong,
.eph-draft-catalog .etd-plan-coverage strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.eph-draft-catalog .etd-plan-coverage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 8px;
  margin-top: 12px;
}
.eph-draft-catalog .etd-plan-coverage p {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eph-draft-catalog .etd-plan-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}
.eph-draft-catalog .etd-plan-price {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.eph-draft-catalog .etd-view-offer {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.eph-draft-catalog .etd-view-arrow {
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.18s ease;
}
.eph-draft-catalog .etd-plan-card:hover .etd-view-arrow {
  transform: translateX(3px);
}
.eph-draft-catalog .etd-next {
  display: inline-flex;
  margin-top: 22px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  font-weight: 500;
}
.eph-draft-catalog .etd-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--muted);
  background: var(--cream);
  border-radius: 24px;
}

@media (max-width: 980px) {
  .hero-grid,
  .edu-grid,
  .why-grid,
  .foot-grid,
  .eph-draft-catalog .etd-catalog { grid-template-columns: 1fr; }
  .dest-grid,
  .review-grid,
  .trust-row,
  .eph-draft-catalog .etd-plan-grid { grid-template-columns: repeat(2, 1fr); }
  .eph-draft-catalog .etd-filter { position: static; }
  .steps { grid-template-columns: 1fr; }
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 28px 0 0;
  }
  .hero-media {
    position: relative;
    height: 340px;
    order: 2;
    margin-top: 12px;
  }
  .hero-media picture {
    left: 0;
    width: 100%;
  }
  .hero-media::after { display: none; }
  .hero-photo { object-position: 62% 38%; }
  .hero > .wrap { order: 1; }
  .hero-inner { max-width: none; }
  .hero-visual { min-height: 280px; }
  .hero-visual--globe { min-height: 0; }
  .hero-media .stamp {
    left: 16px;
    right: auto;
    bottom: 16px;
  }
  .nav-panel { display: none; }
  .menu-toggle { display: grid; place-items: center; }
  .nav-panel:has(.nav-main.is-open) {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--cream);
    padding: 18px 24px 24px;
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
    gap: 14px;
  }
  .nav-panel:has(.nav-main.is-open) .nav-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }
  .nav-panel:has(.nav-main.is-open) .header-cta {
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
}

/* Tablet band (721-980px). The max-width:980 block above collapses .why-grid
   and .steps to one column, so at 768px these cards run the full 672px. Their
   one-line paragraphs then set 89-95 characters per line (target 45-75), and
   .step-head's space-between throws the step number ~650px from the heading it
   numbers. Capping the measure fixes the first (measured: 45-49 chars/line at
   62ch); packing the step header fixes the second (650px -> 60px).
   Going to two columns here does NOT work: at 768px it leaves only 280px of
   content per card, which drops the measure to ~38 chars. */
.why-stack p,
.step p { max-width: 62ch; }

@media (min-width: 721px) and (max-width: 980px) {
  .step-head {
    justify-content: flex-start;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .dest-grid,
  .review-grid,
  .trust-row,
  .eph-draft-catalog .etd-plan-grid { grid-template-columns: 1fr; }
  .eph-draft-catalog .etd-results-bar { flex-direction: column; align-items: flex-start; }
  .search-row { flex-wrap: wrap; padding: 10px; }
  .search-go { width: 100%; }
  .hero { padding-top: 18px; }
  .why-feature { min-height: 0; }
  .why-feature-media { min-height: 0; aspect-ratio: 16 / 10; }
  .dest-head { flex-direction: column; align-items: flex-start; }
  .orb { inset: 0; }
  .stamp { right: 8px; bottom: 8px; }
  .hero-media { height: 240px; }
  .hero-media .stamp { left: 12px; right: auto; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .eph-draft-catalog .etd-results-bar { transition: none; }
  html { scroll-behavior: auto; }
  .btn, .dest-card, .related-card { transition: none; }
}

/* Draft product page */
.product-page {
  padding: 18px 0 72px;
}
.product-back {
  margin: 0 0 14px;
  font-size: 14px;
}
.product-back a { color: var(--accent-deep); }

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  /* The buy card spans all three rows and is usually taller than they are.
     Without explicit sizing, grid hands that surplus out evenly and it reappears
     as gaps between the title, the specs and the note. Pinning the first two
     rows to their content pushes the whole surplus into the last row, below the
     note, where it reads as ordinary page padding. */
  grid-template-rows: min-content min-content 1fr;
  gap: 14px 22px;
  align-items: start;
}
.product-intro { min-width: 0; }
.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.product-provider {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.product-provider-mark {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.product-provider-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.product-provider-mark span {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.product-provider-copy {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}
.product-provider-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.product-provider-copy strong {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.product-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.product-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 10px;
}
.product-coverage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.product-coverage-ico {
  display: grid;
  place-items: center;
  color: var(--accent);
}
.product-coverage-ico svg { width: 18px; height: 18px; }
.product-flags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}
.product-flags b {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}

.product-buy {
  /* Span all three rows of column 1 (intro / specs / callout). Without this the
     card sits in row 1 alone, so row 1 grows to the card's height and the space
     beside the title is dead. The mobile rule below resets it so DOM order —
     title, price, specs — still applies in the single-column layout. */
  grid-column: 2;
  grid-row: 1 / span 3;
  position: sticky;
  top: calc(var(--header-h) + 14px);
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-tight);
}
.product-buy-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.product-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 12px;
}
.product-price-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.product-price-ccy {
  color: var(--muted);
  font-size: 13px;
}
.product-add-form { margin: 0; }
.product-add {
  width: 100%;
  min-height: 46px;
  justify-content: center;
}
.product-buy p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.product-assurances {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.product-assurances li,
.product-assurances a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
}
.product-assurances a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-color: rgba(0, 107, 99, 0.45);
  text-underline-offset: 3px;
  font-weight: 600;
}
.product-assurances a:hover { color: var(--accent); text-decoration-color: currentColor; }
.product-assurances svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

/* Column 1, not 1 / -1: the buy card on the right is much taller than the title
   block on the left (roughly 590px vs 163px once Apple/Google Pay render), and
   align-items:start left that difference as dead space. Pulling the spec cards
   up into the left column fills it and puts Data/Validity/Network next to the
   price, where a buyer is already looking. */
.product-specs {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.product-specs div {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
}
.product-specs span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.product-specs svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.product-specs strong {
  font-size: 14px;
  font-weight: 500;
}
.product-callout {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.product-related,
.product-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.product-related-head,
.product-block h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.product-related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.product-related-head a {
  color: var(--accent-deep);
  font-size: 14px;
}
.product-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100%;
  padding: 12px 13px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.related-card:hover,
.related-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-tight);
}
.related-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.related-card strong {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.related-price {
  margin-top: auto;
  padding-top: 6px;
  color: var(--accent-deep);
  font-weight: 500;
}

.product-block-lede {
  margin: -4px 0 10px;
  color: var(--ink-soft);
}
.product-block > p { color: var(--ink-soft); font-size: 14px; }
.product-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.product-detail-grid div {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
}
.product-detail-grid span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.product-detail-grid svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.product-detail-grid strong { font-size: 14px; font-weight: 500; }
.product-detail-grid p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}
.product-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.product-info-list li {
  position: relative;
  padding-left: 14px;
  color: var(--ink-soft);
  font-size: 14px;
}
.product-info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.product-coverage-list {
  margin-top: 12px;
}
.product-coverage-list summary {
  cursor: pointer;
  color: var(--accent-deep);
  font-size: 14px;
}
.product-coverage-list p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

@media (max-width: 1150px) and (min-width: 981px) {
  .product-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .product-hero { grid-template-columns: 1fr; grid-template-rows: auto; }
  .product-buy { grid-column: auto; grid-row: auto; position: static; }
  .product-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .product-provider-mark { width: 64px; height: 64px; }
  .product-info-list,
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-related-grid { grid-template-columns: 1fr; }
}

/* Shared chrome on cart / checkout / account / content pages */
.btn-lang {
  min-width: 52px;
  padding: 10px 12px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.eph-draft-shell .draft-main {
  min-height: 52vh;
}

.eph-draft-shell .etd-wrap {
  width: min(var(--wrap), calc(100% - 40px));
  margin-inline: auto;
}

.eph-draft-shell .etd-page-head {
  max-width: 760px;
  padding: 36px 0 72px;
}

.eph-draft-shell.woocommerce-cart .etd-page-head,
.eph-draft-shell.woocommerce-checkout .etd-page-head,
.eph-draft-shell.woocommerce-account .etd-page-head,
.eph-draft-shell.woocommerce-order-received .etd-page-head {
  max-width: none;
  width: min(var(--wrap), calc(100% - 40px));
  padding: 28px 0 72px;
}

.eph-draft-shell .etd-page-head h1,
.eph-draft-shell .etd-check h1,
.eph-draft-shell .woocommerce-account h1,
.eph-draft-shell .wp-block-post-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 18px;
}

.eph-draft-shell .etd-page-content {
  color: var(--ink-soft);
  font-size: 16px;
}
.eph-draft-shell .etd-page-content p {
  margin: 0 0 14px;
}
.eph-draft-shell .etd-page-content h2 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 28px 0 12px;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.eph-draft-shell .etd-page-content h3 {
  margin: 22px 0 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
}
.eph-draft-shell .etd-page-content ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.eph-draft-shell .etd-page-content a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eph-draft-shell .etd-check {
  width: min(720px, calc(100% - 40px));
  margin: 36px auto 72px;
}
.eph-draft-shell .etd-check-lead {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.eph-draft-shell .etd-check-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-tight);
}
.eph-draft-shell .etd-check-form {
  display: grid;
  gap: 14px;
}
.eph-draft-shell .etd-check-form label {
  display: grid;
  gap: 6px;
  font-weight: 500;
  color: var(--ink);
}
.eph-draft-shell .etd-check-form input,
.eph-draft-shell .woocommerce input.input-text,
.eph-draft-shell .woocommerce-form-login input[type="text"],
.eph-draft-shell .woocommerce-form-login input[type="password"],
.eph-draft-shell .woocommerce-form-login input[type="email"] {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #fff;
  font-size: 16px;
}
.eph-draft-shell .etd-check-submit,
.eph-draft-shell .etd-check-resend,
.eph-draft-shell .etd-check-topup,
.eph-draft-shell .etd-check-signin-btn,
.eph-draft-shell .woocommerce-form-login button,
.eph-draft-shell .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-dark);
  font-weight: 500;
  cursor: pointer;
}
.eph-draft-shell .etd-check-resend,
.eph-draft-shell .etd-check-topup {
  background: var(--card);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.eph-draft-shell .etd-check-help,
.eph-draft-shell .etd-topup-muted {
  color: var(--muted);
  font-size: 13px;
}
.eph-draft-shell .etd-check-notice {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
}
.eph-draft-shell .etd-check-notice--ok { background: var(--sea-soft); color: #17633a; }
.eph-draft-shell .etd-check-notice--error { background: #ffecec; color: #9b1c1c; }
.eph-draft-shell .etd-check-results { display: grid; gap: 14px; margin-top: 20px; }
.eph-draft-shell .etd-order-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.eph-draft-shell .etd-order-kicker,
.eph-draft-shell .etd-order-date { color: var(--muted); font-size: 13px; margin: 0; }
.eph-draft-shell .etd-order-card h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 4px 0;
}
.eph-draft-shell .etd-order-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--cream);
}
.eph-draft-shell .etd-order-card--issued .etd-order-status { background: #e8f6ee; color: #17633a; }
.eph-draft-shell .etd-order-card--issuing .etd-order-status { background: #fff6dc; color: #8a6d00; }
.eph-draft-shell .etd-order-card--partial .etd-order-status,
.eph-draft-shell .etd-order-card--failed .etd-order-status { background: #ffecec; color: #9b1c1c; }

.eph-draft-shell .woocommerce-account .u-column2.col-2,
.eph-draft-shell .woocommerce-account .woocommerce-form-register {
  display: none !important;
}
.eph-draft-shell .woocommerce-account .u-columns { display: block; }
.eph-draft-shell .woocommerce-account .u-column1.col-1 {
  width: 100%;
  max-width: 480px;
  float: none;
}
.eph-draft-shell .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.eph-draft-shell .woocommerce-MyAccount-navigation a {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
}
.eph-draft-shell .woocommerce-MyAccount-navigation .is-active a {
  background: var(--ink);
  color: var(--on-dark);
  border-color: var(--ink);
}
.eph-draft-shell .woocommerce-MyAccount-content {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  background: var(--card);
}
.eph-draft-shell .woocommerce-MyAccount-content p { margin: 0 0 12px; }
.eph-draft-shell .woocommerce-MyAccount-content a { color: var(--accent-deep); }

/* WooCommerce Blocks — cart */
.eph-draft-shell .wp-block-woocommerce-cart,
.eph-draft-shell .wp-block-woocommerce-checkout,
.eph-draft-shell .wc-block-cart,
.eph-draft-shell .wc-block-checkout {
  font-family: var(--font-ui);
  color: var(--ink);
}
.eph-draft-shell .wc-block-cart {
  margin-top: 8px;
}
.eph-draft-shell table.wc-block-cart-items,
.eph-draft-shell .wc-block-cart-items {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}
.eph-draft-shell .wc-block-cart-item__wrap,
.eph-draft-shell .wc-block-cart-items__row {
  padding: 16px 18px;
}
.eph-draft-shell .wc-block-cart-item__product a {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}
.eph-draft-shell .wc-block-cart-item__prices,
.eph-draft-shell .wc-block-formatted-money-amount {
  font-weight: 500;
}
.eph-draft-shell .wc-block-components-sidebar,
.eph-draft-shell .wp-block-woocommerce-cart-totals-block,
.eph-draft-shell .wp-block-woocommerce-checkout-totals-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-tight);
  padding: 8px;
}
.eph-draft-shell .wc-block-cart__totals-title,
.eph-draft-shell .wc-block-components-order-summary__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.eph-draft-shell .wc-block-components-button,
.eph-draft-shell .wp-element-button,
.eph-draft-shell .wc-block-cart__submit-button,
.eph-draft-shell .wc-block-components-checkout-place-order-button {
  border-radius: var(--radius-pill) !important;
  min-height: 48px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  background: var(--accent) !important;
  color: var(--on-dark) !important;
  border: 0 !important;
}
.eph-draft-shell .wc-block-components-button:hover,
.eph-draft-shell .wp-element-button:hover {
  background: var(--accent-deep) !important;
}
.eph-draft-shell .is-style-outline .wc-block-components-button,
.eph-draft-shell .wc-block-components-button.is-link {
  background: transparent !important;
  color: var(--accent-deep) !important;
}
.eph-draft-shell .wc-block-components-text-input input,
.eph-draft-shell .wc-block-components-textarea textarea,
.eph-draft-shell .wc-block-components-select select {
  border-radius: 14px !important;
  border-color: var(--line-strong) !important;
  min-height: 46px;
  font-family: var(--font-ui);
}
.eph-draft-shell .wc-block-components-notice-banner,
.eph-draft-shell .woocommerce-info,
.eph-draft-shell .woocommerce-message,
.eph-draft-shell .woocommerce-error {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--cream);
}
.eph-draft-shell .wp-block-woocommerce-empty-cart-block {
  padding: 28px 8px 12px;
  text-align: left;
}
.eph-draft-shell .wc-block-cart__empty-cart__title {
  font-family: var(--font-display);
  font-weight: 500;
}

/* Checkout + thank-you */
.eph-draft-shell .wc-block-checkout {
  margin-top: 8px;
}
.eph-draft-shell .woocommerce-order {
  display: grid;
  gap: 18px;
}
.eph-draft-shell .woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 8px;
}
.eph-draft-shell .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eph-draft-shell .woocommerce-order-overview li {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
  padding: 12px 14px;
}
.eph-draft-shell .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
}
.eph-draft-shell .woocommerce-table--order-details th,
.eph-draft-shell .woocommerce-table--order-details td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

@media (max-width: 720px) {
  /* 曾经在这里把 Check order 在小屏隐藏（.header-cta .btn-ghost）。
     已取消：查询订单是老客户的关键入口，头部必须能进得去。
     菜单面板本身是 flex-wrap: wrap + width: 100%，放得下两个按钮。
     不要再加回来。 */
}

/* Destination / provider thumbs instead of Woo placeholder art */
.eph-draft-shell .wc-block-grid__products {
  gap: 14px;
}
.eph-draft-shell .wc-block-grid__product {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  padding: 16px 12px 18px;
  box-shadow: var(--shadow-tight);
}
.eph-draft-shell .wc-block-grid__product-image {
  background: transparent !important;
  margin: 0 0 10px;
}
.eph-draft-shell .wc-block-grid__product-image img,
.eph-draft-shell .eph-dest-thumb {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 22px;
  margin-inline: auto;
  background: var(--cream);
  box-shadow: var(--shadow-tight);
}
.eph-draft-shell .eph-dest-thumb--logo,
.eph-draft-shell .eph-dest-thumb--region {
  object-fit: contain;
  padding: 14px;
  background: #fff;
}
.eph-draft-shell .wc-block-cart-item__image img,
.eph-draft-shell .wc-block-components-product-image img,
.eph-draft-shell .wc-block-components-order-summary-item__image img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--cream);
}
.eph-draft-shell .wp-block-heading.with-empty-cart-icon,
.eph-draft-shell .wc-block-cart__empty-cart__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
}

/* ===== Mobile rebuild: filter drawer + chips + price slider + add-to-cart ===== */
.eph-draft-catalog .etd-filter-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.eph-draft-catalog .etd-filter-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.eph-draft-catalog .etd-filter-head strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
}
.eph-draft-catalog .etd-filter-close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
}
.eph-draft-catalog .etd-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(17, 19, 24, 0.42);
}
.eph-draft-catalog .etd-filter-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.eph-draft-catalog .etd-filter-actions .etd-clear {
  flex: 1;
  width: auto;
  margin-top: 0;
}
.eph-draft-catalog .etd-apply {
  display: none;
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-dark);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

@media (max-width: 980px) {
  .eph-draft-catalog .etd-filter-toggle {
    display: inline-flex;
  }
  .eph-draft-catalog .etd-results-bar {
    /* 与桌面端统一：去掉墨绿毛玻璃与白字，改用结果区同色实底，
       黄色胶囊、Filters、Sort 全部沿用桌面样式。
       吸顶时背景必须不透明，否则下面的卡片会透上来。
       左右负边距 + 等量内边距 = 背景铺满整屏宽（.wrap 两侧各留 20px），
       否则卡片会从背景两侧的缝隙里滚过去。 */
    position: sticky;
    top: var(--header-h);
    z-index: 30;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    background: var(--catalog-bg);
    border: 0;
    border-radius: 0;
    margin: 0 -20px 12px;
    padding: 10px 56px 10px 20px;
    box-shadow: 0 8px 12px -10px rgba(17, 19, 24, 0.45);
    transition: transform 0.22s ease, opacity 0.18s ease;
  }
  /* 下滑时整条移出视口顶部（-100% 是自身高度，再减 --header-h 才能连吸顶
     位置一起让开），配合 opacity 0 保证不受层级影响。transform 不影响布局，
     所以吸顶状态下这块视口是真的还给内容了。 */
  .eph-draft-catalog .etd-results-bar.is-hidden-on-scroll {
    transform: translateY(calc(-100% - var(--header-h)));
    opacity: 0;
    pointer-events: none;
  }
  .eph-draft-catalog .etd-results-close {
    position: absolute;
    top: 8px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }
  body.etd-results-collapsed .etd-results-bar h2,
  body.etd-results-collapsed .etd-results-bar .etd-sort,
  body.etd-results-collapsed .etd-results-bar .etd-filter-toggle {
    display: none;
  }
  body.etd-results-collapsed .etd-results-bar {
    padding: 0;
    width: 54px;
    height: 54px;
    min-height: 0;
    /* 上面给了 margin: 0 -20px 12px，收起态要复位，否则小圆钮会偏出屏幕 */
    margin: 0 0 12px auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* 原来这里把 h2/胶囊/Filters/Sort 全改成白字，是配墨绿毛玻璃用的。
     改成浅色实底后一律删掉，直接继承桌面样式，两端观感一致。 */
  /* 「Sort」这个词隐藏掉：选项本身写着 Price: Low to High，已经自明。
     省下这 60px 才能让 Filters 和 Sort 挤进同一行，整条从 3 行降到 2 行。 */
  .eph-draft-catalog .etd-sort {
    gap: 0;
    font-size: 0;
    /* style.css 的 @media (max-width: 560px) 里有 .etd-sort { width: 100% }，
       会让排序独占一整行。这里用更高的特异性覆盖掉，让它和 Filters 同行。 */
    width: auto;
  }
  .eph-draft-catalog .etd-sort select {
    font-size: 13px;
  }
  .eph-draft-catalog .etd-filter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    max-height: 82vh;
    overflow-y: auto;
    margin: 0;
    border-radius: 20px 20px 0 0;
    transform: translateY(105%);
    transition: transform 0.28s ease;
  }
  body.etd-filter-open .etd-filter {
    transform: translateY(0);
  }
  body.etd-filter-open .etd-filter-backdrop {
    display: block;
  }
  .eph-draft-catalog .etd-filter-head {
    display: flex;
  }
  .eph-draft-catalog .etd-apply {
    display: block;
  }
}

/* Price slider */
.eph-draft-catalog .etd-price-range {
  position: relative;
  height: 34px;
  margin-top: 4px;
}
.eph-draft-catalog .etd-price-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--line-strong);
}
.eph-draft-catalog .etd-price-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 2px;
  background: var(--accent);
}
.eph-draft-catalog .etd-price-input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  transform: translateY(-50%);
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  pointer-events: none;
  background: transparent;
}
.eph-draft-catalog .etd-price-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  cursor: pointer;
}
.eph-draft-catalog .etd-price-input::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  cursor: pointer;
}
.eph-draft-catalog .etd-price-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

/* One-click add-to-cart on card */
.eph-draft-catalog .etd-plan-add {
  margin-top: 12px;
}
.eph-draft-catalog .etd-add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-dark);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.18s ease;
}
.eph-draft-catalog .etd-add-to-cart:hover {
  opacity: 0.9;
}

/* ===== 移动端搜索：点搜索框 → 输入条消失 → 纯国家列表 ===== */
/* 全屏国家列表打开时，把 .hero 抬到 .site-header（z-index:40）之上，否则页头盖住列表头部、
   Cancel 按钮无法点击（2026-09-07 实测：点 Cancel 命中的是页头的 .menu-toggle）。

   必须改 .hero 而不是 .hero-inner 或 .search-card：.hero 上有 isolation:isolate，
   它以 z-index:auto（≈0）在 .site 里建了一个层叠上下文，把整个 hero 子树钉在第 0 层。
   所以 .search-card 的 z-index:70 和 .hero-inner 的任何值都翻不过 z-index:40 的页头——
   层叠只在同一个上下文内部比较。抬 .hero 是唯一能生效的那一层（isolate 保留不动）。 */
body.dest-search-open .hero { z-index: 80; }

.search-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  /* 标题与 Cancel 一行，筛选框整宽换到第二行 */
  flex-wrap: wrap;
  row-gap: 12px;
}
/* 全屏国家列表里的筛选框。首页那个输入框在移动端是 readonly（点一下开列表、不弹键盘），
   这一个只在列表已经打开后才出现，所以打字是「用户主动选择」而不是被迫。
   它驱动的是和桌面端同一条 render() 路径，因此结果是带价格的行而不是纯网格。 */
.search-filter {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--line, #d7dde2);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;           /* 不能小于 16px，否则 iOS Safari 聚焦时会整页放大 */
  padding: 12px 14px;
  -webkit-appearance: none;
  appearance: none;
}
.search-filter::placeholder { color: var(--muted, #62636c); font-weight: 400; }
.search-filter:focus-visible {
  outline: 2px solid var(--accent, #006b63);
  outline-offset: 1px;
  border-color: transparent;
}
.search-header-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.search-close {
  border: 0;
  background: transparent;
  color: var(--accent-deep);
  font: inherit;
  font-weight: 500;
  padding: 10px 8px;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .search-card.is-search-open {
    position: fixed;
    inset: 0;
    z-index: 70;
    max-width: none;
    margin: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    background: #e6eaf0;
  }
  .search-card.is-search-open .search-header {
    display: flex;
  }
  /* 输入条 + 顶部标签整个消失 */
  .search-card.is-search-open .search-row,
  .search-card.is-search-open > label {
    display: none;
  }
  .search-card .search-go {
    display: none;
  }
  /* Mobile only: an orange "go" arrow inside the row until a country is picked
     (the real Find plans button is hidden on mobile until .has-selection). */
  .search-card:not(.is-search-open):not(.has-selection) .search-row::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    border-radius: 50%;
    background: var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m13 6 6 6-6 6'/></svg>") center / 20px 20px no-repeat;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.35);
    pointer-events: none;
  }
  .search-card:not(.is-search-open) .search-row { padding-right: 60px; padding-left: 12px; }
  .search-card:not(.is-search-open) .search-row input { font-size: 1rem; padding-left: 4px; min-width: 0; }
  /* 已选国家后必须给出触发搜索的入口：移动端把框内的 Search 显示出来。
     全屏选国家模式下 .search-row 整体隐藏，所以这里不会误显示。 */
  .search-card.has-selection .search-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .search-card.is-search-open .search-results {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-height: none;
    flex: 1;
    margin-top: 0;
    border: 0;
    box-shadow: none;
    padding: 4px;
  }
}

/* ===== 卡片更明显：底色对比 + 清晰边框 + 阴影 ===== */
.eph-draft-catalog .catalog-body {
  background: var(--catalog-bg);
}
.eph-draft-catalog .etd-plan-card {
  border: 2px solid #87919f;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(17, 19, 24, 0.12), 0 20px 48px rgba(17, 19, 24, 0.20);
}

/* ===== 国家网格（浏览模式，不输入直接选）===== */
.search-results.search-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
}
.search-results .country-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  min-height: 54px;
  border: 1.5px solid #a9b2bf;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(17, 19, 24, 0.08);
  cursor: pointer;
  text-align: left;
}
.search-results .country-item:hover,
.search-results .country-item:active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.search-results .country-item .flag {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 0;
  font-size: 22px;
}
.search-results .country-item .flag .flag-img {
  width: 32px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line);
}
.search-results .country-item .name {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 多国选择：黄色胶囊 + 加号 + 搜索按钮 ===== */
.search-selected {
  /* 胶囊现在渲染在 .search-row 内部、输入框之前，
     所以不能再有 margin-top（那是原来放在框外一行时用的）。 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.search-selected[hidden] {
  display: none;
}
.search-capsule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--capsule);
  color: var(--capsule-ink);
  font-weight: 600;
  font-size: 14px;
}
.search-capsule-x {
  border: 0;
  background: transparent;
  color: var(--capsule-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.search-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px dashed #a9b2bf;
  border-radius: 50%;
  background: transparent;
  color: #667085;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.search-do {
  border: 0;
  border-radius: 999px;
  background: #0e3b32;
  color: #ffffff;
  padding: 8px 18px;
  font-weight: 500;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   Express Checkout（Apple Pay / Google Pay / Link）紧凑排版

   Stripe 把每个钱包挂载成 #wc-stripe-express-checkout-element 下的
   独立子 div，默认各自全宽竖排、非常占地方，故改为并排。

   一行两个，不是三个：Apple 的按钮规范要求最小宽度 100pt，移动端卡片
   约 300px，三个并排每个只有 94px，Apple Pay 会直接不渲染（表现为左边
   空一格、另外两个被挤到右边）。两个一行各约 146px，安全超过下限。

   flex-grow 设 0，避免落单的按钮被拉伸成整行；justify-content: center
   让第二行那个单独的按钮居中。

   容器初始 display:none，插件用 jQuery .show() 显示会写内联 display，
   故用 :not([style*="none"]) 限定「未隐藏时才应用」——既压过内联值，
   又不破坏插件自己的隐藏逻辑。
   --------------------------------------------------------------- */
#wc-stripe-express-checkout-element:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

#wc-stripe-express-checkout-element > div {
  flex: 0 1 calc(50% - 4px);
  min-width: 110px;
}

/* 加载期间预留一行按钮高度：容器初始内联 display:none，不占位，
   按钮挂载后会把下方内容顶下去。这里让「隐藏态」仍占 44px，
   消除这次跳动。代价：完全没有可用钱包的设备会残留一小块空白。 */
#wc-stripe-express-checkout-element[style*="display: none"],
#wc-stripe-express-checkout-element[style*="display:none"] {
  display: block !important;
  min-height: 44px;
  margin-top: 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, #eef1f4 0%, #f7f8fa 40%, #eef1f4 80%);
  background-size: 200% 100%;
  animation: etdShimmer 1.4s ease-in-out infinite;
}
@keyframes etdShimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  #wc-stripe-express-checkout-element[style*="display: none"],
  #wc-stripe-express-checkout-element[style*="display:none"] { animation: none; }
}

/* 结账页隐藏 Blocks 的 Express Checkout 区域。
   设计上钱包入口只放在产品页，点 Check out 进来就是信用卡路径。
   为什么用 CSS 而不是设置：Blocks 结账走 Store API 上下文，那里
   is_checkout() 为假，Stripe 的 express_checkout_button_locations
   里的「checkout」判断根本不会被触发，改设置对它无效。
   注意：元素仍会在后台初始化，这只是视觉隐藏。 */
body.woocommerce-checkout .wc-block-components-express-payment,
body.woocommerce-checkout .wc-block-components-express-payment-continue-rule {
  display: none !important;
}

/* ---------------------------------------------------------------
   Catalog page, mobile: once results are showing, collapse the search
   card into one slim "change destination" bar so the plan list gets the
   screen. Desktop keeps the card visible. (page-catalog.php adds
   .is-collapsed and the toggle only when a destination is selected.)
   --------------------------------------------------------------- */
.search-toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #006b63 0%, #00564f 100%);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 84, 77, 0.22);
}
.search-toggle__ico { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.search-toggle__label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--capsule);
  color: var(--capsule-ink);
  font-weight: 600;
  font-size: 14px;
}
.search-toggle__hint { margin-left: auto; }
.search-toggle__hint { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #d9f3ee; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 980px) {
  .search-toggle { display: flex; }
  .search-card.is-collapsed { display: none; }
  .search-toggle.is-hidden { display: none; }
  /* results first: trim the hero when a destination is already chosen */
  .catalog-hero.has-dest .lede { display: none; }
}

/* The destination pill in the results bar reopens the search card (page-catalog.php). */
.eph-draft-catalog .etd-dest-pill[role="button"] { cursor: pointer; }
.eph-draft-catalog .etd-dest-pill[role="button"]::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.85;
}

/* Latest guides (homepage, rendered by front-page.php) */
.guides { padding: 72px 0 24px; }
.guides-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.guide-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.guide-card__media { aspect-ratio: 3 / 2; background: #eef1f4; overflow: hidden; }
.guide-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.guide-card__date { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.guide-card h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.guide-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.guide-card__more { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--accent-deep); }
@media (max-width: 980px) {
  .guides-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .guides { padding-top: 48px; }
  .guides-head { flex-direction: column; align-items: flex-start; }
  .guides-grid { grid-template-columns: 1fr; }
}

/* 促销徽章。只可能是 SPECIAL OFFER（见 mu-plugins/etd-catalog-sync.php 的白名单）。
   刻意和分类徽章（--gold 圆角胶囊 + 深色字）做成不同形状：这里是小圆角实底方片 + 白字，
   否则两个同尺寸胶囊并排会糊成一片。#fff on --brand-ink #b8430a 实测 5.46:1，过 AA。
   也刻意避开付款卡那套琥珀胶囊/杏色按钮的配色，两处不在同一区域但不该互相呼应。 */
.etd-promo-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  background: var(--brand-ink, #b8430a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.product-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.etd-plan-kicker .etd-promo-badge { margin-left: 8px; }

/* 目的地区块里的地图入口。放在「View all destinations」旁边——用户正在浏览目的地时
   给他第二个动作，位置最对；地图本身在 /map/，不进首页，首页 LCP 一个字节都不多背。 */
.dest-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.dest-map-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.dest-map-link__ico { display: inline-flex; color: var(--accent, #006b63); }

/* 产品页的比价入口：看商品页的人已经知道去哪了，缺的是「这个价好不好」 */
.product-compare-link { margin: 10px 0 0; font-size: 0.9rem; }
.product-compare-link a { color: var(--accent-deep, #00564f); }

/* 首页的地图入口卡。图写死宽高 + aspect-ratio，lazy load 不会造成 CLS。 */
.dest-map-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  margin: 28px auto 0;
  max-width: 900px;
  border: 1px solid var(--line, #d7dde2);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dest-map-card:hover { border-color: var(--accent, #006b63); box-shadow: 0 8px 24px rgba(23,32,51,.08); }
.dest-map-card__media { display: block; background: #eef3f6; }
.dest-map-card__media img { display: block; width: 100%; height: 100%; aspect-ratio: 1440 / 863; object-fit: cover; }
.dest-map-card__copy { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px 24px; }
.dest-map-card__copy strong { font-family: var(--font-display, inherit); font-size: 1.3rem; letter-spacing: -0.01em; }
.dest-map-card__copy span { font-size: 0.92rem; color: var(--muted); line-height: 1.55; }
.dest-map-card__copy em { font-style: normal; font-weight: 600; color: var(--accent-deep, #00564f); font-size: 0.95rem; }
@media (max-width: 720px) {
  .dest-map-card { grid-template-columns: 1fr; }
  .dest-map-card__copy { padding: 18px; }
}