.topbar {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 4px 32px;
padding-inline: 20px;
text-align: center;
}
.topbar span { display: block; float: none; }
.header-inner {
width: min(1240px, calc(100% - 96px));
justify-content: flex-start;
gap: 40px;
}
#site-nav {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 12px 25px;
color: var(--green);
font-size: 22px;
font-weight: 750;
}
#site-nav > a,
#site-nav > .product-nav > summary,
#site-nav .custom-nav > li > a {
padding-block: 10px;
white-space: nowrap;
}
#site-nav > a:hover,
#site-nav > .product-nav > summary:hover {
color: #78603c;
text-decoration: underline;
text-underline-offset: 7px;
}
#site-nav > .button { font-size: 18px; font-weight: 700; }
.product-menu { top: 100%; font-size: 17px; font-weight: 500; }
.category-menu > summary { font-size: 18px; font-weight: 700; }
.style-item { font-size: 16px; font-weight: 400; }
.custom-nav { flex-flow: row wrap; align-items: center; }
.category-menu .category-menu > summary { font-size: 17px; font-weight: 650; }
.category-menu .category-menu .style-menu { position: static; width: 100%; max-height: none; box-shadow: none; padding: 10px; }
@media (max-width: 1100px) {
.header-inner { width: calc(100% - 40px); flex-wrap: wrap; gap: 0; padding-block: 15px 12px; }
.header-inner > .brand { width: 100%; margin-bottom: 10px; }
#site-nav {
position: relative;
inset: auto;
width: 100%;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
gap: 8px 26px;
padding: 10px 0 0;
border-top: 1px solid var(--line);
background: transparent;
max-height: none;
overflow: visible;
box-shadow: none;
}
#site-nav > .button { margin-left: auto; }
.product-nav { position: static; }
.product-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
width: 100%;
margin: 0;
max-height: 60dvh;
overflow-y: auto;
box-shadow: 0 15px 30px #143b3522;
}
.style-menu { position: static; width: 100%; margin-top: 0; max-height: none; box-shadow: none; }
.product-nav > summary { gap: 8px; }
.custom-nav { flex-flow: row wrap; gap: 12px 20px; }
}
@media (max-width: 600px) {
html { scroll-padding-top: 195px; }
.header-inner { padding-block: 12px 10px; }
#site-nav { gap: 0 16px; font-size: 20px; }
#site-nav > a,
#site-nav > .product-nav > summary { padding-block: 8px; }
#site-nav > .button { font-size: 16px; padding: 6px 13px; margin-left: 0; }
} @media (max-width: 600px) {
html { scroll-padding-top: 155px; }
.topbar { display: none; }
.header-inner { min-height: 0; padding-block: 8px 6px; }
.header-inner > .brand { margin-bottom: 6px; gap: 8px; font-size: 16px; line-height: 1.3; white-space: normal; }
.brand > span:last-child { min-width: 0; }
.brand small { font-size: 8px; line-height: 1.3; margin-top: 3px; letter-spacing: 1px; }
.brand .logo { width: 40px; height: 38px; }
#site-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 8px; padding-top: 3px; font-size: 18px; line-height: 1.2; }
#site-nav > a, #site-nav > .product-nav > summary { min-height: 40px; display: flex; align-items: center; padding-block: 3px; }
#site-nav .custom-nav { gap: 0 12px; line-height: 1.2; }
#site-nav .custom-nav > li > a { display: flex; align-items: center; min-height: 40px; padding-block: 3px; }
#site-nav > .custom-nav { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
html { scroll-padding-top: 125px; }
.header-inner { padding-block: 5px 3px; }
.header-inner > .brand { margin-bottom: 3px; line-height: 1.2; }
.brand small { margin-top: 1px; line-height: 1.15; }
.brand .logo { width: 34px; height: 32px; }
#site-nav { padding-top: 1px; line-height: 1.1; }
#site-nav > a, #site-nav > .product-nav > summary,
#site-nav .custom-nav > li > a { min-height: 32px; padding-block: 1px; }
}
.header-inner > .brand { font-family: inherit; font-size: 22px; font-weight: 750; }
@media (max-width: 600px) {
.header-inner > .brand { font-size: 18px; font-weight: 750; }
}
.site-header { background: #f3eee3; border-bottom-color: #e5dfd1; }
.topbar { background: #f0eadf; border-bottom-color: #e5dfd1; }
.header-inner > .brand { font-size: 26px; white-space: normal; line-height: 1.3; }
@media (max-width: 600px) {
.header-inner > .brand { font-size: 22px; line-height: 1.25; }
#site-nav { border-top-color: #e5dfd1; }
html { scroll-padding-top: 145px; }
}
@media (max-width: 360px) { .header-inner > .brand { font-size: 19px; } }
.header-inner > .brand { font-size: 28px; }
@media (max-width: 600px) { .header-inner > .brand { font-size: 24px; } }
@media (max-width: 360px) { .header-inner > .brand { font-size: 21px; } }