/* HDK Golf Carts Australia — "Beenleigh sun".
   Loaded after the original stylesheets. Most of the retheme happens by redefining the design
   tokens; only rules that hard-coded a dark colour need an explicit override, and those repeat
   their class (.btn.btn) so they outrank Astro's scoped [data-astro-cid-*] selectors. */

:root {
  /* daylight, not a dark showroom */
  --ink: #fbf6ee;
  --ink-2: #fffdf9;
  --surface: #fffdf9;
  --surface-2: #f4ece0;
  --line: rgba(24, 38, 29, .13);
  --line-strong: rgba(24, 38, 29, .24);
  --text: #16241c;
  --muted: #5b6a61;
  --faint: #8b978e;

  /* sunrise over the Pacific Motorway */
  --brass: #ef6820;
  --brass-bright: #ff8a42;
  --fairway: #1c7a46;
  --danger: #c0392b;
  --ocean: #0d6b73;
  --sand: #f4ece0;

  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(24, 38, 29, .05), 0 20px 44px -26px rgba(24, 38, 29, .38);
  --font: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Outfit", "Inter Variable", "Inter", system-ui, sans-serif;
}

body { background:
    radial-gradient(60% 40% at 88% -8%, rgba(239, 104, 32, .10), transparent 70%),
    radial-gradient(48% 34% at 4% 2%, rgba(13, 107, 115, .08), transparent 72%),
    var(--ink);
  background-attachment: fixed; }

/* ---- type ------------------------------------------------------------- */
h1, h2, h3, .display, .h1, .h2, .h3,
.logo__name, .pd__title, .faq__gname { font-family: var(--display); letter-spacing: -.03em; }
.display.display { font-weight: 700; letter-spacing: -.045em; line-height: .98; }
.h2.h2 { font-weight: 650; }
.eyebrow.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--brass); font-weight: 700; letter-spacing: .16em; }
.eyebrow.eyebrow::before {
  content: ""; width: 18px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brass), var(--brass-bright)); }
.lede.lede { color: #3d4a43; }

/* the headline gets a highlighter stroke under the emphasised words */
.display em {
  font-style: normal; color: var(--text);
  background-image: linear-gradient(90deg, rgba(239, 104, 32, .95), rgba(255, 176, 92, .9));
  background-repeat: no-repeat; background-size: 100% .28em; background-position: 0 86%;
  padding-inline: .04em; }

/* ---- chrome ----------------------------------------------------------- */
.hdr.hdr { border-bottom: 1px solid var(--line); }
.logo__sub.logo__sub { color: var(--brass); }
.skip.skip { color: #fff; }
::selection { background: var(--brass); color: #fff; }

.section--alt.section--alt {
  background:
    linear-gradient(90deg, var(--brass), var(--brass-bright) 42%, var(--fairway)) top / 100% 3px no-repeat,
    linear-gradient(180deg, var(--sand), #f7f0e6);
  border-block: 1px solid var(--line); }

/* ---- hero ------------------------------------------------------------- */
.hero__bg.hero__bg {
  background:
    radial-gradient(44% 46% at 78% 26%, rgba(239, 104, 32, .22), transparent 68%),
    radial-gradient(38% 40% at 12% 6%, rgba(13, 107, 115, .14), transparent 72%),
    radial-gradient(70% 50% at 50% 104%, rgba(28, 122, 70, .12), transparent 70%); }
.hero__visual.hero__visual { box-shadow: var(--shadow); }

/* ---- cards ------------------------------------------------------------ */
.card.card { box-shadow: 0 1px 2px rgba(24, 38, 29, .04); }
.card.card:hover { border-color: rgba(239, 104, 32, .45); box-shadow: var(--shadow); }
.pc.pc { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.pc.pc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pc__img { transition: transform .5s var(--ease); }
.pc.pc:hover .pc__img { transform: scale(1.045); }

/* ---- buttons, pills, form bits that assumed a dark background ---------- */
.btn.btn { --btn-fg: #fff; font-weight: 600; box-shadow: 0 10px 22px -14px rgba(239, 104, 32, .9); }
.btn.btn:hover { transform: translateY(-1px); }
.btn--ghost.btn--ghost { --btn-fg: var(--text); background: transparent; border-color: var(--line-strong); box-shadow: none; }
.btn--ghost.btn--ghost:hover { background: rgba(24, 38, 29, .05); border-color: var(--brass); }
.btn--wa.btn--wa { --btn-bg: #1f8f4d; --btn-fg: #fff; box-shadow: 0 10px 22px -14px rgba(31, 143, 77, .9); }
.chip.chip { background: rgba(24, 38, 29, .04); color: #47554d; }
.hdr__link:hover, .hdr__icon:hover, .qty button:hover, .pd__qty button:hover, .opt:hover {
  background: rgba(24, 38, 29, .06) !important; }
.input:hover, .radio:hover { border-color: var(--line-strong) !important; }
.hdr__pip--brass, .drawer__n { color: #fff !important; }
.check__box:after, .opt__box:after { border-color: #fff !important; }
.chips button { background: rgba(24, 38, 29, .04) !important; }

/* badges sat on a dark blur; on daylight they need solid fills */
.badge.badge { background: rgba(255, 253, 249, .92); color: var(--text); border: 1px solid var(--line-strong); border-radius: 100px; }
.badge--new.badge--new { background: var(--fairway); color: #fff; border-color: transparent; }
.badge--sale.badge--sale { background: var(--brass); color: #fff; border-color: transparent; }
.badge--sold.badge--sold { background: var(--danger); color: #fff; border-color: transparent; }
.pd__zoom.pd__zoom { background: rgba(22, 36, 28, .78); color: #fff; }

/* ---- process numbers get some size ------------------------------------ */
.proc__n.proc__n {
  font-family: var(--display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--brass); opacity: .9; }

/* ======================================================================== */
/*  New local components                                                    */
/* ======================================================================== */

/* the scrolling strip of places we run to */
.belt { background: var(--text); color: #f3efe9; overflow: hidden; border-block: 1px solid rgba(0, 0, 0, .2); }
.belt__track { display: flex; gap: 0; width: max-content; animation: belt 46s linear infinite; }
.belt__set { display: flex; align-items: center; gap: 2.2rem; padding: .85rem 1.1rem; white-space: nowrap; }
.belt__item { display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 560; letter-spacing: .02em; color: #efe7db; }
.belt__item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass-bright); }
.belt:hover .belt__track { animation-play-state: paused; }
@keyframes belt { to { transform: translate(-50%); } }
@media (prefers-reduced-motion: reduce) { .belt__track { animation: none; } }

/* where we deliver */
.areas { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.area { padding: 1.35rem 1.35rem 1.45rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 1px 2px rgba(24,38,29,.04);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.area:hover { transform: translateY(-3px); border-color: rgba(239,104,32,.45); box-shadow: var(--shadow); }
.area__k { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .55rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--brass); }
.area h3 { font-size: 1.06rem; margin-bottom: .4rem; }
.area p { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.area__list { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .38rem; }
.area__list span { padding: .2rem .55rem; border-radius: 100px; font-size: .74rem;
  background: rgba(24,38,29,.05); color: #4a584f; }

/* the reassurance band for buying without visiting */
.online { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.online__item { display: flex; gap: .85rem; }
.online__n { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 12px; background: linear-gradient(145deg, var(--brass), var(--brass-bright));
  color: #fff; font-family: var(--display); font-weight: 700; font-size: .95rem; }
.online__item h3 { font-size: 1rem; margin-bottom: .25rem; }
.online__item p { color: var(--muted); font-size: .9rem; line-height: 1.55; }