/* ===== Form ===== */
.hts2-form{display:flex;gap:8px;margin:10px 0 20px}
.hts2-form input[type=text]{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:10px;font-size:14px}
.hts2-form button{padding:10px 14px;border:1px solid #ddd;border-radius:10px;background:#f5f5f5;cursor:pointer;transition:all .2s ease-in-out}
.hts2-form button:hover{background:#e6e6e6;border-color:#bbb}

/* ===== Meta ===== */
.hts2-meta{display:flex;gap:16px;align-items:center;margin:6px 0 10px;font-size:.95rem;color:#555}

/* ===== Grid (دعم احتياطي؛ الإجباري يُحقن Inline من الإضافة) ===== */
.hts2-grid ul.products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;margin:0;padding:0;list-style:none
}
.hts2-grid ul.products li.product{
  float:none;width:auto;margin:0;clear:none
}
@media (max-width:1024px){
  .hts2-grid ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .hts2-grid ul.products{grid-template-columns:1fr}
}

/* ===== Pagination (Woo-like) ===== */
.page-numbers{
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:16px
}
.page-numbers li{list-style:none}
.page-numbers a,.page-numbers span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;
  border:1px solid #ddd;border-radius:8px;background:#f9f9f9;color:#333;
  font-size:14px;font-weight:500;text-decoration:none;transition:all .2s ease-in-out
}
.page-numbers a:hover{background:#eee;border-color:#bbb;color:#000}
.page-numbers .current{background:#10382a;border-color:#10382a;color:#fff;font-weight:600}
.page-numbers .dots{background:transparent;border-color:transparent;color:#999;min-width:auto;padding:0 4px}
.page-numbers .prev,.page-numbers .next{padding:0 12px}

/* ===== Empty + Did-you-mean (مش المنسدلة) ===== */
.hts2-empty{margin:8px 0;color:#666}
.hts2-didyoumean{margin-top:6px}













/* الحاوية لازم تكون relative عشان الـ overlay يتموضع عليها */
.hts2-ac { position: relative; }

/* الصندوق كـ Overlay */
.hts2-suggest{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);

  /* أفقية */
  white-space: nowrap;
  overflow-x: auto;
  max-width: min(90vw, 640px);
}

/* العنصر */
.hts2-suggest__item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto; /* ما يتكسّرش */
}

.hts2-suggest__item:hover,
.hts2-suggest__item.is-active{
  background: #f3f4f6;
}

/* الصورة صغيرة وثابتة */
.hts2-suggest__item img{
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 auto;
}






/* Suggestions toggle */
.hts2-suggest[hidden]{ display:none !important; }

/* Vertical list (لـ live.js) */
.hts2-suggest .hts2-suggest-list{
  display:block; max-height:320px; overflow:auto;
  margin:0; padding:0; list-style:none; min-width:320px;
}
.hts2-suggest .hts2-suggest-item{ list-style:none; }
.hts2-suggest .hts2-suggest-item a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; text-decoration:none; color:inherit; border-radius:8px;
}
.hts2-suggest .hts2-suggest-item.active a,
.hts2-suggest .hts2-suggest-item a:hover{ background:#f3f4f6; }
.hts2-suggest .hts2-suggest-item img{
  width:40px; height:40px; object-fit:cover; flex:0 0 auto;
}
.hts2-suggest .hts2-suggest-item .t{ flex:1 1 auto; }
.hts2-suggest .hts2-suggest-item .p{ white-space:nowrap; }

/* List mode: نتائج البحث الرئيسية */
.hts2--list ul.products{ display:block; margin:0; padding:0; list-style:none; }
.hts2--list ul.products li.product{
  display:flex; align-items:center; gap:14px;
  padding:12px; margin:0 0 10px 0;
  border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  float:none; width:auto; clear:none;
}
.hts2--list ul.products li.product .woocommerce-LoopProduct-link img{
  width:90px; height:90px; object-fit:contain; margin:0;
}
.hts2--list ul.products li.product .woocommerce-LoopProduct-link{
  display:flex; align-items:center; gap:14px; text-decoration:none;
}
.hts2--list ul.products li.product .woocommerce-loop-product__title{
  font-size:15px; margin:0; line-height:1.35;
}
.hts2--list ul.products li.product .price{ margin-left:auto; font-weight:600; }
@media (max-width:600px){
  .hts2--list ul.products li.product{ flex-wrap:wrap; }
  .hts2--list ul.products li.product .price{ margin-left:0; }
}



.hts2-didyoumean{ margin-top:8px; color:#444 }
.hts2-didyoumean a{ text-decoration:underline }




/* نخلي الغلاف حوالين input بس */
.hts2-field { position: relative; display: block; flex: 1 1 auto; }

/* خلي المنسدل يتثبت تحت الحقل مباشرة وبعرض الحقل */
#hts2-header-sg {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-height: 320px;
  overflow: auto;
  z-index: 9999; /* عشان يطلع فوق الهيدر */
}

/* لو الهيدر عامل overflow hidden، شيله من عنصر الهيدر اللي مغلّف الفورم */




/* الغلاف حوالين الـinput */
#hts2-header-wrap .hts2-field{
  position: relative;
  display: block;
  /* لو عايز ياخد المساحة كلها جنب الزرار: */
  flex: 1 1 auto;
}

/* خليه بعرض مربع البحث: left/right=0 يعني يساوي عرض الغلاف */
#hts2-header-sg{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;                 /* يساوي عرض الـinput */
  box-sizing: border-box;
  background: #fff !important;
  border: 1px solid #e5e7eb;
  border-radius: 0px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  z-index: 9999;
  max-height: 350px;
  width: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: normal;
  padding: 4px 0;
  margin-top: 0px;
}

/* عناصر أصغر (خط وصورة) */
#hts2-header-sg .hts2-suggest-item a{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px;
  text-decoration:none; color:#111 !important; background:#fff !important;
  border-radius:8px;
}
#hts2-header-sg .hts2-suggest-item a:hover,
#hts2-header-sg .hts2-suggest-item.active a{
  background:#f3f4f6 !important;
}

#hts2-header-sg .hts2-suggest-item img{
  width:26px; height:26px; object-fit:cover; flex:0 0 auto; /* صورة أصغر */
}

#hts2-header-sg .hts2-suggest-item .t{
  flex:1 1 auto; font-size:12px; line-height:1.2; font-weight:500;   /* خط أصغر */
}
#hts2-header-sg .hts2-suggest-item .p{
  white-space:nowrap; font-size:12.5px; font-weight:600; /* سعر أصغر */
}