:root{
  --navy: #0e1f4b;
  --navy-dark: #0a1636;
  --red: #d92d3b;
  --green: #25d366;
  --gray-btn: #3b4150;
  --card-bg: #ffffff;
  --text-dark: #1c2333;
  --text-muted: #5b6472;
  --max-width: 1200px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{color:var(--text-dark); background:#fff; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font:inherit; cursor:pointer;}

/* ---------- Header ---------- */
.site-header{
  border-bottom:1px solid #eceff3;
  position:sticky; top:0; background:#fff; z-index:50;
}
/* 3-column grid — call+social sit flush at the left edge, the nav+locale
   group sits flush at the right edge, and since both outer columns are the
   same "1fr" fraction the logo in the middle column lands dead-center
   regardless of how much content either side holds. The header itself is
   full-width (unlike the boxed page content below) so those two side
   groups ride all the way out towards the browser edges on wide screens
   instead of being squeezed into the same 1200px column as the cards. */
.header-inner{
  width:100%;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:20px;
  padding:12px 44px;
}
.call-now{
  display:flex; align-items:center; gap:8px;
  background:var(--navy); color:#fff;
  padding:10px 16px; border-radius:6px;
  font-weight:600; font-size:0.95rem;
  white-space:nowrap;
}
.social-block{display:flex; align-items:center; gap:10px;}
.social-label{font-size:0.8rem; color:var(--text-muted); white-space:nowrap;}
.social-icons{display:flex; gap:8px;}
.social-icons a{
  width:30px; height:30px; border-radius:50%;
  background:#f2f4f8; display:flex; align-items:center; justify-content:center;
  color:var(--navy);
}

/* Wraps call-now + social-block — the left cell of the header grid. */
.header-left{
  display:flex; align-items:center; gap:20px;
  grid-column:1; justify-self:start;
}

/* Wraps the nav links + language/currency dropdowns — the right cell of the
   header grid. Grouping them (rather than pushing locale-block to the edge
   on its own) keeps the currency/language buttons sitting right next to the
   nav links instead of stranded out at the far edge. */
.header-right{
  display:flex; align-items:center; gap:32px;
  grid-column:3; justify-self:end;
}

.logo{
  grid-column:2; justify-self:center;
  display:flex; align-items:center;
}
/* flex-shrink:0 is essential here: without it, on some grid/flex sizing
   passes the browser lets this replaced element's box get squeezed
   narrower than its natural width while the fixed height stays put,
   which visibly stretches/distorts the logo — most noticeable on mobile. */
.logo img{height:56px; width:auto; display:block; flex-shrink:0;}

.main-nav{display:flex; gap:28px; font-weight:600; font-size:0.95rem; white-space:nowrap;}
.caret{font-size:0.7em;}

/* ---------- Nav dropdown (Our offer / categories) ---------- */
.nav-dropdown{position:relative;}
.nav-dropdown > button{
  display:flex; align-items:center; gap:4px;
  background:none; border:none; font:inherit; font-weight:600; color:inherit;
  padding:0; cursor:pointer;
}
.dropdown-panel{
  position:absolute; top:calc(100% + 14px); left:50%;
  background:#fff; border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.18);
  padding:10px; min-width:220px; z-index:20;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-dropdown.open .dropdown-panel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.dropdown-panel a{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:6px; font-weight:600; font-size:0.9rem;
  color:var(--navy); white-space:nowrap;
}
.dropdown-panel a:hover{background:#f2f4f8;}

/* ---------- Language / currency dropdowns ---------- */
.locale-block{display:flex; gap:10px;}
.locale-dropdown{position:relative;}
.locale-btn{
  background:none; border:1px solid #e2e5eb; border-radius:5px; padding:6px 10px;
  font-size:0.85rem; font-weight:600; cursor:pointer; color:inherit;
}
.locale-panel{
  left:auto; right:0; min-width:150px;
  transform:translateY(-8px);
}
.locale-dropdown.open .locale-panel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0);
}
.locale-option{
  display:block; width:100%; text-align:left;
  background:none; border:none; font:inherit; font-weight:600; font-size:0.9rem;
  color:var(--navy); padding:9px 12px; border-radius:6px; cursor:pointer;
}
.locale-option:hover{background:#f2f4f8;}
.locale-option.active{background:#eef1f7;}

.nav-toggle{display:none; flex-direction:column; gap:4px; background:none; border:none; padding:6px;}
.nav-toggle span{width:22px; height:2px; background:var(--navy); display:block;}

.mobile-nav{display:none; flex-direction:column; border-top:1px solid #eceff3;}
.mobile-nav a{padding:12px 20px; border-bottom:1px solid #f2f4f8; font-weight:600;}
.mobile-nav.open{display:flex;}
.mobile-locale-row{display:flex; gap:10px; padding:14px 20px;}
.mobile-locale-row .locale-dropdown{flex:1;}
.mobile-locale-row .locale-btn{width:100%; text-align:center;}
.mobile-locale-row .locale-panel{left:0; right:0; min-width:0;}

/* ---------- Listings section ---------- */
/* The van photo sits underneath a near-opaque navy wash — same navy as
   the rest of the site — so it reads as a subtle textured backdrop rather
   than a distracting photo, matching the reference "background.jpg" look. */
.listings-section{
  background:
    linear-gradient(180deg, rgba(14,31,75,0.93) 0%, rgba(10,22,54,0.95) 100%),
    url("icons/hero-vans.jpg") center/cover no-repeat;
  padding:48px 20px 64px;
}
.listings-section h1{
  max-width:var(--max-width); margin:0 auto 32px;
  color:#fff; text-align:center;
  font-size:2rem; letter-spacing:.02em;
}
.listings-grid{
  max-width:var(--max-width); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:28px;
}

/* ---------- Category chooser ---------- */
/* Collapsed by default (shows "All" or whatever is active) and extends
   downward with an animation to reveal every category to choose from. */
.cat-chooser{
  max-width:var(--max-width); margin:0 auto 28px;
  display:flex; flex-direction:column; align-items:center;
}
.cat-trigger{
  display:flex; align-items:center; gap:8px;
  background:#fff; color:var(--navy);
  border:1px solid transparent; border-radius:999px;
  padding:10px 20px; font-weight:700; font-size:0.9rem; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .15s ease;
}
.cat-trigger:hover{transform:translateY(-1px);}
.cat-trigger .caret{transition:transform .25s ease; font-size:0.75em;}
.cat-chooser.open .cat-trigger .caret{transform:rotate(180deg);}

.cat-options{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height .32s ease, opacity .22s ease, margin-top .32s ease;
}
.cat-chooser.open .cat-options{
  max-height:320px; opacity:1; margin-top:16px;
}
.cat-tab{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  padding:9px 16px; font-weight:600; font-size:0.85rem; white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.cat-tab:hover{background:rgba(255,255,255,.16); transform:translateY(-1px);}
.cat-tab.active{background:#fff; color:var(--navy); border-color:#fff;}

.empty-note{
  max-width:var(--max-width); margin:0 auto; grid-column:1/-1;
  text-align:center; color:rgba(255,255,255,.75); padding:40px 20px; font-size:1rem;
}

/* ---------- Card ---------- */
.card{
  background:var(--card-bg); border-radius:10px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:flex; flex-direction:column;
}
.card.discounted{outline:3px solid var(--red);}
.card-media{position:relative; width:100%; aspect-ratio:16/10; background:#dfe3ea; display:block; touch-action:pan-y;}
.card-media img{width:100%; height:100%; object-fit:cover;}
.card-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(14,31,75,0.55); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s ease, background .15s ease;
}
.card-media:hover .card-arrow{opacity:1;}
.card-arrow:hover{background:rgba(14,31,75,0.8);}
.card-prev{left:8px;}
.card-next{right:8px;}
@media (max-width:900px){
  /* Arrows are a precise, hover-revealed desktop control; on touch devices
     there's no hover, so photos are browsed with a swipe instead. */
  .card-arrow{display:none;}
}
/* Sale sticker: a clean rounded-rectangle tab (glossy red gradient, thin
   dark edge, embossed-looking text) rather than a starburst. */
.badge{
  position:absolute; top:8px; right:8px;
  background:linear-gradient(180deg, #ff5b63 0%, var(--red) 45%, #a3121e 100%);
  color:#fff; font-weight:800; font-size:0.95rem;
  line-height:1; letter-spacing:-0.01em;
  display:flex; align-items:center; justify-content:center;
  padding:7px 13px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.25);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}
/* On the homepage (not the "More from RG PLUS" cards on a listing page) the
   tab tilts up toward the top-left and gets a stronger shadow so it pops
   off the photo like a sticker that's been slapped on at an angle. */
body:not(.detail-page) .badge{
  transform: rotate(-9deg) scale(1.08);
  box-shadow:0 8px 16px rgba(0,0,0,.4);
}
.badge-inline{
  background:linear-gradient(180deg, #ff5b63 0%, var(--red) 45%, #a3121e 100%);
  color:#fff; font-weight:800; font-size:0.8rem; letter-spacing:-0.01em;
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; flex-shrink:0;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.25);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.dots{
  position:absolute; bottom:8px; left:0; right:0;
  display:flex; justify-content:center; gap:5px;
}
.dots span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6);}
.dots span.active{background:#fff;}

.card-body{padding:14px 18px 15px; display:flex; flex-direction:column; gap:7px; flex:1;}
.card-body h3{margin:0; font-size:1.15rem;}
.spec-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:5px 12px;
  font-size:0.88rem; font-weight:600; color:var(--text-muted);
}
.spec-grid span{display:flex; align-items:center; gap:6px;}

.price-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:1px;}
.price-old{color:var(--red); text-decoration:line-through; font-size:0.95rem;}
.price-new{font-size:1.4rem; font-weight:800;}
.btn-call-sm{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  height:32px; padding:0 12px; border-radius:6px; margin-left:auto;
  background:var(--navy); color:#fff; font-size:1rem;
}
.btn-call-sm:hover{background:var(--navy-dark);}
.price-net{font-size:0.78rem; font-weight:600; color:var(--text-muted); width:100%; text-transform:uppercase; letter-spacing:.03em;}

.actions-row{display:flex; gap:8px; margin-top:2px;}
.btn-whatsapp, .btn-offer{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  border-radius:6px; padding:9px; font-weight:700; font-size:0.85rem; color:#fff;
}
.btn-whatsapp{background:var(--green);}
.btn-offer{background:var(--gray-btn);}

.see-more{margin-top:2px; text-align:center; font-weight:600; color:var(--navy); text-decoration:underline;}

.site-footer{padding:24px 20px; text-align:center; color:var(--text-muted); font-size:0.85rem;}

/* ---------- Icons ---------- */
.icon{display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.icon svg{width:1.15em; height:1.15em; display:block; stroke-width:2.3;}
.icon.flip svg{transform:rotate(180deg);}
.param-icon svg{width:21px; height:21px;}

/* ---------- Vehicle landing page ---------- */
/* Scoped to the detail page (body.detail-page) so the homepage's <main> is
   untouched and .listings-section can still bleed edge-to-edge there. */
.detail-page main{max-width:var(--max-width); margin:0 auto; padding:0 20px;}

.breadcrumb-row{padding:20px 0 0;}
.back-link{font-weight:600; color:var(--navy); display:inline-flex; align-items:center; gap:6px;}
.back-link:hover{text-decoration:underline;}

.listing-detail{padding:20px 0 8px;}
.not-found{text-align:center; padding:60px 0; color:var(--text-muted); font-size:1.1rem;}

.detail-top{
  display:grid; grid-template-columns:1.6fr 1fr; gap:32px;
  align-items:start;
}
@media (max-width:900px){
  .detail-top{grid-template-columns:1fr;}
}

/* Gallery */
.detail-gallery{display:flex; flex-direction:column; gap:10px; min-width:0;}
.gallery-main{
  position:relative; width:100%; aspect-ratio:16/10; background:#dfe3ea;
  border-radius:12px; overflow:hidden;
}
.gallery-main img{width:100%; height:100%; object-fit:contain;}
.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(14,31,75,0.55); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.gallery-arrow:hover{background:rgba(14,31,75,0.8);}
.gallery-prev{left:10px;}
.gallery-next{right:10px;}
.gallery-counter{
  position:absolute; bottom:10px; right:12px;
  background:rgba(14,31,75,0.65); color:#fff;
  font-size:0.8rem; font-weight:600; padding:4px 10px; border-radius:20px;
}
.gallery-thumbs{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;}
.thumb{
  width:76px; height:56px; flex-shrink:0; object-fit:cover;
  border-radius:6px; cursor:pointer; opacity:0.6; border:2px solid transparent;
}
.thumb.active{opacity:1; border-color:var(--navy);}

/* Sidebar */
.detail-sidebar{
  background:var(--card-bg); border:1px solid #eceff3; border-radius:12px;
  padding:22px; display:flex; flex-direction:column; gap:12px;
  position:sticky; top:88px;
}
.detail-sidebar h1{margin:0; font-size:1.4rem;}
.quick-specs{display:flex; flex-wrap:wrap; gap:14px; color:var(--text-muted); font-size:0.9rem;}
.quick-specs span{display:flex; align-items:center; gap:6px;}
.detail-sidebar .price-row{margin-top:4px;}
.detail-sidebar .price-net{width:auto;}
.detail-sidebar .actions-row{margin-top:6px;}
.btn-call{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--navy); color:#fff; font-weight:700; font-size:0.9rem;
  padding:12px; border-radius:6px;
}

/* Parametry / Wyposażenie / Opis */
.detail-block{padding:28px 0; border-top:1px solid #eceff3;}
.detail-block h2{margin:0 0 16px; font-size:1.3rem;}
.param-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:14px 24px;
}
.param-row{display:flex; align-items:center; gap:10px; font-size:0.95rem;}
.param-icon{color:var(--navy);}
.param-label{color:var(--text-muted); min-width:150px;}
.param-value{font-weight:700;}

.equipment-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:10px 20px;
}
.equipment-list li{display:flex; align-items:center; gap:8px; font-size:0.95rem;}
.equipment-list .icon{color:var(--green);}

.description-text{color:var(--text-dark); line-height:1.7; font-size:0.98rem;}
.description-text p{margin:0 0 14px;}
.description-text p:last-child{margin-bottom:0;}

/* "More from RG PLUS" */
.similar-listings{padding:12px 0 56px;}
.similar-listings h2{font-size:1.4rem; margin:0 0 24px; color:var(--text-dark);}
.similar-listings .listings-grid{margin:0;}

/* ---------- Send an offer page ---------- */
.offer-page{max-width:600px; margin:0 auto; padding:16px 0 64px;}
.offer-page h1{margin:0 0 8px; font-size:1.6rem;}
.offer-intro{color:var(--text-muted); margin:0 0 28px; font-size:0.98rem; line-height:1.5;}
.offer-form{
  display:flex; flex-direction:column; gap:18px;
  background:var(--card-bg); border:1px solid #eceff3; border-radius:12px;
  padding:26px;
}
.field{display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:0.92rem; color:var(--text-dark);}
.field em{color:var(--red); font-style:normal;}
.field input, .field select, .field textarea{
  font:inherit; font-weight:400; font-size:0.95rem; padding:10px 12px;
  border:1px solid #dde1e8; border-radius:6px; color:var(--text-dark);
  background:#fff; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--navy); outline-offset:1px;
}
.field textarea{resize:vertical; min-height:110px; font-family:inherit;}
.field-hint{font-weight:400; font-size:0.82rem; color:var(--text-muted);}
.offer-form button.btn-call{
  border:none; width:100%; margin-top:4px; font-size:0.95rem;
}

.offer-thanks{max-width:520px; margin:0 auto; padding:64px 0; text-align:center;}
.offer-thanks h1{font-size:1.6rem; margin:0 0 12px;}
.offer-thanks p{color:var(--text-muted); margin:0 0 26px;}

/* ---------- Business inquiry page ---------- */
.business-page{max-width:980px; margin:0 auto; padding:16px 0 64px;}
.business-page h1{margin:0 0 8px; font-size:1.6rem;}
.business-intro{color:var(--text-muted); margin:0 0 28px; font-size:0.98rem; line-height:1.5; max-width:640px;}
.business-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:28px; align-items:start;}
.business-info{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff; border-radius:12px; padding:32px 28px;
  display:flex; flex-direction:column; gap:16px;
}
.business-logo{width:170px; height:auto; display:block; margin-bottom:4px;}
.business-heading{
  text-transform:uppercase; letter-spacing:.05em; font-size:0.78rem;
  color:rgba(255,255,255,.6); font-weight:700; margin:6px 0 -6px;
}
.business-detail{display:flex; align-items:center; gap:12px; font-weight:600; font-size:0.98rem;}
.business-detail .icon{flex-shrink:0; color:#fff;}
.business-detail a{color:#fff;}
.business-detail a:hover{text-decoration:underline;}
.business-grid .offer-form{margin:0;}

/* ---------- About us page ---------- */
.about-page{max-width:980px; margin:0 auto; padding:16px 0 64px;}
.about-page h1{margin:0 0 8px; font-size:1.6rem;}
.about-intro{color:var(--text-muted); margin:0 0 32px; font-size:0.98rem; line-height:1.6; max-width:760px;}
.about-features{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin:0 0 48px;}
.about-feature{background:#f6f7fa; border-radius:12px; padding:22px 20px; display:flex; flex-direction:column; gap:10px;}
.about-feature .icon{color:var(--navy); font-size:1.7rem;}
.about-feature h3{margin:0; font-size:1rem;}
.about-feature p{margin:0; color:var(--text-muted); font-size:0.9rem; line-height:1.45;}
.about-cookies{background:#f6f7fa; border-radius:12px; padding:26px 28px;}
.about-cookies h2{margin:0 0 10px; font-size:1.1rem;}
.about-cookies p{margin:0; color:var(--text-muted); font-size:0.92rem; line-height:1.6; max-width:760px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .main-nav, .locale-block, .social-label{display:none;}
  .header-right{display:none;}
  .nav-toggle{display:flex;}
  /* Same symmetric 1fr/auto/1fr grid as desktop — the hamburger just takes
     over the right-hand cell that the nav+locale group occupies above.
     The desktop version's wide 44px side padding is only meant to spread
     things out on roomy screens — kept at mobile widths it starves the
     grid of space and forces the browser to squeeze (and visibly distort)
     the logo's column, so it's dialled back down here. */
  .header-inner{gap:10px; padding:12px 20px;}
  .header-left{gap:12px;}
  .logo img{height:48px;}
  .nav-toggle{grid-column:3; justify-self:end;}
  .business-grid{grid-template-columns:1fr;}
  .about-features{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:520px){
  .call-now span{display:none;}
  .listings-section h1{font-size:1.5rem;}
  .logo-rg, .logo-plus{font-size:1.3rem;}
  .logo img{height:44px;}
  .about-features{grid-template-columns:1fr;}
}