/*
 * Hearing aids plugin -- price list, product page, brand tiles, homepage deal.
 * Linked on every public page by publicTemplate.php (PluginManager::styleUrls()).
 * Colours come from the theme's custom properties (Admin > Settings > Theme),
 * so the catalogue follows whatever palette the site is set to.
 */

.ha-btn {
    background: var(--clr-primary, #86bd24);
    border: 2px solid var(--clr-primary, #86bd24);
    color: var(--clr-on-primary, #fff);
    font-weight: 600;
    border-radius: .5rem;
    padding: .55rem 1.1rem;
    transition: filter .15s ease, transform .15s ease;
}
.ha-btn:hover,
.ha-btn:focus-visible { filter: brightness(.92); color: var(--clr-on-primary, #fff); }
.ha-btn--outline { background: transparent; color: var(--clr-primary, #86bd24); }
.ha-btn--outline:hover { background: var(--clr-primary, #86bd24); color: var(--clr-on-primary, #fff); }

.ha-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .2rem .65rem;
    margin-bottom: .5rem;
}
.ha-badge--deal { background: var(--clr-accent, #f4b400); color: #1b1b1b; }

.ha-stars { color: var(--clr-accent, #f4b400); letter-spacing: .1em; }

/* ---- Filters --------------------------------------------------------- */

.ha-filters {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .9rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 10px 30px rgba(15, 30, 60, .06);
}
.ha-filters .form-label { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: .3rem; color: #5b6573; }

/* The search row: the main way in, so it leads. */
.ha-filters__search { position: relative; display: flex; gap: .6rem; align-items: center; }
.ha-filters__search > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #8a94a3; pointer-events: none; }
.ha-filters__search .form-control { padding: .8rem 1rem .8rem 2.6rem; font-size: 1.05rem; border-radius: .6rem; }
.ha-filters__search .ha-btn { padding: .78rem 1.4rem; white-space: nowrap; }

/* Flex, not equal grid columns: the selects share the row, and the switch
   keeps its own width -- in an equal column beside five selects (the price
   list, which adds Brand) "Rechargeable only" wrapped and rode up. */
.ha-filters__panel {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.ha-filters__field { flex: 1 1 150px; min-width: 0; }
.ha-filters__field--check { flex: 0 0 auto; padding-bottom: .45rem; white-space: nowrap; }
.ha-filters .form-check-input:checked { background-color: var(--clr-primary, #6a9f2a); border-color: var(--clr-primary, #6a9f2a); }
.ha-filters .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(106, 159, 42, .25); border-color: var(--clr-primary, #6a9f2a); }
.ha-filters__toggle {
    display: none;
    width: 100%;
    margin-top: .75rem;
    padding: .6rem 1rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: .6rem;
    background: #f7f9fc;
    font-weight: 700;
    color: var(--clr-secondary, #3b6fc4);
}
.ha-filters__badge {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0 .4rem;
    margin-left: .35rem;
    border-radius: 999px;
    background: var(--clr-primary, #6a9f2a);
    color: #fff;
    font-size: .8rem;
}

/* Search as you type */
.ha-suggest {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    right: 0;
    z-index: 30;
    list-style: none;
    margin: 0;
    padding: .4rem;
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 18px 40px rgba(15, 30, 60, .18);
    border: 1px solid rgba(0, 0, 0, .06);
    max-height: 70vh;
    overflow-y: auto;
}
.ha-suggest__item,
.ha-suggest__all {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .6rem;
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
}
.ha-suggest__item img { width: 44px; height: 44px; object-fit: contain; border-radius: .35rem; background: #fff; border: 1px solid #eef1f5; }
.ha-suggest__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ha-suggest__text strong { color: var(--clr-secondary, #3b6fc4); }
.ha-suggest__text small { color: #6b7380; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-suggest__price { font-weight: 700; color: #4d7a1c; white-space: nowrap; }
.ha-suggest__all { justify-content: center; font-weight: 700; color: var(--clr-secondary, #3b6fc4); border-top: 1px solid #eef1f5; margin-top: .25rem; }
.ha-suggest [role="option"].is-active > a,
.ha-suggest a:hover { background: #f1f5fb; }
.ha-suggest__none { padding: .75rem; color: #6b7380; text-align: center; }

/* Results toolbar: count + active filters */
.ha-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.5rem 0 1rem; }
.ha-count { margin: 0; font-size: 1.1rem; color: #4d7a1c; }
.ha-count strong { font-size: 1.3rem; }
.ha-active { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ha-active__chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(66, 103, 178, .1);
    color: var(--clr-secondary, #3b6fc4);
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
}
.ha-active__chip:hover { background: rgba(66, 103, 178, .18); }
.ha-active__chip i { font-size: .75rem; }
.ha-active__clear { font-size: .88rem; font-weight: 600; padding: .3rem .4rem; }

.ha-results { transition: opacity .2s ease; }
.ha-results.is-loading { opacity: .45; pointer-events: none; }

.ha-empty { text-align: center; padding: 3rem 1rem; background: #f7f9fc; border-radius: .9rem; }
.ha-empty i { font-size: 2.2rem; color: var(--clr-secondary, #3b6fc4); margin-bottom: .75rem; }

@media (max-width: 767.98px) {
    .ha-filters__toggle { display: block; }
    .ha-filters__panel { display: none; }
    .ha-filters__panel.is-open { display: grid; grid-template-columns: 1fr 1fr; }
    .ha-filters__search .ha-btn { display: none; }
}

/* ---- Brand landing header ---------------------------------------------------- */

.ha-brand-head { background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.ha-brand-head__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.ha-brand-head__logo img { width: 200px; height: auto; }
.ha-brand-head__facts { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 0; flex: 1; }
.ha-brand-head__facts dt { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7380; }
.ha-brand-head__facts dd { margin: .15rem 0 0; font-size: 1.4rem; font-weight: 700; color: var(--clr-secondary, #3b6fc4); }
.ha-brand-head__facts dd small { font-size: .95rem; color: #6b7380; font-weight: 600; }
.ha-brand-head__facts .ha-chips { margin: .35rem 0 0; }
.ha-brand-head__more { font-weight: 700; white-space: nowrap; }

/* ---- Product page: sticky enquiry, phone action bar ------------------------- */

@media (min-width: 992px) {
    .ha-sticky { position: sticky; top: 5.5rem; }
}
.ha-mobilebar { display: none; }
@media (max-width: 767.98px) {
    .ha-mobilebar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        gap: .5rem;
        padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .12);
    }
    .ha-mobilebar a {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: .75rem .5rem;
        border-radius: .6rem;
        font-weight: 700;
        text-decoration: none;
    }
    .ha-mobilebar__call { background: #fff; color: var(--clr-secondary, #3b6fc4); border: 2px solid var(--clr-secondary, #3b6fc4); }
    .ha-mobilebar__enquire { flex: 1.6 !important; background: var(--clr-primary, #6a9f2a); color: #fff; }
    body:has(.ha-mobilebar) { padding-bottom: 4.5rem; }
}

/* ---- Price-list rows ------------------------------------------------- */

.ha-list { display: grid; gap: 1rem; }

.ha-card {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 1.25rem;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.ha-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .07); border-color: rgba(0, 0, 0, .14); }

.ha-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
}
.ha-card__media img { width: 100%; height: 100%; object-fit: contain; }
.ha-card__media .ha-card__logo-only { height: auto; }

.ha-card__title { font-size: 1.2rem; margin: 0 0 .5rem; }
.ha-card__title a { color: var(--clr-secondary, #3b6fc4); text-decoration: none; }
.ha-card__title a:hover { text-decoration: underline; }

.ha-specs { margin: 0; display: grid; gap: .2rem; font-size: .92rem; }
.ha-specs > div { display: flex; gap: .4rem; flex-wrap: wrap; }
.ha-specs dt { font-weight: 600; color: #444; }
.ha-specs dt::after { content: ':'; }
.ha-specs dd { margin: 0; color: var(--clr-primary, #86bd24); font-weight: 600; }
.ha-specs dd.ha-stars { color: var(--clr-accent, #f4b400); }

.ha-card__prices { text-align: right; min-width: 170px; }
.ha-price { margin: 0 0 .25rem; font-size: .95rem; color: #555; }
.ha-price strong { color: var(--clr-secondary, #3b6fc4); font-size: 1.15rem; }
.ha-price--lg strong { font-size: 1.5rem; }
.ha-price--ask { font-weight: 600; color: var(--clr-secondary, #3b6fc4); }
.ha-card__prices .ha-btn { margin-top: .5rem; }

@media (max-width: 767.98px) {
    .ha-card { grid-template-columns: 96px 1fr; }
    .ha-card__prices { grid-column: 1 / -1; text-align: left; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: baseline; }
    .ha-card__prices .ha-btn { margin-left: auto; }
}

/* ---- Brand page write-up & brand tiles -------------------------------- */

.ha-brand-intro { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(0, 0, 0, .08); }
.ha-brand-intro img { max-width: 100%; height: auto; }

.ha-brands__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}
.ha-brand-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .75rem;
    padding: 1.25rem;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease;
}
.ha-brand-tile:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.ha-brand-tile img { max-width: 100%; height: auto; }
.ha-brand-tile__name { font-size: 1.4rem; font-weight: 700; color: var(--clr-secondary, #3b6fc4); }
.ha-brand-tile__count { font-size: .85rem; color: #666; }

/* ---- Product page ------------------------------------------------------ */

.ha-pricematch {
    text-align: center;
    font-style: italic;
    color: #444;
    margin-bottom: 2rem;
}

.ha-gallery { text-align: center; }
.ha-gallery__brand img { max-width: 180px; height: auto; margin-bottom: 1rem; }
.ha-gallery__main { width: 100%; height: auto; border-radius: .75rem; background: #fff; }
.ha-gallery__thumbs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .75rem; }
.ha-gallery__thumb { border: 2px solid transparent; border-radius: .4rem; padding: 0; background: #fff; }
.ha-gallery__thumb img { width: 64px; height: 64px; object-fit: contain; display: block; }
.ha-gallery__thumb.is-active { border-color: var(--clr-primary, #86bd24); }

.ha-facts__prices { margin-bottom: 1rem; }
.ha-specs--detail { font-size: 1rem; gap: 0; }
.ha-specs--detail > div { justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.ha-specs--detail > div:last-child { border-bottom: 0; }
.ha-specs--detail dt::after { content: none; }
.ha-specs--detail dd { text-align: right; max-width: 60%; }

.ha-enquiry {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-top: 4px solid var(--clr-primary, #86bd24);
    border-radius: .75rem;
    padding: 1.25rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
}
.ha-enquiry__title { font-size: 1.15rem; text-align: center; margin-bottom: 1rem; color: var(--clr-secondary, #3b6fc4); }
.ha-enquiry__title span { display: block; font-weight: 700; }
.ha-enquiry .form-label { font-size: .85rem; font-weight: 600; margin-bottom: .2rem; }
.ha-enquiry__note { font-size: .8rem; color: #666; text-align: center; margin: .6rem 0 0; }

/* A fixed light tint, not a palette variable: the band must read on any theme. */
.ha-includes { background: #f4f7f1; color: #222; padding: 2.5rem 0; }
.ha-includes__title { text-align: center; font-size: 1.6rem; margin-bottom: 1.25rem; color: #222; }
.ha-includes__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    max-width: 1100px;
}
.ha-includes__list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
    font-weight: 600;
    background: #fff;
    border-radius: .75rem;
    padding: 1.25rem 1rem;
    box-shadow: 0 8px 22px rgba(15, 30, 60, .06);
}
.ha-includes__list i {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-primary, #6a9f2a);
    color: #fff;
    font-size: 1.15rem;
}

.ha-description .cms-content img { max-width: 100%; height: auto; }
.cms-content .ha-img-left  { float: left;  max-width: 40%; margin: .25rem 1.5rem 1rem 0; }
.cms-content .ha-img-right { float: right; max-width: 40%; margin: .25rem 0 1rem 1.5rem; }
.ha-description .cms-content::after,
.ha-brand-intro::after { content: ''; display: block; clear: both; }
@media (max-width: 575.98px) {
    .cms-content .ha-img-left,
    .cms-content .ha-img-right { float: none; max-width: 100%; margin: 1rem 0; }
}
.ha-related__title { text-align: center; margin-bottom: 1.5rem; }

/* ---- Shared pieces ------------------------------------------------------ */

.ha-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--clr-secondary, #3b6fc4);
    background: rgba(66, 103, 178, .1);
    border-radius: 999px;
    padding: .3rem .85rem;
    margin-bottom: .6rem;
}

/* Style chips: RIC, BTE, ITE ... */
.ha-chips { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ha-chip {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .2rem .55rem;
    border-radius: .35rem;
    background: rgba(66, 103, 178, .08);
    color: var(--clr-secondary, #3b6fc4);
    border: 1px solid rgba(66, 103, 178, .18);
}

/* Price tiles: one hearing aid / a pair */
.ha-price-tiles { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 1rem; }
.ha-price-tile {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    padding: .65rem .9rem;
    border-radius: .6rem;
    background: #f4f7fb;
    border: 1px solid rgba(66, 103, 178, .12);
}
.ha-price-tile span { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #5b6573; }
.ha-price-tile strong { font-size: 1.6rem; line-height: 1.15; color: var(--clr-secondary, #3b6fc4); }
.ha-price-tile--pair { background: #f3f8ec; border-color: rgba(106, 159, 42, .2); }
.ha-price-tile--pair strong { color: #4d7a1c; }
.ha-price-tiles--compact { flex-direction: column; gap: .4rem; margin: 0 0 .6rem; }
.ha-price-tiles--compact .ha-price-tile { flex: 0 0 auto; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem .75rem; }
.ha-price-tiles--compact .ha-price-tile strong { font-size: 1.2rem; }

/* ---- Homepage deal ---------------------------------------------------- */

.ha-deal { padding: 4rem 0; background: linear-gradient(180deg, #fff 0%, #f4f7f1 100%); }
.ha-deal__head { text-align: center; margin-bottom: 1.75rem; }
.ha-deal__title { color: #4d7a1c; font-size: clamp(1.9rem, 3.5vw, 2.6rem); font-weight: 700; margin: 0; }
.ha-deal__card {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 2rem;
    align-items: center;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 20px 50px rgba(15, 30, 60, .08);
}
.ha-deal__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: .8rem;
    /* White, not a tint: product shots and logos are fitted on white. */
    background: #fff;
    border: 1px solid #edf0f5;
    text-decoration: none;
    min-height: 100%;
}
.ha-deal__logo { max-width: 170px; height: auto; }
.ha-deal__image { max-width: 280px; width: 100%; height: auto; transition: transform .4s ease; }
.ha-deal__media:hover .ha-deal__image { transform: scale(1.04); }
.ha-deal__name { font-size: 1.6rem; margin-bottom: .6rem; }
.ha-deal__name a { color: var(--clr-secondary, #3b6fc4); text-decoration: none; }
.ha-deal__note { color: #4d7a1c; font-weight: 600; display: flex; gap: .5rem; align-items: baseline; }
.ha-deal__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.ha-deal__form .ha-enquiry { box-shadow: none; border: 1px solid rgba(0, 0, 0, .08); border-top: 4px solid var(--clr-primary-lt, #8abd3e); }

@media (max-width: 991.98px) {
    .ha-deal__card { grid-template-columns: 1fr 1fr; }
    .ha-deal__form { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .ha-deal__card { grid-template-columns: 1fr; padding: 1.25rem; gap: 1.25rem; }
    .ha-deal__media { min-height: 0; padding: 1rem; gap: .5rem; }
    .ha-deal__logo { max-width: 130px; }
    .ha-deal__image { max-width: 200px; }
}