/* ICODE Cairo Responsive Repair v3.3.0
   Homepage-only precision override, intentionally loaded after Cinematic v3.2 and Mobile Lock v3.2. */

body.home.page-id-27079.icode-responsive-repair-v33,
body.page-id-27079.icode-responsive-repair-v33 {
  overflow-x: clip !important;
}

/* 1) Stop animation placeholders from becoming real blank space. */
body.page-id-27079.icode-responsive-repair-v33 .elementor-invisible {
  visibility: visible !important;
}

body.page-id-27079.icode-responsive-repair-v33 .icode-v32-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* 2) The v3.2 content-visibility placeholder was reserving 720px blocks before paint.
      Use actual layout height so sections follow their content instead of an intrinsic placeholder. */
body.page-id-27079.icode-responsive-repair-v33 .elementor-element-ace3fd8,
body.page-id-27079.icode-responsive-repair-v33 .elementor-element-3a1d08d,
body.page-id-27079.icode-responsive-repair-v33 .elementor-element-4fa2bc44,
body.page-id-27079.icode-responsive-repair-v33 .elementor-element-7fd0821,
body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a2b7050 {
  content-visibility: visible !important;
  contain: none !important;
  contain-intrinsic-size: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* 3) Slick's track MUST be wider than the viewport. Mobile Lock v3.2 capped it to 100%,
      which wrapped slides vertically and generated thousands of pixels of false height. */
body.page-id-27079.icode-responsive-repair-v33 .slick-track,
body.page-id-27079.icode-responsive-repair-v33 .premium-woo-products-carousel .slick-track,
body.page-id-27079.icode-responsive-repair-v33 .premium-carousel-wrapper .slick-track {
  max-width: none !important;
}

body.page-id-27079.icode-responsive-repair-v33 .slick-list {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Keep normal masonry/grid sections in document flow after Mobile Lock normalizes their items. */
@media (max-width: 1024px) {
  body.page-id-27079.icode-responsive-repair-v33 .premium-woo-products-masonry ul.products,
  body.page-id-27079.icode-responsive-repair-v33 #products-grid ul.products {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* 4) HERO REPAIR.
      The source image is landscape (~1.47:1). A tall 720px mobile cover can only show ~35% of its width.
      We keep an ambient cover layer for a full-bleed feel, then place the complete image as the primary layer.
      Result: no hard side crop on the primary image, no stretched image, no white/empty band. */
@media (max-width: 1024px) {
  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: none !important;
    background-color: #07090b !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a::before,
  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a::before {
    inset: -22px !important;
    z-index: 0 !important;
    background-image: url("https://cairovapeclub.com/wp-content/uploads/2025/11/vipemaadi-1024x696.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    filter: blur(18px) brightness(.42) saturate(.88) !important;
    transform: scale(1.08) !important;
    opacity: .78 !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a::after {
    inset: 0 !important;
    z-index: 1 !important;
    background-image: url("https://cairovapeclub.com/wp-content/uploads/2025/11/vipemaadi-1024x696.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a > .elementor-background-overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(4,5,7,.12) 0%, rgba(4,5,7,.16) 38%, rgba(4,5,7,.56) 66%, rgba(4,5,7,.94) 100%) !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a > .elementor-container {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a .elementor-element-4828532,
  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a .elementor-element-70ff41c {
    visibility: visible !important;
  }

  /* The decorative second hero column must not compete with the pseudo image layers. */
  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a .elementor-element-70ff41c {
    background-image: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a .elementor-element-4828532 {
    z-index: 4 !important;
  }
}

@media (max-width: 767.98px) {
  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a {
    min-height: clamp(520px, 74svh, 620px) !important;
    height: clamp(520px, 74svh, 620px) !important;
    max-height: 620px !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a::before {
    background-image: url("https://cairovapeclub.com/wp-content/uploads/2025/11/vipemaadi-600x408.png") !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a::after {
    background-image: url("https://cairovapeclub.com/wp-content/uploads/2025/11/vipemaadi-600x408.png") !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a .elementor-element-4828532 > .elementor-widget-wrap {
    padding: 0 18px clamp(42px, 6.5svh, 62px) !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-d1282e7 {
    margin-bottom: 10px !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-d1282e7 p {
    font-size: clamp(12px, 3.7vw, 15px) !important;
    line-height: 1.35 !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-84f9a03 {
    margin-bottom: 18px !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-84f9a03 p {
    font-size: clamp(40px, 12.4vw, 54px) !important;
    line-height: .98 !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-f32664e .elementor-button {
    width: min(188px, 66vw) !important;
    min-height: 56px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-a21e70a {
    min-height: clamp(610px, 66svh, 760px) !important;
    height: clamp(610px, 66svh, 760px) !important;
    max-height: 760px !important;
  }
}

/* 5) CATEGORY REPAIR.
      Cinematic v3.2 emits .icode-v32-* classes. Mobile Lock v3.2 was styling .icode-v3-* instead,
      so only the first cards remained in view while the rest sat far outside the clipped page. */
@media (max-width: 1024px) {
  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-rail {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 18px 12px 24px !important;
    margin: 0 !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-inner {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
    scroll-snap-type: none !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-card {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 172px !important;
    height: auto !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 14px !important;
    transform: none !important;
    scroll-snap-align: none !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-media {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 0 4px !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-text {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
    padding-right: 32px !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-text strong {
    font-size: clamp(15px, 2.6vw, 22px) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-text small {
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: .05em !important;
    overflow-wrap: anywhere !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-arrow {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 30px !important;
    height: 30px !important;
  }
}

@media (max-width: 767.98px) {
  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-card {
    min-height: 154px !important;
    padding: 11px !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-media {
    height: 76px !important;
    min-height: 76px !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-text {
    padding-right: 28px !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-text strong {
    font-size: clamp(14px, 4.4vw, 18px) !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .icode-v32-category-arrow {
    width: 28px !important;
    height: 28px !important;
    right: 8px !important;
    bottom: 8px !important;
  }
}

/* 6) Product cards stay within the viewport; no global track width clipping. */
@media (max-width: 767.98px) {
  body.page-id-27079.icode-responsive-repair-v33 #products-grid,
  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-3a1d08d,
  body.page-id-27079.icode-responsive-repair-v33 .elementor-element-7fd0821 {
    overflow: visible !important;
  }

  body.page-id-27079.icode-responsive-repair-v33 .premium-woo-products-masonry ul.products,
  body.page-id-27079.icode-responsive-repair-v33 #products-grid ul.products {
    align-items: stretch !important;
  }
}

/* Accessibility / motion: do not reintroduce animated jumps when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  body.page-id-27079.icode-responsive-repair-v33 *,
  body.page-id-27079.icode-responsive-repair-v33 *::before,
  body.page-id-27079.icode-responsive-repair-v33 *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}