:root {
--pwpm-rose: #fbeee8;
--pwpm-terra: #de8b6a;
--pwpm-accent: #b0684d;
--pwpm-green-bg: #edf2ea;
--pwpm-green: #3f4d38;
--pwpm-text: #555;
--pwpm-line: #f2e8e2;
--pwpm-font: Montserrat, "Helvetica Neue", Arial, sans-serif;
--pwpm-bar: #e9a88d;
--pwpm-bar-h: 52px;
--pwpm-shadow: 0 1px 2px rgba(0, 0, 0, .35);
} #topbar {
background-color: #f2f6ef;
} .navigation-section {
background-color: var(--pwpm-bar);
}
.navigation-section .toggle,
.navigation-section .toggle:hover,
.navigation-section .toggle:focus {
color: #fff;
text-shadow: var(--pwpm-shadow);
} #navigation,
#navigation .navigation-section,
#navigation .header-navigation {
height: var(--pwpm-bar-h);
}
#navigation .toggle,
#navigation .header-navigation-toggle,
#navigation .header-search-toggle,
#navigation .header-cart-toggle,
#navigation .header-cart-link {
height: var(--pwpm-bar-h);
padding-top: calc((var(--pwpm-bar-h) - 20px) / 2);
padding-bottom: calc((var(--pwpm-bar-h) - 20px) / 2);
}
#navigation .header-navigation-toggle.active ~ div {
top: var(--pwpm-bar-h);
}
#navigation .header-floating-logo {
margin: calc((var(--pwpm-bar-h) - 40px) / 2) 0;
}
#navigation .header-cart .cart-count {
top: calc((var(--pwpm-bar-h) - 30px) / 2);
} #navigation .header-border-bottom {
display: none;
} @media screen and (min-width: 769px) {
body.pwpm-bandeau-fixe .peeweepaw-bandeau {
position: fixed;
left: 0;
right: 0;
top: var(--pwpm-top, 0px);
}
body.pwpm-bandeau-fixe .pwpm-bandeau-place {
height: var(--pwpm-bandeau-h, 0px);
}
} #header-navigation ul.menu > li > a {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: .88px;
text-transform: uppercase;
}
#header-navigation .pwpm-toggle,
#header-navigation .pwpm-account {
display: none;
} #header-navigation .pwpm-title {
display: flex;
align-items: center;
gap: 8px;
font-family: Montserrat, sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .88px;
text-transform: uppercase;
color: #b0603f;
} #header-navigation .pwpm-more > .pwpm-title::before {
content: "";
flex: 0 0 16px;
width: 16px;
height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23de8b6a'%3E%3Ccircle cx='7' cy='9' r='2.2'/%3E%3Ccircle cx='11' cy='5.5' r='2.2'/%3E%3Ccircle cx='16' cy='6' r='2.2'/%3E%3Ccircle cx='19' cy='10.5' r='2.2'/%3E%3Cpath d='M8.5 17.5c0-2.8 2.3-5.5 4.8-5.5s4.7 2.7 4.7 5.5c0 1.8-1.4 2.8-3 2.3-1.1-.3-2.3-.3-3.4 0-1.6.5-3.1-.5-3.1-2.3z'/%3E%3C/svg%3E") center / contain no-repeat;
} @media screen and (min-width: 1024px) { #header-navigation,
#header-navigation ul.menu > li.pwpm-mega {
position: static;
} #header-navigation ul.menu > li {
padding: 0;
} #header-navigation ul.menu > li > a {
padding: calc((var(--pwpm-bar-h) - 20px) / 2) 14px;
color: #fff;
text-shadow: var(--pwpm-shadow);
text-decoration: none; }
#header-navigation ul.menu > li:hover > a,
#header-navigation ul.menu > li.focus > a,
#header-navigation ul.menu > li:focus-within > a {
color: #fff;
text-decoration: underline dotted #fff;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
} #header-navigation ul.menu > li.pwpm-mega > ul.pwpm-panel {
left: 0;
right: 0;
top: 100%;
display: grid;
grid-template-columns: repeat(var(--pwpm-cols, 4), minmax(0, 1fr)) 230px;
gap: 24px 28px;
align-items: start;
margin: 0;
padding: 26px 30px 28px;
min-width: 0;
white-space: normal;
border: 1px solid var(--pwpm-line);
border-top: 0;
border-radius: 0 0 16px 16px;
background: #fff;
box-shadow: 0 10px 24px rgba(176, 104, 77, .08);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
#header-navigation ul.menu > li.pwpm-mega > ul.pwpm-panel::before {
display: none;
}
#header-navigation ul.menu > li.pwpm-mega:hover > ul.pwpm-panel,
#header-navigation ul.menu > li.pwpm-mega.focus > ul.pwpm-panel,
#header-navigation ul.menu > li.pwpm-mega:focus-within > ul.pwpm-panel {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
@media (min-width: 1200px) {
#header-navigation ul.menu > li.pwpm-mega > ul.pwpm-panel {
left: -40px;
right: -40px;
}
} @media (max-width: 1199px) {
#header-navigation ul.menu > li > a {
padding: calc((var(--pwpm-bar-h) - 20px) / 2) 9px;
}
#header-navigation ul.menu > li.pwpm-mega > ul.pwpm-panel {
grid-template-columns: repeat(var(--pwpm-cols, 4), minmax(0, 1fr)) 200px;
gap: 22px;
padding: 22px 22px 24px;
}
}
#header-navigation ul.menu > li.pwpm-mega.pwpm-shut > ul.pwpm-panel {
opacity: 0;
visibility: hidden;
} #header-navigation .pwpm-panel > li {
min-width: 0;
padding: 0;
}
#header-navigation .pwpm-panel > li.pwpm-group {
grid-row: span 2;
}
#header-navigation .pwpm-panel > li.pwpm-group.pwpm-above-more {
grid-row: 1;
}
#header-navigation .pwpm-panel > li.pwpm-more {
grid-column: 1 / -2;
}
#header-navigation .pwpm-panel > li.pwpm-more--under {
grid-row: 2;
}
#header-navigation .pwpm-panel > li.pwpm-card {
grid-column: -2 / -1;
grid-row: 1 / span 2;
padding: 18px 18px 20px;
border-radius: 16px;
background: var(--pwpm-rose);
}
#header-navigation .pwpm-panel a {
font-family: var(--pwpm-font);
font-size: 13.5px;
letter-spacing: .2px;
text-transform: none;
line-height: 1.3;
color: var(--pwpm-text);
}
#header-navigation .pwpm-panel a:hover,
#header-navigation .pwpm-panel a:focus {
color: var(--pwpm-accent);
} #header-navigation .pwpm-panel > li.pwpm-group > a {
display: flex;
align-items: center;
gap: 8px;
font-family: Montserrat, sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .88px;
text-transform: uppercase;
color: #b0603f;
}
#header-navigation .pwpm-panel > li.pwpm-group > a:hover,
#header-navigation .pwpm-panel > li.pwpm-group > a:focus {
color: var(--pwpm-terra);
}
#header-navigation .pwpm-panel > li.pwpm-group > a::after {
display: none;
}
#header-navigation .pwpm-panel > li.pwpm-group > a,
#header-navigation .pwpm-panel > li > .pwpm-title {
margin-bottom: 10px;
padding: 0 0 8px;
border-bottom: 1px solid var(--pwpm-line);
}
#header-navigation .pwpm-card > .pwpm-title {
border-bottom-color: rgba(176, 96, 63, .18);
} #header-navigation .pwpm-panel ul.sub-menu {
position: static;
left: auto;
display: block;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
white-space: normal;
}
#header-navigation .pwpm-panel ul.sub-menu::before {
display: none;
}
#header-navigation .pwpm-panel ul.sub-menu li {
padding: 1px 0;
float: none;
}
#header-navigation .pwpm-panel li.menu-item-has-children > a::after {
display: none;
}
#header-navigation .pwpm-panel > li.pwpm-more:not(.pwpm-more--under) > ul.sub-menu {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
column-gap: 28px;
} #header-navigation .pwpm-card ul.sub-menu li {
padding: 0 0 8px;
}
#header-navigation .pwpm-card ul.sub-menu a {
display: block;
padding: 8px 14px;
border-radius: 12px;
background: #fff;
font-size: 13.5px;
transition: background-color .15s, color .15s;
}
#header-navigation .pwpm-card ul.sub-menu a:hover,
#header-navigation .pwpm-card ul.sub-menu a:focus {
background: var(--pwpm-terra);
color: #fff;
}
} @media screen and (max-width: 1023px) {
#header-navigation > div {
border-radius: 0 0 16px 16px;
box-shadow: 0 10px 24px rgba(176, 104, 77, .10);
}
#header-navigation > div > ul.menu {
max-height: none;
overflow: visible;
padding: 10px 12px 14px;
white-space: normal;
}
.navigation-section.floating #header-navigation > div > ul.menu {
max-height: calc(100vh - 80px - var(--pwpm-bandeau-h, 0px));
overflow-y: auto;
}
#header-navigation ul.menu > li {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid var(--pwpm-line);
}
#header-navigation ul.menu > li:last-child {
border-bottom: 0;
}
#header-navigation ul.menu > li > a {
flex: 1 1 auto;
padding: 13px 10px;
font-size: 12px;
}
#header-navigation ul.menu > li.current-menu-item > a,
#header-navigation ul.menu > li.current-menu-ancestor > a {
color: var(--pwpm-accent);
}
#header-navigation li.menu-item-has-children > a::after {
display: none;
} body.pwpm-ready #header-navigation .pwpm-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--pwpm-rose);
color: var(--pwpm-accent);
cursor: pointer;
}
#header-navigation .pwpm-toggle::before {
content: "";
width: 8px;
height: 8px;
margin-top: -4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .2s;
}
#header-navigation .pwpm-open > .pwpm-toggle {
background: var(--pwpm-terra);
color: #fff;
}
#header-navigation .pwpm-open > .pwpm-toggle::before {
margin-top: 4px;
transform: rotate(-135deg);
}
body.pwpm-ready #header-navigation li.menu-item-has-children > ul.sub-menu {
display: none;
}
body.pwpm-ready #header-navigation li.menu-item-has-children.pwpm-open > ul.sub-menu {
display: block;
}
#header-navigation ul.menu ul.sub-menu {
flex: 1 1 100%;
padding: 0 0 12px;
}
#header-navigation ul.menu ul.sub-menu li {
padding: 0;
}
#header-navigation ul.menu ul.sub-menu a {
font-family: var(--pwpm-font);
text-transform: none;
letter-spacing: .2px;
font-size: 14px;
} body.pwpm-ready #header-navigation li.pwpm-mega.pwpm-open > ul.pwpm-panel {
display: flex;
flex-direction: column;
gap: 8px;
}
#header-navigation .pwpm-panel > li {
order: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0;
}
#header-navigation .pwpm-panel > li.pwpm-card {
order: 1;
}
#header-navigation .pwpm-panel > li.pwpm-more {
order: 3;
}
#header-navigation .pwpm-panel > li.pwpm-group {
padding: 2px 8px 2px 0;
border-radius: 12px;
background: #fcf7f4;
}
#header-navigation .pwpm-panel > li.pwpm-group > a {
flex: 1 1 auto;
padding: 10px 14px;
color: var(--pwpm-text);
}
#header-navigation .pwpm-panel > li.pwpm-group .pwpm-toggle {
flex-basis: 32px;
width: 32px;
height: 32px;
background: #fff;
}
#header-navigation .pwpm-panel > li.pwpm-group.pwpm-open > .pwpm-toggle {
background: var(--pwpm-terra);
color: #fff;
}
#header-navigation .pwpm-panel > li > .pwpm-title,
#header-navigation .pwpm-account > .pwpm-title {
flex: 0 0 auto;
margin: 8px 0 6px;
} #header-navigation .pwpm-card > ul.sub-menu,
#header-navigation .pwpm-more > ul.sub-menu,
#header-navigation .pwpm-group > ul.sub-menu,
#header-navigation .pwpm-account > ul.sub-menu {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 0 4px;
}
body.pwpm-ready #header-navigation .pwpm-group.pwpm-open > ul.sub-menu {
display: flex;
padding: 0 6px 10px 10px;
}
#header-navigation .pwpm-card ul.sub-menu a,
#header-navigation .pwpm-more ul.sub-menu a,
#header-navigation .pwpm-group ul.sub-menu a,
#header-navigation .pwpm-account ul.sub-menu a {
display: inline-block;
padding: 7px 12px;
border-radius: 999px;
font-size: 13px;
line-height: 1.3;
}
#header-navigation .pwpm-card ul.sub-menu a {
background: var(--pwpm-rose);
color: var(--pwpm-accent);
}
#header-navigation .pwpm-more ul.sub-menu a,
#header-navigation .pwpm-group ul.sub-menu a {
background: #fff;
border: 1px solid var(--pwpm-line);
color: var(--pwpm-text);
}
#header-navigation .pwpm-account {
display: flex;
flex-wrap: wrap;
padding-top: 6px;
}
#header-navigation .pwpm-account ul.sub-menu a {
background: var(--pwpm-green-bg);
color: var(--pwpm-green);
}
}