/* /where-to-buy: store locator (search field and scrolling list beside a Leaflet map; map on top on phones). */
/* Live runs this headline edge to edge (20px gutters), which keeps it on one line on tablets. */
.page-banner--where h1{margin-inline:calc(var(--pad)*-1);padding-inline:20px;font-size:min(var(--h1),calc((100vw - 40px)/var(--fit,1)))}
.locator{padding-bottom:var(--section)}
.locator h2{padding-bottom:80px}
.locator__body{display:flex;height:450px;overflow:hidden}
.locator__panel{flex:none;width:min(300px,calc(257px + (100vw - 1024px)*.0425))}
.locator__search input{display:block;width:98%;height:42px;margin-bottom:20px;padding:0 12px 0 15px;border:1px solid #363b47;border-radius:30px;background:transparent;color:var(--white);font:300 15px/19.5px var(--body)}
.locator__search input::placeholder{color:#757575;opacity:1}
.locator__search input:focus-visible{outline-offset:-1px;border-color:var(--green)}
.locator__list{height:388px;margin:0;padding:0 6px 0 18px;overflow-y:auto;list-style:none;overscroll-behavior:contain}
.locator__list::-webkit-scrollbar{width:6px}
.locator__list::-webkit-scrollbar-track{border-radius:20px;background:rgba(255,255,255,.26)}
.locator__list::-webkit-scrollbar-thumb{border-radius:8px;background:var(--green)}
@supports (-moz-appearance:none){.locator__list{scrollbar-width:thin;scrollbar-color:var(--green) rgba(255,255,255,.26)}}
.store{display:block;width:100%;padding:10px 0;border:0;border-bottom:1px solid rgba(255,255,255,.26);background:none;font:700 15px/1.3 var(--body);color:var(--text);text-align:left;cursor:pointer;transition:color .3s ease-in-out,border-color .3s ease-in-out}
.store span{display:block;font-weight:400;color:rgba(255,255,255,.52)}
.store:hover,.store[aria-current]{border-bottom-color:var(--white);color:var(--white)}
.store:focus-visible{outline-offset:-2px}
.locator__empty,.locator__note{padding:10px 0;font:400 15px/1.3 var(--body);color:rgba(255,255,255,.52)}
.locator__note{padding-left:18px}

/* Map. The stacking context keeps Leaflet's layers under the header, menu, cookie bar and age gate.
   Leaflet's stylesheet is added later by the script, so its own classes are overridden through .locator__map. */
.locator__map{position:relative;z-index:0;flex:1;min-width:0;height:100%;background:#e5e3df;color:var(--black);isolation:isolate}
.locator__map.leaflet-container{font:400 12px/1.4 var(--body)}
.locator__map .leaflet-control-attribution{font-size:10px}
.locator__map .leaflet-control-attribution a{color:#0078a8}
.locator__map .leaflet-bar a{color:#000}
.store-pin{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 43'%3E%3Cpath d='M13.5 1C6.6 1 1 6.5 1 13.3c0 3.3 1.3 5.8 3.1 8.5 3.4 5 7.2 8.6 8.2 19.5.1.9.5 1.2 1.2 1.2s1.1-.3 1.2-1.2c1-10.9 4.8-14.5 8.2-19.5 1.8-2.7 3.1-5.2 3.1-8.5C26 6.5 20.4 1 13.5 1z' fill='%23ea4335' stroke='%23b31412'/%3E%3Ccircle cx='13.5' cy='13.3' r='4.6' fill='%23b31412'/%3E%3C/svg%3E") center/contain no-repeat;cursor:pointer}
.locator__map .store-cluster{display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle closest-side,rgba(0,0,255,.78) 0 58.3%,rgba(0,0,255,.44) 58.3% 75%,rgba(0,0,255,.2) 75% 91.7%,transparent 91.7%);color:#fff;font:400 11px/1 Arial,sans-serif;cursor:pointer}
.locator__map .store-cluster--many{background:radial-gradient(circle closest-side,rgba(255,0,0,.78) 0 58.3%,rgba(255,0,0,.44) 58.3% 75%,rgba(255,0,0,.2) 75% 91.7%,transparent 91.7%)}
.store-pin:focus-visible,.store-cluster:focus-visible{outline:2px solid #000;outline-offset:2px}
.locator__map .leaflet-popup-content-wrapper{border-radius:8px;box-shadow:0 2px 7px 1px rgba(0,0,0,.3);color:#000}
.locator__map .leaflet-popup-content{margin:14px 40px 14px 16px;line-height:1.3}
.store-pop__name{display:block;font:700 16px/1.3 var(--body)}
.store-pop__addr{display:block;margin-top:8px;padding-left:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M6 0C2.7 0 0 2.7 0 6c0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6z' fill='%23ea4335'/%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%23b31412'/%3E%3C/svg%3E") left center/12px 18px no-repeat;font:700 12px/18px var(--body)}
.locator__map .leaflet-popup-close-button{top:6px;right:6px;width:28px;height:28px;font:400 24px/28px Arial,sans-serif;color:#555}
.locator__locate{display:grid;place-items:center;width:34px;height:34px;padding:0;border:2px solid rgba(0,0,0,.2);border-radius:4px;background:#fff center/20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 100 8 4 4 0 000-8zm8.9 3A9 9 0 0013 3.1V1h-2v2.1A9 9 0 003.1 11H1v2h2.1A9 9 0 0011 20.9V23h2v-2.1A9 9 0 0020.9 13H23v-2h-2.1zM12 19a7 7 0 110-14 7 7 0 010 14z' fill='%23444'/%3E%3C/svg%3E");background-clip:padding-box;cursor:pointer}
.locator__locate:hover{background-color:#f4f4f4}

@media (max-width:1199px){
  .locator h2{padding-bottom:56px}
  .locator__panel{width:calc(235px + (100vw - 768px)*.0859)}
}
@media (max-width:767px){
  .locator h2{padding-bottom:20px;text-align:center}
  .locator__body{flex-direction:column-reverse;height:700px}
  .locator__panel{width:100%;height:370px;padding:16px 7% 0}
  .locator__list{height:291px}
  .store,.locator__empty,.locator__note{line-height:1.6}
  .locator__note{padding-left:0}
}
@media (prefers-reduced-motion:reduce){.store{transition:none}}

/* Retail / bars and restaurants filter (an addition to the live page, styled like its bottle-size tabs). */
.locator__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px}
.locator__types{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:var(--types-pad,80px)}
.locator__types button{height:40px;padding:0 22px;border:0;border-radius:28px;background:rgba(255,255,255,.1);color:#fff;font:600 16px/1 var(--body);text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .3s,color .3s}
.locator__types button:hover{background:rgba(255,255,255,.2)}
.locator__types button.is-selected{background:var(--green);color:#000}
@media (max-width:1199px){.locator__types{padding-bottom:56px}}
@media (max-width:767px){
  .locator__head{flex-direction:column;align-items:center;gap:0}
  .locator__types{justify-content:center;padding:0 4% 32px}
  .locator__types button{height:36px;padding:0 16px;font-size:13px}
}