/* Bella's Beauty Bar - shared site styles (header, footer, inner pages, blog)
   Theme kept from the home page: Playfair Display + Open Sans,
   white / light grey (#f6f6f6) sections, near-black (#1b1b1b) buttons. */
:root{
  --bb-ink:#1b1b1b;
  --bb-text:#474747;
  --bb-muted:#6b6b6b;
  --bb-line:#e2e2e2;
  --bb-alt:#f6f6f6;
  --bb-white:#ffffff;
  --bb-head:'Playfair Display',Georgia,'Times New Roman',serif;
  --bb-body:'Open Sans',Arial,Helvetica,sans-serif;
  --bb-wrap:1160px;
}

/* ---------- base (inner pages only) ---------- */
body.bb-site{margin:0;background:var(--bb-white);color:var(--bb-text);font-family:var(--bb-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.bb-site *,.bb-site *::before,.bb-site *::after{box-sizing:border-box}
.bb-site img{max-width:100%;height:auto;display:block}
.bb-site h1,.bb-site h2,.bb-site h3{font-family:var(--bb-head);color:var(--bb-ink);font-weight:400;line-height:1.25;margin:0 0 .6em}
.bb-site h1{font-size:clamp(2rem,4.5vw,3.1rem)}
.bb-site h2{font-size:clamp(1.55rem,3vw,2.1rem);margin-top:1.6em}
.bb-site h3{font-size:clamp(1.2rem,2.2vw,1.4rem);margin-top:1.4em}
.bb-site p{margin:0 0 1.1em}
.bb-site a{color:var(--bb-ink);text-decoration:underline;text-underline-offset:3px}
.bb-site a:hover{color:#000}
.bb-site ul,.bb-site ol{margin:0 0 1.2em;padding-left:1.3em}
.bb-site li{margin-bottom:.45em}
.bb-site strong{color:var(--bb-ink)}
.bb-site :focus-visible{outline:2px solid var(--bb-ink);outline-offset:3px}

.bb-skip{position:absolute;left:-9999px;top:0;background:var(--bb-ink);color:#fff;padding:10px 16px;z-index:2000}
.bb-skip:focus{left:10px;top:10px;color:#fff}

/* ---------- header / navigation (used on every page) ---------- */
.bb-header{position:sticky;top:0;z-index:1500;background:var(--bb-white);border-bottom:1px solid var(--bb-line);font-family:var(--bb-body)}
.bb-header *{box-sizing:border-box}
.bb-header__inner{max-width:var(--bb-wrap);margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.bb-logo{font-family:var(--bb-head);font-size:1.45rem;color:var(--bb-ink)!important;text-decoration:none!important;letter-spacing:.01em;line-height:1.2;white-space:nowrap}
.bb-logo small{display:block;font-family:var(--bb-body);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bb-muted)}
.bb-nav{display:flex;align-items:center}
.bb-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.bb-nav li{margin:0}
.bb-nav a{display:block;padding:8px 11px;color:var(--bb-ink)!important;text-decoration:none!important;font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid transparent}
.bb-nav a:hover,.bb-nav a[aria-current="page"]{border-bottom-color:var(--bb-ink)}
.bb-nav .bb-nav__cta a{background:var(--bb-ink);color:#fff!important;padding:10px 18px;border:0;margin-left:8px}
.bb-nav .bb-nav__cta a:hover{background:#000}
.bb-nav-toggle{position:absolute;opacity:0;pointer-events:none}
.bb-burger{display:none;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--bb-line)}
.bb-burger span,.bb-burger span::before,.bb-burger span::after{display:block;width:20px;height:2px;background:var(--bb-ink);position:relative;content:""}
.bb-burger span::before{position:absolute;top:-6px}
.bb-burger span::after{position:absolute;top:6px}
@media (max-width:1020px){
  .bb-burger{display:flex}
  .bb-nav{display:none;width:100%}
  .bb-nav-toggle:checked ~ .bb-nav{display:block}
  .bb-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:6px 0 10px}
  .bb-nav a{padding:12px 4px;border-bottom:1px solid var(--bb-line)}
  .bb-nav a:hover,.bb-nav a[aria-current="page"]{border-bottom-color:var(--bb-line);background:var(--bb-alt)}
  .bb-nav .bb-nav__cta a{margin:12px 0 0;text-align:center}
}

/* ---------- page hero ---------- */
.bb-hero{position:relative;background:#2b2b2b center/cover no-repeat;color:#fff;text-align:center}
.bb-hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.bb-hero__inner{position:relative;max-width:860px;margin:0 auto;padding:90px 20px 80px}
.bb-site .bb-hero h1{color:#fff;margin:0 0 .35em}
.bb-hero p{color:#f2f2f2;font-size:1.1rem;margin:0 auto 1.4em;max-width:640px}
.bb-hero--small .bb-hero__inner{padding:64px 20px 56px}

/* ---------- buttons ---------- */
.bb-btn{display:inline-block;background:var(--bb-ink);color:#fff!important;text-decoration:none!important;font-family:var(--bb-body);font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:15px 30px;border:2px solid var(--bb-ink);transition:background .2s,color .2s}
.bb-btn:hover{background:#000;color:#fff!important}
.bb-btn--ghost{background:transparent;color:var(--bb-ink)!important}
.bb-btn--ghost:hover{background:var(--bb-ink);color:#fff!important}
.bb-btn--light{background:#fff;color:var(--bb-ink)!important;border-color:#fff}
.bb-btn--light:hover{background:transparent;color:#fff!important}
.bb-btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ---------- layout ---------- */
.bb-section{padding:72px 20px;font-family:var(--bb-body)}
.bb-section--alt{background:var(--bb-alt)}
.bb-wrap{max-width:var(--bb-wrap);margin:0 auto}
.bb-narrow{max-width:780px;margin:0 auto}
.bb-center{text-align:center}
.bb-rule{width:56px;height:1px;background:#bdbdbd;border:0;margin:0 auto 28px}
.bb-lead{font-size:1.12rem;color:var(--bb-text)}
.bb-grid{display:grid;gap:28px}
.bb-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.bb-grid--2,.bb-grid--3{grid-template-columns:1fr}.bb-section{padding:56px 18px}}

.bb-card{background:#fff;border:1px solid var(--bb-line);padding:28px;height:100%}
.bb-section--alt .bb-card{border-color:#e8e8e8}
.bb-site .bb-card h2,.bb-site .bb-card h3{margin-top:0}
.bb-card p:last-child{margin-bottom:0}

/* breadcrumb */
.bb-breadcrumb{max-width:var(--bb-wrap);margin:0 auto;padding:14px 20px 0;font-size:.85rem;color:var(--bb-muted)}
.bb-breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.bb-breadcrumb li{margin:0}
.bb-breadcrumb li+li::before{content:"/";margin-right:6px;color:#b5b5b5}
.bb-breadcrumb a{color:var(--bb-muted)}

/* info list / steps / faq */
.bb-steps{counter-reset:step;list-style:none;padding:0}
.bb-steps li{counter-increment:step;position:relative;padding:0 0 18px 56px;margin:0}
.bb-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:38px;height:38px;border:1px solid var(--bb-ink);font-family:var(--bb-head);display:flex;align-items:center;justify-content:center;color:var(--bb-ink)}
.bb-faq details{border-bottom:1px solid var(--bb-line);padding:16px 0}
.bb-faq summary{cursor:pointer;font-family:var(--bb-head);font-size:1.15rem;color:var(--bb-ink);list-style:none}
.bb-faq summary::-webkit-details-marker{display:none}
.bb-faq summary::after{content:"+";float:right;font-family:var(--bb-body)}
.bb-faq details[open] summary::after{content:"\2013"}
.bb-faq details p{margin:.8em 0 0}
.bb-note{background:var(--bb-alt);border-left:3px solid var(--bb-ink);padding:18px 22px;margin:1.5em 0}
.bb-note p:last-child{margin:0}

/* gallery */
.bb-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.bb-gallery figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--bb-alt)}
.bb-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.bb-gallery figure:hover img{transform:scale(1.03)}

/* blog list */
.bb-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:980px){.bb-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bb-posts{grid-template-columns:1fr}}
.bb-post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bb-line);height:100%}
.bb-post-card__img{aspect-ratio:2/1;background:var(--bb-alt);overflow:hidden;display:flex;align-items:center;justify-content:center}
.bb-post-card__img img{width:100%;height:100%;object-fit:cover}
.bb-post-card__img{text-decoration:none!important}
.bb-post-card__img--text{background:var(--bb-ink);aspect-ratio:3/1}
.bb-post-card__img span{font-family:var(--bb-head);font-size:1.35rem;color:#fff;letter-spacing:.06em;border-top:1px solid rgba(255,255,255,.45);border-bottom:1px solid rgba(255,255,255,.45);padding:6px 4px}
.bb-home-section .bb-post-card h3{font-size:1.2rem}
.bb-home-section .bb-post-card a{text-decoration:none}
.bb-home-section .bb-card a,.bb-home-section .bb-faq a,.bb-home-section .bb-intro a{text-decoration:underline;text-underline-offset:3px}
.bb-post-card__body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.bb-post-card__cat{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bb-muted);margin:0 0 8px}
.bb-site .bb-post-card h2,.bb-site .bb-post-card h3{font-size:1.25rem;margin:0 0 10px}
.bb-post-card h2 a,.bb-post-card h3 a{text-decoration:none;color:var(--bb-ink)}
.bb-post-card p{font-size:.95rem;margin:0 0 16px}
.bb-post-card__more{margin-top:auto;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* article */
.bb-article{max-width:780px;margin:0 auto;padding:40px 20px 30px}
.bb-article__meta{font-size:.85rem;color:var(--bb-muted);letter-spacing:.04em;margin-bottom:1.6em}
.bb-article__figure{margin:0 0 2em}
.bb-article__figure img{width:100%}
.bb-article table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:.95rem}
.bb-article th,.bb-article td{border:1px solid var(--bb-line);padding:10px 12px;text-align:left;vertical-align:top}
.bb-article th{background:var(--bb-alt);color:var(--bb-ink)}
.bb-table-scroll{overflow-x:auto}
.bb-cta-box{background:var(--bb-ink);color:#f1f1f1;padding:34px 30px;text-align:center;margin:2.4em 0 1em}
.bb-site .bb-cta-box h2{color:#fff;margin-top:0}
.bb-cta-box p{color:#e6e6e6}
.bb-related{border-top:1px solid var(--bb-line);margin-top:2.4em;padding-top:1.4em}
.bb-related ul{padding-left:1.1em}

/* ---------- footer (used on every page) ---------- */
.bb-footer{background:var(--bb-ink);color:#cfcfcf;font-family:var(--bb-body);font-size:15px;line-height:1.7}
.bb-footer *{box-sizing:border-box}
.bb-footer__grid{max-width:var(--bb-wrap);margin:0 auto;padding:56px 20px 36px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
@media (max-width:860px){.bb-footer__grid{grid-template-columns:1fr;gap:28px}}
.bb-footer__brand{font-family:var(--bb-head);font-size:1.5rem;color:#fff;margin:0 0 10px}
.bb-footer__title{font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.bb-footer p{margin:0 0 12px}
.bb-footer ul{list-style:none;margin:0;padding:0}
.bb-footer li{margin:0 0 6px}
.bb-footer a{color:#e9e9e9;text-decoration:none}
.bb-footer a:hover{color:#fff;text-decoration:underline}
.bb-footer address{font-style:normal;margin:0 0 12px}
.bb-footer .bb-btn{margin-top:6px}
.bb-footer__bottom{border-top:1px solid #333;text-align:center;padding:18px 20px;font-size:.85rem;color:#a8a8a8}
.bb-footer__bottom p{margin:0}

/* ---------- extra sections injected into the home page ---------- */
.bb-home-section{font-family:var(--bb-body);color:var(--bb-text);font-size:16px;line-height:1.7}
.bb-home-section *{box-sizing:border-box}
.bb-home-section h2{font-family:var(--bb-head);font-weight:400;color:var(--bb-ink);font-size:clamp(1.7rem,3.4vw,2.4rem);text-align:center;margin:0 0 18px;line-height:1.25}
.bb-home-section h3{font-family:var(--bb-head);font-weight:400;color:var(--bb-ink);font-size:1.3rem;margin:0 0 10px;line-height:1.3}
.bb-home-section p{margin:0 0 1em}
.bb-home-section a{color:var(--bb-ink)}
.bb-home-section .bb-intro{max-width:760px;margin:0 auto 34px;text-align:center}

/* links added inside the original home "About" text */
[id="3d36bdee-a4a7-4f09-9250-5d93c2bbd5b0"] p a{color:#1b1b1b;text-decoration:underline;text-underline-offset:3px}