/* ==========================================================
   Maline Shop — editorial product viewer v2
   Modal-only redesign. The product list, cart and checkout are untouched.
   ========================================================== */

/* Full viewport split: product imagery left, purchase information right. */
.shop-product-modal .shop-product-panel--editorial{
  width:100%;
  height:100dvh;
  max-height:none;
  display:grid;
  grid-template-columns:minmax(0,62vw) minmax(26rem,38vw);
  overflow:hidden;
  border:0;
  border-radius:0;
  background:var(--paper);
  box-shadow:none;
}

.shop-product-modal .shop-modal-close{
  position:fixed;
  top:clamp(1rem,2vw,1.5rem);
  right:clamp(1rem,2vw,1.5rem);
  z-index:30;
  width:3.6rem;
  height:3.6rem;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--ink);
  border-radius:50%;
  background:var(--paper);
  color:var(--ink);
  font-size:1.25rem;
  line-height:1;
}

/* -----------------------------------------
   Image side
   ----------------------------------------- */
.shop-product-modal .shop-modal-media--editorial{
  position:relative;
  min-width:0;
  min-height:0;
  height:100dvh;
  overflow:hidden;
  border-right:1px solid var(--line);
  background:#d8d7d2;
}

.shop-product-modal .shop-gallery-viewport{
  position:absolute;
  inset:0 0 4.6rem;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  background:#d8d7d2;
}

.shop-product-modal .shop-gallery-viewport::-webkit-scrollbar{
  display:none;
}

.shop-product-modal .shop-gallery-track{
  height:100%;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
}

.shop-product-modal .shop-gallery-slide{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  display:grid;
  place-items:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
  padding:clamp(1.5rem,3.2vw,3.2rem);
  background:#d8d7d2;
}

.shop-product-modal .shop-gallery-slide:nth-child(even){
  background:#e2dfd8;
}

/* This is the key rule: image is sized BY HEIGHT and is never cropped. */
.shop-product-modal .shop-gallery-slide img{
  position:relative!important;
  inset:auto!important;
  display:block;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:calc(100dvh - 9.2rem)!important;
  object-fit:contain!important;
  object-position:center!important;
  z-index:2;
}

.shop-product-modal .shop-gallery-slide-fallback{
  position:absolute;
  inset:clamp(1.5rem,3.2vw,3.2rem);
  display:grid;
  place-items:center;
  border:1px solid rgba(17,17,15,.16);
  color:rgba(17,17,15,.18);
  font-size:clamp(7rem,18vw,18rem);
  font-weight:900;
  letter-spacing:-.1em;
}

.shop-product-modal .shop-gallery-slide.is-missing img{
  display:none!important;
}

/* Controls live outside the artwork instead of floating over the photograph. */
.shop-product-modal .shop-gallery-footer{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:8;
  height:4.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 clamp(1.1rem,2vw,1.65rem);
  border-top:1px solid var(--line);
  background:var(--paper);
}

.shop-product-modal .shop-gallery-count{
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}

.shop-product-modal .shop-gallery-controls{
  display:flex;
  gap:.45rem;
}

.shop-product-modal .shop-gallery-nav{
  width:2.8rem;
  height:2.8rem;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--ink);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  font-size:1rem;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}

.shop-product-modal .shop-gallery-nav:hover{
  background:var(--ink);
  color:var(--paper);
}

.shop-product-modal .shop-gallery-nav[hidden]{
  display:none!important;
}

/* -----------------------------------------
   Copy side
   ----------------------------------------- */
.shop-product-modal .shop-modal-copy--editorial{
  min-width:0;
  height:100dvh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:3rem;
  padding:
    clamp(6.5rem,8vw,8.2rem)
    clamp(2rem,3.5vw,4.2rem)
    clamp(2rem,3vw,3.4rem);
  background:var(--paper);
  scrollbar-width:thin;
}

.shop-product-modal .shop-modal-copy--editorial h2{
  max-width:8.7ch;
  margin:.85rem 0 0;
  font-size:clamp(4.25rem,6.7vw,7rem);
  line-height:.78;
  letter-spacing:-.068em;
}

.shop-product-modal .shop-modal-copy--editorial .shop-modal-price{
  margin-top:1.75rem;
  font-size:clamp(1.35rem,1.7vw,1.65rem);
}

.shop-product-modal .shop-modal-copy--editorial .shop-modal-description{
  max-width:31rem;
  margin-top:1.65rem;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.55;
}

.shop-product-modal .shop-modal-purchase{
  max-width:32rem;
}

.shop-product-modal .shop-option-wrap{
  margin-top:0;
}

.shop-product-modal .shop-options{
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
}

.shop-product-modal .shop-option{
  min-width:3.15rem;
  min-height:3.15rem;
  border-radius:0;
}

.shop-product-modal .shop-quantity{
  width:max-content;
  margin-top:1.25rem;
  border-radius:0;
}

.shop-product-modal .shop-add-button{
  width:100%;
  min-height:3.4rem;
  margin-top:1.25rem;
  justify-content:center;
  border-radius:999px;
}

.shop-product-modal .shop-direct-contact-note{
  margin-top:1.05rem;
}

/* -----------------------------------------
   Tablet
   ----------------------------------------- */
@media (max-width:1080px) and (min-width:761px){
  .shop-product-modal .shop-product-panel--editorial{
    grid-template-columns:minmax(0,56vw) minmax(24rem,44vw);
  }

  .shop-product-modal .shop-modal-copy--editorial{
    padding-left:2rem;
    padding-right:2rem;
  }

  .shop-product-modal .shop-modal-copy--editorial h2{
    font-size:clamp(3.75rem,7vw,5.7rem);
  }
}

/* -----------------------------------------
   Mobile
   ----------------------------------------- */
@media (max-width:760px){
  .shop-product-modal{
    overflow:hidden;
  }

  .shop-product-modal .shop-product-panel--editorial{
    display:block;
    height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
  }

  .shop-product-modal .shop-modal-close{
    position:fixed;
    width:3rem;
    height:3rem;
    top:max(.85rem,env(safe-area-inset-top));
    right:max(.85rem,env(safe-area-inset-right));
  }

  .shop-product-modal .shop-modal-media--editorial{
    width:100%;
    height:min(76dvh,44rem)!important;
    min-height:0!important;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .shop-product-modal .shop-gallery-viewport{
    inset:0 0 4rem;
  }

  .shop-product-modal .shop-gallery-slide{
    padding:
      max(4.25rem,calc(env(safe-area-inset-top) + 3.25rem))
      1rem
      1rem;
  }

  .shop-product-modal .shop-gallery-slide img{
    max-width:100%!important;
    max-height:calc(min(76dvh,44rem) - 9rem)!important;
  }

  .shop-product-modal .shop-gallery-footer{
    height:4rem;
    padding-inline:1rem;
  }

  .shop-product-modal .shop-gallery-nav{
    width:2.55rem;
    height:2.55rem;
  }

  .shop-product-modal .shop-modal-copy--editorial{
    width:100%;
    height:auto;
    min-height:auto;
    overflow:visible;
    gap:2.5rem;
    padding:2.2rem 1.1rem 3rem;
  }

  .shop-product-modal .shop-modal-copy--editorial h2{
    max-width:9ch;
    font-size:clamp(3.5rem,15vw,5.6rem);
  }

  .shop-product-modal .shop-modal-purchase{
    max-width:none;
  }
}

@media (max-width:420px){
  .shop-product-modal .shop-modal-media--editorial{
    height:70dvh!important;
  }

  .shop-product-modal .shop-gallery-slide img{
    max-height:calc(70dvh - 8.5rem)!important;
  }

  .shop-product-modal .shop-modal-copy--editorial h2{
    font-size:clamp(3.25rem,16vw,5rem);
  }
}

@media (prefers-reduced-motion:reduce){
  .shop-product-modal .shop-gallery-viewport{
    scroll-behavior:auto!important;
  }
}