/* 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}
}