/* ============================================ MY ACCOUNT — hero banner, tab navigation, Berry Rewards card ============================================ Matches the reference dashboard (https://www.aquaphor.bg/promo/ Berry_store_7/account.html) — colors/spacing pulled from that page's own CSS where available, the rewards card itself is a new build (no dedicated CSS existed for it in the reference source, it's JS-rendered there) using the same design tokens. Scoped to body.woocommerce-account, loaded only on account pages — see the enqueue in inc/account-dashboard.php, same pattern as my-account-theme.css. NOT replicated: the reference's header floats translucently OVER the hero banner (position:absolute, backdrop-filter blur) — left out deliberately, since that would mean changing the sticky header's own positioning/z-index behavior specifically for this one page, a riskier change than this pass calls for. The header here stays exactly as it already is everywhere else on the site; the hero sits as a normal block below it instead. ============================================ */ /* ROOT CAUSE of the tab bar (and everything below it) rendering squeezed into the left ~500-1140px instead of using the full available width: the parent Hello Biz theme applies its own responsive max-width cascade to .site-main (500px/600px/800px/1140px across breakpoints), scoped via `body:not([class*="elementor-page-"])` — i.e. it applies to every NON-Elementor page. The homepage never hit this because it's Elementor-built (body carries an elementor-page-53 class there); My Account uses Hello Biz's own plain classic page template instead, so no such class exists on this page's and the cap applies here. Every width rule this file sets further down (.berry-account-tabs-card max-width:1100px, etc.) was already being fed a narrower ancestor width than that — max-width can only shrink an element, never grow it past whatever space its parent actually has, so those rules had nothing to work with. Confirmed directly: fetched the real authenticated page HTML via a generated login session (not guessed from a screenshot) and traced the exact ancestor chain (#content.site-main > .page-content > .woocommerce > nav > .berry-account-tabs-card), then checked each class against the parent theme's actual compiled CSS. Same fix already applied once before for this exact issue on the homepage specifically (`body.home .site-main { padding-inline: 0; }`) — same root cause, different page. */ body.woocommerce-account .site-main { max-width: none !important; padding-inline: 0 !important; } body.woocommerce-account .berry-account-hero { background: var(--berry-grad-brand); padding: 48px 24px 80px; text-align: center; /* Flat/square, no rounding — matches the reference's own .account-hero exactly (border-radius:0), confirmed against its real CSS source, not the rounded-bottom guess this replaces. */ border-radius: 0; margin: 0 0 -40px; } /* margin: 0 here (was 0 auto 16px) — that bottom gap used to separate the avatar directly from the name below it; both are now wrapped in .berry-account-hero__avatar-upload / sit above .berry-account-hero__ name-row, each of which already carries its own spacing, so keeping this too would double it up. */ /* overflow: hidden is NOT here (it was, before) — this element now also hosts the camera badge (.berry-avatar-upload__preview-hint), positioned with a deliberate negative right/bottom offset so it sits half-on-half- off the circle's edge. overflow:hidden on this same box clipped that badge into a crescent instead of a full circle. The image still needs to render as a circle regardless, so that clip moved onto the img itself (border-radius below) instead of the shared container. */ body.woocommerce-account .berry-account-hero__avatar { width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,0.22); border: 3px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; color: #fff; margin: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.22), 0 0 0 6px rgba(255,255,255,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } body.woocommerce-account .berry-account-hero__avatar:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.26), 0 0 0 6px rgba(255,255,255,0.12); } body.woocommerce-account .berry-account-hero__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } /* .berry-account-hero__avatar is now ALSO .berry-avatar-upload__preview (a