/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./deps/sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./deps/sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./deps/sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/app_schaffrath/cartridges/app_page_designer/cartridge/client/default/scss/experience/components/commerceAssets/storeLocator.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
h1,
.h1 {
  font-size: 2rem;
  line-height: 2.625rem;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 20px;
}

h2,
.h2 {
  font-size: 1.75rem;
  line-height: 2.125rem;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 20px;
}

h3,
.h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 20px;
}

h4,
.h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 20px;
}

h5,
.h5 {
  font-size: 1.125rem;
  line-height: 1.375rem;
  font-weight: false;
  margin-top: 10px;
  margin-bottom: 20px;
}

h6,
.h6 {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: false;
  margin-top: 10px;
  margin-bottom: 20px;
  font-family: "Roboto Condensed", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/*md
@no-stat

# Breakpoints

## Launch 360 breakpoints

Launch 360 has 4 main breakpoints that targeted to [supported devices](https://confluence.ontrq.com/display/RSB/SFRA+BP+-+Supported+Browsers+and+Devices)
 - iPhone X, iPad, MS Windows desktop / Macbook Pro retina

** Please not iPad landscape - is LG breakpoint **

[See more info](https://confluence.ontrq.com/display/RSB/SFRA+-+Site+Layout+Conception)

## Supported screen resolutions

Launch 360 is come "Retina ready". It supports MDPI and XHDPI pixel density across all site.

| Device             | Screen Resolution, CSS pixels | Pixel density |
|--------------------|-------------------------------|---------------|
| Desktop Windows PC | 1920x1080                     | MDPI          |
| Macbook pro 13     | 1280x800 / 1440x900           | XHDPI         |
| iPad Air 2         | 1024x768                      | XHDPI         |
| iPhone X           | 375x812                       | XHDPI         |
| Samsung Galaxy S9  | 360x740                       | XHDPI         |

## Supported screen scaling

Launch 360 comes with support of 1:1, 1:1.25, 1.5, 1:2 screen scaling. To do so you need
to take care not only by whole pixel but pixel fractions that is used.

*/
/*md
@no-stat

# Media queries (breakpoints)

We have a `media` mixin for make it easier to implement responsive styling via media queries.

You can nest them right within other blocks of CSS,which puts the properties and values you are changing right next
to each other.
That creates an obvious connection between them, which is a much nicer authoring experience than trying to maintain
those changes separated by tons of other code or in a different file.

## Configuration

**Site Layout Conception** details with examples you can find [here](https://confluence.ontrq.com/display/RSB/SFRA+-+Site+Layout+Conception)

`media` mixin works with `$media` map where `media-name: media query`

This is how `$media` map looks:

```scss
$media: (
	sm: 'screen and (max-width: 767px)',
	md: 'screen and (min-width: 768px) and (max-width: 1199px)',
	lg: 'screen and (min-width: 1200px)',
	xl: 'screen and (min-width: 1201px)',
	md-up: 'screen and (min-width: 768px)',
	md-down: 'screen and (max-width: 1023px)',
	lg-up: 'screen and (min-width: 1024px)',
	lg-down: 'screen and (max-width: 1367px)'
);
```

## Usage

Here is how to use `media()` mixin:

```scss
.b-block {
	// styles outside of a media query

	@include media(md-up) {
		// styles for "m" and "l" viewports
	};

	@include media(sm) {
		// styles for "s" viewports
	};
}
```

Simply edit this file and add your own media queries to `$media` map.

*/
.storepage {
  width: 100%;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .storepage {
    padding-top: 1.25rem;
  }
}

a.pd-image-link {
  border: none;
}
a.pd-image-link:hover, a.pd-image-link:visited {
  border: none;
}

.component--full-screen-width {
  max-width: 100vw;
}
.component--full-screen-width .container {
  max-width: 100vw;
}
.component--full-screen-width .row {
  margin: 0;
}
.component--full-screen-width .col-12 {
  padding: 0;
}
.component--full-screen-width .pd-image-link {
  width: 100%;
}
.component--full-screen-width picture {
  width: 100%;
}
.component--full-screen-width .carousel-control-prev {
  left: 1px;
}
.component--full-screen-width .carousel-control-next {
  right: 1px;
}

.m-page_designer .component--full-screen-width {
  width: calc(var(--vw, 1vw) * 100);
  margin: 0 calc(calc(var(--vw, 1vw) * -50) + 50%);
}

.store-locator-container {
  background-color: #fff;
}
@media (min-width: 544px) {
  .store-locator-container.store-locator-container-desktop-map-first .tab-container {
    order: 1;
  }
}
@media (max-width: 767.98px) {
  .store-locator-container.store-locator-container-mobile-map-first .tab-container {
    order: 1;
  }
}
.store-locator-container .b-accordion-button {
  align-items: center;
}
.store-locator-container [data-tab-id] {
  display: none;
}
.store-locator-container [data-tab-id].active {
  display: block;
}
.store-locator-container .store-locator-navigation {
  margin-bottom: 1rem;
}
.store-locator-container .store-locator-navigation .tab-btn {
  text-transform: uppercase;
  border: 2px solid #424242;
}
.store-locator-container .store-locator-navigation .tab-btn.active {
  color: #fff;
  background-color: #424242;
}
.store-locator-container .store-locator-navigation .tab-btn.btn-type-2:not(:disabled):not(.disabled):focus:not([disabled]), .store-locator-container .store-locator-navigation .tab-btn.btn-type-2:not(:disabled):not(.disabled):active:not([disabled]) {
  background-color: #fff;
  color: #424242;
  outline: none;
  box-shadow: none;
  border-color: #424242;
}
.store-locator-container .store-highlight-badge,
.store-locator-container .store-badge {
  margin-left: 1rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
  background-color: #c00;
  border-radius: 0.5rem;
  line-height: normal;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .store-locator-container .store-highlight-badge,
  .store-locator-container .store-badge {
    margin-left: 0.5rem;
    font-size: 0.7rem;
  }
}
.store-locator-container .store-badges {
  margin-top: 0.3rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.store-locator-container .store-badges .store-badge {
  margin: 0;
  color: #424242;
  background-color: #ebe4de;
}
.store-locator-container .store-events-info {
  margin-top: 1rem;
}
.store-locator-container .store-default-info {
  margin-top: 1rem;
}
.store-locator-container .store-default-info p {
  margin: 0;
}
.store-locator-container .store-btn {
  margin: 1rem 0 2rem;
  border-color: #424242 !important;
  outline: none !important;
  box-shadow: none !important;
}
.store-locator-container .image-fluid {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  .store-locator-container .image-fluid {
    padding: 0 0.625rem;
  }
}

/*# sourceMappingURL=storeLocator.css.map*/