/* GlitKraft logo — steering-wheel mark + wordmark.
   Single colour via currentColor so it swaps white<->dark exactly like the
   original template logo (white over the hero, dark on the solid header). */

.gk-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  line-height: 1;
  color: #15171c;                 /* dark: inner header + home header once scrolled */
  white-space: nowrap;
}
.gk-logo:hover { color: #15171c; }

.gk-logo__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: inherit;                 /* strokes/fills follow the logo colour */
}

.gk-logo__text {
  font-family: "Figtree", "Outfit", "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: inherit;
}

/* Home page: transparent header over the hero -> white logo.
   Once .header-lower gets .is-fixed (scrolled), this stops matching and the
   dark default above takes over — same trigger the template uses. */
.main-header.style-white .header-lower:not(.is-fixed) .gk-logo { color: #ffffff; }
.main-header.style-white .header-lower:not(.is-fixed) .gk-logo:hover { color: #ffffff; }

/* Footer sits on a dark background -> white logo. */
.footer .gk-logo,
footer .gk-logo { color: #ffffff; }

.gk-logo--white { color: #ffffff; }

/* Login / register modals are on white cards -> keep the dark logo (default). */

/* -------------------------------------------------------------------------
   Homepage car grids (HomeCars / list-car-grid-4)
   The base .box-car-list is `display:block; overflow:hidden`, and only the
   inventory grid overrides the card to a column layout. Without that, the
   image fills the card and the title / specs / price get clipped. Mirror the
   inventory card layout here so the content shows, and keep it responsive.
   ------------------------------------------------------------------------- */
.list-car-grid-4 .box-car-list.style-2 {
  display: flex;
  flex-direction: column;
}
.list-car-grid-4 .box-car-list.style-2 .image-group {
  width: 100% !important;
}
.list-car-grid-4 .box-car-list.style-2 .img-style {
  height: 200px;
}
.list-car-grid-4 .box-car-list.style-2 .img-style a {
  display: block;
  height: 100%;
}
.list-car-grid-4 .box-car-list.style-2 .img-style img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 0;
}

@media (max-width: 1200px) { .list-car-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .list-car-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .list-car-grid-4 { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Translucent "glassy" buttons, targeted by href.
   - "Go to Listing" (hero) always sits over the hero image -> always glassy.
   - "Sell Us Your Car" is in the header: glassy over the transparent hero
     header, but SOLID once the header turns white (scrolled home / inner
     pages) so it doesn't disappear white-on-white.
   ------------------------------------------------------------------------- */

/* Hero "Go to Listing" — always glassy */
.chat-wrap a.sc-button[href="listing-grid.html"] {
  background: #FFFFFF1A !important;
  color: #FFFFFF !important;
}
.chat-wrap a.sc-button[href="listing-grid.html"] span { color: #FFFFFF !important; }
.chat-wrap a.sc-button[href="listing-grid.html"]:hover { background: #FFFFFF33 !important; }

/* "Sell Us Your Car" — solid dark by default (visible on any white header) */
a.sc-button[href="sell-your-car.html"] {
  background: #15171c !important;
  color: #FFFFFF !important;
}
a.sc-button[href="sell-your-car.html"] span { color: #FFFFFF !important; }
a.sc-button[href="sell-your-car.html"]:hover { background: #000000 !important; }

/* ...but glassy while the home header is still transparent over the hero */
.main-header.style5 .header-lower:not(.is-small) a.sc-button[href="sell-your-car.html"] {
  background: #FFFFFF1A !important;
}
.main-header.style5 .header-lower:not(.is-small) a.sc-button[href="sell-your-car.html"]:hover {
  background: #FFFFFF33 !important;
}

/* -------------------------------------------------------------------------
   Black hamburger (mobile menu toggle) + black homepage search button.
   ------------------------------------------------------------------------- */
/* Hamburger: the three lines are drawn as the span + ::before / ::after */
.mobile-button span,
.mobile-button::before,
.mobile-button::after {
  background-color: #15171c !important;
}

/* Homepage search widget "Search" button (All category / New / Used tabs) */
.button-search .sc-button {
  background: #15171c !important;
}
.button-search .sc-button:hover {
  background: #000000 !important;
}
.button-search .sc-button i,
.button-search .sc-button span {
  color: #ffffff !important;
}

/* "Trusted Local Car Dealership" section — after removing the left 972K visual
   the remaining pitch spans full width, so centre it. */
.section-reputable .col-lg-12 { text-align: center; }
.section-reputable .col-lg-12 .heading-section,
.section-reputable .col-lg-12 .content-reputable { margin-left: auto; margin-right: auto; }
.section-reputable .col-lg-12 .btn-wrap { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   Light title bars: `.flat-title.bg-3` uses a light background (#F5F7FE), so
   the template's white heading/breadcrumb text is invisible. Force it dark on
   these pages (Inventory, Blog, Blog detail, Sell, etc.).
   ------------------------------------------------------------------------- */
.flat-title.bg-3 .heading.text-white { color: #15171c !important; }
.flat-title.bg-3 .breadcrumbs .text-white,
.flat-title.bg-3 .breadcrumbs a.text-white { color: #555 !important; }

/* -------------------------------------------------------------------------
   Car detail page layout: two columns on desktop (content + dealer sidebar),
   stacked to one column on tablet/mobile so the main content isn't crushed
   down to a sliver (which made the description wrap one word per line).
   ------------------------------------------------------------------------- */
.gk-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 991px) {
  .gk-detail-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* -------------------------------------------------------------------------
   Car detail — dealer sidebar on mobile.
   The template turns .dealer-sidebar into an off-canvas drawer at <=991px
   (position:fixed; right:-350px) that only opens via a toggle button we don't
   use — so the price / WhatsApp / dealer-info panel was stuck off-screen and
   users couldn't reach the "Message dealer on WhatsApp" button. Force it back
   to a normal stacked block so it flows below the car details.
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .gk-detail-grid .dealer-sidebar {
    position: static !important;
    right: auto !important;
    top: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: auto !important;
    margin-top: 0 !important;
  }
}

/* -------------------------------------------------------------------------
   Meet the Founders page — alternating photo / text rows, responsive.
   ------------------------------------------------------------------------- */
.gk-founder-row {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}
.gk-founder-row.reverse .gk-founder-img { order: 2; }
.gk-founder-img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  display: block;
}
@media (max-width: 767px) {
  .gk-founder-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .gk-founder-row.reverse .gk-founder-img { order: 0; }
  .gk-founder-img img { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------------------------
   Search by brand — dark logo cards (luxury brands).
   ------------------------------------------------------------------------- */
.gk-brand-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: #ffffff; border: 1px solid #ececec; border-radius: 16px;
  padding: 40px 20px 30px; text-decoration: none; height: 100%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.gk-brand-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.10); border-color: #dcdcdc; transform: translateY(-4px); }
.gk-brand-logo { height: 62px; display: flex; align-items: center; justify-content: center; }
.gk-brand-logo img { max-height: 100%; max-width: 130px; object-fit: contain; }
.gk-brand-name { color: #15171c; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

/* =========================================================================
   LUXURY REDESIGN — inventory + car detail
   Palette: ink #0E0E10 · paper #FAFAF8 · platinum-gold #B08D4F ·
            label-grey #8A8A8E · hairline #E8E6E1
   ========================================================================= */
:root{
  --gk-ink:#0E0E10; --gk-paper:#FAFAF8; --gk-gold:#B08D4F;
  --gk-grey:#8A8A8E; --gk-line:#E8E6E1; --gk-card:#FFFFFF;
}
.gk-eyebrow{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gk-gold); font-weight:600; }
.gk-section-label{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gk-grey); font-weight:600; margin-bottom:14px; }

/* ---- breadcrumb ---- */
.gk-crumbs{ display:flex; align-items:center; gap:12px; padding:28px 0 0; font-size:13px; color:var(--gk-grey); }
.gk-crumbs a{ color:var(--gk-grey); text-decoration:none; }
.gk-crumbs a:hover{ color:var(--gk-ink); }
.gk-crumbs .cur{ color:var(--gk-ink); font-weight:600; }

/* ---- detail hero ---- */
.gk-hero{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:56px; align-items:center; padding:36px 0 64px; }
.gk-hero__title{ font-size:clamp(40px,5vw,68px); line-height:.98; letter-spacing:-.02em; color:var(--gk-ink); margin:18px 0 26px; font-weight:800; }
.gk-hero__from{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gk-grey); }
.gk-hero__amount{ font-size:clamp(30px,3.4vw,42px); font-weight:800; color:var(--gk-ink); letter-spacing:-.01em; line-height:1; margin-top:4px; }
.gk-hero__was{ font-size:18px; color:var(--gk-grey); text-decoration:line-through; margin-left:12px; }
.gk-hero__media{ background:linear-gradient(160deg,#f6f5f2,#eceae5); border-radius:20px; padding:26px; display:flex; align-items:center; justify-content:center; }
.gk-hero__media img{ width:100%; height:auto; display:block; filter:drop-shadow(0 30px 40px rgba(0,0,0,.16)); }

.gk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border-radius:999px; font-weight:600; font-size:15px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.gk-btn--wa{ background:#0E0E10; color:#fff; }
.gk-btn--wa:hover{ background:#000; transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.24); }
.gk-btn--ghost{ background:transparent; color:var(--gk-ink); border-color:var(--gk-ink); }
.gk-btn--ghost:hover{ background:var(--gk-ink); color:#fff; }
.gk-btn--dark{ background:var(--gk-ink); color:#fff; }
.gk-btn--dark:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.2); }

/* spec chips under the hero price */
.gk-chips{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:38px; border-top:1px solid var(--gk-line); padding-top:26px; }
.gk-chip span{ display:block; font-size:19px; font-weight:700; color:var(--gk-ink); }
.gk-chip label{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gk-grey); margin-top:3px; }

/* thumbnail strip */
.gk-thumbs{ display:flex; gap:12px; flex-wrap:wrap; padding-bottom:8px; }
.gk-thumbs button{ width:110px; height:74px; padding:0; border-radius:12px; overflow:hidden; border:2px solid transparent; background:#f1f0ec; cursor:pointer; line-height:0; }
.gk-thumbs button.is-active{ border-color:var(--gk-gold); }
.gk-thumbs img{ width:100%; height:100%; object-fit:contain; }

/* body two-column */
.gk-body{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:56px; align-items:start; padding:56px 0 20px; }
.gk-block{ margin-bottom:46px; }
.gk-block h2{ font-size:24px; font-weight:800; letter-spacing:-.01em; color:var(--gk-ink); margin:0 0 20px; }
.gk-spec-row{ display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--gk-line); font-size:15px; }
.gk-spec-row .k{ color:var(--gk-grey); }
.gk-spec-row .v{ color:var(--gk-ink); font-weight:600; }
.gk-feat{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--gk-ink); }
.gk-feat i{ color:var(--gk-gold); }

/* aside card */
.gk-aside{ position:sticky; top:100px; }
.gk-card{ background:var(--gk-card); border:1px solid var(--gk-line); border-radius:18px; padding:26px; margin-bottom:18px; }
.gk-card--ink{ background:var(--gk-ink); color:#fff; border-color:var(--gk-ink); }
.gk-card--ink .gk-dealer-name{ color:#fff; }

/* ---- inventory ---- */
.gk-inv-head{ padding:60px 0 30px; }
.gk-inv-head h1{ font-size:clamp(40px,5vw,64px); line-height:1; letter-spacing:-.02em; font-weight:800; color:var(--gk-ink); margin:14px 0 0; }
.gk-filterbar{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end; background:var(--gk-card); border:1px solid var(--gk-line); border-radius:18px; padding:24px 26px; }
.gk-field{ display:flex; flex-direction:column; gap:7px; }
.gk-field > label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gk-grey); font-weight:600; }
.gk-input{ height:46px; padding:0 14px; border:1px solid var(--gk-line); border-radius:10px; background:#fff; font-size:14px; color:var(--gk-ink); min-width:150px; }
.gk-input:focus{ outline:none; border-color:var(--gk-gold); }
select.gk-input{ cursor:pointer; }
.gk-inv-bar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding:38px 0 26px; }
.gk-inv-count{ font-size:15px; color:var(--gk-grey); }
.gk-inv-count b{ color:var(--gk-ink); }

@media (max-width:991px){
  .gk-hero{ grid-template-columns:1fr; gap:28px; padding-bottom:40px; }
  .gk-hero__media{ order:-1; }
  .gk-body{ grid-template-columns:1fr; gap:36px; }
  .gk-aside{ position:static; }
}
@media (max-width:575px){ .gk-chips{ grid-template-columns:repeat(2,1fr); row-gap:22px; } }

/* Mobile: hide the hero spec badges (they crowd the small viewport). The
   search widget stays visible on phones. */
@media (max-width: 991px) {
  .specifications-wrap { display: none !important; }
}

/* Mobile: join the search tab flush to the form panel (kill the vertical gap
   that let the hero show between "Search the Collection" and the dropdowns). */
@media (max-width: 991px) {
  .flat-filter-search .box-tab,
  .flat-filter-search .menu-tab { margin-bottom: 0 !important; }
  .flat-filter-search .menu-tab { margin-top: 0 !important; }
  .flat-filter-search .content-tab,
  .flat-filter-search .content-inner,
  .flat-filter-search .form-sl { margin-top: 0 !important; }
}

/* =========================================================================
   ABOUT PAGE — heritage redesign
   ========================================================================= */
.gk-about-intro { padding: 50px 0 20px; max-width: 860px; }
.gk-about-title { font-size: clamp(40px, 5.6vw, 74px); line-height: .98; letter-spacing: -.02em; font-weight: 800; color: var(--gk-ink); margin: 16px 0 30px; }
.gk-about-lead { font-size: clamp(19px, 2.2vw, 25px); line-height: 1.55; color: #2a2a2e; font-weight: 500; }

.gk-about-story { background: var(--gk-ink); color: #fff; margin: 54px 0; padding: 76px 0; }
.gk-about-story__grid { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; }
.gk-about-year { font-size: clamp(96px, 15vw, 210px); font-weight: 800; line-height: .82; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--gk-gold); text-stroke: 1.5px var(--gk-gold); }
.gk-about-copy p { font-size: 17px; line-height: 1.85; color: rgba(255,255,255,.82); margin-bottom: 18px; }
.gk-about-copy p:last-child { margin-bottom: 0; }

.gk-about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--gk-line); border: 1px solid var(--gk-line); border-radius: 16px; overflow: hidden; margin-bottom: 72px; }
.gk-about-stat { background: #fff; padding: 36px 28px; }
.gk-about-stat h3 { font-size: 24px; font-weight: 800; color: var(--gk-ink); margin: 0 0 8px; letter-spacing: -.01em; }
.gk-about-stat p { font-size: 14px; color: var(--gk-grey); margin: 0; line-height: 1.5; }

.gk-about-cta { background: var(--gk-paper); border-top: 1px solid var(--gk-line); padding: 84px 0; text-align: center; }
.gk-about-cta h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -.02em; margin: 14px 0 16px; color: var(--gk-ink); }
.gk-about-cta p { max-width: 560px; margin: 0 auto 30px; font-size: 17px; line-height: 1.7; color: #3a3a3e; }

@media (max-width: 991px) {
  .gk-about-story { padding: 54px 0; margin: 36px 0; }
  .gk-about-story__grid { grid-template-columns: 1fr; gap: 22px; }
  .gk-about-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) { .gk-about-stats { grid-template-columns: 1fr; } }

/* =========================================================================
   MOBILE MENU (React) — replaces the template's flaky mobile menu
   ========================================================================= */
.gk-mnav {
  position: fixed; inset: 0; z-index: 2147483646;
  background: var(--gk-ink); color: #fff;
  display: flex; flex-direction: column; padding: 20px 26px 30px;
  transform: translateX(100%); opacity: 0; visibility: hidden;
  transition: transform .4s cubic-bezier(.5,0,.2,1), opacity .3s ease, visibility .4s;
}
.gk-mnav.is-open { transform: none; opacity: 1; visibility: visible; }
.gk-mnav__head { display: flex; align-items: center; justify-content: space-between; }
.gk-mnav__brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; color: #fff; background: none; border: none; cursor: pointer; letter-spacing: -.01em; }
.gk-mnav__close { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.gk-mnav__close:hover { background: rgba(255,255,255,.16); }
.gk-mnav__links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.gk-mnav__links button { display: flex; align-items: baseline; gap: 16px; width: 100%; background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.09); color: #fff; font-size: clamp(26px, 8vw, 34px); font-weight: 700; letter-spacing: -.015em; padding: 15px 0; text-align: left; cursor: pointer; transition: color .2s, padding-left .2s; }
.gk-mnav__links button:hover, .gk-mnav__links button:active { color: var(--gk-gold); padding-left: 8px; }
.gk-mnav__num { font-size: 12px; font-weight: 600; color: var(--gk-gold); letter-spacing: .1em; }
.gk-mnav__foot { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.gk-mnav__contact { text-align: center; color: rgba(255,255,255,.5); font-size: 12.5px; line-height: 1.7; letter-spacing: .04em; margin-top: 8px; }
.gk-btn--gold { background: var(--gk-gold); color: #0E0E10; }
.gk-btn--gold:hover { background: #c8a45f; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(176,141,79,.3); }
/* WhatsApp button on the dark menu -> outlined (the solid one is black now) */
.gk-mnav .gk-btn--wa { background: transparent; border: 1px solid rgba(255,255,255,.22); color: #fff; }
.gk-mnav .gk-btn--wa:hover { background: rgba(255,255,255,.08); box-shadow: none; transform: translateY(-2px); }

/* Hide the template's leftover user-profile avatar + its old flaky mobile menu */
.box-avatar { display: none !important; }
body .mobile-menu { display: none !important; }

/* Footer "Car by brands" — logos sit directly on the dark footer (no card). */
.grid-brand-car .box-brand {
  background: transparent !important;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 14px; min-height: 70px;
}
.grid-brand-car .box-brand img {
  max-height: 48px; max-width: 100%; width: auto; object-fit: contain;
}