/* =====================================================================
   دخون توق — الواجهة الجديدة (هوية توق: كحلي مايل للرصاصي)
   الهيدر، القائمة الجانبية، الشريط السفلي للجوال، الفوتر، بطاقات المنتجات
   يبنيها كود JavaScript المخصص ويضيف body.tq-ui. لو صار خطأ يضيف tq-off ويرجع شكل رائد.
   ===================================================================== */

/* (1) قبل ما يشتغل الكود: نخفي هيدر وفوتر رائد ونحجز مكان هيدرنا. أمان: بعد 8 ثواني يرجع هيدر رائد */
@keyframes tq-release { to { height: auto; overflow: visible; visibility: visible; } }
body:not(.tq-ui):not(.tq-off) header.store-header { height: 115px; overflow: hidden; visibility: hidden; animation: tq-release 0s 8s forwards; }
body:not(.tq-ui):not(.tq-off) footer.store-footer { visibility: hidden; animation: tq-release 0s 8s forwards; }
body:not(.tq-ui) .tq-x { display: none !important; }

/* (2) الألوان */
body.tq-ui {
  --tq-bg: #F4F5F7;      /* خلفية الصفحة */
  --tq-soft: #EDEFF2;    /* خلفية خفيفة عند الضغط */
  --tq-line: #E1E4E9;    /* الحدود */
  --tq-ink: #1E232B;     /* النص */
  --tq-mut: #5B6472;     /* النص الثانوي */
  --tq-b: #2B313B;       /* لون الهوية */
  --tq-bd: #1C2028;      /* الكحلي الغامق (الفوتر) */
  --tq-hd: #E3E6EB;      /* خلفية الهيدر */
  --tq-gold: #B8955A;    /* الذهبي (النجوم والتمييز) */
  --tq-od: #C9CFD8;      /* نص الفوتر */
  background: var(--tq-bg);
}
body.tq-ui header.store-header, body.tq-ui footer.store-footer { display: none !important; }

.tq-x { direction: rtl; font-family: inherit; color: var(--tq-ink); }
.tq-x a { color: inherit; text-decoration: none; }
.tq-x a, .tq-x button, .tq-x summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tq-x a:focus-visible, .tq-x button:focus-visible, .tq-x summary:focus-visible { outline: 2px solid var(--tq-b); outline-offset: 2px; }
.tq-ft a:focus-visible { outline-color: #fff; }
.tq-x .tq-ico { width: 22px; height: 22px; flex: none; }
.tq-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tq-wrap { max-width: 560px; margin-inline: auto; padding-inline: 16px; }

/* (3) الهيدر: ثابت أعلى الشاشة */
.tq-top { position: sticky; top: 0; z-index: 40; }
.tq-hd { background: var(--tq-hd); border-bottom: 1px solid #CDD2D9; }
.tq-hd-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 58px; }
.tq-side { display: flex; }
.tq-side.tq-end { justify-content: flex-end; }
.tq-ib { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 12px; color: var(--tq-ink); cursor: pointer; padding: 0; }
.tq-ib:active { background: rgba(255,255,255,.55); }
.tq-logo { justify-self: center; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 44px; font-weight: 700; font-size: 16px; color: var(--tq-b) !important; }
.tq-logo-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-logo img { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: #fff; flex: none; }
.tq-badge { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 9px; background: var(--tq-b); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.tq-search { margin-bottom: 10px; }
.tq-search salla-search { display: block; min-height: 46px; }
.tq-search .s-search-input-wrapper, .tq-search .s-search-placeholder-wrapper { width: 100%; }
.tq-search input.s-search-input { height: 46px !important; border-radius: 12px !important; background: #fff !important; border: 1px solid var(--tq-line) !important; font-size: 16px !important; color: var(--tq-ink) !important; padding-inline: 44px 14px !important; }
.tq-search input.s-search-input::placeholder { color: var(--tq-mut) !important; }
.tq-search .s-search-icon-wrap { color: var(--tq-b); }
.tq-dnav { display: none; }
@media (max-width: 359.98px) { .tq-hd .tq-logo img { display: none; } }

/* (4) القائمة الجانبية */
dialog.tq-drawer { margin: 0; margin-inline-end: auto; padding: 0; border: 0; width: min(86vw, 340px); max-width: none; height: 100%; max-height: none; background: var(--tq-bg); color: var(--tq-ink); box-shadow: 0 0 0 1px var(--tq-line), -12px 0 32px rgba(28,32,40,.18); }
dialog.tq-drawer[open] { animation: tq-dw .26s cubic-bezier(.2,.8,.2,1); }
dialog.tq-drawer::backdrop { background: rgba(28,32,40,.45); }
@keyframes tq-dw { from { transform: translateX(100%); } }
body.tq-lock { overflow: hidden; }
.tq-dw { display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.tq-dw-hd { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 58px; padding-inline: 16px 6px; background: var(--tq-bg); border-bottom: 1px solid var(--tq-line); }
.tq-dw h3 { margin: 20px 16px 6px; font-size: 13px; font-weight: 700; color: var(--tq-mut); }
.tq-dw-cats { display: grid; padding-inline: 8px; margin-bottom: 24px; }
.tq-dw-cats .tq-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding-inline: 8px; border-radius: 12px; font-size: 15px; font-weight: 700; list-style: none; cursor: pointer; }
.tq-dw-cats summary::-webkit-details-marker { display: none; }
.tq-dw-cats .tq-row:active { background: var(--tq-soft); }
.tq-dw-cats .tq-disc { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #fff; border: 1px solid var(--tq-line); color: var(--tq-b); flex: none; }
.tq-dw-cats .tq-go { margin-inline-start: auto; width: 16px; height: 16px; color: var(--tq-mut); transition: transform .2s ease; }
.tq-dw-cats summary .tq-go { transform: rotate(-90deg); }
.tq-dw-cats details[open] summary .tq-go { transform: rotate(90deg); color: var(--tq-b); }
.tq-dw-sub { display: grid; margin-inline-start: 58px; margin-bottom: 6px; }
.tq-dw-sub a { display: flex; align-items: center; min-height: 44px; font-size: 14.5px; color: var(--tq-mut) !important; border-bottom: 1px solid var(--tq-line); }
.tq-dw-sub a:last-child { border-bottom: 0; }
.tq-dw-sub a.tq-all { color: var(--tq-b) !important; font-weight: 700; }
.tq-dw-foot { margin: auto 16px 0; padding-top: 10px; border-top: 1px solid var(--tq-line); }
.tq-dw-acc { display: grid; }
.tq-dw-acc a, .tq-dw-acc button { display: flex; align-items: center; gap: 12px; min-height: 46px; font-size: 15px; font-weight: 700; color: var(--tq-ink); background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-align: start; }
.tq-dw-acc .tq-ic { position: relative; display: grid; place-items: center; width: 24px; height: 24px; color: var(--tq-b); }
.tq-dw-acc .tq-badge { top: -6px; inset-inline-end: -8px; }
.tq-dw-lbl { margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: var(--tq-mut); }
.tq-soc { display: flex; gap: 8px; flex-wrap: wrap; }
.tq-soc a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--tq-line); color: var(--tq-b) !important; }
.tq-soc .tq-ico { width: 21px; height: 21px; }

/* (5) الشريط السفلي (الجوال) */
body.tq-ui { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
nav.tq-bn { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: #fff; border-top: 1px solid var(--tq-line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tq-bn-row { max-width: 560px; margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); height: 62px; }
.tq-bn a, .tq-bn button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: var(--tq-mut) !important; position: relative; background: none; border: 0; font-family: inherit; cursor: pointer; padding: 0; }
.tq-bn a:active, .tq-bn button:active { background: var(--tq-soft); }
.tq-bn .tq-on { color: var(--tq-b) !important; font-weight: 700; }
.tq-bn .tq-badge { top: 5px; inset-inline-end: calc(50% - 24px); }
@media (max-width: 1023.98px) {
  body.tq-ui:not(.product-single):not(.cart) .wa-s-n { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  body.tq-ui.product-single footer.tq-ft { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  body.tq-ui.cart footer.tq-ft { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
}
/* صفحة المنتج والسلة فيها شريط ثابت من رائد، فنخفي شريطنا السفلي فيها */
body.tq-ui.product-single nav.tq-bn, body.tq-ui.cart nav.tq-bn { display: none; }
body.tq-ui.product-single, body.tq-ui.cart { padding-bottom: 0; }

/* (6) الفوتر */
footer.tq-ft { margin-top: 36px; background: var(--tq-bd); color: var(--tq-od); padding-block: 28px 24px; font-size: 14px; }
.tq-ft h3 { margin: 0 0 10px; font-size: 15px; color: #fff; font-weight: 700; }
.tq-ft-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #fff; font-weight: 700; font-size: 17px; }
.tq-ft-brand img { width: 40px; height: 40px; border-radius: 10px; background: #fff; object-fit: contain; }
.tq-ft-since { display: inline-block; margin: 0 0 8px; padding: 2px 12px; border-radius: 999px; background: rgba(184,149,90,.18); color: #E7D3AE; font-size: 13px; font-weight: 700; }
.tq-ft-about { margin: 0; line-height: 1.85; }
.tq-ft-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.tq-ft-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 12px; }
.tq-ft-links a { min-height: 44px; display: flex; align-items: center; color: var(--tq-od) !important; }
.tq-ft-contact { display: grid; gap: 2px; }
.tq-ft-contact a, .tq-ft-contact span { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--tq-od) !important; }
.tq-ft-contact .tq-ico { width: 20px; height: 20px; color: #fff; }
.tq-ft-social { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.tq-ft-social a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff !important; }
.tq-ft-social .tq-ico { width: 20px; height: 20px; }
.tq-legal { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 8px; }
.tq-legal > * { background: #fff; color: var(--tq-ink) !important; border-radius: 10px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 12px; line-height: 1.4; min-width: 0; }
.tq-legal img { width: 40px; height: 40px; object-fit: contain; }
.tq-legal b { font-size: 12px; color: var(--tq-bd); }
.tq-legal b.tq-num { font-size: clamp(11px, 3.2vw, 12.5px); font-variant-numeric: tabular-nums; }
.tq-pay { display: flex; flex-wrap: wrap; gap: 6px; }
.tq-pay img { height: 30px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; }
.tq-copy { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--tq-od); }

/* (7) أقسام المنتجات في الرئيسية: شريط يتمرر على الجوال */
body.tq-ui.index main .s-block.container { padding-inline: 16px; max-width: 560px; }
body.tq-ui.index .s-block__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
body.tq-ui.index .s-block__title h2 { font-size: 20px; line-height: 1.4; color: var(--tq-ink); }
.s-block__title .tq-more { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; color: var(--tq-b) !important; font-weight: 700; min-height: 44px; white-space: nowrap; }
.s-block__title .tq-more .tq-ico { width: 16px; height: 16px; }
body.tq-ui.index salla-products-list.vertical-products { display: block !important; margin-inline: -16px; overflow: visible; }
body.tq-ui.index .vertical-products .s-products-list-wrapper { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: 64% !important; grid-template-columns: none !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: 16px; scroll-padding-inline: 16px; }
body.tq-ui.index .vertical-products .s-products-list-wrapper::-webkit-scrollbar { display: none; }
body.tq-ui.index section.s-block > salla-products-list:not(:has(.s-product-card-entry)) { display: block; min-height: calc((min(100vw, 560px) - 32px) * .64 + 193px); }
/* أقسام HTML: نفس عرض الصفحة */
body.tq-ui.index section.s-block--bundle-html-content, body.tq-ui.index section.s-block-html-content { padding-inline: 16px; max-width: 560px; margin-inline: auto; }

/* (8) بطاقة المنتج (كل الصفحات) */
body.tq-ui custom-salla-product-card.s-product-card-entry { background: #fff !important; border: 1px solid var(--tq-line) !important; border-radius: 14px !important; overflow: hidden; box-shadow: none !important; scroll-snap-align: start; min-width: 0; }
body.tq-ui custom-salla-product-card .s-product-card-image { flex: none !important; aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; max-height: none !important; background: #fff !important; }
body.tq-ui custom-salla-product-card .s-product-card-image img { width: 100%; height: 100%; object-fit: cover; }
body.tq-ui custom-salla-product-card button.s-product-card-wishlist-btn { width: 44px !important; height: 44px !important; }
body.tq-ui custom-salla-product-card .s-product-card-content { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; padding: 10px 12px 12px !important; }
body.tq-ui custom-salla-product-card .s-product-card-content-title { font-size: 15px !important; font-weight: 700 !important; line-height: 1.5 !important; margin: 0 !important; color: var(--tq-ink); }
body.tq-ui custom-salla-product-card .s-product-card-content-subtitle { font-size: 13px !important; color: var(--tq-mut) !important; opacity: 1 !important; margin: 2px 0 0 !important; line-height: 1.6 !important; }
body.tq-ui custom-salla-product-card .s-product-card-content-sub { margin-top: 6px !important; align-items: center; }
body.tq-ui custom-salla-product-card .s-product-card-sale-price h4, body.tq-ui custom-salla-product-card .s-product-card-price { font-size: 16px !important; color: var(--tq-bd) !important; font-weight: 700; }
body.tq-ui custom-salla-product-card .s-product-card-sale-price span { font-size: 12.5px !important; color: var(--tq-mut) !important; }
body.tq-ui custom-salla-product-card .s-product-card-rating { font-size: 12px; color: var(--tq-mut); }
body.tq-ui custom-salla-product-card .s-product-card-rating i::before { color: var(--tq-gold) !important; }
body.tq-ui custom-salla-product-card .s-product-card-promotion-title { background: var(--tq-b) !important; color: #fff !important; }
/* سطر التقسيط: شعارا تابي وتمارا */
body.tq-ui .tq-inst { margin: 6px 0 0; display: flex; align-items: center; gap: 4px; min-height: 18px; line-height: 1; font-size: 11.5px; color: var(--tq-mut); }
body.tq-ui .tq-inst .tq-tb, body.tq-ui .tq-inst .tq-tm { direction: ltr; white-space: nowrap; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 5px; color: #292929; }
body.tq-ui .tq-inst .tq-tb { background: #3BFFC1; }
body.tq-ui .tq-inst .tq-tm { background: linear-gradient(90deg, #FFE6C8, #F3B6D8, #C8D3FF); }
body.tq-ui custom-salla-product-card .s-product-card-content-footer { margin-top: auto !important; padding-top: 10px; min-height: 54px; }
body.tq-ui custom-salla-product-card salla-add-product-button .s-button-element { min-height: 44px; border-radius: 10px !important; border: 1px solid var(--tq-b) !important; background: #fff !important; color: var(--tq-b) !important; font-weight: 700 !important; font-size: 14px !important; }
body.tq-ui custom-salla-product-card salla-add-product-button .s-button-element:hover { background: var(--tq-b) !important; color: #fff !important; }
@media (max-width: 640px) {
  body.tq-ui .s-product-card-entry salla-add-product-button .s-button-btn { padding-inline: 8px !important; gap: 4px; }
  body.tq-ui .s-product-card-entry salla-add-product-button .s-button-text { font-size: 13px; white-space: normal !important; }
}

/* (9) الأزرار الأساسية بلون الهوية */
body.tq-ui .btn--primary, body.tq-ui .s-button-primary { background-color: var(--tq-b) !important; border-color: var(--tq-b) !important; }

/* (10) الكمبيوتر */
@media (min-width: 1024px) {
  body:not(.tq-ui):not(.tq-off) header.store-header { height: 124px; }
  body.tq-ui { padding-bottom: 0; }
  nav.tq-bn { display: none; }
  .tq-wrap { max-width: 1280px; padding-inline: 32px; }
  .tq-hd-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
  .tq-hd-row { display: contents; }
  .tq-hd-row > .tq-side:first-child { display: none; }
  .tq-logo { grid-column: 1; grid-row: 1; justify-self: start; font-size: 18px; min-height: 72px; }
  .tq-logo img { width: 42px; height: 42px; }
  .tq-hd-row > .tq-end { grid-column: 3; grid-row: 1; }
  .tq-search { grid-column: 2; grid-row: 1; margin: 0; max-width: 620px; width: 100%; justify-self: center; }
  .tq-dnav { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 4px; border-top: 1px solid #CDD2D9; height: 48px; align-items: stretch; }
  .tq-dn { position: relative; display: flex; }
  .tq-dn > a { display: flex; align-items: center; gap: 4px; padding-inline: 14px; font-size: 15px; font-weight: 700; color: var(--tq-ink) !important; }
  .tq-dn > a .tq-ico { width: 14px; height: 14px; color: var(--tq-mut); }
  .tq-dn:hover > a, .tq-dn:focus-within > a { color: var(--tq-b) !important; background: rgba(255,255,255,.5); }
  .tq-dn-menu { position: absolute; top: 100%; inset-inline-start: 0; min-width: 220px; background: #fff; border: 1px solid var(--tq-line); border-radius: 0 0 12px 12px; box-shadow: 0 12px 28px rgba(28,32,40,.12); padding: 6px; display: none; z-index: 5; }
  .tq-dn:hover .tq-dn-menu, .tq-dn:focus-within .tq-dn-menu { display: grid; }
  .tq-dn-menu a { display: flex; align-items: center; min-height: 40px; padding-inline: 12px; border-radius: 8px; font-size: 14.5px; color: var(--tq-ink) !important; }
  .tq-dn-menu a:hover { background: var(--tq-soft); color: var(--tq-b) !important; }
  .tq-dn-menu a:first-child { font-weight: 700; color: var(--tq-b) !important; }
  footer.tq-ft { padding-block: 40px 28px; }
  .tq-ft-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
  .tq-ft-grid .tq-ft-block { margin-top: 0; padding-top: 0; border-top: 0; }
  body.tq-ui.index main .s-block.container { max-width: 1280px; padding-inline: 32px; }
  body.tq-ui.index section.s-block--bundle-html-content, body.tq-ui.index section.s-block-html-content { max-width: 1280px; padding-inline: 32px; }
  body.tq-ui.index salla-products-list.vertical-products { margin-inline: 0; }
  body.tq-ui.index .vertical-products .s-products-list-wrapper { grid-auto-flow: row !important; grid-auto-columns: auto !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; overflow: visible; padding-inline: 0; gap: 20px !important; }
  body.tq-ui.index section.s-block > salla-products-list:not(:has(.s-product-card-entry)) { min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) { dialog.tq-drawer[open] { animation: none; } .tq-dw-cats .tq-go { transition: none; } }

/* (11) تحسينات سابقة لمتجر توق */
@media (max-width: 767px) {
  .wa-s-n { width: 42px !important; height: 42px !important; right: auto !important; left: 12px !important; opacity: .9; }
  body.is-sticky-product-bar.product-single .wa-s-n { bottom: 126px !important; }
  body.cart .wa-s-n { bottom: 150px !important; }
}

/* (12) درجة الرصاصي بدال الأبيض (الدرجة 2): البطاقات #ECEEF1 وخلفية الصفحة #E0E4E8. للرجوع للأبيض احذف هالقسم */
body.tq-ui { --tq-bg: #E0E4E8; background: #E0E4E8 !important; }
body.tq-ui .tq-hd { background: #E0E4E8 !important; }
body.tq-ui custom-salla-product-card.s-product-card-entry, body.tq-ui custom-salla-product-card .s-product-card-image, body.tq-ui custom-salla-product-card salla-add-product-button .s-button-element { background: #ECEEF1 !important; }
body.tq-ui custom-salla-product-card salla-add-product-button .s-button-element:hover { background: var(--tq-b) !important; }
body.tq-ui [style*="background:#fff"], body.tq-ui [style*="background:#FFFFFF"] { background: #ECEEF1 !important; }
body.tq-ui nav.tq-bn, body.tq-ui .tq-search input.s-search-input { background: #ECEEF1 !important; }