@property --pd-header-pad { syntax: '<length>'; inherits: false; initial-value: 1.75rem; }
.pd-head {
position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
background: color-mix(in srgb, var(--pd-crema) 92%, transparent);
backdrop-filter: blur(14px) saturate(1.1);
border-block-end: 1px solid transparent;
transition: border-color var(--pd-dur-base) var(--pd-ease),
box-shadow var(--pd-dur-base) var(--pd-ease);
}
.pd-topbar { background: var(--pd-nero); color: var(--pd-sabbia); }
.pd-topbar__rail { display: grid; grid-template-rows: 1fr; transition: none; }
.pd-topbar__rail > * { overflow: hidden; min-height: 0; }
.pd-topbar__inner {
display: flex; gap: var(--pd-space-4); justify-content: center; align-items: center;
flex-wrap: wrap; padding-block: var(--pd-space-3);
font-family: var(--pd-font-body); font-size: var(--pd-size-xs);
letter-spacing: var(--pd-tracking-wide); text-transform: uppercase;
}
.pd-topbar__inner i { inline-size: 3px; block-size: 3px; border-radius: 50%; background: currentColor; opacity: .4; }
.pd-header { --pd-header-pad: 1.75rem; }
.pd-header__inner {
display: flex; align-items: center; gap: var(--pd-space-8);
padding-block: var(--pd-header-pad);
}
.pd-logo { transform-origin: left center; will-change: transform; flex: 0 0 auto; }
.pd-logo__text { font-family: var(--pd-font-display); font-size: var(--pd-size-md); text-decoration: none; }
@media (min-width: 1000px) { .pd-burger { display: none; } }
.pd-search form { display: grid; grid-template-columns: 1fr auto; gap: var(--pd-space-4); padding-block: var(--pd-space-8); }
.pd-search input[type="search"] {
font-family: var(--pd-font-display); font-size: var(--pd-size-md);
background: transparent; border: 0; border-block-end: 1px solid var(--pd-line);
padding: var(--pd-space-3) 0; color: var(--pd-ink);
}
.pd-search input[type="search"]:focus { outline: none; border-block-end-color: var(--pd-nero); }
.pd-search button {
font-family: var(--pd-font-body); font-size: var(--pd-size-xs);
letter-spacing: var(--pd-tracking-wide); text-transform: uppercase;
background: var(--pd-nero); color: var(--pd-paper); border: 1px solid var(--pd-nero);
padding-inline: var(--pd-space-10); min-height: 52px; cursor: pointer; border-radius: var(--pd-radius);
}
.pd-drawer { position: fixed; inset: 0; background: var(--pd-crema); z-index: 200; overflow-y: auto; }
.pd-drawer__inner { padding: var(--pd-space-32) clamp(var(--pd-space-5), 6vw, var(--pd-space-12)) var(--pd-space-12); }
.pd-drawer__nav { list-style: none; margin: 0; padding: 0; }
.pd-drawer__nav > li > a {
display: block; padding-block: var(--pd-space-5); text-decoration: none;
font-family: var(--pd-font-display); font-size: var(--pd-size-lg);
letter-spacing: var(--pd-tracking-tight); text-transform: none; border-block-end: var(--pd-border);
}
.pd-drawer__nav > li > a::after { display: none; }
.pd-drawer__foot { margin-block-start: var(--pd-space-16); font-size: var(--pd-size-sm); color: var(--pd-ink-soft); }
@media (max-width: 1199px) {
.pd-mega.is-flat .pd-mega__figures { display: flex; }
.pd-mega.is-flat .pd-mega__fig:nth-child(n+3) { display: none; }
}
@media (max-width: 1199px) {
.pd-mega__figures { display: none; }
.pd-mega.is-flat .pd-mega__figures { display: grid; grid-template-columns: repeat(2, 1fr); }
.pd-mega.is-flat .pd-mega__fig:nth-child(n+3) { display: none; }
}
@media (max-width: 1199px) {
.pd-mega__figures, .pd-mega.is-flat .pd-mega__figures { display: none; }
.pd-mega__inner, .pd-mega.is-flat .pd-mega__inner { grid-template-columns: 260px 1fr; }
}
.pd-header__inner {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: var(--pd-space-4); padding-block: var(--pd-header-pad);
}
.pd-burger {
justify-self: start; display: inline-flex; align-items: center; gap: var(--pd-space-4);
background: none; border: 0; cursor: pointer; color: inherit;
padding: var(--pd-space-2) 0; min-height: 46px;
font-family: var(--pd-font-body); font-size: var(--pd-size-xs);
letter-spacing: var(--pd-tracking-wide); text-transform: uppercase;
transition: opacity var(--pd-dur-fast) var(--pd-ease);
}
.pd-burger:hover { opacity: .6; }
.pd-burger__lines { display: grid; gap: 7px; }
.pd-burger__lines i { display: block; inline-size: 26px; block-size: 1px; background: currentColor; transition: transform var(--pd-dur-base) var(--pd-ease); }
.pd-burger[aria-expanded="true"] .pd-burger__lines i:first-child { transform: translateY(4px) rotate(45deg); }
.pd-burger[aria-expanded="true"] .pd-burger__lines i:last-child  { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 767px) { .pd-burger__word { display: none; } }
.pd-logo { justify-self: center; }
.pd-actions { justify-self: end; display: flex; align-items: center; gap: var(--pd-space-1); }
.pd-action {
position: relative; display: grid; place-items: center;
inline-size: 46px; block-size: 46px; color: inherit;
background: none; border: 0; cursor: pointer; padding: 0;
transition: opacity var(--pd-dur-fast) var(--pd-ease);
}
.pd-action:hover { opacity: .55; }
.pd-cart-count {
position: absolute; inset-block-start: 8px; inset-inline-end: 5px;
min-inline-size: 17px; block-size: 17px; display: grid; place-items: center;
background: var(--pd-fucsia); color: var(--pd-paper); border-radius: 999px;
font-family: var(--pd-font-body); font-size: 10px; font-variant-numeric: tabular-nums;
}
.pd-burger { display: inline-flex !important; align-items: center; gap: var(--pd-space-4); }
.pd-burger > .pd-burger__lines { display: grid !important; gap: 7px; inline-size: auto; block-size: auto; background: none !important; }
.pd-burger > .pd-burger__lines > i {
display: block; inline-size: 26px; block-size: 1.5px; background: currentColor; border-radius: 2px;
transition: transform var(--pd-dur-base) var(--pd-ease);
}
.pd-burger > .pd-burger__word {
display: inline-block !important; inline-size: auto !important; block-size: auto !important;
background: none !important; color: inherit; line-height: 1;
}
.pd-burger[aria-expanded="true"] > .pd-burger__lines > i:first-child { transform: translateY(4.2px) rotate(45deg); }
.pd-burger[aria-expanded="true"] > .pd-burger__lines > i:last-child  { transform: translateY(-4.2px) rotate(-45deg); }
@media (max-width: 767px) {
.pd-header__inner { gap: var(--pd-space-2); padding-block: var(--pd-space-4); }
.pd-action { inline-size: 48px; block-size: 48px; }
.pd-action .pd-i { inline-size: 23px !important; block-size: 23px !important; }
.pd-burger { gap: 0; }
.pd-burger > .pd-burger__lines > i { inline-size: 28px; block-size: 1.6px; }
.pd-cart-count { inset-block-start: 6px; inset-inline-end: 3px; min-inline-size: 18px; block-size: 18px; font-size: 10.5px; }
}
.pd-i { display: block; }
.pd-action .pd-i { inline-size: 20px; block-size: 20px; }
@media (max-width: 767px) { .pd-action .pd-i { inline-size: 23px; block-size: 23px; } }
.pd-drawer__close .pd-i, .pd-drawer__find .pd-i { inline-size: 17px; block-size: 17px; }
.pd-lv__go svg, .pd-lv__back svg { inline-size: 17px; block-size: 17px; }
.pd-head { transition: background var(--pd-dur-base) var(--pd-ease), border-color var(--pd-dur-base) var(--pd-ease), box-shadow var(--pd-dur-base) var(--pd-ease); }
.pd-header { transition: none; }
.pd-header__inner { transition: padding-block var(--pd-dur-slow) var(--pd-ease); }
.pd-topbar__rail { transition: grid-template-rows var(--pd-dur-slow) var(--pd-ease); }
.pd-topbar { transition: opacity var(--pd-dur-base) var(--pd-ease); }
@media (prefers-reduced-motion: reduce) {
.pd-header__inner, .pd-topbar__rail, .pd-topbar { transition: none; }
}
.home .pd-head:not(.is-stuck) .pd-burger,
.home .pd-head:not(.is-stuck) .pd-action { text-shadow: 0 1px 12px rgb(20 17 16 / 45%); }
.home .pd-head:not(.is-stuck) .pd-burger__lines i { box-shadow: 0 1px 8px rgb(20 17 16 / 35%); }
@media (max-width: 767px) {
.pd-burger > .pd-burger__word { display: none !important; }
.pd-burger { gap: 0; inline-size: 48px; justify-content: flex-start; }
}
@media (min-width: 768px) { .pd-burger { gap: var(--pd-space-4); } }
.pd-h-left { display: flex; align-items: center; gap: var(--pd-space-2); justify-self: start; }
.pd-action--find-m { display: none; }
@media (max-width: 767px) {
.pd-action--find-m { display: grid; }
.pd-action--find-d { display: none; }
.pd-h-left { gap: 0; }
}
@media (min-width: 768px) {
.pd-action { inline-size: 52px; block-size: 52px; }
.pd-action .pd-i { inline-size: 23px; block-size: 23px; }
.pd-burger > .pd-burger__lines > i { inline-size: 30px; block-size: 1.6px; }
.pd-burger { gap: var(--pd-space-4); font-size: 0.75rem; }
.pd-cart-count { inset-block-start: 9px; inset-inline-end: 7px; min-inline-size: 18px; block-size: 18px; font-size: 10.5px; }
}
.pd-head {
transform: translateY(0);
transition: transform var(--pd-dur-slow) var(--pd-ease),
background var(--pd-dur-base) var(--pd-ease),
box-shadow var(--pd-dur-base) var(--pd-ease),
border-color var(--pd-dur-base) var(--pd-ease);
}
.pd-head.is-hidden { transform: translateY(-100%); }
.pd-head.is-stuck {
background: color-mix(in srgb, var(--pd-crema) 96%, transparent);
backdrop-filter: blur(14px) saturate(1.1);
border-block-end-color: var(--pd-line);
box-shadow: 0 12px 34px -28px rgb(29 25 22 / 40%);
}
.pd-head.is-stuck .pd-header__inner { padding-block: var(--pd-header-pad); }
.pd-head.is-stuck .pd-topbar__rail { grid-template-rows: 0fr; }
.pd-head.is-stuck .pd-topbar { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pd-head { transition: background var(--pd-dur-base) linear; } .pd-head.is-hidden { transform: none; } }
.pd-topbar__inner {
list-style: none; margin: 0; padding: 0;
display: flex; align-items: center; justify-content: flex-start;
gap: 0;
padding-block: var(--pd-space-2);
font-family: var(--pd-font-body); font-size: var(--pd-size-xs);
letter-spacing: var(--pd-tracking-wide); text-transform: uppercase;
overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; -ms-overflow-style: none;
overscroll-behavior-x: contain;
flex-wrap: nowrap;
}
.pd-topbar__inner::-webkit-scrollbar { display: none; }
.pd-topbar__inner li {
flex: 0 0 100%; max-inline-size: 100%;
scroll-snap-align: center;
display: inline-flex; align-items: center; justify-content: center;
gap: var(--pd-space-3); white-space: nowrap;
}
.pd-topbar__inner svg { opacity: .6; flex: 0 0 auto; }
@media (max-width: 899px) { .pd-topbar__inner li { font-size: 0.625rem; } }
@media (max-width: 767px) {
.pd-header__inner { padding-block: var(--pd-space-2); }
.pd-head.is-stuck .pd-header__inner { padding-block: var(--pd-space-1); }
}
.pd-cart-count.is-vuoto, .pd-cart-count:empty { display: none; }
:root { --pd-head-h: 150px; }
@media (max-width: 899px) { :root { --pd-head-h: 147px; } }
@media (max-width: 767px) { :root { --pd-head-h: 105px; } }
.pd-head-spazio { block-size: var(--pd-head-h, 150px); }
.pd-drawer-open .pd-head,
.pd-drawer-open .pd-topbar,
.pd-head.is-finding,
.pd-head.is-finding .pd-topbar {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}