/* SkinBeauty & Aura brand typography test — V6.9.0
   Brand guide: Playfair Display = major titles; Poppins = headers/subheads/copy/UI;
   Quicksand = captions; Playfair Display Italic = quotes/taglines. Alta remains logo-only. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&family=Poppins:wght@400;500;600;700&family=Quicksand:wght@400;500;600&display=swap');

:root{--sba-display:'Playfair Display',Georgia,serif;--sba-ui:'Poppins',Arial,sans-serif;--sba-caption:'Quicksand',Arial,sans-serif}
html,body,button,input,select,textarea{font-family:var(--sba-ui)!important}
body{font-family:var(--sba-ui)!important}
h1,.page-title,.shop-hero h1,.page-card>h1,.product-detail-info>h1,.promo-intro h1,.top>h1{font-family:var(--sba-display)!important}
h2,h3,h4,h5,h6,nav,.btn,.primary,label,input,select,textarea,button{font-family:var(--sba-ui)!important}
small,caption,.caption,.eyebrow,.cart-kicker,.shop-hero>span,.product-info>small,.product-detail-info>small,.bundle-tag,.badge{font-family:var(--sba-caption)!important}
blockquote,.quote,.tagline,.brand-tagline{font-family:var(--sba-display)!important;font-style:italic}
/* Product cards are subheads, not chapter/display titles. */
.product-info h2{font-family:var(--sba-ui)!important}
/* Preserve large display treatment on the individual product page. */
.product-description h2{font-family:var(--sba-ui)!important}

/* Admin: functional Poppins UI with Playfair reserved for the major page title. */
.admin-shell,.admin-shell button,.admin-shell input,.admin-shell select,.admin-shell textarea,.admin-v5,.admin-v5 button,.admin-v5 input,.admin-v5 select,.admin-v5 textarea{font-family:var(--sba-ui)!important}
.admin-head h1,.admin-main>h1,.admin-shell .page-title,.admin-v5 .page-title,.sv h1,.pay-head h1{font-family:var(--sba-display)!important}
.admin-card h2,.admin-card h3,.admin-hero h2,.admin-nav,.admin-brand-name,.sv h2,.sv h3{font-family:var(--sba-ui)!important}
.admin-shell small,.admin-shell .eyebrow,.admin-shell .muted,.admin-v5 small,.sv small,.sv-muted,.sv-sub{font-family:var(--sba-caption)!important}

/* Responsive typography: font roles do not change on tablet/mobile; only scale/wrapping does. */
@media(max-width:900px){
 h1,.page-title,.shop-hero h1,.page-card>h1,.product-detail-info>h1,.promo-intro h1,.top>h1{line-height:1.12}
 .admin-head h1,.admin-main>h1{line-height:1.15}
}
@media(max-width:600px){
 h1,.page-title,.shop-hero h1,.page-card>h1,.product-detail-info>h1,.promo-intro h1,.top>h1{overflow-wrap:anywhere}
 button,input,select,textarea{font-family:var(--sba-ui)!important}
}