/* carolfung.com.my: the old site's look (white page, Montserrat headings, banner photo of Carol on every page). No inline styles (CSP). */
.banner .hero-bg img { object-position: 50% 22%; }
.banner.has-bg::after { background: rgba(0, 0, 0, .45); }
.banner-home { min-height: min(62vh, 520px); }
.banner-home h1 { text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.25rem, 3.2vw, 2rem); line-height: 1.45; max-width: 760px; }
.page-hero.banner { padding: clamp(72px, 12vw, 150px) 0 clamp(40px, 6vw, 64px); }
.page-hero.banner h1 { font-size: clamp(1.5rem, 3.6vw, 2.4rem); }

.page-body .prose, .page-body > .wrap { max-width: 860px; }
.page-body h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 1.6em 0 .6em; text-align: center; }
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { font-size: 1.15rem; margin: 1.4em 0 .5em; }
.page-body p, .page-body li { line-height: 1.7; }
.page-body img { display: block; height: auto; max-width: 100%; margin: 1em auto; }
.page-body .center { text-align: center; }
.page-body a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

.cols { display: grid; gap: 28px; margin: 1.2em 0; }
@media (min-width: 720px) { .cols { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.cols .col > :first-child { margin-top: 0; }
.quotes .col { background: var(--tint); border-radius: var(--radius); padding: 20px; }
.quotes img { margin: 0 auto 12px; max-width: 160px; }

.product .price { font-size: 1.2rem; }
.price del { color: var(--muted); margin-right: .4em; }
.stock { color: var(--muted); font-weight: 700; }

blockquote { margin: 1.2em 0; padding: 14px 20px; border-left: 4px solid var(--line); background: var(--tint); }
blockquote p { margin: 0 0 .3em; }
blockquote cite { font-style: normal; font-weight: 700; }
.lead-in { font-size: 1.15rem; font-weight: 700; }
ul.past li { margin: .4em 0; }
.page-hero.banner .hero-bg img { object-position: 50% 12%; }
.page-hero.banner .hero-bg img { object-position: 50% 18%; }

/* Fixes 28 Oct 2026 (Keith's review): menu on one line, list bullets, taller banners that show Carol's face */
.btn, .site-nav a { white-space: nowrap; }
.brand img { max-width: 190px; }
@media (min-width: 1081px) {
  .site-nav { gap: 22px; }
  .site-nav > ul { gap: 22px; }
  .site-nav a { font-size: .92rem; }
}
/* The menu labels are long: switch to the menu button below 1080px (base.css does it below 900px) */
@media (min-width: 901px) and (max-width: 1080px) {
  .nav-toggle { display: grid; }
  .site-nav { position: fixed; inset: var(--header-h) 0 auto 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 24px 20px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
  .site-nav.open { opacity: 1; visibility: visible; transform: none; }
  .site-nav > ul { flex-direction: column; gap: 0; }
  .site-nav > ul > li > a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
}

.page-body ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }
.page-body ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1em; }
.page-body li { margin: .25em 0; }
.page-body ul.past { list-style: none; padding-left: 0; }
ul.past li { padding: 10px 0; border-bottom: 1px solid var(--line); }

.page-hero.banner { min-height: clamp(240px, 30vw, 400px); display: flex; align-items: flex-end; }
.page-hero.banner .wrap { flex: 0 0 auto; }
.page-hero.banner .hero-bg img { object-position: 50% 13%; }
.page-hero.banner-group .hero-bg img { object-position: 50% 62%; }
@media (min-width: 900px) { .page-hero.banner:not(.banner-group) .hero-bg img { object-position: 50% 21%; } }