/* Shared storefront overlays. */
.storefront-body:has(dialog[open]){overflow:hidden}
.storefront-body dialog{max-width:none}
.storefront-body dialog:not(.storefront-image-dialog){overflow:hidden}
.storefront-body dialog:not(.storefront-image-dialog)>:first-child{
  margin:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
}
.storefront-body .shipment-tracking-dialog{max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem)}
.storefront-body .shipment-tracking-modal{max-height:inherit}

/* iOS must not magnify small form text when a field receives focus. */
@media(max-width:760px),(hover:none) and (pointer:coarse){
  .storefront-body :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),textarea,select,[contenteditable=true]){
    min-width:0;
    max-width:100%;
    font-size:max(16px,1rem)!important;
  }
  .product-image-open,.product-image-open>img,.storefront-image-stage,.storefront-image-stage>img{touch-action:pan-y}
}

@media(max-width:760px){
  .storefront-body dialog:not(.storefront-image-dialog){
    position:fixed;
    inset:auto 0 var(--storefront-overlay-bottom,0px);
    width:100%;
    max-width:100%;
    height:auto;
    min-height:0;
    max-height:92vh;
    max-height:var(--storefront-overlay-max-height,92dvh);
    margin:0;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:26px 26px 0 0;
    background:var(--surface);
    color:var(--ink);
  }
  .storefront-body dialog:not(.storefront-image-dialog)::backdrop{
    background:rgba(20,24,21,.58);
    backdrop-filter:blur(5px);
  }
  .storefront-body dialog:not(.storefront-image-dialog)>:first-child{
    height:auto;
    min-height:0;
    max-height:inherit;
    margin:0;
    overflow-x:hidden;
    overflow-y:auto;
    border:0;
    border-radius:inherit;
    padding-bottom:calc(1rem + env(safe-area-inset-bottom));
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scroll-padding-block:6rem calc(1.5rem + env(safe-area-inset-bottom));
  }
  .storefront-body dialog:not(.storefront-image-dialog)>:first-child>header{
    position:sticky;
    z-index:3;
    top:0;
    background:var(--surface);
  }
  .storefront-body dialog header>div,.storefront-body dialog header>span{min-width:0;overflow-wrap:anywhere}
  .storefront-body dialog header>button{flex-shrink:0}
  .storefront-body .review-modal-card>form{padding-bottom:1rem}
  .storefront-body .review-submit{position:static;transform:none}

  /* Menus, search and cart use the same sheet and scroll only their body. */
  .storefront-body .storefront-drawer{
    inset:auto 0 var(--storefront-overlay-bottom,0px);
    width:100%;
    height:auto;
    max-height:92vh;
    max-height:var(--storefront-overlay-max-height,92dvh);
    overflow:hidden;
    border-radius:26px 26px 0 0;
    transform:translateY(104%);
  }
  .storefront-body .storefront-drawer.is-open{transform:translateY(0)}
  .storefront-body .drawer-header,.storefront-body .drawer-footer,.storefront-body .shipping-progress{flex-shrink:0}
  .storefront-body .drawer-header{gap:.75rem}
  .storefront-body .drawer-header>div,.storefront-body .search-drawer-header label{min-width:0}
  .storefront-body .drawer-close{flex-shrink:0}
  .storefront-body .drawer-body{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
  .storefront-body .drawer-search .drawer-body{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
  .storefront-body .search-drawer-header kbd{display:none}
}

/* Product and customer photo previews share a screen-bounded viewer. */
.storefront-body .storefront-image-dialog{
  width:min(1100px,calc(100% - 2rem));
  height:min(860px,calc(100vh - 2rem));
  height:min(860px,calc(100dvh - 2rem));
  max-height:calc(100dvh - 2rem);
  margin:auto;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:26px;
  background:#141815;
  color:#fff;
}
.storefront-image-dialog::backdrop{background:rgba(12,18,16,.78);backdrop-filter:blur(7px)}
.storefront-image-dialog [hidden]{display:none!important}
.storefront-image-viewer{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.75rem;height:100%;min-height:0;padding:1rem}
.storefront-image-viewer>header{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.storefront-image-viewer>header strong{min-width:0;font-size:.9rem;overflow-wrap:anywhere}
.storefront-image-close,.storefront-image-nav{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid #ffffff57;border-radius:50%;background:#ffffff24;color:#fff;font:inherit;font-size:1.75rem;cursor:pointer}
.storefront-image-close:focus-visible,.storefront-image-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.storefront-image-stage{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden}
.storefront-image-stage>img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;border-radius:12px}
.product-image-open{position:relative;overflow:hidden}
.product-image-open>.storefront-swipe-preview,.storefront-image-stage>.storefront-swipe-preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:1}
.product-image-open>.storefront-swipe-preview{background:#fff}
.storefront-image-stage>.storefront-swipe-preview{background:#141815}
.storefront-image-nav{position:absolute;top:50%;transform:translateY(-50%);background:#141815b8;z-index:2}
.storefront-image-nav.previous{left:.25rem}
.storefront-image-nav.next{right:.25rem}
.storefront-image-viewer>p{min-height:1.2em;margin:0;text-align:center;font-size:.8rem}
@media(max-width:760px){
  .storefront-body .storefront-image-dialog{
    position:fixed;
    inset:auto 0 var(--storefront-overlay-bottom,0px);
    width:100%;
    height:92vh;
    height:var(--storefront-overlay-max-height,92dvh);
    max-height:92vh;
    max-height:var(--storefront-overlay-max-height,92dvh);
    margin:0;
    border-radius:26px 26px 0 0;
  }
  .storefront-image-viewer{padding:.85rem .75rem calc(.85rem + env(safe-area-inset-bottom))}
}

/* Companion to the head-time gesture guard. Its higher-specificity recovery
   rules let an already magnified browser pinch out without getting trapped. */
@media(max-width:760px),(hover:none) and (pointer:coarse){
  html,.storefront-body,.storefront-body *{touch-action:pan-x pan-y!important}
}