/*
 * Header nav — hamburger switch moved wider than this theme's usual
 * 768px mobile breakpoint, direct feedback: the horizontal categories
 * nav (5 real WooCommerce category terms, fairly long Norwegian names)
 * was wrapping to two lines at medium/small desktop and laptop widths
 * well above 768px — its own content doesn't shrink below a real
 * measured floor even with the fluid gap (components.css) and now-fluid
 * font-size doing what they can, because the header's available middle
 * column keeps shrinking with viewport while logo/tools stay fixed
 * width. Measured live, not guessed: at a real ~1745px viewport the
 * nav needed ~709px (200px logo + 262px tools + 96px column-gaps +
 * 709px nav = 1267px of a 1684px header-inner, using ~555px of real
 * fixed-size link text plus its own fluid gap). Solving that same
 * relationship down through narrower viewports puts the real wrap
 * point at ~1273px; `1150px` gives deliberate margin below that rather
 * than cutting it exactly at the edge.
 *
 * This duplicates, rather than moves, the exact drawer-enabling rules
 * the real 768px mobile breakpoint further down this file already
 * uses (same hamburger, same fixed-position slide-in drawer, same
 * overlay/close/scroll-lock behavior) — just switched on at a wider
 * threshold. The original 768px block is completely untouched: below
 * 768px both this block and it apply the same properties
 * simultaneously, which is harmless (identical values, no conflict),
 * so true mobile's own already-working behavior carries zero risk from
 * this addition. Logo size and header height are deliberately left at
 * their normal desktop values here — only what's needed to stop the
 * nav from wrapping (hide it, show the hamburger, make the drawer
 * functional) changes at this wider threshold.
 */
@media(max-width:1150px){
	.site-header__inner{grid-template-columns:1fr auto 1fr}
	.site-header__lead{display:flex}.menu-toggle{display:inline-flex}
	.site-branding{justify-self:center;margin:0}
	.psg-nav-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:9995;border:0;padding:0;margin:0;background:rgba(0,0,0,.38);cursor:pointer}
	.psg-nav-overlay.is-open{display:block}
	.psg-nav-close{display:none}
	/*
	 * No explicit height here (real bug fix — direct feedback: the drawer
	 * "doesn't allow scroll" so its lower content is unreachable).
	 * `top:0!important;bottom:0!important` alone already fully size a
	 * `position:fixed` element to the browser's real, *current* visible
	 * viewport, same mechanism the working `.psg-drawer{inset:0}` cart/
	 * account drawer already relies on (components.css). The
	 * `height:100vh!important` this used to also carry pins the box to
	 * the *large/static* viewport unit instead — taller than the actually
	 * visible area whenever mobile browser chrome (the URL bar) is on
	 * screen — so the drawer's own bottom content could end up genuinely
	 * off-screen with nothing to scroll to, since `overflow-y:auto` never
	 * triggers when the box's declared height (100vh) already comfortably
	 * fits its content; the box itself, not its content, was the thing
	 * extending past the real fold. Dropping the fixed height, letting
	 * top/bottom alone size it, tracks the real dynamic viewport instead.
	 */
	.primary-navigation{position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:0!important;z-index:9999;width:82vw;max-width:320px;min-width:260px;margin:0;display:flex!important;flex-direction:column;justify-self:auto;padding:1.75rem 1.5rem 0;background:#fff;box-shadow:var(--psg-shadow-lg);transform:translateX(-100%);transition:transform .25s var(--psg-ease);overflow-y:auto}
	.primary-navigation.is-open{transform:translateX(0)}
	/*
	 * Header-inversion colors (home.css's body.home .primary-navigation
	 * a{color:#fff}, meant only for the transparent desktop header
	 * sitting on top of the hero image) must never reach the drawer
	 * itself — this is always a solid white slide-in panel regardless of
	 * what page or scroll state the header behind it is in. Confirmed
	 * live this was a real, pre-existing bug affecting the Meny tab's own
	 * links too (white text, white background), not just the account nav
	 * (which already got its own scoped !important fix, components.css) —
	 * same root cause, same fix, just for the plain <a> links this other
	 * tab is made of.
	 */
	.primary-navigation a:not(.psg-button){color:var(--psg-ink)!important}
	.primary-navigation a:not(.psg-button):hover{color:var(--psg-forest)!important;border-bottom-color:var(--psg-forest)!important}
	.primary-navigation .psg-menu{display:flex!important;align-items:stretch;flex-direction:column;gap:0;width:100%}
	.primary-navigation .psg-menu a{display:block;padding:.75rem 0;font-size:1.0625rem;width:100%}
	.psg-nav-group--menu,.psg-nav-group__title{display:block}
	.psg-nav-group{width:100%}
	.psg-nav-group+.psg-nav-group{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--psg-line)}/*
 * Categories are what someone opens this menu to reach, so they are the
 * full-size list and they come first. Hjem / Butikk / Om oss / Kontakt are
 * wayfinding rather than shopping — smaller, quieter, and below. The order is
 * set in the markup (header.php), not with `order`, so the tab sequence
 * matches what is on screen.
 *//*
 * Both lists take the site's eyebrow treatment — small, bold, uppercase,
 * letterspaced (base.css's .psg-eyebrow). It is the one type style this brand
 * already uses for labels, and it lets the two levels differ by weight and
 * colour alone rather than by size, which is what makes them read as one
 * system with a hierarchy instead of two unrelated lists.
 */.psg-nav-group--categories .psg-menu a{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--psg-ink)!important}.psg-nav-group--secondary .psg-menu a{padding-block:.3rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--psg-copy)!important}/*
 * Kontrollpanel, centred between the two rules it sits between. Measured in
 * the open drawer: 8px of air above it and 1px below, because the space above
 * came from the account header's margin while the space below came only from
 * the link's own (asymmetric) padding. Both gaps are now the group's own
 * padding, so they are equal by construction, and the link's padding is
 * symmetric so the text sits where the box does.
 */.psg-nav-panel .psg-account-header{margin-bottom:0}.psg-nav-panel .psg-account-nav__group--top{padding-block:var(--psg-space-2);margin-bottom:0}.psg-nav-panel .psg-account-nav__group--top a{padding-block:.5rem}.psg-nav-group--secondary .psg-menu a:hover{color:var(--psg-forest)!important}
	.psg-nav-group__title{margin:0 0 .25rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--psg-copy)}
	body.psg-nav-open{overflow:hidden}
	/*
	 * One shared drawer between the site nav and the account nav (direct
	 * request), not two separate ones — these two tabs switch which of
	 * the drawer's two .psg-nav-panel sections is visible. Both panels
	 * exist in the DOM at all times; only display toggles. The close
	 * button now lives in this same row (header.php) instead of being
	 * absolutely positioned above it — that used to force the whole
	 * drawer to reserve a tall, empty 4.5rem top padding just to clear
	 * it; as a normal flex sibling of the two tabs it needs none of that,
	 * hence the padding drop above.
	 */
	/* The two parent tabs share the row; the close button keeps its own size at
   the end of it. */
.psg-nav-tabs{display:flex;align-items:stretch;gap:.75rem;margin-bottom:1.5rem}
	/*
 * Round 209 — the Meny/Konto switch reads as navigation, not as two buttons.
 * As filled and outlined pills they looked like actions to perform, competing
 * with the real actions further down the drawer; as underlined labels on one
 * line they read as "you are here, and here is the other place", which is what
 * they are. Same language the desktop primary nav already uses for its own
 * current item, so the site has one idea of what a chosen link looks like.
 */
.psg-nav-tab{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.15rem 0 .6rem;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--psg-copy);font-weight:700;font-size:1.0625rem;line-height:1.3;cursor:pointer}
	.psg-nav-tab .psg-icon{width:16px;height:16px;flex-shrink:0}
	.psg-nav-tab.is-active{background:none;border-bottom-color:var(--psg-forest);color:var(--psg-ink)}
	/* No chip behind it: a filled circle beside two flat text tabs read as the most
   important control in the row, which it is not. Giving it a tab's own bottom
   padding and transparent border puts it on the identical box, so all three
   centre on one line instead of the X floating above them. */
.psg-nav-tabs .psg-nav-close{position:static;flex:0 0 auto;margin:0;display:inline-grid;place-items:center;width:34px;height:auto;padding:.15rem 0 .6rem;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--psg-copy);cursor:pointer}.psg-nav-tabs .psg-nav-close:hover{color:var(--psg-ink)}
	.psg-nav-panel{display:none}
	/*
 * Room at the foot of the drawer for the fixed bottom toolbar, which is 56px
 * tall and floats over whatever is beneath it — without this the last item in
 * either panel sat underneath it, unreadable and unclickable. Applied to the
 * panel rather than the drawer so it follows whichever of Meny or Konto is
 * showing, and `env(safe-area-inset-bottom)` adds the home-indicator strip on
 * the phones that have one.
 */
.psg-nav-panel.is-active{display:block;padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px) + var(--psg-space-5))}
}
@media(max-width:1024px){.woocommerce .products{grid-template-columns:repeat(3,minmax(0,1fr))}/* Same cap as the desktop rule in components.css. Without it this override reintroduced exactly what that cap removes: measured, a 1025px viewport gave 320px cards and 1024px gave 424px — the cards got BIGGER as the screen got smaller, right at the breakpoint. */
.psg-products-carousel__scroller ul.products li.product{flex-basis:min(calc((100% - (var(--psg-products-per-view-tablet) - 1) * 1rem) / var(--psg-products-per-view-tablet)),var(--psg-product-card-max,360px))}.site-header__inner{gap:1rem}/* The panel is a row with align-items:center on desktop. Turning it into a column here flips what both of those mean, so both must be restated: align-items:center would centre each child HORIZONTALLY (shrinking them to content width instead of filling the card), and the brand's flex-basis — a width on the row — becomes a HEIGHT on the column, which would pin the brand block to a fixed 210-260px tall. stretch + flex:0 0 auto restore the intended stacked layout. */
.site-footer__panel{flex-direction:column;align-items:stretch;padding-right:0}.site-footer__brand{width:100%;flex:0 0 auto;margin-right:0}.site-footer__nav-group{flex:0 0 auto;margin-top:var(--psg-space-6)}.psg-slide{background-image:var(--psg-slide-bg-tablet,var(--psg-slide-bg-desktop));background-position:var(--psg-slide-pos-tablet,center center);background-size:var(--psg-slide-size-tablet,cover)}}
@media(max-width:768px){/*
 * One box, one gap, everywhere.
 *
 * Measured before this: the four controls were 39x40, 23x24, 24x24 and 24x40,
 * and three different gaps were in play — 16px inside the left pair, 12px
 * inside the right pair, 8px between groups. Nothing lined up with anything,
 * and a 171px logo left so little room that the icons crowded it.
 *
 * Now every control is the same 40x40 tap target with the same 22px glyph, the
 * two icons in a group sit 4px apart so they read as one pair, and the logo is
 * narrower. The space either side of the logo is then simply what is left,
 * split evenly by the two 1fr tracks — symmetric by construction rather than
 * by two hand-tuned numbers that have to be kept in step.
 */:root{--psg-header-h:56px;--psg-marquee-h:34px}.psg-marquee__group{gap:1.5rem}.psg-marquee__item{font-size:.6875rem;letter-spacing:.07em}.site-header__inner{min-height:var(--psg-header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem}.menu-toggle{display:inline-flex}.site-branding{justify-self:center;margin:0}.custom-logo{width:185px;height:auto}.site-logo{width:150px;position:relative;top:2px}.site-header__tools{justify-self:end}/* 36px wide, 40 tall: the pair reads as one unit and the glyphs sit closer
   together, while the tap target keeps its full height. Narrower boxes and no
   gap hand the difference straight back to the logo — the space either side of
   it goes from 29px to 41px. */
.site-header__lead,.site-header__tools{gap:0}.site-header__lead>*,.site-header__tools>*{width:36px;height:40px;display:inline-grid;place-items:center;padding:0;margin:0}.site-header__lead .psg-icon,.site-header__tools .psg-icon{width:22px;height:22px}/* Account rejoins the cart on the right; only the wishlist stays out. */.header-wishlist{display:none}.header-account{display:inline-grid}/* Search moves to the left of the logo, beside the hamburger: the lead copy
   appears and the one in the tools group steps aside. */.header-search--lead{display:inline-grid}.header-search--tools{display:none}
/*
 * Real drawer, not a dropdown — confirmed via a real screenshot that
 * the previous position:absolute;top:100% version rendered as a small
 * panel, not the full slide-in drawer this project's own cart/account
 * drawers already use correctly elsewhere. Same visual language as
 * .psg-drawer/.psg-drawer__panel (fixed, full-height, slide-in,
 * overlay) but kept as its own simpler is-open class toggle (already
 * wired in navigation.js) rather than migrating to the
 * hidden-attribute-based initDrawer() helper: that helper's [hidden]
 * handling would need extra work to also stay correctly visible as a
 * plain inline desktop nav outside the mobile breakpoint, which this
 * simpler approach avoids entirely — .primary-navigation keeps living
 * in its normal DOM/layout position at every width, only its own
 * position/transform changes here.
 */
.psg-nav-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:9995;border:0;padding:0;margin:0;background:rgba(0,0,0,.38);cursor:pointer}
.psg-nav-overlay.is-open{display:block}
.psg-nav-close{display:none}
/* Same scroll-fix reasoning as the 1150px block above — no explicit height, top/bottom alone track the real dynamic viewport. */
.primary-navigation{position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:0!important;z-index:9999;width:82vw;max-width:320px;min-width:260px;margin:0;display:flex!important;flex-direction:column;justify-self:auto;padding:1.75rem 1.5rem 0;background:#fff;box-shadow:var(--psg-shadow-lg);transform:translateX(-100%);transition:transform .25s var(--psg-ease);overflow-y:auto}
.primary-navigation.is-open{transform:translateX(0)}
.primary-navigation a:not(.psg-button){color:var(--psg-ink)!important}
.primary-navigation a:not(.psg-button):hover{color:var(--psg-forest)!important;border-bottom-color:var(--psg-forest)!important}
.primary-navigation .psg-menu{display:flex!important;align-items:stretch;flex-direction:column;gap:0;width:100%}
.primary-navigation .psg-menu a{display:block;padding:.75rem 0;font-size:1.0625rem;width:100%}
.psg-nav-group--menu,.psg-nav-group__title{display:block}
.psg-nav-group{width:100%}
.psg-nav-group+.psg-nav-group{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--psg-line)}/*
 * Categories are what someone opens this menu to reach, so they are the
 * full-size list and they come first. Hjem / Butikk / Om oss / Kontakt are
 * wayfinding rather than shopping — smaller, quieter, and below. The order is
 * set in the markup (header.php), not with `order`, so the tab sequence
 * matches what is on screen.
 *//*
 * Both lists take the site's eyebrow treatment — small, bold, uppercase,
 * letterspaced (base.css's .psg-eyebrow). It is the one type style this brand
 * already uses for labels, and it lets the two levels differ by weight and
 * colour alone rather than by size, which is what makes them read as one
 * system with a hierarchy instead of two unrelated lists.
 */.psg-nav-group--categories .psg-menu a{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--psg-ink)!important}.psg-nav-group--secondary .psg-menu a{padding-block:.3rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--psg-copy)!important}/*
 * Kontrollpanel, centred between the two rules it sits between. Measured in
 * the open drawer: 8px of air above it and 1px below, because the space above
 * came from the account header's margin while the space below came only from
 * the link's own (asymmetric) padding. Both gaps are now the group's own
 * padding, so they are equal by construction, and the link's padding is
 * symmetric so the text sits where the box does.
 */.psg-nav-panel .psg-account-header{margin-bottom:0}.psg-nav-panel .psg-account-nav__group--top{padding-block:var(--psg-space-2);margin-bottom:0}.psg-nav-panel .psg-account-nav__group--top a{padding-block:.5rem}.psg-nav-group--secondary .psg-menu a:hover{color:var(--psg-forest)!important}
.psg-nav-group__title{margin:0 0 .25rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--psg-copy)}
body.psg-nav-open{overflow:hidden}
/* The two parent tabs share the row; the close button keeps its own size at
   the end of it. */
.psg-nav-tabs{display:flex;align-items:stretch;gap:.75rem;margin-bottom:1.5rem}
/*
 * Round 209 — the Meny/Konto switch reads as navigation, not as two buttons.
 * As filled and outlined pills they looked like actions to perform, competing
 * with the real actions further down the drawer; as underlined labels on one
 * line they read as "you are here, and here is the other place", which is what
 * they are. Same language the desktop primary nav already uses for its own
 * current item, so the site has one idea of what a chosen link looks like.
 */
.psg-nav-tab{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.15rem 0 .6rem;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--psg-copy);font-weight:700;font-size:1.0625rem;line-height:1.3;cursor:pointer}
.psg-nav-tab .psg-icon{width:16px;height:16px;flex-shrink:0}
.psg-nav-tab.is-active{background:none;border-bottom-color:var(--psg-forest);color:var(--psg-ink)}
/* No chip behind it: a filled circle beside two flat text tabs read as the most
   important control in the row, which it is not. Giving it a tab's own bottom
   padding and transparent border puts it on the identical box, so all three
   centre on one line instead of the X floating above them. */
.psg-nav-tabs .psg-nav-close{position:static;flex:0 0 auto;margin:0;display:inline-grid;place-items:center;width:34px;height:auto;padding:.15rem 0 .6rem;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--psg-copy);cursor:pointer}.psg-nav-tabs .psg-nav-close:hover{color:var(--psg-ink)}
.psg-nav-panel{display:none}
/*
 * Room at the foot of the drawer for the fixed bottom toolbar, which is 56px
 * tall and floats over whatever is beneath it — without this the last item in
 * either panel sat underneath it, unreadable and unclickable. Applied to the
 * panel rather than the drawer so it follows whichever of Meny or Konto is
 * showing, and `env(safe-area-inset-bottom)` adds the home-indicator strip on
 * the phones that have one.
 */
.psg-nav-panel.is-active{display:block;padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px) + var(--psg-space-5))}
.woocommerce .products{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Real comparison against palmera.no's own live mobile product cards (their card wrapper carries zero internal padding at all) found the actual gap: our card's own horizontal padding was eating real width the price row needed, on top of already-narrow 2-column mobile real estate — not the grid/gutter math, which was already comparable. Tightened here (mobile only, both breakpoints below) rather than removed outright, so the card still reads as a card, not edge-to-edge content. */
.woocommerce ul.products li.product{padding-left:var(--psg-space-3);padding-right:var(--psg-space-3)}
.psg-products-carousel__scroller ul.products li.product{flex-basis:calc((100% - (var(--psg-products-per-view-mobile) - 1) * 1rem) / var(--psg-products-per-view-mobile))}.woocommerce div.product{grid-template-columns:1fr}/*
 * Round 209 — the mobile footer card was inset twice: 32px on the card plus
 * 20px on the panel, 52px a side, which left the two menu columns 118px wide
 * on a 355px card. Almost every label wrapped ("Kunstige planter" over two
 * lines, "Dekorpotter & vaser" over two), so the block read as a stack of
 * broken phrases rather than a menu, and ran to 942px tall.
 *
 * The panel's own inset goes entirely — the card is already a padded box, and
 * a padded box inside a padded box is just a narrower box. See the card's own
 * reduced padding further down.
 */
.site-footer__panel{padding:0;text-align:left}.site-footer__brand{text-align:left}/* minmax(0,1fr), not 1fr — measured at 320px the bare version gave 95px and 107px columns, because 1fr's auto minimum will not shrink below the longest label. The 2x2 has to stay a true 2x2. */
.site-footer__nav-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--psg-space-5) var(--psg-space-4)}.site-footer__nav{text-align:left}
/*
 * The card's own padding, down from 32px. With the panel's 20px removed above,
 * 20px here gives 315px of content on a 355px card — two 149px columns, wide
 * enough that every label in these menus sits on one line.
 */
.site-footer__card{padding:20px}
/*
 * Footer links at 14px rather than 16px. Sixteen is a reading size; these are
 * a directory, scanned rather than read, and at 16px on a phone they carried
 * the same weight as the body copy above them. The tighter row gap follows
 * from the smaller type — the old 11.2px was set against 25.6px lines.
 */
.psg-menu--footer{gap:.55rem}
.psg-menu--footer a{font-size:.875rem}
.psg-footer-toggle summary{font-size:.9375rem;margin-bottom:var(--psg-space-3)}
/* The brand block sits closer to the menus now that neither is padded twice. */
.site-footer__panel{gap:var(--psg-space-5)}
.site-footer__nav-group{margin-top:0}.site-footer__cta{flex-direction:column;align-items:stretch;gap:var(--psg-space-4);text-align:left}.site-footer__cta-copy{max-width:none}.site-footer__cta .psg-button{width:100%;text-align:center}/*
 * The three shortcuts now live at the foot of the hamburger drawer instead of
 * being fixed across every page. Sticky rather than fixed: it sits at the
 * bottom of the drawer and a long category list scrolls behind it, which is
 * the behaviour a fixed bar was faking. margin-top:auto pins it down even when
 * the panel above is short.
 */
.psg-mobile-toolbar{position:sticky;bottom:0;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);margin:auto -1.5rem 0;padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--psg-line)}
/* Only inside the open drawer — never on the storefront. */
.primary-navigation:not(.is-open) .psg-mobile-toolbar{display:none}.psg-mobile-toolbar a{display:grid;place-items:center;align-content:center;gap:1px;color:var(--psg-ink);font-size:12px;text-decoration:none}.psg-mobile-toolbar .psg-icon{width:19px;height:19px}.site-footer{margin-top:2rem}.psg-slide{background-image:var(--psg-slide-bg-mobile,var(--psg-slide-bg-tablet,var(--psg-slide-bg-desktop)));background-position:var(--psg-slide-pos-mobile,center center);background-size:var(--psg-slide-size-mobile,cover)}.psg-drawer__panel{width:100%}:root{--psg-cart-drawer-width:100%}.psg-cart-drawer__head,.psg-cart-drawer__scroll,.psg-cart-drawer__footer{padding-inline:1.25rem}.psg-qty-stepper__btn{width:34px;height:34px;font-size:1.125rem}.psg-cart-drawer__item-remove{--psg-cd-remove:34px}.psg-cart-drawer__item-details{min-height:76px}.woocommerce table.shop_table.cart .product-remove a{width:34px;height:34px}
/*
 * Bottom mobile toolbar's own cart icon badge — the header cart icon's
 * matching badge (same visual, same markup) is unconditional now
 * (components.css), direct request to make desktop match mobile's
 * count-only badge instead of icon+subtotal text. This toolbar only
 * exists on mobile in the first place (display:none otherwise), so its
 * own badge styling stays scoped here; the toolbar icon needs its own
 * position:relative wrapper since its <a> is a grid container stacking
 * icon+label vertically, not a plain inline link like the header's.
 */
/*
 * The search sheet is a modal surface that covers the whole screen below
 * the header. The bottom toolbar is fixed at z-index 90, well above the
 * header stacking context the sheet lives in, so it sat on top of the last
 * row of results — nav competing with a modal it is not part of. Hidden for
 * as long as the sheet is open; the sheet has its own close button.
 */
body.psg-search-open .psg-mobile-toolbar{display:none}
.psg-mobile-toolbar__icon-wrap{position:relative;display:inline-flex}
.psg-mobile-toolbar__icon-wrap .psg-cart-count{position:absolute;top:-4px;right:-7px;display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 3px;border-radius:50%;background:var(--psg-forest);color:#fff;font-size:.5625rem;font-weight:700;line-height:1}
.psg-mobile-toolbar__icon-wrap .psg-cart-count[data-count="0"]{display:none}
}
@media(max-width:420px){.woocommerce .products{gap:.8rem}.woocommerce ul.products li.product{padding-left:var(--psg-space-2);padding-right:var(--psg-space-2)}.psg-shell{width:calc(100% - 1.25rem)}.psg-widget-title h2{font-size:1.5rem}}