/* ANDALUS_SECTION_BAR_ONE_V1 (أ. محمد 12 Nov 2026 «نعمل حاجة موحدة ليهم ومظبوطة … ومتناسق مع كل الاجهزة عرضي وراسي» → «موافق»):
   the ONE look of the sections + search/filter bar (includes/andalus-section-bar.php) on every page and both layouts.
   Every rule about this bar lives here — the old copies in andalus-product-tools-v42.css, andalus-smooth-v1.css,
   andalus-layout-v3.css, andalus-catalog.css … were taken out. Sizes follow the bar's own width (flex-wrap), not a
   list of screens: phone, phone on its side, tablet and computer are the same rules. Touch targets ≥ 44px. */

/* ---------- the bar itself: pinned under the header ---------- */
html body .an-sbar,html body .an-sbar.tools.an-product-tools{position:sticky;top:var(--an-site-header-height,0px);z-index:30;display:block;box-sizing:border-box;width:auto;margin:0!important;padding:6px 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transition:opacity .22s ease,visibility 0s!important;font-size:1rem;line-height:1.3;color:#2b1d17}
html body .an-sbar *,html body .an-sbar *::before,html body .an-sbar *::after{box-sizing:border-box}
html body .an-sbar--wait:not(.show){display:none!important}
html body .an-sbar.an-tools-gone{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .22s ease,visibility 0s linear .22s!important}
html body .an-sbar.an-models-closed{position:relative!important;top:auto!important;transform:none!important}
html body .an-sbar--nav{position:relative;top:auto;z-index:auto}
html[data-layout] body main.an-cat > .an-sbar{order:2;margin-block:0!important}
html body .an-sbar__wrap{width:var(--an-frame,min(1180px,calc(100% - 28px)));max-width:none;margin-inline:auto;padding:0}
html body .an-sbar__panel{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:10px;border:1px solid #eadbd0;border-radius:18px;background:#fff;box-shadow:0 1px 0 rgba(61,35,24,.03);transition:box-shadow .22s ease}
html body .an-sbar.an-tools-stuck .an-sbar__panel{box-shadow:0 10px 26px rgba(45,25,15,.12)}
html body .an-sbar.an-models-closed .an-sbar__panel{box-shadow:none}
html body .an-sbar__sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* the rows are flat items of the panel (display:contents), so the same markup is one line on a wide bar and stacks on a narrow one */
html body .an-sbar__more,html body .an-sbar__navs{display:contents}
html body .an-sbar__secs{order:0;flex:1 0 100%;min-width:0;display:flex;align-items:center;gap:6px;width:auto;margin:0;padding:0}
html body .an-sbar__cur{order:1}
html body .an-sbar__search{order:2}
html body .an-sbar__sort{order:3}
html body .an-sbar__filt{order:4}
html body .an-sbar__sub{order:5;flex:1 0 100%;min-width:0}
html body .an-sbar__prices{order:6;flex:1 0 100%;min-width:0}
html body .an-sbar__meta{order:7;flex:1 0 100%;min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;min-height:28px;padding:0 4px}
@media (min-width:600px){
  html body .an-sbar__search{flex-basis:260px}
  html body .an-sbar__prices{flex:0 1 auto}
  html body .an-sbar__meta{flex:0 0 auto;margin-inline-start:auto;padding:0}
}

/* ---------- row 1: the sections ---------- */
html body .an-sbar__secrow{flex:1 1 auto;min-width:0;display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:8px!important;margin:0!important;padding:0!important;list-style:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:auto;overscroll-behavior-x:contain}
html body .an-sbar__secrow::-webkit-scrollbar{display:none}
html body .an-sbar__secrow > li{flex:0 0 auto;margin:0;padding:0;line-height:1;list-style:none}
html body .an-sbar__secrow > li::marker{content:''}
html body .an-sbar .an-sbar__sec,html body .an-sbar__secrow > li > a,html body .an-sbar__cur{display:flex!important;align-items:center;gap:8px!important;width:auto;height:46px!important;min-height:46px!important;margin:0!important;padding:3px!important;padding-inline-end:14px!important;border:1.5px solid #eadbd0!important;border-radius:999px!important;background:#fff!important;color:#2b1d17!important;font:inherit;font-size:.94rem!important;font-weight:700!important;line-height:1.2!important;text-decoration:none!important;white-space:nowrap;box-shadow:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .12s ease!important}
html body .an-sbar .an-sbar__sec:is(.active,[aria-current="page"],[aria-pressed="true"]),html body .an-sbar__cur{border-color:#6f442f!important;background:#6f442f!important;color:#fff!important}
html body .an-sbar .an-sbar__sec:active,html body .an-sbar__cur:active{transform:scale(.97)}
@media (hover:hover){html body .an-sbar .an-sbar__sec:not(.active):not([aria-current="page"]):not([aria-pressed="true"]):hover{border-color:#6f442f!important}}
html body .an-sbar__ph{display:block;flex:none;width:38px!important;height:38px!important;border-radius:50%;object-fit:cover;background:#f3ece6}
/* a section photo in a chip is part of the link, never a photo to open */
html body .an-sbar .an-ug-openable{pointer-events:none!important;cursor:default!important}
/* a chip with no photo (the home page's «الكل», a section that has none yet): its icon, and the same breathing room on both sides */
html body .an-sbar .an-sbar__sec > .an-chip-i,html body .an-sbar__curin > .an-chip-i{display:block;flex:0 0 20px;width:20px;height:20px;margin-inline-start:9px;color:currentColor;stroke-width:1.8}
html body .an-sbar .an-sbar__sec > .an-sbar__secl:first-child{padding-inline-start:11px}
html body .an-sbar__secrow > li.an-schips__mine > a{padding-inline-start:14px!important}
html body .an-sbar .an-sbar__sec[data-an-n]::after{content:attr(data-an-n);display:inline-grid;place-items:center;min-width:22px;height:20px;margin:0;padding:0 6px;border-radius:999px;background:rgba(111,68,47,.1);color:inherit;font-size:.72rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
html body .an-sbar .an-sbar__sec.active[data-an-n]::after{background:rgba(255,255,255,.22)}
/* more chips on a side = a soft fade there (the script sets the class), never a chip cut in half */
html body .an-sbar :is(.an-sbar__secrow,.an-sbar__subrow,.an-cat-prices).an-chips-more{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 34px);mask-image:linear-gradient(to right,transparent 0,#000 34px)}
html body .an-sbar :is(.an-sbar__secrow,.an-sbar__subrow,.an-cat-prices).an-chips-back{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 34px);mask-image:linear-gradient(to left,transparent 0,#000 34px)}
html body .an-sbar :is(.an-sbar__secrow,.an-sbar__subrow,.an-cat-prices).an-chips-more.an-chips-back{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%)}
html body .an-sbar__arrow{display:none;flex:none;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:1.5px solid #d9c8bb;border-radius:50%;background:#fff;color:#2b1d17;cursor:pointer;-webkit-tap-highlight-color:transparent}
html body .an-sbar__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){html body .an-sbar__arrow:not([hidden]){display:flex}html body .an-sbar__arrow:hover{border-color:#6f442f}}
/* ANDALUS_TOOLS_MOUSE_SCROLLBAR_V1 (أ. محمد 4 Nov 2026 «اسكرول بار يتسحب بالماوس لكن الماوس فوق وتحت تشتغل على الصفحة عادي»):
   a mouse gets a thin scrollbar to drag under the sections (the wheel still scrolls the page); a finger swipes, no scrollbar. */
@media (hover:hover) and (pointer:fine){
  html body .an-sbar__secrow{scrollbar-width:thin;scrollbar-color:#b89a86 #f1e7de;padding-bottom:6px!important}
  html body .an-sbar__secrow::-webkit-scrollbar{display:block;height:8px}
  html body .an-sbar__secrow::-webkit-scrollbar-track{background:#f1e7de;border-radius:999px}
  html body .an-sbar__secrow::-webkit-scrollbar-thumb{background:#b89a86;border-radius:999px;border:2px solid #f1e7de}
  html body .an-sbar__secrow::-webkit-scrollbar-thumb:hover{background:#6f442f}
}

/* ---------- row 2: search + «الترتيب» ---------- */
html body .an-sbar__search{position:relative;flex:1 1 120px;min-width:0;display:flex;align-items:center;gap:8px;height:46px;margin:0;padding:0 12px;border:1.5px solid #d9c8bb;border-radius:14px;background:#fff;cursor:text;transition:border-color .16s ease,box-shadow .16s ease}
html body .an-sbar__search:focus-within{border-color:#6f442f;box-shadow:0 0 0 3px rgba(111,68,47,.14)}
html body .an-sbar__search > svg{position:static;flex:none;width:18px;height:18px;fill:none;stroke:#6f442f;stroke-width:2;stroke-linecap:round}
html body .an-sbar__search > input{flex:1 1 auto;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0!important;border-radius:0;outline:0!important;background:transparent!important;box-shadow:none!important;color:#2b1d17;font:inherit;font-size:16px;font-weight:600;line-height:1.2;-webkit-appearance:none;appearance:none}
html body .an-sbar__search > input::placeholder{color:#6b5a50;opacity:1}
html body .an-sbar__search > input::-webkit-search-cancel-button{display:none}
html body .an-sbar__clear{position:static;flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;margin-inline-end:-6px;padding:0;border:0;border-radius:10px;background:#f0e4da;color:#6f442f;font:700 1.2rem/1 inherit;cursor:pointer}
html body .an-sbar__clear[hidden]{display:none!important}
html body .an-sbar__sort{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:6px;height:46px;margin:0;padding:0 12px;border:1.5px solid #d9c8bb;border-radius:14px;background:#fff;color:#2b1d17;font-size:.9rem;font-weight:700;white-space:nowrap;cursor:pointer;transition:border-color .16s ease,background-color .16s ease,color .16s ease}
html body .an-sbar__sort > svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .an-sbar__sort:focus-within{border-color:#6f442f;box-shadow:0 0 0 3px rgba(111,68,47,.14)}
html body .an-sbar__sort[data-on]{border-color:#6f442f;background:#6f442f;color:#fff}
/* narrow bar: «الترتيب» is a button, the real <select> lies over it (the phone's own picker opens) */
html body .an-sbar__sel{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;font:inherit;font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none}
@media (min-width:900px){
  /* wide bar: the chosen order is read in the box itself */
  html body .an-sbar__sort > svg{display:none}
  html body .an-sbar__sortl::after{content:':'}
  html body .an-sbar__sort,html body .an-sbar__sort[data-on]{height:auto;min-height:46px;padding-inline-end:6px;border-color:#d9c8bb;background:#fff;color:#2b1d17}
  html body .an-sbar__sel{position:static;inset:auto;width:auto;max-width:190px;height:44px;padding:0 4px;opacity:1;background:transparent;color:inherit;font-size:.9rem;font-weight:700;-webkit-appearance:menulist;appearance:auto}
}

/* ---------- the page's own chips + the price chips ---------- */
html body .an-sbar__sub > *,html body .an-sbar .an-cat-prices{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:6px!important;min-width:0;margin:0!important;padding:0!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html body .an-sbar__sub > *::-webkit-scrollbar,html body .an-sbar .an-cat-prices::-webkit-scrollbar{display:none}
html body .an-sbar .an-cat-prices__l{flex:none;margin:0;font-size:.88rem;font-weight:700;color:#4a3830;white-space:nowrap}
html body .an-sbar .an-cat-pchip,html body .an-sbar__sub .chip{flex:none;display:inline-flex!important;align-items:center;gap:6px;width:auto;height:44px!important;min-height:44px!important;margin:0!important;padding:0 14px!important;border:1.5px solid #e3d7cc!important;border-radius:999px!important;background:#fff!important;color:#2a2024!important;font:inherit;font-size:.88rem!important;font-weight:700!important;line-height:1!important;text-decoration:none!important;white-space:nowrap;box-shadow:none!important;cursor:pointer;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .12s ease!important}
html body .an-sbar .an-cat-pchip[aria-pressed="true"],html body .an-sbar__sub .chip:is(.active,[aria-pressed="true"]){border-color:#2a2024!important;background:#2a2024!important;color:#fff!important}
html body .an-sbar .an-cat-pchip:active,html body .an-sbar__sub .chip:active{transform:scale(.96)}
@media (hover:hover){html body .an-sbar .an-cat-pchip:hover,html body .an-sbar__sub .chip:hover{border-color:#2a2024!important}}

/* ---------- count + «الأسعار تقريبية» ---------- */
html body .an-sbar .an-tools-count,html body .an-sbar .an-cat-count{display:inline-block;flex:none;width:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none!important;box-shadow:none;color:#5c4a40!important;font-size:.84rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .2s ease}
html body .an-sbar .an-tools-note{position:relative;display:inline-flex;flex:none;align-items:center;margin:0}
html body .an-sbar .an-tools-note__btn{min-height:44px}
html body .an-tools-note.is-open .an-tools-note__btn{border-style:solid;border-color:#6f442f;background:#6f442f;color:#fff}
html body .an-tools-note.is-open .an-tools-note__i{background:#fff;color:#6f442f}
html body .an-tools-bump{animation:anToolsBump .42s cubic-bezier(.2,.8,.2,1)}

/* ---------- riding on top: one row (the section + search + a filter button); a tap opens the rest under it ---------- */
html body .an-sbar__cur,html body .an-sbar__filt{display:none!important}
html body .an-sbar__cur{flex:0 0 auto}
html body .an-sbar__curin{display:flex;align-items:center;gap:8px}
/* a narrow bar: the section is its photo (its name is still read out), so the search keeps its room */
@media (max-width:599.98px){html body .an-sbar__cur{padding-inline-end:10px!important}html body .an-sbar__curin > .an-sbar__ph ~ .an-sbar__secl,html body .an-sbar__curin > .an-chip-i ~ .an-sbar__secl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}}
html body .an-sbar__cur > svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
html body .an-sbar__cur[aria-expanded="true"] > svg{transform:rotate(180deg)}
html body .an-sbar__filt{position:relative;flex:none;align-items:center;justify-content:center;width:46px;height:46px;margin:0;padding:0;border:1.5px solid #d9c8bb;border-radius:14px;background:#fff;color:#2b1d17;cursor:pointer;-webkit-tap-highlight-color:transparent}
html body .an-sbar__filt > svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
html body .an-sbar__filt[aria-expanded="true"]{border-color:#6f442f;background:#6f442f;color:#fff}
html body .an-sbar__dot{position:absolute;top:6px;inset-inline-start:6px;width:9px;height:9px;border-radius:50%;background:#6f442f}
html body .an-sbar__dot[hidden]{display:none}
html body .an-sbar.is-compact-sticky .an-sbar__panel{padding:8px}
html body .an-sbar.is-compact-sticky .an-sbar__cur{display:flex!important}
html body .an-sbar.is-compact-sticky .an-sbar__search{flex-basis:90px}
html body .an-sbar.is-compact-sticky .an-sbar__navs{display:none}
html body .an-sbar.is-compact-sticky.is-open .an-sbar__navs{display:flex;flex-direction:column;gap:8px;position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:2;padding:10px;border:1px solid #eadbd0;border-radius:18px;background:#fff;box-shadow:0 14px 34px rgba(45,25,15,.18)}
html body .an-sbar.is-compact-sticky.is-open .an-sbar__navs > *{flex:0 0 auto;width:100%}
/* under ~1300px the folded row has no room for the order + prices + count: they open from the filter button */
@media (max-width:1299.98px){
  html body .an-sbar.is-compact-sticky .an-sbar__filt{display:flex!important}
  html body .an-sbar.is-compact-sticky .an-sbar__more{display:none}
  html body .an-sbar.is-compact-sticky.is-open .an-sbar__more{display:flex;flex-direction:column;align-items:stretch;gap:8px;position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:2;max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px);overflow-y:auto;padding:10px;border:1px solid #eadbd0;border-radius:18px;background:#fff;box-shadow:0 14px 34px rgba(45,25,15,.18)}
  html body .an-sbar.is-compact-sticky.is-open .an-sbar__navs{display:contents;position:static;padding:0;border:0;box-shadow:none}
  html body .an-sbar.is-compact-sticky.is-open .an-sbar__more > *,html body .an-sbar.is-compact-sticky.is-open .an-sbar__navs > *{flex:0 0 auto;width:100%}
  html body .an-sbar.is-compact-sticky.is-open .an-sbar__sort{align-self:flex-start;width:100%;max-width:320px}
}

/* ---------- a phone held upright: every row a little tighter, so the first model stays near (layout_v3_test: first card ≤ 700px on 360) ---------- */
@media (max-width:599.98px){
  html body .an-sbar,html body .an-sbar.tools.an-product-tools{padding:4px 0!important}
  html body .an-sbar__panel{gap:6px;padding:8px}
  html body .an-sbar .an-sbar__sec,html body .an-sbar__secrow > li > a,html body .an-sbar__cur,html body .an-sbar__search,html body .an-sbar__sort,html body .an-sbar__filt{height:44px!important;min-height:44px!important}
  html body .an-sbar__filt{width:44px}
  html body .an-sbar__ph{width:36px!important;height:36px!important}
  /* the count line is short; the «الأسعار تقريبية» pill keeps its 44px tap box and overlaps the row's own padding */
  html body .an-sbar__meta{min-height:30px}
  html body .an-sbar .an-tools-note{margin-block:-7px}
}

/* ---------- a phone on its side: the screen is short, the bar is not pinned (as before) and never folds ---------- */
@media (orientation:landscape) and (max-height:500px){
  html body .an-sbar{position:relative!important;top:auto!important;padding:4px 0!important}
  html body .an-sbar__panel{padding:8px}
  html body .an-sbar .an-sbar__sec,html body .an-sbar__secrow > li > a{height:44px!important;min-height:44px!important}
  html body .an-sbar__ph{width:36px!important;height:36px!important}
}
@media (max-width:359.98px){
  html body .an-sbar__panel{padding:8px;gap:6px}
  html body .an-sbar .an-sbar__sec,html body .an-sbar__secrow > li > a{font-size:.88rem!important;padding-inline-end:11px!important}
  html body .an-sbar__sort{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  html body .an-sbar,html body .an-sbar *{transition:none!important}
  html body .an-tools-bump{animation:none!important}
}