/* ANDALUS_CSS_BUNDLE_V1: andalus-catalog-price-v1.css + andalus-guides-v1.css */
/* == andalus-catalog-price-v1.css == */
/* ANDALUS_CATALOG_PRICE_CLEAR_V1 (19 Oct 2026) — price and installments on the category cards
   (bedroom2, kids2, dining2, corner2, living2). Cash price, the lowest monthly installment in
   one line, and every plan behind "كل أنظمة التقسيط". Loaded last in <head>.
   Site rules: text never under 13px, English digits, WhatsApp green #128c4a. */

/* The "غرف النوم · 1" row repeated the page section and the model number in the title. */
.an-cat .an-cat-card .an-cat-meta{display:none!important}
.an-cat .an-cat-card .ptitle{margin-top:2px!important}

/* The price block itself now lives in andalus-price-card-v1.css (shared with the homepage and /live). */

/* Card buttons: same 13px floor as the rest of the site (they were 11px on wide screens). */
html body .an-cat .an-cat-actions-row.pactions > .an-cat-btn,
html body .an-cat .an-cat-actions-row.pactions > button,
html body .an-cat .an-cat-actions-row.pactions > .an-cat-share .an-cat-sr-only{font-size:15px!important}


/* Opening the plans of one card shouldn't stretch the other cards in its row. */
.an-cat .an-cat-grid{align-items:start}

/* == andalus-guides-v1.css == */
/* ANDALUS_GUIDES_V1 (20 Oct 2026) — /guides/ (hub + buying guides, classes .ang-) and the
   category intro block under the models grid (.an-sec-intro, includes/andalus-section-intro.php).
   Site rules: font sizes only 13/14/15/17/19/22/28/36px (body 17px mobile, 18px desktop),
   nothing under 13px, English digits, WhatsApp buttons green, tables scroll inside .ang-table.
   Loaded last in <head>. Selectors start with "html body" so the shared CSS loaded later in
   the footer doesn't win; line-height comes from andalus-readability-v20.css (1.82 / 1.92). */

:root{
  --ang-ink:var(--an-copy,#312e38);
  --ang-muted:var(--an-copy-soft,#6f6a75);
  --ang-line:var(--an-stroke,#e6e3e8);
  --ang-soft:var(--an-canvas,#f7f7f9);
  --ang-paper:var(--an-surface,#fff);
  --ang-brand:var(--an-coral,#f23849);
  --ang-link:#b4232f;
  --ang-wa:#128c4a;
  --ang-wa-dark:#0e7a40;
}

/* ---------- /guides/ pages ---------- */
html body main.ang{
  background:var(--ang-soft);
  color:var(--ang-ink);
  padding:20px 0 40px;
  font-variant-numeric:lining-nums;
}
html body main.ang .ang-wrap{
  max-width:760px;
  margin:0 auto;
  padding:0 16px;
  box-sizing:border-box;
}
html body main.ang .ang-wrap--wide{max-width:1040px}
html body main.ang .ang-article{
  background:var(--ang-paper);
  border:1px solid var(--ang-line);
  border-radius:18px;
  padding:20px 18px 26px;
  max-width:760px;
}
@media (max-width:792px){
  html body main.ang .ang-article{border-radius:0;border-left:0;border-right:0}
}
html body main.ang,
html body main.ang p,
html body main.ang li,
html body main.ang td,
html body main.ang th,
html body main.ang summary{font-size:17px}
html body main.ang :where(p,li,td,th){overflow-wrap:anywhere}

html body main.ang .ang-crumbs{font-size:14px;color:var(--ang-muted);margin:0 0 10px}
html body main.ang .ang-crumbs a{color:var(--ang-muted);text-decoration:underline;text-underline-offset:3px}
html body main.ang h1{font-size:28px;font-weight:800;margin:0 0 8px;color:var(--ang-ink)}
html body main.ang .ang-updated{font-size:14px;color:var(--ang-muted);margin:0 0 18px}
html body main.ang .ang-lead{font-size:17px;color:var(--ang-muted);margin:0 0 20px}
html body main.ang h2{font-size:22px;font-weight:800;margin:30px 0 10px;color:var(--ang-ink)}
html body main.ang h3{font-size:19px;font-weight:700;margin:22px 0 8px}
html body main.ang .ang-body > p{margin:0 0 14px}
html body main.ang .ang-body > :first-child{margin-top:0}
html body main.ang .ang-body ul,
html body main.ang .ang-body ol{margin:0 0 16px}
html body main.ang .ang-body strong{font-weight:700;color:var(--ang-ink)}
html body main.ang a{color:var(--ang-link);text-underline-offset:3px}

/* Tables: scroll sideways inside their own box on phones, never the page. */
html body main.ang .ang-table,
html body .an-sec-intro .ang-table{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 0 18px;
  border:1px solid var(--ang-line);
  border-radius:12px;
  max-width:100%;
}
html body main.ang .ang-table table,
html body .an-sec-intro .ang-table table{
  border-collapse:collapse;
  width:100%;
  min-width:560px;
  background:var(--ang-paper);
}
html body main.ang .ang-table th,
html body main.ang .ang-table td,
html body .an-sec-intro .ang-table th,
html body .an-sec-intro .ang-table td{
  font-size:15px;
  padding:9px 10px;
  border-bottom:1px solid var(--ang-line);
  text-align:right;
  vertical-align:top;
  line-height:1.6;
}
html body main.ang .ang-table th{background:var(--ang-soft);font-weight:700;white-space:nowrap}
html body main.ang .ang-table tr:last-child td{border-bottom:0}

/* WhatsApp links in the text = green buttons. */
html body main.ang a[href^="https://wa.me"],
html body .an-sec-intro a[href^="https://wa.me"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 18px;
  border-radius:12px;
  background:var(--ang-wa);
  color:#fff!important;
  font-size:17px;
  font-weight:700;
  text-decoration:none;
  line-height:1.4;
  max-width:100%;
  box-sizing:border-box;
  text-align:center;
}
html body main.ang a[href^="https://wa.me"]:hover,
html body .an-sec-intro a[href^="https://wa.me"]:hover{background:var(--ang-wa-dark)}

/* FAQ */
html body main.ang .ang-faq{margin-top:30px}
html body main.ang details,
html body .an-sec-intro details{
  border:1px solid var(--ang-line);
  border-radius:12px;
  background:var(--ang-paper);
  margin:0 0 10px;
}
html body main.ang summary,
html body .an-sec-intro summary{
  cursor:pointer;
  font-weight:700;
  padding:12px 14px;
  list-style-position:inside;
}
html body main.ang details > div,
html body main.ang details > p,
html body .an-sec-intro details > p{padding:0 14px 12px;margin:0}
html body main.ang details p{margin:0}

/* Other guides + shop links */
html body main.ang .ang-more,
html body main.ang .ang-shop{margin-top:30px}
html body main.ang .ang-more__list{padding-inline-start:20px;margin:0}
html body main.ang .ang-more__list a{font-weight:600}
html body main.ang .ang-shop__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
html body main.ang .ang-shop__list li{margin:0!important}
html body main.ang .ang-shop__list a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 14px;
  border:1px solid var(--ang-line);
  border-radius:999px;
  background:var(--ang-paper);
  color:var(--ang-ink);
  font-size:15px;
  font-weight:700;
  text-decoration:none;
}

/* Hub cards */
html body main.ang .ang-cards{
  list-style:none;
  padding:0;
  margin:0 0 10px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
html body main.ang .ang-card{
  margin:0!important;
  background:var(--ang-paper);
  border:1px solid var(--ang-line);
  border-radius:16px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
html body main.ang .ang-card__title{font-size:19px;margin:0}
html body main.ang .ang-card__title a{color:var(--ang-ink);text-decoration:none}
html body main.ang .ang-card__text{font-size:15px;color:var(--ang-muted);margin:0;flex:1}
html body main.ang .ang-card__go{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 18px;
  border-radius:10px;
  background:var(--an-graphite,#2d2a35);
  color:#fff;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
}

@media (min-width:760px){
  html body main.ang{padding:32px 0 56px}
  html body main.ang .ang-article{padding:32px 40px 36px}
  html body main.ang,
  html body main.ang p,
  html body main.ang li,
  html body main.ang summary{font-size:18px}
  html body main.ang h1{font-size:36px}
  html body main.ang h2{font-size:28px}
  html body main.ang .ang-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Category intro under the models grid (catalog-page.php) ---------- */
/* Neutralise the old an2-guide box styles from site_runtime.php's an2_css(). */
html body section.an2-guide[data-an-sec-intro]{
  max-width:none;
  margin:0;
  padding:28px 0 8px;
  border:0;
  border-radius:0;
  background:transparent;
}
html body .an-sec-intro{
  max-width:760px;
  margin:0 auto;
  padding:20px 18px 22px;
  background:var(--ang-paper);
  border:1px solid var(--ang-line);
  border-radius:18px;
  color:var(--ang-ink);
  box-sizing:border-box;
}
@media (max-width:792px){
  html body .an-sec-intro{border-radius:0;border-left:0;border-right:0}
}
html body .an-sec-intro p,
html body .an-sec-intro li,
html body .an-sec-intro summary{font-size:17px!important}
html body .an-sec-intro h2{font-size:22px!important;font-weight:800;margin:0 0 12px}
html body .an-sec-intro .an-sec-intro__faq h2,
html body .an-sec-intro .an-sec-intro__guides h2{margin-top:26px}
html body .an-sec-intro .an-sec-intro__body p{margin:0 0 14px}
html body .an-sec-intro strong{font-weight:700}
html body .an-sec-intro a{color:var(--ang-link);text-underline-offset:3px}
html body .an-sec-intro .an-sec-intro__guides ul{padding-inline-start:20px;margin:0}
html body .an-sec-intro .an-sec-intro__guides a{font-weight:600}
@media (min-width:760px){
  html body .an-sec-intro{padding:28px 36px 30px}
  html body .an-sec-intro p,
  html body .an-sec-intro li,
  html body .an-sec-intro summary{font-size:18px!important}
  html body .an-sec-intro h2{font-size:28px!important}
}