/* SV Botanica — shared product page stylesheet. Hero/CTA theme via --hero-1/2/3 and --cta-1. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--hero-1:#1C2A0A;--hero-2:#2E3D15;--hero-3:#3D4A1E;--cta-1:#2E3D15;
  --bark:#3D4A1E;--earth:#6B7A3A;--terra:#C17B3A;--peach:#D4974E;--gold:#C9A84C;
  --cream:#F0EDD5;--ivory:#F8F6EC;--warm-wht:#F4F2E8;--text:#1E2610;--muted:#6B6B3A;
  --border:rgba(61,74,30,0.15);--border-md:rgba(61,74,30,0.25);--green-light:#E8EDD5
}
body{font-family:'Jost','Noto Sans Thai',sans-serif;background:var(--ivory);color:var(--text);line-height:1.7;font-size:16px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* TOPBAR */
.topbar{background:var(--bark);color:rgba(240,237,213,.7);font-size:12px;padding:8px 0}
.topbar-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:0 2rem}
.topbar a{color:rgba(240,237,213,.85)}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:var(--cream);border-bottom:1px solid var(--border-md)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 2rem;height:70px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo-name{font-family:'Playfair Display','Noto Serif Thai',serif;font-size:20px;color:var(--bark);line-height:1}
.nav-logo-tag{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:12px;letter-spacing:1.5px;color:var(--bark)}
.nav-links a:hover{color:var(--terra)}
.nav-cta{background:var(--terra);color:var(--cream)!important;padding:10px 20px;border-radius:4px;font-size:11px!important;letter-spacing:1.5px!important;transition:background .2s}
.nav-cta:hover{background:var(--earth)}

/* BREADCRUMB */
.breadcrumb{background:var(--cream);border-bottom:1px solid var(--border);padding:12px 0}
.bc-inner{max-width:1200px;margin:0 auto;padding:0 2rem;font-size:12px;color:var(--muted)}
.bc-inner a{color:var(--earth)}
.bc-inner a:hover{color:var(--terra)}
.bc-sep{margin:0 .5rem;opacity:.5}

/* HERO */
.hero{background:linear-gradient(135deg,var(--hero-1) 0%,var(--hero-2) 50%,var(--hero-3) 100%);padding:4rem 2rem 3rem}
.hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
/* Hero with no product artwork yet: collapse to one column so the copy is not
   stranded beside a dead 1fr track. Emitted by svb_gold.py when the .webp is absent. */
.hero-inner.no-img{grid-template-columns:minmax(0,1fr)}
.hero-inner.no-img .hero-lead{max-width:760px}
.hero-inner.no-img .hero-badges{max-width:900px}
.hero-eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.hero h1{font-family:'Playfair Display','Noto Serif Thai',serif;font-size:2.9rem;font-weight:700;color:var(--cream);line-height:1.18;margin-bottom:.5rem}
.hero h1 em{color:var(--gold);font-style:italic}
.hero-botanical{font-size:.9rem;color:rgba(240,237,213,.55);font-style:italic;margin-bottom:1.2rem;letter-spacing:.03em}
.hero-lead{font-size:1rem;color:rgba(240,237,213,.82);line-height:1.72;margin-bottom:1.8rem;max-width:520px}
.hero-badges{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:2rem}
.badge{background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.3);color:var(--gold);font-size:.73rem;font-weight:600;padding:.28rem .72rem;border-radius:20px;letter-spacing:.04em}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn-primary{background:var(--gold);color:var(--bark);padding:.75rem 1.8rem;border-radius:5px;font-weight:700;font-size:.9rem;transition:background .2s;display:inline-block}
.btn-primary:hover{background:#d4b558}
.btn-secondary{background:transparent;border:1.5px solid rgba(240,237,213,.4);color:var(--cream);padding:.72rem 1.6rem;border-radius:5px;font-weight:500;font-size:.9rem;transition:all .2s;display:inline-block}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}
.hero-img-wrap{position:relative}
.hero-img-wrap img{width:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);aspect-ratio:3/4;object-fit:cover;object-position:center top}
.hero-img-badge{position:absolute;bottom:1.2rem;left:1.2rem;background:rgba(10,15,5,.8);backdrop-filter:blur(8px);border:1px solid rgba(201,168,76,.3);border-radius:8px;padding:.7rem 1rem}
.hero-img-badge p{color:var(--gold);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.hero-img-badge span{color:rgba(240,237,213,.7);font-size:.75rem}

/* QUICK FACTS STRIP */
.facts-strip{background:var(--bark);padding:1.2rem 2rem}
.facts-inner{max-width:1200px;margin:0 auto;display:flex;gap:0;justify-content:space-between;flex-wrap:wrap}
.fact-item{text-align:center;padding:.5rem 1.5rem;border-right:1px solid rgba(255,255,255,.1)}
.fact-item:last-child{border-right:none}
.fact-item .fv{font-family:'Playfair Display','Noto Serif Thai',serif;font-size:1.3rem;font-weight:700;color:var(--gold)}
.fact-item .fl{font-size:.72rem;color:rgba(240,237,213,.6);text-transform:uppercase;letter-spacing:.07em;margin-top:.1rem}

/* CONTENT SECTIONS */
.section{padding:3.5rem 2rem}
.section-inner{max-width:1200px;margin:0 auto}
.section-alt{background:var(--green-light)}
.section-dark{background:#1C2A0A;color:var(--cream)}
.section-bark{background:var(--bark)}
.sh{font-family:'Playfair Display','Noto Serif Thai',serif;font-size:1.85rem;color:var(--bark);margin-bottom:.4rem}
.section-dark .sh,.section-bark .sh{color:var(--cream)}
.ss{font-size:.92rem;color:var(--earth);margin-bottom:2rem;line-height:1.6}
.section-dark .ss{color:rgba(240,237,213,.6)}
.section-bark .ss{color:var(--gold)}
.prose{font-size:.95rem;line-height:1.8;color:#3a3a3a;max-width:840px}
.prose p{margin-bottom:1rem}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--bark)}
.prose a{color:var(--terra);font-weight:600;border-bottom:1px solid rgba(193,123,58,.3)}
.prose a:hover{border-bottom-color:var(--terra)}
.section-dark .prose{color:rgba(240,237,213,.82)}
.section-dark .prose strong{color:var(--gold)}
.section-dark .prose a{color:var(--gold);border-bottom-color:rgba(201,168,76,.4)}

/* TWO-COL */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem}

/* ACTIVE CONSTITUENTS */
.constituent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:1.5rem}/* SVB-CGRID */@media(max-width:600px){.constituent-grid{grid-template-columns:1fr !important}}
.constituent-card{background:#fff;border:1px solid #e0ddd0;border-radius:8px;padding:1.3rem;border-left:3px solid var(--gold)}
.constituent-card h3{font-family:'Playfair Display','Noto Serif Thai',serif;font-size:1rem;color:var(--bark);margin-bottom:.4rem}
.constituent-card p{font-size:.82rem;color:#555;line-height:1.6}

/* BENEFITS GRID */
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;margin-top:.5rem}
.benefit-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:1.5rem}
.benefit-card .icon{color:var(--gold);line-height:0;margin-bottom:.9rem}
.benefit-card .icon .ico{display:block;width:30px;height:30px}
.benefit-card:hover .icon{color:#d8b85c}
@media (prefers-reduced-motion:no-preference){.benefit-card .icon{transition:color .2s}}
.benefit-card h3{font-family:'Playfair Display','Noto Serif Thai',serif;color:var(--gold);font-size:1.05rem;margin-bottom:.5rem}
.benefit-card p{color:rgba(240,237,213,.75);font-size:.84rem;line-height:1.65}
.benefit-card cite{display:block;font-size:.75rem;color:rgba(201,168,76,.7);margin-top:.5rem;font-style:italic}

/* GRADES + SPECS TABLE */
.grades-table,.specs-table{width:100%;border-collapse:collapse;font-size:.87rem;margin-top:1rem}
.grades-table th,.specs-table th{background:var(--bark);color:var(--cream);padding:.75rem 1rem;text-align:left;font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.grades-table td,.specs-table td{padding:.7rem 1rem;border-bottom:1px solid #e0dcd0;vertical-align:top}
.grades-table tr:nth-child(even) td,.specs-table tr:nth-child(even) td{background:#f5f2e8}
.grades-table tr:hover td,.specs-table tr:hover td{background:#ede9d8}
.grades-table td:first-child,.specs-table td:first-child{font-weight:600;color:var(--bark)}
.specs-table td:first-child{width:34%}
.grade-tag{display:inline-block;background:rgba(201,168,76,.15);color:var(--terra);font-size:.7rem;font-weight:700;padding:.18rem .55rem;border-radius:3px;text-transform:uppercase;letter-spacing:.05em;margin-left:.4rem}
.spec-note{margin-top:1rem;font-size:.8rem;color:var(--earth);font-style:italic}

/* APPLICATIONS */
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;margin-top:.5rem}
.app-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1.3rem}
.app-card h3{color:var(--gold);font-family:'Playfair Display','Noto Serif Thai',serif;font-size:.97rem;margin-bottom:.5rem}
.app-card ul{list-style:none;padding:0}
.app-card ul li{color:rgba(240,237,213,.72);font-size:.82rem;padding:.2rem 0;padding-left:1rem;position:relative}
.app-card ul li::before{content:"›";position:absolute;left:0;color:var(--gold)}

/* CERTS */
.certs-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.2rem}
.cert-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:.6rem 1.1rem;color:rgba(240,237,213,.85);font-size:.82rem;font-weight:500;display:flex;align-items:center;gap:.5rem}
.cert-badge::before{content:"✓";color:var(--gold);font-weight:700}

/* RELATED */
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem;margin-top:.5rem}
.related-card{background:#fff;border:1px solid #e0ddd0;border-radius:8px;padding:1.2rem;transition:box-shadow .2s,transform .2s}
.related-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);transform:translateY(-2px)}
.related-card h3{font-family:'Playfair Display','Noto Serif Thai',serif;font-size:.95rem;color:var(--bark);margin-bottom:.3rem}
.related-card p{font-size:.78rem;color:var(--earth)}
.related-card .arr{color:var(--gold);font-size:.85rem;margin-top:.6rem;font-weight:600}

/* INSIGHTS LINKS */
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:.5rem}
.related-grid.cap-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.insight-grid,.related-grid.cap-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.insight-grid,.related-grid.cap-3{grid-template-columns:1fr}}
.insight-card{background:#fff;border:1px solid #e0ddd0;border-left:3px solid var(--terra);border-radius:8px;padding:1.2rem;transition:box-shadow .2s}
.insight-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)}
.insight-card span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--terra);font-weight:600}
.insight-card h3{font-family:'Playfair Display','Noto Serif Thai',serif;font-size:.98rem;color:var(--bark);margin:.4rem 0 .3rem}
.insight-card p{font-size:.8rem;color:var(--earth)}

/* FAQ */
.faq-list{margin-top:.5rem}
.faq-item{border-bottom:1px solid #ddd8cc;padding:1.1rem 0}
.faq-q{font-weight:600;font-size:.95rem;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;color:var(--bark);line-height:1.5}
.faq-q .toggle{flex-shrink:0;font-size:1.4rem;color:var(--gold);line-height:1;transition:transform .25s}
.faq-item.open .toggle{transform:rotate(45deg)}
.faq-a{display:none;padding:.8rem 0 .3rem;font-size:.88rem;color:#555;line-height:1.72;max-width:820px}
.faq-item.open .faq-a{display:block}
.faq-a a{color:var(--terra);font-weight:600}

/* CTA */
.cta-section{background:linear-gradient(135deg,var(--cta-1),var(--terra) 60%,var(--bark));padding:4rem 2rem;text-align:center}
.cta-section h2{font-family:'Playfair Display','Noto Serif Thai',serif;color:var(--cream);font-size:2.1rem;margin-bottom:.7rem}
.cta-section p{color:rgba(240,237,213,.82);font-size:.95rem;margin-bottom:2rem;max-width:560px;margin-left:auto;margin-right:auto}
.cta-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* FOOTER (brand house style) */
footer{background:var(--bark);color:rgba(240,237,213,.65);padding:4rem 0 2rem;font-size:.84rem}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 2rem}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(240,237,213,.1)}
.footer-brand .b-name{font-family:'Playfair Display','Noto Serif Thai',serif;font-size:18px;color:var(--cream)}
.footer-brand .b-tag{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:2px}
.footer-brand p{margin-top:.8rem;line-height:1.7;max-width:300px;color:rgba(240,237,213,.6);font-size:.82rem}
footer h4{color:var(--cream);font-size:.82rem;font-weight:600;margin-bottom:.9rem;letter-spacing:.04em;text-transform:uppercase}
footer ul{list-style:none}
footer li{margin-bottom:.5rem}
footer li a{color:rgba(240,237,213,.6);transition:color .2s}
footer li a:hover{color:var(--gold)}
.footer-bottom{max-width:1200px;margin:0 auto;padding:2rem 2rem 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.78rem;color:rgba(240,237,213,.45)}
.footer-bottom-links{display:flex;gap:1.2rem}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-inner,.two-col{grid-template-columns:1fr}
  .hero h1{font-size:2.1rem}
  .three-col{grid-template-columns:1fr 1fr}
  .fact-item{padding:.5rem .8rem}
}
@media(max-width:600px){
  .three-col,.footer-top{grid-template-columns:1fr 1fr}
  .hero-img-wrap{display:none}
  .nav-links{display:none}
  .facts-strip{display:none}
  .topbar-inner{gap:.8rem}
}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:1rem}
.table-scroll .grades-table,.table-scroll .specs-table{margin-top:0}
@media(max-width:768px){.table-scroll .grades-table,.table-scroll .specs-table{min-width:560px}}

/* SVB-NAVSEARCH */
.nav-search{display:flex;align-items:center;background:var(--ivory,#F8F6EC);border:1px solid var(--border-md,rgba(61,74,30,0.25));border-radius:4px;overflow:hidden;height:38px}
.nav-search input{border:none;outline:none;background:transparent;padding:0 8px 0 12px;width:150px;font-family:'Jost','Noto Sans Thai',sans-serif;font-size:12px;color:var(--bark,#3D4A1E)}
.nav-search input::placeholder{color:var(--muted,#6B6B3A);opacity:0.85}
.nav-search button{border:none;background:transparent;cursor:pointer;color:var(--earth,#6B7A3A);padding:0 10px;display:flex;align-items:center;height:100%;transition:color 0.2s}
.nav-search button:hover{color:var(--terra,#C17B3A)}
.mob-search{display:flex;align-items:center;margin:1rem 2rem 0;background:var(--ivory,#F8F6EC);border:1px solid var(--border-md,rgba(61,74,30,0.25));border-radius:4px;overflow:hidden}
.mob-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;padding:12px;font-family:'Jost','Noto Sans Thai',sans-serif;font-size:13px;color:var(--bark,#3D4A1E)}
.mob-search button{border:none;background:transparent;cursor:pointer;color:var(--earth,#6B7A3A);padding:0 14px;display:flex;align-items:center}

/* SVB-MOBILE-NAV */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:6px;border-radius:4px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--bark,#3D4A1E);border-radius:2px;transition:transform 0.3s,opacity 0.3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;background:var(--cream,#F0EDD5);border-bottom:1px solid var(--border-md,rgba(61,74,30,0.25));padding:0}
.mobile-menu.open{display:block}
.mobile-menu>a{display:block;padding:14px 2rem;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--bark,#3D4A1E);font-weight:500;border-bottom:1px solid var(--border,rgba(61,74,30,0.15))}
.mobile-menu .mob-cta{background:var(--bark,#3D4A1E);color:var(--cream,#F0EDD5)!important;margin:1rem 2rem 1.5rem;display:block;text-align:center;border-radius:4px;border-bottom:none!important;padding:14px!important}
@media(max-width:600px){.nav-links{display:none!important}.nav-hamburger{display:flex!important}}
/* SVB-MOBILE-POLISH */@media(max-width:600px){.nav-search input,.mob-search input,.hero-search input,input[type=search]{font-size:16px!important}.footer-bottom-links a,footer .footer-col a{display:inline-block;padding:5px 2px;min-height:30px}}

/* Keyboard focus. The nav/mobile search inputs set outline:none for the pill
   styling, which left keyboard users with no visible focus indicator at all
   (WCAG 2.4.7). :focus-visible restores it without showing a ring on mouse
   click. Applied to every interactive element, not just the search box. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold,#C9A84C);outline-offset:2px;border-radius:3px}
.nav-search input:focus-visible,.mob-search input:focus-visible{outline:2px solid var(--gold,#C9A84C);outline-offset:1px}