/* =========================================================
   JPA1981 — Phase 8.4 final UX hardening
   Scope: PDP modals/buttons/gallery + PLP/Search image/card stability.
   This file is intentionally loaded after old legacy CSS.
   ========================================================= */
:root{
  --jpa-red:#dc143c;
  --jpa-ink:#111827;
  --jpa-muted:#6b7280;
  --jpa-ring:#e5e7eb;
  --jpa-soft:#f8fafc;
  --jpa-radius:18px;
}
html,body{max-width:100%;overflow-x:hidden!important;}
img,video,canvas,svg{max-width:100%;}

/* PLP/Search guardrails */
.jpa-plp,.plp_container,[data-plp],#plp_container{max-width:100vw!important;overflow-x:clip!important;}
.plp-card{min-width:0!important;contain:layout paint;}
.plp-card .media,.plp-card .card-swiper,.plp-card .swiper-wrapper{min-width:0!important;max-width:100%!important;}
.plp-card img{display:block;max-width:100%;object-fit:cover;}

/* PDP gallery: thumbnails MUST stay at the right on desktop. */
@media (min-width: 992px){
  .product_page_gallery_container{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(96px,7vw,124px)!important;
    gap:clamp(14px,1.4vw,22px)!important;
    direction:ltr!important;
    align-items:start!important;
    width:100%!important;
    max-width:100%!important;
  }
  .main_image_gallery_container{
    grid-column:1!important;
    order:1!important;
    width:100%!important;
    margin:0!important;
    direction:rtl!important;
    min-width:0!important;
  }
  .thumbnail_gallery_container{
    grid-column:2!important;
    order:2!important;
    width:100%!important;
    max-height:min(74vh,820px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    margin:0!important;
    padding-inline:0!important;
    direction:rtl!important;
    scrollbar-gutter:stable;
  }
  .thumbnail_gallery_container .swiper-wrapper{
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    transform:none!important;
  }
  .thumbnail_card,
  .thumbnail_gallery_container .swiper-slide{
    width:100%!important;
    height:auto!important;
    margin:0!important;
    border-radius:14px!important;
    overflow:hidden!important;
    background:#f3f4f6!important;
  }
  .thumbnail_card img{width:100%!important;height:auto!important;aspect-ratio:3/4!important;object-fit:cover!important;}
  .main_image_gallery_container .swiper-slide img{width:100%!important;height:auto!important;object-fit:contain!important;border-radius:14px!important;}
}
@media (max-width:991px){
  .thumbnail_gallery_container{width:100%!important;display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;padding:8px 4px 10px!important;}
  .thumbnail_gallery_container .swiper-wrapper{display:flex!important;flex-direction:row!important;gap:8px!important;}
  .thumbnail_card,.thumbnail_gallery_container .swiper-slide{flex:0 0 72px!important;width:72px!important;margin:0!important;}
}

/* PDP size/add-to-basket modal — override legacy scattered styles. */
.chart_size_modal_container,
.basket_size_modal_container{
  position:fixed!important;
  inset:0!important;
  z-index:10050!important;
  display:none;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(10px,3vw,32px)!important;
  background:rgba(17,24,39,.58)!important;
  backdrop-filter:blur(3px);
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.chart_size_modal_container[style*="display: block"],
.basket_size_modal_container[style*="display: block"],
.chart_size_modal_container.is-open,
.basket_size_modal_container.is-open{display:flex!important;}
.chart_size_modal_content{
  width:min(96vw,1120px)!important;
  max-width:min(96vw,1120px)!important;
  max-height:min(92vh,900px)!important;
  margin:auto!important;
  border:0!important;
  border-radius:24px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:0 34px 100px rgba(15,23,42,.30)!important;
}
.chart_size_modal_body{
  margin:0!important;
  padding:clamp(14px,2vw,24px)!important;
  max-height:calc(92vh - 140px)!important;
  overflow:auto!important;
  text-align:center!important;
}
.chart_size_modal_header_row{
  margin:0!important;
  border-radius:0!important;
  min-height:150px!important;
  background-size:cover!important;
  background-position:center!important;
}
.product__addTO_basket_final,
#final_addTO_basket_btn.product__addTO_basket_final{
  width:100%!important;
  min-height:64px!important;
  height:auto!important;
  padding:14px 18px!important;
  margin:18px 0 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  background:linear-gradient(135deg,#dc143c,#ef3658)!important;
  color:#fff!important;
  border-radius:18px!important;
  position:sticky!important;
  bottom:0!important;
  right:auto!important;
  left:auto!important;
  box-shadow:0 18px 36px rgba(220,20,60,.24)!important;
  cursor:pointer!important;
}
.product__addTO_basket_final i,
.product__addTO_basket_final svg{flex:0 0 auto!important;}
.final_addTO_basket_btn,
.product__addTO_basket_final .final_addTO_basket_btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  color:#fff!important;
  font-size:clamp(16px,2.2vw,20px)!important;
  line-height:1.8!important;
  font-weight:800!important;
  text-align:center!important;
  white-space:normal!important;
}
@media (max-width:640px){
  .chart_size_modal_container,.basket_size_modal_container{align-items:flex-end!important;padding:0!important;}
  .chart_size_modal_content{width:100%!important;max-width:100%!important;max-height:92vh!important;border-radius:24px 24px 0 0!important;}
  .chart_size_modal_body{max-height:calc(92vh - 128px)!important;padding:14px!important;}
  .product__addTO_basket_final{border-radius:16px!important;margin-top:14px!important;min-height:60px!important;}
}

/* Out-of-stock unfortunate modal */
#error-box{
  position:fixed!important;
  inset:50% auto auto 50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(92vw,440px)!important;
  min-height:auto!important;
  height:auto!important;
  padding:clamp(22px,5vw,34px)!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 28px 90px rgba(15,23,42,.32)!important;
  z-index:10080!important;
  text-align:center!important;
}
#error-box .message{position:static!important;height:auto!important;margin:0!important;display:block!important;}
#error-box .message h1{font-size:clamp(24px,6vw,34px)!important;line-height:1.55!important;margin:0 0 14px!important;color:var(--jpa-ink)!important;font-weight:900!important;}
#error-box .message p{font-size:clamp(15px,4vw,20px)!important;line-height:1.9!important;margin:0 auto 22px!important;color:var(--jpa-red)!important;font-weight:700!important;max-width:32ch!important;}
#error-box .button-box{
  position:static!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  border-radius:0!important;
  background:transparent!important;
  display:flex!important;
  justify-content:center!important;
}
#error-box .button-box h5,
#error-box .button-box button,
#error-box .sm-primary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:min(100%,220px)!important;
  min-height:54px!important;
  padding:12px 24px!important;
  border-radius:14px!important;
  background:var(--jpa-red)!important;
  color:#fff!important;
  font-size:clamp(16px,4vw,20px)!important;
  font-weight:800!important;
  box-shadow:0 14px 30px rgba(220,20,60,.26)!important;
}