/* pg-site-core, design-global 1.5.4. The menu button instead of a category menu that wraps.
   Loaded with media="(min-width:768px) and (max-width:819.98px)". The six live items with their chevrons need 520px at 15px, with a cart of 15 items
   and a five digit sum the row fits from a window of about 805px, 820 keeps a margin. A short script in the footer measures the real menu, and when it still
   wraps, a longer name added later, it widens the media of this file to every width from 768. Below 768 the phone header of global.css stays as it is.
   The look of the menu list is the phone one, the theme's desktop rules for .main-navigation lists are undone here only inside .handheld-navigation. */

/* the desktop list goes, the button and the menu list of the phone come in its place, in the same row as the cart */
.pg-design #masthead .primary-navigation{display:none}
.pg-design #masthead .main-navigation{display:flex;flex-wrap:wrap;align-items:center;align-self:start;padding-block:4px}
.pg-design #masthead .site-header-cart{align-self:start;margin-top:4px}
.pg-design #masthead button.menu-toggle{display:block;position:relative;top:auto;inset-inline-start:auto;float:none;width:44px;height:44px;max-width:none;margin:0;padding:0;
	border:1px solid var(--pg-line);border-radius:var(--pg-pill);background-color:var(--pg-surface);font-size:0;cursor:pointer}
.pg-design #masthead button.menu-toggle::before,.pg-design #masthead button.menu-toggle::after,.pg-design #masthead button.menu-toggle span::before{right:12px;width:18px;background-color:var(--pg-ink)}
.pg-design #masthead button.menu-toggle:focus-visible{outline:3px solid var(--pg-focus);outline-offset:2px}
.pg-design #masthead .main-navigation.toggled button.menu-toggle{background-color:var(--pg-ink);border-color:var(--pg-ink)}
.pg-design #masthead .main-navigation.toggled button.menu-toggle::before,.pg-design #masthead .main-navigation.toggled button.menu-toggle::after{background-color:var(--pg-surface)}
.pg-design #masthead .main-navigation .handheld-navigation{display:block;position:static;top:auto;flex:0 0 100%;max-width:520px}
.pg-design #masthead .main-navigation.toggled .handheld-navigation{display:block;margin-top:8px;padding-block:8px 16px;border-top:1px solid var(--pg-line)}

/* the theme's desktop rules for lists inside .main-navigation, undone for the menu list */
.pg-design #masthead .handheld-navigation ul.menu{max-height:none;margin:0;padding:0;overflow:visible}
.pg-design #masthead .handheld-navigation ul li{display:block;float:none;text-align:start}
.pg-design #masthead .handheld-navigation ul ul{position:static;float:none;top:auto;right:auto;z-index:auto;margin:0;box-shadow:none}
.pg-design #masthead .handheld-navigation ul ul li a{width:auto}
/* a tablet from 768 gets sub-menu--is-touch-device from the theme script, its desktop rule hides the branch, here the open and close of the list rules */
.pg-design #masthead .handheld-navigation ul ul.sub-menu--is-touch-device{display:block;right:auto}
.pg-design #masthead .handheld-navigation ul.menu>li.menu-item-has-children>a::after,.pg-design #masthead .handheld-navigation ul.menu>li.menu-item-has-children::after{content:none;display:none}

/* the menu list, the same look as on the phone */
.pg-design #masthead .handheld-navigation ul.menu>li{border-bottom:1px solid var(--pg-line)}
.pg-design #masthead .handheld-navigation ul.menu>li:last-child{border-bottom:0}
.pg-design #masthead .handheld-navigation ul.menu li a{display:flex;align-items:center;min-height:52px;padding:0 12px;border:0;border-radius:var(--pg-r-md);
	color:var(--pg-ink);font-size:18px;font-weight:700;text-decoration:none;white-space:normal;transition:background-color var(--pg-dur) var(--pg-ease)}
.pg-design #masthead .handheld-navigation ul.menu li.menu-item-has-children>a{padding-inline-end:60px}
.pg-design #masthead .handheld-navigation ul.menu li a:hover{background-color:var(--pg-surface-2)}
.pg-design #masthead .handheld-navigation ul.menu li a:focus-visible{outline:3px solid var(--pg-focus);outline-offset:-3px}
.pg-design #masthead .handheld-navigation .dropdown-toggle{top:4px;left:4px;width:44px;height:44px;padding:0;border:1px solid var(--pg-line);border-radius:var(--pg-pill);
	background-color:var(--pg-surface);color:var(--pg-ink-2)}
.pg-design #masthead .handheld-navigation .dropdown-toggle::after{--pg-i:var(--pg-i-down);width:18px;height:18px;margin:auto}
.pg-design #masthead .handheld-navigation .dropdown-toggle.toggled-on{background-color:var(--pg-ink);border-color:var(--pg-ink);color:var(--pg-surface)}
.pg-design #masthead .handheld-navigation ul.menu ul.sub-menu{margin:0;padding:0;border:0;border-radius:var(--pg-r-lg);background-color:var(--pg-surface-2)!important}
.pg-design #masthead .handheld-navigation ul.menu ul.sub-menu.toggled-on{margin-bottom:12px;padding:4px}
.pg-design #masthead .handheld-navigation ul.menu ul.sub-menu li a{min-height:48px;padding-inline-start:16px;font-size:16px;font-weight:400}
.pg-design #masthead .handheld-navigation ul.menu ul.sub-menu li a:hover{background-color:var(--pg-surface)}