/*
 * Theme Name: Vacanda
 * Author:     Mopsyatin
 * Description: Custom theme for Vacanda website
 * Version:    3.0 (consolidated + fixed)
 *
 * Changes from v2.0:
 *  - Merged style.css + mobile.css into one file (clear section headers preserved)
 *  - Removed all duplicate rule blocks (#drift-text x6 → x1, banner/partner/tab
 *    duplicates collapsed)
 *  - Wrapped all :hover transforms in @media (hover: hover) — eliminates the
 *    need for Section 19 sticky-hover overrides on touch devices entirely
 *  - Fixed will-change: contents (non-standard) → will-change: opacity
 *  - Added missing @keyframes driftGlow referenced by .bg-text
 *  - Merged duplicate body {} declarations
 *  - Removed deprecated @supports (-webkit-overflow-scrolling: touch) block
 *  - Added pointer-events: none to pseudo-elements that were missing it
 *  - Added standard line-clamp alongside -webkit- prefix
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES
   ============================================================================= */
:root {
  --color-accent:       #7b2cff;
  --color-accent-light: #c77dff;
  --color-cyan:         #00e0ff;
  --color-bg-dark:      #05081a;
  --color-bg-deeper:    #0a001a;
  --color-purple-mid:   #3b0ca3;
  --color-text-muted:   #d6ccff;
  --color-white:        #fff;

  --gradient-primary:   linear-gradient(135deg, #6f2dbd, #0d00a4);
  --gradient-hero:      linear-gradient(135deg, #0a001a, #3b0ca3);
  --gradient-section:   linear-gradient(135deg, #1a0040 0%, #3a0ca3 100%);
  --gradient-item:      linear-gradient(135deg, #3a4cff, #7a3cff);

  --shadow-glow-sm:     0 0 0.75rem rgba(123, 44, 255, 0.45),
                        0 0 1.5rem rgba(123, 44, 255, 0.25);
  --shadow-glow-md:     0 0 1.125rem rgba(123, 44, 255, 0.65),
                        0 0 2.5rem rgba(123, 44, 255, 0.35);
  --shadow-drop-sm:     drop-shadow(0 0.625rem 1.25rem rgba(0, 0, 0, 0.35))
                        drop-shadow(0 0 1.125rem rgba(123, 44, 255, 0.45));
  --shadow-drop-strong: drop-shadow(0 0 1rem rgba(123, 44, 255, 0.55))
                        drop-shadow(0 0 2.125rem rgba(123, 44, 255, 0.4))
                        drop-shadow(0 1rem 2.125rem rgba(0, 0, 0, 0.4));

  --transition-base:    transform 0.35s ease, filter 0.35s ease,
                        box-shadow 0.35s ease, background 0.35s ease,
                        color 0.35s ease;
  --transition-img:     transform 0.45s ease, filter 0.45s ease;

  --radius-sm:   0.625rem;
  --radius-md:   1.125rem;
  --radius-lg:   1.25rem;
  --radius-pill: 999px;
}

/* =============================================================================
   BASE / GLOBAL
   ============================================================================= */

/* Universal box-sizing & tap highlight */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent iOS auto-zoom on small text */
html {
  overflow-x: hidden;
  width: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  overflow-x: hidden;
  width: 100%;
  font-family: "Ermilov", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* BUG FIX: @font-face moved here from functions.php wp_add_inline_style().
   Inline injection silently failed if 'theme-style' was not enqueued.
   Declared in style.css it is always present. */
@font-face {
  font-family: 'Ermilov';
  src: url('./assets/fonts/Ermilov-bold/Ermilov-bold.woff2') format('woff2'),
       url('./assets/fonts/Ermilov-bold/Ermilov-bold.woff')  format('woff'),
       url('./assets/fonts/Ermilov-bold/Ermilov-bold.otf')   format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* Fluid media */
img,
video,
iframe,
embed {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-white);
}

h6.wp-block-heading {
  margin: clamp(1rem, 2vw, 1.875rem) 0 clamp(0.75rem, 1.5vw, 1.25rem);
  line-height: 1.1;
}

a:hover {
  text-decoration: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(123, 44, 255, 0.5),
              0 0 1.25rem rgba(123, 44, 255, 0.35);
  border-color: var(--color-accent);
}

/* =============================================================================
   LAYOUT / SITE STRUCTURE
   ============================================================================= */
.wp-site-blocks {
  background: var(--gradient-primary);
}

/* Intentionally transparent — overrides WP block editor default background */
.has-secondary-background-color {
  background: transparent;
}

/* GPU acceleration helpers */
button, a, img, .slide {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* =============================================================================
   TYPOGRAPHY OVERRIDES
   ============================================================================= */
.yith-wcwl-share .share-button i {
  font-family: "Ermilov";
}

.wishlist_table.mobile li .item-details table.item-details-table td,
.additional-info .value {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  padding: clamp(1.5rem, 4vw, 3.875rem);
  font-family: "Ermilov", sans-serif;
}

/* =============================================================================
   UTILITIES
   ============================================================================= */
.short-para-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
}

.not-found-heading {
  margin: clamp(2.5rem, 8vw, 6.25rem) 0 0.625rem;
  line-height: 1;
}

/* =============================================================================
   PRIVACY POLICY
   ============================================================================= */
.privacy-policy {
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(0.75rem, 2vw, 1.25rem);
}

.privacy-policy__header {
  margin: 0 auto;
  text-align: center;
  background: #6f2dbd;
  padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2rem);
  border-radius: 1rem 1rem 0 0;
}

.privacy-policy__header h1 {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  
}

.privacy-policy__content {
  width: min(100%, 68.75rem);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #e9e9ef;
  color: #222;
  line-height: 1.8;
}

.privacy-policy h2 {
  margin: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(0.75rem, 1.5vw, 1.25rem);
  padding: clamp(0.625rem, 1.2vw, 0.875rem) clamp(0.75rem, 1.5vw, 1.125rem);
  background: #6f2dbd;
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 700;
}

.privacy-policy p {
  margin-bottom: clamp(0.75rem, 1.5vw, 1.125rem);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.privacy-policy ul {
  margin: clamp(0.75rem, 1.5vw, 1.25rem) 0;
  padding-left: 1.5rem;
}

.privacy-policy li {
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.privacy-policy a {
  color: #6f2dbd;
  text-decoration: none;
}

.privacy-policy a:hover {
  text-decoration: underline;
}

/* =============================================================================
   BANNER SECTION
   ============================================================================= */
.bike-banner-section {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  background-size: 100% 100%;
}

.bike-banner-section > .wp-block-columns {
  width: 100%;
  z-index: 999;
}

.bike-banner-section::after {
  content: "";
  position: absolute;
  top: clamp(-3rem, -5vw, -4.25rem);
  width: 100%;
  height: calc(100% + clamp(3rem, 5vw, 4.25rem));
  background-size: 100% 100%;
}

.banner-heading {
  font-size: clamp(4rem, 9vw, 7.5rem) !important;
  line-height: 1.05;
  margin-bottom: 0.5rem;
}

.banner-text {
  width: 100%;
  max-width: 900px;
  color: #fff !important;
  font-size: clamp(2rem, 3vw, 3.5rem) !important;
  line-height: 1.3;
  margin-top: 0;
}

/* Banner image container */
.banner-image-section {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.banner-image-sec-img {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.banner-image-sec-img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  will-change: transform, opacity;
  transform: translateZ(0);
  animation: bikeSpeed 1s ease-out forwards, bikeGlow 4s ease-in-out 1s infinite;
}

/* Smoke / background overlay */
.banner-image-sec-back {
  position: absolute;
  inset: 0;
  bottom: -0.375rem;
  z-index: 1;
  pointer-events: none; /* never blocks clicks */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.banner-image-sec-back svg {
  height: 100%;
}

.banner-image-sec-back img {
  opacity: 0;
  animation: smokeMove 1s ease-out forwards;
}

/* Banner buttons */
.banner-button01 a {
  clip-path: polygon(
    6.803% 0%, 93.197% 0%,
    93.736% 0.064%, 94.268% 0.254%, 94.791% 0.568%, 95.303% 1.002%,
    95.801% 1.553%, 96.283% 2.22%, 96.747% 2.998%, 97.191% 3.886%,
    97.612% 4.88%, 98.007% 5.977%, 98.007% 5.977%,
    98.373% 7.165%, 98.705% 8.428%, 99.001% 9.759%, 99.26% 11.152%,
    99.482% 12.598%, 99.666% 14.093%, 99.811% 15.628%, 99.915% 17.196%,
    99.979% 18.792%, 100% 20.408%,
    93.197% 79.592%, 93.197% 79.592%,
    93.176% 81.208%, 93.112% 82.804%, 93.008% 84.372%, 92.863% 85.907%,
    92.679% 87.402%, 92.457% 88.848%, 92.198% 90.241%, 91.902% 91.572%,
    91.57% 92.835%, 91.204% 94.023%, 91.204% 94.023%,
    90.809% 95.12%, 90.388% 96.114%, 89.944% 97.001%, 89.48% 97.78%,
    88.998% 98.446%, 88.5% 98.998%, 87.988% 99.432%, 87.465% 99.746%,
    86.933% 99.936%, 86.395% 100%,
    6.803% 100%, 6.803% 100%,
    6.264% 99.936%, 5.732% 99.746%, 5.209% 99.432%, 4.698% 98.998%,
    4.199% 98.446%, 3.717% 97.78%, 3.253% 97.001%, 2.809% 96.114%,
    2.388% 95.12%, 1.992% 94.023%, 1.992% 94.023%,
    1.627% 92.835%, 1.295% 91.572%, 0.999% 90.241%, 0.74% 88.848%,
    0.518% 87.402%, 0.334% 85.907%, 0.189% 84.372%, 0.085% 82.804%,
    0.021% 81.208%, 0% 79.592%,
    0% 20.408%, 0% 20.408%,
    0.021% 18.792%, 0.085% 17.196%, 0.189% 15.628%, 0.334% 14.093%,
    0.518% 12.598%, 0.74% 11.152%, 0.999% 9.759%, 1.295% 8.428%,
    1.627% 7.165%, 1.992% 5.977%, 1.992% 5.977%,
    2.388% 4.88%, 2.809% 3.886%, 3.253% 2.998%, 3.717% 2.22%,
    4.199% 1.553%, 4.698% 1.002%, 5.209% 0.568%, 5.732% 0.254%,
    6.264% 0.064%, 6.803% 0%
  );
}

/* Shared clip-path for button02 and its pseudo-element */
.banner-button02 a,
.banner-button02 a::after {
  clip-path: polygon(
    95.262% 100%, 5.233% 100%, 5.233% 100%,
    4.858% 99.976%, 4.488% 99.904%, 4.123% 99.786%, 3.767% 99.622%,
    3.42% 99.414%, 3.084% 99.163%, 2.761% 98.87%, 2.452% 98.535%,
    2.159% 98.161%, 1.883% 97.747%, 1.883% 97.747%,
    1.614% 97.003%, 1.346% 95.723%, 1.084% 94.037%, 0.836% 92.074%,
    0.608% 89.963%, 0.407% 87.834%, 0.239% 85.817%, 0.111% 84.041%,
    0.029% 82.636%, 0% 81.731%,
    5.233% 7.692%, 5.233% 7.692%,
    5.257% 7.083%, 5.325% 6.482%, 5.432% 5.89%, 5.575% 5.312%,
    5.749% 4.749%, 5.949% 4.203%, 6.172% 3.679%, 6.413% 3.177%,
    6.667% 2.701%, 6.931% 2.253%, 6.931% 2.253%,
    7.198% 1.839%, 7.468% 1.465%, 7.742% 1.13%, 8.023% 0.837%,
    8.313% 0.586%, 8.614% 0.378%, 8.929% 0.214%, 9.258% 0.096%,
    9.605% 0.024%, 9.972% 0%,
    95.262% 0%, 95.262% 0%,
    95.637% 0.024%, 96.007% 0.096%, 96.372% 0.214%, 96.728% 0.378%,
    97.075% 0.586%, 97.411% 0.837%, 97.734% 1.13%, 98.043% 1.465%,
    98.337% 1.839%, 98.612% 2.253%, 98.612% 2.253%,
    98.867% 2.701%, 99.098% 3.177%, 99.304% 3.679%, 99.485% 4.203%,
    99.639% 4.749%, 99.767% 5.312%, 99.868% 5.89%, 99.941% 6.482%,
    99.985% 7.083%, 100% 7.692%,
    100% 92.308%, 100% 92.308%,
    99.985% 92.917%, 99.941% 93.518%, 99.868% 94.11%, 99.767% 94.688%,
    99.639% 95.251%, 99.485% 95.797%, 99.304% 96.322%, 99.098% 96.823%,
    98.867% 97.299%, 98.612% 97.747%, 98.612% 97.747%,
    98.337% 98.161%, 98.043% 98.535%, 97.734% 98.87%, 97.411% 99.163%,
    97.075% 99.414%, 96.728% 99.622%, 96.372% 99.786%, 96.007% 99.904%,
    95.637% 99.976%, 95.262% 100%
  );
}

.banner-button02 a {
  background-color: #fff;
  position: relative;
  z-index: 1;
}

.banner-button02 a::after {
  position: absolute;
  content: " ";
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  inset: 2px;
  background-color: var(--wp--preset--color--thirdaccent);
  z-index: -1;
  pointer-events: none; /* pseudo-element must never capture events */
}

/* =============================================================================
   HELMET SLIDER
   ============================================================================= */
.helmet-slider {
  position: relative;
  width: 100%;
  padding: clamp(1.5rem, 4vw, 3.75rem) 0;
  background-color: white;
}

.slider-wrapper {
  overflow: hidden;
}

.slider-track {
  display: flex;
  align-items: center;
  transition: transform 0.5s ease;
}

.slide {
  flex: 0 0 clamp(8rem, 15vw, 13.75rem);
  text-align: center;
  opacity: 0.4;
  transform: scale(0.8);
  position: relative;
  z-index: 1;
  transition: var(--transition-img), opacity 0.45s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, filter;
  cursor: pointer;
}

.slide img {
  width: 100%;
  transition: var(--transition-img);
  border-radius: var(--radius-md);
  backface-visibility: hidden;
  will-change: transform, filter;
}

.slide.active {
  opacity: 1;
  transform: scale(1.25);
  z-index: 30;
}

.slide.active img {
  filter: var(--shadow-drop-strong);
}

.slide:hover {
  z-index: 50;
}

/* Slider arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(2rem, 4vw, 3rem);
  height: clamp(2rem, 4vw, 3rem);
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: #000;
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  opacity: 0.85;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  transition: opacity 0.25s ease, transform 0.25s ease,
              color 0.25s ease, text-shadow 0.25s ease;
}

.slider-arrow:focus,
.slider-arrow:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.slider-arrow::-moz-focus-inner {
  border: 0;
}

.slider-arrow:active {
  transform: translateY(-50%) scale(0.88);
  color: var(--color-accent-light);
  text-shadow:
    0 0 0.75rem rgba(199, 125, 255, 0.9),
    0 0 1.5rem rgba(199, 125, 255, 0.5);
  transition-duration: 0.1s;
}

.slider-arrow.prev { left: 0.5rem; }
.slider-arrow.next { right: 0.5rem; }

.slider-arrow.clicked {
  animation: arrowClick 0.35s ease;
}

/* =============================================================================
   SCROLL SECTION (horizontal marquee-style strip)
   ============================================================================= */
.scroll-section {
  padding: clamp(1rem, 2.5vw, 1.875rem) 0;
  background: var(--color-bg-dark);
  overflow: hidden;
}

.scroll-wrapper {
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, 1.5vw, 1.25rem);
}

.scroll-container {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  cursor: grab;
  scroll-behavior: smooth;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-item {
  min-width: clamp(16rem, 30vw, 25rem);
  background: var(--gradient-item);
  padding: clamp(0.5rem, 1vw, 0.625rem);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  line-height: 1.6;
  display: inline-block;
}

.scroll-item p {
  display: inline-block;
  white-space: nowrap;
  padding-right: clamp(1.5rem, 4vw, 3.125rem);
}

.scroll-btn {
  background: rgba(255, 255, 255, 0.063);
  border: none;
  color: var(--color-white);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  width: clamp(2.5rem, 5vw, 3.75rem);
  height: clamp(2.5rem, 5vw, 3.75rem);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

/* =============================================================================
   PARTNER BLOCK
   ============================================================================= */
.partner-block {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3.75rem);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 2vw, 1.25rem);
  background: var(--gradient-hero);
  color: var(--color-white);
}

.partner-left img {
  width: clamp(15rem, 35vw, 28.125rem);
  border-radius: var(--radius-lg);
}

.partner-right {
  max-width: clamp(22rem, 50vw, 42rem);
}

.partner-right h2 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  margin-bottom: 0.625rem;
}

.subtitle {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  opacity: 0.7;
  margin-bottom: clamp(1.25rem, 3vw, 1.875rem);
}

/* Tabs */
.tabs-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: clamp(1rem, 2vw, 1.5625rem);
}

.tab-btn {
  padding: clamp(0.5rem, 1vw, 0.75rem) clamp(0.875rem, 1.8vw, 1.25rem);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: border-color 0.3s;
}

.tab-btn.active {
  background: linear-gradient(135deg, #7b2cff, #c77dff);
  border: none;
}

.tabs-content {
  min-height: 5rem;
}

.tabs-content p {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.6;
}

.tab-content {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
}

.tab-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================================
   STATS SECTION
   ============================================================================= */
.stats-wrapper {
  width: min(100%, 75rem);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3.75rem);
  flex-wrap: wrap;
}

.stats-image {
  flex: 1;
  position: relative;
  perspective: 62.5rem;
}

.stats-image img {
  width: 100%;
  max-width: clamp(20rem, 42vw, 34.375rem);
  display: block;
  margin: 0 auto;
  opacity: 0;
  filter: drop-shadow(0 0 1.875rem rgba(123, 44, 255, 0.5));
  transition: filter 0.4s ease;
  will-change: transform;
  animation: fadeIn 1s ease forwards;
}

.stats-content {
  flex: 1;
  color: var(--color-white);
  max-width: clamp(18rem, 40vw, 31.25rem);
}

.stats-content h2 {
  font-size: clamp(2.25rem, 4.5vw, 3.375rem);
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

.stats-content p {
  color: var(--color-text-muted);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.6;
}

/* =============================================================================
   CAROUSEL
   ============================================================================= */
.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  perspective: 62.5rem;
}

.carousel-track {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  transition: transform 0.5s ease;
  will-change: transform;
}

.carousel-item {
  opacity: 1; /* базовий стан — видимий */
  transition: var(--transition-img), opacity 0.45s ease;
  flex: 0 0 clamp(10rem, 18vw, 15.625rem);
  position: relative;
  z-index: 1;
  transition: var(--transition-img);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, filter;
  cursor: pointer;
}

.carousel-item img {
  width: 100%;
  display: block;
  border-radius: 0.9375rem;
  transition: var(--transition-img);
  backface-visibility: hidden;
  will-change: transform, filter;
}

.carousel-item.center {
  z-index: 30;
  transform: scale(1.5) translateZ(5rem) rotateY(0deg);
  filter: brightness(1.1);
}

.carousel-item.center img {
  filter: var(--shadow-drop-strong);
}

.carousel-item.left {
  transform: scale(0.9) translateZ(0) rotateY(15deg);
  filter: brightness(0.8);
}

.carousel-item.right {
  transform: scale(0.9) translateZ(0) rotateY(-15deg);
  filter: brightness(0.8);
}

.carousel-item.hidden {
  transform: scale(0.7) translateZ(-1.25rem) rotateY(0deg);
  filter: brightness(0.6);
  opacity: 0.5;
}

.carousel-item:hover {
  z-index: 50;
}

/* =============================================================================
   DRIFT HERO SECTION
   ============================================================================= */
.drift-hero {
  background: transparent;
  padding: clamp(3rem, 8vw, 6.25rem) clamp(1rem, 2vw, 1.25rem);
  display: flex;
  justify-content: center;
}

.drift-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 4.4fr 4fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  width: min(100%, 87.5rem);
}

.drift-content {
  max-width: none;
  color: var(--color-white);
  position: relative;
  z-index: 2;
}

.drift-content h1 {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.1;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  background: linear-gradient(90deg, #ffffff, #cbb8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.4);
}

.drift-content p {
  font-size: clamp(1.625rem, 4vw, 3rem);
  line-height: 1.7;
  color: #e6ddff;
  max-width: clamp(18rem, 40vw, 31.25rem);
}

.drift-visual {
  z-index: 1;
  position: relative;
  width: 100%;
  max-width: clamp(16rem, 32vw, 26.25rem);
  justify-self: end;
}

.drift-text-block {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
}

/* Single consolidated #drift-text rule */
#drift-text {
  margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
  font-size: clamp(1.375rem, 2.8vw, 2.25rem);
  line-height: 1.4;
  height: clamp(8rem, 16vw, 13.75rem);
  overflow: hidden;
  transition: opacity 0.3s ease;
  will-change: opacity; /* 'contents' is non-standard and ignored */
}

/* Drift stats subsection */
.drift-stats {
  padding: clamp(3rem, 9vw, 7.5rem) clamp(1rem, 2vw, 1.25rem);
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}

.drift-stats::before {
  content: "";
  position: absolute;
  width: clamp(18rem, 40vw, 31.25rem);
  height: clamp(18rem, 40vw, 31.25rem);
  background: radial-gradient(circle, rgba(123, 44, 255, 0.3), transparent);
  top: clamp(-4rem, -8vw, -6.25rem);
  left: clamp(-4rem, -8vw, -6.25rem);
  filter: blur(5rem);
}

/* Main product image */
.main-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 1.25rem 2.5rem rgba(0, 0, 0, 0.4));
  opacity: 0;
  position: relative;
  z-index: 1;
  margin-bottom: clamp(1.5rem, 4vw, 3.125rem);
  animation: pantherEnter 1.2s ease-out forwards,
             pantherFloat 5s ease-in-out infinite 1.2s;
}

/* Arrow CTA */
.arrow {
  margin-top: clamp(1rem, 2.5vw, 1.875rem);
  font-size: clamp(1.375rem, 3vw, 2rem);
  width: clamp(2.5rem, 5vw, 3.5rem);
  height: clamp(2.5rem, 5vw, 3.5rem);
  border: 2px solid var(--color-cyan);
  color: var(--color-cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.35s ease, background 0.3s ease,
              color 0.3s ease, box-shadow 0.3s ease;
  transform: translateX(0);
}

/* Background decorative text */
.bg-text {
  position: relative;
  display: inline-block;
  font-size: clamp(4rem, 10vw, 6.5rem);
  font-weight: 900;
  color: #ff6fa5;
  opacity: 0.5;
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.875rem);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  animation: driftTitleIn 1s ease-out forwards, driftGlow 4s ease-in-out infinite;
  transform-origin: center;
}

.bg-text::before,
.bg-text::after {
  content: "";
  position: absolute;
  width: clamp(2.5rem, 5vw, 3.75rem);
  height: clamp(2.5rem, 5vw, 3.75rem);
  pointer-events: none;
}

.bg-text::before {
  top: 0;
  left: 0;
  border-top: 4px solid #ff6fa5;
  border-left: 4px solid #ff6fa5;
}

.bg-text::after {
  bottom: 0;
  right: 0;
  border-bottom: 4px solid #ff6fa5;
  border-right: 4px solid #ff6fa5;
}

/* =============================================================================
   VACANDA SECTION
   ============================================================================= */
.vacanda-section {
  background: var(--gradient-section);
  padding: clamp(3rem, 9vw, 7.5rem) clamp(1rem, 2vw, 1.25rem);
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

.vacanda-container {
  width: min(100%, 68.75rem);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.vacanda-content {
  max-width: clamp(20rem, 55vw, 43.75rem);
}

.vacanda-title {
  font-size: clamp(2.25rem, 5vw, 3.875rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: clamp(1rem, 2.5vw, 1.875rem);
}

.vacanda-title span {
  font-size: clamp(2.75rem, 6vw, 5rem);
  -webkit-text-stroke: 2px black;
  color: rgb(223, 15, 15);
}

.vacanda-highlight {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  margin: clamp(1rem, 2.5vw, 1.875rem) 0;
  color: var(--color-white);
  line-height: 1.2;
}

.vacanda-highlight span {
  font-size: clamp(1.375rem, 2.8vw, 2rem);
  text-shadow: -1px -1px 0 black, 1px -1px 0 black,
               -1px 1px 0 black,  1px 1px 0 black;
}

.vacanda-text {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.2;
  color: var(--color-white);
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

.vacanda-btn {
  display: inline-block;
  padding: clamp(0.625rem, 1.2vw, 0.875rem) clamp(1rem, 2.5vw, 1.75rem);
  border-radius: 3.125rem;
  background: transparent;
  border: 2px solid var(--color-white);
  color: var(--color-cyan);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Decorative glow blob */
.vacanda-glow {
  position: absolute;
  width: clamp(18rem, 45vw, 37.5rem);
  height: clamp(18rem, 45vw, 37.5rem);
  background: radial-gradient(circle, rgba(255, 0, 100, 0.25) 0%, transparent 70%);
  top: clamp(-4rem, -8vw, -6.25rem);
  right: clamp(-4rem, -8vw, -6.25rem);
  filter: blur(5rem);
  z-index: 1;
  pointer-events: none;
}

/* =============================================================================
   IMAGE MODAL
   ============================================================================= */
.image-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 9999;
}

.image-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: var(--radius-sm);
  transform: scale(0.8);
  transition: transform 0.3s;
}

.image-modal.active .modal-img {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.875rem);
  right: clamp(1.25rem, 3vw, 2.5rem);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-white);
  cursor: pointer;
}

/* =============================================================================
   GALLERY OVERLAY
   ============================================================================= */
.gallery-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.gallery-overlay.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.gallery-grid {
  width: min(90%, 75rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(10rem, 18vw, 13.75rem), 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.gallery-grid img {
  width: 100%;
  height: clamp(9rem, 16vw, 13.75rem);
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.4s forwards;
  animation-delay: calc(0.05s * var(--i));
  transition: transform 0.3s;
}

.gallery-close {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.875rem);
  right: clamp(1.25rem, 3vw, 2.5rem);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-white);
  cursor: pointer;
}

/* =============================================================================
   OPEN GALLERY BUTTON
   ============================================================================= */
.open-gallery-btn {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  z-index: 30;
  width: clamp(2.75rem, 5vw, 3.625rem);
  height: clamp(2.75rem, 5vw, 3.625rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.125rem;
  background: linear-gradient(145deg, rgba(123, 44, 255, 0.92), rgba(58, 12, 163, 0.92));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(0.75rem);
  box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.35),
              0 0 1.125rem rgba(123, 44, 255, 0.45);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

.open-gallery-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(199, 125, 255, 0.9), rgba(0, 224, 255, 0.65));
  z-index: -1;
  filter: blur(0.75rem);
  opacity: 0.75;
  transition: opacity 0.35s ease, filter 0.35s ease;
  pointer-events: none;
}

.open-gallery-btn::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -40%;
  width: 60%;
  height: 300%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: rotate(25deg);
  transition: left 0.7s ease;
  pointer-events: none;
}

.open-gallery-btn:active { transform: scale(0.95); }

/* =============================================================================
   MODAL GALLERY BUTTON
   ============================================================================= */
.modal-open-gallery {
  position: absolute;
  top: clamp(1.25rem, 2.5vw, 1.75rem);
  right: clamp(3.5rem, 7vw, 5.625rem);
  width: clamp(2.5rem, 5vw, 3.5rem);
  height: clamp(2.5rem, 5vw, 3.5rem);
  border-radius: 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(145deg, rgba(123, 44, 255, 0.9), rgba(58, 12, 163, 0.95));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  backdrop-filter: blur(0.625rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35),
              0 0 1.125rem rgba(123, 44, 255, 0.45);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.modal-open-gallery::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(199, 125, 255, 0.8), rgba(0, 224, 255, 0.6));
  z-index: -1;
  opacity: 0.7;
  filter: blur(0.625rem);
  transition: opacity 0.35s ease, filter 0.35s ease;
  pointer-events: none;
}

.modal-open-gallery:active { transform: scale(0.96); }

/* =============================================================================
   GRID ICON (shared between gallery buttons)
   ============================================================================= */
.grid-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  position: relative;
  z-index: 2;
}

.grid-icon span {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--color-white);
  box-shadow: 0 0 0.375rem rgba(255, 255, 255, 0.8),
              0 0 0.75rem rgba(199, 125, 255, 0.5);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.open-gallery-btn:hover .grid-icon span:nth-child(1),
.modal-open-gallery:hover .grid-icon span:nth-child(1) { transition-delay: 0s; }

.open-gallery-btn:hover .grid-icon span:nth-child(5),
.modal-open-gallery:hover .grid-icon span:nth-child(5) { transition-delay: 0.05s; }

.open-gallery-btn:hover .grid-icon span:nth-child(9),
.modal-open-gallery:hover .grid-icon span:nth-child(9) { transition-delay: 0.1s; }

/* =============================================================================
   GLOBAL INTERACTIVE STATES
   will-change declared here; hover transforms scoped to pointer:fine devices
   below so touch devices never get sticky-hover glitches.
   ============================================================================= */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
.tab-btn,
.scroll-btn,
.open-gallery-btn,
.modal-open-gallery,
.vacanda-btn,
.banner-button01 a,
.banner-button02 a,
.carousel-item,
.slide,
.gallery-grid img,
.partner-left img,
.stats-image img {
  transition: var(--transition-base);
  will-change: transform, filter;
}

/*
 * All :hover transforms are wrapped in @media (hover: hover).
 * This replaces the old approach of applying transforms globally then
 * nullifying them with !important overrides for touch devices.
 */
@media (hover: hover) {
  /* Standard lift */
  button:hover,
  a:hover,
  input[type="button"]:hover,
  input[type="submit"]:hover,
  input[type="reset"]:hover,
  .tab-btn:hover,
  .scroll-btn:hover,
  .gallery-grid img:hover,
  .partner-left img:hover {
    transform: scale(1.04) translateY(-3px);
    filter: var(--shadow-drop-sm);
    box-shadow: var(--shadow-glow-sm);
  }

  /* Stronger lift for primary CTAs */
  .banner-button01 a:hover,
  .banner-button02 a:hover,
  .vacanda-btn:hover,
  .tab-btn.active:hover {
    transform: scale(1.06) translateY(-4px);
    box-shadow: var(--shadow-glow-md);
    filter: brightness(1.08) drop-shadow(0 0 1.25rem rgba(123, 44, 255, 0.55));
  }

  .slide:hover img,
  .carousel-item:hover img {
    transform: scale(1.08) translateY(-6px);
    filter: brightness(1.08) saturate(1.08)
            drop-shadow(0 0 0.75rem rgba(123, 44, 255, 0.45))
            drop-shadow(0 0 1.5rem rgba(123, 44, 255, 0.35))
            drop-shadow(0 0.875rem 1.75rem rgba(0, 0, 0, 0.35));
  }

  .stats-image img:hover {
    filter: drop-shadow(0 0 3.75rem rgba(199, 125, 255, 0.8));
  }

  .banner-image-sec-img:hover {
    transform: scale(1.02) translateY(-3px);
    filter: drop-shadow(0 0.625rem 1.25rem rgba(0, 0, 0, 0.4))
            drop-shadow(0 0 1.125rem rgba(123, 44, 255, 0.35));
  }


  .banner-image-sec-img:hover + .banner-image-sec-back img {
    opacity: 0.35;
  
    transform: translate(-8%, -5%) scale(1.2);
  }


  .tab-btn:hover {
    border-color: var(--color-accent-light);
  }

  .scroll-btn:hover {
    background: rgba(255, 255, 255, 0.188);
  }

  .slider-arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.15);
    color: var(--color-accent);
    text-shadow:
      0 0 0.5rem rgba(123, 44, 255, 0.7),
      0 0 1.125rem rgba(123, 44, 255, 0.4);
    filter: none;
    box-shadow: none;
  }

  .open-gallery-btn:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, 0.45),
                0 0 1.5rem rgba(123, 44, 255, 0.7),
                0 0 2.75rem rgba(0, 224, 255, 0.25);
    filter: brightness(1.05);
  }

  .open-gallery-btn:hover::before {
    opacity: 1;
    filter: blur(1.125rem);
  }

  .open-gallery-btn:hover::after {
    left: 120%;
  }

  .modal-open-gallery:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.45),
                0 0 1.5rem rgba(123, 44, 255, 0.75),
                0 0 3.125rem rgba(0, 224, 255, 0.35);
  }

  .modal-open-gallery:hover::before {
    opacity: 1;
    filter: blur(1rem);
  }

  .open-gallery-btn:hover .grid-icon span,
  .modal-open-gallery:hover .grid-icon span {
    transform: scale(1.15);
    background: #c77dff;
    box-shadow: 0 0 0.625rem rgba(255, 255, 255, 0.9),
                0 0 1.125rem rgba(199, 125, 255, 0.7);
  }

  .arrow:hover {
    background: var(--color-cyan);
    color: #1a0033;
    transform: translateX(10px);
    box-shadow:
      0 0 0.75rem rgba(0, 224, 255, 0.45),
      0 0 1.5rem rgba(0, 224, 255, 0.25);
  }

  .vacanda-btn:hover {
    background: var(--color-white);
    color: #1a0040;
    transform: translateY(-2px);
  }

  .banner-button01 a:hover {
    background-color: #fff;
    color: var(--wp--preset--color--thirdaccent);
    background-image: none;
  }

  .banner-button02 a:hover {
    color: var(--wp--preset--color--accent);
    background-color: var(--wp--preset--color--accent);
  }
}

/* =============================================================================
   ANIMATIONS / KEYFRAMES
   ============================================================================= */
@keyframes bikeSpeed {
  0%   { transform: translateX(-5rem) scale(0.95); filter: blur(8px); opacity: 0; }
  100% { transform: translateX(0) scale(1);        filter: blur(0);   opacity: 1; }
}

@keyframes bikeGlow {
  0%   { filter: drop-shadow(0 0 0px var(--wp--preset--color--accent)); }
  50%  { filter: drop-shadow(0 0 0.5rem var(--wp--preset--color--accent)); }
  100% { filter: drop-shadow(0 0 0px var(--wp--preset--color--accent)); }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes smokeMove {
  0%   { transform: translate(0, 0) scale(0.95);                   opacity: 0;    }
  30%  { transform: translate(-0.9375rem, -0.3125rem) scale(1);    opacity: 0.7;  }
  60%  { transform: translate(-2.1875rem, -0.625rem) scale(1.05);  opacity: 0.5;  }
  100% { transform: translate(-3.125rem, -0.9375rem) scale(1.08);  opacity: 0.25; }
}

@keyframes smokeBoost {
  0%   { transform: translate3d(0, 0, 0) scale(0.95);                    opacity: 0;    }
  40%  { transform: translate3d(-1.5625rem, -0.5rem, 0) scale(1.05);     opacity: 0.6;  }
  100% { transform: translate3d(-3.4375rem, -1.125rem, 0) scale(1.15);   opacity: 0.15; }
}

@keyframes driftMove {
  0%   { transform: translate3d(0, 0, 0)          rotate(0deg);   }
  25%  { transform: translate3d(0.625rem, 0, 0)   rotate(1.5deg); }
  50%  { transform: translate3d(-1.125rem, 0, 0)  rotate(-3deg);  }
  75%  { transform: translate3d(0.5rem, 0, 0)     rotate(1deg);   }
  100% { transform: translate3d(0, 0, 0)          rotate(0deg);   }
}

@keyframes pantherEnter {
  0%   { opacity: 0; transform: translateX(5rem) scale(0.9) rotate(-3deg); filter: blur(10px); }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0deg);       filter: blur(0);    }
}

@keyframes pantherFloat {
  0%   { transform: translateY(0) rotate(0deg);
         filter: drop-shadow(0 0.75rem 1.5rem rgba(0, 0, 0, 0.3))
                 drop-shadow(0 0 0 rgba(123, 44, 255, 0)); }
  50%  { transform: translateY(-1.25rem) rotate(0.5deg);
         filter: drop-shadow(0 1.25rem 2.25rem rgba(0, 0, 0, 0.35))
                 drop-shadow(0 0 1.125rem rgba(123, 44, 255, 0.35)); }
  100% { transform: translateY(0) rotate(0deg);
         filter: drop-shadow(0 0.75rem 1.5rem rgba(0, 0, 0, 0.3))
                 drop-shadow(0 0 0 rgba(123, 44, 255, 0)); }
}

@keyframes driftTitleIn {
  0%   { opacity: 0;   transform: translateY(2.5rem) scale(0.92); filter: blur(10px); }
  100% { opacity: 0.5; transform: translateY(0) scale(1);         filter: blur(0);    }
}

/* Was missing — referenced by .bg-text animation */
@keyframes driftGlow {
  0%,
  100% { text-shadow: 0 0 1rem rgba(255, 111, 165, 0.5); }
  50%  { text-shadow: 0 0 2rem rgba(255, 111, 165, 0.9),
                      0 0 3.5rem rgba(255, 111, 165, 0.4); }
}

@keyframes arrowClick {
  0%   { transform: translateY(-50%) scale(1);    }
  35%  { transform: translateY(-50%) scale(0.85); }
  70%  { transform: translateY(-50%) scale(1.15); }
  100% { transform: translateY(-50%) scale(1);    }
}

/* Drift animation state */
.bike-banner-section.drift-active .banner-image-sec-img {
  animation: driftMove 0.9s ease-out;
}

.bike-banner-section.drift-active .banner-image-sec-back img {
  animation: smokeBoost 1s ease-out forwards;
}

/* =============================================================================
   CURSOR — explicit pointer on all interactive elements
   ============================================================================= */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
.tab-btn,
.scroll-btn,
.slider-arrow,
.open-gallery-btn,
.modal-open-gallery,
.gallery-close,
.modal-close,
.vacanda-btn,
.slide,
.carousel-item,
.car-trigger,
.car-trigger img,
.arrow,
label[for] {
  cursor: pointer;
}

.arrow {
  user-select: none;
}

/* =============================================================================
   RESPONSIVE — DESKTOP BREAKPOINTS
   ============================================================================= */
@media (max-width: 900px) {
  .drift-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .drift-visual {
    justify-self: center;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
  }

  .bg-text {
    font-size: clamp(4.5rem, 14vw, 7rem);
  }
}

@media (max-width: 768px) {
  .slide {
    flex: 0 0 clamp(7rem, 20vw, 10rem);
  }

  .slide.active {
    transform: scale(1.6);
  }

  /* .slider-arrow mobile styling consolidated in MODULE 7 (single source of truth) */

  .vacanda-title {
    font-size: clamp(1.75rem, 6vw, 2.75rem);
  }

  .vacanda-text {
    font-size: clamp(1.0625rem, 3.5vw, 1.25rem);
  }

  .privacy-policy {
    padding: clamp(0.75rem, 3vw, 1.25rem) clamp(0.5rem, 2.5vw, 0.75rem);
  }

  .privacy-policy__content {
    padding: clamp(1rem, 4vw, 1.5rem);
  }

  .privacy-policy h2 {
    font-size: clamp(1.25rem, 4.5vw, 1.625rem);
    padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.625rem, 2.5vw, 0.875rem);
  }

  .privacy-policy p,
  .privacy-policy li {
    font-size: clamp(1rem, 3.5vw, 1.125rem);
  }
}

/* =============================================================================
   MINIMUM TAP TARGETS — WCAG 2.5.5 (44×44 CSS px)
   ============================================================================= */
@media (max-width: 768px) {
  button,
  a,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  label[for] {
    min-height: 44px;
    min-width: 44px;
  }

  .tab-btn {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  /* Prevent iOS 16 auto-zoom on inputs (font-size < 16px triggers it) */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* =============================================================================
   BURGER MENU COMPONENT
   ============================================================================= */
.burger-menu {
  display: none; /* shown via JS on ≤768px */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  padding: 6px;
  z-index: 10001;
  transition: background 0.25s ease;
  will-change: auto;
}

.burger-menu:hover,
.burger-menu:focus-visible {
  background: rgba(123, 44, 255, 0.18);
  box-shadow: none;
  filter: none;
  transform: none;
  outline: 2px solid rgba(123, 44, 255, 0.5);
  outline-offset: 2px;
}

.burger-menu span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease,
              width 0.25s ease;
}

.burger-menu.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger-menu.active span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.burger-menu.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Background dimmer overlay */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 26, 0.65);
  z-index: 9997;
  opacity: 0;
  pointer-events: none; 
  transition: opacity 0.35s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.mobile-nav-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Slide-in navigation drawer */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: min(82vw, 320px);
  height: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background: linear-gradient(175deg, #0a001a 0%, #1a004a 55%, #0a001a 100%);
  border-left: 1px solid rgba(123, 44, 255, 0.3);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6),
              -2px 0 16px rgba(123, 44, 255, 0.2);
  z-index: 9998;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 80px 1.5rem 2rem;
  transform: translateX(110%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav-drawer.active {
  transform: translateX(0);
}

/* Close button inside drawer */
.mobile-nav-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  min-width: unset;
  min-height: unset;
  background: rgba(123, 44, 255, 0.15);
  border: 1px solid rgba(123, 44, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease;
}

.mobile-nav-close:hover,
.mobile-nav-close:focus-visible {
  background: rgba(123, 44, 255, 0.4);
  box-shadow: none;
  filter: none;
  transform: none;
  outline: 2px solid rgba(199, 125, 255, 0.6);
}

/* Logo strip */
.mobile-nav-logo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(123, 44, 255, 0.25);
}

.mobile-nav-logo img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.mobile-nav-logo span {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: "Ermilov", sans-serif;
}

/* Nav links inside drawer */
.mobile-nav-drawer nav,
.mobile-nav-drawer .wp-block-navigation {
  width: 100%;
}

.mobile-nav-drawer .wp-block-navigation__container,
.mobile-nav-drawer ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-drawer .wp-block-navigation-item__content,
.mobile-nav-drawer nav a,
.mobile-nav-drawer ul li a {
  display: flex !important;
  align-items: center;
  padding: 0.875rem 1rem !important;
  color: #e8deff !important;
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border-left: 3px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  will-change: auto;
  min-height: 48px;
}

@media (hover: hover) {
  .mobile-nav-drawer .wp-block-navigation-item__content:hover,
  .mobile-nav-drawer nav a:hover,
  .mobile-nav-drawer ul li a:hover {
    background: rgba(123, 44, 255, 0.18) !important;
    border-left-color: var(--color-accent-light);
    transform: translateX(6px) !important;
    box-shadow: none !important;
    filter: none !important;
  }
}

/* CTA strip */
.mobile-nav-cta {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(123, 44, 255, 0.25);
}

.mobile-nav-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #7b2cff, #c77dff);
  border-radius: 999px;
  color: #fff !important;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: filter 0.3s ease;
  min-height: 52px;
}

@media (hover: hover) {
  .mobile-nav-cta a:hover {
    filter: brightness(1.12);
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Body scroll lock when nav is open */
body.nav-open {
  overflow: hidden;
  padding-right: 0 !important;
}

/* =============================================================================
   MOBILE: HEADER
   ============================================================================= */
@media (max-width: 768px) {
  .header-box-upper {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999 !important;
    padding: 0.625rem 1rem !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    background: rgba(10, 0, 26, 0.88) !important;
    border-bottom: 1px solid rgba(123, 44, 255, 0.18);
    will-change: transform;
  }

  .header-box-upper > .wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .header-box-upper .wp-block-group.alignfull {
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100%;
    gap: 0.5rem !important;
  }

  .header-box-upper .wp-block-image {
    margin: 0 !important;
  }

  .header-box-upper .wp-block-image img {
    width: 40px !important;
    height: 40px !important;
  }

  .header-box-upper .wp-block-navigation,
  .header-box-upper nav {
    display: none !important;
  }

  .burger-menu { display: flex; }

  .mobile-nav-overlay,
  .mobile-nav-drawer { display: block; }
}

@media (max-width: 360px) {
  .header-box-upper {
    padding: 0.5rem 0.75rem !important;
  }
}

/* =============================================================================
   MOBILE: BANNER SECTION
   ============================================================================= */
@media (max-width: 768px) {
  .bike-banner-section {
    aspect-ratio: unset !important;
    min-height: unset !important;
    padding: 5rem 1rem 2rem !important;
    flex-direction: column !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  .bike-banner-section::after {
    display: none;
  }

  .bike-banner-section > .wp-block-columns {
    flex-direction: column !important;
    width: 100% !important;
  }

  .bike-banner-section > .wp-block-columns > .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
    min-width: 0;
  }

  .banner-image-section {
    order: -1;
    max-height: 260px;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .banner-image-sec-img {
    max-width: 70%;
    margin: 0 auto;
  }

  .banner-image-sec-img img {
    width: 100%;
  }

  .banner-image-sec-back {
    display: none;
  }

  .banner-heading {
    font-size: clamp(2.25rem, 9vw, 3.5rem) !important;
    text-align: center;
    margin-bottom: 0.625rem;
  }

  .banner-text {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem) !important;
    line-height: 1.45 !important;
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.25rem;
  }

  .wp-block-buttons {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  .banner-button01,
  .banner-button02 {
    width: 100%;
    max-width: 300px;
  }

  .banner-button01 a,
  .banner-button02 a {
    width: 100%;
    text-align: center;
    padding: 0.875rem 1.25rem !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px;
    border-radius: 999px !important;
  }

  /* Relax complex clip-path on mobile — pill is fine */
  .banner-button02 a,
  .banner-button02 a::after {
    clip-path: none !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 480px) {
  .bike-banner-section { padding-top: 4.5rem !important; }
  .banner-image-section { max-height: 200px; }
  .banner-heading { font-size: clamp(2rem, 8vw, 2.75rem) !important; }
}

/* =============================================================================
   MOBILE: SCROLL SECTION
   ============================================================================= */
@media (max-width: 768px) {
  .scroll-section { padding: 0.75rem 0; }

  .scroll-item {
    min-width: clamp(70vw, 72vw, 85vw);
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    line-height: 1.5;
  }

  .scroll-item p { padding-right: 1.25rem; }

  .scroll-btn { display: none; }

  .scroll-wrapper { gap: 0; }

  .scroll-container {
    width: 100%;
    cursor: default;
  }
}

@media (max-width: 480px) {
  .scroll-item {
    min-width: 85vw;
    font-size: 0.9375rem;
  }
}

/* =============================================================================
   MOBILE: HELMET SLIDER
   ============================================================================= */
@media (max-width: 768px) {
  .helmet-slider {
    padding: 1.25rem 2.75rem;
    position: relative;
  }

  .slide { flex: 0 0 clamp(5.5rem, 20vw, 8.5rem); }

  .slide.active { transform: scale(1.35); }

  /* .slider-arrow mobile styling consolidated in MODULE 7 (single source of truth) */

  .open-gallery-btn {
    top: 0.625rem;
    right: 0.625rem;
    width: 2.625rem;
    height: 2.625rem;
  }
}

@media (max-width: 480px) {
  .slide { flex: 0 0 clamp(4.5rem, 22vw, 6.5rem); }
  .slide.active { transform: scale(1.3); }
}

@media (max-width: 360px) {
  .slide { flex: 0 0 clamp(4rem, 23vw, 5.5rem); }
}

/* =============================================================================
   MOBILE: GALLERY OVERLAY
   ============================================================================= */
@media (max-width: 768px) {
  .gallery-overlay {
    padding: 3.5rem 0.875rem 1rem;
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    height: calc(var(--vh, 1vh) * 100);
  }

  .gallery-grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding-bottom: 1rem;
  }

  .gallery-grid img {
    height: clamp(6.5rem, 26vw, 10rem);
    border-radius: 0.5rem;
    object-fit: cover;
  }

  .gallery-close {
    top: 0.875rem;
    right: 0.875rem;
    font-size: 1.75rem;
    width: 44px;
    height: 44px;
    background: rgba(123, 44, 255, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
  }

  .gallery-grid img { height: clamp(6rem, 28vw, 9rem); }
}

/* =============================================================================
   MOBILE: IMAGE MODAL
   ============================================================================= */
@media (max-width: 768px) {
  .image-modal {
    padding: 1rem;
    align-items: center;
    justify-content: center;
  }

  .modal-img {
    max-width: 96%;
    max-height: 78vh;
    max-height: calc(var(--vh, 1vh) * 78);
    border-radius: var(--radius-md);
    touch-action: pan-y;
    cursor: grab;
  }

  .modal-close {
    top: 0.875rem;
    right: 0.875rem;
    font-size: 1.75rem;
    width: 44px;
    height: 44px;
    background: rgba(123, 44, 255, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .modal-open-gallery {
    top: 0.875rem;
    right: 3.75rem;
    width: 44px;
    height: 44px;
  }
}

/* =============================================================================
   MOBILE: PARTNER BLOCK
   ============================================================================= */
@media (max-width: 768px) {
  .partner-block {
    flex-direction: column !important;
    padding: 2rem 1.25rem;
    gap: 1.5rem;
    align-items: center;
  }

  .partner-left { width: 100%; }

  .partner-left img {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-lg);
    max-height: 280px;
    object-fit: cover;
  }

  .partner-right {
    max-width: 100%;
    width: 100%;
  }

  .partner-right h2 {
    font-size: clamp(1.625rem, 6vw, 2.25rem);
    text-align: center;
  }

  .subtitle {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    text-align: center;
  }

  /* Horizontal-scroll tabs instead of wrapping */
  .tabs-buttons {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .tabs-buttons::-webkit-scrollbar { display: none; }

  .tab-btn {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
  }

  .tabs-content p {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    text-align: center;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .partner-block { padding: 1.5rem 1rem; }

  .tab-btn {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
  }
}

/* =============================================================================
   MOBILE: STATS SECTION
   ============================================================================= */
@media (max-width: 768px) {
  .drift-stats {
    padding: 2.25rem 1.25rem;
  }

  .drift-stats::before {
    width: 12rem;
    height: 12rem;
    filter: blur(3rem);
  }

  .stats-wrapper {
    flex-direction: column !important;
    gap: 1.75rem;
    width: 100%;
  }

  .stats-image {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    perspective: none;
    flex: none;
  }

  .stats-image img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    transform: none !important;
    will-change: auto;
    animation: fadeIn 0.8s ease forwards;
  }

  .stats-content {
    max-width: 100%;
    flex: none;
    text-align: center;
  }

  .stats-content h2 { font-size: clamp(1.5rem, 6vw, 2rem); }

  .stats-content p { font-size: clamp(0.9375rem, 3.5vw, 1.125rem); }
}

@media (max-width: 480px) {
  .stats-image { max-width: 220px; }
}

/* =============================================================================
   MOBILE: DRIFT HERO SECTION
   ============================================================================= */
@media (max-width: 768px) {
  .drift-hero { padding: 2rem 1.25rem; }

  .drift-wrapper {
    gap: 1.25rem !important;
    text-align: center;
  }

  .drift-text-block {
    order: 1;
    width: 100%;
  }

  .drift-wrapper > img.main-img,
  .drift-visual {
    order: 2;
    justify-self: center !important;
    max-width: 80%;
    margin: 0 auto;
    display: block;
  }

  .drift-content { text-align: center; }

  .bg-text {
    font-size: clamp(2.25rem, 10vw, 3.5rem);
    text-align: center;
    padding: 0.75rem 1rem;
  }

  #drift-text {
    font-size: clamp(0.9375rem, 3.5vw, 1.0625rem) !important;
    line-height: 1.6;
    text-align: center;
    height: auto !important;
    overflow: visible;
    padding: 0 0.25rem;
  }

  .arrow {
    margin: 1.25rem auto 0;
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .bg-text { font-size: clamp(2rem, 9vw, 2.75rem); }
  #drift-text { font-size: 0.9375rem !important; }
}

/* =============================================================================
   MOBILE: CAROUSEL
   ============================================================================= */
@media (max-width: 768px) {
  .carousel-container { padding: 0; }

  .carousel-track { gap: clamp(0.625rem, 2vw, 1.25rem); }

  .carousel-item { flex: 0 0 clamp(7.5rem, 28vw, 11rem); }

  .carousel-item.center {
    transform: scale(1.35) translateZ(2.5rem) rotateY(0deg);
    filter: brightness(1.08);
  }

  .carousel-item.left,
  .carousel-item.right {
    transform: scale(0.82) rotateY(0deg);
    filter: brightness(0.75);
  }

  .carousel-item.hidden {
    transform: scale(0.62);
    filter: brightness(0.55);
    opacity: 0.45;
  }
}

@media (max-width: 480px) {
  .carousel-item { flex: 0 0 clamp(6rem, 26vw, 9rem); }

  .carousel-item.center {
    transform: scale(1.25) translateZ(1.5rem);
  }
}

/* =============================================================================
   MOBILE: VACANDA SECTION
   ============================================================================= */
@media (max-width: 768px) {
  .vacanda-section { padding: 2.25rem 1.25rem; }

  .vacanda-container { width: 100%; }

  .vacanda-content { max-width: 100%; }

  .vacanda-title {
    font-size: clamp(1.5rem, 6.5vw, 2.25rem);
    text-align: center;
    margin-bottom: 1.25rem;
  }

  .vacanda-title span {
    font-size: clamp(1.875rem, 8vw, 2.75rem);
    -webkit-text-stroke: 1px black;
  }

  .vacanda-highlight {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    text-align: center;
  }

  .vacanda-text {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    text-align: center;
    line-height: 1.6;
  }

  .vacanda-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 1.25rem auto 0;
    max-width: 260px;
    padding: 1rem 1.5rem;
    min-height: 52px;
    font-size: 1rem;
  }

  .vacanda-glow {
    width: 14rem;
    height: 14rem;
    top: -2rem;
    right: -2rem;
    filter: blur(3rem);
  }
}

@media (max-width: 480px) {
  .vacanda-section { padding: 2rem 1rem; }
}

/* =============================================================================
   MOBILE: FOOTER
   ============================================================================= */
@media (max-width: 768px) {
  .footer-content { flex-direction: column !important; }

  .footer-content > .wp-block-column,
  .footer-box {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1.25rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .footer-box:last-child { border-bottom: none; }

  .footer-box h2.wp-block-heading {
    font-size: 1rem !important;
    margin-bottom: 0.875rem;
  }

  .footer-box p {
    font-size: 0.9375rem !important;
    line-height: 1.6;
  }

  .footer-col02 .footer-useful-link {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .footer-box .wp-block-navigation,
  .footer-box nav {
    display: flex !important;
    flex-direction: column;
  }

  .footer-box .wp-block-navigation-item__content,
  .footer-box nav a {
    font-size: 0.9375rem !important;
    padding: 0.5rem 0 !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .social-box {
    gap: 0.625rem !important;
    flex-wrap: wrap;
  }

  .footer-col04 p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem !important;
  }

  .footer-col01 p {
    font-size: 0.875rem !important;
    line-height: 1.65;
  }
}

@media (max-width: 480px) {
  .footer-box { padding: 1.25rem 1rem !important; }

  .footer-col02 .footer-useful-link {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   MOBILE: PRIVACY POLICY PAGE
   ============================================================================= */
@media (max-width: 768px) {
  .privacy-policy__header {
    margin-top: clamp(4rem, 12vw, 5rem);
    padding: 1.25rem 1rem;
  }

  .privacy-policy__header h1 {
    font-size: clamp(1.25rem, 5vw, 1.625rem);
  }

  .privacy-policy { padding: 0.75rem; }

  .privacy-policy__content {
    padding: 1.25rem 1rem;
    border-radius: 0.75rem;
  }

  .privacy-policy h2 {
    font-size: clamp(1rem, 4vw, 1.25rem);
    padding: 0.5rem 0.75rem;
    margin: 1.25rem 0 0.75rem;
  }

  .privacy-policy p,
  .privacy-policy li {
    font-size: clamp(0.9375rem, 3.5vw, 1rem);
  }
}

/* =============================================================================
   MOBILE: 404 PAGE
   ============================================================================= */
@media (max-width: 768px) {
  .not-found-heading {
    font-size: clamp(5rem, 28vw, 9rem) !important;
    margin-top: clamp(5rem, 18vw, 7rem);
    line-height: 1;
  }

  h6.wp-block-heading.has-text-align-center {
    font-size: clamp(1.125rem, 5vw, 1.5rem);
  }
}

@media (max-width: 480px) {
  .not-found-heading {
    font-size: clamp(4rem, 30vw, 7rem) !important;
  }
}

/* =============================================================================
   MOBILE: WORDPRESS SPACER REDUCTIONS
   ============================================================================= */
@media (max-width: 768px) {
  .wp-block-spacer[style*="height:129px"],
  .wp-block-spacer[style*="height:187px"],
  .wp-block-spacer[style*="height:236px"],
  .wp-block-spacer[style*="height:192px"],
  .wp-block-spacer[style*="height:143px"],
  .wp-block-spacer[style*="height:101px"] {
    height: 2.5rem !important;
  }

  .wp-block-spacer[style*="height:65px"],
  .wp-block-spacer[style*="height:62px"],
  .wp-block-spacer[style*="height:41px"] {
    height: 1.25rem !important;
  }
}

/* =============================================================================
   MOBILE: PERFORMANCE OPTIMIZATIONS
   ============================================================================= */
@media (max-width: 768px) {
  .drift-stats::before {
    filter: blur(3rem);
    animation: none;
  }

  .slide img,
  .carousel-item img {
    will-change: auto;
  }

  .banner-image-sec-img img {
    animation-duration: 0.7s;
  }

  .main-img {
    animation:
      pantherEnter 0.9s ease-out forwards,
      pantherFloat 6s ease-in-out infinite 0.9s;
  }
}

/* =============================================================================
   PREFERS-REDUCED-MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .main-img,
  .banner-image-sec-img img {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =============================================================================
   iOS / SAFARI — SAFE AREA INSETS (notch & home-bar devices)
   ============================================================================= */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .header-box-upper {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  .mobile-nav-drawer {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }

  .footer-content {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* =============================================================================
   LANDSCAPE ORIENTATION (short-viewport phones)
   ============================================================================= */
@media (max-height: 500px) and (orientation: landscape) {
  .header-box-upper { padding: 0.375rem 1rem !important; }

  .bike-banner-section { padding-top: 3.5rem !important; }

  .modal-img {
    max-height: 85vh;
    max-height: calc(var(--vh, 1vh) * 85);
  }

  .drift-wrapper { gap: 0.75rem !important; }

  .mobile-nav-logo {
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
  }

  .mobile-nav-drawer { padding-top: 60px; }
}

/* =============================================================================
   EXTRA SMALL SCREENS (≤360px)
   ============================================================================= */
@media (max-width: 360px) {
  .banner-heading { font-size: clamp(1.75rem, 8vw, 2.25rem) !important; }

  .banner-text { font-size: 0.9375rem !important; }

  .banner-button01 a,
  .banner-button02 a {
    font-size: 0.9375rem !important;
    padding: 0.75rem 1rem !important;
  }

  .tab-btn {
    font-size: 0.8125rem;
    padding: 0.5rem 0.625rem;
  }

  .vacanda-title {
    font-size: clamp(1.375rem, 6.5vw, 1.875rem);
  }
}

/* =============================================================================
   TESTIMONIAL SWIPER
   ============================================================================= */
@media (max-width: 768px) {
  .testimonial-swiper-slider {
    overflow: hidden;
    padding: 0 1rem;
  }

  .testimonials-slider { padding: 0; }
}

/* =============================================================================
   ACCESSIBILITY — FOCUS STYLES
   ============================================================================= */
:focus-visible {
  outline: 2px solid rgba(123, 44, 255, 0.8);
  outline-offset: 3px;
  border-radius: 3px;
}

.wp-block-button__link:focus-visible {
  outline: 2px solid rgba(199, 125, 255, 0.9);
  outline-offset: 4px;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 700;
  z-index: 99999;
  text-decoration: none;
  transition: top 0.2s ease;
}


#scrollContainer {
  scroll-behavior: auto; /* відключити smooth для JS-скролу */
}


/* Для хедера — ігнорує субпіксельні зміщення */
.header-box-upper {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Gallery close animation */
.slide.return-bounce {
  animation: slideReturn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideReturn {
  0%   { transform: scale(0.82) translateY(18px); opacity: 0.4; }
  60%  { transform: scale(1.06) translateY(-4px); opacity: 1; }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
/*
 * mobile.css — Vacanda WordPress Theme
 * Complete mobile stylesheet (max-width: 768px)
 * Version: 2.0
 *
 * Structure:
 *  1.  CSS Custom Properties (mobile overrides)
 *  2.  Base resets
 *  3.  Header & Burger Menu
 *  4.  Mobile Nav Drawer
 *  5.  Banner Section
 *  6.  Scroll Strip
 *  7.  Helmet Slider
 *  8.  Gallery Overlay
 *  9.  Image Modal
 *  10. Partner Block & Tabs
 *  11. Stats Section
 *  12. Drift Hero
 *  13. Carousel
 *  14. Vacanda Section
 *  15. Footer
 *  16. Privacy Policy
 *  17. 404 Page
 *  18. WP Spacer reductions
 *  19. Touch feedback states
 *  20. Safe-area insets (iOS notch)
 *  21. Landscape orientation
 *  22. Extra-small screens (≤360px)
 *  23. Prefers-reduced-motion
 *  24. Accessibility focus styles
 *  25. Testimonial swiper
 */

/* =============================================================================
   1. CSS CUSTOM PROPERTIES — mobile overrides
   ============================================================================= */
@media (max-width: 768px) {
  :root {
    --radius-sm:  0.5rem;
    --radius-md:  0.875rem;
    --radius-lg:  1rem;

    /* Tighter shadows on mobile — GPU perf */
    --shadow-glow-sm:  0 0 0.5rem rgba(123, 44, 255, 0.4),
                       0 0 1rem  rgba(123, 44, 255, 0.2);
    --shadow-glow-md:  0 0 0.75rem rgba(123, 44, 255, 0.55),
                       0 0 1.75rem rgba(123, 44, 255, 0.28);

    /* Faster transitions — mobile feels snappier */
    --transition-base: transform 0.25s ease, filter 0.25s ease,
                       box-shadow 0.25s ease, background 0.25s ease,
                       color 0.25s ease;
    --transition-img:  transform 0.3s ease, filter 0.3s ease;
  }
}

/* =============================================================================
   2. BASE RESETS
   ============================================================================= */
@media (max-width: 768px) {
  /* Prevent horizontal overflow caused by wide WP blocks */
  .wp-site-blocks,
  .wp-block-group,
  .wp-block-columns {
    max-width: 100vw !important;
    overflow-x: hidden;
  }

  /* Remove WP block default padding that breaks mobile layout */
  .wp-block-group.alignfull {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Prevent focus-outline from causing overflow */
  *:focus-visible {
    outline-offset: 2px;
  }

  /* Smooth scrolling disabled on mobile — interferes with momentum scroll */
  html {
    scroll-behavior: auto;
  }

  /* Prevent iOS double-tap zoom on buttons */
  button,
  a,
  [role="button"] {
    touch-action: manipulation;
  }
}

/* =============================================================================
   3. HEADER & BURGER MENU
   ============================================================================= */
@media (max-width: 768px) {

  /* Fixed header bar */
  .header-box-upper {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999 !important;
    padding: 0.625rem 1rem !important;
    backdrop-filter: blur(16px) saturate(180%) brightness(0.92);
    -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(0.92);
    background: rgba(5, 8, 26, 0.9) !important;
    border-bottom: 1px solid rgba(123, 44, 255, 0.2);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35),
                0 0 40px rgba(123, 44, 255, 0.08);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.3s ease, background 0.3s ease,
                box-shadow 0.3s ease !important;
  }

  /* Header hide/show classes set by header_scroll.js on mobile override */
  .header-box-upper.scrolled-down {
    transform: translateY(-100%);
  }

  .header-box-upper.scrolled-up {
    transform: translateY(0);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4),
                0 0 50px rgba(123, 44, 255, 0.12);
  }

  /* Inner group: space-between layout */
  .header-box-upper > .wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
  }

  /* Logo */
  .header-box-upper .wp-block-image {
    margin: 0 !important;
    flex-shrink: 0;
  }

  .header-box-upper .wp-block-image img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    object-fit: cover;
  }

  /* Hide desktop nav */
  .header-box-upper .wp-block-navigation,
  .header-box-upper nav {
    display: none !important;
  }

  /* ── Burger button ── */
  .burger-menu {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    min-width: 44px;   /* WCAG tap target */
    min-height: 44px;
    background: rgba(123, 44, 255, 0.08);
    border: 1px solid rgba(123, 44, 255, 0.2);
    border-radius: 0.625rem;
    cursor: pointer;
    padding: 6px;
    z-index: 10001;
    transition: background 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease;
    will-change: auto;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }

  .burger-menu:active {
    background: rgba(123, 44, 255, 0.28);
    border-color: rgba(123, 44, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(123, 44, 255, 0.18);
  }

  .burger-menu span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease,
                width 0.25s ease,
                background 0.25s ease;
  }

  /* Animated X state */
  .burger-menu.active {
    background: rgba(123, 44, 255, 0.22);
    border-color: rgba(123, 44, 255, 0.45);
  }

  .burger-menu.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background: #c77dff;
  }

  .burger-menu.active span:nth-child(2) {
    opacity: 0;
    width: 0;
  }

  .burger-menu.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background: #c77dff;
  }
}

@media (max-width: 360px) {
  .header-box-upper {
    padding: 0.5rem 0.75rem !important;
  }
}

/* =============================================================================
   4. MOBILE NAV DRAWER
   ============================================================================= */

/* Overlay backdrop */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 26, 0.7);
  z-index: 9997;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mobile-nav-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .mobile-nav-overlay { display: block; }
}

/* Slide-in drawer */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: min(82vw, 320px);
  height: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background: linear-gradient(175deg,
    #07001e 0%,
    #120038 35%,
    #1e0055 65%,
    #0a001a 100%
  );
  border-left: 1px solid rgba(123, 44, 255, 0.25);
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.65),
              -2px 0 20px rgba(123, 44, 255, 0.18),
              inset 1px 0 0 rgba(199, 125, 255, 0.06);
  z-index: 9998;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 72px 1.25rem 2rem;
  transform: translateX(110%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.mobile-nav-drawer.active {
  transform: translateX(0);
}

@media (max-width: 768px) {
  .mobile-nav-drawer { display: block; }
}

/* Decorative glow inside drawer */
.mobile-nav-drawer::before {
  content: "";
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 14rem;
  height: 14rem;
  background: radial-gradient(circle,
    rgba(123, 44, 255, 0.22) 0%,
    transparent 70%
  );
  filter: blur(2.5rem);
  pointer-events: none;
  z-index: 0;
}

/* Close button */
.mobile-nav-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 44px;
  height: 44px;
  min-width: unset;
  min-height: unset;
  background: rgba(123, 44, 255, 0.12);
  border: 1px solid rgba(123, 44, 255, 0.3);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.375rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, transform 0.25s ease;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-close:active {
  background: rgba(123, 44, 255, 0.35);
  border-color: rgba(199, 125, 255, 0.6);
  color: #fff;
  transform: scale(0.92) rotate(90deg);
}

/* Logo strip */
.mobile-nav-logo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(123, 44, 255, 0.18);
  position: relative;
  z-index: 1;
}

.mobile-nav-logo img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(123, 44, 255, 0.4);
  box-shadow: 0 0 12px rgba(123, 44, 255, 0.35);
}

.mobile-nav-logo span {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: "Ermilov", sans-serif;
  letter-spacing: 0.02em;
}

/* Nav links */
.mobile-nav-drawer nav,
.mobile-nav-drawer .wp-block-navigation {
  width: 100%;
  position: relative;
  z-index: 1;
}

.mobile-nav-drawer .wp-block-navigation__container,
.mobile-nav-drawer ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-drawer .wp-block-navigation-item__content,
.mobile-nav-drawer nav a,
.mobile-nav-drawer ul li a {
  display: flex !important;
  align-items: center;
  padding: 0.875rem 1rem !important;
  color: rgba(232, 222, 255, 0.92) !important;
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
  border-radius: 0.625rem;
  border-left: 3px solid transparent;
  transition: background 0.22s ease, border-color 0.22s ease,
              color 0.22s ease, padding-left 0.22s ease;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

/* Touch active state for nav links */
.mobile-nav-drawer .wp-block-navigation-item__content:active,
.mobile-nav-drawer nav a:active,
.mobile-nav-drawer ul li a:active {
  background: rgba(123, 44, 255, 0.2) !important;
  border-left-color: var(--color-accent-light);
  padding-left: 1.375rem !important;
  color: #fff !important;
}

/* Active nav item highlight */
.mobile-nav-drawer .wp-block-navigation-item.current-menu-item
  .wp-block-navigation-item__content {
  background: rgba(123, 44, 255, 0.15);
  border-left-color: var(--color-accent-light);
  color: #fff !important;
}

/* CTA strip */
.mobile-nav-cta {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(123, 44, 255, 0.18);
  position: relative;
  z-index: 1;
}

.mobile-nav-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #7b2cff 0%, #a855f7 50%, #c77dff 100%);
  border-radius: 999px;
  color: #fff !important;
  font-weight: 700;
  font-size: 1rem;
  font-family: "Ermilov", sans-serif;
  text-decoration: none;
  min-height: 52px;
  box-shadow: 0 4px 20px rgba(123, 44, 255, 0.45),
              0 0 30px rgba(123, 44, 255, 0.2);
  transition: filter 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-cta a:active {
  filter: brightness(0.9);
  transform: scale(0.97);
  box-shadow: 0 2px 12px rgba(123, 44, 255, 0.35);
}

/* Body scroll lock */
body.nav-open {
  overflow: hidden;
  /* Prevents layout shift when scrollbar disappears */
  padding-right: 0 !important;
  touch-action: none;
}

/* =============================================================================
   5. BANNER SECTION
   ============================================================================= */
@media (max-width: 768px) {

  .bike-banner-section {
    aspect-ratio: unset !important;
    min-height: unset !important;
    padding: 5.5rem 1rem 2.5rem !important;
    flex-direction: column !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: scroll !important; /* parallax kills perf on iOS */
  }

  /* Remove the ::after overlay — it shifts layout on mobile */
  .bike-banner-section::after {
    display: none !important;
  }

  .bike-banner-section > .wp-block-columns {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }

  .bike-banner-section > .wp-block-columns > .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
    min-width: 0;
    padding: 0 !important;
  }

  /* Vehicle image — render above text on mobile */
  .banner-image-section {
    order: -1;
    max-height: 240px;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 1.25rem;
  }

  .banner-image-sec-img {
    max-width: 72%;
    margin: 0 auto;
  }

  .banner-image-sec-img img {
    width: 100%;
    /* Shorter animation on mobile */
    animation-duration: 0.6s;
  }

  /* Disable smoke effect — too heavy on mobile */
  .banner-image-sec-back {
    display: none !important;
  }

  .banner-heading {
    font-size: clamp(2rem, 9.5vw, 3.25rem) !important;
    text-align: center;
    margin-bottom: 0.5rem;
    line-height: 1.05;
  }

  .banner-text {
    font-size: clamp(0.9375rem, 3.8vw, 1.125rem) !important;
    line-height: 1.5 !important;
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.5rem;
  }

  /* Stack buttons vertically, centered */
  .wp-block-buttons {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .banner-button01,
  .banner-button02 {
    width: 100%;
    max-width: 280px;
  }

  .banner-button01 a,
  .banner-button02 a {
    width: 100% !important;
    text-align: center !important;
    padding: 0.9375rem 1.25rem !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px;  /* WCAG 2.5.5 */
    /* Override complex clip-path with pill on mobile */
    clip-path: none !important;
    border-radius: 999px !important;
    letter-spacing: 0.02em;
  }

  .banner-button02 a::after {
    clip-path: none !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 480px) {
  .bike-banner-section {
    padding-top: 5rem !important;
  }

  .banner-image-section {
    max-height: 200px;
  }

  .banner-heading {
    font-size: clamp(1.875rem, 8.5vw, 2.5rem) !important;
  }
}

/* =============================================================================
   6. SCROLL STRIP (marquee)
   ============================================================================= */
@media (max-width: 768px) {

  .scroll-section {
    padding: 0.875rem 0;
  }

  .scroll-wrapper {
    gap: 0;
    padding: 0;
  }

  .scroll-container {
    width: 100%;
    cursor: default; /* No grab cursor on touch */
    -webkit-overflow-scrolling: touch;
  }

  .scroll-item {
    min-width: clamp(72vw, 78vw, 88vw);
    font-size: clamp(0.9375rem, 3.8vw, 1.125rem);
    padding: 0.5625rem 0.9375rem;
    border-radius: var(--radius-md);
    line-height: 1.5;
  }

  .scroll-item p {
    padding-right: 1.25rem;
    white-space: normal; /* Allow wrapping on very small screens */
  }

  /* Hide desktop arrow buttons */
  .scroll-btn {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .scroll-item {
    min-width: 88vw;
    font-size: 0.9375rem;
  }
}

/* =============================================================================
   7. HELMET SLIDER
   ============================================================================= */
@media (max-width: 768px) {

  .helmet-slider {
    padding: 1.25rem 3rem; /* room for arrows */
    position: relative;
    background-color: #fff;
  }

  .slide {
    flex: 0 0 clamp(5.5rem, 22vw, 8.5rem);
  }

  .slide.active {
    transform: scale(1.35);
  }

  /* Larger tap targets for arrows — symbol-only, no background box.
     Drop-shadow keeps the glyph readable against the white slider
     background as well as any photo content behind it. */
  .slider-arrow {
    font-size: 2rem;
    width: 44px;
    height: 44px;
    min-width: 44px;
    color: #1a0033;
    text-shadow:
      0 1px 2px rgba(255, 255, 255, 0.9),
      0 0 10px rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .slider-arrow:active {
    opacity: 1;
    color: var(--color-accent);
    transform: translateY(-50%) scale(0.88);
  }

  .slider-arrow.prev { left: 0.25rem; }
  .slider-arrow.next { right: 0.25rem; }

  /* Gallery open button — smaller on mobile */
  .open-gallery-btn {
    top: 0.625rem;
    right: 0.625rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
  }
}

@media (max-width: 480px) {
  .slide {
    flex: 0 0 clamp(4.5rem, 23vw, 6.5rem);
  }

  .slide.active {
    transform: scale(1.28);
  }
}

@media (max-width: 360px) {
  .slide {
    flex: 0 0 clamp(3.75rem, 24vw, 5rem);
  }
}

/* =============================================================================
   8. GALLERY OVERLAY
   ============================================================================= */
@media (max-width: 768px) {

  .gallery-overlay {
    padding: 3.75rem 0.875rem 1.5rem;
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    height: calc(var(--vh, 1vh) * 100);
    /* Overscroll background same as overlay */
    background: rgba(0, 0, 0, 0.96);
  }

  .gallery-grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding-bottom: 1.5rem;
  }

  .gallery-grid img {
    height: clamp(6.5rem, 28vw, 10rem);
    border-radius: 0.5rem;
    object-fit: cover;
    /* Shorter stagger animation on mobile */
    animation-delay: calc(0.04s * var(--i));
  }

  .gallery-close {
    position: fixed; /* stays visible while scrolling grid */
    top: 0.875rem;
    right: 0.875rem;
    font-size: 1.375rem;
    width: 44px;
    height: 44px;
    background: rgba(123, 44, 255, 0.35);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #fff;
    border: 1px solid rgba(199, 125, 255, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    -webkit-tap-highlight-color: transparent;
    z-index: 10000;
  }

  .gallery-close:active {
    background: rgba(123, 44, 255, 0.6);
    transform: scale(0.9);
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    gap: 0.375rem;
  }

  .gallery-grid img {
    height: clamp(6rem, 29vw, 9rem);
  }
}

/* =============================================================================
   9. IMAGE MODAL
   ============================================================================= */
@media (max-width: 768px) {

  .image-modal {
    padding: 1rem;
    align-items: center;
    justify-content: center;
    /* Respect safe area */
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .modal-img {
    max-width: 96%;
    max-height: 76vh;
    max-height: calc(var(--vh, 1vh) * 76);
    border-radius: var(--radius-md);
    /* Allow vertical pan gesture (swipe-down-to-close in mobil.js) */
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
  }

  .modal-close {
    position: fixed;
    top: max(0.875rem, env(safe-area-inset-top));
    right: 0.875rem;
    font-size: 1.375rem;
    width: 44px;
    height: 44px;
    background: rgba(123, 44, 255, 0.35);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #fff;
    border: 1px solid rgba(199, 125, 255, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    -webkit-tap-highlight-color: transparent;
    z-index: 10001;
  }

  .modal-close:active {
    background: rgba(123, 44, 255, 0.6);
    transform: scale(0.9);
  }

  /* In-modal gallery button */
  .modal-open-gallery {
    position: fixed;
    top: max(0.875rem, env(safe-area-inset-top));
    right: 3.75rem;
    width: 44px;
    height: 44px;
    border-radius: 0.875rem;
  }
}

/* =============================================================================
   10. PARTNER BLOCK & TABS
   ============================================================================= */
@media (max-width: 768px) {

  .partner-block {
    flex-direction: column !important;
    padding: 2rem 1.25rem;
    gap: 1.5rem;
    align-items: center;
  }

  .partner-left {
    width: 100%;
  }

  .partner-left img {
    width: 100%;
    max-width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }

  .partner-right {
    max-width: 100%;
    width: 100%;
  }

  .partner-right h2 {
    font-size: clamp(1.625rem, 6.5vw, 2.125rem);
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .subtitle {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    text-align: center;
    margin-bottom: 1.25rem;
  }

  /* Horizontal-scrolling tabs */
  .tabs-buttons {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    padding-bottom: 0.5rem;
    padding-right: 1px; /* prevent clipping last item */
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tabs-buttons::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.5625rem 0.9375rem;
    min-height: 44px;
  }

  .tabs-content p {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    text-align: center;
    line-height: 1.65;
  }
}

@media (max-width: 480px) {
  .partner-block {
    padding: 1.5rem 1rem;
  }

  .tab-btn {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
  }
}

/* =============================================================================
   11. STATS SECTION
   ============================================================================= */
@media (max-width: 768px) {

  .drift-stats {
    padding: 2.25rem 1.25rem;
  }

  /* Reduce large radial gradient blur — expensive on mobile */
  .drift-stats::before {
    width: 11rem;
    height: 11rem;
    filter: blur(2.5rem);
    animation: none;
  }

  .stats-wrapper {
    flex-direction: column !important;
    gap: 1.75rem;
    width: 100%;
  }

  .stats-image {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    perspective: none;  /* No 3D tilt on mobile */
    flex: none;
  }

  .stats-image img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    /* JS parallax is disabled on mobile by mobil.js MODULE 5 */
    transform: none !important;
    will-change: auto;
    animation: fadeIn 0.7s ease forwards;
  }

  .stats-content {
    max-width: 100%;
    flex: none;
    text-align: center;
  }

  .stats-content h2 {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
  }

  .stats-content p {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    line-height: 1.65;
  }
}

@media (max-width: 480px) {
  .stats-image {
    max-width: 200px;
  }
}

/* =============================================================================
   12. DRIFT HERO SECTION
   ============================================================================= */
@media (max-width: 768px) {

  .drift-hero {
    padding: 2rem 1.25rem;
  }

  .drift-wrapper {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    text-align: center;
  }

  .drift-text-block {
    order: 1;
    width: 100%;
  }

  /* Product image below text */
  .drift-wrapper > img.main-img,
  .drift-visual {
    order: 2;
    justify-self: center !important;
    max-width: 78%;
    margin: 0 auto;
    display: block;
  }

  .drift-content {
    text-align: center;
  }

  .drift-content h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .drift-content p {
    font-size: clamp(1rem, 3.8vw, 1.25rem);
    max-width: 100%;
    line-height: 1.65;
  }

  .bg-text {
    font-size: clamp(2.25rem, 10.5vw, 3.5rem);
    text-align: center;
    padding: 0.75rem 1rem;
    /* Reduce animation cost */
    animation: driftTitleIn 0.8s ease-out forwards;
  }

  #drift-text {
    font-size: clamp(0.9375rem, 3.5vw, 1.0625rem) !important;
    line-height: 1.65;
    text-align: center;
    height: auto !important;
    min-height: unset !important;
    overflow: visible;
    padding: 0 0.25rem;
  }

  .arrow {
    margin: 1.25rem auto 0;
    width: 52px;
    height: 52px;
    min-width: 44px;
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .bg-text {
    font-size: clamp(2rem, 9.5vw, 2.75rem);
  }

  #drift-text {
    font-size: 0.9375rem !important;
  }
}

/* =============================================================================
   13. CAROUSEL
   ============================================================================= */
@media (max-width: 768px) {

  .carousel-container {
    padding: 0;
    perspective: none; /* Disable 3D perspective — simpler on mobile */
  }

  .carousel-track {
    gap: clamp(0.625rem, 2.5vw, 1.25rem);
  }

  .carousel-item {
    flex: 0 0 clamp(7.5rem, 30vw, 11rem);
  }

  /* Simpler transforms — no rotateY on mobile */
  .carousel-item.center {
    transform: scale(1.35) translateZ(0);
    filter: brightness(1.08);
  }

  .carousel-item.left,
  .carousel-item.right {
    transform: scale(0.82);
    filter: brightness(0.72);
  }

  .carousel-item.hidden {
    transform: scale(0.62);
    filter: brightness(0.5);
    opacity: 0.4;
  }

  /* No will-change on mobile items — too many layers */
  .carousel-item {
    will-change: auto;
  }
}

@media (max-width: 480px) {
  .carousel-item {
    flex: 0 0 clamp(6rem, 27vw, 9rem);
  }

  .carousel-item.center {
    transform: scale(1.25);
  }
}

/* =============================================================================
   14. VACANDA SECTION
   ============================================================================= */
@media (max-width: 768px) {

  .vacanda-section {
    padding: 2.25rem 1.25rem;
    overflow: hidden;
  }

  .vacanda-container {
    width: 100%;
  }

  .vacanda-content {
    max-width: 100%;
  }

  .vacanda-title {
    font-size: clamp(1.5rem, 6.5vw, 2.25rem);
    text-align: center;
    margin-bottom: 1.25rem;
  }

  .vacanda-title span {
    font-size: clamp(1.875rem, 8vw, 2.625rem);
    -webkit-text-stroke: 1px black;
  }

  .vacanda-highlight {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    text-align: center;
    margin: 0.875rem 0;
  }

  .vacanda-text {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    text-align: center;
    line-height: 1.65;
    margin-bottom: 0.875rem;
  }

  .vacanda-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 1.25rem auto 0;
    max-width: 260px;
    padding: 1rem 1.5rem;
    min-height: 52px;
    font-size: 1rem;
    text-align: center;
  }

  /* Smaller glow blob */
  .vacanda-glow {
    width: 12rem;
    height: 12rem;
    top: -2rem;
    right: -2rem;
    filter: blur(2.5rem);
  }
}

@media (max-width: 480px) {
  .vacanda-section {
    padding: 2rem 1rem;
  }
}

/* =============================================================================
   15. FOOTER
   ============================================================================= */
@media (max-width: 768px) {

  .footer-content {
    flex-direction: column !important;
  }

  .footer-content > .wp-block-column,
  .footer-box {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1.25rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .footer-box:last-child {
    border-bottom: none;
  }

  .footer-box h2.wp-block-heading {
    font-size: 1rem !important;
    margin-bottom: 0.875rem;
    letter-spacing: 0.04em;
    opacity: 0.9;
  }

  .footer-box p {
    font-size: 0.9375rem !important;
    line-height: 1.65;
  }

  /* 2-column grid for useful links */
  .footer-col02 .footer-useful-link {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .footer-box .wp-block-navigation,
  .footer-box nav {
    display: flex !important;
    flex-direction: column;
  }

  .footer-box .wp-block-navigation-item__content,
  .footer-box nav a {
    font-size: 0.9375rem !important;
    padding: 0.5rem 0 !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .social-box {
    gap: 0.625rem !important;
    flex-wrap: wrap;
  }

  /* Contact items */
  .footer-col04 p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem !important;
  }

  .footer-col01 p {
    font-size: 0.875rem !important;
    line-height: 1.7;
    opacity: 0.8;
  }
}

@media (max-width: 480px) {
  .footer-box {
    padding: 1.25rem 1rem !important;
  }

  /* Single column for useful links on very small screens */
  .footer-col02 .footer-useful-link {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   16. PRIVACY POLICY PAGE
   ============================================================================= */
@media (max-width: 768px) {

  .privacy-policy__header {
    margin-top: clamp(4rem, 13vw, 5rem);
    padding: 1.25rem 1rem;
    border-radius: 0.75rem 0.75rem 0 0;
  }

  .privacy-policy__header h1 {
    font-size: clamp(1.25rem, 5vw, 1.625rem);
  }

  .privacy-policy {
    padding: 0.75rem;
  }

  .privacy-policy__content {
    padding: 1.25rem 1rem;
    border-radius: 0.75rem;
  }

  .privacy-policy h2 {
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    padding: 0.5rem 0.75rem;
    margin: 1.25rem 0 0.75rem;
  }

  .privacy-policy p,
  .privacy-policy li {
    font-size: clamp(0.9375rem, 3.5vw, 1rem);
    line-height: 1.7;
  }
}

/* =============================================================================
   17. 404 PAGE
   ============================================================================= */
@media (max-width: 768px) {

  .not-found-heading {
    font-size: clamp(5rem, 30vw, 8.5rem) !important;
    margin-top: clamp(5rem, 18vw, 7rem);
    line-height: 1;
  }

  h6.wp-block-heading.has-text-align-center {
    font-size: clamp(1.125rem, 5vw, 1.5rem);
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .not-found-heading {
    font-size: clamp(4.5rem, 32vw, 7rem) !important;
  }
}

/* =============================================================================
   18. WP SPACER REDUCTIONS
   ============================================================================= */
@media (max-width: 768px) {

  /* Large spacers → compact */
  .wp-block-spacer[style*="height:129px"],
  .wp-block-spacer[style*="height:187px"],
  .wp-block-spacer[style*="height:236px"],
  .wp-block-spacer[style*="height:192px"],
  .wp-block-spacer[style*="height:143px"],
  .wp-block-spacer[style*="height:101px"] {
    height: 2.5rem !important;
  }

  /* Medium spacers → minimal */
  .wp-block-spacer[style*="height:65px"],
  .wp-block-spacer[style*="height:62px"],
  .wp-block-spacer[style*="height:41px"] {
    height: 1.25rem !important;
  }
}

/* =============================================================================
   19. TOUCH FEEDBACK STATES
   (Replaces :hover — active states for all interactive elements on touch)
   ============================================================================= */
@media (hover: none) and (pointer: coarse) {

  /* Standard press feedback */
  .tab-btn:active,
  .scroll-btn:active,
  .vacanda-btn:active {
    transform: scale(0.96);
    filter: brightness(0.9);
    transition-duration: 0.1s;
  }

  /* CTA press */
  .banner-button01 a:active,
  .banner-button02 a:active {
    transform: scale(0.97);
    filter: brightness(0.88);
    transition-duration: 0.1s;
  }

  /* Slider thumbnails */
  .slide:active img,
  .carousel-item:active img {
    transform: scale(0.97);
    filter: brightness(0.92);
    transition-duration: 0.1s;
  }

  /* Suppress all hover transforms to avoid sticky states */
  button:hover,
  a:hover,
  .tab-btn:hover,
  .scroll-btn:hover,
  .gallery-grid img:hover,
  .partner-left img:hover,
  .banner-button01 a:hover,
  .banner-button02 a:hover,
  .vacanda-btn:hover,
  .slide:hover img,
  .carousel-item:hover img,
  .stats-image img:hover,
  .banner-image-sec-img:hover,
  .open-gallery-btn:hover,
  .modal-open-gallery:hover,
  .arrow:hover,
  .slider-arrow:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }
}

/* =============================================================================
   20. SAFE-AREA INSETS — iOS notch & home-bar devices
   ============================================================================= */
@supports (padding-bottom: env(safe-area-inset-bottom)) {

  .header-box-upper {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
    /* Notch at top */
    padding-top: max(0.625rem, env(safe-area-inset-top)) !important;
  }

  .mobile-nav-drawer {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    /* Full-height including safe area */
    height: calc(100% + env(safe-area-inset-top));
  }

  /* Footer above home bar */
  .footer-content {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  /* Bike banner section below fixed header */
  .bike-banner-section {
    padding-top: max(5rem, calc(4.5rem + env(safe-area-inset-top))) !important;
  }
}

/* =============================================================================
   21. LANDSCAPE ORIENTATION — short-viewport phones
   ============================================================================= */
@media (max-height: 500px) and (orientation: landscape) {

  .header-box-upper {
    padding: 0.375rem 1rem !important;
  }

  .bike-banner-section {
    padding-top: 3.75rem !important;
    flex-direction: row !important;
    align-items: center;
  }

  .banner-image-section {
    order: 0;
    max-height: 100%;
    max-width: 45%;
  }

  .modal-img {
    max-height: 86vh;
    max-height: calc(var(--vh, 1vh) * 86);
  }

  .drift-wrapper {
    gap: 0.75rem !important;
  }

  .mobile-nav-logo {
    margin-bottom: 0.875rem;
    padding-bottom: 0.75rem;
  }

  .mobile-nav-drawer {
    padding-top: 56px;
  }

  /* Tighter spacing in landscape */
  .vacanda-section,
  .drift-hero,
  .partner-block {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* =============================================================================
   22. EXTRA-SMALL SCREENS (≤360px)
   ============================================================================= */
@media (max-width: 360px) {

  .banner-heading {
    font-size: clamp(1.75rem, 8.5vw, 2.25rem) !important;
  }

  .banner-text {
    font-size: 0.9375rem !important;
  }

  .banner-button01 a,
  .banner-button02 a {
    font-size: 0.9375rem !important;
    padding: 0.8125rem 1rem !important;
  }

  .tab-btn {
    font-size: 0.8125rem;
    padding: 0.5rem 0.625rem;
  }

  .vacanda-title {
    font-size: clamp(1.375rem, 7vw, 1.875rem);
  }

  .mobile-nav-drawer {
    width: 90vw;
  }

  /* Header adjustments */
  .header-box-upper {
    padding: 0.5rem 0.75rem !important;
  }

  .header-box-upper .wp-block-image img {
    width: 36px !important;
    height: 36px !important;
  }
}

/* =============================================================================
   23. PREFERS-REDUCED-MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {

  /* Kill all animations & transitions */
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }

  /* Force-show elements that animate in (would otherwise stay invisible) */
  .main-img,
  .banner-image-sec-img img,
  .bg-text {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  /* Disable drawer slide animation */
  .mobile-nav-drawer {
    transition: none !important;
  }

  /* Disable overlay fade */
  .mobile-nav-overlay {
    transition: none !important;
  }
}

/* =============================================================================
   24. ACCESSIBILITY FOCUS STYLES — mobile
   ============================================================================= */
@media (max-width: 768px) {

  /* Larger focus ring on touch screens */
  :focus-visible {
    outline: 2px solid rgba(123, 44, 255, 0.85);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* Skip-link becomes visible on focus */
  .skip-link:focus {
    top: max(0.75rem, env(safe-area-inset-top));
    left: 1rem;
    z-index: 99999;
  }

  /* Interactive elements must meet 44×44 WCAG 2.5.5 */
  button,
  a,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  label[for] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent iOS 16 auto-zoom on inputs */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* =============================================================================
   25. TESTIMONIAL SWIPER
   ============================================================================= */
@media (max-width: 768px) {

  .testimonial-swiper-slider {
    overflow: hidden;
    padding: 0 1rem;
  }

  .testimonials-slider {
    padding: 0;
  }
}
.arrow svg{
  width:28px;
  height:28px;
}
.arrow {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: all .3s ease;
}

@media (hover: hover) {
  .arrow:hover {
    background: #fff;
    color: #000;
    transform: translateX(8px);
  }
}

@media (hover: none) and (pointer: coarse) {
  .arrow:active {
    background: #fff;
    color: #000;
    transform: translateX(4px) scale(0.96);
    transition-duration: 0.1s;
  }
}

#banner-section {
    min-height: 600px;
    width: 80%;
    margin: 0 auto;
}

#banner-section .wp-block-columns {
    display: flex;
    align-items: center;
    gap: 40px;
}

.banner-image-section {
    position: relative;
    flex: 1;
}

.banner-image-sec-img img {
    width: 100%;
    display: block;
}

.banner-image-sec-back {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.banner-image-sec-back img {
    width: 100%;
    height: auto;
}

.banner-content {
    flex: 1;
}

.banner-heading {
    font-size: 55px;
    font-weight: 700;
    line-height: 1.2;
}

.banner-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.banner-button01,
.banner-button02 {
    display: inline-block;
    padding: 14px 30px;
    text-decoration: none;
    font-weight: 600;
}
/* Обгортка — явний relative + розміри від дитини */
.banner-image-section {
  position: relative;
  width: 100%;
}

/* Машина — reference-елемент, задає розміри блоку */
.banner-image-sec-img {
  position: relative;
  z-index: 2;
  width: 100%;
}

.banner-image-sec-img img {
  width: 100%;
  height: auto;
  display: block; /* прибирає inline-gap знизу */
}

/* Дим — точно поверх машини, розміри ідентичні */
.banner-image-sec-back {
  position: absolute;
  /* прив'язуємось до .banner-image-section */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.banner-image-sec-back img {
  /* Замість фіксованого width:627px — 100% від батька */
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  animation: smokeMove 1s ease-out forwards;
  display: block;
}
/* =============================================================================
   MOBILE BANNER FIXES — patch поверх style.css / mobile.css
   Підключи ПІСЛЯ основних файлів, або вклей у відповідні секції.
   ============================================================================= */

/* ── 1. ВІДНОВЛЕННЯ ДИМУ НА МОБІЛЬНОМУ ──────────────────────────────────────
   В обох файлах є: .banner-image-sec-back { display: none !important; }
   Цей блок скасовує його і відновлює дим із правильним позиціонуванням.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Показуємо дим */
  .banner-image-sec-back {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .banner-image-sec-back .wp-block-group,
  .banner-image-sec-back > div {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .banner-image-sec-back img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    opacity: 0;
    /* Коротша анімація — відповідає меншому розміру */
    animation: smokeMove 0.9s ease-out forwards !important;
    /* Додаємо затримку щоб дим з'являвся після машини */
    animation-delay: 0.2s !important;
  }

  /* Машина — z-index вище диму */
  .banner-image-sec-img {
    position: relative !important;
    z-index: 2 !important;
  }

  /* drift-active: дим посилюється після кліку */
  .bike-banner-section.drift-active .banner-image-sec-back img {
    animation: smokeBoost 1s ease-out forwards !important;
    animation-delay: 0s !important;
  }
}

/* ── 2. ЗМЕНШЕННЯ ВІДСТУПІВ — машина ↔ заголовок, міжрядковий ──────────────
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Зменшуємо нижній відступ секції з машиною */
  .banner-image-section {
    margin-bottom: 0.5rem !important;  /* було 1.25rem */
  }

  /* banner-heading: менший нижній відступ */
  .banner-heading {
    margin-bottom: 0.25rem !important;   /* було 0.5–0.625rem */
    line-height: 1.05 !important;
  }

  /* banner-text: менший міжрядковий і верхній відступ */
  .banner-text {
    line-height: 1.3 !important;          /* було 1.45–1.5 */
    margin-top: 0 !important;
    margin-bottom: 1rem !important;       /* було 1.25–1.5rem */
  }

  /* Загальне padding банера — стискаємо трохи зверху */
  .bike-banner-section {
    padding: 4.5rem 1rem 1.5rem !important;
  }
}

@media (max-width: 480px) {
  .bike-banner-section {
    padding-top: 4rem !important;
  }

  .banner-image-section {
    margin-bottom: 0.375rem !important;
  }
}

/* ── 3. ТЕКСТ ×1.5 НА МОБІЛЬНОМУ ───────────────────────────────────────────
   Базові clamp-значення помножені приблизно на 1.5
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  .banner-heading {
    /* було clamp(2rem, 9.5vw, 3.25rem) → ×1.5 */
    font-size: clamp(3rem, 14vw, 4.875rem) !important;
  }

  .banner-text {
    /* було clamp(0.9375rem, 3.8vw, 1.125rem) → ×1.5 */
    font-size: clamp(1.4rem, 5.7vw, 1.688rem) !important;
  }
}

@media (max-width: 480px) {
  .banner-heading {
    /* було clamp(1.875rem, 8.5vw, 2.5rem) → ×1.5 */
    font-size: clamp(2.8rem, 13vw, 3.75rem) !important;
  }
}

@media (max-width: 360px) {
  .banner-heading {
    /* було clamp(1.75rem, 8.5vw, 2.25rem) → ×1.5 */
    font-size: clamp(2.625rem, 12.75vw, 3.375rem) !important;
  }

  .banner-text {
    /* було 0.9375rem → ×1.5 */
    font-size: 1.406rem !important;
  }
}

/* ── 4. ЗМЕНШЕННЯ ВІДСТАНІ МІЖ КНОПКАМИ ────────────────────────────────────
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  .wp-block-buttons {
    gap: 0.375rem !important;   /* було 0.75rem */
  }

  /* Трохи менший padding кнопок щоб не займали зайвого місця */
  .banner-button01 a,
  .banner-button02 a {
    padding: 0.75rem 1.25rem !important;  /* було 0.9375rem */
    min-height: 48px !important;           /* було 52px */
  }
}

@media (max-width: 360px) {
  .banner-button01 a,
  .banner-button02 a {
    padding: 0.625rem 1rem !important;
    font-size: 1.406rem !important;        /* теж ×1.5 від 0.9375 */
  }
}
.banner-image-sec-img {
    max-width: 600px;
}

.banner-image-sec-img img {
    width: 100%;
    height: auto;
}
.banner-image-section {
    position: relative;
    max-width: 700px;
}
.banner-image-sec-img {
    position: relative;
    z-index: 2;
    width: 100%;
}
.banner-image-sec-back {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.banner-text {
    line-height: 1.1 !important;
}
.banner-image-sec-back {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

@media (max-width: 768px) {

    .banner-image-sec-back img {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }

}

/* ── ФІКС: машина і дим занадто високо на мобільному ── */

@media (max-width: 768px) {

  /* 1. Прибираємо зайву копію диму всередині .banner-image-sec-img */
  .banner-image-sec-img img:nth-child(2) {
    display: none !important;
  }

  /* 2. Явно задаємо relative для позиціонування диму */
  .banner-image-section {
    position: relative !important;
    /* Прибираємо жорстко зафіксований max-height — він обрізає низ машини */
    max-height: none !important;
    overflow: visible !important;
    /* Відступ знизу щоб машина не налізала на текст */
    margin-bottom: 1rem !important;
  }

  /* 3. Дим позиціонуємо відносно .banner-image-section */
  .banner-image-sec-back {
    display: block !important;
    position: absolute !important;
    /* Дим знизу машини, не поверх усього */
    top: auto !important;
    bottom: -10% !important;
    left: 0 !important;
    width: 100% !important;
    height: 60% !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .banner-image-sec-back img {
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }

  /* 4. Машина — над димом */
  .banner-image-sec-img {
    position: relative !important;
    z-index: 2 !important;
  }

  /* 5. Компенсуємо висоту фіксованого хедера (~60px) + невеликий відступ */
  .bike-banner-section {
    padding-top: 5rem !important; /* ~80px — хедер ~60px + запас */
  }
}
@media (max-width: 768px) {

  /* Батько — обов'язково relative і visible */
  .banner-image-section {
    position: relative !important;
    overflow: visible !important;
    max-height: none !important;
  }

  /* Машина — вище диму */
  .banner-image-sec-img {
    position: relative !important;
    z-index: 2 !important;
    display: block;
  }

  /* Дим — абсолютно, від низу батька, перекриває низ машини */
  .banner-image-sec-back {
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;        /* прив'язка до низу .banner-image-section */
    top: auto !important;        /* скидаємо top: 0 */
    left: 0 !important;
    width: 100% !important;
    height: 75% !important;      /* займає нижні 3/4 контейнера */
    z-index: 1 !important;       /* під машиною */
    pointer-events: none !important;
  }

  /* Обгортки всередині .banner-image-sec-back */
  .banner-image-sec-back .wp-block-group,
  .banner-image-sec-back > div {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Сама картинка диму */
  .banner-image-sec-back img {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    opacity: 0;
    animation: smokeMove 1s ease-out 0.3s forwards !important;
  }
}
@media (max-width: 768px) {

  /* Розтягуємо контейнер машини на повну ширину */
  

  /* Машина на всю ширину */
  .banner-image-sec-img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .banner-image-sec-img img:first-child {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* === ФІНАЛЬНИЙ ФІКС: розмір машини і відстань до заголовку === */
@media (max-width: 768px) {
  .banner-image-section {
    max-height: none !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: -2rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    overflow: visible !important;
  }

  .banner-image-sec-img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .banner-image-sec-img img:first-child {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  .banner-image-section {
    max-height: none !important;
    height: auto !important;
    margin-bottom: -1.5rem !important;
  }
}
/* =============================================================================
   FIX: scroll-item text stays on one line on mobile + bigger font
   ============================================================================= */
@media (max-width: 768px) {
  .scroll-item {
    min-width: max-content !important; /* grow to fit the text, no wrap */
    white-space: nowrap !important;
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important; /* bigger text */
  }

  .scroll-item p {
    white-space: nowrap !important;   /* override "normal" from mobile.css */
    display: inline-block;
    padding-right: 2rem;
  }
}

@media (max-width: 480px) {
  .scroll-item {
    font-size: clamp(1.125rem, 5.5vw, 1.5rem) !important;
  }
}
/* Увеличение всех текстов на мобильных устройствах в 1.5 раза */
@media (max-width: 768px) {
  html {
    font-size: 120%;
  }
}
/* =============================================================================
   STATS IMAGE — tap-to-zoom on mobile
   Reuses the existing .image-modal / .modal-img / .modal-close system.
   ============================================================================= */
@media (max-width: 768px) {

  .stats-image {
    cursor: zoom-in;
    position: relative;
  }

  .stats-image img {
    cursor: zoom-in;
  }

  /* Small magnifier hint badge so users know it's tappable */
  .stats-image::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background: rgba(123, 44, 255, 0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35),
                0 0 12px rgba(123, 44, 255, 0.4);
    pointer-events: none;
    z-index: 2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
  }

  .stats-image:active::after {
    transform: scale(0.9);
  }
}
/* =============================================================================
   STATS IMAGE — tap-to-zoom on mobile
   Uses its own modal (.stats-image-modal), separate from the slider/gallery
   modal in style.css — see stats-image-zoom.js for why they're kept apart.
   It still inherits .image-modal/.modal-img/.modal-close base styling since
   both classes are applied to the same element.
   ============================================================================= */
.stats-image-modal {
  z-index: 10010; /* above the slider/gallery modal (z-index: 9999) */
}

@media (max-width: 768px) {

  .stats-image {
    cursor: zoom-in;
    position: relative;
  }

  .stats-image img {
    cursor: zoom-in;
  }

  /* Small magnifier hint badge so users know it's tappable */
  .stats-image::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background: rgba(123, 44, 255, 0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35),
                0 0 12px rgba(123, 44, 255, 0.4);
    pointer-events: none;
    z-index: 2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
  }

  .stats-image:active::after {
    transform: scale(0.9);
  }
}

/* =============================================================================
   CAROUSEL — bigger container + bigger cards (~+40%)
   Patch poверх .carousel-container / .carousel-track / .carousel-item rules
   in style.css. Keeps the existing 3D scale/translateZ/rotateY math, just
   scaled up proportionally so the center/left/right/hidden states still
   read correctly at the new size.
   ============================================================================= */

/* ── Container: wider + centered ───────────────────────────────────────── */
.carousel-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Desktop card size: was clamp(10rem, 18vw, 15.625rem) → ×1.4 ───────── */
.carousel-item {
  flex: 0 0 clamp(14rem, 25.2vw, 21.875rem);
}

/* translateZ values scaled along with card size so the 3D depth still
   feels proportional rather than flat or excessive */
.carousel-item.center {
  transform: scale(1.5) translateZ(7rem) rotateY(0deg);
}

.carousel-item.left {
  transform: scale(0.9) translateZ(0) rotateY(15deg);
}

.carousel-item.right {
  transform: scale(0.9) translateZ(0) rotateY(-15deg);
}

.carousel-item.hidden {
  transform: scale(0.7) translateZ(-1.75rem) rotateY(0deg);
}

/* =============================================================================
   MOBILE: CAROUSEL — bigger cards (~+40%)
   ============================================================================= */
@media (max-width: 768px) {
  .carousel-container {
    max-width: 100%;
    padding: 0 0.5rem;
  }

  .carousel-track {
    gap: clamp(0.875rem, 3.5vw, 1.75rem);
  }

  /* was clamp(7.5rem, 30vw, 11rem) → ×1.4 */
  .carousel-item {
    flex: 0 0 clamp(10.5rem, 42vw, 15.4rem);
  }

  .carousel-item.center {
    transform: scale(1.35) translateZ(0);
  }

  .carousel-item.left,
  .carousel-item.right {
    transform: scale(0.82);
  }

  .carousel-item.hidden {
    transform: scale(0.62);
  }
}

@media (max-width: 480px) {
  /* was clamp(6rem, 27vw, 9rem) → ×1.4 */
  .carousel-item {
    flex: 0 0 clamp(8.4rem, 37.8vw, 12.6rem);
  }

  .carousel-item.center {
    transform: scale(1.25);
  }
}
/* =============================================================================
   CAROUSEL — bigger container + bigger cards (~+40%)
   Patch poверх .carousel-container / .carousel-track / .carousel-item rules
   in style.css. Keeps the existing 3D scale/translateZ/rotateY math, just
   scaled up proportionally so the center/left/right/hidden states still
   read correctly at the new size.
   ============================================================================= */

/* ── Container: wider + centered ───────────────────────────────────────── */
.carousel-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Desktop card size: was clamp(10rem, 18vw, 15.625rem) → ×1.4 → ×0.9 = ×1.26 ── */
.carousel-item {
  flex: 0 0 clamp(12.6rem, 22.68vw, 19.6875rem);
}

/* translateZ values scaled along with card size so the 3D depth still
   feels proportional rather than flat or excessive */
.carousel-item.center {
  transform: scale(1.5) translateZ(6.3rem) rotateY(0deg);
}

.carousel-item.left {
  transform: scale(0.9) translateZ(0) rotateY(15deg);
}

.carousel-item.right {
  transform: scale(0.9) translateZ(0) rotateY(-15deg);
}

.carousel-item.hidden {
  transform: scale(0.7) translateZ(-1.75rem) rotateY(0deg);
}

/* =============================================================================
   MOBILE: CAROUSEL — bigger cards (~+40%)
   ============================================================================= */
@media (max-width: 768px) {
  .carousel-container {
    max-width: 100%;
    padding: 0 0.5rem;
  }

  .carousel-track {
    gap: clamp(0.875rem, 3.5vw, 1.75rem);
  }

  /* was clamp(7.5rem, 30vw, 11rem) → ×1.4 */
  .carousel-item {
    flex: 0 0 clamp(10.5rem, 42vw, 15.4rem);
  }

  .carousel-item.center {
    transform: scale(1.35) translateZ(0);
  }

  .carousel-item.left,
  .carousel-item.right {
    transform: scale(0.82);
  }

  .carousel-item.hidden {
    transform: scale(0.62);
  }
}

@media (max-width: 480px) {
  /* was clamp(6rem, 27vw, 9rem) → ×1.4 */
  .carousel-item {
    flex: 0 0 clamp(8.4rem, 37.8vw, 12.6rem);
  }

  .carousel-item.center {
    transform: scale(1.25);
  }
}
/* Явна opacity для всіх станів — виключає неініціалізований стан при першому рендері */
.carousel-item.left,
.carousel-item.right {
  opacity: 1;
}

.carousel-item.hidden {
  opacity: 0.5;
}

.carousel-item.center {
  opacity: 1;
}
/* Прибираємо will-change з carousel-item при першому рендері —
   браузер не відкладає малювання на GPU layer */
.carousel-item {
  will-change: auto;
  backface-visibility: visible;
}

/* will-change тільки під час transition (після кліку) */
.carousel-item.transitioning {
  will-change: transform, filter;
}

/* Явна opacity для всіх станів — без цього браузер може
   успадкувати undefined opacity на cold paint */
.carousel-item.left,
.carousel-item.right {
  opacity: 1;
  visibility: visible;
}

.carousel-item.hidden {
  opacity: 0.5;
  visibility: visible;
}

.carousel-item.center {
  opacity: 1;
  visibility: visible;
}
.carousel-container {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, 2vw, 1.25rem);
  will-change: transform;
}

.carousel-item {
  flex: 0 0 clamp(7rem, 18vw, 11rem);
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.45s ease, filter 0.45s ease, opacity 0.45s ease;
}

.carousel-item img {
  width: 100%;
  display: block;
  border-radius: 0.9375rem;
  backface-visibility: hidden;
}

.carousel-item.center {
  z-index: 30;
  transform: scale(1.2) translateZ(0);
  filter: brightness(1.08);
  opacity: 1;
}

.carousel-item.left,
.carousel-item.right {
  opacity: 0.75;
  transform: scale(0.9);
}

.carousel-item.hidden {
  opacity: 0.45;
  transform: scale(0.8);
}

.carousel-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Desktop card size: was clamp(10rem, 18vw, 15.625rem) → ×1.4 → ×0.9 = ×1.26 ── */
.carousel-item {
  flex: 0 0 clamp(12.6rem, 22.68vw, 19.6875rem);
}

/* translateZ values scaled along with card size so the 3D depth still
   feels proportional rather than flat or excessive */
.carousel-item.center {
  transform: scale(1.5) translateZ(6.3rem) rotateY(0deg);
}

.carousel-item.left {
  transform: scale(0.9) translateZ(0) rotateY(15deg);
}

.carousel-item.right {
  transform: scale(0.9) translateZ(0) rotateY(-15deg);
}

.carousel-item.hidden {
  transform: scale(0.7) translateZ(-1.75rem) rotateY(0deg);
}

@media (max-width: 768px) {
  .carousel-container {
    max-width: 100%;
    padding: 0 0.5rem;
  }

  .carousel-track {
    gap: clamp(0.875rem, 3.5vw, 1.75rem);
  }

  /* was clamp(7.5rem, 30vw, 11rem) → ×1.4 */
  .carousel-item {
    flex: 0 0 clamp(10.5rem, 42vw, 15.4rem);
  }

  .carousel-item.center {
    transform: scale(1.35) translateZ(0);
  }

  .carousel-item.left,
  .carousel-item.right {
    transform: scale(0.82);
  }

  .carousel-item.hidden {
    transform: scale(0.62);
  }
}

@media (max-width: 480px) {
  /* was clamp(6rem, 27vw, 9rem) → ×1.4 */
  .carousel-item {
    flex: 0 0 clamp(8.4rem, 37.8vw, 12.6rem);
  }

  .carousel-item.center {
    transform: scale(1.25);
  }
}
/* =============================================================================
   FIX: стрелки слайдера на мобильном — без подложки, только символ + тень
   ============================================================================= */
@media (max-width: 768px) {
  .slider-arrow {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    width: 44px;
    height: 44px;
    min-width: 44px;

    font-size: 2.25rem;
    color: #fff;

    /* тень даёт контраст на любом фоне — светлом и тёмном */
    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.85),
      0 0 8px rgba(0, 0, 0, 0.6);

    opacity: 1;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .slider-arrow:active {
    color: var(--color-accent-light);
    transform: translateY(-50%) scale(0.88);
  }

  .slider-arrow.prev { left: 0.5rem; }
  .slider-arrow.next { right: 0.5rem; }
}
/* =============================================================================
   FIX: стрелки слайдера на мобильном — без подложки, чёрный символ + тень
   ============================================================================= */
@media (max-width: 768px) {
  .slider-arrow {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    width: 44px;
    height: 44px;
    min-width: 44px;

    font-size: 2.25rem;
    color: #000;

    /* тень даёт контраст на любом фоне — светлом и тёмном */
    text-shadow:
      0 1px 3px rgba(255, 255, 255, 0.85),
      0 0 8px rgba(255, 255, 255, 0.6);

    opacity: 1;
    transition: color 0.2s ease;
  }

  .slider-arrow:active {
    color: var(--color-accent);
    transform: translateY(-50%) !important;
  }

  .slider-arrow.prev { left: 0.5rem; }
  .slider-arrow.next { right: 0.5rem; }
}
@media (max-width: 768px) {
  .slider-arrow,
  .slider-arrow:active,
  .slider-arrow:focus,
  .slider-arrow:focus-visible,
  .slider-arrow.clicked {
    transform: translateY(-50%) !important;
    animation: none !important;
    transition: opacity 0.25s ease, color 0.25s ease !important;
  }

  .slider-arrow:active {
    color: inherit;
    text-shadow: none;
  }
}
@media (max-width: 768px) {

  .helmet-slider {
    padding: 1.25rem 2.5rem !important;
  }

  .slider-wrapper {
    overflow: hidden;
    width: 80% !important;
    margin: 0 auto !important;
  }

  .slider-track {
    display: flex;
    transition: transform 0.4s ease;
    gap: 0 !important;
  }

  .slide {
    flex: 0 0 100% !important;
    opacity: 0 !important;
    transform: none !important;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .slide.active {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }

  .slide img {
    width: 100% !important;
    max-height: 52vw;
    object-fit: contain;
    border-radius: var(--radius-md);
    /* Убираем все glow-фильтры */
    filter: none !important;
  }

  .slide.active img {
    filter: none !important;
  }

  .slide p {
    font-size: 0.75rem !important;
    line-height: 1.3;
    text-align: center;
    margin: 0.25rem 0 0;
    opacity: 0.7;
  }

  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) !important;
    font-size: 1.75rem !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    color: #000 !important;
    text-shadow:
      0 1px 3px rgba(255,255,255,0.9),
      0 0 8px rgba(255,255,255,0.6) !important;
    filter: none !important;
    box-shadow: none !important;
  }

  .slider-arrow.prev { left: 0.25rem !important; }
  .slider-arrow.next { right: 0.25rem !important; }
}

@media (max-width: 480px) {
  .slide img {
    max-height: 60vw;
  }
}
@media (max-width: 768px) {

  .helmet-slider {
    padding: 1.25rem 3rem !important;
  }

  .slider-wrapper {
    overflow: hidden;
    width: 80% !important;
    margin: 0 auto !important;
    border: 1.5px solid rgba(123, 44, 255, 0.35);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 1px rgba(123, 44, 255, 0.12);
  }

  .slider-track {
    display: flex;
    transition: transform 0.4s ease;
    gap: 0 !important;
  }

  .slide {
    flex: 0 0 100% !important;
    opacity: 0 !important;
    transform: none !important;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .slide.active {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }

  .slide img {
    width: 100% !important;
    max-height: 52vw;
    object-fit: contain;
    border-radius: var(--radius-md);
    filter: none !important;
  }

  .slide.active img {
    filter: none !important;
  }

  .slide p {
    font-size: 0.75rem !important;
    line-height: 1.3;
    text-align: center;
    margin: 0.25rem 0 0;
    opacity: 0.7;
  }

  .slider-arrow {
    display: flex !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) !important;
    font-size: 2.5rem !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    color: #000 !important;
    filter: none !important;
    box-shadow: none !important;
    text-shadow:
      0 1px 4px rgba(255,255,255,0.95),
      0 0 10px rgba(255,255,255,0.7) !important;
  }

  .slider-arrow.prev { left: 0 !important; }
  .slider-arrow.next { right: 0 !important; }
}

@media (max-width: 480px) {
  .slide img {
    max-height: 60vw;
  }
}
@media (max-width: 768px) {

  .gallery-overlay {
    /* Клік на фон (не на сітку) — закриває галерею через JS */
    padding: 4rem 1rem 6rem !important;
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(0, 0, 0, 0.96);
  }

  /* Кнопка закриття — завжди зверху, не скролиться разом із сіткою */
  .gallery-close {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 3.5rem !important;
    border-radius: 0 !important;
    background: rgba(10, 0, 26, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(123, 44, 255, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-family: "Ermilov", sans-serif;
    color: rgba(255,255,255,0.75) !important;
    letter-spacing: 0.08em;
    z-index: 10001 !important;
    /* Замість «×» — підпис */
  }

  /* Підміняємо символ × на текст через псевдоелемент */
  .gallery-close::before {
    content: "✕  Закрити";
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.8);
  }

  /* Ховаємо оригінальний символ */
  .gallery-close {
    font-size: 0 !important;
    color: transparent !important;
  }

  .gallery-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;      /* було 0.375–0.5rem */
    padding: 0.5rem 0 3rem !important;
  }

  .gallery-grid img {
    height: clamp(7rem, 30vw, 11rem) !important;
    border-radius: 0.75rem !important;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    gap: 0.625rem !important;
  }

  .gallery-grid img {
    height: clamp(6.5rem, 32vw, 10rem) !important;
  }
}
@media (max-width: 768px) {

  .gallery-close {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 3.5rem !important;
    border-radius: 0 !important;
    background: rgba(123, 44, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 2px solid rgba(199, 125, 255, 0.6) !important;
    box-shadow: 0 4px 24px rgba(123, 44, 255, 0.5),
                0 1px 0 rgba(199, 125, 255, 0.3) inset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10001 !important;
    font-size: 0 !important;
    color: transparent !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

  .gallery-close:active {
    background: rgba(100, 20, 220, 0.98) !important;
    box-shadow: 0 2px 12px rgba(123, 44, 255, 0.4) !important;
  }

  .gallery-close::before {
    content: "✕  Закрити";
    font-size: 1rem !important;
    font-weight: 700;
    font-family: "Ermilov", sans-serif;
    letter-spacing: 0.12em;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }
}
/* =============================================================================
   IPAD / TABLET — 769px to 1024px
   Центрує текст, обмежує ширину зображень до 65%
   Підключай ПІСЛЯ style.css і mobile.css
   ============================================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  /* ── ТЕКСТ: центрування (банер і хедер — без змін) ─────────────────────── */
  .partner-right h2,
  .partner-right .subtitle,
  .tabs-content p,
  .stats-content h2,
  .stats-content p,
  .drift-content h1,
  .drift-content p,
  #drift-text,
  .vacanda-title,
  .vacanda-highlight,
  .vacanda-text,
  h1, h2, h3, h4, h5, h6 {
    text-align: center;
  }

  /* ── PARTNER BLOCK ──────────────────────────────────────────────────────── */
  .partner-block {
    flex-direction: column !important;
    align-items: center !important;
  }

  .partner-left {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .partner-left img {
    width: 65% !important;
    max-width: 65% !important;
  }

  .partner-right {
    max-width: 100%;
    text-align: center;
  }

  /* ── STATS SECTION ──────────────────────────────────────────────────────── */
  .stats-wrapper {
    flex-direction: column !important;
    align-items: center !important;
  }

  .stats-image {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .stats-image img {
    width: 65% !important;
    max-width: 65% !important;
  }

  .stats-content {
    max-width: 100%;
    text-align: center;
  }

  /* ── DRIFT HERO SECTION ─────────────────────────────────────────────────── */
  .drift-wrapper {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .drift-visual,
  .drift-wrapper > img.main-img {
    justify-self: center !important;
    width: 65% !important;
    max-width: 65% !important;
    margin: 0 auto;
    display: block;
  }

  .drift-content {
    text-align: center;
  }

  .drift-content p {
    max-width: 100%;
  }

  #drift-text {
    text-align: center;
  }

  .arrow {
    margin: 1.25rem auto 0;
  }

  /* ── VACANDA SECTION ────────────────────────────────────────────────────── */
  .vacanda-content {
    max-width: 100%;
    text-align: center;
  }

  .vacanda-btn {
    display: flex !important;
    margin: 1.25rem auto 0;
    max-width: 280px;
    justify-content: center;
  }

  /* ── ЗОБРАЖЕННЯ: тільки конкретні секції, без банера і хедера ───────────── */
  .stats-image img,
  .partner-left img,
  .drift-visual img,
  .drift-wrapper > img.main-img,
  .main-img,
  .vacanda-section .wp-block-image img,
  .drift-stats .wp-block-image img,
  .partner-block .wp-block-image img {
    width: 65% !important;
    max-width: 65% !important;
    margin: 0 auto !important;
    display: block;
  }

  /* ── TABS — по центру ───────────────────────────────────────────────────── */
  .tabs-buttons {
    justify-content: center !important;
  }
}

/* ── iPad Pro / великі планшети (1025px–1200px): м'якший варіант ─────────── */
@media (min-width: 1025px) and (max-width: 1200px) {

  .partner-left img,
  .stats-image img,
  .drift-visual,
  .drift-wrapper > img.main-img,
  .main-img,
  .vacanda-section .wp-block-image img,
  .drift-stats .wp-block-image img,
  .partner-block .wp-block-image img {
    width: 75% !important;
    max-width: 75% !important;
    margin: 0 auto !important;
    display: block;
  }
}
.header-box-upper .wp-block-navigation a:hover {
    transform: scale(1.1);
    box-shadow: none !important;
    filter: none !important;
}
.header-box-upper .wp-block-image a:hover {
    transform: scale(1.08);
    box-shadow: none !important;
    filter: none !important;
}
.header-box-upper .wp-block-navigation-item {
    margin-left: 10px;
    margin-right: 10px;
    
}
.has-background-color.has-text-color.has-rubik-font-family.has-medium-font-size {
    color: #000 !important;
}

.has-background-color.has-text-color.has-rubik-font-family.has-medium-font-size a {
    color: #000 !important;
    text-decoration: none; /* если нужно убрать подчёркивание */
}

.has-background-color.has-text-color.has-rubik-font-family.has-medium-font-size .dashicons {
    color: #000 !important;
}
.has-background-color.has-text-color.has-rubik-font-family.has-medium-font-size {
    color: #000 !important;
}

.has-background-color.has-text-color.has-rubik-font-family.has-medium-font-size a {
    color: #000 !important;
    text-decoration: none;
    transition: color 0.25s ease;
}

.has-background-color.has-text-color.has-rubik-font-family.has-medium-font-size a:hover {
    color: #7b2cff !important;
}

.has-background-color.has-text-color.has-rubik-font-family.has-medium-font-size .dashicons {
    color: #000 !important;
    vertical-align: middle;
    margin-right: 0.25rem;
    transition: color 0.25s ease;
}

.has-background-color.has-text-color.has-rubik-font-family.has-medium-font-size:hover .dashicons {
    color: #7b2cff !important;
}
/* =============================================================================
   FOOTER — USEFUL LINKS CARDS (Policy + Drift Presentation)
   ============================================================================= */
.footer-useful-links-cards {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.footer-ul-card {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid #e8e4f7;
  border-radius: 10px;
  text-decoration: none;
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.footer-ul-card:hover {
  border-color: var(--color-accent);
  background: #f9f7ff;
  transform: none; /* сбрасываем глобальный hover из style.css */
  box-shadow: none;
  filter: none;
}

.footer-ul-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}

.footer-ul-card__icon--doc   { background: #ede9fc; color: var(--color-accent); }
.footer-ul-card__icon--chart { background: #e2f7f2; color: #0d9373; }

.footer-ul-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-ul-card__title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #111;
  line-height: 1.25;
  font-family: "Ermilov", sans-serif;
}

.footer-ul-card__sub {
  font-size: 0.6875rem;
  color: #888;
  line-height: 1.35;
}

.footer-ul-card__cta {
  font-size: 0.6875rem;
  margin-top: 2px;
}

.footer-ul-card--doc   .footer-ul-card__cta { color: var(--color-accent); }
.footer-ul-card--chart .footer-ul-card__cta { color: #0d9373; }

/* Mobile: карточки полной ширины, уже работают */
@media (max-width: 768px) {
  .footer-useful-links-cards { gap: 0.5rem; }
  .footer-ul-card { padding: 0.625rem 0.75rem; }
}
.footer-ul-card {
  padding: 1.125rem 1.25rem; /* було 0.75rem 0.875rem */
  gap: 0.875rem;
}

.footer-ul-card__icon {
  width: 42px;   /* було 32px */
  height: 42px;
  font-size: 20px;
  border-radius: 9px;
}

.footer-ul-card__title {
  font-size: 0.9375rem; /* було 0.8125rem */
}

.footer-ul-card__sub {
  font-size: 0.75rem;   /* було 0.6875rem */
}

.footer-ul-card__cta {
  font-size: 0.75rem;   /* було 0.6875rem */
  margin-top: 4px;
}
.footer-col03 .wp-block-navigation__container {
    gap: 26px !important;
}
.footer-col03 h2.wp-block-heading {
    margin-bottom: 25px;
}
/* Эффект наведения для пунктов меню в футере */
.footer-col03 .wp-block-navigation-item__content {
    display: inline-block;
    transition: transform 0.25s ease;
    text-decoration: none;
    box-shadow: none !important;
}

.footer-col03 .wp-block-navigation-item__content:hover,
.footer-col03 .wp-block-navigation-item__content:focus {
    transform: scale(1.08);
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Убираем стандартное свечение/обводку темы */
.footer-col03 .wp-block-navigation-item__content::before,
.footer-col03 .wp-block-navigation-item__content::after {
    display: none !important;
}
.privacy-policy {
  padding-top: 170px;
}
@media (max-width: 768px) {
  .privacy-policy {
    padding-top: 20px;
  }
}

/* =============================================================================
   BANNER BUTTONS — v4: scoped to .bike-banner-section only + bigger size
   ============================================================================= */

.bike-banner-section .wp-block-buttons {
  display: flex;
  gap: clamp(0.875rem, 2.2vw, 1.5rem);
}

.bike-banner-section .banner-button01 a,
.bike-banner-section .banner-button02 a {
  clip-path: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-pill);
  padding: clamp(1rem, 2vw, 1.375rem) clamp(2rem, 4vw, 3rem); /* увеличено */
  font-size: clamp(1.0625rem, 2.6vw, 1.375rem); /* увеличено */
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: #000 !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease,
              filter 0.3s ease, background 0.3s ease, color 0.3s ease;
  will-change: transform;
}

/* ── Primary CTA — "Наші Проєкти" ── */
.bike-banner-section .banner-button01 a {
  background: var(--gradient-primary);
  color: #000 !important;
  box-shadow: 0 0.5rem 1.5rem rgba(123, 44, 255, 0.35),
              0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

@media (hover: hover) {
  .bike-banner-section .banner-button01 a:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0.875rem 2rem rgba(123, 44, 255, 0.55),
                0 0 1.5rem rgba(123, 44, 255, 0.4);
    filter: brightness(1.08);
    color: #000 !important;
  }
}

.bike-banner-section .banner-button01 a:active {
  transform: translateY(-1px) scale(0.97);
  filter: brightness(0.95);
  transition-duration: 0.1s;
  color: #000 !important;
}

/* ── Secondary CTA — "Контакти" ── */
.bike-banner-section .banner-button02 a {
  background: var(--color-white);
  color: #000 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.bike-banner-section .banner-button02 a::after {
  content: none !important;
}

@media (hover: hover) {
  .bike-banner-section .banner-button02 a:hover {
    background: #f2f2f2;
    color: #000 !important;
    border-color: rgba(0, 0, 0, 0.4);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25);
  }
}

.bike-banner-section .banner-button02 a:active {
  transform: translateY(-1px) scale(0.97);
  transition-duration: 0.1s;
  color: #000 !important;
}

.bike-banner-section .banner-button01 a:focus-visible,
.bike-banner-section .banner-button02 a:focus-visible {
  outline: 2px solid rgba(199, 125, 255, 0.9);
  outline-offset: 3px;
}

/* =============================================================================
   ПЛАНШЕТ (769–1024px)
   ============================================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  .bike-banner-section .wp-block-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .bike-banner-section .banner-button01 a,
  .bike-banner-section .banner-button02 a {
    font-size: clamp(1.125rem, 2.8vw, 1.3125rem);
    padding: 1.0625rem 2.25rem;
    min-width: 200px;
    text-align: center;
    color: #000 !important;
  }
}

/* =============================================================================
   МОБИЛЬНЫЕ (≤768px)
   ============================================================================= */
@media (max-width: 768px) {
  .bike-banner-section .wp-block-buttons {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .bike-banner-section .banner-button01,
  .bike-banner-section .banner-button02 {
    width: 100%;
    max-width: 340px; /* увеличено */
  }

  .bike-banner-section .banner-button01 a,
  .bike-banner-section .banner-button02 a {
    width: 100%;
    min-height: 58px; /* увеличено */
    font-size: clamp(1.0625rem, 5vw, 1.1875rem); /* увеличено */
    padding: 1.0625rem 1.75rem;
    color: #000 !important;
  }
}

@media (max-width: 360px) {
  .bike-banner-section .banner-button01 a,
  .bike-banner-section .banner-button02 a {
    font-size: clamp(1rem, 5.5vw, 1.0625rem);
    min-height: 52px;
    padding: 0.9375rem 1.375rem;
    color: #000 !important;
  }
}
.footer-bottom {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
  text-align: left;
  font-size: 14px;
  color: #666;
}
.footer-bottom a {
  color: #504545 !important;
}
/*
 * vacanda-mobile-header.css
 * Mobile header redesign — glassmorphism + full-screen nav overlay
 * Version: 1.0
 * Load AFTER style.css and mobile.css
 *
 * Covers ≤ 768px only. Desktop header untouched.
 */

/* =============================================================================
   RESET — скидаємо попередні мобільні стилі хедера
   ============================================================================= */
@media (max-width: 768px) {

  /* Хедер — чистий старт */
  .header-box-upper {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    padding: 0 1.125rem !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;

    /* Glassmorphism */
    background: rgba(5, 8, 26, 0.55) !important;
    backdrop-filter: blur(20px) saturate(160%) brightness(0.9) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) brightness(0.9) !important;
    border-bottom: 1px solid rgba(123, 44, 255, 0.18) !important;
    box-shadow:
      0 1px 0 rgba(199, 125, 255, 0.08) inset,
      0 4px 24px rgba(0, 0, 0, 0.3) !important;

    /* Scroll transitions */
    transition: transform 0.32s ease,
                background 0.32s ease,
                box-shadow 0.32s ease !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  /* Прокрутка — підсилюємо blur */
  .header-box-upper.scrolled {
    background: rgba(5, 8, 26, 0.82) !important;
    box-shadow:
      0 1px 0 rgba(199, 125, 255, 0.1) inset,
      0 6px 32px rgba(0, 0, 0, 0.45),
      0 0 60px rgba(123, 44, 255, 0.07) !important;
  }

  /* Ховаємо хедер при скролі вниз */
  .header-box-upper.header-hidden {
    transform: translateY(-100%) !important;
  }

  /* Ховаємо стандартний WP контент хедера — замінюємо своїм */
  .header-box-upper > .wp-block-group {
    display: none !important;
  }
}

/* =============================================================================
   ЛОГО + НАЗВА САЙТУ
   ============================================================================= */
@media (max-width: 768px) {

  .vhdr-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    flex-shrink: 0;
  }

  .vhdr-logo__img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(123, 44, 255, 0.45);
    box-shadow: 0 0 10px rgba(123, 44, 255, 0.3);
    flex-shrink: 0;
  }

  .vhdr-logo__name {
    font-family: "Ermilov", sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    text-transform: uppercase;
    /* Тонке свічення букв */
    text-shadow: 0 0 20px rgba(199, 125, 255, 0.35);
    line-height: 1;
  }
}

/* =============================================================================
   БУРГЕР КНОПКА — новий дизайн
   ============================================================================= */
@media (max-width: 768px) {

  .vhdr-burger {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 10002;
    transition: opacity 0.2s ease;
  }

  .vhdr-burger__line {
    display: block;
    width: 24px;
    height: 1.5px;
    background: #fff;
    border-radius: 2px;
    transform-origin: center;
    transition:
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      opacity   0.22s ease,
      width     0.28s ease;
  }

  /* Середня лінія — трохи коротша (візуальний ритм) */
  .vhdr-burger__line:nth-child(2) {
    width: 18px;
    align-self: flex-end;
    margin-right: 2px;
  }

  /* Активний стан — X */
  .vhdr-burger.is-open .vhdr-burger__line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
    width: 24px;
  }

  .vhdr-burger.is-open .vhdr-burger__line:nth-child(2) {
    opacity: 0;
    width: 0;
  }

  .vhdr-burger.is-open .vhdr-burger__line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
    width: 24px;
  }

  .vhdr-burger:active {
    opacity: 0.7;
  }
}

/* =============================================================================
   FULL-SCREEN NAV OVERLAY
   ============================================================================= */
@media (max-width: 768px) {

  .vhdr-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;

    /* Фон: темний з фіолетовим відтінком + blur контенту за ним */
    background: rgba(3, 4, 15, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Початковий стан — прихований */
    opacity: 0;
    pointer-events: none;
    transform: scale(1.04);
    transition:
      opacity   0.38s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;

    /* Декоративний радіальний градієнт */
    background-image:
      radial-gradient(ellipse 60% 40% at 50% 0%,
        rgba(123, 44, 255, 0.18) 0%,
        transparent 70%),
      radial-gradient(ellipse 40% 30% at 80% 100%,
        rgba(0, 224, 255, 0.06) 0%,
        transparent 70%);
    background-color: rgba(3, 4, 15, 0.97);
  }

  .vhdr-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }

  /* ── Верхній рядок в оверлеї: лого + закрити ── */
  .vhdr-overlay__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.125rem;
    height: 60px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(123, 44, 255, 0.12);
  }

  /* Кнопка закриття X */
  .vhdr-overlay__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }

  .vhdr-overlay__close:active {
    color: #fff;
    background: rgba(123, 44, 255, 0.2);
  }

  /* ── Навігаційні посилання — центровані, великі ── */
  .vhdr-overlay__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2rem 1rem;
    gap: 0;
  }

  /* Кожен пункт меню */
  .vhdr-nav-item {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.875rem 0;
    font-family: "Ermilov", sans-serif;
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color 0.22s ease, letter-spacing 0.22s ease;
    -webkit-tap-highlight-color: transparent;
    /* Stagger анімація входу */
    opacity: 0;
    transform: translateY(16px);
    transition:
      color          0.22s ease,
      letter-spacing 0.22s ease,
      opacity        0.38s ease,
      transform      0.38s ease;
  }

  .vhdr-nav-item:last-of-type {
    border-bottom: none;
  }

  /* Активний стан при відкритому меню */
  .vhdr-overlay.is-open .vhdr-nav-item {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger delays */
  .vhdr-overlay.is-open .vhdr-nav-item:nth-child(1) { transition-delay: 0.06s; }
  .vhdr-overlay.is-open .vhdr-nav-item:nth-child(2) { transition-delay: 0.10s; }
  .vhdr-overlay.is-open .vhdr-nav-item:nth-child(3) { transition-delay: 0.14s; }
  .vhdr-overlay.is-open .vhdr-nav-item:nth-child(4) { transition-delay: 0.18s; }
  .vhdr-overlay.is-open .vhdr-nav-item:nth-child(5) { transition-delay: 0.22s; }
  .vhdr-overlay.is-open .vhdr-nav-item:nth-child(6) { transition-delay: 0.26s; }

  /* Touch active */
  .vhdr-nav-item:active {
    color: #fff;
    letter-spacing: 0.06em;
  }

  /* Поточна сторінка */
  .vhdr-nav-item.is-current {
    color: #fff;
    background: linear-gradient(90deg, #7b2cff, #c77dff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── CTA кнопка знизу ── */
  .vhdr-overlay__cta {
    padding: 1.5rem 2rem max(1.5rem, env(safe-area-inset-bottom));
    flex-shrink: 0;
  }

  .vhdr-overlay__cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #7b2cff 0%, #a855f7 60%, #c77dff 100%);
    border-radius: 999px;
    font-family: "Ermilov", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff !important;
    text-decoration: none;
    box-shadow:
      0 6px 24px rgba(123, 44, 255, 0.5),
      0 0 40px rgba(123, 44, 255, 0.2);
    transition: filter 0.25s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;

    /* Анімація входу */
    opacity: 0;
    transform: translateY(12px);
    transition:
      filter    0.25s ease,
      transform 0.2s ease,
      opacity   0.38s ease;
  }

  .vhdr-overlay.is-open .vhdr-overlay__cta a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
  }

  .vhdr-overlay__cta a:active {
    filter: brightness(0.88);
    transform: scale(0.97);
    transition-duration: 0.1s;
  }

  /* ── Декоративна горизонтальна лінія перед CTA ── */
  .vhdr-overlay__divider {
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(123, 44, 255, 0.4) 30%,
      rgba(199, 125, 255, 0.5) 50%,
      rgba(123, 44, 255, 0.4) 70%,
      transparent
    );
    margin: 0 2rem;
    opacity: 0;
    transition: opacity 0.38s ease 0.28s;
  }

  .vhdr-overlay.is-open .vhdr-overlay__divider {
    opacity: 1;
  }
}

/* =============================================================================
   BODY SCROLL LOCK
   ============================================================================= */
body.vhdr-nav-open {
  overflow: hidden;
  touch-action: none;
}

/* =============================================================================
   SAFE AREA — iOS notch
   ============================================================================= */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    .header-box-upper {
      padding-left: max(1.125rem, env(safe-area-inset-left)) !important;
      padding-right: max(1.125rem, env(safe-area-inset-right)) !important;
    }
  }
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .vhdr-overlay,
  .vhdr-nav-item,
  .vhdr-overlay__cta a,
  .vhdr-overlay__divider,
  .vhdr-burger__line {
    transition: none !important;
    animation: none !important;
  }

  .vhdr-overlay.is-open {
    opacity: 1;
    transform: none;
  }
}
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
/* =============================================================================
   FIX: banner — auto height + header clearance
   ============================================================================= */

/* Desktop: убираем aspect-ratio и фиксированную высоту,
   контент сам растягивает секцию */
.bike-banner-section {
  aspect-ratio: unset;
  min-height: unset;
  overflow: visible;        /* дочерние элементы не обрезаются */
  height: auto;
  padding-top: 80px;        /* хедер ~60px + 20px воздух */
}

/* Внутренние колонки: выравниваем по центру, не обрезаем */
.bike-banner-section > .wp-block-columns {
  overflow: visible;
  height: auto;
}

/* Изображение в секции — не обрезается */
.banner-image-section {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* =============================================================================
   MOBILE: те же фиксы (переопределяем то, что стояло раньше)
   ============================================================================= */
@media (max-width: 768px) {

  /* Отступ под фиксированный хедер (60px) + воздух */
  .bike-banner-section {
    padding-top: 76px !important;   /* 60px хедер + 16px */
    overflow: visible !important;
    height: auto !important;
    min-height: unset !important;
    aspect-ratio: unset !important;
  }

  .banner-image-section {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
}

/* safe-area для iOS (notch) */
@supports (padding-top: env(safe-area-inset-top)) {
  .bike-banner-section {
    padding-top: max(80px, calc(60px + env(safe-area-inset-top))) !important;
  }

  @media (max-width: 768px) {
    .bike-banner-section {
      padding-top: max(76px, calc(60px + env(safe-area-inset-top))) !important;
    }
  }
}
/* =============================================================================
   MOBILE NAV — CONTACT BLOCK
   ============================================================================= */
.mobile-nav-contacts {
  padding: 0.875rem 0;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(123, 44, 255, 0.18);
  position: relative;
  z-index: 1;
}

.mobile-nav-contacts p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  color: rgba(232, 222, 255, 0.8);
}

.mobile-nav-contacts p:last-child {
  margin-bottom: 0;
}

.mobile-nav-contacts .dashicons {
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-accent-light);
}

.mobile-nav-contacts a {
  color: rgba(232, 222, 255, 0.85) !important;
  text-decoration: none;
  font-size: 0.9375rem;
  min-height: unset;
  padding: 0 !important;
  border-left: none !important;
  border-radius: 0 !important;
  transition: color 0.2s ease;
}

.mobile-nav-contacts a:active {
  color: #fff !important;
}

@media (hover: hover) {
  .mobile-nav-contacts a:hover {
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
}
.mobile-nav-contacts a {
  word-break: break-all;
  overflow-wrap: anywhere;
}
/* =============================================================================
   MOBILE NAV — NAVIGATION BUTTONS
   ============================================================================= */
.mobile-nav-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.5rem 0;
  position: relative;
  z-index: 1;
}

.mobile-nav-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0.875rem 1.25rem !important;
  background: linear-gradient(135deg, #7b2cff 0%, #a855f7 60%, #c77dff 100%);
  border-radius: 999px;
  font-family: "Ermilov", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff !important;
  text-decoration: none;
  text-align: center;
  border: none;
  box-shadow: 0 4px 16px rgba(123, 44, 255, 0.35),
              0 0 24px rgba(123, 44, 255, 0.15);
  transition: filter 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  border-left: none !important;
  border-radius: 999px !important;
}

.mobile-nav-btn:active {
  filter: brightness(0.88);
  transform: scale(0.97) !important;
  box-shadow: 0 2px 10px rgba(123, 44, 255, 0.3);
  transition-duration: 0.1s;
}

@media (hover: hover) {
  .mobile-nav-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(123, 44, 255, 0.5),
                0 0 30px rgba(123, 44, 255, 0.25) !important;
  }
}
.mobile-nav-contacts a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 1.5rem);
}
/* =============================================================================
   FOOTER — RESPONSIVE PATCH v1.1
   Підключати ПІСЛЯ style.css (або вставити в кінець style.css).
   Покриває: мобільний ≤768px, планшет 769–1024px, extra-small ≤360px.

   v1.1 fixes:
   - Replaced :has() with direct class selector (Safari < 15.4 compat)
   - Tablet border dividers use explicit col class selectors instead of
     nth-child (WP block markup can insert wrappers that break nth-child)
   - Added missing overflow-x on footer group wrapper
   ============================================================================= */

/* =============================================================================
   БАЗОВІ ФІКСИ — всі розміри
   ============================================================================= */

/* Footer wrapper — без :has(), пряма атака на клас групи */
.has-thirdaccent-background-color:has(.footer-content),
.footer-content {
  overflow-x: hidden;
}

/* Запасний варіант — клас на wp-block-group у футері */
.wp-block-group.has-thirdaccent-background-color {
  overflow-x: hidden;
}

/* Карточки корисних посилань — адаптивний padding */
.footer-ul-card {
  padding: clamp(0.75rem, 2vw, 1.125rem) clamp(0.875rem, 2.5vw, 1.25rem);
  gap: clamp(0.625rem, 1.5vw, 0.875rem);
  border-radius: var(--radius-sm, 10px);
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  background: #fff;
  border: 1.5px solid #e8e4f7;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.footer-ul-card:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  border-color: var(--color-accent);
  background: #f9f7ff;
}

/* =============================================================================
   MOBILE: ≤768px
   ============================================================================= */
@media (max-width: 768px) {

  /* ── Основна сітка футера ── */
  .footer-content {
    flex-direction: column !important;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── Кожна колонка футера ── */
  .footer-content > .wp-block-column,
  .footer-box {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
    padding: 1.25rem 1.125rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-right: none !important;
    box-sizing: border-box !important;
  }

  .footer-box:last-child {
    border-bottom: none !important;
  }

  /* ── Заголовки колонок ── */
  .footer-box h2.wp-block-heading {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
    letter-spacing: 0.03em;
    opacity: 0.9;
  }

  /* ── Col 01: логотип / зображення ── */
  .footer-col01 .wp-block-gallery {
    margin: 0 !important;
  }

  .footer-col01 .wp-block-gallery figure.wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer-col01 .wp-block-gallery img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0.5rem;
    object-fit: cover;
  }

  /* ── Col 02: корисні посилання ── */
  .footer-col02 .wp-block-columns {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .footer-col02 .wp-block-column {
    width: 100% !important;
    padding: 0 !important;
  }

  .footer-useful-links-cards {
    gap: 0.5rem !important;
  }

  .footer-ul-card {
    padding: 0.875rem 1rem !important;
    gap: 0.75rem !important;
  }

  .footer-ul-card__icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    border-radius: 7px !important;
    flex-shrink: 0;
  }

  .footer-ul-card__title {
    font-size: 0.875rem !important;
  }

  .footer-ul-card__sub {
    font-size: 0.6875rem !important;
  }

  .footer-ul-card__cta {
    font-size: 0.6875rem !important;
  }

  /* ── Col 03: навігація ── */
  .footer-col03 .wp-block-navigation__container,
  .footer-col03 .wp-block-navigation ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .footer-col03 .wp-block-navigation-item__content,
  .footer-col03 nav a {
    display: flex !important;
    align-items: center;
    font-size: 0.9375rem !important;
    padding: 0.5rem 0 !important;
    min-height: 44px;
    text-decoration: none;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* ── Col 04: контакти ── */
  .footer-col04 {
    padding-bottom: 1.5rem !important;
  }

  .footer-col04 p.wp-block-paragraph {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.9375rem !important;
    margin-bottom: 0.625rem !important;
    line-height: 1.4 !important;
  }

  /* Довгий email/телефон не вилазить за межі контейнера */
  .footer-col04 p.wp-block-paragraph a {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    font-size: 0.9375rem !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer-col04 .dashicons {
    flex-shrink: 0;
    font-size: 1.125rem !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  /* ── Footer bottom bar ── */
  .footer-bottom {
    margin: 0 !important;
    padding: 0.875rem 1.125rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
    font-size: 0.8125rem !important;
  }
}

/* =============================================================================
   EXTRA-SMALL: ≤360px
   ============================================================================= */
@media (max-width: 360px) {

  .footer-content > .wp-block-column,
  .footer-box {
    padding: 1rem 0.875rem !important;
  }

  .footer-ul-card {
    padding: 0.75rem 0.875rem !important;
  }

  .footer-ul-card__icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  .footer-ul-card__title {
    font-size: 0.8125rem !important;
  }

  .footer-col04 p.wp-block-paragraph a {
    font-size: 0.875rem !important;
  }

  .footer-bottom {
    font-size: 0.75rem !important;
    padding: 0.75rem !important;
  }
}

/* =============================================================================
   TABLET: 769px–1024px
   ============================================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

  /* 2-колонкова сітка замість 4 */
  .footer-content {
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  .footer-content > .wp-block-column,
  .footer-box {
    width: 50% !important;
    flex-basis: 50% !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
  }

  /* Розділювачі — по конкретних класах, не nth-child,
     щоб уникнути збою при наявності додаткових WP-обгорток */
  .footer-col01,
  .footer-col02 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  }

  .footer-col03,
  .footer-col04 {
    border-bottom: none !important;
  }

  .footer-col01,
  .footer-col03 {
    border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
  }

  .footer-col02,
  .footer-col04 {
    border-right: none !important;
  }

  /* Зображення col01 — обмежуємо висоту */
  .footer-col01 .wp-block-gallery img {
    max-height: 200px;
    object-fit: cover;
    width: 100%;
    border-radius: 0.5rem;
  }

  /* Email — не вилазить за межі */
  .footer-col04 p.wp-block-paragraph a {
    word-break: break-all;
    overflow-wrap: anywhere;
    font-size: clamp(0.875rem, 1.4vw, 1rem);
  }

  /* Навігація — компактніша */
  .footer-col03 .wp-block-navigation-item__content {
    font-size: clamp(0.9375rem, 1.5vw, 1rem) !important;
  }

  .footer-bottom {
    font-size: 0.875rem;
    padding: 0.875rem 1.25rem;
  }
}

/* =============================================================================
   LANDSCAPE: короткі телефони горизонтально
   ============================================================================= */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {

  .footer-content {
    flex-wrap: wrap !important;
  }

  .footer-content > .wp-block-column,
  .footer-box {
    width: 50% !important;
    flex-basis: 50% !important;
    max-width: 50% !important;
    border-bottom: none !important;
  }

  .footer-col01,
  .footer-col03 {
    border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
  }

  .footer-col02,
  .footer-col04 {
    border-right: none !important;
  }
}
/* =============================================================================
   FOOTER — скрываем картинку (col01) и навигацию (col03)
   на мобильном и планшете
   ============================================================================= */
@media (max-width: 1024px) {
  .footer-col01,
  .footer-col03 {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .footer-col01,
  .footer-col03 {
    display: none !important;
  }

  /* col02 и col04 занимают всю ширину */
  .footer-col02,
  .footer-col04 {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
  }
}
@media (max-width: 768px) {
  .bike-banner-section .banner-button01 a,
  .bike-banner-section .banner-button02 a {
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.3 !important;
    padding: 0.875rem 1rem !important;
    font-size: clamp(0.875rem, 4vw, 1rem) !important;
  }
}

@media (max-width: 360px) {
  .bike-banner-section .banner-button01 a,
  .bike-banner-section .banner-button02 a {
    font-size: 0.875rem !important;
    padding: 0.75rem 0.875rem !important;
  }
}
@media (max-width: 768px) {
  .banner-text {
    font-size: clamp(1.1rem, 4.2vw, 1.35rem) !important;
  }
}

@media (max-width: 480px) {
  .banner-text {
    font-size: clamp(1rem, 3.8vw, 1.2rem) !important;
  }
}

@media (max-width: 360px) {
  .banner-text {
    font-size: 0.95rem !important;
  }
}
.nav-contact-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}
@media (max-width: 768px) {
  .banner-text {
    font-size: clamp(1.125rem, 4.2vw, 1.35rem) !important;
  }
}

@media (max-width: 480px) {
  .banner-text {
    font-size: 1.125rem !important;
  }
}

@media (max-width: 360px) {
  .banner-text {
    font-size: 1.125rem !important;
  }
}
@media (max-width: 768px) {
  .banner-text {
    font-size: clamp(1.35rem, 5vw, 1.6rem) !important;
  }
}

@media (max-width: 480px) {
  .banner-text {
    font-size: 1.35rem !important;
  }
}

@media (max-width: 360px) {
  .banner-text {
    font-size: 1.35rem !important;
  }
}

@media (max-width: 768px) {
  .bike-banner-section .wp-block-buttons {
    gap: 0 !important;
  }

  .bike-banner-section .banner-button01 {
    margin-bottom: -0.5rem !important;
  }

  .bike-banner-section .banner-button01 a,
  .bike-banner-section .banner-button02 a {
    margin: 0 !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }
}

@media (max-width: 1024px) {
  .bike-banner-section .wp-block-buttons {
    gap: 0 !important;
  }

  .bike-banner-section .banner-button01 {
    margin-bottom: -0.5rem !important;
  }

  .bike-banner-section .banner-button01 a,
  .bike-banner-section .banner-button02 a {
    margin: 0 !important;
  }
}

@media (max-width: 1620px) {
  .bike-banner-section .wp-block-buttons {
    gap: 0 !important;
  }

  .bike-banner-section .banner-button01 {
    margin-bottom: -0.5rem !important;
  }

  .bike-banner-section .banner-button01 a,
  .bike-banner-section .banner-button02 a {
    margin: 0 !important;
  }
}
.bike-banner-section .wp-block-column:last-child {
  align-items: flex-start !important;
}

.bike-banner-section .banner-heading,
.bike-banner-section .banner-text {
  text-align: left !important;
}

.bike-banner-section .wp-block-buttons {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.bike-banner-section .wp-block-column:last-child {
  align-items: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
}

.bike-banner-section .banner-heading,
.bike-banner-section .banner-text {
  text-align: left !important;
}

.bike-banner-section .wp-block-buttons {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.bike-banner-section .banner-button01,
.bike-banner-section .banner-button02 {
  align-self: flex-start !important;
}

.bike-banner-section .wp-block-buttons {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  flex-direction: row !important;
}
.bike-banner-section .wp-block-column:last-child{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bike-banner-section .wp-block-buttons{
  justify-content: flex-start !important;
  align-items: flex-start !important;
  width: 100%;
}

.banner-heading,
.banner-text,
.bike-banner-section .wp-block-buttons{
  margin-left: 0;
  padding-left: 0;
}
.bike-banner-section .wp-block-column.is-vertically-aligned-center{
  align-items: flex-start;
}

.bike-banner-section .wp-block-buttons{
  width: 100%;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  margin: 0;
}

.bike-banner-section .wp-block-button{
  margin: 0;
}

.banner-heading,
.banner-text,
.bike-banner-section .wp-block-buttons{
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.bike-banner-section .wp-block-buttons{
  padding-left: 0 !important;
}

.bike-banner-section .wp-block-button__link{
  margin-left: 0 !important;
}
@media (max-width: 768px){
  .bike-banner-section .wp-block-column:last-child{
    padding-left: 0 !important;
  }

  .bike-banner-section .wp-block-buttons{
    gap: 0.75rem;
  }
}

@media (max-width: 768px){
  .bike-banner-section .wp-block-columns,
  .bike-banner-section .wp-block-column{
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .bike-banner-section .is-vertically-aligned-center{
    align-items: flex-start !important;
    text-align: left !important;
  }

  .banner-heading,
  .banner-text{
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .bike-banner-section .wp-block-buttons{
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  .bike-banner-section .wp-block-button{
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .bike-banner-section .wp-block-button__link{
    margin: 0 !important;
  }
}

@media (max-width: 768px){
  .bike-banner-section .wp-block-columns{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .bike-banner-section .wp-block-column:last-child{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  .bike-banner-section .wp-block-column:last-child > *{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .banner-heading,
  .banner-text,
  .bike-banner-section .wp-block-buttons{
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .bike-banner-section .wp-block-buttons{
    width: 100% !important;
    max-width: none !important;
  }

  .bike-banner-section .wp-block-button,
  .bike-banner-section .wp-block-button__link{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 768px){
  .bike-banner-section .wp-block-column:last-child{
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (min-width: 769px){
  .bike-banner-section .wp-block-columns{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .bike-banner-section .wp-block-column:last-child{
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .bike-banner-section .wp-block-buttons{
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .banner-heading,
  .banner-text{
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }
}
.bike-banner-section .wp-block-button{
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.partner-right {
  text-align: center;  /* Центрує весь контент в .partner-right */
}

.partner-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.75rem);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 2vw, 1.25rem);
  background: var(--gradient-hero);
  color: var(--color-white);
}
/* =============================================================================
   FOOTER SECTION HEADERS — Visual Distinction Patch
   Add this to style.css (end of file) or as separate stylesheet
   ============================================================================= */

/* ── DESKTOP: Стильні заголовки секцій ────────────────────────────────────── */
.footer-box h2.wp-block-heading {
  /* Розмір — більший, адаптивний */
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  
  /* Колір — градієнт з фіолету на світлофіолет */
  background: linear-gradient(135deg, #7665c4 0%, #e8deff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  /* Верхній border — тонкий, світлий */
  border-top: 2px solid rgba(255, 255, 255, 0.25);
  padding-top: 0.875rem;
  padding-bottom: 0.75rem;
  margin-top: 0 !important;
  margin-bottom: 1.125rem !important;
  
  /* Text-shadow для версії без градієнта (fallback) */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  
  /* Трансформація */
  transition: letter-spacing 0.3s ease, transform 0.3s ease;
  transform: translateZ(0);
  will-change: letter-spacing;
}


/* ── МОБІЛЬНИЙ: ≤768px ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  
  .footer-box h2.wp-block-heading {
    font-size: clamp(0.9375rem, 4vw, 1.125rem);
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    
    /* Спрощений градієнт для мобільного (менше свічення) */
    background: linear-gradient(90deg, #593ec3 0%, #352091 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    border-top: 1.5px solid rgba(255, 255, 255, 0.15);
    padding-top: 0.625rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem !important;
    
    /* Менший текст-шадоу на мобільному */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  
  .footer-box h2.wp-block-heading:active {
    letter-spacing: 0.08em;
    transform: scale(0.98);
  }
}

/* ── ПЛАНШЕТ: 769px–1024px ────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  
  .footer-box h2.wp-block-heading {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    letter-spacing: 0.07em;
    
    padding-top: 0.75rem;
    padding-bottom: 0.625rem;
    margin-bottom: 1rem !important;
  }
}

/* ── EXTRA-SMALL: ≤360px ──────────────────────────────────────────────────── */
@media (max-width: 360px) {
  
  .footer-box h2.wp-block-heading {
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    padding-top: 0.5rem;
    padding-bottom: 0.375rem;
    margin-bottom: 0.625rem !important;
    
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
}

/* ── REDUCED MOTION ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  
  .footer-box h2.wp-block-heading {
    transition: none !important;
    transform: none !important;
  }
}

/* ── FALLBACK для браузерів без gradient text (IE11, старший Edge) ────────── */
@supports not (-webkit-background-clip: text) {
  
  .footer-box h2.wp-block-heading {
    background: none;
    -webkit-text-fill-color: unset;
    color: #4e348b !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
}
.header-nav ul, .footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header-nav a, .footer-nav a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

.header-nav a:hover, .footer-nav a:hover {
  opacity: 0.7;
}

.car-trigger {
  position: relative;
  z-index: 3;
  cursor: pointer;
  display: inline-block;
}

.banner-image-sec-back,
.bike-banner-section::after {
    pointer-events: none !important;
}