/* لون SANAD المميز: يستخدم للعناصر التفاعلية فقط، بينما يبقى المحتوى أبيض وأسود. */
:root{--sanad-accent:#0f6b57;--sanad-accent-strong:#084c3d;--sanad-sale:#b42318}

/* أزرار الشراء والإجراءات الأساسية */
.btn,.empty a,.wa,.button{background:var(--sanad-accent)!important;color:#fff!important;border-color:var(--sanad-accent)!important}
.btn:hover,.btn:focus,.btn:active,.empty a:hover,.empty a:focus,.empty a:active,.wa:hover,.wa:focus,.wa:active,.button:hover,.button:focus{background:var(--sanad-accent-strong)!important;color:#fff!important;border-color:var(--sanad-accent-strong)!important}
.btn.add-secondary{background:#fff!important;color:var(--sanad-accent)!important;border-color:var(--sanad-accent)!important}
.btn.add-secondary:hover,.btn.add-secondary:focus{background:var(--sanad-accent)!important;color:#fff!important;border-color:var(--sanad-accent)!important}

/* حالات المنتج والتنبيهات */
.badge.new,.stock-state:not(.unavailable),.count,.toast{background:var(--sanad-accent)!important;color:#fff!important;border-color:var(--sanad-accent)!important}
.badge.sale,.saving{background:var(--sanad-sale)!important;color:#fff!important;border-color:var(--sanad-sale)!important}
.del-btn{color:var(--sanad-sale)!important}
.ph .badge,.ph.big .badge{font:600 11px/1.4 'Segoe UI',Tahoma,Arial,sans-serif;max-width:calc(100% - 20px);padding:4px 10px;z-index:1}

/* حالات الاختيار والتركيز فقط */
.product-thumbs button.active,.product-thumbs button:hover{border-color:var(--sanad-accent)!important}
.csel button.on{box-shadow:0 0 0 2px var(--sanad-accent)!important}
.quantity-picker button:hover,.gallery-nav:hover{background:var(--sanad-accent)!important;color:#fff!important;border-color:var(--sanad-accent)!important}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--sanad-accent)!important;outline-offset:2px}

/* Shop toolbar: identical layout in both languages. */
.page-shop .toolbar{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:28px!important;padding-bottom:16px;border-bottom:1px solid #000}
.page-shop .toolbar .filter-toggle{grid-column:1;grid-row:1}
.page-shop .toolbar #sort{grid-column:2;grid-row:1;width:100%;min-width:0;margin:0!important}
.page-shop .toolbar #showing{grid-column:3;grid-row:1;justify-self:end;margin:0!important;white-space:nowrap}
@media(max-width:600px){
  .page-shop .toolbar{gap:10px;margin-bottom:24px!important;padding-bottom:14px}
  .page-shop .toolbar #showing{font-size:12px}
}
@media(max-width:380px){
  .page-shop .toolbar{grid-template-columns:auto minmax(0,1fr)}
  .page-shop .toolbar #showing{grid-column:1 / -1;grid-row:2;justify-self:start}
}

/* Directional form controls. */
html[dir="rtl"] .page-shop .toolbar{direction:rtl}
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"]{direction:ltr;text-align:start}

/* عند وجود منتج واحد، يظهر ككارت متوازن في المنتصف بدل مساحة فارغة كبيرة. */
@media(max-width:600px){
  .page-shop .shop-main .grid:has(.card:only-child){grid-template-columns:minmax(0,280px)!important;justify-content:center}
  .page-shop .shop-main .grid:has(.card:only-child) .card{width:100%}
}

/* يمنع الفوتر وعدّاد السلة من إضافة عرض خفي خارج شاشة الموبايل. */
@media(max-width:600px){
  #chrome-bottom .ftr{box-sizing:border-box!important;padding:36px 16px!important;overflow:hidden!important}
  #chrome-bottom .fgrid{display:grid!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;grid-template-columns:minmax(0,1fr)!important;gap:22px!important}
  #chrome-bottom .fgrid>*{width:100%!important;min-width:0!important;max-width:100%!important}
  #chrome-bottom .fgrid h4,#chrome-bottom .fgrid p,#chrome-bottom .fgrid a{max-width:100%!important;overflow-wrap:anywhere!important}
  #chrome-bottom .nform{width:100%!important;min-width:0!important}
  #chrome-bottom .nform input{min-width:0!important;width:100%!important}
}


/* Same floating action size and shape on every storefront page. */
body .wa{display:flex;align-items:center;gap:8px;min-height:44px;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:999px;font:600 14px/1.4 'Segoe UI',Tahoma,Arial,sans-serif;bottom:calc(16px + env(safe-area-inset-bottom));inset-inline-end:16px;letter-spacing:normal}
body .wa .wa-icon{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px}
body .wa .wa-icon svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){body .wa>span:not(.wa-icon){display:none}body .wa{justify-content:center;width:48px;min-width:48px;height:48px;min-height:48px;padding:0;bottom:calc(12px + env(safe-area-inset-bottom));inset-inline-end:14px}}

/* Social footer: Facebook is the only active social destination. */
#chrome-bottom .social{display:flex!important;align-items:center;gap:0!important;filter:none!important}
#chrome-bottom .social .facebook-link{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;width:24px;height:24px;padding:0;color:#1877f2!important;filter:none!important;cursor:pointer;transition:color .16s ease;border-radius:0}
#chrome-bottom .social .facebook-link svg{display:block;width:24px;height:24px;fill:currentColor;stroke:none}
#chrome-bottom .social .facebook-link:hover,#chrome-bottom .social .facebook-link:focus-visible{background:transparent!important;color:#0b5fc6!important;transform:none}

/* Professional SANAD footer — shared by every storefront page. */
#chrome-bottom .ftr{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:56px max(24px,calc((100vw - 1300px)/2)) 52px!important;
  background:#fff!important;
  color:#000!important;
  border-top:2px solid #000!important;
  border-bottom:0!important;
}
#chrome-bottom .fgrid{
  display:grid!important;
  grid-template-columns:1.42fr .9fr 1.06fr 1.06fr 1.24fr!important;
  align-items:start!important;
  gap:32px clamp(28px,4vw,68px)!important;
  width:100%!important;
  max-width:1240px!important;
  margin:0 auto!important;
}
#chrome-bottom .fgrid>div{display:flex!important;min-width:0!important;flex-direction:column!important;align-items:flex-start!important;text-align:start!important}
#chrome-bottom .fgrid h4{
  margin:0 0 16px!important;
  color:#000!important;
  font:700 17px/1.25 Georgia,'Times New Roman',serif!important;
  letter-spacing:.01em!important;
}
#chrome-bottom .fgrid>div:first-child h4{font-size:22px!important;letter-spacing:.04em!important}
#chrome-bottom .fgrid p{
  max-width:29ch!important;
  margin:0 0 5px!important;
  color:#404040!important;
  font:400 13.5px/1.75 'Segoe UI',Tahoma,Arial,sans-serif!important;
  letter-spacing:normal!important;
}
#chrome-bottom .fgrid a:not(.facebook-link){
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0!important;
  padding:5px 0!important;
  color:#333!important;
  font:400 13.5px/1.45 'Segoe UI',Tahoma,Arial,sans-serif!important;
  opacity:1!important;
  text-decoration:none!important;
  transition:color .16s ease!important;
}
#chrome-bottom .fgrid a:not(.facebook-link)::before{display:none!important}
#chrome-bottom .fgrid a:not(.facebook-link):hover,#chrome-bottom .fgrid a:not(.facebook-link):focus-visible{color:#0f6b57!important;transform:none}
#chrome-bottom .fgrid>div:last-child h4:nth-of-type(2){margin-top:18px!important}
#chrome-bottom .nform{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:310px!important;
  min-height:46px!important;
  gap:0!important;
  overflow:hidden!important;
  border:1px solid #000!important;
  border-radius:999px!important;
  background:#fff!important;
}
#chrome-bottom .nform input{
  min-width:0!important;
  height:44px!important;
  padding:0 15px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:#fff!important;
  color:#000!important;
  font:400 13px/1.2 'Segoe UI',Tahoma,Arial,sans-serif!important;
}
#chrome-bottom .nform .btn{
  width:auto!important;
  min-width:88px!important;
  margin:3px!important;
  padding:0 16px!important;
  border:0!important;
  border-radius:999px!important;
  background:#0f6b57!important;
  color:#fff!important;
  font:700 13px/1 'Segoe UI',Tahoma,Arial,sans-serif!important;
  letter-spacing:normal!important;
}
#chrome-bottom .nform .btn:hover,#chrome-bottom .nform .btn:focus-visible{background:#084c3d!important;color:#fff!important}
#chrome-bottom .social{min-height:32px!important;margin:0 0 4px!important}

@media(max-width:1050px){
  #chrome-bottom .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:36px 28px!important}
  #chrome-bottom .fgrid>div:last-child{grid-column:span 2!important}
}
@media(max-width:680px){
  #chrome-bottom .ftr{padding:42px 20px 38px!important}
  #chrome-bottom .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:30px 20px!important}
  #chrome-bottom .fgrid>div:last-child{grid-column:1 / -1!important;padding-top:6px!important;border-top:1px solid #d8d8d8!important}
}
@media(max-width:430px){
  #chrome-bottom .ftr{padding-inline:16px!important}
  #chrome-bottom .fgrid{grid-template-columns:minmax(0,1fr)!important;gap:26px!important}
  #chrome-bottom .fgrid>div:last-child{grid-column:auto!important}
  #chrome-bottom .fgrid h4{margin-bottom:11px!important}
  #chrome-bottom .fgrid>div:first-child h4{font-size:21px!important}
  #chrome-bottom .nform{max-width:none!important}
}