/* ============================================================
   pragueoldtimertours.com — main stylesheet
   Bottle Green & Brass. Component map: components.md
   ============================================================ */

/* --- Reset / base ---------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,picture,video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--c-ink); line-height: 1.2; margin: 0 0 var(--s-2); }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--s-1); }
p  { margin: 0 0 var(--s-2); }
ul { margin: 0 0 var(--s-2); padding-left: 1.25rem; }
em { font-style: italic; color: var(--c-brass-dark); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only-focusable { position: absolute; left: -9999px; }
.sr-only-focusable:focus { left: 1rem; top: 1rem; background: var(--c-green); color: var(--c-cream); padding: 0.5rem 1rem; z-index: 100; }
.pot-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }

/* --- Tokens (single source) ------------------------------ */
:root {
  --c-green:        #1f3a2c;   /* British racing green */
  --c-green-dark:   #14241b;
  --c-green-soft:   #2c5240;
  --c-cream:        #f4ecd8;
  --c-cream-50:     #faf5e6;
  --c-brass:        #b48a3b;
  --c-brass-dark:   #8c6929;
  --c-brass-soft:   #d6b779;
  --c-ink:          #1a1a1a;
  --c-ink-soft:     #4a4a4a;
  --c-ink-muted:    #7a7a7a;
  --c-line:         #d8cba8;
  --c-bg:           #ffffff;
  --c-bg-soft:      #faf5e6;
  --c-success:      #2a7a3c;
  --c-star:         #c9a046;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --container: 1140px;
  --stickybar-h: 72px;

  --font-display: Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Layout helpers -------------------------------------- */
.pot-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-3); }
.pot-section { padding: var(--s-6) 0; }
.pot-section__lead { color: var(--c-ink-soft); max-width: 720px; margin: 0 0 var(--s-4); font-size: 1.05rem; }
.pot-section--alt  { background: var(--c-bg-soft); }
.pot-section--dark { background: var(--c-green-dark); color: var(--c-cream); }
.pot-section--dark h2 { color: var(--c-cream); }
.pot-section--dark p  { color: var(--c-brass-soft); }
.pot-text-center { text-align: center; }
.pot-mt-3 { margin-top: var(--s-3); }
.pot-mt-4 { margin-top: var(--s-4); }
.pot-link { color: var(--c-green); font-weight: 500; }

/* --- Header / nav ---------------------------------------- */
.pot-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.pot-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem var(--s-3); }
.pot-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  color: var(--c-green);
  line-height: 1;
  text-decoration: none;
}
.pot-logo:hover { text-decoration: none; }
.pot-logo__top,
.pot-logo__bottom {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
}
.pot-logo__top    { color: var(--c-brass-dark); }
.pot-logo__bottom { color: var(--c-green); }
.pot-logo__main {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--c-green);
  border-bottom: 1.5px solid var(--c-brass-dark);
  padding-bottom: 1px;
  margin: 1px 0;
  line-height: 1;
}
@media (max-width: 640px) {
  .pot-logo__top,
  .pot-logo__bottom { font-size: 0.58rem; letter-spacing: 0.3em; }
  .pot-logo__main { font-size: 1.2rem; }
}
.pot-nav { display: flex; gap: 1.25rem; }
.pot-nav__link { color: var(--c-ink); font-size: 0.95rem; font-weight: 500; }
.pot-nav__link:hover { color: var(--c-green); text-decoration: none; }

/* --- Buttons --------------------------------------------- */
.pot-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.05s ease;
}
.pot-btn:active { transform: scale(0.98); }
.pot-btn--primary { background: var(--c-brass); color: var(--c-green-dark); }
.pot-btn--primary:hover { background: var(--c-brass-dark); color: var(--c-cream); text-decoration: none; }
.pot-btn--ghost { background: transparent; color: var(--c-green); border-color: var(--c-green); }
.pot-btn--ghost:hover { background: var(--c-green); color: var(--c-cream); text-decoration: none; }
.pot-btn--block { width: 100%; }
.pot-btn--lg { padding: 0.95rem 1.6rem; font-size: 1.1rem; }

/* --- Hero ------------------------------------------------ */
.pot-hero {
  background: var(--c-green);
  color: var(--c-cream);
  position: relative;
  overflow: hidden;
}
.pot-hero__media {
  position: absolute; inset: 0;
  background-image: url('/assets/img/hero-bronze.webp');
  background-size: cover;
  background-position: center 60%;
  filter: brightness(0.7) saturate(1.05);
}
.pot-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,36,27,0.92) 0%, rgba(20,36,27,0.72) 45%, rgba(20,36,27,0.20) 100%);
}
.pot-hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-6) var(--s-3);
  min-height: 460px;
  display: grid;
  grid-template-columns: minmax(0, 620px);
  align-content: center;
}
.pot-hero__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-brass-soft);
  margin: 0 0 var(--s-2);
  font-weight: 700;
}
.pot-hero__title { color: var(--c-cream); margin: 0 0 var(--s-2); max-width: 16ch; font-size: clamp(2rem, 4.5vw, 3rem); }
.pot-hero__sub   { font-size: 1.1rem; max-width: 50ch; margin: 0 0 var(--s-3); color: #f0e3bb; }
.pot-hero__ctas  { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
.pot-hero__ctas .pot-btn--ghost { color: var(--c-cream); border-color: var(--c-brass); background: rgba(20,36,27,0.35); }
.pot-hero__ctas .pot-btn--ghost:hover { background: var(--c-brass); color: var(--c-green-dark); border-color: var(--c-brass); }
.pot-hero__trust {
  list-style: none; padding: var(--s-3) 0 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  color: #f0e3bb;
  font-size: 0.92rem;
  border-top: 1px solid rgba(180,138,59,0.3);
}
.pot-hero__trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.pot-hero__trust strong { color: var(--c-brass); font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }

@media (max-width: 768px) {
  .pot-hero__media {
    background-image: url('/assets/img/hero-bronze-m.webp');
    background-position: center 40%;
  }
  .pot-hero__media::after {
    background: linear-gradient(180deg, rgba(20,36,27,0.45) 0%, rgba(20,36,27,0.65) 50%, rgba(20,36,27,0.95) 100%);
  }
  .pot-hero__inner { min-height: 540px; align-content: end; padding: var(--s-5) var(--s-3) var(--s-4); }
  .pot-hero__trust { gap: var(--s-2) var(--s-3); font-size: 0.85rem; }
}

/* --- Tour cards (carousel) ------------------------------- */
.pot-cards {
  position: relative;
  /* Reserve space outside the viewport for the side arrows */
  padding: 0 56px;
}
.pot-cards__viewport {
  overflow: hidden;
  margin: 0 -8px;
}
.pot-cards__track {
  display: flex;
  gap: var(--s-3);
  padding: 4px 8px 4px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pot-cards__track::-webkit-scrollbar { display: none; }

.pot-card {
  flex: 0 0 calc((100% - 2 * var(--s-3)) / 3);
  min-width: 0;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  color: var(--c-ink);
}
.pot-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,36,27,0.10); }
.pot-card__img {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--c-cream);
}

/* Badge sits in a fixed-height slot so every title lands at the same Y.
   Cards without a badge keep the slot empty, so all five title lines align. */
.pot-card__badge-slot {
  min-height: 28px;
  display: flex;
  align-items: center;
  padding: var(--s-2) var(--s-3) 0;
}
.pot-card__badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pot-card__badge--gold  { background: var(--c-brass);  color: var(--c-green-dark); }
.pot-card__badge--green { background: var(--c-green);  color: var(--c-cream); }

.pot-card__body {
  padding: 0.4rem var(--s-3) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
/* Reserve a fixed 2-line slot for the title so single-line and two-line
   titles all land at the same Y position, and the provider line below
   them is also aligned across cards. */
.pot-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-green) !important;
  margin: 0;
  line-height: 1.3;
  /* 2 lines × 1.3 line-height × 1.05rem font-size = 2.73rem */
  height: 2.73rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pot-card__provider {
  font-size: 0.82rem;
  color: var(--c-ink-muted) !important;
  margin: 0;
}
/* Meta + langs share a vertical list — one fact per row */
.pot-card__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--c-ink-soft);
}
.pot-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1.3;
}
.pot-card__meta-item svg {
  width: 16px; height: 16px;
  color: var(--c-brass-dark);
  flex: none;
}
.pot-card__footer {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px dashed var(--c-line);
}
.pot-card__price strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--c-green);
  display: block;
  line-height: 1;
}
.pot-card__price-per { font-size: 0.72rem; color: var(--c-ink-muted); }
.pot-card__rating {
  font-size: 0.9rem; color: var(--c-ink);
}
.pot-card__rating-star { color: var(--c-star); }
.pot-card__rating-count { color: var(--c-ink-muted); font-size: 0.8rem; }
.pot-card__cta { margin-top: var(--s-2); }
.pot-card__cta .pot-btn { width: 100%; padding: 0.6rem 1rem; font-size: 0.92rem; }

/* Carousel side arrows — sit outside the viewport, vertically centred to
   the card image (top portion of the card) rather than the whole card. */
.pot-cards__btn {
  position: absolute;
  top: 0;
  /* image area = roughly 75% of body width × 3/4 (4:3) — approximate offset */
  margin-top: 30%;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-green);
  color: var(--c-cream);
  border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.05s ease;
  z-index: 2;
}
.pot-cards__btn--prev { left: 0; }
.pot-cards__btn--next { right: 0; }
.pot-cards__btn:hover  { background: var(--c-green-soft); }
.pot-cards__btn:active { transform: scale(0.96); }
.pot-cards__btn svg { width: 18px; height: 18px; }

/* Dots sit below the cards */
.pot-cards__nav {
  display: flex;
  justify-content: center;
  margin-top: var(--s-3);
}
.pot-cards__dots {
  display: flex; gap: 0.4rem; justify-content: center;
}
.pot-cards__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-line);
  border: 0; cursor: pointer; padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.pot-cards__dot--active { background: var(--c-brass); transform: scale(1.3); }

/* Responsive card widths: 3 on desktop, 2 on tablet, 1.1 on mobile */
@media (max-width: 980px) {
  .pot-card { flex: 0 0 calc((100% - var(--s-3)) / 2); }
}
@media (max-width: 640px) {
  .pot-cards { padding: 0 36px; }
  .pot-cards__btn { width: 36px; height: 36px; }
  .pot-card { flex: 0 0 100%; }
  .pot-card__title { font-size: 1.02rem; }
  .pot-card__price strong { font-size: 1.3rem; }
}

/* --- Compare table --------------------------------------- */
.pot-compare {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
/* Grid template — sums to ~1075px content, fits 1140 container with padding.
   Tour col gets generous min-width so 3-word names don't wrap. */
.pot-compare__head,
.pot-compare__row {
  display: grid;
  grid-template-columns:
    minmax(240px, 2.4fr)  /* Tour */
    78px                  /* Duration */
    minmax(150px, 1.3fr)  /* Car */
    90px                  /* Guests */
    minmax(110px, 1fr)    /* Languages */
    96px                  /* From */
    100px                 /* Rating */
    160px;                /* Book */
  gap: 0;
  align-items: center;
}
.pot-compare__head {
  background: var(--c-green);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.85rem 1rem;
  min-height: 48px;
}
.pot-compare__head > span { padding: 0 0.75rem; line-height: 1.2; color: #ffffff !important; }
.pot-compare__row {
  border-top: 1px solid var(--c-line);
  padding: 1rem;
  color: var(--c-ink);
  background: #fff;
}
.pot-compare__row:nth-child(even) { background: #fbf7ec; }
.pot-compare__cell { padding: 0 0.75rem; font-size: 0.92rem; color: var(--c-ink); line-height: 1.45; }
.pot-compare__cell--tour { color: var(--c-ink); }
.pot-compare__name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin: 0 0 0.2rem; color: var(--c-green); }
.pot-compare__provider { font-size: 0.82rem; color: var(--c-ink-muted); margin: 0 0 0.4rem; }
.pot-compare__badge {
  display: inline-block; padding: 0.22rem 0.6rem; border-radius: var(--r-sm);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.pot-compare__badge--gold  { background: var(--c-brass);     color: var(--c-green-dark); }
.pot-compare__badge--green { background: var(--c-green);     color: var(--c-cream); }
.pot-compare__langs { color: var(--c-ink-soft); font-size: 0.85rem; line-height: 1.45; }
.pot-compare__price { display: flex; flex-direction: column; align-items: flex-start; }
.pot-compare__price strong { font-family: var(--font-display); font-size: 1.35rem; color: var(--c-green); line-height: 1.1; }
.pot-compare__price-per { font-size: 0.72rem; color: var(--c-ink-muted); margin-top: 0.15rem; }
.pot-compare__rating { color: var(--c-ink); font-weight: 600; font-size: 0.95rem; }
.pot-compare__rating .pot-compare__rating-star { color: var(--c-star); }
.pot-compare__reviews { color: var(--c-ink-muted); font-size: 0.82rem; font-weight: 400; margin-left: 0.15rem; }
.pot-compare__book .pot-btn { font-size: 0.88rem; padding: 0.6rem 0.85rem; }

@media (max-width: 980px) {
  .pot-compare__head { display: none; }
  .pot-compare__row {
    grid-template-columns: 1fr;
    padding: 1.25rem 1.25rem 1rem;
    gap: 0.45rem;
  }
  .pot-compare__cell { padding: 0; }
  .pot-compare__cell::before {
    content: attr(data-label);
    display: inline-block;
    font-weight: 600;
    color: var(--c-ink-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 90px;
    margin-right: 0.6rem;
  }
  .pot-compare__cell--tour::before { display: none; }
  .pot-compare__price { display: block; }
  .pot-compare__price strong { font-size: 1.2rem; }
  .pot-compare__price-per { display: inline; margin-left: 0.4rem; }
  .pot-compare__book { margin-top: 0.6rem; }
  .pot-compare__book .pot-btn { width: 100%; }
}

/* --- Language box ---------------------------------------- */
.pot-langbox {
  margin-top: var(--s-4);
  background: var(--c-cream);
  border-left: 4px solid var(--c-brass);
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  color: var(--c-ink);
  font-size: 0.95rem;
}
.pot-langbox p { margin: 0 0 0.5rem; }
.pot-langbox p:last-child { margin: 0; }

/* --- Quiz ------------------------------------------------ */
.pot-quiz {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  max-width: 640px;
}
.pot-quiz__q { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--s-2); color: var(--c-ink); }
.pot-quiz__opts { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.pot-quiz__opt {
  background: var(--c-cream); color: var(--c-ink);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
}
.pot-quiz__opt:hover { background: var(--c-brass); color: var(--c-green-dark); border-color: var(--c-brass); }
.pot-quiz__result { color: var(--c-ink); }
.pot-quiz__rlabel { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-ink-muted); margin: 0 0 0.3rem; }
.pot-quiz__rname  { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin: 0 0 0.3rem; color: var(--c-green); }
.pot-quiz__rdesc  { color: var(--c-ink-soft); margin: 0 0 var(--s-2); }
.pot-quiz__restart { background: none; border: 0; color: var(--c-green); padding: 0; margin-left: 0.75rem; cursor: pointer; font-family: inherit; font-size: 0.9rem; text-decoration: underline; }

/* --- Route ----------------------------------------------- */
.pot-route__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-2) var(--s-3);
}
.pot-route__item {
  display: grid; grid-template-columns: 36px 1fr; gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--c-line);
}
.pot-route__num {
  background: var(--c-green); color: var(--c-cream);
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem;
}
.pot-route__name { font-weight: 600; color: var(--c-ink); margin: 0 0 0.15rem; }
.pot-route__note { color: var(--c-ink-soft); font-size: 0.92rem; margin: 0; }

/* --- Occasions ------------------------------------------- */
.pot-occ-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
}
.pot-occ-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--c-ink);
  display: flex; flex-direction: column;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pot-occ-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(20,36,27,0.12); text-decoration: none; }
.pot-occ-card__img {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--c-cream);
}
.pot-occ-card__body { padding: var(--s-3); flex: 1; display: flex; flex-direction: column; }
.pot-occ-card h3 { color: var(--c-green); margin-bottom: var(--s-1); }
.pot-occ-card p { color: var(--c-ink-soft); flex: 1; }
.pot-occ-card__cta { color: var(--c-green); font-weight: 600; margin-top: var(--s-1); }

/* --- Fleet ----------------------------------------------- */
.pot-fleet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
}
.pot-fleet__col {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pot-fleet__img {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.pot-fleet__body { padding: var(--s-3); }
.pot-fleet__col h3 { color: var(--c-green); margin-bottom: var(--s-1); }
.pot-fleet__col p  { color: var(--c-ink-soft); margin: 0; }
.pot-fleet__note { margin-top: var(--s-3); color: var(--c-ink-muted); font-size: 0.9rem; font-style: italic; }

/* --- Reviews --------------------------------------------- */
.pot-reviews {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
}
.pot-review {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  color: var(--c-ink);
}
.pot-review__stars { color: var(--c-star); font-size: 1.1rem; margin: 0 0 var(--s-1); letter-spacing: 0.1em; }
.pot-review__body  { color: var(--c-ink); font-style: italic; margin: 0 0 var(--s-2); }
.pot-review__meta  { color: var(--c-ink-muted); font-size: 0.85rem; margin: 0; }

/* --- Honest heads-up ------------------------------------- */
.pot-honest {
  background: var(--c-cream);
  border: 2px dashed var(--c-brass);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.pot-honest h2 { margin-top: 0; }
.pot-honest__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); }
.pot-honest__item h3 { color: var(--c-green); }
.pot-honest__item p  { color: var(--c-ink); margin: 0; }

/* --- FAQ -------------------------------------------------- */
.pot-faq { max-width: 820px; }
.pot-faq__item {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  margin-bottom: var(--s-1);
  overflow: hidden;
}
.pot-faq__q {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--c-ink);
  list-style: none;
}
.pot-faq__q::-webkit-details-marker { display: none; }
.pot-faq__q::after { content: "+"; float: right; color: var(--c-brass-dark); font-weight: 400; font-size: 1.4rem; line-height: 1; }
.pot-faq__item[open] .pot-faq__q::after { content: "−"; }
.pot-faq__a { padding: 0 1.25rem 1rem; color: var(--c-ink-soft); }
.pot-faq__a p { margin: 0; }

/* --- Sub page (FAQ, imprint, privacy, occasions) --------- */
.pot-subhero {
  background: var(--c-green);
  color: var(--c-cream);
  padding: var(--s-4) 0 var(--s-4);
}
.pot-subhero__eyebrow {
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-brass-soft); margin: 0 0 var(--s-1); font-weight: 700;
}
.pot-subhero h1 { color: var(--c-cream); margin: 0 0 var(--s-2); max-width: 22ch; }
.pot-subhero p  { color: #f0e3bb; max-width: 60ch; margin: 0; font-size: 1.05rem; }
.pot-subhero__back {
  display: inline-block; margin-bottom: var(--s-2);
  color: var(--c-brass); font-size: 0.9rem; font-weight: 600;
  text-decoration: none;
}
.pot-subhero__back:hover { color: var(--c-cream); text-decoration: none; }

.pot-prose { max-width: 760px; }
.pot-prose h2 { color: var(--c-green); margin-top: var(--s-4); }
.pot-prose h2:first-child { margin-top: 0; }
.pot-prose h3 { color: var(--c-green); margin-top: var(--s-3); }
.pot-prose p  { color: var(--c-ink); line-height: 1.7; font-size: 1.02rem; }
.pot-prose ul { color: var(--c-ink); line-height: 1.7; padding-left: 1.25rem; }
.pot-prose ul li { margin-bottom: 0.4rem; }
.pot-prose strong { color: var(--c-ink); }
.pot-prose a:not(.pot-btn) { color: var(--c-green); font-weight: 600; }
.pot-prose a:not(.pot-btn):hover { color: var(--c-brass-dark); }

/* Legal pages — extra spacing rules + ALL-CAPS notice blocks */
.pot-prose--legal h2 { font-size: 1.45rem; }
.pot-prose--legal h3 { font-size: 1.15rem; }
.pot-prose--legal h4 { font-size: 1rem; font-style: italic; color: var(--c-ink-soft); margin-top: var(--s-2); }
.pot-prose-notice {
  background: var(--c-cream);
  border-left: 4px solid var(--c-brass);
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--c-ink) !important;
}

/* Closing CTA box reused on occasion pages */
.pot-shared-cta {
  background: var(--c-cream);
  border-left: 4px solid var(--c-brass);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-top: var(--s-5);
}
.pot-shared-cta h3 { color: var(--c-green); margin-bottom: var(--s-1); }
.pot-shared-cta p  { color: var(--c-ink-soft); margin-bottom: var(--s-2); }

/* --- Intro (SEO) ----------------------------------------- */
.pot-intro-section { padding: var(--s-5) 0 var(--s-4); }
.pot-intro { max-width: 760px; text-align: left; }
.pot-intro h2 { margin-bottom: var(--s-2); }
.pot-intro__lead { font-size: 1.1rem; color: var(--c-ink); margin-bottom: var(--s-2); }
.pot-intro p { color: var(--c-ink-soft); font-size: 1rem; line-height: 1.65; }

/* --- Why ------------------------------------------------- */
.pot-why { max-width: 820px; }
.pot-why p { font-size: 1.1rem; color: var(--c-ink-soft); }

/* --- Closing --------------------------------------------- */
.pot-closing { text-align: center; }
.pot-closing h2 { color: var(--c-cream); margin-bottom: var(--s-2); }
.pot-closing p  { color: var(--c-brass-soft); max-width: 560px; margin: 0 auto var(--s-3); font-size: 1.05rem; }

/* --- Sticky bar (mobile only) ---------------------------- */
:root { --stickybar-h: 58px; }
.pot-stickybar {
  display: none;
}
/* Show only on mobile / small viewports */
@media (max-width: 768px) {
  .pot-stickybar {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--c-green);
    color: var(--c-cream);
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap;
    justify-content: space-between; align-items: center;
    gap: var(--s-2);
    padding: 0.5rem var(--s-2);
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--c-brass);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
    z-index: 60;
  }
  body { padding-bottom: calc(var(--stickybar-h) + env(safe-area-inset-bottom, 0px)); }
  .pot-stickybar__price { line-height: 1.2; }
  .pot-stickybar__price strong { font-family: var(--font-display); font-size: 0.95rem; color: var(--c-cream); font-weight: 700; }
  .pot-stickybar__sub { display: block; font-size: 0.72rem; color: #d6b779; margin-top: 0.1rem; }
  .pot-stickybar__cta { font-size: 0.88rem; padding: 0.5rem 1rem; }
}

/* --- Footer ---------------------------------------------- */
.pot-footer {
  background: var(--c-green-dark);
  color: var(--c-brass-soft);
  padding: var(--s-5) 0 var(--s-6);
  margin-top: var(--s-4);
}
.pot-footer a { color: var(--c-brass); }
.pot-footer a:hover { color: var(--c-cream); }
.pot-footer__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
}
.pot-footer__brand { font-family: var(--font-display); font-size: 1.2rem; color: var(--c-cream); margin: 0 0 0.3rem; font-weight: 700; }
.pot-footer__brand em { color: var(--c-brass); font-style: italic; }
.pot-footer__tag { color: var(--c-brass-soft); font-size: 0.92rem; margin: 0; }
.pot-footer__heading { color: var(--c-cream); font-weight: 600; margin: 0 0 var(--s-1); }
.pot-footer__legal ul { list-style: none; padding: 0; margin: 0; }
.pot-footer__legal li { margin-bottom: 0.3rem; }
.pot-footer__affiliate p { font-size: 0.85rem; color: var(--c-brass-soft); margin: 0 0 var(--s-1); }
.pot-footer__copy { color: var(--c-ink-muted) !important; font-size: 0.8rem !important; }

/* --- Nav mobile ------------------------------------------ */
@media (max-width: 640px) {
  .pot-nav { gap: 0.75rem; }
  .pot-nav__link { font-size: 0.85rem; }
  .pot-logo__text { font-size: 0.95rem; }
  .pot-hero { padding: var(--s-5) 0; }
}

/* --- Visibility-guard ------------------------------------ */
/* Force dark text on cream/white card backgrounds. NOTE: do NOT cascade onto
   .pot-compare__head — its background is dark-green and must stay light. */
.pot-review, .pot-occ-card, .pot-fleet__col, .pot-faq__item, .pot-langbox, .pot-honest,
.pot-compare__row {
  color: var(--c-ink);
}
.pot-review .pot-review__stars { color: var(--c-star); }
.pot-compare__rating .pot-compare__rating-star { color: var(--c-star); }
.pot-compare__name, .pot-fleet__col h3, .pot-occ-card h3, .pot-honest__item h3, .pot-quiz__rname { color: var(--c-green); }
.pot-compare__price strong { color: var(--c-green); }
.pot-compare__provider, .pot-compare__reviews { color: var(--c-ink-muted); }
.pot-compare__price-per { color: var(--c-ink-muted); }
.pot-section__lead { color: var(--c-ink-soft); }
.pot-review__meta { color: var(--c-ink-muted); }
/* Explicit: ensure compare-table header keeps its light color even if some
   later cascade tries to darken it. */
.pot-compare__head, .pot-compare__head > span { color: #ffffff !important; }
/* Compare-table BOOK button must keep dark ink on brass background even
   though the parent row sets ink color */
.pot-compare__book .pot-btn--primary { color: var(--c-green-dark); }
.pot-compare__book .pot-btn--primary:hover { color: var(--c-cream); }