/* ==========================================================================
   HOCO REDESIGN — 20 HOME HERO
   Owns: homepage TOP HERO (Slider Revolution "best seller") + "SPECIAL OFFERS"
   promo banner. Matches /test hero/promo feel: rounded 20px, tidy spacing,
   clean brand-gradient framing. Does NOT touch category grid / rails / header /
   footer (other agents). Scoped hard to the slider widget + the offers banner.
   RTL-safe (logical props). Responsive @ 1440 / 768 / 390.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) HERO — Slider Revolution (#woodmart-best-seller). Round the container to
   20px, give it breathing room + a soft brand shadow. Scoped to the slider
   widget only so the sibling category grid in the same section is untouched.
   --------------------------------------------------------------------------- */
.elementor-widget-slider_revolution .elementor-widget-container{
  margin-block: 8px 6px;
}
.elementor-widget-slider_revolution .wp-block-themepunch-revslider,
.elementor-widget-slider_revolution rs-module-wrap{
  border-radius: 20px;
  overflow: hidden;
}
.elementor-widget-slider_revolution rs-module-wrap{
  box-shadow: 0 10px 30px rgba(40,10,50,.12);
  /* keep the hero from ever running past the viewport on any device */
  max-height: 100vh;
}
/* the actual animated stage also clips to the rounded frame */
.elementor-widget-slider_revolution rs-module,
.elementor-widget-slider_revolution rs-slides,
.elementor-widget-slider_revolution .rev-slidebg{
  border-radius: 20px;
}

/* Rounded CTA inside the slider (rev-btn) — nudge toward brand pill look.
   Rev slider paints most button state inline, so we only round + smooth it. */
.elementor-widget-slider_revolution a.rev-btn{
  border-radius: 30px !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.elementor-widget-slider_revolution a.rev-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(40,10,50,.25);
}

/* Tablet / mobile: tighter radius + guarantee the hero never overflows the
   viewport height. Rev slider scales its own stage by width, so we only cap. */
@media (max-width: 768px){
  .elementor-widget-slider_revolution .wp-block-themepunch-revslider,
  .elementor-widget-slider_revolution rs-module-wrap,
  .elementor-widget-slider_revolution rs-module,
  .elementor-widget-slider_revolution rs-slides,
  .elementor-widget-slider_revolution .rev-slidebg{
    border-radius: 16px;
  }
  .elementor-widget-slider_revolution rs-module-wrap{
    max-height: 78vh;
    box-shadow: 0 6px 18px rgba(40,10,50,.12);
  }
}
@media (max-width: 480px){
  .elementor-widget-slider_revolution rs-module-wrap{ max-height: 70vh; }
}

/* ---------------------------------------------------------------------------
   2) SPECIAL OFFERS — the full-width promo banner (hoco-special-offers.jpg).
   Give it the /test promo-band treatment: sit it on a soft brand-gradient
   frame, round to 20px, add depth + a gentle hover lift. Targeted by image
   src so it can't leak onto any other wd_image_or_svg widget.
   --------------------------------------------------------------------------- */
.elementor-widget-wd_image_or_svg .wd-image:has(img[src*="special-offers"]){
  display: block;
  border-radius: 24px;
  padding: 14px;
  margin-block: 22px;
  background: linear-gradient(120deg, var(--hoco-brand), var(--hoco-brand-2));
  box-shadow: var(--hoco-shadow);
}
.elementor-widget-wd_image_or_svg .wd-image:has(img[src*="special-offers"]) > a{
  display: block;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}
.elementor-widget-wd_image_or_svg .wd-image img[src*="special-offers"]{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  transition: transform .35s ease;
}
.elementor-widget-wd_image_or_svg .wd-image:hover img[src*="special-offers"]{
  transform: scale(1.015);
}

/* Fallback for browsers without :has() — still round + space the banner
   (no gradient frame, but clean). */
@supports not (selector(:has(*))){
  .elementor-widget-wd_image_or_svg .wd-image img[src*="special-offers"]{
    border-radius: 20px;
    box-shadow: var(--hoco-shadow);
    margin-block: 22px;
  }
}

@media (max-width: 768px){
  .elementor-widget-wd_image_or_svg .wd-image:has(img[src*="special-offers"]){
    padding: 8px;
    border-radius: 18px;
    margin-block: 16px;
  }
  .elementor-widget-wd_image_or_svg .wd-image:has(img[src*="special-offers"]) > a,
  .elementor-widget-wd_image_or_svg .wd-image img[src*="special-offers"]{
    border-radius: 12px;
  }
}