:root {
--wwg-resnav-color-bg: var(--color-2);
--wwg-resnav-color-text: var(--color-5);
--wwg-resnav-color-main: var(--color-2);
--wwg-resnav-color-secondary: var(--color-3);
--wwg-nav-color-text: var(--wwg-resnav-color-text);
--wwg-nav-color-bg: transparent;
--wwg-nav-color-text: var(--wwg-resnav-color-text);
--wwg-nav-color-bg-sub: var(--wwg-resnav-color-bg);
--wwg-nav-color-text-sub: var(--wwg-resnav-color-text);
} nav.wwg-resnav {
position: fixed;
z-index: 400;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-color: var(--wwg-resnav-color-bg);
padding: 40px 40px;
padding: clamp(1.25rem, 0.1923076923076923rem + 3.076923076923077vw, 2.5rem);
box-shadow: 0px 6px 15px -8px rgb(109 98 98);
max-height: calc(100vh - 250px);
overflow-y: auto; width: 550px;
box-sizing: border-box;
font-size: 1rem;
font-size: clamp(1rem, 0.8942307692307693rem + 0.3076923076923077vw, 1.125rem);
text-align: right;
top: 0;
left: 0;
transform: none;
height: 100vh;
max-height: 100vh !important;
max-width: 100% !important;
}
nav.wwg-resnav.state-subopen {
overflow: hidden;
}
nav.wwg-resnav .wwg-resnav-item,
nav.wwg-resnav .wwg-resnav-items-wrapper {
padding: 0;
list-style: none;
margin: 0;
position: relative;
}
nav.wwg-resnav,
nav.wwg-resnav .wwg-resnav-item-link {
color: var(--wwg-resnav-color-text);
-webkit-user-drag: none;
}
.wwg-resnav-logo {
display: block;
margin-bottom: clamp(1.1111111111111112rem, 0.6410256410256411rem + 1.3675213675213675vw, 1.6666666666666667rem);
-webkit-user-select: none;
user-select: none;
pointer-events: none;
}
.wwg-resnav-logo-empty {
margin-bottom: calc(clamp(1.1111111111111112rem, 0.6410256410256411rem + 1.3675213675213675vw, 1.6666666666666667rem) + clamp(1.25rem, 0.1923076923076923rem + 3.076923076923077vw, 2.5rem));
}
.wwg-resnav-logo img {
display: block;
max-width: 150px;
max-width: clamp(5rem, 2.179487179487179rem + 8.205128205128206vw, 8.333333333333334rem);
height: auto;
pointer-events: all;
}
.wwg-resnav-subback-button,
.wwg-resnav-close-button {
padding: 10px 20px;
padding: clamp(0.4444444444444444rem, 0.35042735042735035rem + 0.27350427350427364vw, 0.5555555555555556rem)
clamp(0.6111111111111112rem, 0.1880341880341881rem + 1.2307692307692308vw, 1.1111111111111112rem);
padding-top: calc(clamp(0.5rem, 0.35897435897435903rem + 0.4102564102564102vw, 0.6666666666666666rem) * 2);
padding-bottom: calc(clamp(0.5rem, 0.35897435897435903rem + 0.4102564102564102vw, 0.6666666666666666rem) * 2);
font-weight: bold; text-align: center;
width: 100%;
margin-top: calc(clamp(1.1111111111111112rem, 0.6410256410256411rem + 1.3675213675213675vw, 1.6666666666666667rem) + clamp(1.25rem, 0.1923076923076923rem + 3.076923076923077vw, 2.5rem));
font-size: 1rem;
font-size: clamp(1rem, 0.8942307692307693rem + 0.3076923076923077vw, 1.125rem);
display: inline-block; cursor: pointer;
-webkit-user-select: none;
user-select: none;
position: relative;
}
.wwg-resnav-item-active .wwg-resnav-subback-button {
font-weight: bold;
}
.wwg-resnav-subback-button span {
display: none !important;
}
.wwg-resnav-subback-button::before {
content: "";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-style: normal;
font-variant: normal;
font-family: "Font Awesome 5 Free";
line-height: inherit;
vertical-align: baseline;
border: 0;
top: 0px;
left: 15px; transform: rotate(180deg);
position: absolute;
display: flex;
align-items: center;
height: 100%;
}
.wwg-resnav-subback-button span,
.wwg-resnav-close-button span { display: inline;
}  body:not(.wwg-resnav-state-visible) .wwg-navbreak {
display: block;
} .wwg-resnav-toggler {
display: flex;
display: none;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
-webkit-user-select: none;
user-select: none;
background-color: var(--wwg-resnav-color-secondary);
background: transparent;
color: white;
color: inherit;
padding: calc(clamp(0.6111111111111112rem, 0.1880341880341881rem + 1.2307692307692308vw, 1.1111111111111112rem) / 1.3)
clamp(0.6111111111111112rem, 0.1880341880341881rem + 1.2307692307692308vw, 1.1111111111111112rem);
padding: 5px 15px !important;
font-size: 1.2rem !important;
}
.wwg-resnav-toggler .wwg-resnav-toggler-lines {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 35px;
display: none;
}
.wwg-resnav-toggler-label {
margin-left: 0px;
}
.wwg-resnav-toggler-lines span {
width: 35px;
height: 3px;
background: white;
display: block;
transition: all 0.4s;
}
.wwg-resnav-toggler-lines span:not(:last-child) {
margin-bottom: 4px;
}
body.wwg-resnav-state-open .wwg-resnav-toggler-lines span:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 5px);
width: 30px;
}
body.wwg-resnav-state-open .wwg-resnav-toggler-lines span:nth-child(3) {
transform: translate(0px, -7px) rotate(45deg);
width: 30px;
}
body.wwg-resnav-state-open .wwg-resnav-toggler-lines span:nth-child(2) {
transform: translateX(100px);
opacity: 0;
width: 30px;
}
body.wwg-resnav-state-open.wwg-resnav-state-visible:not(.wwg-resnav-hide-bglayer)::before {
content: "";
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background-color: black;
z-index: 399;
}
body:not(.wwg-resnav-state-visible) nav.wwg-resnav {
display: none !important;
} nav.wwg-resnav .wwg-resnav-item {
box-sizing: border-box;
padding-right: 50px;
text-align: center;
}
.wwg-resnav > .wwg-resnav-item > .wwg-resnav-items-wrapper > .wwg-resnav-subback-button > a,
.wwg-resnav > .wwg-resnav-item > a {
text-transform: uppercase;
font-size: clamp(1.3125rem, 1.2039473684210527rem + 0.3157894736842105vw, 1.5rem);
}
nav.wwg-resnav ul .wwg-resnav-item.wwg-resnav-item-hassub > .wwg-resnav-subopen,
nav.wwg-resnav ul .wwg-resnav-item.wwg-resnav-item-hassub {
background-color: var(--color-5);
background-color: #e5e5e5;
}
.wwg-resnav-item-active > a {
font-weight: bold !important;
}
.wwg-resnav-item-redirect > a { }
nav.wwg-resnav .wwg-resnav-item > a {
padding-top: 12px;
padding-bottom: 12px;
padding-top: calc(clamp(0.5rem, 0.35897435897435903rem + 0.4102564102564102vw, 0.6666666666666666rem) * 2);
padding-bottom: calc(clamp(0.5rem, 0.35897435897435903rem + 0.4102564102564102vw, 0.6666666666666666rem) * 2);
display: block;
margin-right: -50px;
}
nav.wwg-resnav .wwg-resnav-item:not(.wwg-resnav-item-redirect) > a:hover {
transform: scale(1.03);
color: inherit;
}
nav.wwg-resnav .wwg-resnav-subopen {
position: absolute;
right: 0px;
height: 100%;
width: 48px;
padding-right: 35px;
padding-left: 35px;
transition: transform 0.4s;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--wwg-resnav-color-main);
color: inherit;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
font-size: 1.5rem;
font-size: clamp(1.15rem, 0.8538461538461537rem + 0.8615384615384617vw, 1.5rem);
height: clamp(2.4375rem, 2.173076923076923rem + 0.7692307692307693vw, 2.75rem);
width: clamp(2.4375rem, 2.173076923076923rem + 0.7692307692307693vw, 2.75rem);
height: 100%;
}
.wwg-resnav-subopen i::before {
content: "\f105";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-style: normal;
font-variant: normal;
font-family: "Font Awesome 5 Free";
line-height: inherit;
vertical-align: baseline;
border: 0;
top: 9px;
right: 16px; }
.wwg-resnav-item-redirect:hover .wwg-resnav-subopen,
nav.wwg-resnav .wwg-resnav-subopen:hover {
transform: scale(1.04);
}
.wwg-resnav-items-wrapper {
max-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
transition: all 0.4s;
background-color: var(--wwg-resnav-color-bg);
text-align: right;
overflow-y: auto;
overflow-y: hidden;
}
nav.wwg-resnav.state-subopen .wwg-resnav-items-wrapper {
overflow-y: auto;
overflow-x: hidden;
}
nav.wwg-resnav .wwg-resnav-items-wrapper {
padding-left: 30px;
padding-right: 30px;
border-left: 1px solid #d1d1d1; text-align: center;
}
.wwg-resnav-item.state-subopen > .wwg-resnav-items-wrapper { padding-top: 15px;
padding-bottom: 15px;
box-sizing: border-box;
height: 100vh !important;
} body[data-wwg-resnav-submode="wipe"] .wwg-resnav-item:not(.wwg-resnav-state-open) > .wwg-resnav-items-wrapper .wwg-resnav-items-wrapper,
body[data-wwg-resnav-submode="wipe"] .wwg-resnav-item:not(.state-subopen) > .wwg-resnav-items-wrapper .wwg-resnav-items-wrapper,
.wwg-resnav-items-wrapper .wwg-resnav-items-wrapper {
position: relative !important;
right: auto !important;
left: auto !important;
padding: 0 !important;
bottom: auto !important;
top: auto !important;
border: 0 !important;
height: auto !important;
box-shadow: unset !important;
}
.wwg-resnav-items-wrapper .wwg-resnav-item.has-sub .wwg-resnav-subopen,
.wwg-resnav-items-wrapper .wwg-resnav-items-wrapper .wwg-resnav-subback-button {
display: none !important;
}
.wwg-resnav-items-wrapper .wwg-resnav-item.has-sub > a {
pointer-events: none;
}
.wwg-resnav-items-wrapper a {
width: 100%;
}
.wwg-resnav-items-wrapper .wwg-resnav-item {
padding: 0 !important;
}
.wwg-resnav-subopen i {
transition: transform 0.4s;
}
.wwg-resnav-item.state-subopen > .wwg-resnav-subopen i {
transform: rotate(90deg);
}
.wwg-resnav-item .has-sub > .wwg-resnav-subopen,
.wwg-resnav-item .has-sub .wwg-resnav-subback-button,
.wwg-resnav-item .has-sub > a {
background-color: #ececec;
} .wwg-resnav {
transition: all 0.4s;
transform: scale(1);
}
body:not(.wwg-resnav-state-open) .wwg-resnav {
transform: scale(0);
} body:not(.wwg-resnav-state-open)[data-wwg-resnav-effect="slideLeft"] .wwg-resnav {
left: -150vw;
}
body[data-wwg-resnav-effect="slideLeft"] .wwg-resnav {
left: 50%;
} body:not(.wwg-resnav-state-open)[data-wwg-resnav-effect="slideRight"] .wwg-resnav {
right: -150vw;
}
body[data-wwg-resnav-effect="slideRight"] .wwg-resnav {
left: auto;
right: 50%;
transform: translate(50%, -50%);
} body:not(.wwg-resnav-state-open)[data-wwg-resnav-effect="slideTop"] .wwg-resnav {
top: -150vh !important;
transform: none;
}
body[data-wwg-resnav-effect="slideTop"] .wwg-resnav {
top: 0;
} body:not(.wwg-resnav-state-open)[data-wwg-resnav-effect="slideBottom"] .wwg-resnav {
bottom: -150vh;
}
body[data-wwg-resnav-effect="slideBottom"] .wwg-resnav {
top: auto;
bottom: 50%;
transform: translate(-50%, 50%);
} body:not(.wwg-resnav-state-open)[data-wwg-resnav-effect="zoomIn"] .wwg-resnav {
transform: translate(-50%, -50%) scale(0) !important;
}
body[data-wwg-resnav-effect="zoomIn"] .wwg-resnav {
transform: translate(-50%, -50%) scale(1);
} body:not(.wwg-resnav-state-open)[data-wwg-resnav-effect="scaleX"] .wwg-resnav {
transform: translate(-50%, -50%) scaleX(0) !important;
}
body[data-wwg-resnav-effect="scaleX"] .wwg-resnav {
transform: translate(-50%, -50%) scaleX(1);
} body:not(.wwg-resnav-state-open)[data-wwg-resnav-effect="scaleY"] .wwg-resnav {
transform: translate(-50%, -50%) scaleY(0) !important;
}
body[data-wwg-resnav-effect="scaleY"] .wwg-resnav {
transform: translate(-50%, -50%) scaleY(1);
} .wwg-resnav .servnavi_box {
display: flex;
font-size: 0.85rem;
font-size: clamp(0.6666666666666666rem, 0.6196581196581196rem + 0.13675213675213682vw, 0.7222222222222222rem);
text-transform: uppercase;
margin-top: 30px !important;
}
.wwg-resnav .servnavi_box li {
display: flex;
}
.wwg-resnav .servnavi_box li:not(:last-child)::after {
content: "|";
margin: 0 5px;
}
.wwg-resnav .servnavi_box a {
color: var(--wwg-resnav-color-text);
}  .bh-navigation > .hnavi_box {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
}
.wwg-navbreak {
width: 50px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
text-align: center;
}
.wwg-navbreak i {
transform: rotate(90deg);
font-size: 1.5rem;
}
.wwg-navbreak-item {
list-style: none;
position: relative;
box-sizing: border-box;
margin: 0;
width: 100%;
}
.wwg-navbreak-item a {
padding: 10px 20px;
display: block;
color: var(--wwg-resnav-color-text);
line-height: normal;
}
.wwg-navbreak-item:hover > a {
transform: scale(1.05);
background-color: #0000000d;
}
.wwg-navbreak-wrapper {
background-color: var(--wwg-resnav-color-bg);
padding: 20px 20px;
top: 100%;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
pointer-events: none;
transition: all 0.4s;
min-width: 200px;
}
.wwg-navbreak:hover .wwg-navbreak-wrapper {
opacity: 1;
pointer-events: all;
}
.wwg-navbreak .wwg-navbreak-itemswrapper {
background-color: var(--wwg-resnav-color-bg);
right: 100%;
top: -20px;
position: absolute;
flex-direction: column;
display: none;
list-style: none;
margin: 0;
padding: 20px 20px;
min-width: 200px;
}
.wwg-navbreak .wwg-navbreak-item[data-position="right"] .wwg-navbreak-itemswrapper {
left: 100%;
right: auto;
}
.wwg-navbreak-item:hover > .wwg-navbreak-itemswrapper {
display: flex;
}
.wwg-navbreak-item[data-position="left"] > a::before {
content: "\e905";
font-family: "bakehouse-iconset";
display: inline-block;
margin-right: 7px;
}
.wwg-navbreak-item[data-position="right"] > a::after {
content: "\e906";
font-family: "bakehouse-iconset";
display: inline-block;
margin-left: 7px;
} body:not(.wwg-resnav-state-open)[data-wwg-resnav-mode="stickyLeftMove"] .wwg-resnav,
body:not(.wwg-resnav-state-open)[data-wwg-resnav-mode="stickyLeft"] .wwg-resnav {
left: 0 !important;
transform: translateX(-100%);
}
body:not(.wwg-resnav-state-open)[data-wwg-resnav-mode="stickyRightMove"] .wwg-resnav,
body:not(.wwg-resnav-state-open)[data-wwg-resnav-mode="stickyRight"] .wwg-resnav {
right: 0 !important;
transform: translateX(100%);
} body[data-wwg-resnav-mode="stickyLeftMove"] .wwg-resnav,
body[data-wwg-resnav-mode="stickyLeft"] .wwg-resnav {
left: 0;
right: auto;
transform: none;
top: 0;
bottom: auto;
height: 100vh;
max-height: 100vh;
}
body.bh-bemode[data-wwg-resnav-mode="stickyLeftMove"] .wwg-resnav,
body.bh-bemode[data-wwg-resnav-mode="stickyLeft"] .wwg-resnav {
max-height: calc(100vh - 50px);
top: 50px;
} body[data-wwg-resnav-mode="stickyRightMove"] .wwg-resnav,
body[data-wwg-resnav-mode="stickyRight"] .wwg-resnav {
right: 0;
left: auto;
transform: none;
top: 0;
bottom: auto;
height: 100vh;
max-height: 100vh;
}
body.bh-bemode[data-wwg-resnav-mode="stickyRightMove"] .wwg-resnav,
body.bh-bemode[data-wwg-resnav-mode="stickyRight"] .wwg-resnav {
max-height: calc(100vh - 50px);
top: 50px;
} body[data-wwg-resnav-mode="stickyRightMove"],
body[data-wwg-resnav-mode="stickyLeftMove"] {
transition: margin 0.4s;
}
body.wwg-resnav-state-open[data-wwg-resnav-mode="stickyRightMove"]:not(.wwg-resnav-state-visible),
body.wwg-resnav-state-open[data-wwg-resnav-mode="stickyLeftMove"]:not(.wwg-resnav-state-visible),
body:not(.wwg-resnav-state-visible),
body:not(.wwg-resnav-state-open) {
margin-left: 0 !important;
margin-right: 0 !important;
}     body[data-wwg-resnav-submode="wipe"] .wwg-resnav-item > .wwg-resnav-items-wrapper {
z-index: 10;
max-height: 100vh !important; }
body[data-wwg-resnav-submode="wipe"] .wwg-resnav-item:not(.wwg-resnav-state-open) > .wwg-resnav-items-wrapper,
body[data-wwg-resnav-submode="wipe"] .wwg-resnav-item:not(.state-subopen) > .wwg-resnav-items-wrapper {
top: -150vh !important;
}
body[data-wwg-resnav-submode="wipe"].wwg-resnav-state-open .wwg-resnav-item.state-subopen > .wwg-resnav-items-wrapper {
top: 0 !important;
box-shadow: 0px 6px 15px -8px rgb(109 98 98);
}
body[data-wwg-resnav-mode="stickyRight"][data-wwg-resnav-submode="wipe"] .wwg-resnav-item:not(.state-subopen) > .wwg-resnav-items-wrapper,
body[data-wwg-resnav-mode="stickyRightMove"][data-wwg-resnav-submode="wipe"] .wwg-resnav-item:not(.state-subopen) > .wwg-resnav-items-wrapper {
left: auto !important;
right: -100vw !important;
}
body[data-wwg-resnav-mode="stickyRight"][data-wwg-resnav-submode="wipe"] .wwg-resnav-item.state-subopen > .wwg-resnav-items-wrapper,
body[data-wwg-resnav-mode="stickyRightMove"][data-wwg-resnav-submode="wipe"] .wwg-resnav-item.state-subopen > .wwg-resnav-items-wrapper {
right: 0 !important;
left: auto !important;
}
.wwg-resnav-pathinfo {
margin: 0;
padding: 0;
font-size: 0.85em;
text-align: right;
margin-bottom: 20px;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
display: none;
}
.wwg-resnav-pathinfo i {
margin: 0 5px;
}
.wwg-resnav-pathinfo li {
list-style: none;
margin: 0;
padding: 0;
font-style: italic;
}
.wwg-resnav-pathinfo li:last-child {
font-weight: bold;
}
.wwg-resnav-pathinfo li i {
margin: 0 7px;
display: inline-flex;
align-items: center;
}
.wwg-resnav-pathinfo a {
color: inherit;
}
.wwg-resnav-pathinfo a:hover {
text-decoration: underline;
}
.wwg-resnav-pathinfo li:last-child a {
pointer-events: none;
} @media screen and (max-width: 1024px) {
.wwg-navbreak-wrapper {
min-width: 160px;
}
.wwg-navbreak .wwg-navbreak-itemswrapper {
min-width: 160px;
}
}
@media screen and (max-width: 550px) {
nav.wwg-resnav {
width: 100%;
max-width: calc(100vw - 60px);
max-height: calc(100vh - 140px);
}
.wwg-resnav-toggler-lines span {
width: 26px;
height: 2px;
}
body.wwg-resnav-state-open .wwg-resnav-toggler-lines span:nth-child(1) {
transform: rotate(-45deg) translate(-4px, 4px);
width: 24px;
}
body.wwg-resnav-state-open .wwg-resnav-toggler-lines span:nth-child(2) {
width: 24px;
}
body.wwg-resnav-state-open .wwg-resnav-toggler-lines span:nth-child(3) {
transform: translate(0px, -6px) rotate(45deg);
width: 24px;
}
.wwg-resnav-toggler .wwg-resnav-toggler-lines {
width: 26px;
}
.wwg-resnav-toggler-label {
margin-left: 10px;
}
} .wwg-resnav #menu-quicklinks li,
.wwg-resnav #menu-quicklinks ul {
list-style: none;
padding: 0;
margin: 0;
}
.wwg-resnav #menu-quicklinks {
margin: 0;
margin-top: calc(clamp(1.1111111111111112rem, 0.6410256410256411rem + 1.3675213675213675vw, 1.6666666666666667rem) + clamp(1.25rem, 0.1923076923076923rem + 3.076923076923077vw, 2.5rem));
font-size: 0.8rem;
text-transform: none;
gap: 10px;
justify-content: flex-end;
}
.wwg-resnav .topbarbutton-wrapper {
display: flex;
position: relative;
top: auto;
bottom: auto;
left: auto;
right: auto;
justify-content: center;
justify-content: center;
flex-direction: column;
align-items: center;
padding-top: 0 !important;
}
.wwg-resnav .topbarbutton-wrapper::after {
content: "";
background-image: url(//www.sonnia.it/wp-content/themes/storefront-child/assets/images/sonniaflower.svg);
background-size: contain;
background-position: center;
width: 26px;
height: 26px;
width: clamp(1.1666666666666667rem, 1.0058479532163744rem + 0.4678362573099414vw, 1.4444444444444444rem);
height: clamp(1.1666666666666667rem, 1.0058479532163744rem + 0.4678362573099414vw, 1.4444444444444444rem);
display: inline-block;
background-repeat: no-repeat;
margin-top: 20px;
}
body.logged-in .wwg-resnav .topbarbutton-wrapper a:last-child {
display: block;
}
body.logged-in .wwg-resnav .topbarbutton-wrapper a:not(:last-child) {
display: none;
}
.wwg-resnav .topbarbutton-wrapper a,
.wwg-resnav .topbarbutton-wrapper a {
padding-top: calc(clamp(0.5rem, 0.35897435897435903rem + 0.4102564102564102vw, 0.6666666666666666rem) * 2);
padding-bottom: calc(clamp(0.5rem, 0.35897435897435903rem + 0.4102564102564102vw, 0.6666666666666666rem) * 2);
text-transform: uppercase;
font-size: clamp(1.3125rem, 1.2039473684210527rem + 0.3157894736842105vw, 1.5rem) !important;
}