/* @group @variables */

body {
display: grid;
grid-auto-flow: row;
}

main {
display: contents;
}

[class*="o-hero-root"] {
order: -1;
}

[class*="o-hero-root"],
[class*="splide__track"],
[class*="splide__list"],
[class*="splide__slide"] {
--hero-root-height: 100vh;
}

[class*="m-hero-root-body"] {
--head-2-font-weight: 700;
--head-3-font-family: var(--font-family-heading);
--head-3-font-size: 1.25rem;
--head-3-line-height: 1.5;
--head-3-font-weight: 600;
--head-3-color: var(--color-white);
--font-family: var(--font-family-heading);
--font-size: 2.25rem;
--line-height: 1.25;
--font-weight: 700;
--font-variation-settings: "wght" var(--font-weight);
--color: var(--color-white);
}

@media (width < 48em) { /* 0 -> 767px */

[class*="o-hero-root"] {
--hero-root-padding-top: 4.5rem;
}

}

@media (width >= 48em) { /* 768px -> * */

[class*="o-hero-root"] {
--hero-root-padding-top: 2.25rem;
}

}

@supports (min-height: 100dvh) {

[class*="o-hero-root"],
[class*="splide__track"],
[class*="splide__list"],
[class*="splide__slide"] {
--hero-root-height: 100dvh;
}

}

/* @end @variables */

/* @group @o-hero-root */

[class*="m-hero-root-body"] {
display: grid;
align-items: center;
align-self: center;
grid-template-columns: var(--x-padding-left) 1fr var(--x-padding-right);
gap: .75rem;
}

[class*="m-hero-root-body"]>* {
grid-column: 2;
}

[class*="m-hero-root-body"] {
position: relative;
z-index: 3;
text-align: center;
}

[class*="m-hero-root-body"] p {
text-transform: uppercase;
letter-spacing: .2ch;
}

[class*="m-hero-root-body"] h2,
[class*="m-hero-root-body"] h3,
[class*="m-hero-root-body"] p {
text-shadow: 0.7px 0.7px hsl(220deg 20% 30%), 1px 0 hsl(220deg 20% 30%), 0.7px -0.7px hsl(220deg 20% 30%), 0 -1px hsl(220deg 20% 30%), -0.7px -0.7px hsl(220deg 20% 30%), -1px 0 hsl(220deg 20% 30%), -0.7px 0.7px hsl(220deg 20% 30%), 0 1px hsl(220deg 20% 30%);
}

[class*="m-hero-root-body"] img {
width: 100%;
max-width: 30rem;
height: auto;
filter: brightness(0) invert(1);
}

[class*="o-hero-root"] {
height: var(--hero-root-height);
}

[class*="o-hero-root"] [class*="splide__list"],
[class*="o-hero-root"] [class*="splide__list"] li,
[class*="o-hero-root"] [class*="splide__list"] img {
aspect-ratio: 1920 / 1080;/* fixed layout shift */
}

[class*="a-hero-root-media"],
[class*="o-hero-root"] [class*="splide__list"] img {
width: 100%;
height: var(--hero-root-height);
object-fit: cover;
object-position: center center;
}

/* @end @o-hero-root */

/* -------------------------------------------------------- */

/* @group @a-root-hero-scroll */

[class*="a-root-hero-scroll"] {
position: relative;
z-index: 2;
display: grid;
align-items: center;
grid-template-columns: 1px .375rem 1.125rem 1fr;
grid-template-rows: 1fr;
}

[class*="a-root-hero-scroll"]:before {
grid-column: 1;
grid-row: 1;
}

[class*="a-root-hero-link-scroll"] {
grid-column: 3;
grid-row: 1;
}

[class*="a-root-hero-scroll"]:before {
content: '';
display: block;
width: 1px;
height: 100%;
background-color: var(--color-white);
}

[class*="a-root-hero-link-scroll"] {
font-size: .625rem;
line-height: 1.2;
text-transform: uppercase;
writing-mode: vertical-rl;
}

[class*="a-root-hero-link-scroll"]:before {
content: '';
position: absolute;
top: 50%;
left: -.15rem;
width: 6px;
height: 6px;
background-color: var(--color-white);
border-radius: 50%;
animation: scrollMouse 3s infinite;
}

[class*="is-watch-nav"][class*="is-fit-sticky"] [class*="a-root-hero-link-scroll"]:before {
animation-fill-mode: forwards;
animation-play-state: paused;
}

[class*="a-root-hero-link-scroll"],
[class*="a-root-hero-link-scroll"]:hover,
[class*="a-root-hero-link-scroll"]:focus,
[class*="a-root-hero-link-scroll"]:active {
color: var(--color-white);
}

/* @end @a-root-hero-scroll */

/* @group @scrollMouse */

@keyframes scrollMouse {
0%, 100% {opacity: 0;transform: translateY(-.75rem);}
20%, 99.99% {opacity: 1;transform: translateY(.1875rem);}
}

/* @end @scrollMouse */

/* --------------------------------------------------------*/

/* @group @variables */

[class*="m-root-services"] {
--root-services-grid-template-columns: repeat(1, 1fr);
--root-services-gap: 2.25rem;
}

@media (width >= 48em) { /* 768px -> * */

[class*="m-root-services"] {
--root-services-grid-template-columns: repeat(2, 1fr);
}

}

/*@media (width >= 62em) { /* 992px -> * *!/

[class*="m-root-services"] {
--root-services-grid-template-columns: repeat(3, 1fr);
}

}*/

/* @end @variables */

/* @group @m-root-services */

[class*="m-root-services"] {
display: grid;
grid-template-columns: var(--root-services-grid-template-columns);
gap: var(--root-services-gap);
}

:where([class*="m-root-services"]) li {
display: grid;
}

/* @end @m-root-services */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="m-product"] {
--product-grid-template-columns: repeat(1, 1fr);
--product-gap: 2.25rem;

--product-link-grid-template-columns: 1fr ;
--product-link-grid-template-rows: auto .375rem auto .375rem auto 1.125rem auto 1.5rem 1fr auto;

--product-media-grid-column: 1;
--product-media-grid-row: 1;
--product-title-grid-column: 1;
--product-title-grid-row: 3;
--product-overview-grid-column: 1;
--product-overview-grid-row: 5;
--product-price-grid-column: 1;
--product-price-grid-row: 7;
--product-link-grid-column: 1;
--product-link-grid-row: 10;

--head-3-font-family: var(--font-family-heading);
--head-3-font-size: 1.25rem;
--head-3-line-height: 1.5;
--head-3-color: var(--color-primary);
--font-size: .875rem;
--line-height: 1.71428571;
}

@media (width < 48em) { /* 0 -> 767px */

[class*="m-product"] {
}

}

@media (width >= 48em) { /* 768px -> * */

[class*="m-product"] {
--product-grid-template-columns: repeat(2, 1fr);
--product-gap: 1.5rem;
--product-link-margin-top: auto;
}

}

@media (width >= 62em) { /* 992px -> * */

[class*="m-product"] {
--product-grid-template-columns: repeat(4, 1fr);
--btn-font-size: .75rem;
}

}

/* @end @variables */

/* @group @m-product */

[class*="m-product"] {
display: grid;
grid-template-columns: var(--product-grid-template-columns);
gap: var(--product-gap);
}

:where([class*="m-product"]) li {
display: grid;
grid-auto-flow: row;
grid-template-columns: var(--product-link-grid-template-columns);
grid-template-rows: var(--product-link-grid-template-rows);
}

[class*="a-product-media"] {
grid-column: var(--product-media-grid-column);
grid-row: var(--product-media-grid-row);
}

[class*="a-product-title"] {
grid-column: var(--product-title-grid-column);
grid-row: var(--product-title-grid-row);
}

[class*="a-product-overview"] {
grid-column: var(--product-overview-grid-column);
grid-row: var(--product-overview-grid-row);
}

[class*="a-product-price"] {
grid-column: var(--product-price-grid-column);
grid-row: var(--product-price-grid-row);
}

:where([class*="m-product"] a) {
grid-column: var(--product-link-grid-column);
grid-row: var(--product-link-grid-row);
}

/* @end @m-product */

/* @group @variables */

[class*="a-product-price"] {
--head-4-font-family: var(--font-family-heading);
--head-4-font-size: 1rem;
--head-4-line-height: 1.5;
--head-4-color: var(--color-primary);
--head-4-text-align: center;
--font-size: .75rem;
--line-height: 1.5;
}

/* @end @variables */

/* @group @a-product-price */

[class*="a-product-price"] {
display: grid;
grid-auto-flow: row;
gap: .375rem;
margin-top: .375rem;
margin-bottom: .375rem;
}

[class*="a-product-price"] h4 {
text-transform: uppercase;
}

/* @end @a-product-price */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="m-dialy"] {
--dialy-grid-template-columns: repeat(1, 1fr);
--dialy-link-grid-template-columns: .75rem 1fr .75rem;
--dialy-link-grid-template-rows: auto .75rem auto .375rem auto .75rem auto .75rem 1fr;

--dialy-media-grid-column: 1 / span 3;
--dialy-media-grid-row: 1;
--dialy-date-grid-column: 2;
--dialy-date-grid-row: 3;
--dialy-title-grid-column: 2;
--dialy-title-grid-row: 5;
--dialy-overview-grid-column: 2;
--dialy-overview-grid-row: 7;

--dialy-after-grid-column: 1 / span 3;
--dialy-after-grid-row: 1 / span 9;

--dialy-gap: 2.25rem;
--head-3-font-size: 1.125rem;
--head-3-line-height: 1.33333333;
--head-3-color: var(--color-primary);
--font-size: .875rem;
--line-height: 1.71428571;
}

@media (width >= 48em) { /* 768px -> * */

[class*="m-dialy"] {
--dialy-grid-template-columns: repeat(2, 1fr);
}

}

@media (width >= 62em) { /* 992px -> * */

[class*="m-dialy"] {
--dialy-grid-template-columns: repeat(3, 1fr);
}

}

/* @end @variables */

/* @group @m-dialy */

[class*="m-dialy"] {
contain: content;
display: grid;
grid-template-columns: var(--dialy-grid-template-columns);
gap: var(--dialy-gap);
padding: 0 1px;
}

:where([class*="m-dialy"]) li {
display: contents;
}

:where([class*="m-dialy"]) a {
box-sizing: border-box;
contain: content;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: var(--dialy-link-grid-template-columns);
grid-template-rows: var(--dialy-link-grid-template-rows);
grid-template-areas:
"dialy-img"
"dialy-media"
"dialy-date"
"dialy-title"
"dialy-overview";
background-color: var(--color-white);
box-shadow: inset 0 0 0 1px var(--border-color), .125rem .125rem .125rem var(--box-shadow-color);
text-decoration: none;
border-radius: .25rem;
}

:where([class*="m-dialy"]) a:before {
grid-area: dialy-img;
grid-column: var(--dialy-after-grid-column);
grid-row: var(--dialy-after-grid-row);
}

[class*="a-dialy-media"] {
grid-area: dialy-media;
grid-column: var(--dialy-media-grid-column);
grid-row: var(--dialy-media-grid-row);
}

[class*="a-dialy-date"] {
grid-area: dialy-date;
grid-column: var(--dialy-date-grid-column);
grid-row: var(--dialy-date-grid-row);
}

[class*="a-dialy-title"] {
grid-area: dialy-title;
grid-column: var(--dialy-title-grid-column);
grid-row: var(--dialy-title-grid-row);
}

[class*="a-dialy-overview"] {
grid-area: dialy-overview;
grid-column: var(--dialy-overview-grid-column);
grid-row: var(--dialy-overview-grid-row);
}

[class*="a-dialy-date"] {
padding-left: 1.25rem;
background-image: url('../img/sprite-svg.svg#icon-business-hours');
background-position: 0 .375rem;
background-repeat: no-repeat;
background-size: .875rem .875rem;
}

:where([class*="m-dialy"]) a:before {
content: '';
position: relative;
z-index: -1;
opacity: 0;
border-radius: .25rem;
box-shadow: 0 0 0 1px var(--border-color), .25rem .25rem .25rem var(--box-shadow-color);
transition: var(--opacity-transition);
}

:where([class*="m-dialy"]) a:hover:before,
:where([class*="m-dialy"]) a:focus:before {
opacity: 1;
}

/* @end @m-dialy */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="m-root-interview"] {
--interview-grid-template-columns: repeat(1, 1fr);
--interview-gap: 2.25rem;
}

@media (width >= 48em) { /* 768px -> * */

[class*="m-root-interview"] {
--interview-grid-template-columns: repeat(2, 1fr);
}

}

/* @end @variables */

/* @group @m-root-interview */

[class*="m-root-interview"] {
display: grid;
align-items: start;
grid-template-columns: var(--interview-grid-template-columns);
gap: var(--interview-gap);
}

:where([class*="m-root-interview"] a) {
text-decoration: none;
}

/* @end @m-root-interview */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="m-root-news"] {
--root-news-grid-template-columns: 1fr;
}

:where([class*="m-root-news"]) p {
--font-size: .875rem;
--line-height: 1.71428571;
--color: var(hsl(220deg 2.5% 90%));
}

:where([class*="m-root-news"]) time {
--color: var(--color-secondary);
--font-weight: 600;
--font-variation-settings: "wght" var(--font-weight);
}

@media (width >= 48em) { /* 768px -> * */

[class*="m-root-news"] {
--root-news-grid-template-columns: auto 1fr;
}

}

/* @end @variables */

/* @group @m-root-new */

[class*="m-root-news"] {
display: grid;
grid-auto-flow: row;
align-items: start;
}

:where([class*="m-root-news"]) section {
display: grid;
grid-template-columns: var(--root-news-grid-template-columns);
gap: .75rem 1.125rem;
padding: .75rem .75rem;
box-shadow: 0 1px 0 0 var(--border-color-news), inset 0 1px 0 0 var(--border-color-news);
text-decoration: none;
}

:where([class*="m-root-news"]) time {

}

:where([class*="m-root-news"]) [class*="a-news-body"] {

}

/* @end @m-root-new */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="m-merchandise"] {
--merchandise-grid-template-columns: repeat(1, 1fr);
--merchandise-gap: 2.25rem;
--head-3-font-family: var(--font-family-heading);
--head-3-font-size: .75rem;
--head-3-line-height: 1;
--head-3-color: var(--color-secondary);
--head-3-text-align: center;

--head-4-font-family: var(--font-family-heading);
--head-4-font-size: 1.125rem;
--head-4-line-height: 1.5;
--head-4-color: var(--color-white);
--head-4-text-align: center;
--font-size: .875rem;
--line-height: 1.71428571;
}

@media (width >= 48em) { /* 768px -> * */

[class*="m-merchandise"] {
--merchandise-grid-template-columns: repeat(2, 1fr);
}

}

@media (width >= 62em) { /* 992px -> * */

[class*="m-merchandise"] {
--merchandise-grid-template-columns: repeat(3, 1fr);
}

}

/* @end @variables */

/* @group @m-merchandise */

[class*="m-merchandise"] {
display: grid;
align-items: start;
grid-template-columns: var(--merchandise-grid-template-columns);
gap: var(--merchandise-gap);
}

[class*="m-merchandise"] a {
display: grid;
grid-auto-flow: row;
background-color: var(--color-black);
text-align: center;
text-decoration: none;
}

[class*="a-merchandise-detail"] {
padding: .75rem;
}

:where([class*="m-merchandise"]) div {
margin-top: auto;
}

:where([class*="m-merchandise"]) img {
width: 100%;
}

[class*="a-merchandise-price"] {
display: grid;
grid-auto-flow: row;
gap: .375rem;
margin-top: .75rem;
}

[class*="a-merchandise-price"] h4 {
text-transform: uppercase;
}

/* @end @m-merchandise */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="m-brand-list"] {
--brand-list-grid-template-columns: repeat(2, 1fr);
--brand-list-gap: .75rem;
}

[class*="a-brand-link"] {
--grid-template-columns: repeat(1, 1fr);
--gap: .75rem;
--brand-link-height: 4.5rem;;
--brand-link-img-height: 3rem;
}

@media (width >= 48em) { /* 768px -> * */

[class*="m-brand-list"] {
--brand-list-grid-template-columns: repeat(3, 1fr);
}

}

@media (width >= 62em) { /* 992px -> * */

[class*="m-brand-list"] {
--brand-list-grid-template-columns: repeat(4, 1fr);
}

}

/* @end @variables */

/* @group @m-brand-list */

[class*="m-brand-list"] {
display: grid;
grid-template-columns: var(--brand-list-grid-template-columns);
gap: var(--brand-list-gap);
}

[class*="a-brand-link"] {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: var(--grid-template-columns);
gap: var(--gap);
padding: calc(.25rem - 1px);
border: 1px solid var(--border-color);
transition: var(--border-color-transition);
}

[class*="a-brand-link"]:focus {
border-color: var(--border-action-color);
}

@media (hover: hover) {

[class*="a-brand-link"]:hover {
border-color: var(--border-action-color);
}

}

[class*="a-brand-logo"] {
box-sizing: border-box;
position: relative;
display: grid;
place-items: center;
border: 1px solid var(--border-color);
transition: var(--border-color-transition);
}

[class*="a-brand-logo"] img {
height: var(--brand-link-img-height);
aspect-ratio: var(--aspect-ratio);
object-fit: contain;
object-position: center center;
pointer-events: none;
}

/* @end @m-brand-list */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="a-blog-head-nav"] {
--font-size: .875rem;
--line-height: 1.71428571;
}

/* @end @variables */

/* @group @a-blog-head-nav */

[class*="a-blog-head-nav"] {
display: grid;
justify-content: end;
align-items: center;
grid-auto-flow: column;
gap: .75rem;
}

/* @end @a-blog-head-nav */