/* ANDALUS_CSS_BUNDLE_V1: andalus-header-v22.css + andalus-readability-v20.css + andalus-google-rating-v87.css + andalus-fullwidth-v1.css + andalus-smooth-v1.css */
/* == andalus-header-v22.css == */
/* Andalus customer-first header V22 — neutral, benefit-led, mobile-first. */
:root{
  --an-h15-ink:#211f25;
  --an-h15-deep:#151419;
  --an-h15-muted:#6f6a73;
  --an-h15-soft:#f4f2ef;
  --an-h15-paper:#fff;
  --an-h15-line:#e4e0db;
  --an-h15-accent:#a89f96;
  --an-h15-shadow:0 18px 46px rgba(24,22,29,.14);
}
.an-site-header{
  direction:rtl;
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid rgba(33,31,37,.10)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.65);
  transition:box-shadow .22s ease,background .22s ease;
  isolation:isolate;
}
.an-site-header.is-scrolled{box-shadow:0 12px 34px rgba(24,22,29,.11)!important;background:rgba(255,255,255,.985)!important}
.an-site-header svg{display:block;fill:currentColor}

/* Customer benefits strip */
.an-site-quick{background:var(--an-h15-deep)!important;color:#fff!important;border:0!important}
.an-site-quick__row{min-height:38px!important;justify-content:center!important;gap:0!important;overflow:visible!important;padding:0!important}
.an-site-benefit{position:relative;min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;color:#fff!important;font-size:.76rem;font-weight:850;white-space:nowrap;opacity:.96}
.an-site-benefit+ .an-site-benefit:before{content:"";position:absolute;inset-block:10px;right:0;width:1px;background:rgba(255,255,255,.18)}
.an-site-benefit svg{width:17px;height:17px;opacity:.86;flex:0 0 auto}
a.an-site-benefit{transition:background .18s ease,opacity .18s ease}
a.an-site-benefit:hover,a.an-site-benefit:focus-visible{background:rgba(255,255,255,.08);opacity:1;outline:none!important}

/* Main header row and brand */
.an-site-header__row{position:relative;min-height:78px!important;gap:18px!important}
.an-site-brand{min-width:270px!important;gap:13px!important;color:var(--an-h15-ink)!important;flex:0 0 auto}
.an-site-brand img{width:132px!important;height:58px!important;max-width:none!important;object-fit:contain!important;border:0!important;border-radius:0!important;background:transparent!important;padding:0!important;box-shadow:none!important}
.an-site-brand__text{padding-inline-start:13px;border-inline-start:1px solid var(--an-h15-line);line-height:1.28!important}
.an-site-brand__text strong{font-size:1rem!important;color:var(--an-h15-ink)!important;letter-spacing:-.01em}
.an-site-brand__text small{font-size:.68rem!important;color:var(--an-h15-muted)!important;font-weight:800!important;margin-top:3px}

/* Desktop navigation */

/* High-value actions */
.an-site-header__actions{gap:8px!important;flex:0 0 auto}
.an-site-header__action{min-height:43px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border-radius:12px;font-size:.82rem;font-weight:900;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.an-site-header__action svg{width:18px;height:18px;flex:0 0 auto}
.an-site-header__action--calc{background:#fff;color:var(--an-h15-ink)!important;border:1px solid #ccc6c0;box-shadow:0 5px 14px rgba(24,22,29,.06)}
.an-site-header__action--wa{background:var(--an-h15-deep)!important;color:#fff!important;border:1px solid var(--an-h15-deep);box-shadow:0 9px 22px rgba(21,20,25,.17)!important}
.an-site-header__action:hover{transform:translateY(-1px)}
.an-site-header__action--calc:hover{background:var(--an-h15-soft);border-color:#afa79f}
.an-site-header__action--wa:hover{background:#302d35!important;box-shadow:0 12px 26px rgba(21,20,25,.22)!important}

/* Professional mobile menu control */

/* Mobile quick actions are hidden on desktop. */

@media(max-width:1320px) and (min-width:1025px){
  .an-site-brand{min-width:150px!important}
  .an-site-brand img{width:112px!important;height:50px!important}
  .an-site-brand__text{display:none!important}
  
  .an-site-header__action{padding-inline:11px}
}

@media(max-width:1024px){
  
  .an-site-header{overflow:visible!important}
  .an-site-quick{display:none!important}
  .an-site-header__row{min-height:64px!important;gap:10px!important;justify-content:space-between!important}
  .an-site-brand{min-width:0!important;margin:0!important;gap:0!important}
  .an-site-brand img{width:112px!important;height:46px!important}
  .an-site-brand__text{display:none!important}
  
  .an-site-header__actions{display:none!important}

  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  .an-site-header__row{z-index:7}
}

@media(max-width:420px){
  .an-site-wrap{width:calc(100% - 16px)!important}
  .an-site-brand img{width:102px!important;height:43px!important}
  
  
  
}

@keyframes anHeaderMenuIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .an-site-header,.an-site-header__action{transition:none!important;animation:none!important}
}

/* ANDALUS_MOBILE_MENU_CLEARANCE_V22_START
 * Keep the mobile/tablet menu fully below the quick-action bar.
 * The actual quick-action height is synchronised by andalus-site.js.
 */
.an-site-header{--an-mobile-actions-height:45px}

@media(max-width:1024px){
  .an-site-header__row{
    position:relative!important;
    z-index:10!important;
  }

  

  

  

  

  
}

/* ANDALUS_MOBILE_MENU_CLEARANCE_V22_END */

/* == andalus-readability-v20.css == */
/* Andalus Readability V15 — calmer Arabic rhythm and clearer separation between lines. */
:root{
  --an-read-heading-leading:1.30;
  --an-read-heading-leading-mobile:1.38;
  --an-read-copy-leading:1.82;
  --an-read-copy-leading-mobile:1.92;
  --an-read-list-gap:.58rem;
}

/* Keep controls compact; improve reading content only. */
main :where(h1,h2,h3,h4,h5,h6){
  line-height:var(--an-read-heading-leading)!important;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
main :where(p,li,blockquote,figcaption,dd){
  line-height:var(--an-read-copy-leading)!important;
  text-wrap:pretty;
}
main :where(ul,ol){
  padding-inline-start:1.35rem;
}
main :where(ul,ol)>li+li{
  margin-top:var(--an-read-list-gap);
}
main details>summary{
  line-height:1.58!important;
}
main :where(.lead,.hero-lead,.an-cat-hero p,.an-info-lead){
  line-height:1.9!important;
}

/* The live-page hero was the most visibly cramped title. */
#anLive .hero h1{
  line-height:1.30!important;
}
#anLive .hero h1 span{
  display:inline;
}

/* Do not let long Arabic labels collide inside cards and CTAs. */
main :where(a,button,.btn,.an-cat-btn,.quote,.tag){
  line-height:1.38;
}

@media(max-width:700px){
  main :where(h1,h2,h3,h4,h5,h6){
    line-height:var(--an-read-heading-leading-mobile)!important;
    letter-spacing:0!important;
  }
  main :where(p,li,blockquote,figcaption,dd){
    line-height:var(--an-read-copy-leading-mobile)!important;
  }
  main :where(ul,ol)>li+li{
    margin-top:.68rem;
  }
  #anLive .hero h1{
    line-height:1.42!important;
  }
  #anLive .hero h1 span{
    display:block;
    margin-top:.13em;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}

/* Standard product-share control — familiar connected-nodes symbol. */
.an-cat-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.an-cat-actions-row .an-cat-share{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:48px!important;min-width:48px!important;max-width:48px!important;height:46px!important;min-height:46px!important;padding:0!important;border:1px solid #2b2d2f!important;border-radius:14px!important;background:#fff!important;color:#2b2d2f!important;box-shadow:0 5px 14px rgba(23,26,28,.08)!important;transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease!important}
.an-cat-actions-row .an-cat-share svg{display:block!important;width:22px!important;height:22px!important;overflow:visible!important;fill:none!important;stroke:currentColor!important;stroke-width:1.85!important;stroke-linecap:round!important;stroke-linejoin:round!important;pointer-events:none!important}
.an-cat-actions-row .an-cat-share:hover,.an-cat-actions-row .an-cat-share:focus-visible{background:#2b2d2f!important;color:#fff!important;border-color:#2b2d2f!important;transform:translateY(-1px)!important;box-shadow:0 9px 20px rgba(23,26,28,.16)!important;outline:3px solid rgba(43,45,47,.13)!important;outline-offset:2px!important}
.an-cat-actions-row .an-cat-share:active{transform:translateY(0) scale(.97)!important}
@media(max-width:700px){.an-cat-actions-row .an-cat-share{height:48px!important;min-height:48px!important;border-radius:15px!important}.an-cat-actions-row .an-cat-share svg{width:23px!important;height:23px!important}}

/* == andalus-google-rating-v87.css == */
/*
 * Andalus V87 — verified Google rating surfaces.
 * Trust data is sourced centrally from includes/site-config.php.
 */
.an-google-rating-badge{
  gap:6px!important;
  color:#fff!important;
  text-decoration:none!important;
  white-space:nowrap;
}
.an-google-rating-badge__star{
  color:#fbbc04;
  font-size:1.14em;
  line-height:1;
}
.an-google-rating-badge strong{
  color:#fff;
  font-size:1.02em;
}
.an-google-rating-badge small{
  color:rgba(255,255,255,.78);
  font-size:.78em;
}
.an-google-rating-badge:focus-visible,
.an-google-rating-panel:focus-visible{
  outline:3px solid #fbbc04;
  outline-offset:3px;
}
.an-google-rating-panel{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 12px;
  align-items:center;
  margin:16px 0 18px;
  padding:14px 16px;
  border:1px solid rgba(251,188,4,.36);
  border-radius:16px;
  background:rgba(255,255,255,.065);
  color:#fff!important;
  text-decoration:none!important;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.an-google-rating-panel:hover{
  transform:translateY(-2px);
  border-color:rgba(251,188,4,.75);
  background:rgba(255,255,255,.095);
}
.an-google-rating-panel__stars{
  grid-row:1/3;
  color:#fbbc04;
  font-size:1.18rem;
  letter-spacing:1px;
  direction:ltr;
}
.an-google-rating-panel__copy{
  display:grid;
  gap:2px;
}
.an-google-rating-panel__copy strong{
  color:#fff;
  font-size:.96rem;
}
.an-google-rating-panel__copy small{
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.55;
}
.an-google-rating-panel__link{
  grid-column:2;
  color:#fbbc04;
  font-size:13px;
  font-weight:800;
}
@media (max-width:900px){
  .an-site-quick__row{
    overflow-x:auto;
    scrollbar-width:none;
  }
  .an-site-quick__row::-webkit-scrollbar{display:none}
}
@media (max-width:620px){
  .an-google-rating-panel{
    grid-template-columns:1fr;
  }
  .an-google-rating-panel__stars,
  .an-google-rating-panel__link{
    grid-row:auto;
    grid-column:1;
  }
}

/* Facebook rating next to Google (shown only when a fresh rating exists) */
.an-google-rating-panel + .an-facebook-rating-panel{
  margin-top:-8px;
}

/* == andalus-fullwidth-v1.css == */
/* ANDALUS_FULLWIDTH_V2 (21 Oct 2026) — desktop only (>1024px).
   Two widths, not one:
   - FRAME = header, footer, product grids, video rails, the search/tools bar, category
     cards, Facebook posts: ~94% of the viewport, so wide screens have no empty gutters.
   - CONTENT = everything else (hero, services, steps, FAQ, forms, 2-column boxes):
     a centered column capped at --an-content-max, so text and cards keep their designed
     size instead of stretching with the screen.
   Product grids use auto-fill: a wider screen gets MORE cards per row (5 at 1920px,
   4 at 1440px), never bigger cards.
   offers.andalusfurniture.com (.ofr-*) is deliberately NOT covered: that sales page is
   designed around its own 1180px frame and spreads thin when widened.
   Loaded site-wide from includes/tracking-head.php. Mobile/tablet untouched. */
:root{
  --an-fullwidth:94%;
  --an-fullwidth-max:2400px;
  --an-content-max:1480px;   /* reading / content column */
  --an-card-min:260px;       /* product card min width in auto-fill grids: 5 cards at 1536px, 6 at 1920px */
}
@media (min-width:1025px){
  /* 1) Default: every page container is a CONTENT column (centered, capped). */
  html body :is(
    .wrap,
    .fbLatest .wrap,
    .an-product-tools>.wrap,
    .an-product-tools>.an-product-tools__wrap,
    .an-site-wrap,
    .an-cat-wrap,
    .an-info-wrap,
    .an-vrail__wrap,
    .mattressWrap,
    .mt-wrap,
    .sbx-wrap,
    .sst-wrap,
    .ang-wrap,
    .s10-wrap,
    .sb-wrap
  ){
    width:min(var(--an-fullwidth),var(--an-content-max))!important;
    max-width:none!important;
    margin-inline:auto!important;
  }

  /* 2) FRAME: these sections' containers take the wide width. */
  html body :is(
    .an-site-header, .an-site-footer, .an-site-quick,
    .an-cat-categories,
    .start,                     /* homepage category cards row */
    .an-product-tools,          /* search / sort / category chips bar */
    .an-vrail, .an-vtours,      /* video rails */
    .an-cat-main,               /* category page product grid */
    .catalogBlock,              /* /live product grid */
    #catalog,                   /* /24 catalog grid + homepage catalog */
    .mt-results,                /* mattresses grid */
    .sst-models,                /* stainless tables grid */
    .fbLatest                   /* Facebook posts grid */
  ) > :is(.wrap,.an-site-wrap,.an-cat-wrap,.an-vrail__wrap,.mt-wrap,.sst-wrap,.an-product-tools__wrap),
  html body .an-site-wrap{
    width:min(var(--an-fullwidth),var(--an-fullwidth-max))!important;
  }

  /* 3) Product/catalog grids: more columns, same card size. */
  html body :is(
    .an-cat-grid,
    .an-rc-grid,                /* ANDALUS_ROOM_CARD_V1: stainless / tables / sofa bed cards */
    #catalog #grid,
    #anLive #catalog #productGrid.productGrid.grid,
    .mt-grid,
    .catalogGrid
  ){
    grid-template-columns:repeat(auto-fill,minmax(var(--an-card-min),1fr))!important;
  }
  html body .categoryPick{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}

  /* 4) Product cards on desktop: 4:3 photo box (photos are mostly landscape; the blurred
        backdrop added in PHP fills the box for portrait ones), so cards are shorter and
        rows are tighter. */
  html body :is(.an-cat-photo,.an-home-photo,.an-live-photo,.an-rc__photo){--anp-ratio:4/3}
  html body :is(.an-cat-card,.product[data-product]){container-type:inline-size}
  /* Narrow cards (5–6 per row): WhatsApp button on its own row, details + icon-only share below. */
  @container (max-width:309px){
    html body .an-cat .an-cat-card .an-cat-actions-row.pactions.has-details,
    html body #catalog .product .actions.threeActions{grid-template-columns:minmax(0,1fr) 48px!important}
    html body .an-cat .an-cat-card .an-cat-actions-row.pactions.has-details > .ask,
    html body #catalog .product .actions.threeActions > .ask{grid-column:1 / -1!important;grid-row:1!important}
    html body .an-cat .an-cat-card .an-cat-actions-row.pactions.has-details > .an-cat-btn--details,
    html body #catalog .product .actions.threeActions > .productDetails{grid-column:1!important;grid-row:2!important}
    html body .an-cat .an-cat-card .an-cat-actions-row.pactions.has-details > .an-cat-share,
    html body #catalog .product .actions.threeActions > .shareProduct{grid-column:2!important;grid-row:2!important;width:48px!important;min-width:48px!important;max-width:48px!important;padding:0!important}
    html body .an-cat .an-cat-card .an-cat-actions-row.pactions.has-details > .an-cat-share .an-cat-sr-only,
    html body #catalog .product .actions.threeActions > .shareProduct span{display:none!important}
  }

  /* 5) Reading blocks inside the content column stay at a readable line length. */
  html body :is(.seoText .wrap,.ang-wrap--wide){max-width:min(var(--an-fullwidth),1400px)!important}
  html body :is(.andalus-info-subtitle,.sst-models__note,.sbx-faq p,.contactCard p,.fbPostsEmpty p,.an-info-lead,.an-section-intro p,.an2-guide p,.seoText p,.ang-lead,.an-pd__specs-note){max-width:78ch;margin-inline:auto}
  html body :is(.faqAnswer,details>p){max-width:78ch}
}

/* == andalus-smooth-v1.css == */
/* ANDALUS_SMOOTH_SITE_V1 — see assets/andalus-smooth-v1.js. Transforms + opacity only (no layout while scrolling). */
/* ANDALUS_HDR_GLIDE_V4: the header slide is done by assets/andalus-smooth-v1.js with Web Animations (graphics thread).
   No CSS transition on the header on purpose — it would fight those animations. */
@media (max-width:1024px){
  html body .an-site-header{will-change:transform}
}
/* home page: the models' search/filter bar only exists once a section is chosen (.show — andalus-home-catalog-v29.js),
   as the home page was built (andalus-home-v1a.css .tools{display:none}); andalus-product-tools-v42.css forced it on
   (display:block!important) so it showed — and stuck on top over «خدماتنا» — with no models open (owner 03:31, 03:44) */
html body section#tools.tools.an-product-tools:not(.show){display:none!important}
/* ANDALUS_TOOLS_LEAVE_V1: past the last models the filter bar fades away (assets/andalus-smooth-v1.js adds .an-tools-gone) */
html body .tools.an-tools-gone,html body .an-product-tools.tools.an-tools-gone{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .22s ease,visibility 0s linear .22s!important}
html body .tools,html body .an-product-tools.tools{transition:opacity .22s ease,visibility 0s!important}
/* opening a section in a card: the content unfolds (where the browser can animate it) and fades in everywhere else */
html body .an-cat-card details,html body .an-pd details{interpolate-size:allow-keywords}
@supports selector(::details-content){
  html body .an-cat-card details::details-content,html body .an-pd details::details-content{block-size:0;overflow:clip;transition:block-size .3s cubic-bezier(.22,.8,.24,1),content-visibility .3s allow-discrete}
  html body .an-cat-card details[open]::details-content,html body .an-pd details[open]::details-content{block-size:auto}
}
html body .an-cat-card details[open]>:not(summary),html body .an-pd details[open]>:not(summary){animation:anSmoothIn .26s ease both}
@keyframes anSmoothIn{from{opacity:0;transform:translate3d(0,-4px,0)}to{opacity:1;transform:none}}
/* the buttons inside a card: one clear main action (واتساب), the two «open» rows quiet and the same, «شارك» small */
html body .an-cat-card summary{transition:background-color .18s ease,color .18s ease}
html body .an-cat-card summary:active{background:rgba(111,68,47,.06)}
html body .an-cat-card .an-cat-btn,html body .an-cat-card .an-cat-share{transition:transform .12s ease,background-color .18s ease,box-shadow .18s ease}
html body .an-cat-card .an-cat-btn:active,html body .an-cat-card .an-cat-share:active{transform:scale(.98)}
/* «شارك» is the third action: quiet, smaller, no frame — the green WhatsApp button stays the one main action */
html body .an-cat-card .an-cat-actions-row.pactions>.an-cat-share{min-height:40px!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:#6f442f!important;font-size:14px!important}
html body .an-cat-card .an-cat-actions-row.pactions>.an-cat-share:active{background:rgba(111,68,47,.06)!important}
/* ANDALUS_HIDE_MODELS_V1: «إخفاء الموديلات» next to the count in the filter bar (assets/andalus-smooth-v1.js) */
html body .toolrow:has(>.an-hide-models),html body section#tools.tools .toolsPanel .toolrow:has(>.an-hide-models){grid-template-columns:minmax(0,1fr) auto auto!important}
html body .toolrow>.selected{grid-column:1/-1}
@media (min-width:1025px){html body .toolrow:has(>.an-hide-models),html body section#tools.tools .toolsPanel .toolrow:has(>.an-hide-models){grid-template-columns:minmax(200px,.8fr) minmax(260px,1.35fr) minmax(150px,.55fr) auto!important}html body .toolrow>.selected{grid-column:auto}}
html body .an-hide-models .an-hm-l{display:none}
@media (min-width:700px){html body .an-hide-models .an-hm-l{display:inline}html body .an-hide-models .an-hm-s{display:none}}
html body .an-hide-models{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;align-self:stretch;min-height:44px;padding:0 12px;border:1px solid #d9c3b4;border-radius:14px;background:#fff;color:#6f442f;font:inherit;font-size:.86rem;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .18s ease,transform .12s ease}
html body .an-hide-models svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}
html body .an-hide-models[aria-expanded="false"]{background:#6f442f;border-color:#6f442f;color:#fff}
html body .an-hide-models[aria-expanded="false"] svg{transform:rotate(180deg)}
html body .an-hide-models:active{transform:scale(.97)}
html body .an-models-off{display:none!important}
html body .tools.an-models-closed,html body .an-product-tools.an-models-closed{position:relative!important;top:auto!important;transform:none!important}
/* ANDALUS_TOOLS_PLUS_V1 (أ. محمد 4 Nov 04:22): the bar answers every tap + «الأسعار تقريبية» lives inside it (assets/andalus-smooth-v1.js part 5) */
html body .an-tools-note{position:relative;display:inline-flex;flex:none;align-items:center;margin-inline-start:auto}
html body .an-tools-note.in-prices{margin-inline-start:auto}
html body .an-cat-prices+.an-tools-note,html body .toolsPanel>.an-tools-note{display:flex;margin:8px 0 0;justify-content:flex-start}
html body .an-tools-note__btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 11px 4px 9px;border:1px dashed #d9c3b4;border-radius:999px;background:#fffaf5;color:#725546;font:inherit;font-size:.8rem;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .12s ease}
html body .an-tools-note__btn::before{content:"";position:absolute;inset:-5px -2px}
html body .an-tools-note__i{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#b0763f;color:#fff;font-size:.72rem;font-weight:900;font-family:Georgia,serif;font-style:italic}
html body .an-tools-note__btn:active{transform:scale(.96)}
@media (hover:hover){html body .an-tools-note__btn:hover{border-color:#b0763f;color:#6f442f}}
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-note__pop{position:fixed;box-sizing:border-box;z-index:1200;display:flex;flex-direction:column;gap:10px;padding:13px 14px;border:1px solid #eadbd0;border-radius:16px;background:#fff;box-shadow:0 18px 40px rgba(45,25,15,.18);color:#3b2a22;font-size:.88rem;font-weight:700;line-height:1.75;text-align:right;white-space:normal;opacity:0;transform:translate3d(0,-6px,0);transition:opacity .18s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
html body .an-tools-note__pop[hidden]{display:none}
html body .an-tools-note__pop.is-in{opacity:1;transform:none}
html body .an-tools-note__wa{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;background:#1f8f4e;color:#fff!important;font-weight:900;text-decoration:none!important}
html body .an-tools-note__wa:active{transform:scale(.98)}
/* home chips: how many models each section has (attr — the label text stays as is) */
html body .tools .chip[data-an-n]::after,html body .an-product-tools .chip[data-an-n]::after{content:attr(data-an-n);display:inline-grid;place-items:center;min-width:20px;height:20px;margin-inline-start:6px;padding:0 6px;border-radius:999px;background:rgba(111,68,47,.1);color:inherit;font-size:.72rem;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;vertical-align:1px}
html body .tools .chip.active[data-an-n]::after,html body .an-product-tools .chip.active[data-an-n]::after{background:rgba(255,255,255,.22)}
/* every tap answers at once */
html body .an-product-tools .chip,html body .an-product-tools .an-cat-pchip,html body .an-product-tools .backCats{transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .12s ease!important;-webkit-tap-highlight-color:transparent}
html body .an-product-tools .chip:active,html body .an-product-tools .an-cat-pchip:active,html body .an-product-tools .backCats:active{transform:scale(.95)}
html body .an-product-tools .chips{scroll-behavior:auto}
html body .an-product-tools .search:focus-within{border-color:#6f442f!important;box-shadow:0 0 0 3px rgba(111,68,47,.14)!important}
html body .an-product-tools .an-tools-count,html body .an-product-tools [data-an-cat-count]{display:inline-block;transition:color .2s ease}
html body .an-tools-bump{animation:anToolsBump .42s cubic-bezier(.2,.8,.2,1)}
@keyframes anToolsBump{0%{transform:scale(1)}35%{transform:scale(1.12);color:#6f442f}100%{transform:scale(1)}}
/* riding on top: a soft shadow so the bar reads as a layer over the models */
html body .an-product-tools .toolsPanel{transition:box-shadow .22s ease}
html body .an-product-tools.an-tools-stuck .toolsPanel{box-shadow:0 10px 26px rgba(45,25,15,.12)!important}
html body .an-product-tools.an-models-closed .toolsPanel{box-shadow:none!important}
@media (max-width:700px){
  html body .toolsBottom:has(>.an-tools-note){display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 10px}
  html body .toolsBottom:has(>.an-tools-note)>.chips{flex:1 0 100%!important;width:100%!important;max-width:100%!important;min-width:0!important}
  html body .toolsBottom>.an-tools-note{margin-inline-start:0}
  html body .toolsBottom>.an-tools-count{margin-inline-start:auto}
  html body .an-tools-note__btn{min-height:32px;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  html body .an-site-header,html body .tools,html body .an-product-tools.tools{transition:none!important}
  html body .an-tools-bump{animation:none!important}html body .an-tools-note__pop{transition:none!important}
  html body .an-cat-card details::details-content,html body .an-pd details::details-content{transition:none!important}
  html body .an-cat-card details[open]>:not(summary),html body .an-pd details[open]>:not(summary){animation:none!important}
}
/* ANDALUS_TOOLS_BAR_V2 (أ. محمد 5 Nov 2026 16:55 «الجزء دا… يتظبط أكتر على جميع الأجهزة… خاصة الصغيرة… بايقونات مصغرة للقسم باحتراف»):
   the last word on the search/filter bar (home #tools, section pages #categoryTools, /tables/ #tableTools). The ID inside :is()
   outranks the older #tools rules (andalus-ui-unification-v40.css) and the footer's andalus-product-tools-v42.css.
   - each section chip: small drawn icon (an_section_chip_icon) + name + count, one height everywhere
   - the chips row fades on the side where more chips are hidden (.an-chips-more / .an-chips-back, set in andalus-smooth-v1.js)
   - search, sort and «اقفل» share one height; phones: the note + count sit on their own tidy line under the chips */
html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .chips{gap:6px!important;align-items:center!important;scroll-padding-inline:12px}
html body section:is(#tools,#categoryTools,#tableTools).an-product-tools :is(.chips,.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 section:is(#tools,#categoryTools,#tableTools).an-product-tools :is(.chips,.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 section:is(#tools,#categoryTools,#tableTools).an-product-tools :is(.chips,.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 section:is(#tools,#categoryTools,#tableTools).an-product-tools .chip{gap:6px!important;min-height:38px!important;height:38px!important;padding:0 13px 0 11px!important;font-size:.84rem!important;line-height:1!important;box-shadow:0 1px 0 rgba(61,35,24,.03)!important}
html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .chip .an-chip-i{display:block;flex:0 0 18px;width:18px;height:18px;color:#a0714f;stroke-width:1.8;transition:color .16s ease}
html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .chip:is(.active,[aria-current="page"],[aria-pressed="true"]) .an-chip-i{color:currentColor}
html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .chip[data-an-n]::after{margin-inline-start:0!important;min-width:22px;height:20px;font-size:.7rem}
@media (hover:hover){html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .chip:not(.active):hover .an-chip-i{color:#6f442f}}
html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsBottom{gap:10px!important;min-width:0}
html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsBottom>.an-tools-note,
html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsBottom>.an-tools-count,
html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsBottom>.an-cat-count{flex:none!important;white-space:nowrap!important}
html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolrow>.an-hide-models{align-self:end;height:48px;min-height:48px;border-radius:16px}
/* tablets: the chips get the full width, note + count on one quiet line under them */
@media (max-width:1024px){
  html body section:is(#tools,#tableTools).an-product-tools .toolsBottom{display:flex!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsBottom{flex-wrap:wrap!important;align-items:center!important;row-gap:7px!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsBottom>.chips{flex:1 0 100%!important;width:100%!important;max-width:100%!important;min-width:0!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsBottom>.an-tools-note{margin-inline-start:0!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsBottom>:is(.an-tools-count,.an-cat-count){margin-inline-start:auto!important;font-size:.8rem!important;color:#725546!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .selected{min-height:36px!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .selectedCopy>span{display:none!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .backCats{height:36px!important;padding:0 14px!important;font-size:.82rem!important}
}
/* section pages: the price chips match the section chips (one height), one line that swipes instead of wrapping on phones */
html body section#categoryTools.an-product-tools .an-cat-pchip{min-height:38px!important;height:38px;padding:0 14px!important;font-size:.84rem!important;line-height:1}
html body section#categoryTools.an-product-tools .an-cat-prices__l{font-size:.82rem}
/* phones */
@media (max-width:700px){
  html body section#categoryTools.an-product-tools .an-cat-prices{flex-wrap:nowrap!important;overflow-x:auto;gap:5px!important;margin-top:7px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html body section#categoryTools.an-product-tools .an-cat-prices::-webkit-scrollbar{display:none}
  html body section#categoryTools.an-product-tools .an-cat-pchip{min-height:34px!important;height:34px;padding:0 11px!important;font-size:.78rem!important}
  html body section#categoryTools.an-product-tools .an-cat-prices__l{flex:none;font-size:.76rem}
  html body section#categoryTools.an-product-tools .toolsPanel>.an-tools-note{margin-top:7px!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsPanel{padding:7px!important;border-radius:16px!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsPanel .toolrow,
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsPanel .toolrow:has(>.an-hide-models){grid-template-columns:minmax(0,1fr) 104px auto!important;gap:6px!important;align-items:center!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsPanel .toolrow:not(:has(>.an-hide-models)){grid-template-columns:minmax(0,1fr) 112px!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .selected{grid-column:1/-1!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .search{grid-column:auto!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .search input{height:40px!important;border-radius:12px!important;padding-right:36px!important;padding-left:34px!important;font-size:.82rem!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .search>svg{right:11px!important;width:17px!important;height:17px!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .sortWrap{grid-column:auto!important;width:auto!important;min-width:0!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .sort{width:100%!important;min-width:0!important;height:40px!important;border-radius:12px!important;padding:0 6px!important;font-size:.74rem!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolrow>.an-hide-models{align-self:center;height:40px;min-height:40px;padding:0 10px;border-radius:12px;font-size:.78rem;gap:4px}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsBottom{gap:6px 8px!important;padding-top:7px!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .chips{gap:5px!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .chip{gap:5px!important;min-height:34px!important;height:34px!important;padding:0 10px 0 9px!important;font-size:.78rem!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .chip .an-chip-i{flex-basis:16px;width:16px;height:16px}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .chip[data-an-n]::after{min-width:20px;height:18px;padding:0 5px;font-size:.66rem}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .an-tools-note__btn{min-height:28px;padding:3px 9px 3px 8px;font-size:.72rem;gap:5px}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .an-tools-note__i{width:15px;height:15px;font-size:.64rem}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsBottom>:is(.an-tools-count,.an-cat-count){font-size:.74rem!important}
}
@media (max-width:360px){
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsPanel{padding:6px!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsPanel .toolrow,
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolsPanel .toolrow:has(>.an-hide-models){grid-template-columns:minmax(0,1fr) 92px auto!important;gap:5px!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .sort{font-size:.68rem!important;padding:0 4px!important}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolrow>.an-hide-models{padding:0 8px;font-size:.74rem}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .chip{padding:0 9px 0 8px!important;font-size:.75rem!important}
}
/* the narrowest phones: «اقفل» keeps its arrow only (its label stays for screen readers), the search gets the room */
@media (max-width:380px){
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolrow>.an-hide-models{width:40px;padding:0;justify-content:center}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolrow>.an-hide-models .an-hm-s{display:none}
  html body section:is(#tools,#categoryTools,#tableTools).an-product-tools .toolrow>.an-hide-models svg{width:17px;height:17px}
}