/* RTS beta28: tightly scoped mobile/catalog refinements. Loaded after beta27. */

/* 1. Mobile filters: the drawer is its own native scroll container. */
@media (max-width:900px) {
  html.rts-filter-scroll-locked { overflow:hidden!important; overscroll-behavior:none; }
  body.rts-filter-open { overflow:hidden!important; overscroll-behavior:none; }
  .rts-woocommerce-root .rts-shop-sidebar[data-rts-filter-sidebar] {
    position:fixed!important;
    top:0!important;
    bottom:auto!important;
    left:0!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:#acb9cb transparent;
    z-index:1102!important;
  }
  .rts-woocommerce-root .rts-shop-sidebar .rts-filter-mobile-head {
    position:sticky!important;
    top:-18px;
    z-index:5;
    padding:15px 0 12px;
    background:#f5f8fc;
  }
  body.rts-filter-open::after {z-index:1098!important;pointer-events:auto!important;}
}

/* 2. Two products on mobile, not oversized single-product promo cards. */
@media (max-width:640px) {
  .rts-woocommerce-root .rts-shop-main .woocommerce ul.products,
  .rts-woocommerce-root .rts-shop-main ul.products,
  .rts-woocommerce-root .rts-shop-layout ul.products {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  .rts-woocommerce-root .rts-shop-main ul.products > li.product {
    box-sizing:border-box!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:10px 9px 11px!important;
    border-radius:17px!important;
    overflow:hidden;
  }
  .rts-woocommerce-root .rts-shop-main ul.products li.product a img {
    box-sizing:border-box!important;
    height:clamp(115px,35vw,168px)!important;
    max-height:168px!important;
    width:100%!important;
    padding:8px!important;
    margin:0 0 10px!important;
    border-radius:12px!important;
    object-fit:contain!important;
  }
  .rts-woocommerce-root .rts-shop-main ul.products li.product .woocommerce-loop-product__title {
    font-size:12px!important;
    line-height:1.35!important;
    min-height:0!important;
    margin:2px 0 7px!important;
    overflow-wrap:anywhere;
  }
  .rts-woocommerce-root .rts-shop-main ul.products li.product .rts-loop-meta,
  .rts-woocommerce-root .rts-shop-main ul.products li.product .rts-loop-meta * {
    min-width:0!important;
    font-size:10.5px!important;
    line-height:1.35!important;
    overflow-wrap:anywhere;
  }
  .rts-woocommerce-root .rts-shop-main ul.products li.product .rts-loop-meta li {
    grid-template-columns:minmax(0,1fr)!important;
    gap:1px!important;
    padding:5px 0!important;
  }
  .rts-woocommerce-root .rts-shop-main ul.products li.product :is(.rts-loop-request-button,.button) {
    font-size:11px!important;
    min-height:39px!important;
    padding:8px 5px!important;
    border-radius:11px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
  .rts-woocommerce-root .rts-shop-main ul.products li.product .rts-product-collections {
    gap:4px!important;
  }
  .rts-woocommerce-root .rts-shop-main ul.products li.product .rts-product-collections button {
    width:29px!important;height:29px!important;min-width:29px!important;
    padding:5px!important;
  }
  .rts-woocommerce-root .rts-shop-main ul.products li.product .rts-loop-sku,
  .rts-woocommerce-root .rts-shop-main ul.products li.product .rts-loop-brand {
    font-size:10px!important;
  }
}
@media (max-width:360px) {
  .rts-woocommerce-root .rts-shop-main ul.products {gap:7px!important;}
  .rts-woocommerce-root .rts-shop-main ul.products>li.product {padding:8px 7px 10px!important;border-radius:15px!important;}
  .rts-woocommerce-root .rts-shop-main ul.products li.product .woocommerce-loop-product__title {font-size:11.5px!important;}
}

/* 3. Mobile service menu: visually attached to the actual hamburger, blur backdrop. */
@media (max-width:760px) {
  body.rts-utility-open::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:998;
    background:rgba(12,30,53,.30);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    pointer-events:none;
  }
  body.rts-utility-open .rts-v2-header {z-index:1001!important;}
  .rts-v2-header .rts-v2-mobile-utility:not([hidden]) {
    position:absolute!important;
    top:var(--rts-utility-menu-top,100%)!important;
    right:var(--rts-utility-menu-right,12px)!important;
    z-index:1205!important;
    max-height:min(75dvh,580px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    padding:15px!important;
    border:1px solid rgba(216,228,240,.9)!important;
    border-radius:20px!important;
    box-shadow:0 22px 65px rgba(17,43,75,.23)!important;
  }
  .rts-v2-header .rts-v2-mobile-utility__head {
    position:sticky;top:-15px;z-index:2;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:2px 0 12px;background:#fff;
    border-bottom:1px solid #edf2f8;margin-bottom:7px;
    font:750 15px/1.25 Onest,Manrope,Arial,sans-serif;
    color:#193450;
  }
  .rts-v2-header .rts-v2-mobile-utility__close {
    display:grid;place-items:center;flex:0 0 36px;
    width:36px;height:36px;
    border:0;border-radius:50%;background:#edf3fa;color:#29445e;
    font-size:24px;line-height:1;cursor:pointer;
  }
  .rts-v2-header .rts-v2-mobile-utility__close:hover,
  .rts-v2-header .rts-v2-mobile-utility__close:focus-visible {
    background:#0868f7;color:#fff;
  }
}

/* 4. A single full-height HERO image; remove the 25px bottom strip caused
      by the 520px legacy slider minimum versus the 495px beta23 slide. */
.rts-v2-hero .rts-hero-slider{min-height:0!important;background:transparent!important;border:0!important;}
.rts-v2-hero .rts-hero-slide{width:100%!important;box-sizing:border-box!important;}
@media (max-width:640px) {
  .rts-v2-hero .rts-hero-slider{min-height:0!important;}
  .rts-v2-hero .rts-hero-slide{min-height:520px!important;}
  .rts-v2-hero .rts-hero-slide::before {
    background-image:var(--rts-hero-mobile-image,var(--rts-hero-image));
    background-size:cover!important;
    background-position:72% center!important;
    bottom:0!important;
  }
  .rts-v2-hero .rts-hero-slide--light{background-color:#eaf4ff!important;}
}
@media (max-width:380px) {
  .rts-v2-hero .rts-hero-slide {min-height:535px!important;}
}
