/* Shipon Sarees R66 — mobile banner full-image + mobile Facebook post popup repair.
   Micro-patch only. Does not change React bundle, social service, token, DB or uploads. */

@media (max-width: 820px) {
  /* Top/home banner: let the real image determine the height so no part is cropped. */
  .v8-home .market-slider,
  .v8-home .market-slider.clean-image-slider {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  .v8-home .market-slider .market-slide {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    display: block !important;
    overflow: hidden !important;
  }
  .v8-home .market-slider .market-slide > img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
  }
  .v8-home .market-slider .market-slide > .img-fallback {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 210px !important;
    height: auto !important;
  }

  /* Middle banner gets the same no-crop treatment on phones. */
  .v8-home .lower-slider,
  .v8-home .lower-slider.lower-natural-ratio,
  .v8-home .lower-slider.clean-image-slider {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  .v8-home .lower-slider > img {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
  }
  .v8-home .lower-slider > .img-fallback {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 180px !important;
    height: auto !important;
  }

  /* Keep navigation inside the mobile banner bounds. */
  .v8-home .market-slider .slider-arrow,
  .v8-home .lower-slider .slider-arrow { z-index: 12 !important; }
  .v8-home .market-slider .slider-dots,
  .v8-home .lower-slider .slider-dots { z-index: 12 !important; }

  /* R66 mobile post popup: real viewport modal, above sticky/mobile UI. */
  #shipon-r66-mobile-post-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 2147483000 !important;
    display: none;
    grid-template-rows: auto minmax(0,1fr) auto;
    background: #fff;
    color: #17336f;
    overscroll-behavior: contain;
  }
  #shipon-r66-mobile-post-modal.open { display: grid !important; }
  #shipon-r66-mobile-post-modal .r66-head,
  #shipon-r66-mobile-post-modal .r66-foot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    background: #fff;
  }
  #shipon-r66-mobile-post-modal .r66-head {
    min-height: 56px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 8px;
    border-bottom: 1px solid #e8ebef;
  }
  #shipon-r66-mobile-post-modal .r66-head b {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
  }
  #shipon-r66-mobile-post-modal .r66-close {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #eef2f7;
    color: #17336f;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
  }
  #shipon-r66-mobile-post-modal .r66-body {
    position: relative;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #f4f6f8;
  }
  #shipon-r66-mobile-post-modal iframe {
    display: block;
    width: 100% !important;
    min-height: calc(100dvh - 118px);
    height: 100% !important;
    border: 0;
    background: #fff;
  }
  #shipon-r66-mobile-post-modal .r66-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    color: #667085;
    font-weight: 800;
    text-align: center;
    pointer-events: none;
  }
  #shipon-r66-mobile-post-modal .r66-foot {
    min-height: 54px;
    padding-top: 7px;
    padding-bottom: max(7px, env(safe-area-inset-bottom));
    border-top: 1px solid #e8ebef;
  }
  #shipon-r66-mobile-post-modal .r66-foot a,
  #shipon-r66-mobile-post-modal .r66-foot button {
    border: 0;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
  }
  #shipon-r66-mobile-post-modal .r66-foot a { background: #1877f2; color: #fff; }
  #shipon-r66-mobile-post-modal .r66-foot button { background: #eef2f7; color: #17336f; }
  html.shipon-r66-lock,
  html.shipon-r66-lock body { overflow: hidden !important; touch-action: none; }
}