/* ==========================================================
   ANDALUS_HOME_READABILITY_V1 — homepage only (index.php)
   Same rules as /24 (AFS_READABILITY_V3):
   - Scale: 13 · 14 · 15 · 17 · 19 · 22 · 28 · 36 px, line-height ≥ 1.55.
   - Nothing the customer must read is under 13px.
   - Desktop body text 18px.
   - Numbers read left-to-right inside Arabic lines.
   Loaded last in <head>, so it wins over the older layered sheets.
   ========================================================== */

/* ---------- Header (homepage copy only) ---------- */
html body .an-site-menu-btn__label{ font-size:14px !important; }
html body .an-site-header .an-site-mobile-actions a,
html body .an-site-header .an-site-mobile-actions a span{ font-size:13px !important; }
html body .an-site-brand small{ font-size:13px !important; }
html body .an-google-rating-badge small{ font-size:13px !important; }
html body .an-site-header .an-site-benefit,
html body .an-site-header .an-site-benefit span,
html body .an-site-header .an-site-benefit strong{ font-size:13px !important; }

/* ---------- Hero ---------- */
html body .homeHeroMain{ min-height:0; padding:40px 44px; }
html body .homeHero .heroKicker{ font-size:15px !important; }
html body .homeHero h1{ font-size:clamp(2.2rem,4.2vw,4.2rem) !important; line-height:1.12 !important; margin:14px 0 16px !important; }

html body .heroPromise{
    position:relative; z-index:1;
    list-style:none; margin:0; padding:0;
    display:grid; gap:10px; max-width:720px;
}
html body .heroPromise li{
    background:rgba(255,255,255,.82);
    border:1px solid #e6cfbb;
    border-radius:16px;
    padding:12px 16px;
    color:#3d2a20;
    font-size:19px; font-weight:800; line-height:1.6;
}
html body .heroPromise li strong{ color:var(--brand,#6f442f); font-weight:900; }

html body .homeHero .heroActions{ position:relative; z-index:1; margin-top:20px; gap:10px; }
html body .homeHero .heroBtn{ min-height:56px; font-size:19px; opacity:1 !important; }
html body .homeHero .heroBtn.secondary{ color:var(--brand,#6f442f) !important; border-color:#cfae95 !important; background:#fff !important; }
html body .heroBtn.wa,
html body .floatwa{
    background:#128c4a !important;
    color:#fff !important;
    border-color:#128c4a !important;
}

html body .heroFacts{
    position:relative; z-index:1;
    list-style:none; margin:18px 0 0; padding:0;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;
}
html body .heroFacts li{
    background:#fff; border:1px solid var(--line,#eadfd5); border-radius:14px;
    padding:10px 12px; display:flex; flex-direction:column; gap:2px;
}
html body .heroFacts strong{ font-size:17px; font-weight:900; color:var(--dark,#24160f); line-height:1.3; }
html body .heroFacts span{ font-size:14px; font-weight:750; color:var(--soft,#7b6558); line-height:1.5; }

/* Hero finance example (desktop / tablet) */
html body .heroFinance h2{ font-size:clamp(1.6rem,2.2vw,2.1rem) !important; }
html body .heroFinance p{ font-size:16px !important; line-height:1.7; }
html body .heroFinance .financeBadge{ font-size:14px !important; }
html body .financeExample > span{ font-size:17px !important; }
html body .financeCo{ gap:4px !important; }
html body .financeCo strong{ font-size:19px !important; direction:rtl !important; unicode-bidi:isolate; }
html body .financeCo small{ font-size:14px !important; line-height:1.5 !important; text-align:right !important; }
html body .financeNote{ font-size:13px !important; line-height:1.7 !important; }

/* ---------- Section heads ---------- */
html body .sectionKicker{ font-size:14px !important; }
html body #main-content .homeSectionHead h2,
html body #main-content .sectionHeading{ font-size:clamp(1.7rem,2.6vw,2.5rem) !important; line-height:1.25 !important; }
html body #main-content .sectionLead{ font-size:17px !important; line-height:1.7 !important; }

/* ---------- Categories ---------- */
html body .catCard strong,
html body .catCardCopy strong{ font-size:1.35rem !important; }
html body .catCard span,
html body .catCardCopy span{ font-size:15px !important; line-height:1.55 !important; }
html body .catCard .arrow{ font-size:15px !important; }
html body .allBtn{ font-size:16px !important; min-height:50px !important; }

/* ---------- Search / filter bar ---------- */
html body #tools .selectedCopy span,
html body .sortWrap span{ font-size:13px !important; }
html body .search input{ font-size:16px !important; }
html body #tools .searchHelp{ font-size:13px !important; }
html body #tools .chip{ font-size:15px !important; min-height:40px !important; padding:6px 14px !important; }

/* ---------- Product cards ---------- */
html body #catalog #grid .product .tag,
html body #catalog #grid .product .multi{ font-size:13px !important; }
html body #catalog #grid .product .photo:after{ font-size:13px !important; }
html body #catalog #grid .product .cat{ font-size:13px !important; }
html body #catalog #grid .product .model{ font-size:15px !important; }
html body #catalog #grid .product .ptitle{ font-size:19px !important; line-height:1.4 !important; }

/* Cash price: one label only (the old ::before repeated it) */
html body #catalog #grid .product .price:before{ content:none !important; display:none !important; }
html body #catalog #grid .product .price span{ font-size:14px !important; }
html body #catalog #grid .product .price strong{ font-size:22px !important; direction:rtl; unicode-bidi:isolate; }

/* "Installment starts from" */
html body #catalog #grid .product .amanQuick span{ font-size:14px !important; }
html body #catalog #grid .product .amanQuick strong{ font-size:19px !important; direction:rtl !important; unicode-bidi:isolate; }
html body #catalog #grid .product .amanQuick small{ font-size:14px !important; font-weight:750; display:inline-block !important; white-space:nowrap !important; }
html body #catalog #grid .product .amanQuick{ flex-wrap:wrap !important; row-gap:2px !important; height:auto !important; min-height:0 !important; }
html body #catalog #grid .product .amanQuick > span{ white-space:nowrap !important; }
html body #catalog #grid .product .amanQuick strong{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; max-width:100% !important; }

/* Plan table inside "شوف أقساط..." */
html body #catalog #grid .product .amanCalc summary{ font-size:15px !important; line-height:1.5 !important; }
html body #catalog #grid .product .anFinanceCo{ font-size:15px !important; padding-top:6px !important; }
html body #catalog #grid .product .amanPlans{ gap:6px !important; }
html body #catalog #grid .product .amanPlan{ padding:9px 6px !important; min-height:0 !important; height:auto !important; }
html body #catalog #grid .product .amanPlan span{ font-size:14px !important; white-space:normal !important; }
html body #catalog #grid .product .amanPlan strong{ font-size:16px !important; white-space:nowrap !important; direction:rtl !important; unicode-bidi:isolate; letter-spacing:0 !important; }
html body #catalog #grid .product .amanPlan small{ font-size:13px !important; white-space:normal !important; line-height:1.45 !important; letter-spacing:0 !important; }
/* Plans (all sizes): one readable row per term instead of 3 squeezed boxes */
html body #catalog #grid .product .amanPlans{ grid-template-columns:1fr !important; gap:5px !important; }
html body #catalog #grid .product .amanPlan{
display:grid !important;
grid-template-columns:auto auto minmax(0,1fr) !important;
grid-template-rows:auto !important;
align-items:center !important; gap:12px !important; padding:9px 12px !important;
}
html body #catalog #grid .product .amanPlan > *{ width:auto !important; grid-row:1 !important; margin:0 !important; }
html body #catalog #grid .product .amanPlan > span{ grid-column:1 !important; font-size:14px !important; text-align:right !important; }
html body #catalog #grid .product .amanPlan > strong{ grid-column:2 !important; font-size:16px !important; text-align:right !important; white-space:nowrap !important; }
html body #catalog #grid .product .amanPlan > small{ grid-column:3 !important; font-size:13px !important; text-align:left !important; white-space:normal !important; line-height:1.45 !important; }
html body #catalog #grid .product .anFinanceCo{ text-align:right !important; }

/* Tablet + desktop cards are narrow: monthly on top, total/fee under it */
@media(min-width:701px){
    html body #catalog #grid .product .amanPlan{ grid-template-columns:auto minmax(0,1fr) !important; grid-template-rows:auto auto !important; row-gap:2px !important; }
    html body #catalog #grid .product .amanPlan > span{ grid-column:1 !important; grid-row:1 / span 2 !important; }
    html body #catalog #grid .product .amanPlan > strong{ grid-column:2 !important; grid-row:1 !important; text-align:left !important; }
    html body #catalog #grid .product .amanPlan > small{ grid-column:2 !important; grid-row:2 !important; text-align:left !important; }
}

html body #catalog #grid .product .amanCalcNote{ font-size:13px !important; line-height:1.7 !important; }

html body #catalog #grid .actions.threeActions > .ask,
html body #catalog #grid .actions.threeActions > .productDetails,
html body #catalog #grid .actions.threeActions > .shareProduct,
html body #catalog #grid .actions.threeActions > .shareProduct span{ font-size:15px !important; }

html body #catalog #grid .actions.threeActions > .productDetails{ font-size:14px !important; padding-inline:4px !important; white-space:nowrap !important; overflow:visible !important; }

/* ---------- Services, journey, visit, why ---------- */
html body .serviceCard h3{ font-size:1.15rem !important; }
html body .serviceCard p{ font-size:15px !important; line-height:1.65 !important; }
html body .journeyStep h3{ font-size:1.15rem !important; }
html body .journeyStep p{ font-size:15px !important; line-height:1.7 !important; }
html body .visitBox p{ font-size:17px !important; line-height:1.7 !important; }
html body .visitPhones a{ font-size:17px !important; direction:ltr; }
html body .seoText p{ font-size:16px !important; line-height:1.9 !important; }

/* ==========================================================
   Phone: first screen = headline + two systems + buttons
   ========================================================== */
@media(max-width:700px){
    html body .homeHero{ padding:12px 0 6px !important; }
    html body .homeHeroMain{ padding:22px 16px !important; border-radius:22px !important; }
    html body .homeHero .heroKicker{ font-size:14px !important; }
    html body .homeHero h1{ font-size:clamp(1.95rem,8.6vw,2.5rem) !important; margin:10px 0 12px !important; }
    html body .heroPromise{ gap:8px; }
    html body .heroPromise li{ font-size:16px; padding:10px 12px; border-radius:14px; line-height:1.6; }
    html body .homeHero .heroActions{ display:grid !important; grid-template-columns:1fr 1fr !important; margin-top:14px !important; gap:8px !important; }
    html body .homeHero .heroActions .heroBtn{ min-height:52px !important; font-size:17px !important; padding:0 10px !important; }
    html body .homeHero .heroActions .heroBtn.primary{ grid-column:1 / -1; }
    html body .heroFacts{ grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }
    html body .heroFacts li{ padding:8px 10px; border-radius:12px; }
    html body .heroFacts strong{ font-size:15px; }
    html body .heroFacts span{ font-size:13px; }


    html body #main-content .homeSectionHead h2,
    html body #main-content .sectionHeading{ font-size:1.6rem !important; }
    html body #main-content .sectionLead{ font-size:15px !important; }

    /* Categories: two columns, whole card is the button */
    html body .categoryPick{ grid-template-columns:1fr 1fr !important; gap:8px !important; }
    html body .catCard{
        display:flex !important; flex-direction:column !important;
        align-items:center !important; justify-content:flex-start !important;
        text-align:center !important; padding:14px 8px !important;
        gap:6px !important; min-height:0 !important; border-radius:18px !important;
    }
    html body .catCard .catIcon{ width:52px !important; height:52px !important; border-radius:16px !important; margin:0 !important; }
    html body .catCard .catIcon svg{ width:34px !important; height:34px !important; }
    html body .catCardCopy{ align-items:center !important; text-align:center !important; }
    html body .catCard strong,
    html body .catCardCopy strong{ font-size:17px !important; }
    html body .catCard span,
    html body .catCardCopy span{ font-size:13px !important; line-height:1.5 !important; }
    html body .catCard .arrow{ display:none !important; }

    html body #tools .chip{ font-size:14px !important; min-height:38px !important; padding:5px 12px !important; }


    /* Services: titles only on phones (short page, every card still tappable) */
    html body .servicesGrid{ grid-template-columns:1fr 1fr !important; gap:8px !important; }
    html body .serviceCard{ min-height:0 !important; padding:14px 12px 14px !important; }
    html body .serviceCard h3{ font-size:16px !important; margin:8px 0 0 !important; }
    html body .serviceCard p{ display:none !important; }
    html body .serviceCard:after{ display:none !important; }

    /* Journey: 2 x 2 */
    html body .journeyGrid{ grid-template-columns:1fr 1fr !important; gap:8px !important; }
    html body .journeyStep{ display:block !important; padding:14px 12px !important; }
    html body .journeyStep:before{ margin-bottom:8px !important; width:34px !important; height:34px !important; }
    html body .journeyStep h3{ font-size:16px !important; }
    html body .journeyStep p{ font-size:14px !important; line-height:1.6 !important; }

    html body .visitBox p{ font-size:16px !important; }
    html body .seoText p{ font-size:15px !important; }
}

@media(max-width:360px){
    html body .homeHero .heroActions{ grid-template-columns:1fr !important; }
    html body .heroFacts{ grid-template-columns:1fr; }
}

/* ==========================================================
   Tablet
   ========================================================== */
@media(min-width:701px) and (max-width:1100px){
    html body .heroFacts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    html body .homeHero .heroActions{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}

/* Phone + tablet: the hero is one column here, so the example card would push the
   categories a full screen down. Every product card already shows its installments. */
@media(max-width:1100px){
    html body .heroFinance{ display:none !important; }
}

/* ==========================================================
   Desktop & laptop: no magnifying glass needed
   ========================================================== */
@media(min-width:1101px){
    html body #main-content{ font-size:18px; }
    html body .heroPromise li{ font-size:20px; }
    html body #main-content .sectionLead{ font-size:18px !important; }
    html body .catCard span,
    html body .catCardCopy span{ font-size:16px !important; }
    html body #catalog #grid .product .ptitle{ font-size:20px !important; }
    html body .serviceCard p,
    html body .journeyStep p{ font-size:16px !important; }
    html body .seoText p{ font-size:18px !important; }
}
html body .an-photo-cue, html body .an-photo-cue span{ font-size:13px !important; }