@charset "utf-8";
/* Display face: Prompt 700 (Cadson Demak, SIL Open Font License 1.1 — layout/styles/fonts/prompt/OFL.txt).
   Self-hosted, Thai + Latin subsets only (31 KB), swapped in after first paint. Body text stays on system Thai faces. */
@font-face { font-family: "Prompt"; font-style: normal; font-weight: 700; font-display: swap; src: url("/layout/styles/fonts/prompt/prompt-700-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Prompt"; font-style: normal; font-weight: 700; font-display: swap; src: url("/layout/styles/fonts/prompt/prompt-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ============================================================================
   O Car Rent — public design system (oc.css)
   Mobile-first, dependency-free. Loaded by every redesigned public page.
   Sections: 1 tokens · 2 reset/base · 3 typography · 4 layout · 5 header/nav
             6 mobile bar · 7 buttons · 8 cards/grids · 9 forms · 10 content
             11 footer · 12 utilities · 13 motion/print
   ========================================================================== */

/* 1. Design tokens ---------------------------------------------------------- */
:root {
  /* brand (from logo): green mark, navy lettering */
  --oc-green: #1268e8;       /* primary digital blue */
  --oc-green-700: #0756c9;   /* button fill: white text */
  --oc-green-800: #06439e;   /* accessible link blue */
  --oc-green-50: #edf5ff;
  --oc-green-100: #d8e9ff;
  --oc-navy: #10284e;        /* headings */
  --oc-navy-700: #1e3b68;
  --oc-ink: #172b49;         /* body text */
  --oc-ink-2: #53647e;       /* secondary text */
  --oc-ink-3: #65758e;       /* muted text */
  --oc-line: #dfe3ec;
  --oc-line-2: #eef0f5;
  --oc-bg: #f7f8f5;          /* warm off-white page background */
  --oc-surface: #ffffff;
  --oc-surface-2: #f2f4ef;
  --oc-amber: #f6c844;       /* journey highlight */
  --oc-amber-900: #6a4d00;
  --oc-danger: #b42318;
  --oc-danger-50: #fdecea;
  --oc-focus: #1d4ed8;
  --oc-line-green: #06c755;  /* LINE brand */

  /* type */
  --oc-font: "Leelawadee UI", "Segoe UI", Thonburi, "Noto Sans Thai", "Noto Sans", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --oc-font-display: "Prompt", "Leelawadee UI", "Segoe UI", Thonburi, "Noto Sans Thai", system-ui, sans-serif;
  --oc-fs-0: 0.875rem;   /* 14 */
  --oc-fs-1: 1rem;       /* 16 */
  --oc-fs-2: 1.125rem;   /* 18 */
  --oc-fs-3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --oc-fs-4: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --oc-fs-5: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --oc-lh: 1.7;                /* Thai body text: >= 1.7 so tone marks and vowels never collide */

  /* spacing (8pt) */
  --oc-s1: 0.25rem; --oc-s2: 0.5rem; --oc-s3: 0.75rem; --oc-s4: 1rem;
  --oc-s5: 1.5rem; --oc-s6: 2rem; --oc-s7: 3rem; --oc-s8: 4rem; --oc-s9: 6rem;

  /* shape */
  --oc-r1: 8px; --oc-r2: 12px; --oc-r3: 18px; --oc-r-pill: 999px;
  --oc-shadow-1: 0 1px 2px rgba(20, 27, 53, 0.06), 0 1px 3px rgba(20, 27, 53, 0.08);
  --oc-shadow-2: 0 6px 18px rgba(20, 27, 53, 0.10);
  --oc-shadow-3: 0 16px 40px rgba(20, 27, 53, 0.14);

  /* layout */
  --oc-max: 1160px;
  --oc-gutter: 1rem;
  --oc-header-h: 64px;
  --oc-mobilebar-h: 62px;
  --oc-tap: 48px;
}
@media (min-width: 768px) { :root { --oc-gutter: 1.5rem; --oc-header-h: 72px; } }

/* 2. Reset & base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--oc-font);
  font-size: var(--oc-fs-1);
  line-height: var(--oc-lh);
  color: var(--oc-ink);
  background: var(--oc-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: normal; overflow-wrap: break-word;   /* Thai: break at word boundaries (dictionary), never inside a syllable */
  text-align: start;
}
p, li, td, dd { text-align: start; }             /* never justified: Thai has no inter-word spaces to stretch */
@media (min-width: 768px) { body { font-size: 1.0625rem; } }
/* reserve room for the sticky mobile bar */
@media (max-width: 899.98px) { body { padding-bottom: calc(var(--oc-mobilebar-h) + env(safe-area-inset-bottom, 0px)); } }

img, svg, video { display: block; max-width: 100%; height: auto; }
img { border: 0; }
a { color: var(--oc-green-800); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
/* inline text links: vertical padding on an inline box widens the tap target to >= 24 px without moving the line */
p a:not(.oc-btn), li span a:not(.oc-btn), .oc-prose a:not(.oc-btn), .oc-breadcrumb a, .oc-details__body a, .oc-cover a, .oc-check-list a, .oc-booking-links a, .oc-help a, td a, dd a { padding-block: 0.25em; }
a:hover { color: var(--oc-green-700); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--oc-line); margin: var(--oc-s6) 0; }
table { border-collapse: collapse; width: 100%; }
ul, ol { padding-left: 1.25rem; }
:target { scroll-margin-top: calc(var(--oc-header-h) + 1rem); }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--oc-focus); outline-offset: 3px; border-radius: 4px; }
.oc-skip {
  position: absolute; left: var(--oc-s4); top: -100px; z-index: 1000;
  padding: var(--oc-s3) var(--oc-s4); background: var(--oc-navy); color: #fff;
  border-radius: var(--oc-r1); font-weight: 700; text-decoration: none;
}
.oc-skip:focus { top: var(--oc-s4); outline-color: #fff; }

/* 3. Typography ------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--oc-font-display); color: var(--oc-navy); line-height: 1.3; margin: 0 0 var(--oc-s3); font-weight: 700; letter-spacing: 0; overflow-wrap: anywhere; }
h1 { font-size: var(--oc-fs-5); }
h2 { font-size: var(--oc-fs-4); }
h3 { font-size: var(--oc-fs-3); }
h4 { font-size: var(--oc-fs-2); }
p { margin: 0 0 var(--oc-s4); }
.oc-lead { font-size: var(--oc-fs-2); color: var(--oc-ink-2); }
.oc-eyebrow {
  display: inline-flex; align-items: center; gap: var(--oc-s2); font-size: var(--oc-fs-0); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--oc-green-800); margin-bottom: var(--oc-s2);
}
.oc-eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--oc-green); flex: 0 0 auto; }   /* brand stroke */
.oc-muted { color: var(--oc-ink-2); }
.oc-small { font-size: var(--oc-fs-0); }
.oc-center { text-align: center; }
.oc-tripbar { display: grid; gap: var(--oc-s2); margin-top: var(--oc-s5); padding: var(--oc-s3); border: 1px solid rgba(255,255,255,0.8); border-radius: var(--oc-r2); background: rgba(255,255,255,0.94); box-shadow: var(--oc-shadow-2); }
.oc-tripbar label { display: grid; gap: 0.2rem; min-width: 0; }
.oc-tripbar label span { color: var(--oc-ink-2); font-size: 0.72rem; font-weight: 700; }
.oc-tripbar select { min-height: 44px; width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--oc-line); border-radius: var(--oc-r1); background: #fff; }
@media (min-width: 640px) { .oc-tripbar { grid-template-columns: repeat(3, 1fr) auto; align-items: end; } }

/* 4. Layout ----------------------------------------------------------------- */
.oc-container { width: 100%; max-width: var(--oc-max); margin-inline: auto; padding-inline: var(--oc-gutter); }
.oc-section { padding-block: var(--oc-s7); }
@media (min-width: 768px) { .oc-section { padding-block: var(--oc-s8); } }
.oc-section--tight { padding-block: var(--oc-s6); }
.oc-section--alt { background: var(--oc-surface); border-top: 1px solid var(--oc-line-2); border-bottom: 1px solid var(--oc-line-2); }
.oc-section__head { max-width: 46rem; margin-bottom: var(--oc-s6); }
.oc-section__head--center { margin-inline: auto; text-align: center; }
.oc-grid { display: grid; gap: var(--oc-s4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .oc-grid--2, .oc-grid--3, .oc-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .oc-grid--3 { grid-template-columns: repeat(3, 1fr); } .oc-grid--4 { grid-template-columns: repeat(4, 1fr); } .oc-grid { gap: var(--oc-s5); } }
.oc-stack > * + * { margin-top: var(--oc-s4); }
.oc-cluster { display: flex; flex-wrap: wrap; gap: var(--oc-s3); align-items: center; }

/* 5. Header & navigation ---------------------------------------------------- */
.oc-header {
  position: relative; z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--oc-line);
}
@media (min-width: 900px) { .oc-header { position: sticky; top: 0; } }
.oc-header__inner { display: flex; align-items: center; gap: var(--oc-s3); min-height: var(--oc-header-h); }
.oc-brand { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: auto; border-radius: 6px; }
.oc-brand img { width: 150px; height: 40px; object-fit: contain; }
@media (min-width: 768px) { .oc-brand img { width: 172px; height: 46px; } }

.oc-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--oc-s1); }
.oc-nav__list a {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--oc-s3);
  color: var(--oc-navy-700); font-weight: 600; text-decoration: none; border-radius: var(--oc-r1);
  white-space: nowrap;
}
.oc-nav__list a:hover { background: var(--oc-green-50); color: var(--oc-green-800); }
.oc-nav__list a[aria-current="page"] { color: var(--oc-green-800); box-shadow: inset 0 -3px 0 var(--oc-green); border-radius: var(--oc-r1) var(--oc-r1) 0 0; }
.oc-nav__extra { display: none; }
.oc-header__actions { display: flex; align-items: center; gap: var(--oc-s2); flex: 0 0 auto; }
.oc-header__actions .oc-header__phone { display: none; }
.oc-header__actions .oc-header__cta { padding-inline: var(--oc-s4); min-height: 44px; }
.oc-header__cta-short { display: none; }
/* phones: brand + EN + จองรถ + menu must fit 320 px without horizontal scroll */
@media (max-width: 599.98px) { .oc-header__inner { gap: var(--oc-s2); } .oc-header__actions { gap: 6px; } .oc-brand img { width: 130px; height: 35px; } .oc-menu-btn span { display: none; } .oc-menu-btn { padding: 0; min-width: var(--oc-tap); } .oc-header__actions .oc-header__cta { padding-inline: var(--oc-s3); } .oc-header__cta-long { display:none; } .oc-header__cta-short { display:inline; } }
@media (max-width: 359.98px) { .oc-brand img { width: 108px; height: 29px; } .oc-header__actions .oc-header__cta { padding-inline: var(--oc-s2); } .oc-lang { min-width: 36px; padding: 0; } }

/* hamburger */
.oc-menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--oc-s2);
  min-width: var(--oc-tap); min-height: var(--oc-tap); padding: 0 var(--oc-s3);
  background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r1);
  color: var(--oc-navy); font-weight: 700;
}
.oc-menu-btn svg { width: 22px; height: 22px; }
.oc-menu-btn .oc-menu-btn__close { display: none; }
.oc-menu-btn[aria-expanded="true"] .oc-menu-btn__open { display: none; }
.oc-menu-btn[aria-expanded="true"] .oc-menu-btn__close { display: block; }

/* Mobile: collapsed panel (JS) / visible row (no JS) */
@media (max-width: 899.98px) {
  .oc-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--oc-surface); border-bottom: 1px solid var(--oc-line);
    box-shadow: var(--oc-shadow-3); padding: var(--oc-s3) var(--oc-gutter) var(--oc-s5);
  }
  .js .oc-nav { display: none; }
  .js .oc-nav.is-open { display: block; }
  .no-js .oc-nav { position: static; box-shadow: none; padding-block: var(--oc-s2); }
  .no-js .oc-menu-btn { display: none; }
  .oc-nav__list { flex-direction: column; gap: 0; }
  .no-js .oc-nav__list { flex-direction: row; flex-wrap: wrap; gap: var(--oc-s1); }
  .oc-nav__list a { min-height: 52px; font-size: var(--oc-fs-2); border-bottom: 1px solid var(--oc-line-2); border-radius: 0; white-space: normal; }
  .oc-nav__list a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--oc-green); padding-left: calc(var(--oc-s3) + 4px); border-radius: 0; }
  .oc-nav__extra { display: grid; grid-template-columns: 1fr 1fr; gap: var(--oc-s2); margin-top: var(--oc-s4); }
  .oc-nav__extra .oc-btn { width: 100%; }
  body.oc-nav-open { overflow: hidden; }
  .oc-nav-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(20, 27, 53, 0.35); }
}
@media (min-width: 900px) {
  .oc-menu-btn { display: none; }
  .oc-header__actions .oc-header__phone { display: inline-flex; padding-inline: var(--oc-s3); }
  .oc-header__phone-text { display: none; }              /* icon-only phone button on narrow desktops */
  .oc-nav__list a { padding-inline: var(--oc-s2); }
}
/* six nav items must fit between the brand and the CTA on narrow desktops */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .oc-header__actions .oc-header__phone { display: none; }
  .oc-nav__list a { padding-inline: 0.45rem; font-size: 0.95rem; }
  .oc-brand img { width: 150px; height: 40px; }
}
@media (min-width: 1100px) {
  .oc-nav__list { gap: var(--oc-s2); }
  .oc-nav__list a { padding-inline: var(--oc-s4); }
  .oc-header__actions .oc-header__phone { padding-inline: var(--oc-s4); }
  .oc-header__phone-text { display: inline; }
}

/* 6. Mobile conversion bar -------------------------------------------------- */
.oc-mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--oc-s2);
  padding: var(--oc-s2) var(--oc-s3) calc(var(--oc-s2) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--oc-line);
  box-shadow: 0 -6px 20px rgba(20, 27, 53, 0.08);
}
.oc-mobilebar a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--oc-s2);
  min-height: 46px; border-radius: var(--oc-r2); font-weight: 700; text-decoration: none;
  background: var(--oc-surface-2); color: var(--oc-navy); border: 1px solid var(--oc-line);
}
.oc-mobilebar a svg { width: 20px; height: 20px; flex: 0 0 auto; }
.oc-mobilebar__line { background: #e6f9ee; color: #0a5a2a; border-color: #bfe9d0; }
.oc-mobilebar__book { background: var(--oc-green-700); color: #fff; border-color: var(--oc-green-700); }
@media (min-width: 900px) { .oc-mobilebar { display: none; } }

/* 7. Buttons ---------------------------------------------------------------- */
.oc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--oc-s2);
  min-height: var(--oc-tap); padding: var(--oc-s3) var(--oc-s5);
  border-radius: var(--oc-r2); border: 1px solid transparent;
  font-weight: 700; text-decoration: none; line-height: 1.2; text-align: center;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.oc-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
@media (hover: hover) { .oc-btn:hover { transform: translateY(-1px); } .oc-card--link:hover, .oc-dest-link:hover { transform: translateY(-2px); } }
.oc-btn:active { transform: translateY(1px) scale(0.985); transition-duration: .05s; }
@media (pointer: coarse) { .oc-btn, .oc-btn--sm, .oc-menu-btn, .oc-mobilebar a { min-height: 44px; } .oc-btn--sm { padding-block: var(--oc-s2); } }
.oc-btn--primary { background: var(--oc-green-700); color: #fff; box-shadow: var(--oc-shadow-1); }
.oc-btn--primary:hover { background: var(--oc-green-800); color: #fff; box-shadow: var(--oc-shadow-2); }
.oc-btn--secondary { background: var(--oc-surface); color: var(--oc-navy); border-color: var(--oc-line); }
.oc-btn--secondary:hover { border-color: var(--oc-navy-700); color: var(--oc-navy); }
.oc-btn--dark { background: var(--oc-navy); color: #fff; }
.oc-btn--dark:hover { background: var(--oc-navy-700); color: #fff; }
.oc-btn--line { background: var(--oc-line-green); color: #0a2e17; }   /* LINE brand green with dark ink: 6.6:1 (white would be 2.3:1) */
.oc-btn--line:hover { background: #05b54d; color: #0a2e17; }
.oc-btn--ghost { background: transparent; color: var(--oc-green-800); border-color: var(--oc-green-100); }
.oc-btn--ghost:hover { background: var(--oc-green-50); }
.oc-btn--sm { min-height: 40px; padding: var(--oc-s2) var(--oc-s4); font-size: var(--oc-fs-0); }
.oc-btn--block { width: 100%; }
.oc-btn-row { display: flex; flex-wrap: wrap; gap: var(--oc-s3); }
@media (max-width: 559.98px) { .oc-btn-row--stack .oc-btn { flex: 1 1 100%; } }

/* 8. Cards, chips, media ----------------------------------------------------- */
.oc-card {
  background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r3);
  box-shadow: var(--oc-shadow-1); overflow: hidden;
}
.oc-card__body { padding: var(--oc-s5); }
.oc-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--oc-surface-2); }
.oc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.oc-card--link { display: block; color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.oc-card--link:hover { box-shadow: var(--oc-shadow-2); color: inherit; }
.oc-chip {
  display: inline-flex; align-items: center; gap: var(--oc-s1); padding: 0.25rem 0.65rem;
  border-radius: var(--oc-r-pill); background: var(--oc-surface-2); color: var(--oc-ink-2);
  font-size: var(--oc-fs-0); font-weight: 600; white-space: nowrap;
}
.oc-chip svg { width: 16px; height: 16px; }
.oc-chip--green { background: var(--oc-green-50); color: var(--oc-green-800); }
.oc-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--oc-r-pill); background: var(--oc-amber); color: var(--oc-navy); font-size: var(--oc-fs-0); font-weight: 800; }
.oc-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--oc-r2); background: var(--oc-green-50); color: var(--oc-green-800); flex: 0 0 auto; }
.oc-icon svg { width: 26px; height: 26px; }
.oc-icon--lg { width: 60px; height: 60px; }
.oc-icon--lg svg { width: 32px; height: 32px; }
/* price markers are filled only from layout/data/prices.json (tools/apply-prices.ps1); empty = nothing shown */
[data-oc-price]:empty { display: none !important; }
.oc-price { font-family: var(--oc-font-display); font-weight: 700; color: var(--oc-navy); font-size: var(--oc-fs-2); font-variant-numeric: tabular-nums; }
.oc-price small { font-weight: 600; color: var(--oc-ink-2); font-size: var(--oc-fs-0); }

/* 9. Forms ------------------------------------------------------------------ */
.oc-field { margin-bottom: var(--oc-s4); }
.oc-label { display: block; font-weight: 700; color: var(--oc-navy); margin-bottom: var(--oc-s1); }
.oc-help { display: block; color: var(--oc-ink-3); font-size: var(--oc-fs-0); margin-top: var(--oc-s1); }
.oc-input, .oc-select, .oc-textarea {
  width: 100%; min-height: var(--oc-tap); padding: var(--oc-s3) var(--oc-s4);
  border: 1px solid #c8cdd9; border-radius: var(--oc-r2); background: var(--oc-surface); color: var(--oc-ink);
}
.oc-input:focus-visible, .oc-select:focus-visible, .oc-textarea:focus-visible { border-color: var(--oc-focus); outline-offset: 0; }
.oc-textarea { min-height: 8rem; resize: vertical; }
.oc-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5470' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; }
.oc-form-grid { display: grid; gap: 0 var(--oc-s4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .oc-form-grid { grid-template-columns: 1fr 1fr; } .oc-form-grid .oc-field--full { grid-column: 1 / -1; } }
.oc-alert { padding: var(--oc-s4) var(--oc-s5); border-radius: var(--oc-r2); border: 1px solid; margin-bottom: var(--oc-s5); }
.oc-alert--ok { background: var(--oc-green-50); border-color: var(--oc-green-100); color: var(--oc-green-800); }
.oc-alert--err { background: var(--oc-danger-50); border-color: #f5b5ae; color: var(--oc-danger); }
.oc-alert--info { background: #fff8e6; border-color: #f7d98a; color: var(--oc-amber-900); }
.oc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* 10. Content patterns ------------------------------------------------------ */
.oc-breadcrumb { font-size: var(--oc-fs-0); color: var(--oc-ink-3); margin: var(--oc-s4) 0 var(--oc-s5); }
.oc-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--oc-s1); }
.oc-breadcrumb li + li::before { content: "›"; margin: 0 var(--oc-s2); color: var(--oc-ink-3); }
.oc-breadcrumb a { color: var(--oc-ink-2); }
.oc-breadcrumb [aria-current] { color: var(--oc-navy); font-weight: 600; }

.oc-details { border: 1px solid var(--oc-line); border-radius: var(--oc-r2); background: var(--oc-surface); margin-bottom: var(--oc-s3); }
.oc-details summary { cursor: pointer; list-style: none; padding: var(--oc-s4) var(--oc-s5); padding-right: 3rem; font-weight: 700; color: var(--oc-navy); position: relative; }
.oc-details summary::-webkit-details-marker { display: none; }
.oc-details summary::after { content: ""; position: absolute; right: var(--oc-s5); top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--oc-green-800); border-bottom: 2px solid var(--oc-green-800); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.oc-details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.oc-details__body { padding: 0 var(--oc-s5) var(--oc-s4); color: var(--oc-ink-2); }
.oc-details__body > :last-child { margin-bottom: 0; }

.oc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--oc-line); border-radius: var(--oc-r2); background: var(--oc-surface); }
.oc-table th, .oc-table td { padding: var(--oc-s3) var(--oc-s4); text-align: left; border-bottom: 1px solid var(--oc-line-2); vertical-align: top; }
.oc-table th { background: var(--oc-surface-2); color: var(--oc-navy); font-weight: 700; }
.oc-table tr:last-child td { border-bottom: 0; }
.oc-table .oc-num { text-align: right; white-space: nowrap; }

.oc-check-list { list-style: none; padding: 0; margin: 0; }
.oc-check-list li { position: relative; padding-left: 1.9rem; margin-bottom: var(--oc-s2); }
.oc-check-list li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--oc-green-50) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a2a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 0.75rem no-repeat; }

.oc-prose { max-width: 46rem; }
.oc-prose h2 { margin-top: var(--oc-s6); }
.oc-prose h3 { margin-top: var(--oc-s5); }
.oc-prose img { border-radius: var(--oc-r2); }

/* gallery + native dialog lightbox */
.oc-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--oc-s2); list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px) { .oc-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .oc-gallery { grid-template-columns: repeat(4, 1fr); gap: var(--oc-s3); } }
.oc-gallery a { display: block; border-radius: var(--oc-r2); overflow: hidden; background: var(--oc-surface-2); aspect-ratio: 4 / 3; }
.oc-gallery img { width: 100%; height: 100%; object-fit: cover; }
.oc-lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); max-height: 96vh; }
.oc-lightbox::backdrop { background: rgba(10, 14, 30, 0.9); }
.oc-lightbox__img { max-width: 96vw; max-height: 86vh; width: auto; height: auto; margin: 0 auto; border-radius: var(--oc-r2); }
.oc-lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--oc-s3); padding: var(--oc-s3) 0 0; color: #fff; }
.oc-lightbox__btn { min-width: var(--oc-tap); min-height: var(--oc-tap); border-radius: var(--oc-r2); border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); color: #fff; font-weight: 700; padding: 0 var(--oc-s4); }
.oc-lightbox__btn:hover { background: rgba(255,255,255,0.22); }

/* 11. Footer ---------------------------------------------------------------- */
.oc-footer { background: var(--oc-navy); color: #d7dbe8; margin-top: var(--oc-s8); }
.oc-footer a { color: #fff; }
.oc-footer a:hover { color: #bfe9d0; }
.oc-footer__grid { display: grid; gap: var(--oc-s6); padding-block: var(--oc-s7) var(--oc-s6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .oc-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .oc-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.oc-footer h2 { color: #fff; font-size: var(--oc-fs-2); margin-bottom: var(--oc-s3); }
.oc-footer__brand img { width: 160px; height: 43px; object-fit: contain; background: #fff; padding: 6px 10px; border-radius: var(--oc-r1); }
.oc-footer__brand p { margin-top: var(--oc-s4); max-width: 34rem; color: #b9c0d6; }
.oc-footer ul { list-style: none; margin: 0; padding: 0; }
.oc-footer li { margin-bottom: var(--oc-s2); }
.oc-footer li a { display: inline-block; padding: 2px 0; min-height: 24px; }   /* >= 24 px tap target for inline footer links */
.oc-footer .oc-btn--line { color: #0a2e17; }
.oc-footer .oc-btn--line:hover { color: #0a2e17; }
.oc-footer .oc-btn--secondary { color: var(--oc-navy); }
.oc-footer .oc-btn--secondary:hover { color: var(--oc-navy); background: #fff; border-color: #fff; }
.oc-footer address { font-style: normal; }
.oc-footer__contact a { text-decoration: none; font-weight: 600; }
.oc-footer__contact a:hover { text-decoration: underline; }
.oc-footer__cta { display: flex; flex-wrap: wrap; gap: var(--oc-s2); margin-top: var(--oc-s4); }
.oc-footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-block: var(--oc-s4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--oc-s2); font-size: var(--oc-fs-0); color: #a7afc8; }
.oc-footer__quicklinks { display: flex; flex-wrap: wrap; gap: var(--oc-s2); padding: 0 0 var(--oc-s5); }
.oc-footer__quicklinks a { display: inline-flex; align-items: center; min-height: 40px; padding: var(--oc-s2) var(--oc-s4); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--oc-r-pill); background: rgba(255,255,255,0.07); color: #fff; font-weight: 700; text-decoration: none; }
.oc-footer__quicklinks a:hover { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.12); color: #fff; }
.oc-footer__quicklinks .oc-footer__quicklinks--line { background: #06c755; border-color: #06c755; color: #062b15; }
.oc-footer__quicklinks .oc-footer__quicklinks--line:hover { color: #062b15; background: #20d66b; }

/* 12. Utilities ------------------------------------------------------------- */
.oc-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.oc-mt-0 { margin-top: 0 !important; } .oc-mb-0 { margin-bottom: 0 !important; }
.oc-mt-4 { margin-top: var(--oc-s4) !important; } .oc-mt-6 { margin-top: var(--oc-s6) !important; }
.oc-hide-mobile { display: none !important; }
@media (min-width: 900px) { .oc-hide-mobile { display: initial !important; } .oc-hide-desktop { display: none !important; } }
.oc-nowrap { white-space: nowrap; }

/* 14. Home page components --------------------------------------------------- */
.oc-hero { background: linear-gradient(180deg, #ffffff 0%, var(--oc-bg) 100%); border-bottom: 1px solid var(--oc-line-2); }
.oc-hero__inner { display: grid; gap: var(--oc-s6); padding-block: var(--oc-s6) var(--oc-s7); align-items: center; }
.oc-hero__copy h1 { margin-bottom: var(--oc-s4); }
.oc-hero__copy .oc-lead { max-width: 34rem; }
.oc-hero__actions { margin: var(--oc-s5) 0 var(--oc-s4); }
.oc-hero__chips { display: flex; flex-wrap: wrap; gap: var(--oc-s2); list-style: none; padding: 0; margin: 0; }
.oc-hero__media { position: relative; border-radius: var(--oc-r3); overflow: hidden; box-shadow: var(--oc-shadow-3); background: var(--oc-surface-2); }
.oc-hero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.oc-hero__caption { position: absolute; left: var(--oc-s4); bottom: var(--oc-s4); right: var(--oc-s4); display: inline-flex; gap: var(--oc-s2); align-items: center; width: max-content; max-width: calc(100% - 2 * var(--oc-s4)); padding: var(--oc-s2) var(--oc-s4); border-radius: var(--oc-r-pill); background: rgba(20, 27, 53, 0.82); color: #fff; font-size: var(--oc-fs-0); font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.oc-hero__caption svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (min-width: 900px) {
  .oc-hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--oc-s7); padding-block: var(--oc-s8); }
  .oc-hero__media img { aspect-ratio: 4 / 3; }
}

.oc-strip { background: var(--oc-surface); border-bottom: 1px solid var(--oc-line-2); }
.oc-strip__list { list-style: none; margin: 0; padding: var(--oc-s4) 0; display: grid; gap: var(--oc-s3); grid-template-columns: 1fr; }
.oc-strip__list li { display: flex; align-items: center; gap: var(--oc-s3); font-weight: 600; color: var(--oc-navy-700); }
.oc-strip__list svg { width: 22px; height: 22px; color: var(--oc-green-700); flex: 0 0 auto; }
@media (min-width: 560px) { .oc-strip__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .oc-strip__list { grid-template-columns: repeat(4, 1fr); padding-block: var(--oc-s5); } }

.oc-cat { display: flex; flex-direction: column; gap: var(--oc-s3); padding: var(--oc-s5); }
.oc-cat h3 { margin: 0; font-size: var(--oc-fs-2); }
.oc-cat p { margin: 0; color: var(--oc-ink-2); flex: 1 1 auto; }
.oc-cat__more { font-weight: 700; color: var(--oc-green-800); }

.oc-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--oc-s4); }
.oc-steps li { position: relative; padding: var(--oc-s5) var(--oc-s5) var(--oc-s5) 4.5rem; background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r3); }
.oc-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: var(--oc-s5); top: var(--oc-s5); width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--oc-green-700); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: var(--oc-fs-2); }
.oc-steps h3 { margin-bottom: var(--oc-s1); font-size: var(--oc-fs-2); }
.oc-steps p { margin: 0; color: var(--oc-ink-2); }
@media (min-width: 900px) { .oc-steps { grid-template-columns: repeat(3, 1fr); } }

.oc-split { display: grid; gap: var(--oc-s5); align-items: center; }
.oc-split__media { border-radius: var(--oc-r3); overflow: hidden; box-shadow: var(--oc-shadow-2); }
.oc-split__media img { width: 100%; height: auto; }
@media (min-width: 900px) { .oc-split { grid-template-columns: 1fr 1fr; gap: var(--oc-s7); } .oc-split--media-right .oc-split__media { order: 2; } }

.oc-car-card { display: flex; flex-direction: column; }
.oc-car-card__body { padding: var(--oc-s4) var(--oc-s5) var(--oc-s5); display: flex; flex-direction: column; gap: var(--oc-s3); flex: 1 1 auto; }
.oc-car-card__title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--oc-s2); }
.oc-car-card__title h3 { margin: 0; font-size: var(--oc-fs-2); }
.oc-car-card__type { font-size: var(--oc-fs-0); color: var(--oc-ink-3); font-weight: 600; white-space: nowrap; }
.oc-car-card__specs { display: flex; flex-wrap: wrap; gap: var(--oc-s2); list-style: none; margin: 0; padding: 0; }
.oc-car-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--oc-s2); margin-top: auto; }
.oc-car-card__actions .oc-btn { padding-inline: var(--oc-s3); }
@media (max-width: 419.98px) { .oc-car-card__actions { grid-template-columns: 1fr; } }

.oc-cover { padding: var(--oc-s5); }
.oc-cover h3 { display: flex; align-items: center; gap: var(--oc-s2); font-size: var(--oc-fs-2); }
.oc-cover h3 svg { width: 22px; height: 22px; color: var(--oc-green-700); }
.oc-cover ul { margin: 0; padding-left: 1.1rem; color: var(--oc-ink-2); }
.oc-cover li + li { margin-top: var(--oc-s1); }
.oc-cover strong { color: var(--oc-navy); }

.oc-dest { display: flex; gap: var(--oc-s4); align-items: center; padding: var(--oc-s3); }
.oc-dest img { width: 112px; height: 75px; object-fit: cover; border-radius: var(--oc-r2); flex: 0 0 auto; }
.oc-dest h3 { margin: 0 0 2px; font-size: var(--oc-fs-1); }
.oc-dest p { margin: 0; font-size: var(--oc-fs-0); color: var(--oc-ink-2); }

.oc-review { display: grid; gap: var(--oc-s5); padding: var(--oc-s5); align-items: center; }
.oc-review__quote { font-size: var(--oc-fs-3); font-weight: 700; color: var(--oc-navy); line-height: 1.4; margin: 0 0 var(--oc-s2); }
@media (min-width: 768px) { .oc-review { grid-template-columns: 1fr auto; padding: var(--oc-s6); } }

.oc-final { background: var(--oc-navy); color: #d7dbe8; padding-block: var(--oc-s8); text-align: center; }
.oc-final h2 { color: #fff; }
.oc-final p { max-width: 40rem; margin-inline: auto; }
.oc-final a:not(.oc-btn) { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); }
.oc-final a:not(.oc-btn):hover { color: #bfe9d0; }
.oc-final .oc-btn-row { justify-content: center; margin-top: var(--oc-s5); }
.oc-final .oc-btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.oc-final .oc-btn--secondary:hover { border-color: #fff; color: #fff; }
.oc-footer.oc-footer--after-final { margin-top: 0; border-top: 1px solid rgba(255,255,255,0.12); }

/* 15. Fleet & vehicle pages -------------------------------------------------- */
.oc-fleet-intro { padding-bottom: var(--oc-s4); }
.oc-fleet-intro .oc-breadcrumb { margin-top: 0; }
.oc-fleet-jump { margin-top: var(--oc-s2); }
.oc-fleet-section:target { scroll-margin-top: calc(var(--oc-header-h) + var(--oc-s4)); }
.oc-fleet-section + .oc-fleet-section { border-top: 1px solid var(--oc-line-2); }

.oc-vehicle { padding-bottom: var(--oc-s6); }
.oc-vehicle__grid { display: grid; gap: var(--oc-s5); align-items: start; }
.oc-vehicle__media { border-radius: var(--oc-r3); overflow: hidden; box-shadow: var(--oc-shadow-2); background: var(--oc-surface-2); }
.oc-vehicle__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.oc-vehicle__info h1 { margin-top: var(--oc-s1); }
.oc-vehicle__h { font-size: var(--oc-fs-2); margin: var(--oc-s5) 0 var(--oc-s2); }
.oc-vehicle__equip { display: flex; flex-wrap: wrap; gap: var(--oc-s2) var(--oc-s5); }
.oc-vehicle__equip li { margin: 0; }
.oc-vehicle__cta { margin: var(--oc-s5) 0 var(--oc-s3); }
.oc-vehicle__narrow { max-width: 52rem; }
@media (min-width: 900px) {
  .oc-vehicle__grid { grid-template-columns: 1.15fr 1fr; gap: var(--oc-s7); }
  .oc-vehicle__media { position: sticky; top: calc(var(--oc-header-h) + var(--oc-s4)); }
}
.oc-price-table th[scope="row"] { font-weight: 600; color: var(--oc-ink); background: transparent; }
.oc-price-table td.oc-num { font-weight: 800; color: var(--oc-navy); font-size: var(--oc-fs-2); }
.oc-price-table td.oc-num:empty::after { content: "สอบถาม"; font-weight: 600; color: var(--oc-ink-3); font-size: var(--oc-fs-0); }
.oc-price-table td[data-oc-price]:empty { display: table-cell !important; }

/* 13. Motion & print -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .oc-header, .oc-mobilebar, .oc-skip, .oc-menu-btn { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
  a { text-decoration: underline; }
}

/* 16. Terms summary ("สิ่งที่ควรรู้ก่อนจอง") — generated from layout/data/terms.json ---------- */
.oc-terms__card { position: relative; padding-bottom: calc(var(--oc-s5) + 1.5rem); }
.oc-terms__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--oc-r1); background: var(--oc-green-50); color: var(--oc-green-800); flex: 0 0 auto; }
.oc-terms__icon svg { width: 20px; height: 20px; }
.oc-terms__card h3 { gap: var(--oc-s3); }
.oc-terms__card h3 svg { color: inherit; }
.oc-terms__more { position: absolute; left: var(--oc-s5); bottom: var(--oc-s4); font-weight: 700; font-size: var(--oc-fs-0); text-decoration: none; color: var(--oc-green-800); min-height: 24px; display: inline-flex; align-items: center; }
.oc-terms__more:hover { text-decoration: underline; }
.oc-terms__confirm, .oc-confirm-line {
  display: flex; gap: var(--oc-s3); align-items: flex-start; margin: var(--oc-s5) 0 0;
  padding: var(--oc-s3) var(--oc-s4); border-radius: var(--oc-r2);
  background: var(--oc-green-50); border: 1px solid var(--oc-green-100); color: var(--oc-green-800); font-weight: 600;
}
.oc-terms__confirm svg, .oc-confirm-line svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 0.15em; }
.oc-confirm-line { margin: var(--oc-s4) 0; font-size: var(--oc-fs-0); }
.oc-confirm-line--plain { background: transparent; border: 0; padding: 0; color: var(--oc-ink-2); font-weight: 500; }

/* 17. Vehicle page conversion elements ---------------------------------------- */
.oc-vehicle__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--oc-s2) var(--oc-s4); }
.oc-vehicle__top .oc-breadcrumb { margin-bottom: var(--oc-s4); }
.oc-backlink { display: inline-flex; align-items: center; min-height: 24px; margin: 0 0 var(--oc-s4); font-size: var(--oc-fs-0); font-weight: 700; text-decoration: none; }
.oc-backlink:hover { text-decoration: underline; }

/* spec icons: seats / luggage / gearbox / engine (real figures only) */
.oc-spec { list-style: none; margin: var(--oc-s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--oc-s2); }
@media (min-width: 420px) { .oc-spec { grid-template-columns: repeat(4, 1fr); } }
.oc-spec li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--oc-s2); align-items: center; padding: var(--oc-s2) var(--oc-s3); background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r2); min-width: 0; }
.oc-spec__icon { grid-row: 1 / span 2; display: inline-flex; width: 30px; height: 30px; border-radius: var(--oc-r1); background: var(--oc-green-50); color: var(--oc-green-800); align-items: center; justify-content: center; }
.oc-spec__icon svg { width: 18px; height: 18px; }
.oc-spec__val { font-weight: 800; color: var(--oc-navy); line-height: 1.2; overflow-wrap: anywhere; }
.oc-spec__lbl { font-size: var(--oc-fs-0); color: var(--oc-ink-3); line-height: 1.2; }

/* "เหมาะกับ" use cases */
.oc-use-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--oc-s3); }
@media (min-width: 700px) { .oc-use-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.oc-use { display: flex; gap: var(--oc-s4); align-items: flex-start; padding: var(--oc-s4) var(--oc-s5); background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r3); }
.oc-use h3 { font-size: var(--oc-fs-2); margin: 0 0 var(--oc-s1); }
.oc-use p { margin: 0; color: var(--oc-ink-2); }

/* destination links */
.oc-dest-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--oc-s2); }
@media (min-width: 700px) { .oc-dest-links { grid-template-columns: repeat(3, 1fr); gap: var(--oc-s3); } }
.oc-dest-link { display: flex; gap: var(--oc-s3); align-items: flex-start; padding: var(--oc-s3) var(--oc-s4); min-height: var(--oc-tap); background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r2); text-decoration: none; color: var(--oc-navy); transition: border-color .15s ease, box-shadow .15s ease; }
.oc-dest-link:hover { border-color: var(--oc-green); box-shadow: var(--oc-shadow-1); color: var(--oc-navy); }
.oc-dest-link svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--oc-green-700); margin-top: 0.15em; }
.oc-dest-link > span { display: grid; gap: 2px; }
.oc-dest-link__note { font-size: var(--oc-fs-0); color: var(--oc-ink-2); font-weight: 400; }

/* fleet-card price block: rendered by the build only for approved models */
.oc-car-card__price { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: var(--oc-s2); }
.oc-car-card__price .oc-price--from { font-size: var(--oc-fs-3); }
.oc-car-card__unit { font-weight: 700; color: var(--oc-ink-2); }
.oc-car-card__note { grid-column: 1 / -1; font-size: var(--oc-fs-0); color: var(--oc-ink-3); }
.oc-car-card__delta { grid-column: 1 / -1; font-size: var(--oc-fs-0); font-weight: 700; color: var(--oc-green-800); }
.oc-car-card__deposit { grid-column: 1 / -1; font-size: var(--oc-fs-0); color: var(--oc-ink-2); }
.oc-car-card__deposit summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 24px; font-weight: 700; color: var(--oc-green-800); list-style: none; }
.oc-car-card__deposit summary::-webkit-details-marker { display: none; }
.oc-car-card__deposit summary::after { content: " ▾"; font-size: 0.8em; }
.oc-car-card__deposit[open] summary::after { content: " ▴"; }
.oc-cat-from { margin: var(--oc-s2) 0 0; font-weight: 700; color: var(--oc-ink-2); }
.oc-cat__price { display: block; font-weight: 700; color: var(--oc-ink-2); }
.oc-cat__price .oc-price--from { font-size: var(--oc-fs-2); }
.oc-chip--price { background: var(--oc-navy); color: #fff; }
.oc-chip--price .oc-price--from { color: #fff; font-size: var(--oc-fs-1); }

/* vehicle sticky bar (mobile): model + from-price + LINE + book */
.oc-mobilebar--vehicle { grid-template-columns: 1.5fr 0.8fr 1.1fr; }
.oc-mobilebar__model { display: grid !important; grid-template-columns: 1fr; align-content: center; justify-items: start; gap: 0 !important; padding: 0 var(--oc-s3); text-align: left; line-height: 1.2; min-width: 0; }
.oc-mobilebar__model strong { font-size: var(--oc-fs-0); color: var(--oc-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.oc-mobilebar__model .oc-price--from { font-size: var(--oc-fs-1); }
.oc-mobilebar__model .oc-price--from:not(:empty)::before { content: ""; }
.oc-mobilebar__sub { font-size: 0.75rem; font-weight: 600; color: var(--oc-green-800); }
.oc-mobilebar--vehicle a { white-space: nowrap; }
@media (max-width: 359.98px) { .oc-mobilebar--vehicle { grid-template-columns: 1.25fr 0.7fr 1fr; gap: var(--oc-s1); } .oc-mobilebar--vehicle a { padding-inline: var(--oc-s2); font-size: var(--oc-fs-0); } .oc-mobilebar--vehicle .oc-mobilebar__line svg { display: none; } }

/* gallery: swipeable row on phones, grid from 560px; captions */
.oc-gallery__item figure { margin: 0; }
.oc-gallery figcaption { font-size: var(--oc-fs-0); color: var(--oc-ink-2); padding: var(--oc-s1) 2px 0; }
@media (max-width: 559.98px) {
  .oc-gallery { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: var(--oc-s3); padding-bottom: var(--oc-s2); margin-inline: calc(-1 * var(--oc-gutter)); padding-inline: var(--oc-gutter); scrollbar-width: thin; }
  .oc-gallery__item { flex: 0 0 72vw; scroll-snap-align: start; }
}

/* 18. Footer LINE QR ---------------------------------------------------------- */
.oc-footer__qr { display: inline-flex; align-items: center; gap: var(--oc-s3); margin-top: var(--oc-s4); padding: var(--oc-s2); padding-right: var(--oc-s4); border-radius: var(--oc-r2); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); text-decoration: none; color: #d7dbe8; font-size: var(--oc-fs-0); line-height: 1.45; }
.oc-footer__qr:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
.oc-footer__qr img { width: 96px; height: 96px; border-radius: var(--oc-r1); background: #fff; padding: 4px; flex: 0 0 auto; }
.oc-footer__cta .oc-btn { min-height: 44px; }

/* 19. Language and lightweight contact actions ----------------------------- */
.oc-language-switcher {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: 40px;
  padding: 0.35rem 0.6rem; border: 1px solid var(--oc-line); border-radius: var(--oc-r-pill);
  color: var(--oc-navy); background: var(--oc-surface); font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.oc-language-switcher:hover { border-color: var(--oc-green); color: var(--oc-green-800); }
.oc-lang-flag { width: 1.35rem; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(20,27,53,.14); flex: 0 0 auto; }

/* Compact desktop shell: long English labels and conversion actions must never
   force horizontal page scrolling. The full mobile menu remains available on
   small laptops and landscape tablets. */
@media (min-width: 900px) and (max-width: 1049.98px) {
  .oc-menu-btn { display: inline-flex; }
  .oc-header__actions .oc-header__phone { display: none; }
  .oc-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--oc-surface); border-bottom: 1px solid var(--oc-line);
    box-shadow: var(--oc-shadow-3); padding: var(--oc-s3) var(--oc-gutter) var(--oc-s5);
  }
  .js .oc-nav { display: none; }
  .js .oc-nav.is-open { display: block; }
  .oc-nav__list { flex-direction: column; gap: 0; }
  .oc-nav__list a { min-height: 52px; font-size: var(--oc-fs-2); border-bottom: 1px solid var(--oc-line-2); border-radius: 0; white-space: normal; }
  .oc-nav__list a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--oc-green); padding-left: calc(var(--oc-s3) + 4px); border-radius: 0; }
  .oc-nav__extra { display: grid; grid-template-columns: 1fr 1fr; gap: var(--oc-s2); margin-top: var(--oc-s4); }
  .oc-nav__extra .oc-btn { width: 100%; }
}
@media (min-width: 1050px) and (max-width: 1399.98px) {
  .oc-header__inner { gap: .55rem; }
  .oc-brand img { width: 142px; height: 38px; }
  .oc-nav__list { gap: 0; }
  .oc-nav__list a { padding-inline: .48rem; font-size: .88rem; }
  .oc-header__actions { gap: .4rem; }
  .oc-header__actions .oc-header__phone { display: none; }
  .oc-header__actions .oc-header__cta { padding-inline: .8rem; font-size: .88rem; }
  .oc-language-switcher { padding-inline: .5rem; }
}
@media (max-width: 419.98px) {
  .oc-language-switcher { padding-inline: .45rem; min-width: 44px; }
  .oc-lang-flag { width: 1.15rem; }
}
.oc-contact-dock {
  position: fixed; z-index: 50; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  display: flex; align-items: stretch; gap: 0.35rem; padding: 0.35rem;
  border: 1px solid rgba(255,255,255,0.7); border-radius: var(--oc-r-pill);
  background: rgba(16,40,78,0.94); box-shadow: var(--oc-shadow-3); backdrop-filter: blur(12px);
}
.oc-contact-dock__item {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 42px; padding: 0.35rem 0.7rem;
  border-radius: var(--oc-r-pill); color: #fff !important; font-size: 0.8rem; font-weight: 700; text-decoration: none;
}
.oc-contact-dock__item:hover { filter: brightness(1.12); }
.oc-contact-dock__item--line { background: #06c755; color: #062b15 !important; }
.oc-contact-dock__item--whatsapp { background: #20b864; }
.oc-contact-dock__item--facebook { background: #1877f2; }
.oc-contact-dock__icon { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; border: 1px solid currentColor; border-radius: 50%; font-size: 0.58rem; line-height: 1; }
@media (max-width: 560px) {
  .oc-contact-dock { right: 0.65rem; left: 0.65rem; justify-content: space-between; }
  .oc-contact-dock__item { flex: 1; justify-content: center; padding-inline: 0.35rem; }
  .oc-contact-dock__item > span:last-child { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-contact-dock, .oc-contact-dock * { transition: none !important; animation: none !important; }
}

/* 19. Language switch ---------------------------------------------------------- */
.oc-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--oc-s2); border-radius: var(--oc-r1); font-weight: 700; font-size: var(--oc-fs-0); letter-spacing: 0.04em; color: var(--oc-navy-700); text-decoration: none; border: 1px solid var(--oc-line); background: var(--oc-surface); }
.oc-lang:hover { color: var(--oc-green-800); border-color: var(--oc-green); }


/* 20. Form field errors (contact) ----------------------------------------------- */
.oc-field__error { display: block; margin-top: var(--oc-s1); font-size: var(--oc-fs-0); font-weight: 600; color: var(--oc-danger); }
.oc-field__error[hidden] { display: none; }
[aria-invalid="true"].oc-input, [aria-invalid="true"].oc-select, [aria-invalid="true"].oc-textarea { border-color: var(--oc-danger); box-shadow: 0 0 0 3px var(--oc-danger-50); }

/* 21. English terms page: the bilingual terms component's article styles, without its top bar */
.oc-terms-en { padding-top: var(--oc-s4); }
.oc-terms-en article > section { padding-block: var(--oc-s3); }
.oc-terms-en article h2 { font-size: var(--oc-fs-3); }

/* 22. Vehicle-page price chip (rendered only for models approved in prices.json) ---- */
.oc-price-chip { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--oc-s1) var(--oc-s4); margin: var(--oc-s4) 0 0; padding: var(--oc-s3) var(--oc-s4); border-radius: var(--oc-r2); background: var(--oc-green-50); border: 1px solid var(--oc-green-100); color: var(--oc-ink-2); font-size: var(--oc-fs-0); }
.oc-price-chip__from { color: var(--oc-navy); font-weight: 700; font-size: var(--oc-fs-1); }
.oc-price-chip__from .oc-price--from { font-size: var(--oc-fs-3); }
.oc-price-chip__note { flex-basis: 100%; }
.oc-price-chip__item strong { color: var(--oc-navy); }

/* 23. Shared bilingual component aliases ------------------------------------
   English pages previously used an older set of component names. Keeping the
   aliases here makes every language use the same visual system while the
   wording and section lengths remain appropriate to each audience. */
.oc-section--tint { background: var(--oc-surface); border-top: 1px solid var(--oc-line-2); border-bottom: 1px solid var(--oc-line-2); }
.oc-center { text-align: center; }
.oc-mt-5 { margin-top: var(--oc-s5); }
.oc-actions { display: flex; flex-wrap: wrap; gap: var(--oc-s3); margin-top: var(--oc-s5); }
.oc-link-card { display: flex; flex-direction: column; gap: var(--oc-s3); padding: var(--oc-s5); color: var(--oc-ink); text-decoration: none; }
.oc-link-card:hover { color: var(--oc-ink); border-color: var(--oc-green); box-shadow: var(--oc-shadow-2); transform: translateY(-2px); }
.oc-link-card h2, .oc-link-card h3 { margin: 0; color: var(--oc-navy); font-size: var(--oc-fs-2); }
.oc-link-card p { margin: 0; color: var(--oc-ink-2); }
.oc-link-card__action { margin-top: auto; color: var(--oc-green-800); font-weight: 800; }
.oc-hero__content { max-width: 46rem; }
.oc-hero__content h1 { margin-bottom: var(--oc-s4); }
.oc-hero__trust { display: grid; gap: var(--oc-s2); margin: var(--oc-s5) 0 0; padding: 0; list-style: none; }
.oc-hero__trust li { position: relative; padding-left: 1.7rem; color: var(--oc-ink-2); font-weight: 600; }
.oc-hero__trust li::before { content: "\2713"; position: absolute; left: 0; color: var(--oc-green-800); font-weight: 900; }
.oc-flow { counter-reset: oc-flow; display: grid; gap: var(--oc-s4); margin: 0; padding: 0; list-style: none; }
.oc-flow li { position: relative; min-width: 0; padding: var(--oc-s5) var(--oc-s5) var(--oc-s5) 4.5rem; border: 1px solid var(--oc-line); border-radius: var(--oc-r3); background: var(--oc-surface); }
.oc-flow li::before { counter-increment: oc-flow; content: counter(oc-flow); position: absolute; top: var(--oc-s5); left: var(--oc-s5); display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--oc-green-700); color: #fff; font-weight: 800; }
.oc-flow strong, .oc-flow span { display: block; }
.oc-flow strong { margin-bottom: var(--oc-s1); color: var(--oc-navy); font-family: var(--oc-font-display); font-size: var(--oc-fs-2); }
.oc-flow span { color: var(--oc-ink-2); }
.oc-callout { display: grid; gap: var(--oc-s5); align-items: center; padding: var(--oc-s6); border: 1px solid var(--oc-line); border-radius: var(--oc-r3); background: linear-gradient(135deg, var(--oc-green-50), #fff 58%, var(--oc-surface-2)); box-shadow: var(--oc-shadow-1); }
.oc-callout h2 { margin-bottom: var(--oc-s2); }
.oc-callout p { margin-bottom: 0; color: var(--oc-ink-2); }
.oc-faq-list { display: grid; gap: var(--oc-s3); max-width: 58rem; }
.oc-address { font-style: normal; color: var(--oc-ink-2); }
@media (min-width: 760px) {
  .oc-flow--3 { grid-template-columns: repeat(3, 1fr); }
  .oc-callout { grid-template-columns: 1fr auto; }
}
@media (max-width: 560px) {
  .oc-footer__quicklinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-footer__quicklinks a { justify-content: center; text-align: center; }
}