.pd-cerca {
position: absolute;
inset-inline: 0;
inset-block-start: 100%;
z-index: 1;
background: var(--pd-crema);
border-block-end: 1px solid var(--pd-line);
border-end-start-radius: var(--pd-radius-blocco);
border-end-end-radius: var(--pd-radius-blocco);
box-shadow: 0 20px 40px -26px rgb(58 40 26 / 30%),
0 54px 96px -56px rgb(58 40 26 / 34%);
overflow: hidden;
transform-origin: top;
}
.pd-cerca[hidden] { display: none; }
.pd-header, .pd-topbar { position: relative; z-index: 2; }
.pd-cerca__inner {
padding-block: clamp(var(--pd-space-8), 3vw, var(--pd-space-12));
max-block-size: min(76vh, calc(100dvh - 140px));
overflow-y: auto; overscroll-behavior: contain;
}
.pd-cerca__form {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center; gap: var(--pd-space-4);
padding-block-end: var(--pd-space-4);
border-block-end: 2px solid var(--pd-line);
transition: border-color var(--pd-dur-base) var(--pd-ease);
}
.pd-cerca__form:focus-within { border-block-end-color: var(--pd-fucsia); }
.pd-cerca__ico { color: var(--pd-fucsia); flex: 0 0 auto; }
.pd-cerca__form input[type="search"] {
inline-size: 100%; border: 0; background: none; padding: 0;
font-family: var(--pd-font-display); font-weight: var(--pd-peso-display);
font-size: clamp(1.15rem, 2.8vw, 2.1rem); line-height: 1.2;
color: var(--pd-nero); letter-spacing: -0.02em;
}
.pd-cerca__form input[type="search"]:focus { outline: none; box-shadow: none; }
.pd-cerca__form input::placeholder { color: color-mix(in srgb, var(--pd-nero) 34%, transparent); }
.pd-cerca__form input::-webkit-search-cancel-button { display: none; }
.pd-cerca__x {
background: none; border: 0; cursor: pointer; color: var(--pd-ink-soft);
inline-size: 40px; block-size: 40px; border-radius: 50%;
display: grid; place-items: center;
transition: background var(--pd-dur-base) var(--pd-ease), color var(--pd-dur-base) var(--pd-ease);
}
.pd-cerca__x:hover { background: color-mix(in srgb, var(--pd-nero) 8%, transparent); color: var(--pd-nero); }
.pd-cerca__out:not(:empty) { margin-block-start: var(--pd-ritmo-tit); }
.pd-find__lab {
margin: 0 0 var(--pd-space-6);
font-family: var(--pd-font-body); font-size: var(--pd-t-micro); font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--pd-fucsia);
}
.pd-find__lab:not(:first-child) { margin-block-start: var(--pd-space-8); }
.pd-find__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pd-space-2); }
.pd-find__pills a {
display: inline-flex; align-items: center; gap: var(--pd-space-2);
min-block-size: 40px; padding: 0 var(--pd-space-5);
background: var(--pd-sabbia); border-radius: 999px;
font-size: var(--pd-t-nota); color: var(--pd-nero); text-decoration: none;
transition: background var(--pd-dur-base) var(--pd-ease), color var(--pd-dur-base) var(--pd-ease);
}
.pd-find__pills a em { font-style: normal; color: var(--pd-ink-soft); font-size: var(--pd-t-micro); }
.pd-find__pills a:hover { background: var(--pd-nero); color: var(--pd-crema); }
.pd-find__pills a:hover em { color: color-mix(in srgb, var(--pd-crema) 70%, transparent); }
.pd-find__grid {
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--pd-space-4);
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.pd-find__grid a {
display: flex; flex-direction: column; gap: var(--pd-space-2); text-decoration: none;
background: var(--pd-sabbia); border-radius: var(--pd-radius-md);
padding: var(--pd-space-4) var(--pd-space-4) var(--pd-space-5);
block-size: 100%;
transition: transform var(--pd-dur-base) var(--pd-ease),
background var(--pd-dur-base) var(--pd-ease);
}
.pd-find__grid a:hover { transform: translateY(-3px); background: var(--pd-tinta-2); }
.pd-find__grid figure {
margin: 0; aspect-ratio: 1 / 1; overflow: hidden;
border-radius: calc(var(--pd-radius-md) - 4px);
background: color-mix(in srgb, var(--pd-bianco) 60%, transparent);
}
.pd-find__grid img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.pd-find__nome {
font-family: var(--pd-font-body); font-size: var(--pd-t-nota); font-weight: 500;
line-height: 1.3; color: var(--pd-nero);
min-block-size: calc(1.3em * 2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pd-find__prezzo {
margin-block-start: auto; padding-block-start: var(--pd-space-2);
font-size: var(--pd-t-nota); color: var(--pd-ink-soft);
}
.pd-find__all { margin: var(--pd-ritmo-tit) 0 0; }
.pd-find__vuoto {
margin: 0; padding: var(--pd-space-8) 0 0;
font-size: var(--pd-t-guida); line-height: 1.6; color: var(--pd-ink-soft); max-inline-size: 56ch;
}
.pd-cerca__velo {
position: fixed; inset: 0; z-index: 95;
background: rgb(29 25 22 / 38%);
animation: pd-velo-cerca 260ms var(--pd-ease) both;
}
.pd-cerca__velo[hidden] { display: none; }
@keyframes pd-velo-cerca { from { opacity: 0; } to { opacity: 1; } }
.pd-head.is-finding .pd-action--find-d,
.pd-head.is-finding .pd-action--find-m { color: var(--pd-fucsia); }
@media (prefers-reduced-motion: reduce) {
.pd-cerca__velo { animation: none; }
.pd-find__grid a:hover { transform: none; }
}
.pd-cerca__spunti { margin-block-start: var(--pd-ritmo-tit); }
.pd-cerca__spunti[hidden] { display: none; }
.pd-find__all .pd-btn {
background: none; color: var(--pd-nero); border-color: var(--pd-line);
}
.pd-find__all .pd-btn:hover { background: var(--pd-nero); border-color: var(--pd-nero); color: var(--pd-crema); }
@media (max-width: 767px) {
.pd-cerca__form { gap: var(--pd-space-3); padding-block-end: var(--pd-space-3); }
.pd-cerca__ico { inline-size: 21px; block-size: 21px; }
.pd-cerca__x { inline-size: 44px; block-size: 44px; margin-inline-end: -8px; }
.pd-cerca__inner { padding-block: var(--pd-space-6) var(--pd-space-8); }
.pd-find__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body:has(.pd-head.is-finding) .pd-pu {
opacity: 0;
transform: translateY(28px);
pointer-events: none;
}