/*----------------------------------------*/
/*  WHERE TO BUY (page-where-to-by.php)    */
/*  No Figma frame. Distributor locator:   */
/*  a white filter card with the result    */
/*  list on the left, the map card on the  */
/*  right. Below 1200px they stack and     */
/*  `.switch-view` flips list/map.         */
/*                                         */
/*  js/map.js renders `.location-column`   */
/*  cards, the InfoBox and the Places      */
/*  autocomplete (`.pac-container`);       */
/*  global.js toggles `.map-block.hide` /  */
/*  `.locations-entries-wrapper.hide`.     */
/*  Replaces the old WHERE TO BUY block in */
/*  style.css.                             */
/*----------------------------------------*/

body.page-template-page-where-to-by {
    --wtb-side: 440px;
    --wtb-map-h: 820px;
    --wtb-field-h: 54px;
    --wtb-line: rgba(32, 32, 32, .1);
}

body.page-template-page-where-to-by .block-entry.padding-top.padding-bottom {
    padding: 20px 0 var(--in-section);
    text-align: left;
}

body.page-template-page-where-to-by .block-entry > .container {
    max-width: none;
    width: 100%;
    padding: 0 var(--rd-gutter);
}

body.page-template-page-where-to-by .toolpanel-content-align {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin: 0;
    background: none;
}

body.page-template-page-where-to-by .toolpanel-content-align > * {
    margin: 0;
    padding: 0;
}


/*--------------------*/
/* - FILTER CARD      */
/*--------------------*/
body.page-template-page-where-to-by .filter-location-block {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--wtb-side);
    width: auto;
    max-width: var(--wtb-side);
    padding: 30px;
    background-color: var(--rd-white);
    border-radius: var(--rd-radius);
}

body.page-template-page-where-to-by .filter-location-block .filter-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    background: none;
    line-height: normal;
}

body.page-template-page-where-to-by .filter-block > * {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-template-page-where-to-by .filter-block > .col-xl-12,
body.page-template-page-where-to-by .filter-block > .button,
body.page-template-page-where-to-by .filter-block > .switch-view {
    grid-column: 1 / -1;
}

/* fields */
body.page-template-page-where-to-by .filter-block .SumoSelect {
    width: 100%;
}

body.page-template-page-where-to-by .filter-block .SumoSelect > .CaptionCont,
body.page-template-page-where-to-by .filter-block .input {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--wtb-field-h);
    padding: 0 44px 0 16px;
    background-color: var(--rd-white);
    border: 1px solid var(--wtb-line);
    border-radius: var(--rd-radius);
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    color: var(--rd-txt-on-light);
    transition: border-color var(--rd-transition);
}

body.page-template-page-where-to-by .filter-block .input {
    padding-right: 16px;
}

body.page-template-page-where-to-by .filter-block .input::placeholder {
    color: rgba(32, 32, 32, .6);
    opacity: 1;
}

body.page-template-page-where-to-by .filter-block .input:focus,
body.page-template-page-where-to-by .filter-block .SumoSelect.open > .CaptionCont {
    border-color: var(--rd-accent);
    border-radius: var(--rd-radius);
    outline: 0;
}

/* the placeholder already names the field */
body.page-template-page-where-to-by .filter-block .sl {
    display: none;
}

body.page-template-page-where-to-by .filter-block .SumoSelect > .CaptionCont > span {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    color: inherit;
}

body.page-template-page-where-to-by .filter-block .SumoSelect > .CaptionCont > label {
    width: 44px;
}

body.page-template-page-where-to-by .filter-block .SumoSelect > .CaptionCont > label > i {
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
}

/* line chevron, as on the product page selects */
body.page-template-page-where-to-by .filter-block .SumoSelect > .CaptionCont > label > i::before {
    width: 8px;
    height: 8px;
    border: solid var(--rd-txt-on-light);
    border-width: 0 1.5px 1.5px 0;
    transform: translate(-50%, -75%) rotate(45deg);
}

body.page-template-page-where-to-by .filter-block .SumoSelect.open > .CaptionCont > label > i {
    transform: translateY(-50%) rotate(-180deg);
}

body.page-template-page-where-to-by .filter-block .SumoSelect > .optWrapper {
    margin-top: 4px;
    background-color: var(--rd-white);
    border: 1px solid var(--wtb-line);
    border-radius: var(--rd-radius);
    box-shadow: 0 12px 32px rgba(32, 32, 32, .08);
    overflow: hidden auto;
}

body.page-template-page-where-to-by .filter-block .SumoSelect > .optWrapper > .options li.opt {
    padding: 0;
    background-color: var(--rd-white);
}

body.page-template-page-where-to-by .filter-block .SumoSelect > .optWrapper > .options li label {
    display: block;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3;
    color: var(--rd-txt-on-light);
}

body.page-template-page-where-to-by .filter-block .SumoSelect > .optWrapper > .options li.opt.selected {
    background-color: var(--rd-surface);
}

body.page-template-page-where-to-by .filter-block .SumoSelect > .optWrapper > .options li.opt.selected label {
    font-weight: 400;
    color: var(--rd-accent);
}

/* reset */
body.page-template-page-where-to-by .filter-block > .button {
    position: static;
    width: auto;
    text-align: left;
}

body.page-template-page-where-to-by .filter-block .btn-reset {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 20px;
    background: transparent;
    border: 1px solid var(--rd-border-on-light);
    border-radius: var(--rd-radius);
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    cursor: pointer;
    transition: border-color var(--rd-transition);
}

/* list / map switch (below 1200px) */
body.page-template-page-where-to-by .switch-view {
    display: none;
}


/*--------------------*/
/* - RESULT LIST      */
/*--------------------*/
body.page-template-page-where-to-by .filter-location-block .location-block {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 30px 0 0;
    padding: 30px 0 0;
    border-top: 1px solid var(--rd-line-on-light);
    text-align: left;
}

/* the list fills the card down to the bottom of the map beside it */
body.page-template-page-where-to-by .location-block .block-entry,
body.page-template-page-where-to-by .location-block .container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
}

body.page-template-page-where-to-by .location-block .block-title {
    margin: 0 0 20px;
}

body.page-template-page-where-to-by .location-block .block-title .h3 {
    font-family: var(--rd-ff-head);
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    text-transform: uppercase;
}

/* inline marks inside the heading (b, strong, span) keep its face —
   the section's universal `*` rule would reset them to the text font */
body.page-template-page-where-to-by .location-block .block-title .h3 * {
    font-family: inherit;
}

body.page-template-page-where-to-by .locations-entries-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    /* Bootstrap's .row wraps, which in a column pushes the overflow into
       hidden side columns instead of letting the list scroll */
    flex-wrap: nowrap;
    gap: 12px;
    min-height: 240px;
    max-height: none;
    margin: 0;
    padding: 0 8px 0 0;
    overflow-y: auto;
}

body.page-template-page-where-to-by .locations-entries-wrapper > * {
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--rd-accent) var(--rd-line-on-light);
}

body.page-template-page-where-to-by .locations-entries-wrapper::-webkit-scrollbar {
    width: 4px !important;
}

body.page-template-page-where-to-by .locations-entries-wrapper::-webkit-scrollbar-track {
    background: var(--rd-line-on-light) !important;
}

body.page-template-page-where-to-by .locations-entries-wrapper::-webkit-scrollbar-thumb {
    background: var(--rd-accent) !important;
}

body.page-template-page-where-to-by .location-column {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.page-template-page-where-to-by .location-shortcode {
    position: relative;
    padding: 20px;
    background-color: var(--rd-surface);
    border: 1px solid transparent;
    border-radius: var(--rd-radius);
    cursor: pointer;
    transition: border-color var(--rd-transition), background-color var(--rd-transition);
}

body.page-template-page-where-to-by .location-shortcode::before,
body.page-template-page-where-to-by .location-shortcode::after {
    content: none;
}

body.page-template-page-where-to-by .location-shortcode p {
    margin: 0;
}

body.page-template-page-where-to-by .location-shortcode .location-shortcode-title-overflow {
    display: block;
    height: auto;
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
}

body.page-template-page-where-to-by .location-shortcode .location-shortcode-title-overflow b {
    font-weight: inherit;
}

body.page-template-page-where-to-by .location-shortcode .location-shortcode-description-overflow {
    display: block;
    height: auto !important;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--rd-txt-on-light-muted);
}

body.page-template-page-where-to-by .location-shortcode a {
    color: var(--rd-txt-on-light);
    text-decoration: none;
}

/* "No results…" */
body.page-template-page-where-to-by .locations-entries-wrapper > .text {
    padding: 20px;
    background-color: var(--rd-surface);
    border-radius: var(--rd-radius);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--rd-txt-on-light-muted);
}

@media (min-width: 1200px) {
    body.page-template-page-where-to-by .filter-block .btn-reset:hover {
        border-color: var(--rd-txt-on-light);
    }

    body.page-template-page-where-to-by .location-shortcode:hover {
        background-color: var(--rd-white) !important;
        border-color: var(--rd-accent);
    }

    body.page-template-page-where-to-by .location-shortcode a:hover {
        text-decoration: underline;
    }
}


/*--------------------*/
/* - MAP              */
/*--------------------*/
body.page-template-page-where-to-by .map-block {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: var(--wtb-map-h);
    padding: 0;
    background-color: var(--rd-white);
    border-radius: var(--rd-radius);
    overflow: hidden;
}

body.page-template-page-where-to-by .map-block::before {
    content: none;
}

body.page-template-page-where-to-by .map-block #map {
    width: 100%;
    height: 100%;
    min-height: var(--wtb-map-h);
}

/* InfoBox: white card with a small pointer towards the marker */
body.page-template-page-where-to-by .infoBox {
    max-width: 272px;
}

body.page-template-page-where-to-by .infoBox > img {
    top: 10px;
    right: 10px;
    z-index: 2;
    background: none;
}

body.page-template-page-where-to-by .infowindow-content {
    position: relative;
    padding: 20px;
    background-color: var(--rd-white);
    border: 0;
    border-radius: var(--rd-radius);
    box-shadow: 0 12px 32px rgba(32, 32, 32, .16);
    font-family: var(--rd-ff);
    text-align: left;
}

body.page-template-page-where-to-by .infowindow-content::before {
    content: '';
    position: absolute;
    top: auto;
    bottom: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: 0 0 0 -7px;
    background: var(--rd-white);
    transform: rotate(45deg);
}

body.page-template-page-where-to-by .infowindow-content .title {
    margin: 0 20px 6px 0;
    font-family: var(--rd-ff);
    font-size: 20px;
    line-height: 1.1;
    font-weight: 400;
    color: var(--rd-txt-on-light);
}

body.page-template-page-where-to-by .infowindow-content .subtitle {
    margin: 0;
    font-family: var(--rd-ff);
    font-size: 16px;
    line-height: 1.4;
    color: var(--rd-txt-on-light-muted);
}

body.page-template-page-where-to-by .infowindow-content .subtitle a {
    color: var(--rd-txt-on-light);
    text-decoration: none;
}

body.page-template-page-where-to-by .infowindow-content .link {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--rd-ff);
    font-size: 16px;
    font-weight: 400;
    color: var(--rd-txt-on-light);
    text-decoration: underline;
    text-decoration-color: var(--rd-accent);
    text-underline-offset: 3px;
}

/* Places autocomplete under the City/Postal Code field (appended to body) */
body.page-template-page-where-to-by .pac-container {
    margin-top: 4px;
    padding: 6px 0;
    background-color: var(--rd-white);
    border: 1px solid var(--wtb-line);
    border-radius: var(--rd-radius);
    box-shadow: 0 12px 32px rgba(32, 32, 32, .08);
    font-family: var(--rd-ff);
}

body.page-template-page-where-to-by .pac-container::after {
    margin: 4px 12px 0;
}

body.page-template-page-where-to-by .pac-item {
    padding: 8px 16px;
    border-top: 0;
    font-family: var(--rd-ff);
    font-size: 16px;
    line-height: 1.3;
    color: var(--rd-txt-on-light-muted);
    cursor: pointer;
}

body.page-template-page-where-to-by .pac-item-query {
    font-size: 16px;
    color: var(--rd-txt-on-light);
}

body.page-template-page-where-to-by .pac-icon-marker {
    display: none;
}

@media (min-width: 1200px) {
    body.page-template-page-where-to-by .pac-item:hover {
        background-color: var(--rd-surface);
        color: var(--rd-txt-on-light-muted);
    }
}


/*--------------------*/
/* - LARGE (<1600px)  */
/*--------------------*/
@media (max-width: 1599px) {
    body.page-template-page-where-to-by {
        --wtb-side: 380px;
        --wtb-map-h: 720px;
    }

    body.page-template-page-where-to-by .filter-location-block {
        padding: 24px;
    }

}


/*--------------------*/
/* - TABLET (<1200px) */
/*--------------------*/
/* Stacked: filters, then either the list or the map. The map keeps its size
   while hidden (Google Maps needs it to draw), so it is lifted out of flow
   instead of display:none. */
@media (max-width: 1199px) {
    body.page-template-page-where-to-by {
        --wtb-map-h: 560px;
    }

    body.page-template-page-where-to-by .toolpanel-content-align {
        flex-direction: column;
        gap: 16px;
    }

    body.page-template-page-where-to-by .filter-location-block {
        flex: 0 0 auto;
        max-width: none;
        padding: 0;
        background: none;
    }

    body.page-template-page-where-to-by .filter-location-block .filter-block {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 160px auto;
        align-items: center;
        padding: 20px;
        background-color: var(--rd-white);
        border-radius: var(--rd-radius);
    }

    body.page-template-page-where-to-by .filter-block > .col-xl-12,
    body.page-template-page-where-to-by .filter-block > .button {
        grid-column: auto;
    }

    body.page-template-page-where-to-by .filter-block .btn-reset {
        height: var(--wtb-field-h);
    }

    body.page-template-page-where-to-by .switch-view {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 8px 0 0 !important;
    }

    body.page-template-page-where-to-by .switch-view .switch-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: auto;
        height: 48px;
        margin: 0;
        padding: 0 16px;
        background-color: var(--rd-surface);
        border: 0;
        border-radius: var(--rd-radius);
        font-size: 16px;
        line-height: 1;
        font-weight: 400;
        text-transform: none;
        color: var(--rd-txt-on-light);
        cursor: pointer;
        transition: background-color var(--rd-transition), color var(--rd-transition);
    }

    body.page-template-page-where-to-by .switch-view .switch-btn.active {
        background-color: var(--rd-dark);
        color: var(--rd-white);
    }

    body.page-template-page-where-to-by .switch-view .switch-btn .img-block {
        position: relative;
        width: 19px;
        height: 20px;
        margin: 0;
    }

    /* the first icon is white, the second dark blue: dark on the grey plate,
       white on the dark active one */
    body.page-template-page-where-to-by .switch-view .switch-btn .img-block > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 19px;
        height: 20px;
        opacity: 1;
        visibility: visible;
    }

    body.page-template-page-where-to-by .switch-view .switch-btn .img-block img:first-child {
        filter: brightness(0) opacity(.87);
    }

    body.page-template-page-where-to-by .switch-view .switch-btn.active .img-block img:first-child {
        filter: none;
    }

    body.page-template-page-where-to-by .switch-view .switch-btn .img-block img:last-child {
        display: none;
    }

    body.page-template-page-where-to-by .filter-location-block .location-block {
        margin: 24px 0 0;
        padding: 0;
        border-top: 0;
    }

    body.page-template-page-where-to-by .locations-entries-wrapper {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        min-height: 0;
        max-height: none;
        padding: 0;
        overflow: visible;
    }

    body.page-template-page-where-to-by .locations-entries-wrapper.hide {
        display: none;
    }

    body.page-template-page-where-to-by .location-shortcode {
        height: 100%;
        background-color: var(--rd-white);
    }

    body.page-template-page-where-to-by .map-block {
        flex: 0 0 auto;
        width: 100%;
        min-height: var(--wtb-map-h);
    }

    body.page-template-page-where-to-by .map-block.hide {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
    }

    /* on touch widths map.js opens the InfoBox under the marker */
    body.page-template-page-where-to-by .infowindow-content::before {
        top: -7px;
        bottom: auto;
    }
}


/*--------------------*/
/* - PHONE (<768px)   */
/*--------------------*/
@media (max-width: 767px) {
    body.page-template-page-where-to-by .block-entry.padding-top.padding-bottom {
        padding-top: 15px;
        padding-bottom: 60px;
    }

    body.page-template-page-where-to-by .filter-location-block .filter-block {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 16px;
    }

    body.page-template-page-where-to-by .filter-block > .col-xl-12,
    body.page-template-page-where-to-by .filter-block > .col-xl-7,
    body.page-template-page-where-to-by .filter-block > .switch-view {
        grid-column: 1 / -1;
    }

    body.page-template-page-where-to-by .location-block .block-title .h3 {
        font-size: 24px;
    }

    body.page-template-page-where-to-by .locations-entries-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-template-page-where-to-by .location-shortcode .location-shortcode-title-overflow {
        font-size: 20px;
    }
}