/* Hide scrollbar for product sliders but keep functionality */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #458500;
}

/* Truncate text to 2 lines */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* Bilingual switch (used in index.php) */
.lang-en { display: none; }
body[data-lang="en"] .lang-ar { display: none; }
body[data-lang="en"] .lang-en { display: inline; }

/* Language buttons colors */
.bg-iherb-blue { background-color: #1F2743 !important; }
.bg-iherb-light { background-color: #F5F6F8 !important; }
.text-iherb-dark { color: #1F2743 !important; }
.text-white { color: #ffffff !important; }
.bg-iherb-green { background-color: #3CB371 !important; }
.text-iherb-green { color: #3CB371 !important; }

/* Products tiles (rendered by app.js) */
.product-tile{
  background:#fff;
  border:1px solid rgba(184,165,140,.45);
  border-radius:20px;
  padding:14px;
  box-shadow: 0 8px 22px rgba(2,6,23,.05);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height: 280px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.product-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
  border-color: rgba(31,39,67,.25);
}
.product-tile__imgWrap{
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(31,39,67,.06), rgba(60,179,113,.06));
  border:1px solid rgba(184,165,140,.25);
}
.product-tile__img{
  width:100%;
  height:160px;
  object-fit:cover;
}
.product-tile__name{
  font-weight:950;
  color:#222222;
  line-height:1.4;
  text-decoration:none;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  line-clamp:2;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height: 40px;
}
.product-tile__priceRow{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:12px;
}
.product-tile__price{
  font-weight:1100;
  color:#1F2743;
  font-size:22px;
  letter-spacing:-.2px;
}
.product-tile__old{
  color:#6B7280;
  font-weight:800;
  text-decoration:line-through;
  font-size:14px;
}
.product-tile__btn{
  margin-top:auto;
  border:1px solid rgba(31,39,67,.15);
  background:#1F2743;
  color:#fff;
  font-weight:950;
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.product-tile__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(31,39,67,.20);
  background:#4A90E2;
  border-color: rgba(74,144,226,.35);
}

/* Product details page */
.pd-zoomWrap{
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.pd-zoomMain{
  position:relative;
  width:100%;
  max-width:540px;
  border-radius:18px;
  overflow:hidden;
}
.pd-zoomMain__img{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
}
.pd-lens{
  position:absolute;
  display:none;
  width:140px;
  height:140px;
  background:rgba(31,39,67,.08);
  border:2px solid rgba(184,165,140,.75);
  box-shadow: 0 10px 24px rgba(31,39,67,.18);
  pointer-events:none;
}
.pd-zoomPreview{
  width:260px;
  height:260px;
  border-radius:18px;
  border:1px solid rgba(184,165,140,.35);
  overflow:hidden;
  background:linear-gradient(135deg, rgba(31,39,67,.04), rgba(60,179,113,.06));
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease;
}
.pd-zoomPreview__img{
  width:100%;
  height:100%;
  object-fit:none;
  transform-origin: top left;
  will-change: transform, object-position;
}
.pd-thumbBtn{
  border:1px solid rgba(184,165,140,.35);
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  padding:0;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pd-thumbBtn__img{
  width:100%;
  height:70px;
  object-fit:cover;
  display:block;
}
.pd-thumbBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(31,39,67,.35);
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.pd-thumbBtn.is-active{
  border-color: rgba(31,39,67,.55);
  box-shadow: 0 18px 34px rgba(31,39,67,.12);
}

@media (max-width: 767px){
  .pd-zoomWrap{ gap:12px; }
  .pd-zoomPreview{ display:none; }
  .pd-zoomMain__img{ height:300px; }
  .pd-lens{ display:none !important; }
}

.pd-factsTable{
  width:100%;
  border-collapse:collapse;
}
.pd-factsTable__th{
  text-align:right;
  font-size:13px;
  color:#222;
  padding:12px 10px;
  border-bottom:1px solid rgba(184,165,140,.35);
  background:rgba(245,246,248,.7);
}
.pd-factsTable__td{
  padding:12px 10px;
  border-bottom:1px solid rgba(184,165,140,.25);
  color:#222;
  font-size:13px;
}
.pd-factsTable__amt{
  font-weight:900;
  color:#1F2743;
}

.pd-warningBox{
  margin-top: 18px;
  border:1px solid rgba(229,115,115,.55);
  background: rgba(229,115,115,.08);
  border-radius:18px;
  padding:14px;
}

.pd-faqList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pd-faqItem{
  border:1px solid rgba(184,165,140,.35);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.pd-faqBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  background:#fff;
  cursor:pointer;
  border:0;
  text-align:right;
}
.pd-faqQ{
  font-weight:900;
  color:#1F2743;
}
.pd-faqIcon{
  color:#1F2743;
  transition: transform .15s ease;
}
.pd-faqPanel{
  max-height:0;
  overflow:hidden;
  transition: max-height .2s ease;
}
.pd-faqPanel.is-open{
  max-height:220px;
}
.pd-faqA{
  padding:0 14px 14px 14px;
  color:#222;
  line-height:1.6;
  font-size:13px;
}

/* Reviews */
.pd-reviewCard{
  border:1px solid rgba(184,165,140,.35);
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow: 0 10px 24px rgba(2,6,23,.04);
}

/* Toast */
.pd-note{
  border-radius:16px;
  background: rgba(31,39,67,.08);
  border:1px solid rgba(31,39,67,.18);
  color:#1F2743;
  font-weight:900;
  padding:10px 12px;
}
.pd-note--show{
  animation: pdToastPop .22s ease;
}
@keyframes pdToastPop{
  from { transform: translateY(6px); opacity: .3; }
  to { transform: translateY(0); opacity: 1; }
}