/* Mobile-only UX layer. Deliberately scoped below 760px so desktop styling remains untouched. */
@media (max-width: 760px) {
  :root { --mobile-nav-width: min(88vw, 380px); }
  html { overflow-x: clip; }
  body.mobile-menu-open { overflow: hidden; }

  .mobile-ux-rail {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .45rem .35rem .45rem .4rem;
    border: 1px solid rgba(213,220,226,.65);
    border-right: 0;
    border-radius: 1rem 0 0 1rem;
    background: rgba(17,47,71,.94);
    box-shadow: 0 12px 34px rgba(17,47,71,.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .mobile-ux-rail button {
    appearance: none;
    border: 0;
    min-width: 3.2rem;
    min-height: 3.2rem;
    padding: .45rem .35rem;
    border-radius: .75rem;
    background: transparent;
    color: #fff;
    font: 700 .62rem/1.05 var(--label, sans-serif);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
  }
  .mobile-ux-rail button:active { transform: scale(.96); }
  .mobile-ux-rail .mobile-ux-menu-button {
    background: #c21f35;
    box-shadow: 0 6px 14px rgba(194,31,53,.35);
  }
  .mobile-ux-rail .mobile-ux-icon {
    display: block;
    margin: 0 auto .25rem;
    font-size: 1.25rem;
    line-height: 1;
  }

  .mobile-ux-backdrop {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0,0,0,.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body.mobile-menu-open .mobile-ux-backdrop { opacity: 1; pointer-events: auto; }

  .mobile-ux-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--mobile-nav-width);
    max-width: 100%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    background: #f7f8fa;
    color: #112f47;
    box-shadow: -18px 0 50px rgba(17,47,71,.2);
    transform: translateX(102%);
    transition: transform .24s cubic-bezier(.2,.75,.25,1);
    overscroll-behavior: contain;
    padding: max(1rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom));
  }
  body.mobile-menu-open .mobile-ux-drawer { transform: translateX(0); }
  .mobile-ux-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #d5dce2;
  }
  .mobile-ux-drawer-brand { font: 700 .9rem/1.2 var(--label, sans-serif); text-transform: uppercase; letter-spacing: .08em; }
  .mobile-ux-close {
    appearance: none;
    border: 0;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: #112f47;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
  }
  .mobile-ux-drawer-scroll {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: .65rem 1rem 1.5rem;
  }
  .mobile-ux-section { border-bottom: 1px solid #d5dce2; padding: .55rem 0; }
  .mobile-ux-section h2 {
    margin: 0;
    padding: .65rem .1rem .4rem;
    font: 700 .8rem/1.2 var(--label, sans-serif);
    color: #637383;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mobile-ux-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.05rem;
    padding: .75rem .15rem;
    border-radius: .6rem;
    font-size: 1rem;
  }
  .mobile-ux-link:active { background: #e8edf1; }
  .mobile-ux-link .arrow { color: #c21f35; font-size: 1.15rem; }
  .mobile-ux-primary { font-weight: 700; }
  .mobile-ux-product-list { display: grid; gap: .25rem; padding-bottom: .35rem; }
  .mobile-ux-product-list a { font-size: .92rem; min-height: 2.8rem; }

  .mobile-ux-swipe-hint {
    display: flex;
    justify-content: center;
    gap: .5rem;
    align-items: center;
    margin: .55rem auto 0;
    color: #637383;
    font: 400 .7rem/1.3 var(--label, sans-serif);
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .mobile-swipe-gallery {
    display: flex !important;
    gap: .8rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: .1rem .05rem .5rem !important;
    margin-right: -7vw;
    padding-right: 7vw !important;
  }
  .mobile-swipe-gallery::-webkit-scrollbar { display: none; }
  .mobile-swipe-gallery .gallery-photo {
    flex: 0 0 min(86vw, 25rem) !important;
    scroll-snap-align: start;
    margin: 0 !important;
  }
  .mobile-swipe-gallery .gallery-photo img { width: 100%; height: auto; display: block; }

  [data-carousel].mobile-swipe-carousel { touch-action: pan-y pinch-zoom; }
  [data-carousel].mobile-swipe-carousel [data-carousel-slide] { touch-action: pan-y pinch-zoom; }

  @media (prefers-reduced-motion: reduce) {
    .mobile-ux-backdrop, .mobile-ux-drawer, .mobile-ux-rail { transition: none; }
  }
}