/* Pure Man Care — Store vendor: barra "Vendor products" + pill filtro (Figma 522-18172)
   Titolo Lora italic 32px + 3 pill glass (Type/Brand/Price) con dropdown.
   Sfondo store chiaro -> testo scuro. */

/* Nasconde la barra search/sort nativa di Dokan (il design usa solo le pill) */
body.dokan-store .dokan-store-products-filter-area {
    display: none !important;
}

/* --- Barra: titolo + pill in riga --- */
.pmc-store-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    /* Figma 522-18172: 64px sotto l'hero, 105px sopra la griglia
       (il bottom collassa col margin-top della griglia: vince il maggiore) */
    margin: 64px 0 105px;
}

.pmc-store-filters__title {
    margin: 0;
    padding: 0;
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-size: 32px;
    line-height: 1.2;
    color: #080707;
}

.pmc-store-filters__pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Pill (details/summary) --- */
.pmc-filter-pill {
    position: relative;
}
.pmc-filter-pill__summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 24px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 31px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: #080707;
    white-space: nowrap;
    user-select: none;
}
.pmc-filter-pill__summary::-webkit-details-marker { display: none; }

/* Bordo gradiente (come grid-gradient-border / filters.css) */
.pmc-filter-pill__summary::before {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(125deg, #fff 0%, rgba(255, 255, 255, 0.6) 60%, #fff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Pill attiva (filtro applicato) */
.pmc-filter-pill[data-active] .pmc-filter-pill__summary {
    background: rgba(8, 7, 7, 0.06);
    font-weight: 600;
}

/* Caret (triangolo, come il mustache Figma verso il basso) */
.pmc-filter-pill__caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #080707;
    transition: transform .15s ease;
}
.pmc-filter-pill[open] .pmc-filter-pill__caret {
    transform: rotate(180deg);
}

/* --- Pannello dropdown --- */
.pmc-filter-pill__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(8, 7, 7, 0.1);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(8, 7, 7, 0.12);
}

.pmc-filter-pill__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #080707;
    cursor: pointer;
}
.pmc-filter-pill__option:hover {
    background: rgba(8, 7, 7, 0.05);
}
.pmc-filter-pill__option input {
    accent-color: #373B56;
    margin: 0;
    flex: none;
}

.pmc-filter-pill__apply {
    margin-top: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: #373B56;
    color: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}
.pmc-filter-pill__apply:hover {
    background: #2c2f45;
}

.pmc-store-filters__reset {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #766f67;
    text-decoration: underline;
    white-space: nowrap;
}

/* --- Mobile (Figma 522-17711): il design non mostra titolo+filtri sul mobile,
   la griglia prodotti parte subito dopo l'hero. Match letterale: nascosti. --- */
@media (max-width: 600px) {
    .pmc-store-filters { display: none; }
}