/* Raadhaye Arts Shop UI Canonical Layer
   Keep this file loaded last. It intentionally neutralizes legacy WooCommerce/theme
   slider rules for the custom PHP storefront and gives every shop slider one viewport.
*/

/* ---------- Shop hero: one stable canvas, no stacked/ghost slides ---------- */
.rd-shop-hero{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  background:#111!important;
  box-shadow:none!important;
}
.rd-shop-hero-slides{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:8/3!important;
  overflow:hidden!important;
  isolation:isolate;
}
.rd-shop-hs{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  overflow:hidden!important;
  transition:opacity .45s ease,visibility 0s linear .45s!important;
  z-index:0!important;
}
.rd-shop-hs.is-active{
  position:absolute!important;
  inset:0!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:1!important;
  transition:opacity .45s ease,visibility 0s linear 0s!important;
}
.rd-shop-hs picture,
.rd-shop-hs img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
}
.rd-shop-hs img{
  object-fit:cover!important;
  object-position:center!important;
}
.rd-shop-hs::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.17) 58%,rgba(0,0,0,0) 82%);
  z-index:1;
}
.rd-shop-hero-copy{z-index:3!important}
.rd-shop-arrow,.rd-shop-dots{z-index:4!important}
.rd-shop-arrow{top:50%!important}

/* ---------- Every shop content slider gets exactly one scroll viewport ---------- */
.rd-shop-hero-slides,
.rd-shop-hero,
.rd-shop-categories .rd-slider,
.rd-shop-collection .rd-slider,
.rd-shop-inspiration .rd-slider{
  max-width:100%!important;
}
.rd-shop-categories .rd-slider,
.rd-shop-collection .rd-slider,
.rd-shop-inspiration .rd-slider{
  position:relative!important;
  min-width:0!important;
  overflow:visible!important;
}
.rd-shop-categories .rd-track,
.rd-shop-collection .rd-track,
.rd-shop-inspiration .rd-track{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  min-width:0!important;
  width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory!important;
  scroll-padding-inline:2px;
  scrollbar-width:none!important;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.rd-shop-categories .rd-track::-webkit-scrollbar,
.rd-shop-collection .rd-track::-webkit-scrollbar,
.rd-shop-inspiration .rd-track::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.rd-shop-categories .rd-track>.rd-slide,
.rd-shop-collection .rd-track>.product-card,
.rd-shop-collection .rd-track>.rd-slide,
.rd-shop-inspiration .rd-track>.rd-slide{
  flex-shrink:0!important;
  min-width:0!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:always;
}

/* Desktop: four cards, clean reserved arrow gutters */
.rd-shop-categories .rd-track>.rd-slide,
.rd-shop-collection .rd-track>.product-card,
.rd-shop-collection .rd-track>.rd-slide{
  flex-basis:calc((100% - 54px)/4)!important;
  width:calc((100% - 54px)/4)!important;
  max-width:calc((100% - 54px)/4)!important;
}
.rd-shop-inspiration .rd-track>.rd-slide{
  flex-basis:calc((100% - 36px)/3)!important;
  width:calc((100% - 36px)/3)!important;
  max-width:calc((100% - 36px)/3)!important;
}

/* Slider arrows never become a second horizontal scroll surface. */
.rd-shop-categories .rd-sl-btn,
.rd-shop-collection .rd-sl-btn,
.rd-shop-inspiration .rd-sl-btn{
  z-index:6!important;
  pointer-events:auto!important;
}

/* ---------- Shop sections ---------- */
.rd-shop-collection .rd-track>.product-card{height:auto!important;align-self:stretch}
.rd-shop-collection .rd-track>.product-card .pc-img{aspect-ratio:1/1!important}
.rd-shop-inspiration .rd-image-slide{height:auto!important;aspect-ratio:16/9!important}

/* ---------- Tablet ---------- */
@media(max-width:1000px){
  .rd-shop-categories .rd-track>.rd-slide,
  .rd-shop-collection .rd-track>.product-card,
  .rd-shop-collection .rd-track>.rd-slide{
    flex-basis:calc((100% - 36px)/3)!important;
    width:calc((100% - 36px)/3)!important;
    max-width:calc((100% - 36px)/3)!important;
  }
  .rd-shop-inspiration .rd-track>.rd-slide{
    flex-basis:calc((100% - 24px)/2)!important;
    width:calc((100% - 24px)/2)!important;
    max-width:calc((100% - 24px)/2)!important;
  }
}

/* ---------- Mobile: one primary card + a controlled preview, no cramped double row ---------- */
@media(max-width:700px){
  .rd-shop-hero-slides{aspect-ratio:16/9!important}
  .rd-shop-hs::after{background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.62))}
  .rd-shop-hero-copy{
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    top:auto!important;
    max-width:none!important;
    padding:14px!important;
    border-radius:15px!important;
    background:rgba(10,10,12,.48)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    backdrop-filter:blur(7px)!important;
  }
  .rd-shop-hero-copy h1{font-size:24px!important;line-height:1.08!important;margin:7px 0 8px!important}
  .rd-shop-hero-copy p{font-size:11px!important;line-height:1.45!important;margin-bottom:12px!important}
  .rd-shop-hero-actions{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .rd-shop-hero-actions .btn{min-height:40px!important;padding:8px 7px!important;font-size:10px!important}
  .rd-shop-arrow{width:34px!important;height:34px!important}
  .rd-shop-arrow.prev{left:9px!important}.rd-shop-arrow.next{right:9px!important}
  .rd-shop-dots{bottom:9px!important}

  .rd-shop-categories .rd-slider,
  .rd-shop-collection .rd-slider,
  .rd-shop-inspiration .rd-slider{padding-inline:0!important}
  .rd-shop-categories .rd-track,
  .rd-shop-collection .rd-track,
  .rd-shop-inspiration .rd-track{gap:12px!important;padding:5px 1px 18px!important;margin:0!important}

  .rd-shop-categories .rd-track>.rd-slide,
  .rd-shop-collection .rd-track>.product-card,
  .rd-shop-collection .rd-track>.rd-slide{
    flex-basis:calc(88% - 6px)!important;
    width:calc(88% - 6px)!important;
    max-width:calc(88% - 6px)!important;
  }
  .rd-shop-inspiration .rd-track>.rd-slide{
    flex-basis:88%!important;
    width:88%!important;
    max-width:88%!important;
  }
  .rd-shop-categories .rd-sl-btn,
  .rd-shop-collection .rd-sl-btn,
  .rd-shop-inspiration .rd-sl-btn{display:none!important}
}

@media(max-width:390px){
  .rd-shop-hero-copy h1{font-size:22px!important}
  .rd-shop-hero-copy p{font-size:10px!important}
  .rd-shop-hero-actions{grid-template-columns:1fr!important}
}

/* Prevent a slider from creating page-level horizontal overflow. */
body .rd-shop-hero,
body .rd-shop-categories,
body .rd-shop-collection,
body .rd-shop-inspiration{max-width:100%;min-width:0}

/* V4.7.4: Shop hero is artwork-only. The supplied mobile banners already contain
   their typography and CTA artwork, so never paint an HTML overlay, opacity layer,
   button, arrow or dot on top of them. */
.rd-shop-image-only .rd-shop-hs::after,
.rd-shop-image-only .rd-shop-hero-copy,
.rd-shop-image-only .rd-shop-arrow,
.rd-shop-image-only .rd-shop-dots{display:none!important}
.rd-shop-image-only .rd-shop-hero-slides{background:#f8f4ee!important}
.rd-shop-image-only .rd-shop-hs picture{position:absolute!important;inset:0!important}
.rd-shop-image-only .rd-shop-hs img{object-fit:cover!important;object-position:center!important}
@media(max-width:700px){
  .rd-shop-image-only .rd-shop-hero-slides{aspect-ratio:1122/1402!important}
  .rd-shop-image-only .rd-shop-hs img{object-fit:contain!important;background:#f8f4ee!important}
}