/* Ramki Cards - mobile HOMEPAGE product grids only.
   Loaded after the locked carousel stylesheet; desktop/tablet remain unchanged. */
.rc-new .rc-mobile-view-all { display: none; }

@media (max-width: 699px) {
  /* Product section tracks are complete two-column, multi-row grids.
     Other sliders (categories, Latest Stories, Wedding Moments) are untouched. */
  html body main.rc-new .rc-scroll-shell:has(> .rc-scroll-track.rc-product-row) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  html body main.rc-new .rc-scroll-shell > .rc-scroll-track.rc-product-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    column-gap: 12px !important;
    row-gap: 18px !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    overscroll-behavior: auto !important;
    transform: none !important;
  }
  html body main.rc-new .rc-scroll-shell > .rc-scroll-track.rc-product-row > article.rc-product {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    align-self: stretch !important;
    scroll-snap-align: none !important;
    margin: 0 !important;
  }
  html body main.rc-new .rc-scroll-shell:has(> .rc-scroll-track.rc-product-row) > .rc-scroll-arrow {
    display: none !important;
  }
  /* Keep the catalogue title above its cards instead of beside them on mobile. */
  html body main.rc-new .rc-catalogue-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  html body main.rc-new .rc-catalogue-layout > .rc-catalogue-label {
    padding-top: 0 !important;
  }
  html body main.rc-new .rc-catalogue-label h2 { margin-bottom: 0 !important; }
  html body main.rc-new .rc-catalogue-products { min-width: 0 !important; width: 100% !important; }
  /* Move the existing, admin-configured link below all cards on mobile. */
  html body main.rc-new .rc-mobile-view-all {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 20px 0 4px !important;
  }
  html body main.rc-new .rc-mobile-view-all[hidden] { display: none !important; }
  html body main.rc-new .rc-mobile-view-all > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 280px) !important;
    min-height: 43px !important;
    padding: 10px 22px !important;
    border: 1px solid #7b102a !important;
    border-radius: 4px !important;
    background: #7b102a !important;
    color: #fff !important;
    text-align: center !important;
    text-decoration: none !important;
    font: 600 13px/1.4 'Lato', Arial, sans-serif !important;
  }
  html body main.rc-new .rc-mobile-view-all > a:focus-visible {
    outline: 2px solid #7b102a !important;
    outline-offset: 3px !important;
  }
}

/* Mobile homepage product cards: hide gallery image arrows, including touch
   devices where the locked gallery stylesheet displays them by default.
   Desktop card gallery navigation and section carousel controls stay intact. */
@media (max-width: 699px) {
  html body main.rc-new .rc-product-row .rc-product-media > .rc-gallery-arrow,
  html body main.rc-new .rc-product-row .rc-product-media:hover > .rc-gallery-arrow,
  html body main.rc-new .rc-product-row .rc-product-media:focus-within > .rc-gallery-arrow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}