/* Balad theme — WordPress/WooCommerce integration layer.
Never redefine base.css variables here; only bridge WP/Woo markup to the design system. */
/* Admin bar offset (fixed nav sits at top:0; WP pushes body down 32px/46px). */
body.admin-bar .site-nav { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .site-nav { top: 46px; }
}
/* ─── Fixed-nav flow space (mobile header-overlap fix) ────────────────
base.css declares .site-nav { position:fixed } but reserves NO space
in the flow, so every interior WP page (stores archive, cart, checkout,
list-your-store, vendor-dashboard, review, woo archives/products) renders
its H1/content UNDER the nav. The front-page .hero (100vh) and the
storefront .sf-cover intentionally sit beneath the nav, so we pull only
those two back up by the reserved height. Admin-bar case needs no extra
padding: WP's `html{margin-top:32/46px}` already shifts the body down and
the rule above re-seats the fixed nav below the bar. */
:root { --nav-h: 108px; }
body { padding-top: var(--nav-h); }
.hero,
.sf-cover { margin-top: calc(var(--nav-h) * -1); }
/* BLD-023: single-bld_store.php no longer hardcodes its own inline
padding-top — .sf-cover's offset is driven solely by --nav-h, the same
custom property the nav's own reserved flow-space above uses. No
!important needed now that there is no competing inline style to beat. */
.sf-cover { padding-top: var(--nav-h); }
/* WP's the_custom_logo() renders ![]()
,
which the design's .nav-logo-img{height:38px} rule never matches — leaving the
uploaded logo at natural size (~111px) and ballooning the nav to ~155px. Clamp it
to the design's nav-logo height and seat it as a non-shrinking flex item so the
reserved --nav-h stays accurate. */
.custom-logo-link { flex-shrink: 0; display: flex; align-items: center; line-height: 0; }
/* !important + .site-nav scope: on WooCommerce pages a core/woo img rule otherwise
wins and the logo balloons to ~250px (e.g. /cart/). */
.site-nav .custom-logo { height: 64px !important; width: auto !important; max-height: 64px; }
.site-nav.scrolled .custom-logo { height: 54px !important; max-height: 54px; transition: height .45s ease; }
/* Apply form plan selector (page-list-your-store.php): reuses the .pricing-grid/
.pricing-card system (base.css) inside a