/* === Size Chart Popup Styles === */
.hnh-sizechart-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.6rem 1rem;border-radius:.5rem;border:1px solid #e5e7eb;
  background:#111827;color:#fff;font-weight:600;cursor:pointer;
  transition:transform .08s ease, opacity .2s ease;
}
.hnh-sizechart-btn:hover{opacity:.95}
.hnh-sizechart-btn:active{transform:scale(.98)}

.hnh-sizechart-modal{
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 24px);
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity .2s ease, visibility .2s ease;
}
.hnh-sizechart-modal[aria-hidden="true"]{
  visibility: hidden; opacity: 0; pointer-events: none;
}
.hnh-sizechart-backdrop{
  position: absolute; inset: 0; background: rgba(0,0,0,.5);
}
.hnh-sizechart-dialog{
  position: relative;
  width: min(880px, 100%);
  max-height: min(90vh, 100dvh - 2rem);
  background: #fff; border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  overflow: hidden; display: flex; flex-direction: column;
}
.hnh-sizechart-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid #f1f5f9;background:#f8fafc;
}
.hnh-sizechart-title{margin:0;font-size:18px;line-height:1.3;font-weight:700;color:#111827;}
.hnh-sizechart-close{background:transparent;border:0;font-size:24px;line-height:1;cursor:pointer;padding:6px;border-radius:8px;}
.hnh-sizechart-close:hover{background:#f3f4f6}
.hnh-sizechart-body{padding:16px;overflow:auto;}
.hnh-sizechart-body table{width:100%;border-collapse:collapse;margin:0;}
.hnh-sizechart-body table th,.hnh-sizechart-body table td{border:1px solid #e5e7eb;padding:8px;text-align:left;font-size:14px;}
.hnh-sizechart-body table th{background:#f9fafb;font-weight:700}
.hnh-sizechart-body img{max-width:100%;height:auto}

/* Mobile */
@media (max-width: 640px){
  .hnh-sizechart-dialog{
    border-radius:12px;
    max-height: calc(100dvh - 24px);
  }
  .hnh-sizechart-header{padding:12px}
  .hnh-sizechart-body{padding:12px}
}

/* Safe-area for iOS notch */
@supports (padding: max(0px)){
  .hnh-sizechart-modal{
    padding-left:  max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-top:   max(12px, env(safe-area-inset-top));
    padding-bottom:max(12px, env(safe-area-inset-bottom));
  }
}