/* Ricerca in home: la misura scritta come sul fianco del pneumatico.
   Si carica dopo site.css e ne ridefinisce solo il modulo di ricerca. */

.hero { background: var(--soft, #f8fafc); padding: 2.25rem 0 2.5rem; border-bottom: 1px solid var(--gray, #e5e7eb); }
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
.hero-sub { margin-bottom: 1.4rem; }

.finder { max-width: 64rem; }
.finder-panel {
    position: relative; overflow: hidden;
    background: var(--charcoal, #1f2933); color: #fff;
    border-radius: 1.1rem; padding: 1.4rem clamp(1rem, 3.5vw, 2.2rem) 2.6rem;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px -14px rgba(31,41,51,.55);
}
/* battistrada: tacche sul bordo inferiore del pannello */
.finder-ribs {
    position: absolute; left: 0; right: 0; bottom: 0; height: .9rem;
    background: repeating-linear-gradient(115deg, transparent 0 10px, rgba(255,255,255,.1) 10px 14px);
    border-top: 1px solid rgba(255,255,255,.08);
}

.finder .chips { margin: 0 0 1.1rem; gap: .4rem; }
.finder .chip span { border: 2px solid #52606d; background: transparent; color: #e5e7eb; padding: .38rem .95rem; transition: background .15s, color .15s, border-color .15s; }
.finder .chip:hover span { border-color: #9aa5b1; }
.finder .chip input:checked + span { background: #fff; border-color: #fff; color: var(--charcoal, #1f2933); }
.finder .chip input:focus-visible + span { outline: 3px solid var(--cyan, #22d3ee); outline-offset: 2px; }

.finder .marking { gap: clamp(.25rem, 1.6vw, .9rem); align-items: flex-start; }
.finder .mk { position: relative; }
.finder .mk-box { position: relative; display: block; }
/* il menu vero e' trasparente e copre il numero: la tendina nativa resta di grandezza normale */
.finder .mk-box select {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
    opacity: 0; cursor: pointer; font: 500 1rem var(--font, system-ui, sans-serif); color: #1f2933; background: #fff;
}
.finder .mk-box select:disabled { cursor: default; }
.finder .mk-box select option { font: 500 1rem var(--font, system-ui, sans-serif); color: #1f2933; background: #fff; }
.finder .mk-val {
    display: block; text-align: center; color: #fff; padding: 0 1.2rem .05em 0; border-bottom: 3px solid #52606d;
    font: 700 clamp(2.7rem, 10.5vw, 5.6rem)/1.05 var(--font-cond, "Barlow Condensed", sans-serif); letter-spacing: .01em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f59e0b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .15rem bottom 1.1rem / clamp(.6rem, 1.6vw, .9rem) auto;
    transition: border-color .15s; min-height: 1.05em; user-select: none;
}
.finder .mk-val.is-empty { color: #6b7886; }
.finder .mk-val.is-disabled { color: #4b5866; border-bottom-color: #3b4753; background-image: none; }
.finder .mk-box:hover .mk-val:not(.is-disabled) { border-bottom-color: #9aa5b1; }
.finder .mk-box select:focus-visible + .mk-val { border-bottom-color: var(--cyan, #22d3ee); }
.finder .mk-cap { color: #cbd2d9; margin-top: .5rem; }
.finder .mk-cap small { color: #8896a4; font-size: .8rem; margin-left: .15rem; }
.finder .mk-sep { line-height: 1.05; color: var(--amber, #f59e0b); padding-bottom: 0; font-weight: 700; }

.finder .finder-act { margin-top: 1.5rem; align-items: flex-end; gap: 1rem 1.25rem; }
.finder .season-cap { color: #cbd2d9; }
.finder .season select { background: #2b3844; color: #fff; border: 2px solid #52606d; border-radius: 6px; }
.finder .season select:focus-visible { outline: 3px solid var(--cyan, #22d3ee); outline-offset: 2px; }
.finder .finder-go {
    background: var(--amber, #f59e0b); color: var(--charcoal, #1f2933);
    font-size: 1.5rem; padding: .62rem 2rem; border-radius: 6px; margin-left: auto;
    box-shadow: 0 2px 0 #b77605; transition: transform .1s, box-shadow .1s, background .15s;
}
.finder .finder-go:hover { background: #fbb840; color: var(--charcoal, #1f2933); }
.finder .finder-go:active { transform: translateY(2px); box-shadow: none; }
.finder .finder-go:focus-visible { outline: 3px solid var(--cyan, #22d3ee); outline-offset: 3px; }
.finder .finder-err { color: #ffb4a9; margin: 1rem 0 0; }

/* aiuto: dove si trova la misura */
.finder-help { margin-top: 1rem; max-width: 40rem; }
.finder-help summary { cursor: pointer; font-weight: 600; color: var(--petrol, #0f7c8b); padding: .25rem 0; width: fit-content; }
.finder-help summary:focus-visible { outline: 3px solid var(--petrol, #0f7c8b); outline-offset: 3px; }
.finder-help-in { background: #fff; border: 1px solid var(--gray, #e5e7eb); border-radius: .75rem; padding: 1rem 1.2rem; margin-top: .5rem; }
.finder-help-in ul { margin: .5rem 0 .75rem; padding-left: 1.1rem; }
.finder-help-in li { margin: .2rem 0; }
.sidewall { margin: 0; font: 700 clamp(2rem, 7vw, 2.8rem)/1.1 var(--font-cond, "Barlow Condensed", sans-serif); color: var(--charcoal, #1f2933); letter-spacing: .02em; }
.sidewall span:first-child, .sidewall span:nth-child(3) { color: var(--charcoal, #1f2933); }
.sidewall .sw-dim { color: #8896a4; }

@media (max-width: 40rem) {
    .finder .chip span { padding: .35rem .72rem; font-size: .95rem; }
    .finder .chips { gap: .3rem; }
    .finder .mk-cap small { display: block; margin: 0; }
    .finder .finder-go { width: 100%; margin-left: 0; text-align: center; }
    .finder .season { width: 100%; }
    .finder .season select { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .finder *, .finder *::before { transition: none !important; }
}

/* ---------- home: i negozi che confrontiamo (al posto della fascia DOT, DEMO e BLEM) ---------- */
.home-shops { background: #fff; border-top: 1px solid var(--gray, #e5e7eb); }
.home-shops-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.25rem; }
.home-shops-head h2 { margin: 0; }
.home-shops-all { font-weight: 600; }
.home-shops-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.home-shop {
    display: flex; align-items: center; justify-content: center; height: 8.5rem; padding: 1rem 1.25rem;
    background: #fff; border: 1px solid var(--gray, #e5e7eb); border-radius: .9rem; text-decoration: none; color: var(--charcoal, #1f2933);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.home-shop:hover { border-color: var(--petrol, #0f7c8b); box-shadow: 0 8px 20px -12px rgba(31,41,51,.45); transform: translateY(-2px); }
.home-shop:focus-visible { outline: 3px solid var(--petrol, #0f7c8b); outline-offset: 3px; }
.home-shop img { display: block; max-width: 100%; max-height: 5.5rem; width: auto; height: auto; object-fit: contain; }
.home-shop-name { font: 700 1.6rem/1.1 var(--font-cond, "Barlow Condensed", sans-serif); text-align: center; }
.home-shop-fit { margin-top: .4rem; }
.home-shops-cta { display: flex; flex-direction: column; justify-content: center; gap: .5rem; min-height: 8.5rem; padding: 1rem 1.25rem; border: 2px dashed #c3cad2; border-radius: .9rem; }
.home-shops-cta strong { font: 700 1.3rem/1.15 var(--font-cond, "Barlow Condensed", sans-serif); }
.home-shops-cta a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .home-shop { transition: none; } .home-shop:hover { transform: none; } }