/* OBSESSION V22.2.1 — notes, typography and stable lightbox */

/* ===== Readable typography on ALL product/catalog surfaces ===== */
.product-page-retail,
.product-page-retail button,
.product-page-retail input,
.product-page-retail select,
.product-page-retail textarea,
.product-card,
.product-card button,
.related-section,
.recommended-section,
.reviews-section{
  font-family:"Montserrat","Segoe UI",Arial,sans-serif!important;
}

.product-page-retail,
.product-page-retail p,
.product-page-retail li,
.product-page-retail .accordion-content,
.product-card,
.product-card-meta,
.product-card-subtitle,
.product-card-brand,
.product-card-collection{
  font-weight:500!important;
}

.product-page-retail h1,
.product-page-retail h2,
.product-page-retail h3,
.product-card-title,
.collection-card-title,
.brand-card-title{
  font-weight:600!important;
}

.product-retail-detail h1{
  font-family:"Cormorant Garamond",Georgia,serif!important;
  font-weight:600!important;
}

.product-description,
.product-retail-desc,
.product-description p,
.product-page-retail .accordion-content,
#product-details{
  font-size:15px!important;
  line-height:1.8!important;
  color:#51463d!important;
  font-weight:500!important;
}

.product-card-title{
  font-size:15px!important;
  line-height:1.45!important;
  font-weight:600!important;
}

.product-card-price,
.product-retail-price,
.variant-size-price,
.variant-size-main strong{
  font-weight:700!important;
}

.product-accordions-v17 .accordion>button{
  font-weight:600!important;
}

/* Arabic: real Arabic font + readable weight */
html[dir="rtl"] .product-page-retail,
html[dir="rtl"] .product-page-retail button,
html[dir="rtl"] .product-page-retail input,
html[dir="rtl"] .product-page-retail select,
html[dir="rtl"] .product-page-retail textarea,
html[dir="rtl"] .product-card,
html[dir="rtl"] .related-section,
html[dir="rtl"] .recommended-section,
html[dir="rtl"] .reviews-section{
  font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif!important;
}

html[dir="rtl"] .product-retail-detail h1,
html[dir="rtl"] .product-page-retail h1,
html[dir="rtl"] .product-page-retail h2,
html[dir="rtl"] .product-page-retail h3,
html[dir="rtl"] .product-card-title{
  font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif!important;
  font-weight:600!important;
  letter-spacing:0!important;
}

html[dir="rtl"] .product-description,
html[dir="rtl"] .product-retail-desc,
html[dir="rtl"] .product-page-retail .accordion-content,
html[dir="rtl"] #product-details,
html[dir="rtl"] .product-card{
  font-weight:500!important;
  line-height:1.95!important;
  letter-spacing:0!important;
}

/* ===== Notes: clear vertical pyramid instead of one long mixed line ===== */
#product-notes.obs-notes-rendered,
#product-notes{
  padding:4px 0 6px!important;
}

.obs-notes-list{
  display:flex;
  flex-direction:column;
  gap:11px;
  width:100%;
}

.obs-note-row{
  display:grid;
  grid-template-columns:145px minmax(0,1fr);
  align-items:start;
  gap:15px;
  padding:13px 14px;
  border:1px solid #e7ded2;
  border-radius:12px;
  background:#fff;
}

.obs-note-row-head{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:30px;
}

.obs-note-marker{
  flex:0 0 8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b58a48;
  box-shadow:0 0 0 4px rgba(181,138,72,.10);
}

.obs-note-row-head strong{
  color:#33271d;
  font-size:11px!important;
  line-height:1.45!important;
  letter-spacing:.07em;
  font-weight:700!important;
}

.obs-note-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.obs-note-chip{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:5px 9px;
  border:1px solid #eadfce;
  border-radius:999px;
  background:#faf6ef;
  color:#504337;
  font-size:12.5px!important;
  line-height:1.45!important;
  font-weight:500!important;
  white-space:normal;
}

html[dir="rtl"] .obs-note-row{
  grid-template-columns:135px minmax(0,1fr);
  direction:rtl;
}

html[dir="rtl"] .obs-note-row-head strong{
  font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif!important;
  font-size:12px!important;
  letter-spacing:0!important;
  font-weight:600!important;
}

html[dir="rtl"] .obs-note-chip{
  font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif!important;
  font-size:12.5px!important;
  font-weight:500!important;
  line-height:1.7!important;
}

.obs-notes-accordion>button span:first-child{
  font-weight:600!important;
}

/* ===== Lightbox: keep X visible; only image viewport is clipped ===== */
.obs-product-lightbox{
  z-index:5000!important;
}

.obs-product-lightbox-stage{
  overflow:visible!important;
  width:min(92vw,1180px)!important;
  height:min(88vh,900px)!important;
}

.obs-zoom-viewport{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#11100e;
}

.obs-zoom-viewport .obs-lightbox-zoom-target,
.obs-zoom-viewport>img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  background:#11100e!important;
  transform-origin:center center;
  transition:transform .13s ease;
  user-select:none;
  -webkit-user-drag:none;
  touch-action:none;
  cursor:zoom-in;
}

.obs-zoom-viewport .obs-lightbox-zoom-target.obs-zoomed{cursor:grab}
.obs-zoom-viewport .obs-lightbox-zoom-target.obs-dragging{
  cursor:grabbing;
  transition:none;
}

/* The old V22.2 put overflow:hidden on the entire stage. Undo it. */
.obs-product-lightbox-stage.obs-lightbox-zoom-wrap{
  overflow:visible!important;
}

/* Close is always outside the image, fixed to the screen. */
.obs-product-lightbox .obs-product-lightbox-close{
  position:fixed!important;
  top:18px!important;
  right:18px!important;
  left:auto!important;
  z-index:5005!important;
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  border:1px solid rgba(255,255,255,.45)!important;
  border-radius:50%!important;
  background:rgba(24,20,17,.92)!important;
  color:#fff!important;
  font:600 25px/1 Arial,sans-serif!important;
  cursor:pointer!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  transform:none!important;
}

html[dir="rtl"] .obs-product-lightbox .obs-product-lightbox-close{
  right:auto!important;
  left:18px!important;
}

.obs-product-lightbox .obs-product-lightbox-close:hover{
  background:#fff!important;
  color:#211b16!important;
}

/* Zoom controls don't overlap X */
.obs-lightbox-toolbar{
  position:fixed!important;
  top:18px!important;
  left:18px!important;
  right:auto!important;
  z-index:5004!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:7px!important;
  border-radius:999px!important;
  background:rgba(24,20,17,.88)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.24)!important;
}

html[dir="rtl"] .obs-lightbox-toolbar{
  left:auto!important;
  right:18px!important;
}

.obs-lightbox-btn{
  min-width:38px!important;
  height:38px!important;
  padding:0 11px!important;
  border:1px solid rgba(255,255,255,.17)!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#fff!important;
  font-family:"Montserrat","Noto Kufi Arabic",Arial,sans-serif!important;
  font-size:13px!important;
  font-weight:600!important;
  cursor:pointer!important;
}

.obs-lightbox-reset{min-width:62px!important}

.obs-lightbox-zoom-label{
  min-width:50px;
  text-align:center;
  color:#fff;
  font-size:12px;
  font-weight:600;
}

.obs-product-lightbox-prev,
.obs-product-lightbox-next{
  z-index:5003!important;
}

/* Remove the old stuck tooltip added by V22.2 */
.obs-lightbox-tip{display:none!important}

@media(max-width:760px){
  .obs-note-row{
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:12px!important;
  }
  .obs-note-row-head{min-height:auto}
  .obs-product-lightbox{padding:56px 10px 22px!important}
  .obs-product-lightbox-stage{
    width:100%!important;
    height:calc(100vh - 90px)!important;
  }
  .obs-product-lightbox .obs-product-lightbox-close{
    top:10px!important;
    right:10px!important;
    width:40px!important;
    height:40px!important;
  }
  html[dir="rtl"] .obs-product-lightbox .obs-product-lightbox-close{
    right:auto!important;
    left:10px!important;
  }
  .obs-lightbox-toolbar{
    top:10px!important;
    left:10px!important;
    padding:5px!important;
  }
  html[dir="rtl"] .obs-lightbox-toolbar{
    left:auto!important;
    right:10px!important;
  }
  .obs-lightbox-btn{
    min-width:32px!important;
    height:32px!important;
    padding:0 8px!important;
    font-size:11px!important;
  }
  .obs-lightbox-reset{min-width:50px!important}
  .obs-lightbox-zoom-label{min-width:42px;font-size:11px}
}