/* ============================================================
   20. DESKTOP >= 992px
   ============================================================ */
@media (min-width: 992px) {
  /* Hide mobile-only */
  .hamburger-btn       { display: none; }
  .mobile-search-wrap  { display: none; }
  .bottom-nav          { display: none; }

  body { padding-bottom: 0; }

  /* Show desktop */
  .contact-bar { display: block; }

  .desktop-search {
    display: flex;
    flex: 1;
    margin: 0 20px;
  }

  /* Header padding matches Rayan: 12px 0 */
  .header-main-row { padding: 4px 0; }

  /* Logo centered on mobile but left-aligned on desktop */
  .site-logo-link {
    margin-left: 0;
    margin-right: 0;
  }

  /* Cat nav: sticky below header, overflow visible for dropdowns */
  .cat-nav {
    box-shadow: 0 1px 0 rgba(0,0,0,.14), 0 2px 0 rgba(0,0,0,.05);
    overflow: visible;
    border-radius: 0px 0px 20px 20px;
  }

  .cat-nav-item { position: relative; }

  /* Slider arrows */
  .products-slider-wrap { padding: 0 20px; }

  .sl-arrow {
    display: inline-flex;
    position: absolute;
/*    top: 50%;*/
    transform: translateY(-50%);
    background: var(--white);
    border: 1px solid #c0c2c5;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    pointer-events: auto;
    transition: background .2s;
  }

    .sl-prev {
        right: 140px;
        border-color: var(--shimano-green);
        margin-top: 16px;
    }
    .sl-next {
        left: 125px;
        border-color: var(--shimano-green);
        margin-top: 16px;
    }

  .sl-arrow svg {
    fill: #424750;
    width: 24px;
    height: 24px;
  }

  .sl-arrow:hover {
    background: #f0f0f1;
  }

  /* Wider items on desktop (closer to Rayan's ~208px) */
  .slider-item       { width: 205px; }
  .slider-item-wide  { width: 230px; }
  .product-img       { height: 175px; }
  .product-img.tall  { height: 190px; }

  /* Banner bigger text */
  .banner-content h1 { font-size: 3rem; }

  /* Categories: 6 cols on desktop */
  .categories-grid { grid-template-columns: repeat(6, 1fr); }

  /* Footer: show all columns, show menus */
  .footer-services { grid-template-columns: repeat(4, 1fr); }
  .footer-menus    { grid-template-columns: repeat(4, 1fr); border-top: none; }
  .footer-menu-col { border-bottom: none; }
  .footer-menu-col ul { display: block; }   /* menus visible on desktop */
  .footer-menu-title svg { display: none; } /* hide chevron on desktop */

  /* Footer contacts inline */
  .footer-contacts { flex-wrap: nowrap; }

  /* Mobile-only edge-to-edge override: reset on desktop */
  .main-container .ads-widget,
  .main-container .promo-banner {
    border-radius: var(--radius-lg);
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================================
   TABLET 576–991px
   ============================================================ */
@media (min-width: 576px) and (max-width: 991px) {
  .categories-grid    { grid-template-columns: repeat(4, 1fr); }
  .footer-services    { grid-template-columns: repeat(2, 1fr); }
  .slider-item        { width: 180px; }
  .slider-item-wide   { width: 210px; }
  .banner-content h1  { font-size: 2.6rem; }
}

/* ============================================================
   SMALL MOBILE ≤ 375px
   ============================================================ */
@media (max-width: 375px) {
  .categories-grid    { grid-template-columns: repeat(2, 1fr); }
  .slider-item        { width: 145px; }
  .products-slider { gap: 5px; }
  .banner-content h1  { font-size: 2rem; }
  .cat-nav-item > a   { padding: 8px 10px; font-size: 1.3rem; }
  .story-circle       { width: 62px; height: 62px; }
  .story-label        { font-size: 1.1rem; }
}

/* ============================================================
   REAL IMAGES — logo, banner, product photos, socials
   ============================================================ */

/* ── Site Logo (real SVG) ── */
.site-logo-img {
  height: 52px;
  width: auto;
  display: block;
  /* Rayan desktop logo: 210x73 — keep aspect ratio */
}

.mobile-logo-img {
  height: 36px;
  width: auto;
  display: block;
}

.footer-logo-img {
  height: 52px;
  width: auto;
  display: block;
}

/* Keep logo centred on mobile */
@media (max-width: 991px) {
  .site-logo-link {
    margin-left: auto;
    margin-right: auto;
  }
  .site-logo-img {
    height: 44px;
  }
}

/* ── Real banner (full-width photo + text overlay) ── */
.banner-real-img {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Rayan banner aspect: 2048×819 ≈ 2.5:1 */
/*  max-height: 400px;*/
}

.banner-real-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
/*  max-height: 400px;*/
}

/* Dark gradient overlay so text is always readable */
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(0, 63, 89, 0.72) 0%,
    rgba(0, 90, 130, 0.55) 50%,
    transparent 100%
  );
  display: flex;
  align-items: center;
}

/* On mobile: lighter overlay, text from bottom */
@media (max-width: 575px) {
/*  .banner-real-img,  .banner-real-img img {  max-height: 220px; }*/
  .banner-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 40, 70, 0.85) 0%,
      rgba(0, 40, 70, 0.3) 60%,
      transparent 100%
    );
    align-items: flex-end;
  }
  .banner-overlay .banner-content {
    padding-bottom: 16px;
  }
  .banner-overlay .banner-content h1 {
    font-size: 1.8rem;
  }
}

/* ── Product card images ── */
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  display: block;
  /* Rayan: border-radius 8px on product thumbnails */
}

/* ── Bike slider images ── */
.slider-item-wide .product-img img {
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ── Blog post images ── */
.blog-post-img {
  width: 100px;
  min-height: 88px;
  flex-shrink: 0;
  overflow: hidden;
}

.blog-post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Social icon images (Instagram / Telegram) ── */
.social-icon-img {
  height: auto;
  max-width: 22px;   /* Rayan: socials-items img max-width 22px */
  display: inline-block;
  vertical-align: middle;
}

.social-img-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-img-btn img {
  max-width: 64px;   /* Rayan footer: socials-items img max-width 64px */
  height: auto;
  display: block;
}

/* ── Contact bar social images (desktop only, smaller) ── */
.contact-bar .social-icon-img {
  max-width: 22px;
}

/* ── Footer menus: show on mobile (toggle via JS) ── */
.footer-menu-col ul.open {
  display: block;
}

/* ============================================================
   IMAGE LOADING & POLISH
   ============================================================ */

/* Lazy-load fade-in */
.img-lazy {
  opacity: 0;
  transition: opacity .4s ease;
}
.img-lazy.img-loaded {
  opacity: 1;
}

/* Prevent layout shift while image loads */
.product-img,
.blog-post-img,
.banner-real-img {
  background: #f0f0f1;
}

/* ── Footer menu SVG transition ── */
.footer-menu-title svg {
  transition: transform .2s ease;
}

/* ── Smooth hover on all links ── */
a { transition: color .2s ease; }

/* ── Add-to-wishlist button transition ── */
.add-wishlist {
  transition: transform .2s ease, box-shadow .2s ease;
}

/* ── Product card image uniform ratio ── */
.product-img {
  aspect-ratio: 1 / 1;
  height: auto;
}

.product-img.tall {
  aspect-ratio: 4 / 3;
  height: auto;
}

/* ── Banner real image responsive height ── */
@media (max-width: 480px) {
    /*.banner-real-img, .banner-real-img img { max-height: 200px; }*/
}

@media (min-width: 768px) {
    /*.banner-real-img, .banner-real-img img { max-height: 320px; }*/
  .site-logo-img { height: 60px; }
}

@media (min-width: 992px) {
    /*.banner-real-img, .banner-real-img img { max-height: 400px; }*/
  .site-logo-img { height: 73px; } /* Rayan: logo-desktop 210x73 */
}

/* ── Mobile menu logo: no white filter needed if using coloured SVG ── */
@media (max-width: 991px) {
  .mobile-menu-header {
    background: var(--blue);
    padding: 14px 16px;
  }
  .mobile-logo-img {
    height: 38px;
  }
}

/* ── Footer logo sizing ── */
.footer-logo-img {
  height: 52px;
  width: auto;
}

/* ── Social image buttons in footer ── */
.footer-socials .social-img-btn img {
  max-width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 50%;
}

/* ── Contact bar social images ── */
.header-socials img.social-icon-img {
  max-width: 22px;
  height: auto;
}

/* ── Stories images (if real images added later) ── */
.story-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ── General img fluid ── */
img { max-width: 100%; height: auto; }

/* ── Page body background ── */
@media (max-width: 991px) {
  body:not(.home) { background: #f0f0f1; }
}

/* ── Scroll progress bar (top of page) ── */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--blue);
  transform-origin: right;
   transform: scaleX(0);
   z-index: 99999;
   transition: transform .1s linear;
}