/**
 * desktop-nav.css -- shared tablet+desktop nav/shell layout.
 *
 * Extracted from boom.css (2026-07-26) so the desktop sidebar/grid
 * treatment lives in one dedicated file -- the same way footer.php is
 * the one file for the nav markup. Applies from 480px up (merged with
 * the old "boxed mobile card" tier -- tablet now gets the full
 * sidebar/grid shell instead of its own separate boxed-card look) on
 * every page in the shared allowlist below. Sidebar hover-expand
 * (74px->230px) has no touch equivalent, so tablets sit collapsed/
 * icon-only there -- accepted tradeoff, not a bug.
 *
 * To add a page: add its real body class to the body:is(...) selector
 * in every rule below. No other file needs to change.
 */

/* ---------- Nav item labels (bottom nav / desktop sidebar) ----------
   Hidden at every width by default — the mobile bottom bar has never shown
   text labels (icon + aria-label only, except the CTA's own literal
   "comprar"). Revealed only inside the desktop hover-expand rules below. */
.boom-nav-item__label,
.boom-nav-item__logo { display: none; }
/* Desktop-sidebar-only item — mobile's own bottom-bar mockup doesn't have
   a "pagar" link, only the desktop sidebar mockup does (see footer.php's
   own comment on this element). */
.boom-nav-item--pay { display: none; }
/* Hamburger/menu-sheet trigger is desktop-sidebar-only too (2026-07-25,
   explicit request) — mobile's own bottom-bar mockup opens the menu sheet
   from nowhere (no trigger at all there, "início" replaced it), so the
   hamburger only ever shows in the desktop sidebar below. */
.boom-nav-item--menu { display: none; }
/* New wrapper (footer.php) around .boom-bottomnav, for the desktop-only
   two-layer sidebar below — display:contents removes it from the box
   model entirely at every width up to the 1024px breakpoint, so it can't
   affect mobile's fixed-position bottom bar at all; only turned into a
   real box there. */
.boom-sidebar-shell { display: contents; }

/* ==========================================================================
   Tablet + desktop shell -- synced from "Boom Home Desktop.dc.html" (home),
   extended 2026-07-26 to every page in the shared allowlist below. Same
   content as mobile -- CSS only: a wider centered card (761px, up from
   448px), the bottom nav reflowed into a left icon sidebar that
   hover-expands (74px -> 230px), and the header/content zoomed 1.2x to
   fill the extra room instead of redesigning every fixed-px value.
   ========================================================================== */
@media (min-width: 480px) {
	/* Cream backdrop moves to html — the shell itself becomes the white
	   outer canvas (matching the mockup's outer 761px div, background:
	   var(--boom-surface)) now that the sidebar can go fully transparent
	   at rest (below) and needs a real white card behind it, not the
	   cream page-backdrop color body carried before. */
	html { background: var(--color-bg-desk); }
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) {
		display: grid;
		grid-template-columns: 74px minmax(0, 1fr);
		grid-template-areas: "nav header" "nav app";
		width: 761px;
		max-width: calc(100% - 40px);
		margin: var(--space-11) auto;
		padding: 0;
		background: var(--color-bg-surface);
		/* All 4 corners rounded here, on the outer box itself — not just
		   relying on .boom-header/.boom-app/.boom-bottomnav's own corner
		   radii below. Those only paint a visible rounded edge when that
		   piece has a fill; the sidebar is transparent at rest (below), so
		   its own top-left/bottom-left radius has nothing to show against
		   until hovered, leaving those two corners looking square the rest
		   of the time. Rounding the always-opaque white body box directly
		   keeps all 4 corners rounded regardless of sidebar hover state. */
		border-radius: var(--radius-xl);
		box-shadow: var(--shadow-lg);
		position: relative;
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-header {
		grid-area: header;
		max-width: none;
		width: 100%;
		margin: 0;
		border-radius: 0 var(--radius-xl) 0 0;
		zoom: 1.2;
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-checkout-steps { max-width: none; }
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-app {
		grid-area: app;
		max-width: none;
		width: 100%;
		margin: 0;
		border-radius: 0 0 var(--radius-xl) 0;
		box-shadow: none;
		zoom: 1.2;
	}

	/* Bottom nav → sticky left icon sidebar. Same links/order as mobile
	   (menu, início, minha conta, comprar, carrinho, whatsapp) plus one
	   desktop-only item ("pagar", .boom-nav-item--pay — hidden below this
	   breakpoint, see its own base rule) — reflowed only, nothing else
	   added/removed.

	   Split into two layers (2026-07-25) — a real bug, not just polish:
	   a single sticky, viewport-height element can't simultaneously (a)
	   paint a background that reaches the actual bottom of the page and
	   (b) keep its icons pinned within the viewport while you scroll a
	   page taller than one screen — those two requirements conflict on
	   one box. `.boom-sidebar-shell` (footer.php's new wrapper around the
	   existing `.boom-bottomnav`) is the outer grid item: it stretches to
	   the full "nav" grid-area height (same height as .boom-header +
	   .boom-app combined, i.e. the real page length) via the grid's own
	   default item-stretch behavior — no explicit height needed, so it
	   can't under- or over-shoot the content column the way a calc(100vh)
	   or capped min() value could (user reports: first "the sidebar is
	   oversized on a tall window", then, after capping it, "now the
	   background stops short of the page bottom" — both symptoms of
	   tying this to viewport height instead of just letting it stretch).
	   It owns the width hover-expand (74px→230px) and the background/
	   border/shadow transition, so those are visible for the page's full
	   length, not just one viewport's worth.
	   `.boom-bottomnav` itself moves inside as the sticky, viewport-
	   height *icon holder* — unchanged from before in every other way
	   (same flex column, same padding/gap, same items) — so the icons
	   still track scroll exactly as they did, just with the shell now
	   supplying a properly-sized backdrop behind them.
	   Width grows on :hover without touching the 74px grid column (a grid
	   item's own box isn't clipped by its track), so the flyout overlays
	   the content instead of pushing it — same reasoning as before, just
	   now on the shell instead of directly on .boom-bottomnav. */
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-sidebar-shell {
		display: block;
		grid-area: nav;
		position: relative;
		width: 74px;
		background: transparent;
		border-radius: var(--radius-xl) 0 0 var(--radius-xl);
		transition: width var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
		z-index: 61; /* above .boom-header/.boom-app (z-index 50/auto) while flyout-expanded */
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-sidebar-shell:hover {
		width: 230px;
		background: var(--color-bg-surface);
		border-right: var(--border-hairline);
		box-shadow: 10px 0 34px rgba(31, 27, 46, 0.16);
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-bottomnav {
		position: sticky;
		top: var(--space-11);
		left: auto;
		bottom: auto;
		transform: none;
		width: 100%;
		height: calc(100vh - 64px);
		max-width: none;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: var(--space-3);
		padding: 14px 13px;
		background: transparent;
		border: none;
		box-shadow: none;
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-bottomnav.is-scrolling { transform: none; }
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-item,
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-cta {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-sidebar-shell:hover .boom-nav-item,
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-sidebar-shell:hover .boom-nav-cta {
		justify-content: flex-start;
	}
	/* Icon size/color/padding synced to the mockup's own .boom-sb-item
	   values exactly (22px icon, --boom-text-equivalent dark color, 11px
	   12px padding, 11px radius) — was inheriting the mobile bar's 26px +
	   var(--color-text-muted) (a much lighter grey) + 8px padding, the
	   user's "icons style has to be updated too" report. */
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-item {
		font-size: 22px;
		color: var(--color-text-primary);
		border-radius: 11px;
		padding: 11px 12px;
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-item:hover { background: var(--color-bg-surface-tint); }
	/* WhatsApp keeps its own brand green (mockup: #25D366) — the generic
	   color override just above (same specificity, later wins) was
	   silently flattening it to the same dark --color-text-primary as
	   every other icon. */
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-item--wa,
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-item--wa:hover { color: var(--color-accent-whatsapp); }
	/* "Pushed"/current-page state — a persistent tinted pill, same as
	   :hover, on whichever item matches the real current page (.is-active,
	   set server-side in footer.php from is_front_page()/is_shop()/
	   is_account_page()/is_cart()/is_checkout()) — not just on :hover.
	   Was hardcoded to just "início" on body.home via the [data-boom-
	   scroll-top] attribute (2026-07-25, matching the mockup's active-item
	   treatment for that one case); generalized 2026-07-26 to cover início/
	   minha conta/carrinho/pagar together, and to the shop archive too
	   (not just the front page). */
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-item.is-active { background: var(--color-bg-surface-tint); }
	/* CTA: rounded square (not mobile's circle), exact mockup gradient/
	   shadow — kept as its own shape here (Boom Home Desktop.dc.html's own
	   .boom-sb-cta wasn't touched by the 2026-07-26 mobile CTA redesign,
	   only the mobile bottom-nav one changed). margin fully reset (was
	   margin-top only) since mobile's base .boom-nav-cta now also carries
	   horizontal margin (-4px, part of its own circle-positioning shorthand)
	   that a top-only reset would've let bleed through here. width/height
	   reset too, for the same reason (mobile's now a fixed 62x62 circle). */
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-cta {
		width: auto;
		height: auto;
		margin: 0;
		transform: none;
		padding: 12px;
		border-radius: 12px;
		background: linear-gradient(135deg, #7c3aed, #5b21b6);
		box-shadow: 0 8px 18px rgba(91, 33, 182, 0.32);
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-cta i { font-size: 21.6px; } /* +20% over the mockup's own 18px, per request */
	/* Same "pushed" tap feedback as mobile's circle (boom.css) — needed
	   here too since this selector's own transform:none above would
	   otherwise beat the plain .boom-nav-cta:active rule's lower
	   specificity, even while actively pressed. */
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-cta:active { transform: scale(0.95); }

	/* Labels: hidden collapsed, revealed on :hover (width/opacity, not
	   display, so the transition animates instead of snapping). */
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-item__label {
		display: inline-block;
		font-size: 14px;
		font-weight: var(--weight-medium);
		color: var(--color-text-primary);
		opacity: 0;
		max-width: 0;
		overflow: hidden;
		white-space: nowrap;
		vertical-align: middle;
		transition: opacity 0.16s ease, max-width 0.22s ease;
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-sidebar-shell:hover .boom-nav-item__label {
		opacity: 1;
		max-width: 140px;
		margin-left: var(--space-6);
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-cta__label {
		display: inline-block;
		opacity: 0;
		max-width: 0;
		overflow: hidden;
		white-space: nowrap;
		font-size: 13px;
		font-weight: var(--weight-bold);
		transition: opacity 0.16s ease, max-width 0.22s ease;
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-sidebar-shell:hover .boom-nav-cta__label {
		opacity: 1;
		max-width: 100px;
		margin-left: var(--space-4);
	}

	/* Desktop-only "pagar" item — hidden by default (base rule above),
	   shown only in the sidebar. */
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-item--pay { display: flex; }

	/* Hamburger/logo row restyled as a plain header, not a clickable nav
	   row — matches the mockup's own treatment (bigger Sora-bold
	   wordmark, no hover-tint background, tighter own padding) instead of
	   the generic .boom-nav-item look (hover-tint pill, same padding as
	   início/minha conta/etc) it had before, the other half of the "top
	   ...aren't ok" report. Hamburger ↔ "BOOM MKT" logo swap on
	   hover-expand still matches the mockup's .boom-sb-mono/.boom-sb-full
	   pair. */
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-item--menu {
		display: flex;
		justify-content: center;
		padding: 0 3px;
		margin-bottom: var(--space-4);
		border-radius: 0;
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-item--menu:hover { background: transparent; }
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-sidebar-shell:hover .boom-nav-item--menu { justify-content: flex-start; }
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-sidebar-shell:hover .boom-nav-item--menu .boom-nav-item__mono-icon { display: none; }
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-nav-item--menu .boom-nav-item__logo {
		display: none;
		font-family: var(--font-display);
		font-weight: var(--weight-bold);
		font-size: 18px;
		color: var(--color-text-brand-deep);
		letter-spacing: 0.3px;
		white-space: nowrap;
	}
	body:is(.home, .woocommerce-checkout, .single-product, .woocommerce-account) .boom-sidebar-shell:hover .boom-nav-item--menu .boom-nav-item__logo { display: inline-block; }
}