/** Shopify CDN: Minification failed
Line 1067:2 Expected identifier but found "*"
Line 1158:2 Expected identifier but found "*"
Line 9431:33 Expected ":"
**/
@charset "UTF-8";
/*============================================================================
Debut | Built with Shopify Slate
Some things to know about this file:
- Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
- The output CSS is compressed and comments are removed
- You cannot use native CSS/Sass @imports in this file without a build script
==============================================================================*/
/*================ SASS HELPERS ================*/
/*================ #Mixins ================*/
/*============================================================================
Prefix mixin for generating vendor prefixes.
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
Usage:
// Input:
.element {
@include prefix(transform, scale(1), ms webkit spec);
}
// Output:
.element {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
==============================================================================*/
/*================ Media Query Mixin ================*/
/*================ Responsive Show/Hide Helper ================*/
/*================ Responsive Text Alignment Helper ================*/
/*============================================================================
Convert pixels (unitless) to ems
eg. for a relational value of 12px write calc-font-size(12) when the parent is 16px
if the parent is another value say 24px write calc-font-size(12, 24)
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_px-to-em.scss
==============================================================================*/
/*============================================================================
Flexbox prefix mixins from Bourbon
https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss
==============================================================================*/
/*================ VARIABLES ================*/
/*============================================================================
Grid Breakpoints and Class Names
- Do not change the variable names
- Breakpoint pixel values are used in the window.theme.breakpoints object
==============================================================================*/
/*============================================================================
Generate breakpoint-specific column widths and push classes
- Default column widths: $grid-breakpoint-has-widths: ($small, $medium-up);
- Default is no push classes
==============================================================================*/
/*================ Color Variables ================*/
/*================ Sizing Variables ================*/
/*================ Footer Variables ================*/
/*================ Z-Index ================*/
/*================ SVG ================*/
/*================ Drawers ================*/
/*================ Hero Slider ================*/
#hero-slider {
/* max-width: 1024px;*/ }
#hero-slider .hero-slider-image {
width: 100%;
/* aspect-ratio: 4/5; */
object-fit: cover;}
#hero-slider .swiper-pagination {
display: contents; }
#hero-slider .swiper-pagination-bullet-active {
background: #4B4B4A; }
@media only screen and (min-width: 750px) {
#hero-slider .swiper-wrapper {
margin-left: 26%; }
#hero-slider .swiper-slide {
max-width: auto; }
#hero-slider .swiper-slide-next {
opacity: 0.4 !important; }
#hero-slider .swiper-slide-prev {
opacity: 0.4 !important; }
#hero-slider .swiper-slide-active {
opacity: 1 !important;
/* box-shadow : 0px 4px 24px rgba(0,0,0,0.2); */
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s; }
}
@media only screen and (min-width: 1024px) {
#hero-slider .swiper-wrapper {
margin-left: 246px; }
#hero-slider .swiper-slide {
max-width: auto; }
}
@media only screen and (max-width: 749px) {
#hero-slider .swiper-pagination {
margin-left: 20px;
}
}
/*================ Typography ================*/
/*================ Gift Cards ================*/
/*================ Z-index ================*/
/*================ Product video ================*/
/*================ Image placeholder ================*/
/*================ VENDOR ================*/
/*============================================================================
Slick Slider 1.6.0
- If upgrading Slick's styles, use the following variables/functions
instead of the slick defaults (from slick-theme.scss)
- This file includes default slick.scss styles (at Slick Slider SCSS)
and slick-theme.scss (at Slick Slider Theme). Upgrade each area individually.
- Remove `outline: none` from `.slick-dots li button`
==============================================================================*/
/*================ Slick Slider SCSS ================*/
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent; }
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0; }
.slick-list:focus {
outline: none; }
.slick-list.dragging {
cursor: pointer;
cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slick-track {
position: relative;
left: 0;
top: 0;
display: block; }
.slick-track:before, .slick-track:after {
content: "";
display: table; }
.slick-track:after {
clear: both; }
.slick-loading .slick-track {
visibility: hidden; }
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none;}
[dir="rtl"] .slick-slide {
float: right; }
.slick-slide img {
display: block;
aspect-ratio: 3/4;
width: 100%;
height: auto;}
.slick-slide.slick-loading img {
display: none; }
.slick-slide.dragging img {
pointer-events: none; }
.slick-initialized .slick-slide {
display: block; }
.slick-loading .slick-slide {
visibility: hidden; }
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent; }
.slick-arrow.slick-hidden {
display: none; }
/*================ Slick Slider Theme ================*/
.slick-loading .slick-list {
background: #fff var(--slick-img-url) center center no-repeat; }
/* Icons */
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none; }
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
background: transparent;
color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1; }
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25; }
.slick-prev:before,
.slick-next:before {
font-family: "slick-icons, sans-serif";
font-size: 20px;
line-height: 1;
color: #000;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.slick-prev {
left: -25px; }
[dir="rtl"] .slick-prev {
left: auto;
right: -25px; }
.slick-prev:before {
content: "â†"; }
[dir="rtl"] .slick-prev:before {
content: "→"; }
.slick-next {
right: -25px; }
[dir="rtl"] .slick-next {
left: -25px;
right: auto; }
.slick-next:before {
content: "→"; }
[dir="rtl"] .slick-next:before {
content: "â†"; }
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px; }
.slick-dots {
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0; }
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer; }
.slick-dots li button, .slick-dots li a {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before, .slick-dots li a:hover:before, .slick-dots li a:focus:before {
opacity: 1; }
.slick-dots li button:before, .slick-dots li a:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick-icons, sans-serif";
font-size: 6px;
line-height: 20px;
text-align: center;
color: #fff;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before {
color: #fff;
opacity: 0.75; }
/*================ GLOBAL ================*/
/*============================================================================
#Normalize
Based on normalize.css v3.0.2 | MIT License | git.io/normalize
==============================================================================*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block; }
input,
textarea,
select,
.disclosure__toggle {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; }
a {
background-color: transparent; }
b,
strong {
font-weight: var(--font-weight-body--bolder); }
em {
font-style: italic; }
small {
font-size: 80%; }
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
img {
max-width: 100%;
border: 0; }
button,
input,
optgroup,
select,
.disclosure__toggle,
textarea {
color: inherit;
font: inherit;
margin: 0; }
button[disabled],
html input[disabled] {
cursor: default; }
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
input[type="search"], input[type="number"], input[type="email"], input[type="password"] {
-webkit-appearance: none;
-moz-appearance: none; }
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0; }
td,
th {
padding: 0; }
textarea {
overflow: auto;
-webkit-appearance: none;
-moz-appearance: none; }
/*============================================================================
Fast Tap
enables no-delay taps (FastClick-esque) on supporting browsers
==============================================================================*/
a,
button,
[role="button"],
input,
label,
select,
.disclosure__toggle,
textarea {
touch-action: manipulation; }
/*============================================================================
#Grid
==============================================================================*/
/*============================================================================
Grid Setup
1. Allow the grid system to be used on lists.
2. Remove any margins and paddings that might affect the grid system.
3. Apply a negative `margin-left` to negate the columns' gutters.
==============================================================================*/
/*============================================================================
Reversed grids allow you to structure your source in the opposite
order to how your rendered layout will appear.
==============================================================================*/
.grid--rev {
direction: rtl;
text-align: left; }
.grid--rev > .grid__item {
direction: ltr;
text-align: left;
float: right; }
/*============================================================================
Grid Columns
- Create width classes, prepended by the breakpoint name.
==============================================================================*/
/*================ Grid push classes ================*/
/*================ Clearfix helper on uniform grids ================*/
/*================ Build Base Grid Classes ================*/
/* Whole */
.one-whole {
width: 100%; }
/* Halves */
.one-half {
width: 50%; }
/* Thirds */
.one-third {
width: 33.33333%; }
.two-thirds {
width: 66.66667%; }
/* Quarters */
.one-quarter {
width: 25%; }
.two-quarters {
width: 50%; }
.three-quarters {
width: 75%; }
/* Fifths */
.one-fifth {
width: 20%; }
.two-fifths {
width: 40%; }
.three-fifths {
width: 60%; }
.four-fifths {
width: 80%; }
/* Sixths */
.one-sixth {
width: 16.66667%; }
.two-sixths {
width: 33.33333%; }
.three-sixths {
width: 50%; }
.four-sixths {
width: 66.66667%; }
.five-sixths {
width: 83.33333%; }
/* Eighths */
.one-eighth {
width: 12.5%; }
.two-eighths {
width: 25%; }
.three-eighths {
width: 37.5%; }
.four-eighths {
width: 50%; }
.five-eighths {
width: 62.5%; }
.six-eighths {
width: 75%; }
.seven-eighths {
width: 87.5%; }
/* Tenths */
.one-tenth {
width: 10%; }
.two-tenths {
width: 20%; }
.three-tenths {
width: 30%; }
.four-tenths {
width: 40%; }
.five-tenths {
width: 50%; }
.six-tenths {
width: 60%; }
.seven-tenths {
width: 70%; }
.eight-tenths {
width: 80%; }
.nine-tenths {
width: 90%; }
/* Twelfths */
.one-twelfth {
width: 8.33333%; }
.two-twelfths {
width: 16.66667%; }
.three-twelfths {
width: 25%; }
.four-twelfths {
width: 33.33333%; }
.five-twelfths {
width: 41.66667%; }
.six-twelfths {
width: 50%; }
.seven-twelfths {
width: 58.33333%; }
.eight-twelfths {
width: 66.66667%; }
.nine-twelfths {
width: 75%; }
.ten-twelfths {
width: 83.33333%; }
.eleven-twelfths {
width: 91.66667%; }
.show {
display: block !important; }
.hide {
display: none !important; }
.text-left {
text-align: left !important; }
.text-right {
text-align: right !important; }
.text-center {
text-align: center !important; }
/*================ Build Responsive Grid Classes ================*/
@media only screen and (max-width: 749px) {
/* Whole */
.small--one-whole {
width: 100%; }
/* Halves */
.small--one-half {
width: 50%; }
/* Thirds */
.small--one-third {
width: 33.33333%; }
.small--two-thirds {
width: 66.66667%; }
/* Quarters */
.small--one-quarter {
width: 25%; }
.small--two-quarters {
width: 50%; }
.small--three-quarters {
width: 75%; }
/* Fifths */
.small--one-fifth {
width: 20%; }
.small--two-fifths {
width: 40%; }
.small--three-fifths {
width: 60%; }
.small--four-fifths {
width: 80%; }
/* Sixths */
.small--one-sixth {
width: 16.66667%; }
.small--two-sixths {
width: 33.33333%; }
.small--three-sixths {
width: 50%; }
.small--four-sixths {
width: 66.66667%; }
.small--five-sixths {
width: 83.33333%; }
/* Eighths */
.small--one-eighth {
width: 12.5%; }
.small--two-eighths {
width: 25%; }
.small--three-eighths {
width: 37.5%; }
.small--four-eighths {
width: 50%; }
.small--five-eighths {
width: 62.5%; }
.small--six-eighths {
width: 75%; }
.small--seven-eighths {
width: 87.5%; }
/* Tenths */
.small--one-tenth {
width: 10%; }
.small--two-tenths {
width: 20%; }
.small--three-tenths {
width: 30%; }
.small--four-tenths {
width: 40%; }
.small--five-tenths {
width: 50%; }
.small--six-tenths {
width: 60%; }
.small--seven-tenths {
width: 70%; }
.small--eight-tenths {
width: 80%; }
.small--nine-tenths {
width: 90%; }
/* Twelfths */
.small--one-twelfth {
width: 8.33333%; }
.small--two-twelfths {
width: 16.66667%; }
.small--three-twelfths {
width: 25%; }
.small--four-twelfths {
width: 33.33333%; }
.small--five-twelfths {
width: 41.66667%; }
.small--six-twelfths {
width: 50%; }
.small--seven-twelfths {
width: 58.33333%; }
.small--eight-twelfths {
width: 66.66667%; }
.small--nine-twelfths {
width: 75%; }
.small--ten-twelfths {
width: 83.33333%; }
.small--eleven-twelfths {
width: 91.66667%; }
.grid--uniform .small--one-half:nth-child(2n+1),
.grid--uniform .small--one-third:nth-child(3n+1),
.grid--uniform .small--one-quarter:nth-child(4n+1),
.grid--uniform .small--one-fifth:nth-child(5n+1),
.grid--uniform .small--one-sixth:nth-child(6n+1),
.grid--uniform .small--two-sixths:nth-child(3n+1),
.grid--uniform .small--three-sixths:nth-child(2n+1),
.grid--uniform .small--one-eighth:nth-child(8n+1),
.grid--uniform .small--two-eighths:nth-child(4n+1),
.grid--uniform .small--four-eighths:nth-child(2n+1),
.grid--uniform .small--five-tenths:nth-child(2n+1),
.grid--uniform .small--one-twelfth:nth-child(12n+1),
.grid--uniform .small--two-twelfths:nth-child(6n+1),
.grid--uniform .small--three-twelfths:nth-child(4n+1),
.grid--uniform .small--four-twelfths:nth-child(3n+1),
.grid--uniform .small--six-twelfths:nth-child(2n+1) {
clear: both; }
.small--show {
display: block !important; }
.small--hide {
display: none !important; }
.small--text-left {
text-align: left !important; }
.small--text-right {
text-align: right !important; }
.small--text-center {
text-align: center !important; } }
@media only screen and (min-width: 750px) {
/* Whole */
.medium-up--one-whole {
width: 100%; }
/* Halves */
.medium-up--one-half {
width: 50%; }
/* Thirds */
.medium-up--one-third {
width: 33.33333%; }
.medium-up--two-thirds {
width: 66.66667%; }
/* Quarters */
.medium-up--one-quarter {
width: 25%; }
.medium-up--two-quarters {
width: 50%; }
.medium-up--three-quarters {
width: 75%; }
/* Fifths */
.medium-up--one-fifth {
width: 20%; }
.medium-up--two-fifths {
width: 40%; }
.medium-up--three-fifths {
width: 60%; }
.medium-up--four-fifths {
width: 80%; }
/* Sixths */
.medium-up--one-sixth {
width: 16.66667%; }
.medium-up--two-sixths {
width: 33.33333%; }
.medium-up--three-sixths {
width: 50%; }
.medium-up--four-sixths {
width: 66.66667%; }
.medium-up--five-sixths {
width: 83.33333%; }
/* Eighths */
.medium-up--one-eighth {
width: 12.5%; }
.medium-up--two-eighths {
width: 25%; }
.medium-up--three-eighths {
width: 37.5%; }
.medium-up--four-eighths {
width: 50%; }
.medium-up--five-eighths {
width: 62.5%; }
.medium-up--six-eighths {
width: 75%; }
.medium-up--seven-eighths {
width: 87.5%; }
/* Tenths */
.medium-up--one-tenth {
width: 10%; }
.medium-up--two-tenths {
width: 20%; }
.medium-up--three-tenths {
width: 30%; }
.medium-up--four-tenths {
width: 40%; }
.medium-up--five-tenths {
width: 50%; }
.medium-up--six-tenths {
width: 60%; }
.medium-up--seven-tenths {
width: 70%; }
.medium-up--eight-tenths {
width: 80%; }
.medium-up--nine-tenths {
width: 90%; }
/* Twelfths */
.medium-up--one-twelfth {
width: 8.33333%; }
.medium-up--two-twelfths {
width: 16.66667%; }
.medium-up--three-twelfths {
width: 25%; }
.medium-up--four-twelfths {
width: 33.33333%; }
.medium-up--five-twelfths {
width: 41.66667%; }
.medium-up--six-twelfths {
width: 50%; }
.medium-up--seven-twelfths {
width: 58.33333%; }
.medium-up--eight-twelfths {
width: 66.66667%; }
.medium-up--nine-twelfths {
width: 75%; }
.medium-up--ten-twelfths {
width: 83.33333%; }
.medium-up--eleven-twelfths {
width: 91.66667%; }
.grid--uniform .medium-up--one-half:nth-child(2n+1),
.grid--uniform .medium-up--one-third:nth-child(3n+1),
.grid--uniform .medium-up--one-quarter:nth-child(4n+1),
.grid--uniform .medium-up--one-fifth:nth-child(5n+1),
.grid--uniform .medium-up--one-sixth:nth-child(6n+1),
.grid--uniform .medium-up--two-sixths:nth-child(3n+1),
.grid--uniform .medium-up--three-sixths:nth-child(2n+1),
.grid--uniform .medium-up--one-eighth:nth-child(8n+1),
.grid--uniform .medium-up--two-eighths:nth-child(4n+1),
.grid--uniform .medium-up--four-eighths:nth-child(2n+1),
.grid--uniform .medium-up--five-tenths:nth-child(2n+1),
.grid--uniform .medium-up--one-twelfth:nth-child(12n+1),
.grid--uniform .medium-up--two-twelfths:nth-child(6n+1),
.grid--uniform .medium-up--three-twelfths:nth-child(4n+1),
.grid--uniform .medium-up--four-twelfths:nth-child(3n+1),
.grid--uniform .medium-up--six-twelfths:nth-child(2n+1) {
clear: both; }
.medium-up--show {
display: block !important; }
.medium-up--hide {
display: none !important; }
.medium-up--text-left {
text-align: left !important; }
.medium-up--text-right {
text-align: right !important; }
.medium-up--text-center {
text-align: center !important; } }
/*================ Build Grid Push Classes ================*/
@media only screen and (max-width: 749px) {
/* Halves */
.small--push-one-half {
left: 50%; }
/* Thirds */
.small--push-one-third {
left: 33.33333%; }
.small--push-two-thirds {
left: 66.66667%; }
/* Quarters */
.small--push-one-quarter {
left: 25%; }
.small--push-two-quarters {
left: 50%; }
.small--push-three-quarters {
left: 75%; }
/* Fifths */
.small--push-one-fifth {
left: 20%; }
.small--push-two-fifths {
left: 40%; }
.small--push-three-fifths {
left: 60%; }
.small--push-four-fifths {
left: 80%; }
/* Sixths */
.small--push-one-sixth {
left: 16.66667%; }
.small--push-two-sixths {
left: 33.33333%; }
.small--push-three-sixths {
left: 50%; }
.small--push-four-sixths {
left: 66.66667%; }
.small--push-five-sixths {
left: 83.33333%; }
/* Eighths */
.small--push-one-eighth {
left: 12.5%; }
.small--push-two-eighths {
left: 25%; }
.small--push-three-eighths {
left: 37.5%; }
.small--push-four-eighths {
left: 50%; }
.small--push-five-eighths {
left: 62.5%; }
.small--push-six-eighths {
left: 75%; }
.small--push-seven-eighths {
left: 87.5%; }
/* Tenths */
.small--push-one-tenth {
left: 10%; }
.small--push-two-tenths {
left: 20%; }
.small--push-three-tenths {
left: 30%; }
.small--push-four-tenths {
left: 40%; }
.small--push-five-tenths {
left: 50%; }
.small--push-six-tenths {
left: 60%; }
.small--push-seven-tenths {
left: 70%; }
.small--push-eight-tenths {
left: 80%; }
.small--push-nine-tenths {
left: 90%; }
/* Twelfths */
.small--push-one-twelfth {
left: 8.33333%; }
.small--push-two-twelfths {
left: 16.66667%; }
.small--push-three-twelfths {
left: 25%; }
.small--push-four-twelfths {
left: 33.33333%; }
.small--push-five-twelfths {
left: 41.66667%; }
.small--push-six-twelfths {
left: 50%; }
.small--push-seven-twelfths {
left: 58.33333%; }
.small--push-eight-twelfths {
left: 66.66667%; }
.small--push-nine-twelfths {
left: 75%; }
.small--push-ten-twelfths {
left: 83.33333%; }
.small--push-eleven-twelfths {
left: 91.66667%; } }
@media only screen and (min-width: 750px) {
/* Halves */
.medium-up--push-one-half {
left: 50%; }
/* Thirds */
.medium-up--push-one-third {
left: 33.33333%; }
.medium-up--push-two-thirds {
left: 66.66667%; }
/* Quarters */
.medium-up--push-one-quarter {
left: 25%; }
.medium-up--push-two-quarters {
left: 50%; }
.medium-up--push-three-quarters {
left: 75%; }
/* Fifths */
.medium-up--push-one-fifth {
left: 20%; }
.medium-up--push-two-fifths {
left: 40%; }
.medium-up--push-three-fifths {
left: 60%; }
.medium-up--push-four-fifths {
left: 80%; }
/* Sixths */
.medium-up--push-one-sixth {
left: 16.66667%; }
.medium-up--push-two-sixths {
left: 33.33333%; }
.medium-up--push-three-sixths {
left: 50%; }
.medium-up--push-four-sixths {
left: 66.66667%; }
.medium-up--push-five-sixths {
left: 83.33333%; }
/* Eighths */
.medium-up--push-one-eighth {
left: 12.5%; }
.medium-up--push-two-eighths {
left: 25%; }
.medium-up--push-three-eighths {
left: 37.5%; }
.medium-up--push-four-eighths {
left: 50%; }
.medium-up--push-five-eighths {
left: 62.5%; }
.medium-up--push-six-eighths {
left: 75%; }
.medium-up--push-seven-eighths {
left: 87.5%; }
/* Tenths */
.medium-up--push-one-tenth {
left: 10%; }
.medium-up--push-two-tenths {
left: 20%; }
.medium-up--push-three-tenths {
left: 30%; }
.medium-up--push-four-tenths {
left: 40%; }
.medium-up--push-five-tenths {
left: 50%; }
.medium-up--push-six-tenths {
left: 60%; }
.medium-up--push-seven-tenths {
left: 70%; }
.medium-up--push-eight-tenths {
left: 80%; }
.medium-up--push-nine-tenths {
left: 90%; }
/* Twelfths */
.medium-up--push-one-twelfth {
left: 8.33333%; }
.medium-up--push-two-twelfths {
left: 16.66667%; }
.medium-up--push-three-twelfths {
left: 25%; }
.medium-up--push-four-twelfths {
left: 33.33333%; }
.medium-up--push-five-twelfths {
left: 41.66667%; }
.medium-up--push-six-twelfths {
left: 50%; }
.medium-up--push-seven-twelfths {
left: 58.33333%; }
.medium-up--push-eight-twelfths {
left: 66.66667%; }
.medium-up--push-nine-twelfths {
left: 75%; }
.medium-up--push-ten-twelfths {
left: 83.33333%; }
.medium-up--push-eleven-twelfths {
left: 91.66667%; } }
@media only screen and (max-width: 959px) {
.large--hide {
display: none !important;
}
}
@media only screen and (min-width: 960px) {
.large-up--hide {
display: none !important;
}
}
/*================ #Helper Classes ================*/
.clearfix {
*zoom: 1; }
.clearfix::after {
content: '';
display: table;
clear: both; }
.visually-hidden {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
.visually-hidden--inline {
margin: 0;
height: 1em; }
.visually-hidden--static {
position: static !important; }
.js-focus-hidden:focus {
outline: none; }
.no-js:not(html) {
display: none; }
.no-js .no-js:not(html) {
display: block; }
.no-js .js {
display: none; }
.hide {
display: none !important; }
/*============================================================================
Skip to content button
- Overrides .visually-hidden when focused
==============================================================================*/
.skip-link:focus {
clip: auto;
width: auto;
height: auto;
margin: 0;
color: var(--color-text);
background-color: var(--color-bg);
padding: 10px;
opacity: 1;
z-index: 10000;
transition: none; }
/*=============== Lazy loading ===================*/
.box {
background: no-repeat;
background-color: #f7f7f7;
background-size: contain; }
.ratio-container {
position: relative; }
.ratio-container:after {
content: '';
display: block;
height: 0;
width: 100%;
/* 16:9 = 56.25% = calc(9 / 16 * 100%) */
padding-bottom: 50%;
content: ""; }
.ratio-container > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
/*=============== Critical CSS ===================*/
.main-content {
opacity: 1; }
.main-content .shopify-section {
display: inherit; }
.critical-hidden {
display: inherit; }
/*================ #Basic Styles ================*/
.page-width {
*zoom: 1;
max-width: 900px; /* max-width: 1024px; */
margin: 0 auto; }
.page-width::after {
content: '';
display: table;
clear: both; }
.page-700-width {
max-width: 700px;
margin: 0 auto;
}
.page-750-width {
max-width: 750px;
margin: 0 auto;
}
.page-small-width {
max-width: 680px;
margin: 0 auto;
}
.page-full-width {
width: 100vw;
}
.main-content {
display: block;
padding-top: 20px; }
.template-index .main-content {
padding-top: 0;
}
@media only screen and (min-width: 750px) {
.template-index .main-content {
padding-top: 0;
}
}
.section-header {
margin-bottom: 20px; }
@media only screen and (min-width: 750px) {
.section-header {
margin-bottom: 40px; } }
.section-header h2 {
font-size: 16px;
letter-spacing: 0.2em;
font-weight: bold;
font-family: "Optima";
/* font-family: Futura PT; */
font-style: normal; }
@media only screen and (min-width: 750px) {
.section-header h2 {
font-size: 20px;} }
.section-header p {
letter-spacing: 0.1em;
}
/*================ Typography ================*/
blockquote {
font-size: calc(((18) / (var(--font-size-base))) * 1em);
font-style: normal;
text-align: center;
padding: 0 30px;
margin: 0; }
.rte blockquote {
border-color: var(--color-border);
border-width: 1px 0;
border-style: solid;
padding: 30px 0;
margin-bottom: 27.5px; }
blockquote p + cite {
margin-top: 27.5px; }
blockquote cite {
display: block;
font-size: 0.85em;
font-weight: var(--font-weight-body); }
blockquote cite::before {
content: '\2014 \0020'; }
code,
pre {
font-family: Consolas, monospace;
font-size: 1em; }
pre {
overflow: auto; }
input,
textarea,
select,
.disclosure__toggle {
font-size: calc(var(--font-size-base) * 1px);
font-family: var(--font-stack-body);
font-style: var(--font-style-body);
font-weight: var(--font-weight-body);
color: var(--color-text);
line-height: 1.5; }
@media only screen and (max-width: 989px) {
input,
textarea,
select,
.disclosure__toggle,
button {
font-size: 16px; } }
/*================ Headings ================*/
h3, .h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin: 0 0 17.5px;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
line-height: 1.2;
overflow-wrap: break-word;
word-wrap: break-word; }
h3 a, .h3 a,
h4 a,
.h4 a,
h5 a,
.h5 a,
h6 a,
.h6 a {
color: inherit;
text-decoration: none;
font-weight: inherit; }
h3, .h3 {
/* font-size: calc(((var(--font-size-header)) / (var(--font-size-base))) * 1em); */
font-size: 18px;
text-transform: none;
letter-spacing: 0; }
@media only screen and (max-width: 749px) {
h3, .h3 {
font-size: 15px;
/*calc(((var(--font-h3-mobile)) / (var(--font-size-base))) * 1em);*/ } }
h4,
.h4 {
font-size: calc(((var(--font-h4-desktop)) / (var(--font-size-base))) * 1em); }
@media only screen and (max-width: 749px) {
h4,
.h4 {
font-size: calc(((var(--font-h4-mobile)) / (var(--font-size-base))) * 1em); } }
h5,
.h5 {
font-size: calc(((var(--font-h5-desktop)) / (var(--font-size-base))) * 1em); }
@media only screen and (max-width: 749px) {
h5,
.h5 {
font-size: calc(((var(--font-h5-mobile)) / (var(--font-size-base))) * 1em); } }
h6,
.h6 {
font-size: calc(((var(--font-h6-desktop)) / (var(--font-size-base))) * 1em); }
@media only screen and (max-width: 749px) {
h6,
.h6 {
font-size: calc(((var(--font-h6-mobile)) / (var(--font-size-base))) * 1em); } }
/*================ RTE headings ================*/
.rte {
color: var(--color-body-text);
margin-bottom: 35px; }
.rte:last-child {
margin-bottom: 0; }
.rte h1,
.rte h2,
.rte h3,
.rte .h3,
.rte h4,
.rte .h4,
.rte h5,
.rte .h5,
.rte h6,
.rte .h6 {
margin-top: 55px;
margin-bottom: 27.5px; }
.rte h1:first-child,
.rte h2:first-child,
.rte h3:first-child,
.rte .h3:first-child,
.rte h4:first-child,
.rte .h4:first-child,
.rte h5:first-child,
.rte .h5:first-child,
.rte h6:first-child,
.rte .h6:first-child {
margin-top: 0; }
.rte li {
margin-bottom: 4px;
list-style: inherit; }
.rte li:last-child {
margin-bottom: 0; }
.rte-setting {
margin-bottom: 19.44444px; }
.rte-setting:last-child {
margin-bottom: 0; }
/*================ Misc styles ================*/
.fine-print {
font-size: calc(((14) / (var(--font-size-base))) * 1em);
font-style: italic; }
.txt--minor {
font-size: 80%; }
.txt--emphasis {
font-style: italic; }
.address {
margin-bottom: 55px; }
/*================ Hero and slideshow headers ================*/
.mega-title,
.mega-subtitle {
color: var(--color-overlay-title-text); }
.hero .mega-title, .hero
.mega-subtitle {
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }
@media only screen and (min-width: 750px) {
.mega-title,
.mega-subtitle {
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); } }
.mega-title {
margin-bottom: 8px; }
.mega-title--large {
font-size: calc(((var(--font-size-header) + 8) / (var(--font-size-base))) * 1em); }
@media only screen and (min-width: 750px) {
.mega-title--large {
font-size: calc(((var(--font-mega-title-large-desktop)) / (var(--font-size-base))) * 1em); } }
@media only screen and (min-width: 750px) {
.mega-subtitle {
font-size: calc(((var(--font-size-base) + 4) / (var(--font-size-base))) * 1em);
margin: 0 auto; }
.text-center .mega-subtitle {
max-width: 75%; } }
.mega-subtitle p {
color: var(--color-overlay-title-text); }
.mega-subtitle a {
color: var(--color-overlay-title-text);
border-bottom: 1px solid currentColor; }
.mega-subtitle a:hover, .mega-subtitle a:focus {
color: var(--color-overlay-text-focus); }
.mega-subtitle--large {
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em);
font-weight: var(--font-weight-header); }
@media only screen and (min-width: 750px) {
.mega-subtitle--large {
font-size: calc(((var(--font-size-base) + 8) / (var(--font-size-base))) * 1em); } }
/*============================================================================
Animation Classes and Keyframes
==============================================================================*/
.is-transitioning {
display: block !important;
visibility: visible !important; }
/*================ #Icons ================*/
svg.icon:not(.icon--full-color) .icon-error__symbol,
symbol.icon:not(.icon--full-color) .icon-error__symbol {
fill: #ffffff; }
/*================ Payment Icons ================*/
.payment-icons {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default; }
@media only screen and (max-width: 749px) {
.payment-icons {
line-height: 40px; } }
.payment-icons .icon {
width: 38px;
height: 24px;
fill: inherit; }
/*================ Social Icons ================*/
.social-icons .icon {
width: 23px;
height: 23px; }
@media only screen and (min-width: 750px) {
.social-icons .icon {
width: 25px;
height: 25px; } }
.social-icons .icon.icon--wide {
width: 40px; }
/*================ Spinner Icon ================*/
.icon-spinner {
-moz-animation: spin 500ms infinite linear;
-o-animation: spin 500ms infinite linear;
-webkit-animation: spin 500ms infinite linear;
animation: spin 500ms infinite linear; }
/*================ Error Icons ================*/
.icon-error {
fill: #d20000;
width: calc(calc(var(--font-size-base) * 1px) - 2px);
height: calc(calc(var(--font-size-base) * 1px) - 2px);
margin-top: 0.1em;
flex-shrink: 0; }
/*================ #Lists ================*/
ul,
ol {
margin: 0;
padding: 0; }
ol {
list-style: decimal; }
/*================ #Rich Text Editor ================*/
.rte img {
height: auto; }
.rte table {
table-layout: fixed; }
.rte ul,
.rte ol {
margin: 0 0 17.5px 35px; }
.rte ul.list--inline,
.rte ol.list--inline {
margin-left: 0; }
.rte ul {
list-style: disc outside; }
.rte ul ul {
list-style: circle outside; }
.rte ul ul ul {
list-style: square outside; }
.rte a:not(.btn) {
/* border-bottom: 1px solid currentColor;*/
/* padding-bottom: 1px; */ }
.text-center.rte ul,
.text-center.rte ol,
.text-center .rte ul,
.text-center .rte ol {
margin-left: 0;
list-style-position: inside; }
.scrollable-wrapper {
max-width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch; }
/*================ #Links and Buttons ================*/
/*
a:not([disabled]):hover, a:focus {
color: var(--color-text-focus); }
*/
.password-powered-by a:not([disabled]):hover, .password-powered-by a:focus {
color: var(--color-text-focus);
border-bottom: 1px solid var(--color-text-focus); }
a[href^="tel"] {
color: inherit; }
/*================ Buttons ================*/
.btn, .shopify-payment-button .shopify-payment-button__button--unbranded {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: auto;
text-decoration: none;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
padding: 8px 15px;
background-color: var(--color-btn-primary);
color: var(--color-btn-primary-text);
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: normal;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
@media only screen and (min-width: 750px) {
.btn, .shopify-payment-button .shopify-payment-button__button--unbranded {
padding: 10px 18px; } }
.btn:not([disabled]):hover, .shopify-payment-button .shopify-payment-button__button--unbranded:not([disabled]):hover, .btn:focus, .shopify-payment-button .shopify-payment-button__button--unbranded:focus {
color: var(--color-btn-primary-text);
background-color: var(--color-btn-primary-focus); }
.btn .icon-arrow-right, .shopify-payment-button .shopify-payment-button__button--unbranded .icon-arrow-right,
.btn .icon-arrow-left,
.shopify-payment-button .shopify-payment-button__button--unbranded .icon-arrow-left {
height: 9px; }
.btn[disabled], .shopify-payment-button .shopify-payment-button__button--unbranded[disabled], .btn[aria-disabled], .shopify-payment-button .shopify-payment-button__button--unbranded[aria-disabled] {
cursor: default;
opacity: 0.5; }
.btn--secondary {
background-color: transparent;
color: var(--color-btn-primary);
border-color: var(--color-btn-primary); }
.btn--secondary:not([disabled]):hover, .btn--secondary:focus {
background-color: transparent;
color: var(--color-btn-primary-focus);
border-color: var(--color-btn-primary-focus); }
.btn--secondary-accent {
background-color: var(--color-body);
color: var(--color-btn-primary);
border-color: var(--color-btn-primary); }
.btn--secondary-accent:not([disabled]):hover, .btn--secondary-accent:focus {
background-color: var(--color-body);
color: var(--color-btn-primary-focus);
border-color: var(--color-btn-primary-focus); }
.btn--small {
padding: 8px 10px;
font-size: calc(((12) / (var(--font-size-base))) * 1em);
line-height: 1; }
.btn--tertiary {
background-color: transparent;
color: var(--color-small-button-text-border);
border-color: var(--color-small-button-text-border); }
.btn--tertiary:not([disabled]):hover, .btn--tertiary:focus {
background-color: transparent;
color: var(--color-small-button-text-border-focus);
border-color: var(--color-small-button-text-border-focus); }
/*================ Button variations ================*/
@media only screen and (max-width: 749px) {
.btn--small-wide {
padding-left: 50px;
padding-right: 50px; } }
.btn--link {
background-color: transparent;
border: 0;
margin: 0;
color: var(--color-text);
text-align: left; }
.btn--link:not([disabled]):hover, .btn--link:focus {
color: var(--color-text-focus);
background-color: transparent; }
.btn--link .icon {
vertical-align: middle; }
.btn--narrow {
padding-left: 15px;
padding-right: 15px;
margin: 0 10px; }
.btn--has-icon-after .icon {
margin-left: 10px; }
.btn--has-icon-before .icon {
margin-right: 10px; }
/*================ Force an input/button to look like a text link ================*/
.text-link {
display: inline;
border: 0 none;
background: none;
padding: 0;
margin: 0; }
.text-link--accent {
color: var(--color-btn-primary);
border-bottom: 1px solid currentColor;
padding-bottom: 1px; }
.text-link--accent:not([disabled]):hover, .text-link--accent:focus {
color: var(--color-btn-primary-focus); }
/*================ Return to collection/blog links ================*/
.return-link-wrapper {
margin-top: 82.5px;
margin-bottom: 0; }
@media only screen and (max-width: 749px) {
.return-link-wrapper {
margin-top: 55px; } }
.full-width-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2; }
.full-width-link-product {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
/*================ #Tables ================*/
table {
margin-bottom: 27.5px; }
table a {
border-bottom: 1px solid currentColor; }
th {
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-body--bold); }
th,
td {
text-align: left;
border: 1px solid var(--color-border);
padding: 10px 14px; }
tbody th,
tfoot th {
font-weight: normal; }
/*============================================================================
Responsive tables, defined with .responsive-table on table element.
==============================================================================*/
@media only screen and (max-width: 749px) {
.responsive-table thead {
display: none; }
.responsive-table th,
.responsive-table td {
float: left;
clear: left;
width: 100%;
text-align: right;
padding: 27.5px;
border: 0;
margin: 0; }
.responsive-table th::before,
.responsive-table td::before {
content: attr(data-label);
float: left;
text-align: center;
font-size: 12px;
padding-right: 10px;
font-weight: normal; }
.responsive-table__row + .responsive-table__row,
tfoot > .responsive-table__row:first-child {
position: relative;
margin-top: 10px;
padding-top: 55px; }
.responsive-table__row + .responsive-table__row::after,
tfoot > .responsive-table__row:first-child::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 27.5px;
right: 27.5px;
border-bottom: 1px solid var(--color-border); } }
/*================ #Images and Iframes ================*/
svg:not(:root) {
overflow: hidden; }
.video-wrapper {
position: relative;
overflow: hidden;
max-width: 100%;
padding-bottom: 56.25%;
height: 0;
height: auto; }
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
/*================ Adds a background color pulsating animation ================*/
[data-image-loading-animation] {
background-color: var(--global-color-image-loader-primary);
-moz-animation: image-loader 2s 400ms infinite;
-o-animation: image-loader 2s 400ms infinite;
-webkit-animation: image-loader 2s 400ms infinite;
animation: image-loader 2s 400ms infinite; }
.no-js [data-image-loading-animation] {
animation-name: none; }
/*================ Forms ================*/
form {
margin: 0; }
fieldset {
border: 1px solid var(--color-border-form);
margin: 0 0 55px;
padding: 27.5px; }
legend {
border: 0;
padding: 0; }
button {
cursor: pointer; }
input[type="submit"] {
cursor: pointer; }
label {
display: block;
margin-bottom: 5px; }
@media only screen and (max-width: 749px) {
label {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); } }
[type="radio"] + label,
[type="checkbox"] + label {
display: inline-block;
margin-bottom: 0; }
label[for] {
cursor: pointer; }
input,
textarea,
select,
.disclosure__toggle {
border: 1px solid var(--color-border-form);
background-color: var(--color-text-field);
color: var(--color-text-field-text);
max-width: 100%;
line-height: 1.2;
border-radius: 2px; }
input:focus,
textarea:focus,
select:focus,
.disclosure__toggle:focus {
border-color: var(--color-border-form-darker); }
input[disabled],
textarea[disabled],
select[disabled],
.disclosure__toggle[disabled] {
cursor: default;
background-color: #f4f4f4;
border-color: #f4f4f4; }
input.input--error::-webkit-input-placeholder,
textarea.input--error::-webkit-input-placeholder,
select.input--error::-webkit-input-placeholder,
.input--error.disclosure__toggle::-webkit-input-placeholder {
color: #d20000;
opacity: 0.5; }
input.input--error::-moz-placeholder,
textarea.input--error::-moz-placeholder,
select.input--error::-moz-placeholder,
.input--error.disclosure__toggle::-moz-placeholder {
color: #d20000;
opacity: 0.5; }
input.input--error:-ms-input-placeholder,
textarea.input--error:-ms-input-placeholder,
select.input--error:-ms-input-placeholder,
.input--error.disclosure__toggle:-ms-input-placeholder {
color: #d20000;
opacity: 0.5; }
input.input--error::-ms-input-placeholder,
textarea.input--error::-ms-input-placeholder,
select.input--error::-ms-input-placeholder,
.input--error.disclosure__toggle::-ms-input-placeholder {
color: #d20000;
opacity: 1; }
input.hidden-placeholder::-webkit-input-placeholder,
textarea.hidden-placeholder::-webkit-input-placeholder,
select.hidden-placeholder::-webkit-input-placeholder,
.hidden-placeholder.disclosure__toggle::-webkit-input-placeholder {
color: transparent; }
input.hidden-placeholder::-moz-placeholder,
textarea.hidden-placeholder::-moz-placeholder,
select.hidden-placeholder::-moz-placeholder,
.hidden-placeholder.disclosure__toggle::-moz-placeholder {
color: transparent; }
input.hidden-placeholder:-ms-input-placeholder,
textarea.hidden-placeholder:-ms-input-placeholder,
select.hidden-placeholder:-ms-input-placeholder,
.hidden-placeholder.disclosure__toggle:-ms-input-placeholder {
color: transparent; }
input.hidden-placeholder::-ms-input-placeholder,
textarea.hidden-placeholder::-ms-input-placeholder,
select.hidden-placeholder::-ms-input-placeholder,
.hidden-placeholder.disclosure__toggle::-ms-input-placeholder {
opacity: 1; }
.product-form input, .product-form
textarea, .product-form select, .product-form .disclosure__toggle {
min-height: 44px; }
textarea {
min-height: 100px; }
/*================ Error styles ================*/
input.input--error,
select.input--error,
.input--error.disclosure__toggle,
textarea.input--error {
border-color: #d20000;
background-color: #fff8f8;
color: #d20000;
margin-bottom: 11.66667px; }
.input-error-message {
display: flex;
line-height: 1.3;
color: var(--color-body-text);
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
margin-bottom: 11.66667px; }
@media only screen and (max-width: 749px) {
.input-error-message {
margin-bottom: 19.44444px; } }
.input-error-message .icon {
width: 1em;
height: 1em;
margin-right: calc((10 / (var(--font-size-base))) * 1em); }
select,
.disclosure__toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-position: right center;
background-image: var(--svg-select-icon);
background-repeat: no-repeat;
background-position: right 10px center;
line-height: 1.2;
padding-right: 28px;
text-indent: 0.01px;
text-overflow: '';
cursor: pointer;
padding-top: 8px;
padding-left: 15px;
padding-bottom: 8px; }
@media only screen and (min-width: 750px) {
select,
.disclosure__toggle {
padding-top: 10px;
padding-left: 18px;
padding-bottom: 10px; } }
.select-group {
position: relative;
z-index: 2; }
.select-group select, .select-group .disclosure__toggle {
background-image: none;
background-color: transparent; }
.select-group .icon {
height: calc(8em / 16);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: calc(8em / 16);
z-index: -1; }
.select-label {
font-size: calc(((12) / (var(--font-size-base))) * 1em);
text-transform: uppercase; }
optgroup {
font-weight: var(--font-weight-body--bold); }
option {
color: var(--color-text);
background-color: var(--color-body); }
select::-ms-expand, .disclosure__toggle::-ms-expand {
display: none; }
/*================ Form labels ================*/
.label--hidden {
position: absolute;
height: 0;
width: 0;
margin-bottom: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px); }
::-webkit-input-placeholder {
color: var(--color-text-field-text);
opacity: 0.6; }
::-moz-placeholder {
color: var(--color-text-field-text);
opacity: 0.6; }
:-ms-input-placeholder {
color: var(--color-text-field-text);
opacity: 0.6; }
::-ms-input-placeholder {
color: var(--color-text-field-text);
opacity: 1; }
/*================ Labels ================*/
.label--error {
color: #d20000; }
input,
textarea {
padding: 8px 15px; }
@media only screen and (min-width: 750px) {
input,
textarea {
padding: 10px 18px; } }
/*================ Vertical forms ================*/
.form-vertical input,
.form-vertical select,
.form-vertical .disclosure__toggle,
.form-vertical textarea {
display: block;
width: 100%;
margin-bottom: 19.44444px; }
.form-vertical input.input--error,
.form-vertical select.input--error,
.form-vertical .input--error.disclosure__toggle,
.form-vertical textarea.input--error {
margin-bottom: 11.66667px; }
.form-vertical [type="radio"],
.form-vertical [type="checkbox"] {
display: inline-block;
width: auto;
margin-right: 5px; }
.form-vertical [type="submit"],
.form-vertical .btn,
.form-vertical .shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .form-vertical .shopify-payment-button__button--unbranded {
display: inline-block;
width: auto; }
/*================ Single field forms ================*/
.form-single-field {
margin: 0 auto 55px;
max-width: 35rem; }
.form-single-field .input--error {
margin-bottom: 0; }
/*================ Form feedback messages ================*/
.note,
.form-message {
padding: 8px;
margin: 0 0 27.5px;
border: 1px solid var(--color-border-form); }
@media only screen and (min-width: 750px) {
.note,
.form-message {
padding: 10px; } }
.form-message--success {
border: 1px solid #1F873D;
background-color: #f8fff9;
color: #1F873D;
display: block;
width: 100%; }
.form-message--error {
color: #651818;
border: 1px solid #d20000;
background-color: #fff8f8;
padding: 1rem 1.3rem;
text-align: left;
width: 100%; }
.form-message--error li {
list-style-type: disc;
list-style-position: inside; }
.form-message--error .form-message__title {
font-size: 1.2em; }
.form-message--error .form-message__link, .form-message--error a {
display: inline-block;
text-decoration: underline;
text-decoration-skip-ink: auto;
color: #651818; }
.form-message--error .form-message__link:hover, .form-message--error .form-message__link:focus, .form-message--error a:hover, .form-message--error a:focus {
text-decoration: none;
color: #651818; }
/*================ Input Groups ================*/
.input-group {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center; }
.form-vertical .input-group {
margin-bottom: 55px; }
.input-group--nowrap {
flex-wrap: nowrap; }
.input-group--error {
margin-bottom: 11.66667px; }
.input-group__field,
.input-group__field input,
.input-group__btn .btn,
.input-group__btn .shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .input-group__btn .shopify-payment-button__button--unbranded {
min-height: 42px; }
@media only screen and (min-width: 750px) {
.input-group__field,
.input-group__field input,
.input-group__btn .btn,
.input-group__btn .shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .input-group__btn .shopify-payment-button__button--unbranded {
min-height: 46px; } }
.input-group__field {
-ms-flex-preferred-size: 15rem;
-webkit-flex-basis: 15rem;
-moz-flex-basis: 15rem;
flex-basis: 15rem;
flex-grow: 9999;
margin-bottom: 1rem;
border-radius: 2px 0 0 2px;
text-align: left; }
.input-group__field input {
width: 100%; }
.form-vertical .input-group__field {
margin: 0; }
.input-group__field--connected {
margin-bottom: 0; }
.input-group__field--connected input {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.input-group__btn {
flex-grow: 1; }
.input-group__btn .btn,
.input-group__btn .shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .input-group__btn .shopify-payment-button__button--unbranded {
width: 100%;
border-radius: 0 2px 2px 0; }
/*================ #Site Nav and Dropdowns ================*/
.site-nav--centered {
padding-bottom: 22px; }
/*================ Site Nav Links ================*/
.site-nav__link.site-nav--active-dropdown {
border: 1px solid var(--color-border);
border-bottom: 1px solid transparent;
z-index: 2; }
.site-nav__link:focus .site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label {
border-bottom-color: var(--color-text); }
@media only screen and (max-width: 989px) {
.site-nav__link--button {
font-size: calc(var(--font-size-base) * 1px); } }
.site-nav__link--button:focus, .site-nav__link--button:hover {
color: var(--color-text-focus); }
/*================ Dropdowns ================*/
.site-nav--has-dropdown {
position: relative; }
.site-nav--has-centered-dropdown {
position: static; }
.site-nav__dropdown {
display: none;
position: absolute;
padding: 11px 30px 11px 0;
margin: 0;
z-index: 7;
text-align: left;
border: 1px solid var(--color-border);
background: var(--color-bg);
left: -1px;
top: 41px; }
.site-nav__dropdown .site-nav__link {
padding: 4px 15px 5px; }
.site-nav--active-dropdown .site-nav__dropdown {
display: block; }
.site-nav__dropdown li {
display: block; }
.site-nav__dropdown--right:not(.site-nav__dropdown--centered) {
right: 0;
left: unset; }
.site-nav__dropdown--left:not(.site-nav__dropdown--centered) {
left: 0; }
.site-nav__dropdown--centered {
width: 100%;
padding: 0;
text-align: center; }
/*================ Child list ================*/
.site-nav__childlist {
display: inline-block;
background: var(--color-bg);
padding: 11px 17px;
text-align: left; }
.site-nav__childlist-grid {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: auto;
margin-bottom: -15px; }
.site-nav__childlist-item {
-webkit-flex: 0 1 auto;
-moz-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
margin-bottom: 15px; }
.site-nav__child-link--parent {
font-weight: var(--font-weight-body--bold);
margin: 4px 0; }
body.prevent-scrolling {
overflow: hidden;
position: fixed;
width: 100%; }
.page-width {
padding-left: 0px; /* 55px; */
padding-right: 0px; /* 55px; */ }
@media only screen and (max-width: 749px) {
.page-width {
padding-left: 0px; /* 22px */
padding-right: 0px; } }
.page-container {
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
position: relative;
overflow: hidden;
/*max-width: 900px;*/ /* max-width */
margin: 0 auto; }
@media only screen and (min-width: 960px) {
.page-container {
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
hr {
margin: 55px 0;
border: 0;
border-bottom: 1px solid var(--color-border); }
.hr--small {
padding: 10px 0;
margin: 0; }
.hr--invisible {
border-bottom: 0; }
.border-top {
border-top: 1px solid var(--color-border); }
.empty-page-content {
padding: 125px 55px; }
@media only screen and (max-width: 749px) {
.empty-page-content {
padding-left: 22px;
padding-right: 22px; } }
.grid--half-gutters {
margin-left: -15px; }
.grid--half-gutters > .grid__item {
padding-left: 15px; }
.grid--double-gutters {
margin-left: -60px; }
.grid--double-gutters > .grid__item {
padding-left: 60px; }
.grid--flush-bottom {
margin-bottom: -55px;
overflow: auto; }
.grid--flush-bottom > .grid__item {
margin-bottom: 55px; }
.grid--no-gutters {
margin-left: 0 !important;
}
@-webkit-keyframes spin {
0% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-moz-keyframes spin {
0% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes spin {
0% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-webkit-keyframes image-loader {
0% {
background-color: var(--global-color-image-loader-primary); }
50% {
background-color: var(--global-color-image-loader-primary); }
100% {
background-color: var(--global-color-image-loader-primary); } }
@-moz-keyframes image-loader {
0% {
background-color: var(--global-color-image-loader-primary); }
50% {
background-color: var(--global-color-image-loader-primary); }
100% {
background-color: var(--global-color-image-loader-primary); } }
@-ms-keyframes image-loader {
0% {
background-color: var(--global-color-image-loader-primary); }
50% {
background-color: var(--global-color-image-loader-primary); }
100% {
background-color: var(--global-color-image-loader-primary); } }
@keyframes image-loader {
0% {
background-color: var(--global-color-image-loader-primary); }
50% {
background-color: var(--global-color-image-loader-primary); }
100% {
background-color: var(--global-color-image-loader-primary); } }
.drawer {
display: none;
position: fixed;
-webkit-overflow-scrolling: touch;
z-index: 9; }
.js-drawer-open-top .drawer {
display: block; }
.drawer--top {
width: 100%;
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%); }
.js-drawer-open-top .drawer--top {
-ms-transform: translateY(0%);
-webkit-transform: translateY(0%);
transform: translateY(0%);
display: flex;
max-height: 100vh; }
.drawer-page-content::after {
opacity: 0;
visibility: hidden;
pointer-events: none;
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 8;
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); }
.js-drawer-open .drawer-page-content::after {
opacity: 1;
visibility: visible;
pointer-events: auto; }
.drawer__title,
.drawer__close {
display: table-cell;
vertical-align: middle; }
.drawer__close-button {
background: none;
border: 0 none;
position: relative;
right: -15px;
height: 100%;
width: 60px;
padding: 0 20px;
color: inherit;
font-size: calc(((18) / (var(--font-size-base))) * 1em); }
.drawer__close-button:active, .drawer__close-button:focus {
background-color: rgba(0, 0, 0, 0.6); }
.grid--view-items {
overflow: auto;
margin-bottom: -35px; }
.grid-view-item-wrapper {
margin: 0 auto 35px; }
.grid-view-item {
/*margin: 0 auto 35px;*/ }
.custom__item .grid-view-item {
margin-bottom: 0; }
.grid-view-item__title {
margin-bottom: 0;
color: var(--color-text); }
.grid-view-item__meta {
margin-top: 8px; }
@media only screen and (max-width: 749px) {
.grid-view-item__title,
.grid-view-item__meta {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); } }
.grid-view-item__link {
display: block; }
.grid-view-item__vendor {
margin-top: 4px;
color: var(--color-body-text);
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
text-transform: uppercase; }
@media only screen and (max-width: 749px) {
.grid-view-item__vendor {
font-size: calc(((var(--font-size-base) - 3) / (var(--font-size-base))) * 1em); } }
.grid-view-item__image-wrapper {
margin: 0 auto 8px;
position: relative;
width: 100%;
overflow: hidden; }
.grid-view-item__image {
display: block;
margin: 0 auto;
width: 100%; }
.grid-view-item__image-wrapper .grid-view-item__image {
position: absolute;
top: 0; }
.grid-view-item__image.lazyload {
opacity: 0; }
.list-view-item {
margin-bottom: 22px; }
.list-view-item:last-child {
margin-bottom: 0; }
@media only screen and (min-width: 750px) {
.list-view-item {
border-bottom: 1px solid var(--color-border);
padding-bottom: 22px; }
.list-view-item:last-child {
padding-bottom: 0;
border-bottom: 0; } }
.list-view-item__link {
display: table;
table-layout: fixed;
width: 100%; }
.list-view-item__image {
max-height: 95px; }
.list-view-item__image-column {
display: table-cell;
vertical-align: middle;
width: 130px;
min-height: 44px; }
@media only screen and (max-width: 749px) {
.list-view-item__image-column {
width: 85px; } }
.list-view-item__image-wrapper {
position: relative;
margin-right: 35px; }
@media only screen and (max-width: 749px) {
.list-view-item__image-wrapper {
margin-right: 17.5px; } }
.list-view-item__title-column {
display: table-cell;
vertical-align: middle; }
.list-view-item__title {
color: var(--color-text);
min-width: 100px;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em); }
@media only screen and (max-width: 749px) {
.list-view-item__title {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); } }
.list-view-item__vendor {
color: var(--color-body-text);
font-size: 0.9em;
font-weight: var(--font-weight-body);
text-transform: uppercase;
letter-spacing: 1px; }
.list-view-item__price-column {
display: table-cell;
text-align: right;
vertical-align: middle;
width: 20%;
font-size: calc(((var(--font-size-base) + 1) / (var(--font-size-base))) * 1em); }
@media only screen and (max-width: 749px) {
.list-view-item__price-column {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); } }
.list-view-item__price-column .price {
align-items: flex-end; }
.list-view-item__price-column .price dd {
margin: 0 0 0 0.5em; }
.list-view-item__price-column .price__regular,
.list-view-item__price-column .price__sale {
flex-basis: 100%;
justify-content: flex-end;
margin-right: 0; }
/*============================================================================
Slick slider overrides
==============================================================================*/
.slick-dotted.slick-slider {
margin-bottom: 0; }
/*================ Slick dots and prev/next pagination ================*/
.slideshow__arrows .slick-dots {
margin: 0 0.75rem; }
.slideshow__arrows .slick-dots li {
margin: 0;
vertical-align: middle;
width: 10px;
height: 10px;
margin-left: 6px; }
.slideshow__arrows .slick-dots li:first-of-type {
margin-left: 0; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slick-dots li {
width: 12px;
height: 12px;
margin-left: 8px; } }
.slideshow__arrows .slick-dots li button, .slideshow__arrows .slick-dots li a {
position: relative;
padding: 0;
width: 10px;
height: 10px; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slick-dots li button, .slideshow__arrows .slick-dots li a {
width: 12px;
height: 12px; } }
.slideshow__arrows .slick-dots li button::before,
.slideshow__arrows .slick-dots li a::before {
text-indent: -9999px;
background-color: transparent;
border-radius: 100%;
background-color: currentColor;
width: 10px;
height: 10px;
opacity: 0.4;
transition: all 0.2s; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slick-dots li button::before,
.slideshow__arrows .slick-dots li a::before {
width: 12px;
height: 12px; } }
.slideshow__arrows .slick-dots li.slick-active button::before,
.slideshow__arrows .slick-dots li.slick-active a::before,
.slideshow__arrows .slick-dots li.slick-active-mobile button::before,
.slideshow__arrows .slick-dots li.slick-active-mobile a::before {
opacity: 1; }
.slideshow__arrows .slick-dots li button:active::before,
.slideshow__arrows .slick-dots li .slick-active a::before,
.slideshow__arrows .slick-dots li .slick-active-mobile a::before {
opacity: 0.7; }
/*================ Index sections ================*/
.index-section {
padding-top: 0px; /* 35px */
padding-bottom: 0px; } /* 35px */
@media only screen and (min-width: 750px) {
.index-section {
padding-top: 0px; /* 55px */
padding-bottom: 0px; } } /* 55px */
.index-section:first-child {
padding-top: 0;
border-top: 0; }
.index-section:last-child {
padding-bottom: 0; }
.index-section--flush + .index-section--flush {
margin-top: -70px; }
@media only screen and (min-width: 750px) {
[class*="index-section--flush"] + [class*="index-section--flush"] {
margin-top: -110px; } }
.index-section--flush:first-child {
margin-top: -35px; }
@media only screen and (min-width: 750px) {
[class*="index-section--flush"]:first-child {
margin-top: -55px; } }
.index-section--flush:last-child {
margin-bottom: -35px; }
@media only screen and (min-width: 750px) {
[class*="index-section--flush"]:last-child {
margin-bottom: -55px; } }
@media only screen and (max-width: 749px) {
.index-section--featured-product:first-child {
margin-top: -12px; } }
@media only screen and (max-width: 749px) {
.index-section--slideshow + .index-section--flush {
margin-top: 0.4rem; } }
.placeholder-svg {
display: block;
fill: var(--color-blankstate);
background-color: var(--color-blankstate-background);
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
border: 1px solid var(--color-blankstate-border); }
.placeholder-noblocks {
padding: 40px;
text-align: center; }
.placeholder-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.placeholder-background .icon {
border: 0; }
.image-bar__content .placeholder-svg {
position: absolute;
top: 0;
left: 0; }
.plyr.plyr--full-ui.plyr--video {
color: var(--color-text);
background-color: transparent;
/* stylelint-disable-next-line */
/* stylelint-disable-next-line */
/* stylelint-disable-next-line */ }
.plyr.plyr--full-ui.plyr--video .plyr__video-wrapper {
background-color: transparent; }
.plyr.plyr--full-ui.plyr--video .plyr__poster {
background-color: var(--color-video-bg); }
.plyr.plyr--full-ui.plyr--video:fullscreen .plyr__video-wrapper .plyr.plyr--full-ui.plyr--video:fullscreen .plyr__poster {
background-color: #000; }
.plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__poster {
background-color: #000; }
.plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__poster {
background-color: #000; }
.plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__poster {
background-color: #000; }
.plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__poster {
background-color: #000; }
.plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid {
background-color: var(--color-bg);
border-color: rgba(var(--color-text-rgb), 0.05); }
.plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid.plyr__tab-focus, .plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid:hover {
color: rgba(var(--color-text-rgb), 0.55); }
.plyr.plyr--full-ui.plyr--video .plyr__controls {
background-color: var(--color-bg);
border-color: rgba(var(--color-text-rgb), 0.05); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-moz-range-thumb {
box-shadow: 2px 0 0 0 var(--color-bg); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-ms-thumb {
box-shadow: 2px 0 0 0 var(--color-bg); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-webkit-slider-thumb {
box-shadow: 2px 0 0 0 var(--color-bg); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-webkit-slider-runnable-track {
background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(var(--color-text-rgb), 0.6) var(--value, 0)); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-moz-range-track {
background-color: rgba(var(--color-text-rgb), 0.6); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-ms-fill-upper {
background-color: rgba(var(--color-text-rgb), 0.6); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range'].plyr__tab-focus::-webkit-slider-runnable-track {
box-shadow: 0 0 0 4px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range'].plyr__tab-focus::-moz-range-track {
box-shadow: 0 0 0 4px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range'].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 4px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']:active::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']:active::-ms-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']:active::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip {
background-color: var(--color-text);
color: var(--color-bg); }
.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip::before {
border-top-color: var(--color-text); }
.plyr.plyr--full-ui.plyr--video.plyr--loading .plyr__progress__buffer {
background-image: linear-gradient(-45deg, rgba(var(--color-text-rgb), 0.6) 25%, transparent 25%, transparent 50%, rgba(var(--color-text-rgb), 0.6) 50%, rgba(var(--color-text-rgb), 0.6) 75%, transparent 75%, transparent); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'] {
color: var(--color-bg); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-moz-range-thumb {
box-shadow: 2px 0 0 0 var(--color-text); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-ms-thumb {
box-shadow: 2px 0 0 0 var(--color-text); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-webkit-slider-thumb {
box-shadow: 2px 0 0 0 var(--color-text); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-webkit-slider-runnable-track {
background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(var(--color-bg-rgb), 0.6) var(--value, 0)); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-moz-range-track, .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-ms-fill-upper {
background-color: rgba(var(--color-bg-rgb), 0.6); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'].plyr__tab-focus::-webkit-slider-runnable-track {
box-shadow: 0 0 0 4px rgba(var(--color-bg-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'].plyr__tab-focus::-moz-range-track {
box-shadow: 0 0 0 4px rgba(var(--color-bg-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 4px rgba(var(--color-bg-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']:active::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-bg-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']:active::-ms-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-bg-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']:active::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-bg-rgb), 0.25); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
background: var(--color-bg);
border-color: rgba(var(--color-text-rgb), 0.05); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
color: var(--color-text); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover {
color: rgba(var(--color-text-rgb), 0.55); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus {
color: rgba(var(--color-text-rgb), 0.55);
background: rgba(var(--color-text-rgb), 0.05); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after {
border-color: rgba(var(--color-text-rgb), 0.05); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
background: var(--color-bg);
border-color: rgba(var(--color-text-rgb), 0.05); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus {
color: rgba(var(--color-text-rgb), 0.55); }
/*================ TEMPLATES ================*/
/*============= Templates | Password =============*/
.password-page {
display: table;
height: 100%;
width: 100%;
color: var(--color-body-text);
background-color: var(--color-body);
background-size: cover; }
.password-form-message {
max-width: 500px;
margin-left: auto;
margin-right: auto; }
.password-header {
height: 85px;
display: table-row; }
.password-header__inner {
display: table-cell;
vertical-align: middle; }
.password-login {
padding: 0 30px;
text-align: right; }
.password-logo .logo {
color: var(--color-text);
font-weight: var(--font-weight-header);
max-width: 100%; }
.password-content {
text-align: center; }
.password-content--rte {
margin-bottom: 35px; }
.password-content__title {
display: block;
margin-bottom: 82.5px; }
.password-main {
display: table-row;
width: 100%;
height: 100%;
margin: 0 auto; }
.password-main__inner {
display: table-cell;
vertical-align: middle;
padding: 27.5px 55px; }
.password-message {
max-width: 500px;
margin: 82.5px auto 27.5px; }
.password__form-heading {
margin-bottom: 55px; }
.password-powered-by {
margin-top: 82.5px; }
.password-social-sharing {
margin-top: 82.5px; }
.product-single {
overflow-anchor: none; }
.product-single__title {
margin-bottom: 0.5rem; }
.product__price,
.featured-product__price {
font-size: 1.25em; }
.product__policies {
margin: 0.4rem 0 1rem 0;
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); }
/*================ Add to cart form ================*/
.product-form {
width: auto;
padding-top: 2rem; }
.product-form__controls-group {
display: flex;
flex-wrap: wrap; }
.product-form__controls-group--submit {
margin-top: 0px; }
.product-form__controls-group ~ .product-form__controls-group--submit {
margin-top: 15px; }
.product-form__item {
flex-grow: 0;
flex-basis: 100%;
margin-bottom: 10px;
padding: 0; }
@media only screen and (min-width: 990px) {
.product-form__item {
flex-basis: 50%;
padding: 0 5px; }
.product-single--large-image .product-form__item {
flex-basis: 100%; } }
.product-form__item label {
display: block; }
.product-form__item--submit {
-webkit-flex: 1 1 300px;
-moz-flex: 1 1 300px;
-ms-flex: 1 1 300px;
flex: 1 1 300px; }
.product-form__item--no-variants {
max-width: 400px; }
.product-form__item--payment-button {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%; }
@media only screen and (min-width: 990px) {
.product-single--small-media .product-form__item--payment-button,
.product-single--full-media .product-form__item--payment-button {
display: inline-flex;
-ms-flex-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start; } }
.product-form__item--payment-button.product-form__item--no-variants {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: stretch;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch; }
.product-form--variant-sold-out .shopify-payment-button {
display: none; }
.product-form--payment-button-no-variants {
max-width: 25rem; }
.product-form__variants {
display: none; }
.no-js .product-form__variants {
display: block; }
.product-form__input {
display: block;
width: 100%; }
.product-form__input.input--error {
margin-bottom: 0; }
.product-form__input--quantity {
max-width: 5rem; }
.product-form__error-message-wrapper {
display: flex;
flex-basis: 100%;
padding: 0.5rem 0;
margin: 0 calc((5 / (var(--font-size-base))) * 1em) 20px; }
.product-form__controls-group ~ .product-form__error-message-wrapper {
margin-bottom: 0; }
.product-form__error-message-wrapper--has-payment-button {
padding: 0.5rem 0; }
.product-form__error-message-wrapper--hidden {
display: none; }
.product-form__error-message {
margin-left: 0.5rem;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
line-height: 1.2;
color: var(--color-body-text); }
.product-form__cart-submit, .shopify-payment-button .shopify-payment-button__button--unbranded {
display: block;
width: 100%;
line-height: 1.4;
padding-left: 5px;
padding-right: 5px;
white-space: normal;
margin-top: 0;
margin-bottom: 10px;
min-height: 44px; }
.product-single--small-media .product-form__cart-submit, .product-single--small-media .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-payment-button .product-single--small-media .shopify-payment-button__button--unbranded,
.product-single--full-media .product-form__cart-submit,
.product-single--full-media .shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .product-single--full-media .shopify-payment-button__button--unbranded {
-webkit-flex: 50%;
-moz-flex: 50%;
-ms-flex: 50%;
flex: 50%;
margin-right: 10px; }
.product-single--small-media .shopify-payment-button,
.product-single--full-media .shopify-payment-button {
-webkit-flex: 50%;
-moz-flex: 50%;
-ms-flex: 50%;
flex: 50%; }
.shopify-payment-button .shopify-payment-button__button--unbranded:hover {
background-color: var(--color-btn-primary-focus) !important; }
.shopify-payment-button .shopify-payment-button__button--branded {
border-radius: 2px;
overflow: hidden; }
.shopify-payment-button .shopify-payment-button__more-options {
margin: 16px 0 10px;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
text-decoration: underline; }
.shopify-payment-button .shopify-payment-button__more-options:hover, .shopify-payment-button .shopify-payment-button__more-options:focus {
opacity: 0.6; }
@media only screen and (min-width: 750px) {
.product-form__cart-submit--small {
max-width: 300px; } }
.product-single__description {
margin-top: 30px; }
.product__quantity-error .icon {
margin-right: 1rem; }
/*================ Product Images ================*/
.product-single__thumbnail {
display: block;
margin: -2px 0 8px;
min-height: 44px;
position: relative;
border: 2px solid transparent; }
.product-single__thumbnail:not([disabled]):not(.active-thumb):hover {
opacity: 0.8; }
.product-single__thumbnail.active-thumb {
border-color: var(--color-text); }
.product-single__thumbnail-image {
max-width: 100%;
display: block;
margin: 0 auto;
padding: 2px; }
.product-single__thumbnail-badge {
width: 22px;
height: 22px;
position: absolute;
right: 6px;
top: 6px;
pointer-events: none; }
@media only screen and (min-width: 750px) {
.product-single__thumbnail-badge {
width: 26px;
height: 26px; } }
.product-single__thumbnail-badge .icon {
fill: var(--color-bg);
width: 100%;
height: 100%;
vertical-align: baseline; }
.product-single__thumbnail-badge .icon-3d-badge-full-color-outline,
.product-single__thumbnail-badge .icon-video-badge-full-color-outline {
stroke: rgba(var(--color-text-rgb), 0.05); }
.product-single__thumbnail-badge .icon-3d-badge-full-color-element,
.product-single__thumbnail-badge .icon-video-badge-full-color-element {
fill: var(--color-text); }
.product-featured-media {
display: block;
margin: 0 auto;
position: absolute;
top: 4px;
left: 4px;
width: calc(100% - 8px); }
.no-js .product-featured-media {
position: relative; }
.zoomImg {
background-color: var(--color-body); }
@media only screen and (max-width: 749px) {
.product-single__media-group {
margin-bottom: 30px; }
.product-single__media--has-thumbnails {
margin-bottom: 30px; } }
.product-single__media-group--full {
margin-bottom: 30px; }
.product-single__media-wrapper {
margin: 0 auto;
width: 100%; }
.product-single__media {
margin: 0 auto;
min-height: 1px;
width: 100%;
height: 100%;
position: relative; }
.product-single__media iframe,
.product-single__media model-viewer,
.product-single__media .shopify-model-viewer-ui,
.product-single__media img,
.product-single__media > video,
.product-single__media .plyr,
.product-single__media .media-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%; }
.product-single__media iframe,
.product-single__media .media-video,
.product-single__media model-viewer,
.product-single__media .shopify-model-viewer-ui,
.product-single__media .media-item,
.product-single__media .plyr,
.product-single__media .plyr__video-wrapper {
height: 100%; }
.product-single__media--video {
background-color: var(--color-video-bg); }
.product-single__view-in-space {
background-color: rgba(var(--color-text-rgb), 0.08);
border: none;
width: 100%;
min-height: 44px;
padding-top: 10px;
padding-bottom: 10px;
display: block;
font-size: calc(((var(--font-size-base)) / (var(--font-size-base))) * 1em);
color: var(--color-text); }
.product-single__view-in-space[data-shopify-xr-hidden] {
visibility: hidden; }
@media only screen and (min-width: 750px) {
.product-single__view-in-space[data-shopify-xr-hidden] {
display: none; } }
.product-single__view-in-space:hover .product-single__view-in-space-text, .product-single__view-in-space:focus .product-single__view-in-space-text {
border-bottom-color: var(--color-text); }
.product-single__view-in-space svg.icon {
height: calc((25 / (var(--font-size-base))) * 1em);
width: calc((25 / (var(--font-size-base))) * 1em);
margin-top: -3px;
margin-right: 2.43px;
fill: transparent; }
.product-single__view-in-space svg.icon .icon-3d-badge-full-color-outline {
stroke: none; }
.product-single__view-in-space svg.icon .icon-3d-badge-full-color-element {
fill: var(--color-text);
opacity: 1; }
.product-single__view-in-space-text {
border-bottom: 1px solid transparent; }
@media only screen and (max-width: 749px) {
.template-product .main-content {
padding-top: 0px; }
.product-single__media-group {
position: relative; }
.thumbnails-wrapper {
position: relative;
top: 10px;
text-align: center;
margin: 0 2px 30px 2px; }
.thumbnails-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-top: 10px;
padding-bottom: 10px; }
.thumbnails-slider__btn .icon {
height: 14px;
width: 14px; }
.thumbnails-slider__prev {
left: -15px; }
.thumbnails-slider__next {
right: -15px; }
.product-single__thumbnail {
margin: 0 auto; } }
.product-single__thumbnails {
display: flex;
flex-wrap: wrap;
margin-top: 15px;
margin-left: -9px;
margin-right: -9px; }
@media only screen and (max-width: 749px) {
.product-single__thumbnails {
margin-top: 0;
justify-content: center; }
.slider-active .product-single__thumbnails {
display: block;
margin: 0 auto;
max-width: 75%;
overflow: hidden; } }
@media only screen and (max-width: 749px) {
.product-single__thumbnails-slider-track {
position: relative;
left: 0;
top: 0;
display: block; }
.product-single__thumbnails-slider-track:before, .product-single__thumbnails-slider-track:after {
content: "";
display: table; }
.product-single__thumbnails-slider-track:after {
clear: both; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-slider-track {
display: flex;
flex-wrap: wrap; } }
.product-single__thumbnails-item {
flex: 0 0 25%;
padding-left: 5px; }
@media only screen and (max-width: 749px) {
.product-single__thumbnails-item.slick-slide {
padding-bottom: 10px;
padding-left: 2.5px;
padding-right: 2.5px;
vertical-align: middle; }
.thumbnails-slider--active .product-single__thumbnails-item.slick-slide {
padding-top: 5px;
padding-bottom: 5px; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-item {
padding-left: 5px;
padding-right: 5px; } }
@media only screen and (max-width: 749px) {
.product-single__thumbnails-item-slide {
display: block;
float: left;
height: 100%;
min-height: 1px;
padding: 5px 2.5px; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-item--small {
flex: 0 0 50%; } }
@media only screen and (min-width: 990px) {
.product-single__thumbnails-item--small {
flex: 0 0 33.33333%; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-item--medium {
flex: 0 0 33.33333%; } }
@media only screen and (min-width: 990px) {
.product-single__thumbnails-item--medium {
flex: 0 0 25%; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-item--large {
flex: 0 0 25%; } }
@media only screen and (min-width: 990px) {
.product-single__thumbnails-item--large {
flex: 0 0 20%; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-item--full {
flex: 0 0 20%; } }
@media only screen and (min-width: 990px) {
.product-single__thumbnails-item--full {
flex: 0 0 12.5%; } }
/*================ Template | Collections ================*/
.collection-hero {
position: relative;
overflow: hidden;
margin: 22px auto;
max-width: 130px;
}
@media only screen and (min-width: 750px) {
.collection-hero {
max-width: 190px;
margin-top: 35px;
margin-bottom: 35px; } }
.collection-description {
margin-bottom: 22px;
margin-top: 22px; }
@media only screen and (min-width: 750px) {
.collection-description {
margin-bottom: 35px;
margin-top: 35px; } }
.collection-hero__image {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
height: 300px;
opacity: 1; }
@media only screen and (max-width: 749px) {
.collection-hero__image {
height: 180px; } }
.collection-hero__title-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay); }
.collection-hero__title {
position: absolute;
color: var(--color-overlay-title-text);
width: 100%;
text-align: center;
left: 0;
right: 0;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
@media only screen and (min-width: 750px) {
.collection-hero__title {
font-size: calc(((var(--font-size-header) + 6) / (var(--font-size-base))) * 1em); } }
.template-blog .social-sharing {
margin-bottom: 17.5px; }
.blog-list-view .pagination {
padding-top: 0; }
.blog-filter {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center; }
.blog-filter .icon-chevron-down {
fill: var(--color-text-field-text);
width: calc(10em / 16);
height: calc(10em / 16);
right: 0.7rem; }
.blog-filter__label {
margin: 0 1rem 0 0; }
.cart-header {
margin-bottom: 0.7rem;
text-align: center; }
@media only screen and (min-width: 750px) {
.cart-header {
margin-bottom: 1.7rem; } }
.cart-header__title {
margin-bottom: 0.5rem; }
@media only screen and (min-width: 750px) {
.cart-header__title {
margin-bottom: 1rem; } }
/*================ Cart page ================*/
.cart {
color: var(--color-body-text); }
.cart th,
.cart td {
border: 0; }
.cart td {
padding-top: 22px;
padding-bottom: 22px; }
@media only screen and (min-width: 750px) {
.cart td {
padding-left: 22px;
padding-right: 22px; } }
.cart th {
font-family: var(--font-stack-body);
font-weight: var(--font-weight-body);
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
text-transform: uppercase;
padding: 27.5px 22px; }
@media only screen and (max-width: 749px) {
.cart td:nth-child(3),
.cart th:nth-child(2) {
padding-left: 0;
padding-right: 0; } }
.cart td:first-child,
.cart th:first-child {
padding-left: 0; }
.cart td:first-child.cart__removed-product,
.cart th:first-child.cart__removed-product {
padding: 1rem 0 1.2rem 0.5rem; }
.cart td:last-child,
.cart th:last-child {
padding-right: 0; }
.cart dd {
margin-left: 0; }
.cart__meta {
width: 70%; }
@media only screen and (min-width: 750px) {
.cart__meta {
width: 60%; } }
@media only screen and (min-width: 990px) {
.cart__meta {
width: 65%; } }
.cart__product-information {
display: flex; }
.cart__image-wrapper {
padding-right: 12px;
flex: 5rem 0 0; }
@media only screen and (min-width: 750px) {
.cart__image-wrapper {
padding-right: 2.5rem;
flex: 8rem 0 0; } }
@media only screen and (min-width: 990px) {
.cart__image-wrapper {
padding-right: 3rem;
flex: 9rem 0 0; } }
.product-details {
padding: calc((5 / (var(--font-size-base))) * 1em) 0 0;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.product-details.hide + .cart__remove {
margin-top: 0; }
.product-details__item {
margin-bottom: 0.15em; }
.product-details__item--variant-option:not(.hide) + .product-details__item--property {
margin-top: 0.8rem; }
.product-details__item-label {
font-weight: var(--font-weight-body--bold); }
.cart__qty {
margin-top: calc((15 / (var(--font-size-base))) * 1em); }
@media only screen and (min-width: 750px) {
.cart__qty {
margin-top: 0; } }
.cart__qty-label {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
.cart__qty-input {
text-align: center;
width: 60px;
padding-left: calc((5 / (var(--font-size-base))) * 1em);
padding-right: calc((5 / (var(--font-size-base))) * 1em); }
.cart__qty-input::-webkit-outer-spin-button,
.cart__qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0; }
.cart__qty-error-message-wrapper,
.cart__error-message-wrapper {
line-height: 1.2; }
.cart__qty-error-message-wrapper .icon-error,
.cart__error-message-wrapper .icon-error {
margin-top: 0; }
.cart__qty-error-message-wrapper--desktop {
display: none; }
@media only screen and (min-width: 750px) {
.cart__qty-error-message-wrapper--desktop {
display: block; } }
.cart__qty-error-message-wrapper--mobile {
display: block; }
@media only screen and (min-width: 750px) {
.cart__qty-error-message-wrapper--mobile {
display: none; } }
.cart__qty-error-message,
.cart__error-message {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
color: var(--color-body-text);
vertical-align: middle; }
.cart__error-message-wrapper {
margin-top: 1rem; }
@media only screen and (min-width: 750px) {
.cart__error-message-wrapper {
margin-top: 0.8rem; } }
.cart__row {
border-bottom: 1px solid var(--color-border); }
.cart__row p {
margin-bottom: 0; }
.cart__row p + p {
margin-top: 10px; }
.cart__row td {
vertical-align: top; }
@media only screen and (min-width: 750px) {
.cart__row td {
vertical-align: middle; } }
.cart__row--heading {
color: var(--color-text);
letter-spacing: 0.3px; }
.cart__removed-product-details {
font-weight: var(--font-weight-body--bold); }
.cart-subtotal {
margin-bottom: 10px; }
.cart-subtotal__title {
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em); }
.cart-subtotal__price {
padding-left: 27.5px; }
@media only screen and (min-width: 750px) {
.cart-subtotal__price {
padding-left: 55px;
min-width: 150px;
display: inline-block; } }
.cart__footer {
padding-top: 17.5px; }
.cart__buttons-container {
display: flex;
flex-direction: column;
max-width: 20rem;
margin: 25px auto 0; }
@media only screen and (min-width: 750px) {
.cart__buttons-container {
display: block;
max-width: none; } }
.cart__submit-controls {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
@media only screen and (min-width: 750px) {
.cart__submit-controls {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end; } }
.cart__submit {
margin-bottom: 0;
min-height: 44px;
width: 100%; }
.cart__submit + .cart__submit {
margin-top: 10px;
margin-left: 0; }
@media only screen and (min-width: 750px) {
.cart__submit {
min-height: auto;
width: auto; }
.cart__submit + .cart__submit {
margin-top: 0;
margin-left: 10px; } }
.cart__shipping {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
padding: 0;
margin-bottom: 6px; }
.cart__discount-count {
width: 320px;
height: 21px;
background-color: #F2F2F2;
text-align: center;
display: inline-block;}
.cart__discount-count p {
background-color: #F2F2F2;
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 500;
font-size: 12px;
transform-origin: center center;
line-height: 21px;
letter-spacing: 0.05em;
color: #898989 !important;}
.cart__discount-count p .remain-price{
font-weight: 500;
color: #000000; }
.cart__discount-count p .free-shipping{
font-weight: 500;
color: #FD2020; }
.cart-note__label,
.cart-note__input {
display: block; }
@media only screen and (max-width: 749px) {
.cart-note__label,
.cart-note__input {
margin: 0 auto; } }
.cart-note__label {
margin-bottom: 15px; }
.cart-note__input {
min-height: 50px;
width: 100%; }
@media only screen and (max-width: 749px) {
.cart-note__input {
margin-bottom: 40px; } }
.cart__product-title {
border-bottom: none;
color: var(--color-body-text); }
.cart__product-title:not([disabled]):hover, .cart__product-title:focus {
color: var(--color-body-text);
border-bottom: 1px solid currentColor; }
.cart__image {
max-height: 95px;
display: block;
margin: 0 auto; }
.cart__remove {
margin-top: calc((8 / (var(--font-size-base))) * 1em); }
.cart__price {
text-align: right;
padding-right: 0;
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em);
width: 50%; }
.cart__price dl {
margin: 0; }
@media only screen and (min-width: 750px) {
.cart__price {
width: 25%; } }
.cart__quantity-td {
width: 20%; }
.cart__final-price {
width: 15%; }
@media only screen and (max-width: 749px) {
.cart-message {
padding-top: 20px; }
.cart__qty-label {
position: inherit !important;
overflow: auto;
clip: auto;
width: auto;
height: auto;
margin: 0;
display: inline-block;
vertical-align: middle;
font-size: calc(((13) / (var(--font-size-base))) * 1em);
margin-right: 5px; } }
.cart--no-cookies .cart__continue-btn {
display: none; }
.cart--no-cookies .cart--empty-message {
display: none; }
.cookie-message {
display: none;
padding-bottom: 25px; }
.cart--no-cookies .cookie-message {
display: block; }
.additional-checkout-buttons {
margin-top: 1rem; }
.additional-checkout-buttons input[type="image"] {
padding: 0;
border: 0;
background: transparent; }
[data-shopify-buttoncontainer] {
justify-content: flex-end; }
.myaccount {
/*display: flex;
flex-wrap: wrap;*/ }
@media only screen and (min-width: 990px) {
.myaccount__order-history {
-webkit-flex: 1 0 66.66667%;
-moz-flex: 1 0 66.66667%;
-ms-flex: 1 0 66.66667%;
flex: 1 0 66.66667%; } }
@media only screen and (min-width: 990px) {
.myaccount__account-details {
-webkit-flex: 1 0 33.33333%;
-moz-flex: 1 0 33.33333%;
-ms-flex: 1 0 33.33333%;
flex: 1 0 33.33333%; } }
.order-table {
border: 1px solid var(--color-border); }
.order-table a {
border-bottom: 1px solid currentColor; }
.order-table th, .order-table td {
border: 0; }
.order-table tbody th,
.order-table tfoot th {
font-weight: normal;
text-transform: none;
letter-spacing: 0; }
.order-table tbody tr + tr {
border-top: 1px solid var(--color-border); }
.order-table thead {
border-bottom: 1px solid var(--color-body-text); }
.order-table tfoot {
border-top: 1px solid var(--color-body-text); }
.order-table tfoot tr:first-child th,
.order-table tfoot tr:first-child td {
padding-top: 1.25em; }
.order-table tfoot tr:nth-last-child(2) th,
.order-table tfoot tr:nth-last-child(2) td {
padding-bottom: 1.25em; }
.order-table tfoot tr:last-child th,
.order-table tfoot tr:last-child td {
border-top: 1px solid var(--color-body-text);
font-weight: var(--font-weight-body--bold);
padding-top: 1.25em;
padding-bottom: 1.25em;
text-transform: uppercase; }
@media only screen and (min-width: 750px) {
.order-table thead th {
text-transform: uppercase;
padding-top: 1.25em;
padding-bottom: 1.25em; }
.order-table tbody tr th, .order-table tbody tr td {
padding-top: 1.25em;
padding-bottom: 1.25em; }
.order-table tfoot tr td, .order-table tfoot tr th {
vertical-align: bottom; } }
@media only screen and (max-width: 749px) {
.order-table {
border: 0; }
.order-table thead {
display: none; }
.order-table th, .order-table td {
float: left;
clear: left;
width: 100%;
text-align: right;
padding: 0.5rem 0;
border: 0;
margin: 0; }
.order-table th::before,
.order-table td::before {
content: attr(data-label);
float: left;
text-align: left;
padding-right: 2em;
max-width: 80%; }
.order-table tbody tr th:first-child {
padding-top: 1.25em; }
.order-table tbody tr td:last-child {
padding-bottom: 1.25em; }
.order-table tbody th::before,
.order-table tbody td::before {
font-weight: var(--font-weight-body--bold); } }
@media only screen and (max-width: 749px) {
.order-table__product {
display: flex;
justify-content: space-between; } }
.item-props {
margin-top: 5px;
display: flex;
flex-direction: column; }
.item-props__property {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.order-discount {
color: var(--color-sale-text);
display: block;
line-height: 1.2em; }
.order-discount .icon-saletag {
fill: currentColor;
width: 1em;
height: 1em;
margin-right: 0.4em; }
.order-discount--title {
text-transform: uppercase;
word-break: break-word;
padding-right: 1em; }
.order-discount--list {
margin: 0.8em 0 0 1.3em;
list-style: none;
padding: 0; }
.order-discount__item {
text-indent: -1.3em; }
.order-discount__item + .order-discount__item {
margin-top: 0.6em; }
@media only screen and (max-width: 749px) {
.order-discount-wrapper {
display: flex;
justify-content: space-between;
width: 100%; } }
.order-discount-card-wrapper {
display: flex;
justify-content: center; }
@media only screen and (min-width: 750px) {
.order-discount-card-wrapper {
justify-content: flex-end; } }
.order-discount--cart {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em);
padding-right: 0; }
@media only screen and (min-width: 750px) {
.order-discount--cart {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); } }
.order-discount--cart-total {
padding-left: 27.5px; }
@media only screen and (min-width: 750px) {
.order-discount--cart-total {
padding-left: 55px;
min-width: 150px; } }
/*================ MODULES ================*/
.site-header {
position: relative;
background-color: var(--color-body); }
@media only screen and (max-width: 961px) {
.site-header {
border-bottom: 1px solid var(--color-border); } }
@media only screen and (min-width: 960px) {
.site-header.logo--center {
padding-top: 30px; } }
.site-header__logo {
margin: 0;}
.logo-align--center .site-header__logo {
text-align: center;
margin: 0 auto; }
@media only screen and (max-width: 749px) {
.logo-align--center .site-header__logo {
text-align: left;
margin: 8px 0; } }
@media only screen and (max-width: 749px) {
.site-header__logo {
/* padding-left: 22px; */
text-align: center; }
.site-header__logo img {
margin: 0; } }
.site-header__logo-link {
display: inline-block;
word-break: break-word; }
@media only screen and (min-width: 750px) {
.logo-align--center .site-header__logo-link {
margin: 0 auto; } }
.site-header__logo-image {
display: block; }
@media only screen and (min-width: 750px) {
.site-header__logo-image {
margin: 0 auto; } }
.site-header__logo-image img {
width: 100%; }
.site-header__logo-image--centered {
margin: 0 auto; }
.site-header__logo-image--centered img {
margin: 0 auto; }
.site-header__logo img {
display: block; }
.site-header__navi {
display: flex;
align-items: center;
justify-content: flex-end;
/* position: absolute;
left: 0; */
}
@media only screen and (max-width: 959px) {
.site-header__navi {
/* display: none; */
}
}
.site-header__icons {
position: absolute;
right: 0;
white-space: nowrap; }
@media only screen and (max-width: 749px) {
.site-header__icons {
width: auto;
padding-right: 0px; }
.site-header__icons .btn--link,
.site-header__icons .site-header__cart {
font-size: calc(((var(--font-size-base)) / (var(--font-size-base))) * 1em); } }
.site-header__icons-wrapper {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end; }
.site-header__cart,
.site-header__search,
.site-header__wish,
.site-header__account {
position: relative; }
.site-header__search-toggle {
display: block; }
@media only screen and (min-width: 750px) {
.site-header__account,
.site-header__cart{
padding: 10px 11px; }}
.site-header__cart-title,
.site-header__search-title {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
display: block;
vertical-align: middle; }
.site-header__cart-title {
margin-right: 3px; }
.site-header__cart-count {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0.1rem;
top: 0.2rem;
font-weight: bold;
background-color: var(--color-btn-primary);
color: var(--color-btn-primary-text);
border-radius: 50%;
min-width: 1em;
height: 1em; }
.site-header__cart-count span {
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: calc(11em / 16);
line-height: 1; }
@media only screen and (max-width: 959px) {
.site-header__cart-count {
top: calc(7em / 16);
right: 10px;
border-radius: 50%;
min-width: calc(19em / 16);
height: calc(19em / 16); } }
@media only screen and (max-width: 749px) {
.site-header__cart-count span {
padding: 0.25em calc(6em / 16);
font-size: 12px; } }
@media only screen and (max-width: 749px) {
.site-header__icon {
display: inline-block;
vertical-align: middle;
padding: 10px 11px;
min-width: 42px;
margin: 0; } }
@media only screen and (min-width: 750px) {
.site-header__icon .icon-search {
margin-right: 3px; } }
@media only screen and (max-width: 749px) {
.site-header__wish{
display: none; }}
@media only screen and (max-width: 959px) {
.site-header__cart{
padding: 14px 22px 12px 11px;
display: flex; }}
@media only screen and (max-width: 749px) {
.pc-nav-top {
display: none; } }
.header-logo{
margin-left: 43px;
display: flex;
flex-direction: column;
justify-content: center;
height: 50px;
}
@media only screen and (max-width: 962px) {
.header-logo {
margin-left: 0; } }
/*======== Header overwrite ========*/
@media only screen and (max-width: 960px) {
.pc-header {
display: none; }
.sp-header {
position: fixed;
padding: 0;
padding-top: 0;
width: 100%;
z-index: 100;
}
.page-container {
padding-top: 0px;
}
.logo-align--center .site-header__logo {
margin: 15px 0;
}
.site-header.logo--center {
padding-top: 0; }
}
@media only screen and (min-width: 959px) {
.pc-header {}
.sp-header {
display: none; }
}
.announcement-bar {
z-index: 10;
position: relative;
text-align: center;
border-bottom: 1px solid transparent;
padding: 2px; }
.announcement-bar__link {
display: block; }
.announcement-bar__message {
display: block;
padding: 2px 22px;
font-size: calc(((16) / (var(--font-size-base))) * 1em);
font-weight: var(--font-weight-header); }
@media only screen and (min-width: 750px) {
.announcement-bar__message {
padding-left: 55px;
padding-right: 55px; } }
.article-listing {
padding-top: 0px;
margin-bottom: 55px; }
.article {
margin-bottom: 55px; }
.article__meta {
margin-bottom: 22px; }
.article__title {
margin-bottom: 11px; }
@media only screen and (max-width: 749px) {
.article__title--has-image {
padding-left: 22px; } }
.article__author {
margin-right: 10px; }
.article__author,
.article__date {
display: inline-block;
margin-bottom: 22px; }
.template-article .article__author,
.article__meta .article__author, .template-article
.article__date,
.article__meta
.article__date {
margin-bottom: 0; }
.article__tags {
margin-bottom: 27.5px; }
.article__tags--list {
font-style: italic; }
.article__link {
display: block; }
@media only screen and (max-width: 749px) {
.article__link {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; } }
.article__link:not([disabled]):hover .article__grid-image-wrapper::before, .article__link:focus .article__grid-image-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay);
z-index: 1; }
.article__link--fixed-overlay:not([disabled]):hover .article__grid-image-wrapper::before, .article__link--fixed-overlay:focus .article__grid-image-wrapper::before {
bottom: auto; }
.article__meta-buttons li:first-child {
margin-right: 1.5rem; }
.article__comment-count {
border-color: transparent;
border-bottom-color: currentColor;
padding: 0 0 3px 0; }
.article__comment-count:not([disabled]):hover, .article__comment-count:focus {
border-color: transparent;
border-bottom-color: currentColor; }
.rte--article {
margin-bottom: 20px; }
/*============================================================================
Blog article grid
==============================================================================*/
.grid--blog {
margin-bottom: -55px;
overflow: auto; }
.article__grid-tag {
margin-right: 10px; }
.article__grid-meta {
margin-bottom: 55px; }
@media only screen and (max-width: 749px) {
.article__grid-meta--has-image {
float: left;
padding-left: 22px; } }
.article__grid-excerpt {
margin-bottom: 17.5px; }
.article-image-wrapper.article__grid-image-wrapper {
margin-left: 0;
margin-right: 0; }
.article__grid-image-wrapper {
margin: 0 auto;
position: relative;
width: 100%; }
.article__grid-image-wrapper--small {
width: 50%; }
.article__grid-image-container {
display: block;
clear: both;
position: relative;
margin: 0 auto 27.5px 0;
min-height: 1px;
width: 100%;
height: 100%; }
@media only screen and (max-width: 749px) {
.article__grid-image-container {
float: left;
margin: 0 0 55px 0; } }
.article__grid-image-container img {
display: block; }
.article__grid-image {
margin: 0 auto;
width: 100%; }
.js .article__grid-image {
position: absolute;
top: 0; }
.article__list-image-container {
display: block;
clear: both;
position: relative;
min-height: 1px;
width: 100%;
height: 100%; }
.article__list-image-wrapper {
width: 100%;
margin-bottom: 20px; }
.article__list-image {
margin: 0 auto;
width: 100%;
position: absolute;
top: 0; }
/*============================================================================
Blog/article card
==============================================================================*/
.blog-card {
margin-bottom: 30px;
margin-top: 30px; }
@media only screen and (min-width: 750px) {
.blog-card {
margin-top: 0; } }
.blog-card__image-wrapper {
margin-bottom: 30px;
padding-bottom: 100%;
position: relative;
width: 100%; }
.blog-card__image-wrapper:hover .blog-card__title-wrapper::before, .blog-card__image-wrapper:focus .blog-card__title-wrapper::before {
opacity: var(--hover-overlay-opacity); }
.blog-card__image-wrapper:focus {
opacity: 1; }
.blog-card__image-wrapper--small {
padding-bottom: 50%; }
.blog-card__image-wrapper--medium {
padding-bottom: 75%; }
.blog-card__title {
color: var(--color-overlay-title-text);
font-size: calc(((var(--font-size-header)) / (var(--font-size-base))) * 1em);
hyphens: auto;
margin-bottom: 11px;
padding: 0 5px;
position: absolute;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);
top: 50%;
width: 100%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
@media only screen and (min-width: 750px) {
.blog-card__title {
padding: 0 15px; } }
.blog-card__link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
.blog-card__overlay {
position: relative;
display: block;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center top; }
.blog-card__title-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay); }
.blog-card__excerpt {
margin-bottom: 17.5px; }
.blog-card__comment-count {
border-color: transparent;
border-bottom-color: currentColor;
padding: 0 0 3px 0; }
.blog-card__comment-count:not([disabled]):hover, .blog-card__comment-count:focus {
border-color: transparent;
border-bottom-color: currentColor; }
.cart-popup-wrapper {
display: block;
position: fixed;
width: 100%;
background-color: var(--color-body);
z-index: 9999;
border: 1px solid var(--color-border);
transform: translateY(0%);
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); }
@media only screen and (min-width: 750px) {
.cart-popup-wrapper {
width: 23rem;
right: 0; } }
.cart-popup-wrapper--hidden {
display: none;
transform: translateY(-100%); }
.cart-popup {
padding: 0.2rem 1.5rem 1rem; }
.cart-popup__header {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--color-border); }
.cart-popup__heading {
flex-grow: 1;
padding: 0.5rem 0rem;
margin: 0;
color: var(--color-body-text);
line-height: 1.2em;
letter-spacing: 0.3px;
text-transform: uppercase;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
font-family: var(--font-stack-body);
font-weight: var(--font-weight-body); }
.cart-popup__close {
padding: 0.9rem;
margin-right: -0.9rem;
background-color: transparent;
border: none;
line-height: 0; }
.cart-popup__close .icon-close {
width: 1rem;
height: 1rem;
fill: currentColor; }
.cart-popup__close:hover, .cart-popup__close:focus {
color: var(--color-text-focus); }
.cart-popup-item {
display: flex;
margin: 1rem 0; }
.cart-popup-item__image-wrapper {
position: relative;
flex-basis: 18%;
flex-shrink: 0;
margin-right: 1rem;
text-align: center; }
.cart-popup-item__image {
display: block;
margin: 0 auto;
max-height: 95px; }
.cart-popup-item__description {
display: flex;
color: var(--color-body-text);
flex-basis: 100%;
justify-content: space-between;
line-height: 1.2rem; }
.cart-popup-item__title {
color: var(--color-text);
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em);
font-family: var(--font-stack-header);
font-weight: var(--font-weight-header);
margin-bottom: 0; }
.product-details {
margin-top: 0.25rem;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.product-details__item {
margin-bottom: 0.2rem;
line-height: 1.5; }
.product-details__item:last-child {
margin-bottom: 0; }
.product-details__property-label {
font-weight: var(--font-weight-body--bold); }
.cart-popup-item__quantity {
flex-basis: 30%;
flex-shrink: 0;
margin-left: 1rem;
text-align: right;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.cart-popup__cta-link {
width: 100%; }
.cart-popup__dismiss {
margin-top: 0.5rem;
text-align: center; }
.cart-popup__dismiss-button {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.sidebar {
margin-top: 40px; }
.sidebar__list {
list-style: none;
margin-bottom: 55px; }
.sidebar__list li {
margin-bottom: 10px; }
.pagination {
text-align: center;
list-style: none;
font-size: calc(((15) / (var(--font-size-base))) * 1em);
padding-top: 55px; }
.pagination li {
display: inline-block; }
.pagination .icon {
display: block;
height: 20px;
vertical-align: middle; }
.pagination__text {
padding: 0 27.5px; }
.comment {
margin-bottom: 30px; }
.comment:last-child {
margin-bottom: 0; }
.comment__content {
margin-bottom: 5px; }
.comment__meta-item {
margin-right: 10px;
font-size: calc(((14) / (var(--font-size-base))) * 1em); }
.comment__meta-item:first-child::before {
content: '\2014 \0020'; }
.social-sharing {
display: flex; }
.template-password .social-sharing {
justify-content: center; }
.btn--share {
background-color: transparent;
border-color: var(--color-border);
color: var(--color-text);
margin-right: 5px;
margin-bottom: 10px; }
.btn--share:not([disabled]):hover, .btn--share:focus {
background-color: transparent;
border-color: var(--color-btn-social-focus);
color: var(--color-text); }
.btn--share .icon {
vertical-align: middle;
width: 16px;
height: 16px;
margin-right: 4px; }
.btn--share .icon-facebook {
fill: #3b5998; }
.btn--share .icon-twitter {
fill: #00aced; }
.btn--share .icon-pinterest {
fill: #cb2027; }
.share-title {
display: inline-block;
vertical-align: middle; }
/*================ Variables ================*/
.search-form__input-wrapper {
position: relative; }
.search-form__input {
padding-right: 45px;
width: 100%;
min-height: 44px;
color: var(--color-text-field-text);
background-color: var(--color-text-field);
border: none;
border: 1px solid var(--color-border-form); }
.search-form__input::-ms-clear {
display: none; }
.search-form__input::-webkit-search-cancel-button {
display: none; }
.search-form__input::placeholder {
color: var(--color-text-field-text);
opacity: 0.6; }
.search-form__input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: var(--color-text-field-text);
opacity: 0.6; }
.search-form__input::-ms-input-placeholder {
/* Microsoft Edge */
color: var(--color-text-field-text);
opacity: 0.6; }
.search-form__clear-action {
appearance: none;
margin: 0;
padding: 0;
background: none;
border: none;
font-size: inherit;
line-height: inherit;
cursor: pointer;
opacity: 0;
visibility: hidden;
pointer-events: none;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 50%;
margin-top: -12px;
right: 10px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: transparent;
transition-property: opacity, visibility, background-color, transform;
transition-duration: 100ms;
transition-timing-function: ease-in-out; }
.search-form__clear-action .icon-close {
flex: 1 1 auto;
width: 12px;
height: 12px;
fill: var(--color-text-field-text); }
.search-form__clear-action:focus, .search-form__clear-action:hover {
background-color: rgba(var(--color-text-field-text-rgb), 0.2); }
.search-form__clear-action:active {
transform: scale(0.9); }
.search-form__clear-action.predictive-search__clear-button--visible {
opacity: 1;
visibility: visible;
pointer-events: auto; }
.search-bar__form .search-form__clear-action {
right: 44px; }
.search-form--focus .predictive-search__clear-button--visible {
opacity: 1;
visibility: visible;
pointer-events: auto; }
.search-page-form .predictive-search__clear-button--visible {
opacity: 1;
visibility: visible;
pointer-events: auto; }
.search-form__connected-submit {
appearance: none;
margin: 0;
padding: 0;
background: none;
border: none;
font-size: inherit;
line-height: inherit;
cursor: pointer;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
background-color: var(--color-btn-primary);
border-radius: 0 2px 2px 0;
transition: background-color 100ms ease-in-out; }
.search-form__connected-submit:focus, .search-form__connected-submit:hover {
background-color: var(--color-btn-primary-darker); }
.search-form__connected-submit:active {
background-color: var(--color-btn-primary); }
.search-form__connected-submit .icon-search {
fill: var(--color-btn-primary-text);
width: 20px;
height: 20px; }
.search-bar {
z-index: 999;
background-color: var(--color-body); }
.search-bar__interior {
height: 100%;
display: flex;
flex: 1; }
@media only screen and (min-width: 750px) {
.search-bar__interior {
padding-left: 55px;
padding-right: 55px;
height: auto; } }
.search-form__container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding-left: 7px;
padding-right: 10px;
background-color: var(--color-bg); }
.search-bar__form {
flex: 1 1 100%;
position: relative;
max-width: 750px;
border: 1px solid transparent; }
.search-bar__actions {
display: flex;
flex: 0 0 auto;
align-items: center; }
.search-bar__submit {
z-index: 1;
position: absolute;
right: 0;
top: 0;
display: inline-block;
padding: 0 12px;
height: 100%;
vertical-align: middle;
background-color: transparent;
border: 0;
margin: 0;
color: var(--color-text-field-text);
pointer-events: none;}
.search-bar__submit .icon {
position: relative;
top: -1px;
width: 1.2rem;
height: auto; }
.search-bar__submit:hover, .search-bar__submit:focus {
color: rgba(var(--color-text-field-text-rgb), 0.6); }
.search-bar__input {
padding-right: 45px;
width: 100%;
min-height: 44px;
color: var(--color-text-field-text);
background-color: var(--color-text-field);
border: none;
border: 1px solid var(--color-border-form); }
.search-bar__close {
padding: calc(10em / 16) 0.75em;
margin-right: -10px; }
.search-bar__close .icon {
width: 1rem;
height: auto; }
.search--less-than-2-results {
height: 40vh; }
.predictive-search-wrapper {
transition-property: opacity, visibility;
transition-duration: 100ms;
transition-timing-function: ease-in-out;
z-index: 1000;
position: absolute;
left: 0;
right: 0;
margin-top: -1px;
border: 1px solid var(--color-border-form);
background-color: var(--color-bg);
overflow-y: auto;
display: none; }
.search-bar .predictive-search-wrapper {
position: fixed;
width: 100%; }
@media only screen and (max-width: 749px) {
.search-bar .predictive-search-wrapper {
border: none; } }
@media only screen and (min-width: 750px) {
.search-bar .predictive-search-wrapper {
position: absolute;
right: auto;
left: auto;
max-width: 748px; } }
@media only screen and (min-width: 750px) {
.predictive-search-wrapper {
max-height: 80vh; } }
.search-page-form .predictive-search-wrapper {
max-height: 60vh; }
@media only screen and (max-width: 749px) {
.predictive-search-wrapper--drawer {
padding-top: 14px;
margin-top: 3px; } }
.predictive-search-wrapper--visible {
display: block; }
.predictive-search {
height: 100%;
text-align: left; }
@media only screen and (max-width: 989px) {
.search-bar .predictive-search {
overflow-y: auto;
-webkit-overflow-scrolling: touch; } }
.predictive-search-loading {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 14px 0;
text-align: center; }
.icon-predictive-search-spinner::before {
content: '';
display: block;
width: 28px;
height: 28px;
border-radius: 50%;
border: 4px solid;
border-color: currentColor currentColor currentColor transparent;
-moz-animation: spin 500ms infinite linear;
-o-animation: spin 500ms infinite linear;
-webkit-animation: spin 500ms infinite linear;
animation: spin 500ms infinite linear; }
.predictive-search-loading__icon {
display: inline-block;
margin: 0;
color: var(--color-body-text);
width: 20px;
height: 20px; }
.predictive-search-loading__icon .icon-predictive-search-spinner::before {
width: 100%;
height: 100%;
border-width: 3px; }
.predictive-search-title {
position: relative;
display: flex;
align-items: center;
padding: 14px; }
.predictive-search-title::before {
content: '';
position: absolute;
right: 0;
top: 0;
left: 0;
height: 0;
background-color: var(--color-border); }
.predictive-search-title::after {
content: '';
position: absolute;
right: 14px;
bottom: -1px;
left: 14px;
height: 1px;
background-color: var(--color-border); }
@media only screen and (max-width: 749px) {
.predictive-search-wrapper--drawer .predictive-search-title::before {
height: 1px; } }
.predictive-search-title__content {
flex: 1 1 auto;
margin-bottom: 0;
padding-right: 40px;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
font-family: var(--font-stack-body);
font-weight: var(--font-weight-body);
text-transform: uppercase;
color: var(--color-body-text);
white-space: normal; }
.predictive-search-title__loading-spinner {
flex: 0 0 auto;
position: absolute;
top: 50%;
right: 14px;
margin-top: -10px;
width: 20px;
height: 20px;
color: var(--color-body-text); }
.predictive-search-title__loading-spinner .icon-predictive-search-spinner::before {
width: 100%;
height: 100%;
border-width: 3px; }
.predictive-search-item {
font-weight: 400;
white-space: normal; }
.predictive-search-item__details {
display: flex;
width: 100%;
flex-wrap: wrap;
flex-direction: column;
margin-top: 0;
margin-bottom: 0; }
.predictive-search-item__detail--inline {
display: flex;
flex-direction: row; }
.predictive-search-item__link {
display: flex;
padding: 14px;
background-color: transparent;
transition: background-color 100ms ease-in-out; }
.predictive-search-item__link:active {
background-color: transparent; }
.predictive-search-item--selected .predictive-search-item__link,
.predictive-search-item--selected .predictive-search-view-all__button,
.predictive-search-item__link:hover {
background-color: var(--predictive-search-focus); }
.predictive-search-item--selected .predictive-search-item__link .predictive-search-item__title-text,
.predictive-search-item--selected .predictive-search-view-all__button .predictive-search-item__title-text,
.predictive-search-item__link:hover .predictive-search-item__title-text {
border-bottom-color: var(--color-text); }
.predictive-search__column {
flex: 1 1 auto; }
.predictive-search__column--image {
flex-grow: 0;
flex-shrink: 0;
width: 44px;
height: 44px;
margin-right: 12px;
position: relative; }
.predictive-search-item__image {
object-fit: contain;
font-family: "object-fit: contain";
width: 100%;
height: 100%; }
.predictive-search__column--content {
display: flex;
flex-wrap: wrap;
flex-direction: column; }
.predictive-search__column--center {
justify-content: center; }
.predictive-search-item__title-text {
display: inline-block;
color: var(--color-text);
word-break: break-word;
border-bottom: 1px solid transparent;
line-height: 1.2;
font-family: var(--font-stack-header);
font-weight: var(--font-weight-header); }
.predictive-search-item__vendor {
color: var(--color-body-text);
font-size: calc(((var(--font-size-base) - 3) / (var(--font-size-base))) * 1em);
text-transform: uppercase;
letter-spacing: 1px; }
.predictive-search-item__price {
padding-top: 6px;
flex: 0 0 auto;
color: var(--color-body-text); }
.predictive-search-item__price--sale {
color: var(--color-sale-text); }
.predictive-search-item__price--compare {
text-decoration: line-through; }
.predictive-search-view-all, .predictive-search-loading {
border-top: 1px solid var(--color-border); }
@media only screen and (min-width: 750px) {
.predictive-search__list .predictive-search-view-all:first-child, .predictive-search__list .predictive-search-loading:first-child {
border-top: none; } }
.predictive-search-view-all__button {
display: block;
width: 100%;
border: none;
padding: 14px;
text-align: left;
color: var(--color-text);
background-color: transparent;
word-break: break-word;
white-space: normal;
font-family: var(--font-stack-header);
font-weight: var(--font-weight-header); }
.predictive-search-view-all__button:hover, .predictive-search-view-all__button:focus {
background-color: var(--predictive-search-focus); }
.search-bar-wrapper {
position: relative;
width: 1024px;
margin: 0 auto;
top: 12px; }
/*
.search-bar-wrapper .search-bar .content .query {
width: 240px;
height: 28px;
}
*/
/*================ Mobile Site Nav ================*/
.mobile-nav {
/*display: block;*/
text-align: left;
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.01s cubic-bezier(0.29, 0.63, 0.44, 1);}
.sub-nav--is-open .mobile-nav {
-ms-transform: translate3d(-100%, 0, 0);
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
.third-nav--is-open .mobile-nav {
-ms-transform: translate3d(-200%, 0, 0);
-webkit-transform: translate3d(-200%, 0, 0);
transform: translate3d(-200%, 0, 0); }
.mobile-nav__link,
.mobile-nav__sublist-link {
display: block;
width: 100%;
padding: 15px 30px;
font-size: 16px; }
.mobile-nav__link {
position: relative; }
.mobile-nav__label {
border-bottom: 1px solid transparent; }
.mobile-nav__link--active .mobile-nav__label {
/* border-bottom-color: var(--color-text); */ }
.mobile-nav__sublist-link:not(.mobile-nav__sublist-header) {
padding-left: 70px;
padding-right: 30px; }
.mobile-nav__item {
display: block;
width: 100%; }
.mobile-nav__item .icon {
position: absolute;
top: 50%;
left: 50%;
height: 14px;
width: 14px;
margin: -6px 0 0 -7px; }
.mobile-nav__return {
border-right: 1px solid var(--color-border); }
.mobile-nav__return-btn {
position: relative;
padding: 24px 0;
width: 55px; }
.mobile-nav__icon {
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding-left: 22px;
padding-right: 22px;
pointer-events: none;
overflow: hidden; }
.mobile-nav__table {
display: table;
width: 100%; }
.mobile-nav__table-cell {
display: table-cell;
vertical-align: middle;
width: 1%;
text-align: left;
white-space: normal; }
.mobile-nav__toggle-button {
padding: 20px 15px; }
.mobile-nav__dropdown {
position: absolute;
background-color: var(--color-body);
z-index: 8;
width: 100%;
top: -54px;
right: -100%;
display: none; }
.is-active + .mobile-nav__dropdown {
display: block;
opacity: 1; }
.mobile-nav__dropdown.is-closing {
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
opacity: 0.99; }
.mobile-nav__dropdown .mobile-nav__sublist-header {
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
display: table-cell;
vertical-align: middle;
padding-left: 15px; }
.mobile-nav__dropdown .mobile-nav__sublist-header--main-nav-parent {
color: var(--color-body-text); }
/*================ Mobile nav wrapper ================*/
.mobile-nav-wrapper {
display: none;
/*
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
*/
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
z-index: 200;
background-color: var(--color-body);
transition: all 0s;
/* transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); */
/* overflow: hidden; */
width: 100%;
overflow-x: hidden;
overflow-y: auto;
/* height: 100vh; */
}
.mobile-nav-wrapper::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
/*border-bottom: 1px solid var(--color-border);*/ }
.mobile-nav-wrapper.js-menu--is-open {
display: block; }
.mobile-nav--close .icon-hamburger {
display: none; }
.wishlist--close .icon-heart {
display: none; }
.site-header__wish.wishlist--close .icon-close {
display: block;
}
.site-header__search.mobile-search--close .icon-close {
display: block;
}
.site-header__mobile-nav {
z-index: 11;
position: relative;
background-color: var(--color-body); }
@media only screen and (max-width: 960px) { /* XXX */
.site-header__mobile-nav {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center; } }
/*================ Mobile Search ========================*/
.mobile-search {
display: block;
text-align: left;
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.01s cubic-bezier(0.29, 0.63, 0.44, 1); }
.lookup-field {
padding-top: 20px;
text-align: left;
width: 100%;
height: auto;
top: 50px;
bottom: 0;
left: 0;
font-size: 18px; }
.lookup-div {
width: 90%;
margin: 0 auto 30px; }
.lookup-div .lookup-div-title {
font-size: 12px;
line-height: 20px;
border-bottom: 1px solid #DADBDD;
padding-bottom: 6px; }
.lookup-field .lookup-search-bar .lookup-search-form-wrapper {
position: static;
height: auto;
padding: 0;
margin-top: 10px;}
.lookup-search-form-wrapper {
width: 100%;
margin-left: 0;
height: 49px;
top: 60px;
left: 0; }
.lookup-search-form .query {
width: 100%;
font-size: 12px;
line-height: 24px;
}
.lookup-div .height-nav-wrapper {
margin-top: 20px;
height: 2em;
width: 100%;
position: relative;
overflow: hidden; }
.lookup-div .height-nav-wrapper .height-nav {
height: 5em;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.lookup-div .height-nav-wrapper .height-nav ul {
display: inline-table;
max-width: 100%;
text-align: center; }
.lookup-div .height-nav-wrapper .height-nav ul li {
display: table-cell;
padding-left: 10px; }
.lookup-div .height-nav-wrapper .height-nav ul li a {
padding: 7px 12px;
border: 1px solid #D3D7D5;
border-radius: 1px;
font-size: 10px;
font-weight: bold;
line-height: 16px;
min-width: 64px;
display: block; }
.lookup-field .category ul {
list-style: none; }
.lookup-field .category ul li {
margin: 16px 0;
font-size: 14px; }
.lookup-field .category ul li a::after {
content: ">";
float: right;
margin-right: 20px;
color: rgba(0, 0, 0, 0.32); }
/*================ Mobile search wrapper ================*/
.mobile-search-wrapper {
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
z-index: 200;
background-color: var(--color-body);
transition: all 0s;
/* transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); */
display: none;
/* overflow: hidden; */
width: 100%;
overflow-x: hidden;
overflow-y: auto;
height: 100vh;
}
.mobile-search-wrapper::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-bottom: 1px solid var(--color-border); }
.mobile-search-wrapper.js-search--is-open {
display: block; }
.mobile-search--close .icon-hamburger {
display: none; }
/*================ Wishlist wrapper ========================*/
.wishlist-wrapper {
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
position: absolute;
top:0;
left: 0;
padding-top: 50px;
z-index: 200;
background-color: var(--color-body);
transition: all 0s;
/* transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); */
display: none;
/* overflow: hidden; */
width: 100%;
overflow-x: hidden;
overflow-y: auto;
height: 100vh; }
.wishlist-wrapper.js-wishlist--is-open {
display: block; }
.header-nav a.wishlist.icon.active {
background: url("../assets/icon_close_2x.png") no-repeat 17px 18px;
background-size: 16px auto;
left: 0; }
.header-nav a.wishlist.icon.hidden {
visibility: hidden; }
/*================ Wishlist ========================*/
.wishlist-div {
max-width: 700px;
margin: 0 auto; }
.wishlist-div .wishlist-title {
margin-top: 20px;
font-size: 25px;
text-align: left;
font-family: 'Optima', sans-serif;
letter-spacing: 0.2em;
margin: 45px 20px 10px;
}
@media only screen and (max-width: 749px) {
.wishlist-div .wishlist-title {
font-size: 20px;
margin: 20px 32px 0;
}
}
.wishlist-div .wishlist-item {
border-bottom: 1px solid #DADBDD;
padding: 20px;
min-height: 145px;
overflow: hidden;
display: flex; }
@media only screen and (max-width: 749px) {
.wishlist-div .wishlist-item {
margin: 0 20px;
padding: 20px 0;
}
}
.wishlist-div .wishlist-item .wishlist-item-image-frame{
width: 150px; }
@media only screen and (max-width: 749px) {
.wishlist-div .wishlist-item .wishlist-item-image-frame{
width: 87px;
padding-left: 12px;
}
}
.wishlist-div .wishlist-item .wishlist-item-left{
width: calc(100% - 150px);
text-align: left;
padding-left: 50px;
text-align: left;
}
@media only screen and (max-width: 749px) {
.wishlist-div .wishlist-item .wishlist-item-left{
width: calc(100% - 87px);
padding-left: 26px;
padding-right: 12px;
}
}
.wishlist-div .wishlist-item .wishlist-item-left .wishlist-item-vendor{
width: 100%;
float: left;
font-style: normal;
font-weight: 700;
font-size: 15px;
line-height: 20px;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 18px;}
@media only screen and (max-width: 749px) {
.wishlist-div .wishlist-item .wishlist-item-left .wishlist-item-vendor{
font-size: 12px;
margin-bottom: 0;
}
}
.wishlist-div .wishlist-item .wishlist-item-left .wishlist-item-name{
font-size: 15px;
outline: none;
color: #1b2528;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-decoration: none;}
@media only screen and (max-width: 749px) {
.wishlist-div .wishlist-item .wishlist-item-left .wishlist-item-name{
font-size: 12px;
line-height: 20px;
letter-spacing: 0.1em;
}
}
.wishlist-div .wishlist-item .wishlist-item-left .unwish-text {
float: right;
font-size: 10px;
margin-top: 18px;
color: #686464; }
.wishlist-div .wishlist-item .wishlist-item-left .unwish-btn {
background: url(wish-close.png) no-repeat;
background-size: 10px;
height: 10px;
width: 10px;
float: right;
margin: 21px 8px; }
.nonwish {
font-family: 'Noto Sans JP', sans-serif;
}
.wishlist-div .nonwish-image {
background: url(nonwish-heart.png) no-repeat;
background-size: 50px;
height: 50px;
width: 50px;
margin: 100px auto 10px; }
.wishlist-div .nonwish-message {
font-weight: bold;
font-size: 16px;
color: #939498;
margin: 0; }
.wishlist-div .nonwish-submessage {
font-weight: normal;
font-size: 14px;
color: #939498;
margin-top: 10px }
/*================ Product wish button ========================*/
.product-single__meta{
position: relative; }
.product-single__title{
width: 80%;
font-size: 15px;
font-weight: bold;
}
.product-single__title .price,
.product-single__title .product__policies.rte {
display: inline-flex;
margin: 0;
}
.product-single__title .price__regular,
.product-single__title .price dd {
margin: 0;
}
#wish-button{
background: url("../assets/wish-btn.svg?v=10149970054457259938") no-repeat;
background-size: 50px;
height: 50px;
width: 50px;
right: 15px;
top: 0px;
position: absolute; }
#wish-button.added{
background: url("../assets/wish-btn-wished.svg?v=1132737268375491283") no-repeat;
background-size: 50px; }
/*================ Modals ================*/
.modal {
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
background-color: var(--color-bg);
bottom: 0;
color: var(--color-text);
display: none;
left: 0;
opacity: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0; }
.modal--is-active {
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
display: block;
opacity: 1;
overflow: hidden; }
.modal__inner {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%; }
.modal__centered {
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
top: 50%; }
.modal__close {
border: 0;
padding: 55px;
position: fixed;
top: 0;
right: 0;
z-index: 2; }
.modal__close .icon {
font-size: calc(((20) / (var(--font-size-base))) * 1em); }
/*============================================================================
Hero slider
Extends default slick slider styles.
Extra specificity in selectors is used to override defaults.
==============================================================================*/
.slideshow-wrapper {
position: relative; }
.slideshow {
position: unset;
overflow: hidden;
margin-bottom: 0;
max-height: 80vh;
transition: height 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
@media only screen and (min-width: 750px) {
.slideshow {
position: relative;
max-height: 100vh; } }
.slideshow .slick-list,
.slideshow .slick-track {
height: 100%; }
.slideshow .slick-prev,
.slideshow .slick-next {
top: 0;
height: 100%;
margin-top: 0;
width: 40px; }
.slideshow .slick-prev {
left: 0; }
.slideshow .slick-next {
right: 0; }
@media only screen and (min-width: 750px) {
.slideshow--display-controls .slick-dots {
left: calc(50% - 22px); } }
.slideshow--small {
height: 175px; }
@media only screen and (min-width: 750px) {
.slideshow--small {
height: 475px; } }
.slideshow--medium {
height: 270px; }
@media only screen and (min-width: 750px) {
.slideshow--medium {
height: 650px; } }
.slideshow--large {
height: 375px; }
@media only screen and (min-width: 750px) {
.slideshow--large {
height: 775px; } }
/*================ General slide styles ================*/
.slideshow__slide {
height: 100%;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
transition: opacity 500ms ease 0s;
top: 0;
width: 100%;
z-index: -1; }
.slideshow__slide--active {
opacity: 1;
z-index: 8; }
.slideshow__link {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; }
.slideshow__link:active, .slideshow__link:focus {
opacity: 1; }
@media only screen and (min-width: 750px) {
.slideshow__overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay);
z-index: 2; } }
/*================ Slide images ================*/
.slideshow__image {
transition: opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: transparent;
z-index: 1; }
.no-js .slideshow__image {
opacity: 1; }
/*================ Slide text ================*/
.slideshow__text-wrap {
height: 100%;
position: relative; }
.slideshow__link .slideshow__text-wrap {
cursor: inherit; }
.slideshow__text-wrap--mobile {
display: none; }
@media only screen and (max-width: 749px) {
.slideshow__text-wrap--mobile {
display: block;
position: relative;
top: -1.1rem;
background-color: var(--color-bg);
width: 85%;
margin: 0 0 -1.1rem 7.5%;
z-index: 8; } }
@media only screen and (min-width: 750px) {
.slideshow__text-content {
opacity: 0;
transition: 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);
transition-delay: 0.3s; } }
.slideshow__text-wrap--desktop .slideshow__text-content {
position: absolute;
width: 100%;
top: 50%;
z-index: 2; }
@media only screen and (min-width: 750px) {
.slideshow__text-content.slideshow__text-content--vertical-top {
top: 120px; }
.slideshow__text-content.slideshow__text-content--vertical-bottom {
top: auto;
bottom: 40px; } }
.slideshow__slide--active .slideshow__text-content,
.no-js .slideshow__text-content {
-ms-transform: translateY(-40px);
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
opacity: 1; }
.slideshow__slide--active .slideshow__text-content.slideshow__text-content--vertical-center,
.no-js .slideshow__text-content.slideshow__text-content--vertical-center {
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.no-js .slideshow__text-content::after {
opacity: 0;
visibility: hidden;
content: none; }
.slideshow__text-content--mobile {
display: none;
padding-top: 2.6rem; }
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
padding-top: 1.7rem; }
@media only screen and (min-width: 750px) {
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
padding-top: 0; } }
@media only screen and (min-width: 750px) {
.slideshow__text-content--mobile {
padding-top: 0; }
.slideshow__text-content--mobile::after {
display: none; } }
.slideshow__text-content--mobile-active {
display: block; }
.slideshow__title,
.slideshow__subtitle {
color: var(--color-overlay-title-text); }
@media only screen and (max-width: 749px) {
.slideshow__title,
.slideshow__subtitle {
display: none; } }
.slideshow__title--mobile {
margin-bottom: 0; }
.slideshow__title--mobile ~ .slideshow__subtitle--mobile {
margin-top: 0.5rem; }
.slideshow__subtitle--mobile,
.slideshow__title--mobile {
display: none;
color: var(--color-text); }
@media only screen and (max-width: 749px) {
.slideshow__subtitle--mobile,
.slideshow__title--mobile {
display: block; } }
.slideshow__btn-wrapper {
border: none;
background-color: transparent; }
@media only screen and (min-width: 750px) {
.slideshow__btn-wrapper--push {
margin-top: 30px; } }
.slideshow__btn {
max-width: 100%;
display: inline-block;
word-wrap: break-word;
background-color: var(--color-btn-primary);
color: var(--color-btn-primary-text);
min-height: 3.125rem;
line-height: 2.2; }
@media only screen and (max-width: 749px) {
.slideshow__btn {
display: none; } }
.slideshow__btn--mobile {
display: none;
margin: 1.3rem auto 0; }
@media only screen and (max-width: 749px) {
.slideshow__btn--mobile {
display: inline-block;
margin: 2rem auto 0.3rem; } }
/*================ Slideshow control styles ================*/
.slideshow__controls {
display: flex;
justify-content: center;
position: absolute;
top: 0px;
right: 0px;
margin-bottom: 5px;
z-index: 8; }
@media only screen and (min-width: 750px) {
.slideshow__controls {
top: auto;
bottom: 0;
left: 0; } }
.slideshow__arrows {
height: 44px;
padding: 5px;
background-clip: content-box;
background-color: rgba(0, 0, 0, 0.4);
color: rgba(255, 255, 255, 0.5);
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87);
display: none; }
@media only screen and (min-width: 750px) {
.slideshow__arrows {
display: flex; } }
@media only screen and (min-width: 750px) {
.slideshow__controls:hover .slideshow__arrows,
.slideshow__controls:focus .slideshow__arrows,
.slideshow__controls--hover .slideshow__arrows {
background-color: rgba(0, 0, 0, 0.75); } }
.slideshow__arrows .slideshow__arrow {
height: 44px;
width: 44px;
position: relative;
top: -5px;
padding: 0 0.9rem;
line-height: 0;
cursor: pointer;
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87);
background-color: transparent;
color: rgba(255, 255, 255, 0.5);
border: none; }
.slideshow__arrows .slideshow__arrow .icon {
width: 0.7rem;
height: 0.7rem;
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
.slideshow__arrows .slideshow__arrow .icon:hover {
color: white; }
.slideshow__arrows .slideshow__arrow-previous {
float: left; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slideshow__arrow-previous {
order: -1; } }
.slideshow__arrows .slideshow__arrow-next {
float: right; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slideshow__arrow-next {
order: 1; } }
.slideshow__arrows .slick-dots {
line-height: 32px; }
.slideshow__arrows .slick-dots li {
width: 9px;
height: 9px;
margin-left: 9px; }
.slideshow__arrows .slick-dots li button::before,
.slideshow__arrows .slick-dots li a::before {
width: 9px;
height: 9px;
color: rgba(var(--color-text-rgb), 0.7);
border: none;
opacity: 1; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slick-dots li button::before,
.slideshow__arrows .slick-dots li a::before {
color: rgba(255, 255, 255, 0.5); } }
.slideshow__arrows .slick-dots li.slick-active button::before,
.slideshow__arrows .slick-dots li.slick-active a::before {
color: white; }
.slideshow__arrows--mobile .slick-dots li.slick-active button::before,
.slideshow__arrows--mobile .slick-dots li.slick-active a::before {
color: var(--color-text); }
.slideshow__arrows--mobile {
display: block;
width: 100%;
height: 44px;
background-color: transparent; }
.slideshow__arrows--mobile .icon {
fill: rgba(var(--color-text-rgb), 0.7); }
.slideshow__arrows--mobile .slideshow__arrow:focus .icon {
fill: var(--color-text); }
@media only screen and (min-width: 750px) {
.slideshow__arrows--mobile {
display: none; } }
.slideshow__pause {
clip: auto;
width: 44px;
height: 44px;
margin-left: 1px;
padding: 5px;
background-clip: content-box;
z-index: 10000;
border: none;
background-color: rgba(0, 0, 0, 0.4);
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87);
line-height: 0; }
@media only screen and (min-width: 750px) {
.slideshow__controls:hover .slideshow__pause,
.slideshow__controls:focus .slideshow__pause,
.slideshow__controls--hover .slideshow__pause {
background-color: rgba(0, 0, 0, 0.75); } }
.slideshow__pause .icon {
color: rgba(255, 255, 255, 0.5);
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
.slideshow__pause .icon:hover {
color: white; }
.slideshow__pause .icon {
width: 0.65rem;
height: 0.65rem; }
.slideshow__pause-stop {
display: block; }
.slideshow__pause--is-paused .slideshow__pause-stop {
display: none; }
.slideshow__pause-rotate {
display: none; }
.slideshow__pause--is-paused .slideshow__pause-rotate {
display: block; }
.price {
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
margin-top: 0;
margin-bottom: 0; }
@media only screen and (max-width: 749px) {
.price {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); } }
.price dl {
margin-top: 0; }
.price dd {
margin: 0 0.5em 0 0; }
.price--unavailable {
visibility: hidden; }
.price--compare-price-hidden .price__compare {
display: none; }
.price__pricing-group {
display: flex;
flex-direction: row;
align-items: center; }
.price__regular {
display: block; }
.price__regular,
.price__sale {
margin-right: 0.625rem; }
.price--on-sale .price__regular,
.price--on-sale .price__availability {
display: none; }
.price__availability {
display: none;
color: var(--color-body-text);
font-size: 0.9em;
font-weight: var(--font-weight-body);
text-transform: uppercase;
letter-spacing: 1px; }
.price--sold-out .price__availability {
display: block; }
.price__sale {
display: none; }
.price--on-sale .price__sale {
display: flex;
flex-direction: row;
flex-wrap: wrap; }
.price__vendor {
color: var(--color-body-text);
font-size: 0.9em;
font-weight: var(--font-weight-body);
text-transform: uppercase;
letter-spacing: 1px;
margin: 5px 0 10px;
width: 100%;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%; }
.price__vendor--listing {
margin: 0 0 4px; }
.price__vendor--listing dd{
margin: 0;
font-family: 'Noto Sans JP', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.2em;}
@media only screen and (max-width: 749px) {
.price__vendor--listing dd{
font-family: 'Noto Sans JP', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 10px;
line-height: 14.48px;
letter-spacing: 0.2em;
}
}
.price--listing {
margin-top: 20px;}
@media only screen and (max-width: 749px) {
.price--listing {
margin-top: 0;}
}
.price__unit {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%;
display: none; }
.price--unit-available .price__unit {
display: block; }
.price-item {
color: var(--color-body-text);
font-family: 'Noto sans JP', sans-serif;
/* font-weight: var(--font-weight-body--bolder); */
font-size: 14px;
line-height: 14px;
letter-spacing: 0.2em;
color: #000000;}
@media only screen and (max-width: 749px) {
.price-item {
font-size: 10px;
}
}
.price-item--sale {
color: var(--color-sale-text); }
.price--on-sale .price-item--regular {
text-decoration: line-through; }
.price-unit-price {
color: var(--color-body-text);
font-size: 0.8em; }
.price-item__label {
display: inline-block;
white-space: nowrap;
font-weight: var(--font-weight-body--bolder); }
.price__badges {
margin-top: 0; }
.price__badge {
display: none;
align-self: center;
text-align: center;
font-size: 0.5em;
line-height: 1em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background-color: var(--color-bg);
border: 1px solid var(--color-text);
border-radius: 2px;
padding: 0.2rem 0.5rem; }
.price__badge--sale {
color: var(--color-bg);
border-color: var(--color-sale-text);
background-color: var(--color-sale-text); }
.price--on-sale .price__badge--sale {
display: flex; }
.price--sold-out .price__badge--sale {
display: none; }
.price__badge--sold-out {
color: var(--color-body-text);
border-color: var(--color-body-text); }
.price--sold-out .price__badge--sold-out {
display: flex; }
.price__badges--listing {
line-height: 20px;
}
.price__badges--listing .price__badge {
font-size: 0.6em;
padding: 0.25rem 0.55rem;}
@media only screen and (max-width: 750px) {
.price .price__badges .badge_label {
margin-top: 1em;
}
}
/*================ Module | Filters and Sort toolbar and selection ================*/
.filters-toolbar-wrapper {
/* border-bottom: 1px solid var(--color-border);
border-top: 1px solid var(--color-border); */
margin-bottom: 22px; }
@media only screen and (min-width: 750px) {
.filters-toolbar-wrapper {
margin-bottom: 55px; } }
.filters-toolbar {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.filters-toolbar .icon-chevron-down {
fill: var(--color-text-field-text);
width: calc(10em / 16);
height: calc(10em / 16);
right: 8px; }
.filters-toolbar--has-filter {
position: relative; }
@media only screen and (max-width: 749px) {
.filters-toolbar--has-filter {
border-bottom: none; }
.filters-toolbar--has-filter .filters-toolbar__item-child {
flex-basis: 50%; }
.filters-toolbar--has-filter .filters-toolbar__item-wrapper {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%; }
.filters-toolbar--has-filter .filters-toolbar__item--count {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%;
text-align: left; }
.filters-toolbar--has-filter .filters-toolbar__item--count:before {
background-color: var(--color-border);
content: "";
height: 1px;
left: 0;
position: absolute;
top: auto;
width: 100%; } }
.filters-toolbar__item {
min-width: 33%;
-webkit-flex: 1 1 33%;
-moz-flex: 1 1 33%;
-ms-flex: 1 1 33%;
flex: 1 1 33%; }
@media only screen and (max-width: 749px) {
.filters-toolbar__item:first-child .filters-toolbar__input {
padding-left: 0; } }
@media only screen and (max-width: 749px) {
.filters-toolbar__item-child {
flex-grow: 0; } }
@media only screen and (max-width: 749px) {
.filters-toolbar__item-child:first-child {
margin-right: 2.5rem; } }
@media only screen and (min-width: 750px) {
.filters-toolbar__item-child:first-child {
margin-right: 3rem; } }
@media only screen and (max-width: 749px) {
.filters-toolbar__item-child .filters-toolbar__input {
padding-left: 0;
padding-right: 25px;
width: 100%; } }
.filters-toolbar__item-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex: 1 1 33%;
-moz-flex: 1 1 33%;
-ms-flex: 1 1 33%;
flex: 1 1 33%; }
@media only screen and (max-width: 749px) {
.filters-toolbar__item-wrapper {
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between; } }
.filters-toolbar__item--count {
min-width: 0;
-webkit-flex: 0 1 auto;
-moz-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
text-align: center; }
@media only screen and (max-width: 749px) {
.filters-toolbar__item--count {
-webkit-flex: 0 1 50%;
-moz-flex: 0 1 50%;
-ms-flex: 0 1 50%;
flex: 0 1 50%;
text-align: right; } }
.filters-toolbar__label {
display: inline-block; }
@media only screen and (max-width: 749px) {
.filters-toolbar__label {
display: block;
margin-bottom: 0;
margin-top: 8px; } }
.filters-toolbar__input-wrapper {
display: inline-block; }
.filters-toolbar__input {
border: 0 solid transparent;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
font-size: 14px;
height: 55px;
opacity: 1;
position: relative; }
.filters-toolbar__item:first-child .filters-toolbar__input {
padding-left: 0; }
@media only screen and (max-width: 749px) {
.filters-toolbar__input {
height: 46px; } }
.filters-toolbar__input.hidden {
opacity: 0; }
.filters-toolbar__input option {
text-overflow: ellipsis;
overflow: hidden; }
.filters-toolbar__product-count {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em);
/* font-style: italic; */
line-height: 40px;
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
@media only screen and (max-width: 749px) {
.filters-toolbar__product-count {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
line-height: 30px; } }
.site-footer {
text-align: center;
padding: 61px 0 20px 0; }
@media only screen and (min-width: 750px) {
.site-footer {
padding-bottom: 16px; } }
.site-footer h4, .site-footer .h4 {
margin-bottom: 12.5px; }
@media only screen and (min-width: 750px) {
.site-footer h4, .site-footer .h4 {
min-height: calc(var(--font-size-header) * 0.7);
margin-bottom: 25px; } }
.template-index .site-footer {
margin-top: 0px;
}
.site-footer__content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
@media only screen and (max-width: 749px) {
.site-footer__content {
padding: 0 18px 18px 18px; } }
@media only screen and (min-width: 750px) {
.site-footer__content {
margin-top: 67px;
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; } }
.site-footer__item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex: 1 1 100%;
-moz-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
margin-bottom: 55px; }
@media only screen and (min-width: 750px) {
.site-footer__item {
padding: 0 15px 0 15px;
margin-bottom: 16px; } }
.site-footer__item:first-of-type {
padding-left: 0; }
.site-footer__item:last-of-type {
padding-right: 0; }
@media only screen and (max-width: 749px) {
.site-footer__item:last-of-type {
margin-bottom: 0; } }
@media only screen and (min-width: 750px) {
.site-footer__item--full-width {
-webkit-flex: 1 1 100%;
-moz-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%; }
.site-footer__item--one-half {
-webkit-flex: 1 1 50%;
-moz-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%; }
.site-footer__item--one-third {
-webkit-flex: 1 1 33%;
-moz-flex: 1 1 33%;
-ms-flex: 1 1 33%;
flex: 1 1 33%; }
.site-footer__item--one-quarter {
-webkit-flex: 1 1 25%;
-moz-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%; }
.site-footer__item--one-fifth {
-webkit-flex: 1 1 20%;
-moz-flex: 1 1 20%;
-ms-flex: 1 1 20%;
flex: 1 1 20%; }
.site-footer-newsletter__one-half {
-webkit-flex: 1 1 50%;
-moz-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%; } }
@media only screen and (min-width: 750px) {
.site-footer__item--center {
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center; }
.site-footer__item--center > * {
text-align: center; } }
.site-footer__item-inner--newsletter {
width: 100%; }
.site-footer__item-inner--newsletter .newsletter__submit {
margin-top: 5px; }
.site-footer__item-inner--newsletter .newsletter__input {
margin: 5px 0 0 0;
width: 100%; }
@media only screen and (min-width: 750px) {
.site-footer__item--full-width .site-footer__item-inner--newsletter {
max-width: 50%; } }
@media only screen and (min-width: 750px) {
.site-footer__centered--single-block {
width: 75%;
margin: 0 auto; } }
.site-footer__hr {
margin: 55px 0 30px 0; }
@media only screen and (min-width: 750px) {
.site-footer__hr {
margin: 45px 0 20px 0; } }
@media only screen and (max-width: 749px) {
.site-footer__linklist.list--inline > li {
display: block; } }
.site-footer__linklist-item {
display: block;
padding: 15px 0; }
@media only screen and (min-width: 750px) {
.site-footer__linklist-item {
padding: 0 30px 5px 0; } }
.site-footer__linklist-item:last-of-type {
padding-right: 0; }
.site-footer__linklist-item a{
font-weight: normal;
font-size: 11px;
line-height: 30px;
letter-spacing: 0.2em;
color: #000000;
}
.site-footer__icon-list {
padding-bottom: 30px; }
@media only screen and (min-width: 750px) {
.site-footer__icon-list {
padding-bottom: 15px; } }
@media only screen and (min-width: 750px) {
.site-footer__social-icons {
padding-top: 7.5px;
/* text-align: right; */ } }
.social-icons__item {
padding: 0 15px; }
@media only screen and (min-width: 750px) {
.social-icons__item:last-of-type {
padding-right: 0; } }
.social-icons__link {
display: block; }
.site-footer__subwrapper {
margin-top: 35px; }
@media only screen and (min-width: 750px) {
.site-footer-item-align-right {
text-align: right; } }
.site-footer__copyright-content {
font-weight: normal;
font-size: 10px;
line-height: 30px;
letter-spacing: 0.2em;
color: #000000;
}
.site-footer__payment-icons .payment-icon {
margin-bottom: 5px;
margin-left: 5px; }
.site-footer__payment-icons .payment-icon:first-child {
margin-left: 0; }
.site-footer-item-center-vertically {
padding-top: 7.5px; }
@media only screen and (min-width: 750px) {
.site-footer-item-tall {
margin-bottom: 15px;
height: 46px; }
.site-footer-item-tall .site-footer__icon-list {
padding-bottom: 0; } }
.footer_store-logo{
display: flex;
flex-direction: column;
align-items: center;
}
.footer_store-logo-cohina {
width: 94px;
}
.footer_store-logo-store {
width: 47px;
margin-top: 5px;
}
.footer_brands {
margin-top: 31px;
display: flex;
justify-content: center;
align-items: center;
}
.footer_brand-cohina {
width: 100%;
display: flex;
justify-content: flex-end;
}
.footer_brand-cohina img{
width: 110px;
height: 18px;
}
.footer_brand-divider {
border-left: 1px solid #000000;
height: 48px;
margin: 0 60px;
}
.footer_brand-strata {
width: 100%;
display: flex;
justify-content: flex-start;
margin-bottom: 6px;
}
.footer_brand-strata img{
width: 115px;
aspect-ratio: 135/33;
}
.feature-row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center; }
@media only screen and (max-width: 749px) {
.feature-row {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; } }
.feature-row__item {
-webkit-flex: 0 1 50%;
-moz-flex: 0 1 50%;
-ms-flex: 0 1 50%;
flex: 0 1 50%; }
@media only screen and (max-width: 749px) {
.feature-row__item {
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 100%;
max-width: 100%; } }
.feature-row__image-wrapper {
margin: 0 auto 19.44444px;
position: relative;
width: 100%; }
.feature-row__image {
display: block;
margin: 0 auto; }
.feature-row__image-wrapper .feature-row__image {
width: 100%;
position: absolute;
top: 0; }
@media only screen and (max-width: 749px) {
.feature-row__image {
order: 1; } }
.feature-row__text {
padding-top: 35px;
padding-bottom: 35px; }
@media only screen and (max-width: 749px) {
.feature-row__text {
order: 2;
padding-bottom: 0; } }
@media only screen and (min-width: 750px) {
.feature-row__text--left {
padding-left: 35px; }
.feature-row__text--right {
padding-right: 35px; } }
@media only screen and (min-width: 750px) {
.featured-row__subtext {
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em); } }
.hero {
position: relative;
height: 475px;
display: table;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%; }
.hero--adapt,
.hero-fixed-width__image {
max-height: 100vh; }
@media only screen and (min-width: 750px) {
.hero--adapt,
.hero-fixed-width__image {
max-height: 80vh; } }
.hero--x-small {
height: 94px; }
.hero--small {
height: 225px; }
.hero--medium {
height: 357px; }
.hero--large {
height: 488px; }
.hero--x-large {
height: 582px; }
@media only screen and (min-width: 750px) {
.hero--x-small {
height: 125px; }
.hero--small {
height: 300px; }
.hero--medium {
height: 475px; }
.hero--large {
height: 650px; }
.hero--x-large {
height: 775px; } }
.hero__overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay);
z-index: 1; }
.hero__inner {
position: relative;
display: table-cell;
vertical-align: middle;
padding: 55px 0;
z-index: 2; }
.hero__btn {
margin-top: 27.5px; }
/*================ Fixed width ================*/
.hero-fixed-width {
position: relative; }
.hero-fixed-width::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay);
z-index: 1; }
.hero-fixed-width__content {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 2;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.hero-fixed-width__image {
width: 100%;
height: 100%;
max-width: 100%;
margin: 0 auto;
display: block;
object-fit: cover;
font-family: "object-fit: cover";
overflow: hidden; }
/*================ Quote slider ================*/
.quote-icon {
display: block;
margin: 0 auto 20px; }
.quotes-slider-wrapper {
overflow: hidden; }
.quotes-slider-wrapper.slick-initialized .quotes-slider {
touch-action: pan-y; }
.quotes-slider {
display: flex;
max-width: 100%; }
.quotes-slide {
width: 100%;
flex-shrink: 0; }
@media only screen and (min-width: 750px) {
.quotes-slide {
width: 33.33%; } }
.quotes-slide--single {
width: 100%; }
.quotes-slider__text {
font-size: calc(((var(--font-size-base) + 1.75) / (var(--font-size-base))) * 1em);
font-weight: var(--font-weight-body);
font-style: var(--font-style-body);
padding: 0 15px; }
.quotes-slider__text cite {
font-size: calc(((var(--font-size-base)) / (var(--font-size-base) + 4)) * 1em);
font-style: normal; }
.quotes-slider__text p {
margin-bottom: 30px; }
.quotes-slider__text p + cite {
margin-top: 0; }
.slick-dotted.quotes-slider.slick-initialized {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab; }
.quotes-wrapper .slick-dots {
position: relative;
bottom: 0;
margin-top: 55px; }
.quotes-wrapper .slick-dots li {
margin: 0; }
@media only screen and (min-width: 750px) {
.quotes-wrapper .slick-dots li:nth-last-child(-n+2) {
display: none; } }
.quotes-wrapper .slick-dots li button::before {
font-size: 34px;
color: var(--color-text);
opacity: 0.2; }
.quotes-wrapper .slick-dots li.slick-active button::before {
opacity: 1; }
@media only screen and (min-width: 750px) {
.quotes-wrapper .slick-dots--mobile-only {
display: none; } }
.quotes-wrapper .slick-slide[tabindex="0"] {
outline: none; }
.logo-bar {
list-style: none;
text-align: center;
margin-bottom: -35px; }
@media only screen and (min-width: 750px) {
.logo-bar--large {
margin-bottom: -55px; } }
.logo-bar__item {
display: inline-block;
vertical-align: middle;
max-width: 160px;
margin: 0 27.5px 35px; }
@media only screen and (min-width: 750px) {
.logo-bar__item--large {
margin-bottom: 55px; } }
.logo-bar__image {
display: block;
margin: 0 auto; }
.logo-bar__link {
display: block; }
.map-section {
position: relative;
width: 100%;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
@media only screen and (min-width: 750px) {
.map-section {
min-height: 500px; } }
.map-section--load-error {
height: auto; }
.map-section__wrapper {
height: 100%;
flex-shrink: 0;
flex-grow: 1;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.map-section__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 2; }
.map-section__error {
position: relative;
z-index: 3; }
@media only screen and (min-width: 750px) {
.map-section__error {
position: absolute;
margin: 0 2rem;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); } }
.map-section__content-wrapper {
position: relative;
text-align: center;
height: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%;
flex-grow: 0; }
@media only screen and (min-width: 750px) and (max-width: 989px) {
.map-section__content-wrapper {
-ms-flex-preferred-size: 50%;
-webkit-flex-basis: 50%;
-moz-flex-basis: 50%;
flex-basis: 50%; } }
@media only screen and (min-width: 990px) {
.map-section__content-wrapper {
-ms-flex-preferred-size: 33%;
-webkit-flex-basis: 33%;
-moz-flex-basis: 33%;
flex-basis: 33%; } }
.map-section__content {
position: relative;
display: inline-block;
background-color: var(--color-bg-alt);
padding: 35px;
width: 100%;
text-align: center;
z-index: 3;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
-ms-align-content: center;
align-content: center; }
.map-section__content > * {
width: 100%; }
@media only screen and (min-width: 750px) {
.map-section__content {
background-color: var(--color-bg);
margin: 55px 0;
min-height: 300px; } }
.map-section--load-error .map-section__content {
position: static;
transform: translateY(0); }
.map-section__link {
display: block;
position: absolute;
top: 0;
left: 50%;
max-width: none;
width: 100%;
height: 100%;
z-index: 2;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
.map-section__container {
max-width: none;
width: 100%;
height: 55vh;
left: 0; }
@media only screen and (min-width: 750px) {
.map-section__container {
position: absolute;
height: 100%;
top: 0;
width: 130%; } }
.map_section__directions-btn [class^="icon"] {
height: 1em; }
.map_section__directions-btn * {
vertical-align: middle; }
.map-section__background-wrapper {
overflow: hidden;
position: relative;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%; }
@media only screen and (min-width: 750px) {
.map-section__background-wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; } }
.map-section--onboarding .map-section__background-wrapper {
min-height: 55vh; }
.map-section__image {
height: 100%;
position: relative;
top: 0;
left: 0;
width: 100%;
background-size: cover;
background-position: center; }
@media only screen and (min-width: 750px) {
.map-section__image {
position: absolute; } }
.map-section--display-map .map-section__image {
display: none !important; }
.map-section--load-error .map-section__image {
display: block !important; }
.gm-style-cc,
.gm-style-cc + div {
visibility: hidden; }
.image-bar {
overflow: hidden; }
@media only screen and (max-width: 749px) {
.image-bar {
max-width: 400px;
margin: 0 auto; } }
.image-bar__item {
display: block;
color: var(--color-overlay-title-text);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover; }
.image-bar__link:hover .image-bar__overlay::before, .image-bar__link:focus .image-bar__overlay::before {
opacity: var(--hover-overlay-opacity); }
.image-bar__link:focus {
position: relative;
z-index: 2; }
.image-bar__link:focus .image-bar__content {
outline: 1px dotted #212121;
outline: 5px auto -webkit-focus-ring-color; }
.image-bar__content, .image-bar__item {
position: relative;
width: 100%; }
.image-bar--x-small .image-bar__content, .image-bar--x-small .image-bar__item {
height: 94px; }
.image-bar--small .image-bar__content, .image-bar--small .image-bar__item {
height: 225px; }
.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
height: 357px; }
.image-bar--large .image-bar__content, .image-bar--large .image-bar__item {
height: 488px; }
.image-bar--x-large .image-bar__content, .image-bar--x-large .image-bar__item {
height: 582px; }
@media only screen and (min-width: 750px) {
.image-bar--x-small .image-bar__content, .image-bar--x-small .image-bar__item {
height: 125px; }
.image-bar--small .image-bar__content, .image-bar--small .image-bar__item {
height: 300px; }
.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
height: 475px; }
.image-bar--large .image-bar__content, .image-bar--large .image-bar__item {
height: 650px; }
.image-bar--x-large .image-bar__content, .image-bar--x-large .image-bar__item {
height: 775px; } }
.image-bar__overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay); }
.image-bar__caption {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);
width: 100%;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }
.collection-grid {
margin-bottom: -22px;
overflow: auto; }
.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: 22px; }
@media only screen and (min-width: 750px) {
.collection-grid-item {
margin-bottom: 30px; } }
.collection-grid-item__title {
color: var(--color-overlay-title-text);
position: absolute;
text-align: center;
width: 100%;
top: 50%;
padding: 0 5px;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
hyphens: auto; }
@media only screen and (min-width: 750px) {
.collection-grid-item__title {
padding: 0 15px; } }
.collection-grid-item__link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
.collection-grid-item__link:hover .collection-grid-item__title-wrapper::before, .collection-grid-item__link:focus .collection-grid-item__title-wrapper::before {
opacity: var(--hover-overlay-opacity); }
.collection-grid-item__link:focus {
opacity: 1; }
.collection-grid-item__overlay {
position: relative;
display: block;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center top; }
.collection-grid-item__title-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay); }
.custom-content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: stretch;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: auto;
margin-bottom: -30px;
margin-left: -30px; }
@media only screen and (max-width: 749px) {
.custom-content {
margin-bottom: -22px;
margin-left: -22px; } }
.custom__item {
-webkit-flex: 0 0 auto;
-moz-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-bottom: 30px;
padding-left: 30px;
max-width: 100%; }
@media only screen and (max-width: 749px) {
.custom__item {
-webkit-flex: 0 0 auto;
-moz-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 22px;
margin-bottom: 22px; }
.custom__item.small--one-half {
-webkit-flex: 1 0 50%;
-moz-flex: 1 0 50%;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
max-width: 400px;
margin-left: auto;
margin-right: auto; } }
.custom__item .collection-grid-item {
margin-bottom: 0; }
.custom__item-inner {
position: relative;
display: block;
text-align: left;
max-width: 100%; }
.custom__item-inner--video,
.custom__item-inner--collection,
.custom__item-inner--html {
display: block; }
.custom__item-inner--image {
position: relative;
margin: 0 auto; }
.custom__image {
width: 100%;
display: block;
position: absolute;
top: 0; }
/*================ Linklist ================*/
@media only screen and (max-width: 749px) {
.custom__item.custom__item--link_list {
flex: 1 0 100%;
max-width: none; } }
.custom__linklist {
margin-left: -15px;
margin-right: -15px; }
@media only screen and (min-width: 750px) {
.custom__linklist {
margin-left: -12px;
margin-right: -12px; } }
.custom__linklist-link {
display: inline-block;
padding: 10px 15px;
margin: 5px 0; }
@media only screen and (min-width: 750px) {
.custom__linklist-link {
padding: 3px 12px;
margin-top: 0;
margin-bottom: 0; } }
/*================ Flex item alignment ================*/
.align--top-middle {
text-align: center; }
.align--top-right {
text-align: right; }
.align--middle-left {
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center; }
.align--center {
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center;
text-align: center; }
.align--middle-right {
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center;
text-align: right; }
.align--bottom-left {
-ms-flex-item-align: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end; }
.align--bottom-middle {
-ms-flex-item-align: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
text-align: center; }
.align--bottom-right {
-ms-flex-item-align: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
text-align: right; }
.newsletter-section {
padding: 70px 0 77px;
color: #000; }
@media only screen and (max-width: 749px) {
.newsletter-section {
padding: 59px 0 65px;
}
}
.newsletter-section .rte p {
color: #000;
font-family: 'Noto Sans JP', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 17px;
text-align: center;
letter-spacing: 0.1em;
}
@media only screen and (max-width: 749px) {
.newsletter-section .rte p {
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 17px;
letter-spacing: 0.1em;
padding: 0 44px;
margin-top: 39px;
}
}
.newsletter-section h2 {
letter-spacing: 0.2em;
font-size: 22px;
line-height: 27px;
letter-spacing: 0.2em;
font-weight: normal;
margin-bottom: 11px;
}
@media only screen and (max-width: 749px) {
.newsletter-section h2 {
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.2em;
}
}
.newsletter-btn {
padding-left: 20px;
border-radius: 4px;
padding-right: 8px;
}
.newsletter-btn .btn {
border-radius: 4px;
background: #686464;
}
.newsletter-notice {
margin-top: 20px;
}
@media only screen and (max-width: 749px) {
.newsletter-notice {
margin-top: 0;
}
}
.rich-text__heading--large {
font-size: 1.4em; }
.rich-text__heading--small {
font-size: 0.88em; }
.rich-text__text--large {
font-size: calc(((var(--font-rich-text-large)) / (var(--font-size-base))) * 1em); }
.rich-text__text--small {
font-size: calc(((var(--font-rich-text-small)) / (var(--font-size-base))) * 1em); }
.product-card {
position: relative;
text-align: left; }
.product-card:hover .product-card__image-wrapper, .product-card:focus-within .product-card__image-wrapper {
opacity: 0.8; }
.product-card:hover .product-card__title, .product-card:focus-within .product-card__title {
/* border-bottom-color: var(--color-text); */ }
.product-card__image-with-placeholder-wrapper {
position: relative; }
.product-card__title {
border-bottom: 1px solid transparent;
display: flex; /* inline; */
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
min-height: 38px;
font-size: 10px;
margin-top: 20px;
}
@media only screen and (max-width: 749px) {
.product-card__title {
font-family: 'Noto Sans JP', sans-serif;
margin-top: 15px;
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 14px;
letter-spacing: 0.2em;
min-height: 43px;
}
}
/* */
@media only screen and (min-width: 750px) {
.product-card__title {
min-height: 40px;
font-size: 13px;
}
}
[data-section-type="video-section"] {
margin: 0 auto; }
@media only screen and (max-width: 749px) {
[data-section-type="video-section"] {
transition: width 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87), height 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87), padding 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); } }
.video-section-wrapper {
position: relative;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
height: 100%;
transition: height 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
@media only screen and (min-width: 750px) {
.video-section-wrapper {
overflow: hidden; } }
@media only screen and (max-width: 749px) {
.video-section-wrapper {
overflow: visible !important; }
.video-section-wrapper.video-is-playing {
margin: 0; }
.video-section-wrapper.video-is-loaded {
transition: height 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87), margin 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); } }
.video-section-wrapper--small.video-section-wrapper--min-height {
min-height: 175px; }
@media only screen and (min-width: 750px) {
.video-section-wrapper--small.video-section-wrapper--min-height {
min-height: 475px; } }
.video-section-wrapper--medium.video-section-wrapper--min-height {
min-height: 270px; }
@media only screen and (min-width: 750px) {
.video-section-wrapper--medium.video-section-wrapper--min-height {
min-height: 650px; } }
.video-section-wrapper--large.video-section-wrapper--min-height {
min-height: 375px; }
@media only screen and (min-width: 750px) {
.video-section-wrapper--large.video-section-wrapper--min-height {
min-height: 775px; } }
.video-section-wrapper--min-height {
transition: height 0s, margin 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
@media only screen and (max-width: 749px) {
.video-section-wrapper--min-height.video-is-loaded {
transition: height 0s, margin 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); } }
.video-background-wrapper--no-overlay {
background-color: rgba(var(--color-image-overlay-rgb), 0.2); }
/*================ Video text ================*/
.video__text-content {
text-align: center;
position: relative;
width: 100%;
top: 20px;
opacity: 1;
transition: all 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);
transition-delay: 0.3s;
z-index: 3;
padding: 40px 0; }
.video-is-playing .video__text-content {
display: none; }
.video-is-loaded .video__text-content,
.no-js .video__text-content {
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px); }
.video-is-loaded .video__text-content::after,
.no-js .video__text-content::after {
opacity: 0;
visibility: hidden;
content: none; }
.video__title {
color: var(--color-overlay-title-text); }
.video-is-paused .video__title {
display: none; }
/*================ Video styles ================*/
.video {
display: none;
position: absolute;
left: 0;
top: 0;
z-index: 2; }
.video--background {
position: absolute;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-in; }
.autoplay .video-is-loaded .video--background {
display: block;
visibility: visible;
opacity: 1; }
.video--image_with_play {
display: none;
opacity: 0;
visibility: none;
width: 100%;
height: 100%;
transition: all 0.2s ease-in; }
.video-is-playing .video--image_with_play,
.video-is-paused .video--image_with_play {
display: block;
visibility: visible;
opacity: 1; }
/*================ Video control buttons ================*/
.video-control {
display: none;
visibility: hidden;
opacity: 0;
position: absolute;
z-index: 4;
transition: all 0.1s ease-out; }
.video-control__play-wrapper {
display: none;
height: 50px; }
@media only screen and (min-width: 750px) {
.video-control__play-wrapper {
display: block; } }
.video-control__play-wrapper-mobile {
display: block;
height: 50px;
position: absolute;
top: calc(100% - 50px / 2);
left: calc(50% - 50px / 2); }
@media only screen and (min-width: 750px) {
.video-control__play-wrapper-mobile {
display: none; } }
.video-control__play-wrapper--with-text {
margin-top: 30px; }
.video-control__play {
display: flex;
justify-content: center;
align-items: center;
visibility: visible;
opacity: 1;
width: 50px;
height: 50px;
border-radius: 25px;
position: relative;
margin: 0 auto;
padding: 5px;
pointer-events: none; }
.video-background-wrapper .video-control__play {
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.video-control__play .icon {
opacity: 0.5; }
.video-is-loaded .video-control__play {
pointer-events: auto; }
.video-is-loaded .video-control__play .icon {
opacity: 1; }
.video-is-playing .video-control__play {
display: none;
visibility: hidden;
opacity: 0; }
.video-control__play::before {
content: '';
display: block;
width: 2.875rem;
height: 2.875rem;
position: absolute;
margin-left: -1.4375rem;
border-radius: 50%;
border: 2px solid white;
border-top-color: transparent;
-moz-animation: spin 0.65s infinite linear;
-o-animation: spin 0.65s infinite linear;
-webkit-animation: spin 0.65s infinite linear;
animation: spin 0.65s infinite linear;
transition: all 0.1s ease-out 0.5s;
z-index: 5;
top: 1px;
left: 50%;
opacity: 0.5; }
.video-is-loaded .video-control__play::before,
.video-is-playing .video-control__play::before,
.video-is-paused .video-control__play::before {
content: none;
display: none; }
.video-control__close-wrapper {
display: none;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
outline: none;
z-index: 3; }
.video-is-playing .video-control__close-wrapper,
.video-is-paused .video-control__close-wrapper {
display: block; }
.video-control__close {
position: relative;
width: 30px;
height: 30px;
margin: 0 auto;
font-size: 14px;
line-height: 27px;
border-radius: 15px;
background-color: white;
color: black; }
.video-control__close-wrapper:hover .video-control__close,
.video-control__close-wrapper:focus .video-control__close {
outline: auto 5px -webkit-focus-ring-color;
opacity: 0.7; }
.video-is-playing .video-control__close,
.video-is-paused .video-control__close {
display: inline-block;
visibility: visible;
opacity: 1; }
.video-control__close .icon {
display: inline-block;
width: 14px;
height: 14px;
margin: 0 auto; }
.video__pause {
position: absolute;
top: 0;
right: 0;
z-index: 3;
width: 50px;
height: 50px;
padding: 0;
border: none;
background-color: transparent;
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
@media only screen and (max-width: 749px) {
.video__pause {
display: none; } }
.video-is-playing .video__pause {
display: none; }
.video__pause .icon {
position: relative;
color: rgba(255, 255, 255, 0.5);
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
.video__pause:hover, .video__pause:focus {
outline: none; }
.video__pause:hover .icon, .video__pause:focus .icon {
color: white; }
.video__pause .icon-pause {
width: 12px;
height: 12px;
top: 11px; }
.video__pause .icon-play {
width: 16px;
height: 16px;
top: 9px; }
.video__pause-resume,
.video__pause-stop {
height: 34px;
width: 34px;
margin: 0 auto;
justify-content: center;
background-color: rgba(0, 0, 0, 0.4); }
.video__pause:hover .video__pause-resume,
.video__pause:focus .video__pause-resume, .video__pause:hover
.video__pause-stop,
.video__pause:focus
.video__pause-stop {
background-color: rgba(0, 0, 0, 0.75); }
.video__pause:focus .video__pause-resume, .video__pause:focus
.video__pause-stop {
outline: auto 5px -webkit-focus-ring-color; }
.video__pause-stop {
display: flex; }
.is-paused .video__pause-stop {
display: none; }
.video__pause-resume {
display: none; }
.is-paused .video__pause-resume {
display: flex; }
/*================ Overlay ================*/
.video__overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay);
z-index: 3; }
.video-is-playing .video__overlay {
opacity: 0; }
.video-is-playing .video__overlay:before {
content: none; }
/*================ Fallback images ================*/
.video__image {
transition: opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87);
position: absolute;
top: 0;
left: 0;
opacity: 1;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
z-index: 1; }
@media only screen and (min-width: 750px) {
.video-background-wrapper .video__image {
opacity: 0; } }
.product-recommendations__inner {
padding: 35px 0; }
@media only screen and (min-width: 750px) {
.product-recommendations__inner {
padding: 55px 0; } }
.disclosure {
position: relative; }
.disclosure__toggle {
white-space: nowrap; }
.disclosure-list {
background-color: var(--color-text-field);
border: 1px solid var(--color-border-form);
bottom: 115%;
padding: 11px 0px;
position: absolute;
display: none;
min-height: 92px;
max-height: 300px;
overflow-y: auto;
border-radius: 2px; }
.disclosure-list--visible {
display: block; }
.disclosure-list__item {
border-bottom: 1px solid transparent;
white-space: nowrap;
padding: 5px 45px 4px 15px;
text-align: left; }
.disclosure-list__item:active {
background-color: var(--color-bg-currency-selector); }
.disclosure-list__option {
color: var(--color-text-field-text); }
.disclosure-list__option:focus, .disclosure-list__option:hover {
color: var(--color-text-field-text) !important;
border-bottom: 1px solid var(--color-text-field-text); }
.disclosure-list__item--current .disclosure-list__option {
border-bottom: 1px solid var(--color-text-field-text); }
/*================ Selectors ================*/
.selectors-form {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 15px; }
@media only screen and (min-width: 750px) {
.selectors-form {
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; } }
.selectors-form__item {
padding-bottom: 15px;
margin: 0 5px; }
@media only screen and (min-width: 750px) {
.selectors-form__item {
padding-bottom: 0; }
.selectors-form__item:first-of-type {
margin-left: 0; } }
.store-availability-small-text {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.store-availability-information {
display: flex;
margin-left: 5px; }
.store-availability-information-container {
margin-left: 5px; }
.store-availability-information__title {
margin-bottom: 0; }
.store-availability-information__stock {
margin-bottom: 0; }
.store-availability-information__button {
text-decoration: underline;
cursor: pointer;
border: none;
padding: 0;
background: transparent;
margin-top: 8px; }
.store-availability-container .icon {
min-width: 12px;
min-height: 12px;
width: 12px;
height: 12px;
margin: 4px 4px 0 0; }
.store-availability-container .icon-in-stock {
fill: #00730B; }
.store-availability-container .icon-out-of-stock {
fill: #DD2200; }
.store-availability-container .icon-close {
width: 18px;
height: 18px;
margin: 0; }
.store-availability-container .store-availability-list__stock .icon {
margin: 0 2px 3px 0; }
.store-availabilities-modal {
z-index: 3;
width: 375px;
left: auto;
border: 1px solid var(--color-border);
box-sizing: border-box;
box-shadow: -4px 4px 6px rgba(58, 58, 58, 0.04); }
.store-availabilities-modal--active {
display: flex;
flex-direction: column;
transform: translateY(0);
opacity: 1; }
@media only screen and (max-width: 749px) {
.store-availabilities-modal--active {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 9999; } }
.store-availabilities-modal__header {
display: flex;
justify-content: space-between;
margin: 16px 0 16px 0;
padding: 0 24px 0 24px; }
.store-availabilities-modal__product-title {
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em);
text-transform: none;
margin-bottom: 0;
letter-spacing: 0; }
.store-availabilities-list {
overflow-y: auto;
padding: 0 20px 0 20px; }
.store-availabilities-modal__close {
margin: -14px -14px 0 0;
padding: 14px;
align-self: start; }
.store-availability-list__item {
padding-bottom: 16px; }
.store-availability-list__item::before {
content: "";
display: block;
margin: 0 0 16px 0;
border-bottom: 1px solid var(--color-border); }
.store-availability-list__address {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
font-style: normal;
margin-bottom: 0; }
.store-availability-list__location {
font-size: var(--font-size-base);
margin-bottom: 8px; }
.store-availability-list__stock {
margin-top: 8px;
margin-bottom: 16px; }
.store-availability-list__phone {
margin-bottom: 0; }
/*#### Original Custom ####*/
/* for index */
.template-index {
text-align: center; }
.inline-text-link {
font-size: 14px; }
.inline-text-link a .inline-text-link-text {
display: inline;
line-height: 44px;
padding-bottom: 4px;
border-bottom: 1px solid;
margin-right: 5px;
font-weight: normal; }
.inline-text-link a img {
display: inline-block;
vertical-align: middle;
padding-right: 10px; }
.menu-nav-wrap {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
padding: 0 0px !important;
margin-top: 0px;
margin-bottom: 20px; }
@media only screen and (max-width: 749px) {
.menu-nav-wrap {
margin-top: 20px;
margin-bottom: 0px;
}
}
.menu-nav-wrap li.category {
/*width: 25% !important; */
list-style: none !important;
margin: 0 20px !important; }
@media only screen and (max-width: 749px) {
.menu-nav-wrap li.category {
/*width: 25% !important; */
list-style: none !important;
margin: 0 8px !important; } }
.menu-nav-wrap li.category img {
margin-right: 0px !important; }
/*HeadMenu-popup*/
.popup_wrap input {
display: none;
}
.popup_overlay {
display: flex;
justify-content: center;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.5s, transform 0s 0.5s;
transform: scale(0);
}
.popup_trigger {
position: absolute;
width: 100%;
height: 100%;
}
.popup_content {
position: relative;
align-self: center;
width: 90%;
max-width: 800px;
box-sizing: border-box;
background: #fff;
line-height: 1.4em;
transition: 0.5s;
margin: 40px auto 0;
text-align: center;
}
.close_btn {
background: url("../assets/icon_close_2x.png") no-repeat 7px 7px;
background-size: 16px auto;
width: 30px;
height: 30px;
color: #000;
}
.close_btn {
position: absolute;
top: 2%;
right: 2%;
cursor: pointer;
}
.popup_wrap input:checked ~ .popup_overlay {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s;
}
.open_btn {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* display: flex; */
align-items: center;
height: 100px;
width: 100px;
margin:10px auto;
/*padding: 8px 12px;*/
/*
background-color: #fff;
font-size: 10px;
font-weight: normal;
border: 1px solid rgba(48, 65, 70, 0.44);
border-radius: 100px;
*/
cursor: pointer;
transition: .3s ease;
/* padding-top: 18px; */
}
.category {
position: relative;
}
/*
.category::before {
content: '';
height: 100px;
width: 100px;
background-color: #E1E1E1;
border-radius: 100px;
border: 1px solid #E1E1E1;
position: absolute;
left: 4px;
top: 13px;
}
.category::after {
border: 1px solid #000;
}
.open_btn img {
margin-bottom: 4px;
}
*/
@media only screen and (min-width: 750px) {
.open_btn {
height: 120px;
width: 120px;
padding-top: 28px;
font-size: 11px;
}
/*
.category::before {
content: '';
height: 120px;
width: 120px;
background-color: #E1E1E1;
border-radius: 100px;
border: 1px solid #E1E1E1;
position: absolute;
left: 4px;
top: 15px;
}
*/
}
/*END - popup*/
/*popup - menu*/
.list-popup{
}
.list-popup h2{
padding: 24px 0;
font-size: 14px;
margin-bottom: 20px !important;
}
.list-popup .list{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-right: -24px;
}
.list-popup .list li{
width: 50%;
height: 44px;
padding-right: 24px;
list-style: none;
text-align: left;
margin: 0 0 8px;
}
.list-popup .list li a{
width: 100%;
height: 44px;
font-size:12px;
font-weight: bold;
line-height: 44px;
border-bottom: 1px solid #dadbdd;
display: block;
}
.list-popup-box {
}
.list-popup-box h2{
padding-top: 24px;
font-size: 1rem;
margin-bottom: 5px !important;
}
.list-popup-box .list{
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 600px;
margin: 0 auto;
}
.list-popup-box .list li{
width: 30%;
/*padding-right: 24px;*/
list-style: none;
text-align: center;
margin: 0 1.5% 3%;
}
.list-popup-box .list li a{
width: 180px;
height: 180px;
font-size:12px;
line-height: 1.5;
border: 1px solid #dadbdd;
display: grid;
align-items: center;
letter-spacing: 2px;
}
@media only screen and (max-width: 749px) {
.list-popup-box .list li a{
width: 100%;
height: 25vw;
}
.list-popup-box .list.brand li{
width: 40%;
}
.list-popup-box .list.brand li a{
height: 34vw;
}
}
.list-popup-box .list li a:hover {
border-color: #000000;
background: #DBD9D9;
}
.list-popup-circle {
}
.list-popup-circle h2{
padding-top: 24px;
font-size: 1rem;
margin-bottom: 5px !important;
}
.list-popup-circle .list{
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
max-width: 600px;
margin: 0 auto;
}
.list-popup-circle .list li{
width: 120px;
height: 120px;
/*padding-right: 24px;*/
list-style: none;
text-align: center;
margin: 0 0 8px;
}
.list-popup-circle .list li a{
width: 100%;
height: 120px;
font-size: 16px;
line-height: 80px;
border: 1px solid #dadbdd;
border-radius: 120px;
display: grid;
align-items: center;
}
.list-popup-circle .list li a:hover {
border-color: #000000;
background: #DBD9D9;
}
/*END - popup - menu*/
/*START - snap collection menu */
.snap-collection-menu h2{
padding-top: 24px;
font-size: 14px;
margin-bottom: 10px !important;
}
.snap-collection-menu .list{
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
}
.snap-collection-menu .list li{
width: 120px;
height: 120px;
/*padding-right: 24px;*/
list-style: none;
text-align: center;
margin: 0 0 8px;
}
.snap-collection-menu .list li a{
width: 100%;
height: 120px;
font-size: 16px;
font-weight: 400;
line-height: 80px;
border: 1px solid #dadbdd;
border-radius: 120px;
display: grid;
align-items: center;
font-family: Optima;
}
/* END - snap collection menu */
.featured-collection {
margin-top: 24px;
margin-bottom: 60px;
padding-top: 68px;
padding-bottom: 90px;
}
@media only screen and (max-width: 749px) {
.featured-collection {
padding-left: 8px;
padding-right: 8px;
padding-top: 41px;
padding-bottom: 10px;
}
}
.featured-collection-header {
margin: 0 auto;
max-width: 900px;
margin-bottom: 80px;
}
@media only screen and (max-width: 960px) {
.featured-collection-header{
margin-left: 17px;
margin-bottom: 34px;
}
}
.featured-collection-header h2 {
font-style: normal;
font-weight: normal;
font-size: 25px;
line-height: 30px;
letter-spacing: 0.2em;
font-family: "Optima";
}
@media only screen and (max-width: 749px) {
.featured-collection-header h2 {
margin-bottom: 8px;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.2em;
}
}
.featured-collection-header p {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.1em;
}
@media only screen and (max-width: 749px) {
.featured-collection-header p {
margin-top: 10px;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 17px;
letter-spacing: 0.1em;
}
}
.grid--uniform .grid__item {
padding-left: 10px;
}
.featured-text-link-wrapper {
width: 80%;
text-align: center;
margin: 0 auto;
margin-top: 30px;
}
.featured-text-link {
max-width: 400px;
text-align: left;
font-size: 16px;
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #1b2528;
display: inline-block;
width: 100%;
letter-spacing: 0.12em; }
@media only screen and (max-width: 749px) {
.featured-text-link {
font-size: 13px; }
}
/* featured hot contents */
/* featured hot contents */
.featured-hot-contents{
margin: 30px 0; }
.featured-hot-contents .featured-hot-contents-collections {
display: flex;
flex-wrap: wrap;
justify-content: center; }
.featured-hot-contents .featured-hot-contents-collections .featured-hot-contents-collection {
width: 33%;
padding: 10px; }
.featured-hot-contents .featured-hot-contents-collections .featured-hot-contents-collection a {
display: inline-flex;
align-items: center; }
.featured-hot-contents .featured-hot-contents-collections .featured-hot-contents-collection .arrow-next img {
display: inline;
height: 10px;
margin-left: 8px; }
.featured-hot-contents .featured-hot-contents-collections .featured-hot-contents-collection .collection-title,.collection-link {
font-size: 14px; }
.featured-hot-contents .featured-hot-contents-collections .featured-hot-contents-collection .collection-image {
height: auto;
width: 140px; }
@media only screen and (max-width: 749px) {
.featured-hot-contents .featured-hot-contents-collections .featured-hot-contents-collection .arrow-next img {
height: 8px;
}
}
.featured-hot-contents .featured-hot-contents-title{
text-align: center; }
@media (max-width: 960px){
.featured-hot-contents .featured-hot-contents-collections {
display: block;
text-align: left; }
.featured-hot-contents .featured-hot-contents-collections .featured-hot-contents-collection {
width: 100%; }
}
@media only screen and (max-width: 749px) {
.featured-hot-contents .featured-hot-contents-collections .featured-hot-contents-collection .collection-image {
width: 120px;
min-height: 160px; }
.featured-hot-contents .featured-hot-contents-collections .featured-hot-contents-collection .collection-title {
font-size: 14px; }
.featured-hot-contents .featured-hot-contents-collections .featured-hot-contents-collection .collection-link {
font-size: 10px; }
.featured-hot-contents .featured-hot-contents-collections .featured-hot-contents-collection .collection-date {
font-size: 10px; }
}
.collection-right {
text-align: left;
width: auto;
height: auto;
margin: 0 0 0 20px;
padding: 0;
}
.collection-right p {
margin: 0px !important;
}
.collection-date {
font-size: 10px;
color: #cccccc;
padding-bottom: 8px;
}
/*END - featured hot contents */
/* Best seller */
.best-seller {
margin-top: 40px;
margin-bottom: 60px;
padding-top: 68px;
padding-bottom: 0;
}
@media only screen and (max-width: 749px) {
.best-seller {
padding-top: 33px;
padding-left: 0;
padding-right: 0;
}
}
.best-seller-header {
margin: 0 auto;
max-width: 900px;
margin-bottom: 60px;
}
@media screen and (max-width: 749px) {
.best-seller-header {
margin-bottom: 45px;
}
}
.best-seller-header h2 {
font-style: normal;
font-weight: normal;
font-size: 25px;
line-height: 30px;
letter-spacing: 0.2em;
margin-bottom: 9px;
font-family: "Optima";
}
@media screen and (max-width: 749px) {
.best-seller-header h2 {
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.2em;
margin-bottom: 5px;
}
}
.best-seller-header h2::before {
content: "";
width: 57px;
margin-right: 14px;
margin-bottom: 7px;
display: inline-block;
border-top: 1px solid #000000;
}
.best-seller-header h2::after {
content: "";
width: 57px;
margin-left: 14px;
margin-bottom: 7px;
display: inline-block;
border-top: 1px solid #000000;
}
.best-seller-header p {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1em;
}
@media screen and (max-width: 749px) {
.best-seller-header p {
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 17px;
text-align: center;
letter-spacing: 0.1em;
}
}
.non-max-width {
max-width: none !important;
}
.non-max-height {
max-height: none !important;
}
.product-card-desc-best-seller {
max-width: none !important;
margin-top: 13px !important;
margin-left: 9px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
}
.price__vendor--best-seller {
font-family: 'Noto Sans JP', sans-serif;
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 14px;
letter-spacing: 0.2em;
text-align: left;
}
.product-card__title--best-seller {
font-family: 'Noto Sans JP', sans-serif;
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 14px;
letter-spacing: 0.2em;
margin-top: 0 !important;
}
/* END - Best seller */
/* Ranking */
.ranking {
margin-top: 40px;
margin-bottom: 50px;
padding-top: 68px;
padding-bottom: 90px;
}
@media only screen and (max-width: 749px) {
.ranking {
padding-left: 0;
padding-right: 0;
}
}
.ranking-header {
margin: 0 auto;
max-width: 900px;
margin-bottom: 50px;
}
.ranking-header h2 {
font-style: normal;
font-weight: normal;
font-size: 25px;
line-height: 30px;
letter-spacing: 0.2em;
margin-bottom: 9px;
font-family: "Optima";
}
@media only screen and (max-width: 749px) {
.ranking-header h2 {
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 24px;
text-align: center;
letter-spacing: 0.2em;
}
}
.ranking-header h2::before {
content: "";
width: 57px;
margin-right: 14px;
margin-bottom: 7px;
display: inline-block;
border-top: 1px solid #000000;
}
.ranking-header h2::after {
content: "";
width: 57px;
margin-left: 14px;
margin-bottom: 7px;
display: inline-block;
border-top: 1px solid #000000;
}
.ranking-header p {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1em;
}
.ranking-switch{
display: flex;
flex-direction: row;
justify-content: space-evenly;
max-width: 947px;
margin: 0 auto 46px;
}
.ranking-switch li{
font-weight: normal;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1em;
width: 100px;
cursor: pointer;
}
.ranking-switch li.active::after{
width: 80%;
margin: 0 auto;
margin-top: 6px;
border-top: 2px solid;
content: "";
display: block;
}
.ranking-collection {
display: none;
}
/* END - Ranking */
/* linkbanner for newuser */
.linkbanner-newuser-wrapper {
position: relative; }
.linkbanner-newuser-image-wrapper {
/*background-color: #fff;
opacity: 0.7;*/
max-width: 670px;
margin: 0 auto;
margin-top: 42px;
}
@media only screen and (max-width: 749px) {
.linkbanner-newuser-image-wrapper img{
width: 100%;
aspect-ratio: 345/50;
object-fit: cover;
max-height: 40px;
}
}
@media only screen and (max-width: 749px) {
.linkbanner-newuser-image-wrapper{
margin-top: 20px;
width: 94vw; }}
.linkbanner-newuser-text-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
@media only screen and (max-width: 749px) {
.linkbanner-newuser-text-wrapper {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -40%);
-webkit-transform: translate(-50%, -40%);
-ms-transform: translate(-50%, -40%); }
}
.linkbanner-newuser-jp {
color: white;
font-weight: 500;
font-size: 12px;
line-height: 17px;
letter-spacing: 0.1em;
margin-bottom: 0px;
}
@media only screen and (max-width: 749px) {
.linkbanner-newuser-jp {
font-style: normal;
font-size: 11.7px;
line-height: 16px;
letter-spacing: 0.1em;
}
}
.linkbanner-newuser-en {
font-family: 'Optima nova';
color: white;
margin-top: 3px;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
letter-spacing: 0.15em;
}
@media only screen and (max-width: 749px) {
.linkbanner-newuser-en {
font-weight: normal;
font-size: 9.7px;
line-height: 12px;
letter-spacing: 0.15em;
}
}
.linkbanner-newuser-title {
font-size: 17px;
letter-spacing: 0.14em;
margin-bottom: 4px; }
/* feature new user */
@media (min-width: 750px) {
.feature-newuser {
width: 100%;
margin-top: 140px;
margin-bottom: 140px;
display: flex;
align-items: center;
}
.feature-newuser .feature-newuser-image-wrapper .feature-newuser-image {
width: 480px;
height: 350px;
object-fit: cover;
object-position: top;
}
.feature-newuser .feature-newuser-text-wrapper {
text-align: left;
padding-right: 10%;
padding-left: 6%;
}
.feature-newuser .feature-newuser-text-wrapper .feature-newuser-label {
font-size: 14px;
line-height: 24px;
letter-spacing: 1.6px;
margin-bottom: 20px;
}
.feature-newuser .feature-newuser-text-wrapper .feature-newuser-title {
font-size: 20px;
line-height: 28px;
letter-spacing: 2px;
margin-bottom: 20px;
}
.feature-newuser .feature-newuser-text-wrapper .feature-newuser-text {
font-size: 14px;
line-height: 24px;
letter-spacing: 1.6px;
margin-bottom: 40px;
}
.feature-newuser .feature-newuser-text-wrapper .text-link {
text-align: left;
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #1b2528;
display: inline-block;
width: 80%;
}
}
/* smart phone */
@media only screen and (max-width: 749px) {
.feature-newuser {
width: 100%;
margin-top: 60px;
margin-bottom: 60px;
position: relative;
}
.feature-newuser .feature-newuser-image-wrapper {
background-color: #000;
display: inline-block;
}
.feature-newuser .feature-newuser-image-wrapper .feature-newuser-image {
display: block;
opacity: 0.88;
width: 100%;
}
.feature-newuser .feature-newuser-text-wrapper {
position: absolute;
top: 0;
text-align: left;
color: #fff;
padding-left: 5%;
padding-right: 5%;
padding-top: 22%;
}
.feature-newuser .feature-newuser-text-wrapper .feature-newuser-label {
font-size: 14px;
line-height: 24px;
letter-spacing: 1.6px;
margin-bottom: 20%;
}
.feature-newuser .feature-newuser-text-wrapper .feature-newuser-title {
font-size: 20px;
line-height: 28px;
letter-spacing: 2px;
margin-bottom: 10%;
color: #fff;
}
.feature-newuser .feature-newuser-text-wrapper .feature-newuser-text {
font-size: 14px;
line-height: 24px;
letter-spacing: 1.6px;
margin-bottom: 10%;
color: #fff;
}
.feature-newuser .feature-newuser-text-wrapper .text-link {
position: relative;
color: #fff;
border-bottom: 1px solid #fff;
display: inline-block;
width: 94%;
padding-bottom: 10px;
margin-left: 3%;
}
.feature-newuser .feature-newuser-text-wrapper .text-link .arrow-right-img {
fill: #fff;
}
}
/*END - feature new user */
/* feature snap */
/* Snap Collection style */
@media only screen and (min-width: 750px) {
.collection-snap-model {
display: flex;
}
.snap-model-profile {
margin-left: 40px;
}
.collection-snap-image-data {
width: 420px;
}
}
@media only screen and (min-width: 920px) {
.collection-snap-image-data {
width: 540px;
}
}
.featured-snap-title {
margin-bottom: 30px;
}
.collection-snap-model {
margin-bottom: 20px;
}
.snap-model-profile {
display: flex;
}
.model-profile-text {
margin-left: 20px;
}
.collection-snap-image-data {
max-width: 750px;
}
.model-profile-icon-xs {
border-radius: 50%;
height: 112px;
width: 112px;
}
.model-profile {
display: flex;
align-items: center;
margin-left: 10px;
}
.model-profile-icon {
border-radius: 50%;
height: 160px;
width: 160px;
}
@media only screen and (max-width: 749px) {
.model-profile-icon-xs {
height: 80px;
width: 80px;
}
.model-profile-icon {
height: 120px;
width: 120px;
}
.snap-model-profile {
margin-left: 10px;
}
}
.snap-collection-nav-wrap {
margin-top: 20px;
height: 2em;
width: 100%;
position: relative;
overflow: hidden;
}
.snap-collection-nav {
height: 5em;
z-index: 1;
width: 100%;
padding-top: 2px;
margin-top: 1px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.snap-collection-nav ul {
display: inline-table;
max-width: 100%;
}
.snap-collection-nav ul li {
display: table-cell;
padding-left: 10px;
}
.snap-collection-nav ul li a {
padding: 4px 9px 4px 9px;
border: 1px solid #D3D7D5;
font-size: 10pt;
}
.snap-collection-nav ul li a.active {
background-color: #4A5356;
color: #fff;
}
.snap-collection-list {
margin-top: 20px;
}
.snap-block.snap-grid-medium {
max-width: 100%;
margin: 0 0 60px 0;
padding: 0;
clear: both;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snap-grid-medium .snap-block__list .snap-block__item {
box-shadow: none;
border-radius: 0;
background: none;
position: relative;
padding: 0 0 10px 0px;
margin: 0 0 10px;
margin-right: 0 !important;
margin-left: 0 !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snap-block__list {
-moz-flex-direction: row;
-ms-flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-moz-align-items: stretch;
-ms-align-items: stretch;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: stretch;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
display: flex;
}
.snap-grid-medium .snap-block__list {
margin-left: -10px;
}
.snap-grid-medium .snap-block__list .snap-block__item {
width: 33.3333333%;
padding-left: 10px;
}
.snap-block__image-wrap {
margin: 0 auto 0;
position: relative;
width: 100%;
}
@media (min-width: 750px) {
.snap-grid-medium .snap-block__list {
margin-left: -20px;
}
.snap-grid-medium .snap-block__list .snap-block__item {
padding-left: 20px;
}
}
.snap-grid-medium .snap-block__image-link {
border-radius: 0;
margin-bottom: 0;
filter: alpha(opacity=50);
transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
opacity: 1;
overflow: hidden;
background: none;
text-align: center;
margin-right: 0;
}
.snap-grid-medium .snap-block__image {
opacity: 1;
}
.snap-block__image {
width: 100%;
height: auto;
min-height: 150px;
display: inline;
-webkit-filter: blur(3px);
filter: blur(3px);
transition: filter 400ms, -webkit-filter 400ms;
}
.snap-block__image.lazyloaded {
-webkit-filter: blur(0);
filter: blur(0);
}
.snap-block__txt-wrap {
padding-left: 10px;
padding-right: 10px;
margin: 0;
text-align: left;
}
.snap-block .snap-block__name {
text-align: left;
font-weight: normal;
margin: 0 0;
font-size: 12px;
}
.snap-block__name, .snap-block__title {
text-transform: none;
}
@media (max-width: 749px) {
.snap-block .snap-block__name {
font-size: 10px;
}
.snap-block__txt-wrap {
padding-left: 6px;
padding-right: 6px;
line-height: 1.12em;
margin-top: -3px;
}
}
.snap-block__item{
}
/*END - feature snap */
/*START - introduction */
.intro-wrapper {
margin-top: 40px; }
.intro-contents-wrapper {
margin-top: 30px;
}
.intro-main {
position: relative;
line-height: 0;
padding: 0;
margin: 0;
}
.intro-text-wrapper {
position: absolute;
bottom: 45px;
left: 20px;
right: 20px;
text-align: left;
line-height: normal;
}
.intro-text-wrapper p {
color: #fff; }
.intro-text-wrapper .intro-text-header {
font-size: 16px;
letter-spacing: 0.1em;
}
.intro-text-wrapper .intro-title {
font-size: 24px;
letter-spacing: 0.04em;
}
.intro-text-wrapper .intro-subtitle {
letter-spacing: 0.04em;
}
.intro-sub {
position: relative;
}
@media only screen and (max-width: 749px) {
.intro-sub {
margin-top: -1px;
}
}
.intro-message-wrapper {
line-height: normal;
background: #C1B9B0;
background-blend-mode: multiply;
mix-blend-mode: normal;
text-align: left;
padding: 40px 20px;
}
.intro-message-wrapper p {
color: #fff; }
@media (min-width: 750px) {
.intro-contents-wrapper {
margin-top: 40px;
background: #C1B9B0;
}
.intro-contents {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
background: #C1B9B0;
}
.intro-main {
max-width: 400px;
align-items: center;
}
.intro-sub {
display: flex;
align-items: center;
}
.intro-message-wrapper {
padding-left: 40px;
font-size: 14px;
letter-spacing: 0.2em;
}
.intro-text-wrapper {
bottom: 34%;
left: 40px;
}
}
/*END - introduction */
/*START - point */
.point-section-wrapper {
padding-top: 60px;
padding-bottom: 60px;
background: rgba(193, 185, 176, 0.15);
background-blend-mode: multiply; }
.point-wrapper {}
.point-contents p {
letter-spacing: 0.2em;
font-size: 11px;
}
.point-contents-image {
padding: 0 10px;
}
@media (min-width: 750px) {
.point-design-image-wrapper {
display: inline-flex;
}
.point-design-image {
padding: 8px;
}
}
.point-contents-header {
/*display: inline-flex;
align-items: center;*/
padding-left: 20px;
padding-right: 20px;
display: flex;
align-items: center;
}
.point-contents-header span {
min-width: 270px;
text-align: left;
padding-left: 8px;
padding-right: 10px;
letter-spacing: 0.2em;
}
.point-contents-header p {
font-size: 13px;
}
.point-contents-text {
text-align: left;
margin: 0px 20px;
letter-spacing: 0.2em;
}
.point-contents-label {
border: 1px solid #666;
border-radius: 100px;
height: 64px;
width: 64px;
min-width: 64px;
font-size: 12px;
line-height: 60px;
background: #fff;
margin-right: 14px;
}
.point-contents-label-price {
line-height: 1.3;
padding-top: 14px;
}
.point-taste, .point-price {
margin-top: 40px;
}
.hr-border-90 {
width: 94%;
border-bottom: 0.7px solid #666;
margin: 16px auto;
}
/*END - point */
/*START - support */
.support-wrapper {
margin-top: 60px;
margin-bottom: 45px;
}
.support-text-wrapper {
margin-top: 30px;
text-align: left;
padding: 0 10px;
}
.support-text-wrapper p {
letter-spacing: 0.2em;
font-size: 13px;
line-height: 19.5px;
}
.support-image-wrapper {
margin-top: 30px;
padding: 0 10px;
}
.support-guide, .support-instalive {
margin-top: 60px;
}
.support-guide-btn {
margin-top: 20px;
margin-bottom: 20px;
}
.support-btn {
display: inline-block;
padding: 8px;
border-radius: 60px;
border: 1px solid #686464;
background: #686464;
width: 318px;
color: #fff;
line-height: 1.3em; }
.support-btn span {
font-size: 10px; }
.support-content-header {
border: 1px solid #333;
margin: 20px 10px;
padding: 20px;
text-align: center;
margin-bottom: 40px;
}
.support-content-header h3 {
font-family: Times New Roman;
font-style: normal;
font-weight: normal;
font-size: 20px;
margin-bottom: 10px;
}
.support-content-header .support-content-header__text {
font-family: YuGothic;
letter-spacing: 0.2em;
margin: 0 auto;
}
.support-content-header__text-model {
width: 180px;
}
.support-content-header__text-guide {
width: 240px;
}
.support-content-header__text-live {
width: 100%;
}
.support-live-image__item {
margin: 0 10px;
}
@media only screen and (min-width: 750px) {
.support-content-header__text-model {
width: 100%;
}
.support-content-header__text-guide {
width: 100%;
}
.support-live-image-wrapper {
display: flex;
margin: 0 6px;
}
.support-live-image__item {
margin: 0 3px;
}
}
/*END - support */
/*START - instalive */
.featured-instalive-wrapper {
padding-top: 100px;
padding-bottom: 90px;
}
.featured-instalive-title {
margin-bottom: 60px;
}
.featured-instalive-title h2 {
font-style: normal;
font-weight: normal;
font-size: 25px;
line-height: 30px;
letter-spacing: 0.2em;
margin-bottom: 9px;
}
.featured-instalive-title h2::before {
content: "";
width: 57px;
margin-right: 14px;
margin-bottom: 7px;
display: inline-block;
border-top: 1px solid #000000;
}
.featured-instalive-title h2::after {
content: "";
width: 57px;
margin-left: 14px;
margin-bottom: 7px;
display: inline-block;
border-top: 1px solid #000000;
}
.featured-instalive-title p {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1em;
}
.featured-instalive {
/*margin-top: 60px;*/
margin-bottom: 10px;
}
.instalive-list {
display: flex;
justify-content: center;
column-gap: 63px;
}
.instalive-list .instalive-item {
margin: 0;
width: 100%;
}
.instalive-logo-cohina img{
margin-top: 11px;
width: 117px;
}
.instalive-logo-strata img{
width: 107px;
margin-top: 5px;
}
.instalive-image-link .instalive-image{
width: 100%;
}
.instalive-image-link .instalive-image{
width: 100%;
}
@media only screen and (max-width: 749px) {
.instalive-item-3,
.instalive-item-4,
.instalive-item-5 {
display: none;
}
}
/*END - instalive */
/*START - media */
.featured-media {
padding-top: 60px;
padding-bottom: 92px;
}
.featured-media-title h2 {
font-style: normal;
font-weight: normal;
font-size: 25px;
line-height: 30px;
letter-spacing: 0.2em;
margin-bottom: 9px;
}
.featured-media-title h2::before {
content: "";
width: 57px;
margin-right: 14px;
margin-bottom: 7px;
display: inline-block;
border-top: 1px solid #000000;
}
.featured-media-title h2::after {
content: "";
width: 57px;
margin-left: 14px;
margin-bottom: 7px;
display: inline-block;
border-top: 1px solid #000000;
}
.featured-media-title p {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1em;
}
.loop_wrap {
display: flex;
overflow: hidden;
max-width: 746px;
}
.loop_wrap img {
width: auto;
height: 70px;
max-width: none;
mix-blend-mode: darken; }
@media (max-width: 749px) {
.loop_wrap img {
height: 55px;
}
}
@keyframes loop {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
@keyframes loop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}
.loop_wrap img:first-child {
animation: loop 60s -30s linear infinite;
}
.loop_wrap img:last-child {
animation: loop2 60s linear infinite;
}
/*END - media */
/*START - accounts */
.featured-accounts {
padding-top: 90px;
padding-bottom: 88px;
display: flex;
flex-direction: row;
justify-content: center;
column-gap: 62px;
}
.account-block {
width: 300px;
height: 150px;
background-color: #ACA59B;
color: #ffffff;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.account-title {
font-family: Optima;
margin-top: 25px;
margin-bottom: 0;
font-size: 18px;
line-height: 22px;
letter-spacing: 0.1em;
}
.account-border {
border-top: 1px solid #ffffff;
width: 60px;
margin: 0 auto;
margin-top: 10px;
}
.account-description {
margin-top: 14px;
font-weight: 500;
font-size: 10px;
line-height: 15px;
letter-spacing: 0.1em;
color: #ffffff;
}
.account-icon{
width: 30px;
height: 30px;
position: absolute;
bottom: 10px;
margin: 0 auto;
left: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
}
.account-icon__instagram{
bottom: 19px;
}
.account-icon__mail{
width: 29px;
height: 21px;
bottom: 15px;
}
/*END - accounts */
/*START - quotes */
.quotes-section-bg-wrapper {
background: rgba(193, 185, 176, 0.15);
background-blend-mode: multiply;
}
.quotes-section-wrapper {
margin-top: 20px;
padding-top: 40px;
padding-bottom: 40px;
}
.quote-navigation {
color: #888 !important;
}
.quotes-box {
display: flex;
margin-bottom: 12px;
}
.quotes-box-item {
margin-left: 12px;
}
.quotes-item {
padding: 12px;
background: #C1B9B0;
min-height: 360px;
}
.quotes-item__img {
width: 100px;
height: 100%;
}
.quotes-item__author {
letter-spacing: 0.1em;
color: #FFFFFF;
text-align: left;
display: block;
margin-bottom: 12px;
}
.quotes-item__comment {
color: #625C58;
background: #fff;
letter-spacing: 0.1em;
font-size: 12px;
line-height: 15px;
display: block;
padding: 12px;
text-align: left;
}
.quotes-item__quote {
color: #625C58;
background: #fff;
letter-spacing: 0.1em;
font-size: 12px;
line-height: 15px;
display: block;
padding: 8px;
text-align: left;
}
#quotes .swiper-wrapper{
max-width: 800px;
}
#quotes .swiper-button-next:after, .swiper-button-prev:after {
font-size: 17px !important;
}
#quotes .swiper-button-next {
right: 0px !important;
}
@media (min-width: 751px) {
#quotes .swiper-button-next {zz
right: -8px !important;
}
#quotes .swiper-button-prev {
left: -8px !important;
}
.quotes-section-wrapper {
margin-top: 20px;
padding-top: 40px;
padding-bottom: 40px;
background: #F4F3F2;
}
}
#quotes .swiper-pagination {
position: static;
margin-top: 20px;
}
#quotes .swiper-pagination-bullet-active {
background: #EA8D8D !important;
}
#quotes .swiper-wrapper {
margin-left: 15px !important;
}
@media (max-width: 750px) {
#quotes .swiper-wrapper {
margin-left: 17px !important;
}
}
/*END - quotes */
/*START - instafeed */
.featured-instafeed {
margin-bottom: 60px;
}
/*END - instafeed */
.section-wrapper {
margin-top: 60px;
margin-bottom: 20px;
}
/* Ranking Badge */
/*
.ranking_no {
background: #4A5356;
position: absolute;
top: 4px;
right: 4px;
width: 21px;
height: 21px;
font-size: 14px;
padding: 0px;
margin: 0px;
text-align: center;
color: #fff;
line-height: 1.4;
padding-top: 1px; }
@media only screen and (min-width: 750px) {
.ranking_no {
right: 16px;
}
}
*/
.ranking_no {
width: 250px;
height: 250px;
margin: 0 auto;
}
/* ラベル部分 左上ã«è¡¨ç¤º */
.ranking_no::before {
content: "";
top: 0;
left: 0;
border-bottom: 30px solid transparent;
border-left: 30px solid #DFCEB5; /* ラベルã®è‰²ã¯ã“ã“ã§å¤‰æ›´ */
position: absolute;
z-index: 80;
}
.ranking_no::after {
content: attr(data-label);
display: block;
top: 1px;
color: #fff; /* æ–‡å—色ã¯ã“ã“ã§å¤‰æ›´ */
left: 5px;
position: absolute;
z-index: 81;
font-family: Optima;
font-style: normal;
font-weight: 400;
font-size: 30px;
line-height: 36px;
letter-spacing: 0.1em;
}
@media only screen and (max-width: 749px) {
.ranking_no::after {
top: 1px;
left: 1px;
font-weight: 400;
font-size: 12px;
line-height: 15px;
width: 17px;
text-align: center;
letter-spacing: 0.1px;
}
}
.ranking_no_one::before {
border-left: 76px solid #DDD058; /* ラベルã®è‰²ã¯ã“ã“ã§å¤‰æ›´ */
}
@media only screen and (max-width: 749px) {
.ranking_no_one::before {
border-left: 30px solid #DDD058; /* ラベルã®è‰²ã¯ã“ã“ã§å¤‰æ›´ */
}
}
.ranking_no_second::before {
border-left: 76px solid #C4BFBA; /* ラベルã®è‰²ã¯ã“ã“ã§å¤‰æ›´ */
}
@media only screen and (max-width: 749px) {
.ranking_no_second::before {
border-left: 30px solid #C4BFBA; /* ラベルã®è‰²ã¯ã“ã“ã§å¤‰æ›´ */
}
}
.ranking_no_third::before {
border-left: 76px solid #B88E50; /* ラベルã®è‰²ã¯ã“ã“ã§å¤‰æ›´ */
}
@media only screen and (max-width: 749px) {
.ranking_no_third::before {
border-left: 30px solid #B88E50; /* ラベルã®è‰²ã¯ã“ã“ã§å¤‰æ›´ */
}
}
@media only screen and (min-width: 750px) {
.ranking_no::before {
border-bottom: 76px solid transparent;
border-left: 76px solid #DFCEB5; /* ラベルã®è‰²ã¯ã“ã“ã§å¤‰æ›´ */
}
.ranking_no::after {
top: 6px;
left: 13px;
font-size: 30px;
}
.ranking_no_one::before {
border-left: 76px solid #DDD058; /* ラベルã®è‰²ã¯ã“ã“ã§å¤‰æ›´ */
}
.ranking_no_second::before {
border-left: 76px solid #C4BFBA; /* ラベルã®è‰²ã¯ã“ã“ã§å¤‰æ›´ */
}
.ranking_no_third::before {
border-left: 76px solid #B88E50; /* ラベルã®è‰²ã¯ã“ã“ã§å¤‰æ›´ */
}
}
.header-collection-border {
border-top: 1px solid rgba(48,65,70,0.6);
width: 32px;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
}
.title-border {
border-top: 1px solid rgba(48,65,70,0.6);
width: 183px;
margin-top: 7px;
margin-bottom: 10px; }
@media only screen and (max-width: 749px) {
.title-border {
margin: 0;
}
}
.title-border.text-center {
margin: 7px auto 10px;
}
.pull-left {
float: left; }
.right {
margin: 0 0 0 auto; }
a:hover {
text-decoration: none; }
input[type=text]:focus {
outline: none;
}
select:focus, textarea:focus, a:focus, input:focus, button:focus, div:focus, nav:focus, ul:focus {
outline: none !important;
}
/* Header */
.header-nav {
height: 66px;
width: 100%;
color: #1b2528;
position: static;
background: #EFEFEF;
text-align: center;
border-bottom: 1px solid rgba(137, 137, 137, 0); }
.header-nav .header-nav-inner {
display: inline-flex;
align-items: center;
max-width: 1024px; /* max-width-config */
margin: 0 auto;
position: relative;
background: #EFEFEF;
z-index: 201;
height: 100%;
width: 100%;}
.header-nav a.main-logo {
width: 150px;
line-height: 0; }
.header-nav .header-nav-inner .pc-nav-top {
margin-left: auto; }
.header-nav .header-nav-inner .pc-nav-top ul li {
font-family: "Optima";
font-size: 13px;
letter-spacing: 0.08em;
display: inline-block;
margin-right: 16px;
cursor: pointer;}
.header-nav a.browse.icon {
display: none;
position: absolute;
left: 0;
top: 0;
padding: 0;
background: url("../assets/icon_navi_2x.png") no-repeat 15px 16px;
background-size: 20px 18px;
height: 0;
padding-top: 50px;
width: 50px;
overflow: hidden; }
.header-nav a.browse.icon.active {
background: url("../assets/icon_close_2x.png") no-repeat 17px 18px;
background-size: 16px auto; }
.header-nav .js-mobile-nav-toggle.hidden svg {
display: none;
}
.header-nav .js-mobile-search-toggle.hidden svg {
display: none;
}
.header-nav .js-wishlist-toggle.hidden svg {
display: none;
}
.header-nav a.browse.icon.hidden {
display: none; }
.header-nav a.lookup.icon {
display: none;
position: absolute;
left: 40px;
top: 0;
padding: 0;
background: url("../assets/icon_search_2x.png") no-repeat 15px 16px;
background-size: 20px 20px;
height: 0;
padding-top: 50px;
width: 50px;
overflow: hidden; }
.header-nav .js-mobile-search-toggle.active {
left: 0;
position: absolute;
}
.header-nav .js-mobile-search-toggle.active .icon-search {
display: none;
}
.header-nav a.lookup.icon.hidden { display: none; }
.header-nav a.wishlist.icon {
right: 34px;
top: 0;
padding: 0;
background: url(heart.svg) no-repeat 15px 16px;
background-size: 20px 20px;
height: 0;
padding-top: 50px;
width: 50px;
overflow: hidden; }
.header-nav a.cart.icon {
right: 34px;
top: 0;
padding: 0;
background: url("../assets/icon_cart_2x.png") no-repeat 48px 48px;
background-size: 24px 24px;
height: 40px;
padding-top: 8px;
width: 40px;
overflow: hidden; }
.side-nav {
display: none;
width: 100%;
height: auto;
top: 50px;
bottom: 0;
left: 0;
}
.side-nav.js-menu--is-open {
display: block;
position: fixed;
top: 50px;
background: #fff;
z-index: 20;
}
@media (max-width: 960px) {
.header-nav {
top: inherit;
position: fixed;
height: 50px;
width: 100vw;
color: #1b2528;
z-index: 100; }
.header-nav .header-nav-inner a.main-logo {
padding-top: 0;
position: absolute;
top: 16px;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
.header-nav .pc-nav-top {
display: none; }
.header-nav a.browse.icon {
display: block; }
.header-nav a.lookup.icon {
display: block; }
.header-nav .header-nav-inner .header-nav-icons {
margin-left: auto;
}
}
/* START - PC Category Nav */
.pc-category-nav {
background: #F4F3F2;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
.pc-category-nav ul {
display: inline-flex;
justify-content: center;
}
.pc-category-nav ul li {
padding-right: 18px;
font-size: 13px;
}
@media (max-width: 960px) {
.pc-category-nav {
display: none;
}
}
/* END - PC Category Nav */
/* START - PC Search bar */
.pc-search {
margin-left: 50px;
}
.pc-search .search-header-bar__form {
position: relative;
}
.pc-search .search-bar__input {
padding-left: 30px;
min-height: 30px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 13px;
}
.pc-search .search-bar__submit .icon {
width: 1.0em;
}
.pc-search .search-bar__submit {
z-index: 1;
position: absolute;
left: -3px;
top: 0;
display: inline-block;
padding: 0 12px;
height: 100%;
vertical-align: middle;
background-color: transparent;
border: 0;
margin: 0;
color: #000;
width: 0px;
}
@media (max-width: 960px) {
.pc-search {
display: none;
}
}
/* END - PC Search bar */
/* Layout common */
/* Collection Template */
.collection-wrapper {
padding-left: 8px;
padding-right: 8px;
margin-bottom: 60px;
}
.template-collection .collection-description {
max-width: 640px;
margin: 0 auto;
}
.template-collection .select select {
background-color: #F4F3F2;
border-bottom: 1px solid #DADBDD;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}
h1 {
font-size: 22px;
letter-spacing: 0.1em;
}
@media only screen and (max-width: 749px) {
h1 {
font-size: 20px;
}
.grid__item {
padding-left: 12px; }
.grid {
margin-left: -10px; }
}
.product-image-cover {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
left: 50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
}
.product-soldout {
/* opacity: 0.55; */
}
.product-preopen {
/* opacity: 0.55; */
}
.sold_out_text {
position: absolute;
top: 46%;
left: 0;
right: 0;
text-align: center;
font-family: Noto Sans JP;
font-weight: 500;
transform: scale(0.9);
font-size: 10px;
line-height: 23px;
letter-spacing: 0.2em;
}
.preopen_text {
position: absolute;
top: 46%;
left: 0;
right: 0;
text-align: center;
width: 100%;
margin: 0;
padding: 0;
/* font-weight: bold; */
/* color: #ffffff; */
/* text-shadow: 0 0 3px #000; */
font-family: Noto Sans JP;
font-weight: 500;
transform: scale(0.9);
font-size: 10px;
line-height: 23px;
letter-spacing: 0.2em;
}
@media only screen and (min-width: 750px) {
.sold_out_text {
top: 48%;
font-size: 18px;
}
.preopen_text {
font-size: 18px;
}
.product-card-desc {
padding-left: 8px;
padding-right: 8px;
margin-top: 23px !important;
}
}
/* Overwrite Page Width padding */
.template-search .page-width
{
padding-left: 8px;
padding-right: 8px;
}
.template-cart .page-width,
.template-customers-login .page-width,
.template-customers-register .page-width,
.template-customers-register .page-700-width,
.template-customers-addresses .page-width,
.template-customers-reset_password .page-width,
.template-customers-activate_account .page-width,
.template-customers-order .page-width,
.template-customers-order .page-700-width,
.template-customers-account .page-width,
.template-customers-account .page-700-width {
padding: 0 16px;
}
.template-article h1 {
font-size: 16px;
}
@media only screen and (max-width: 749px) {
.template-blog .h3 {
font-size: 16px;
}
.template-page .page-small-width {
padding: 0 12px;
}
.article__title, .article__date {
padding: 0 12px;
}
.article__title {
margin-top: 16px;
}
.article__date {
font-size: 12px;
}
.template-article .main-content {
padding-top: 0;
}
.template-article .rte {
padding: 0 12px;
}
}
.return-link-wrapper {
margin-top: 40px;
}
@media only screen and (min-width: 750px) {
.template-article h1 {
font-size: 20px;
margin-top: 18px;
}
}
/* Overwrite Customer Pages */
.registor {
margin-top: 30px;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px dashed #ccc;
}
.shopify-challenge__container {
padding: 12px;
}
.myaccount__info-wrapper {
display: flex;
width: 100%;
}
.myaccount__info {
width: 78%;
}
.myaccount__info-header{
width: 78%;
}
.myaccount__info-table{
border: 1px solid #DADADA;
border-radius: 5px;
border-collapse: separate;
padding: 25px;
margin-bottom: 0px;
}
.myaccount__info-table td{
border: none;
padding: 5px;
}
.myaccount__info-table .row-header{
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1em;
color: #898989;
width: 20%;
vertical-align: top;
}
.myaccount__info-table .row-content{
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1em;
color: #000000;
}
.myaccount__address-wrapper {
display: flex;
width: 100%;
}
.myaccount__address {
width: 78%;
}
.myaccount__address-table{
border: 1px solid #DADADA;
border-bottom: 0px;
border-collapse: separate;
padding: 25px;
margin-bottom: 0px;
}
.myaccount__address-table.bottom-border{
border-bottom: 1px solid #DADADA;
}
.myaccount__address-table:first-child{
border-radius: 5px 5px 0px 0px;
}
.myaccount__address-table:last-child{
border-radius: 0px 0px 5px 5px;
border-bottom: 1px solid #DADADA;
}
.myaccount__address-table td{
border: none;
padding: 5px;
}
.myaccount__address-table .row-header{
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1em;
color: #898989;
width: 20%;
vertical-align: top;
}
.myaccount__address-table .row-content{
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1em;
color: #000000;
}
.myaccount__account-details {
padding-left: 45px;
margin-bottom: 50px;
display: block;
gap: 7%
}
.myaccount__account-details p{
width: 15%;
margin-left: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.myaccount__account-details a{
margin-top: 0;
}
.myaccount__account-address {
margin-top: 25px;
}
.myaccount__account-address h3{
width: 70%;
float: left;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.2em;
}
.myaccount__account-info {
}
.myaccount__account-info h3{
width: 70%;
float: left;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.2em;
}
.account-id{
float: right;
width: 30%;
font-weight: 400;
font-size: 14px;
line-height: 20px;
text-align: right;
letter-spacing: 0.13em;
color: #000000;
}
.order-table .note {
font-size: 11px;
margin-left: 8px;
margin-bottom: 0px; }
.order-table .note time {
display: inline-block; }
@media only screen and (max-width: 749px) {
.order-table__product-name {
width: 60%;
font-size: 13px;
}
.template-customers-account .responsive-table th,
.template-customers-account .responsive-table td {
padding: 4px;
}
.template-customers-account .responsive-table tr {
border-top: 1px solid #ccc;
}
.template-customers-account .responsive-table th.order-no {
padding-top: 20px;
}
.template-customers-account .responsive-table td.order-total {
padding-bottom: 20px;
}
}
/* PC */
@media only screen and (min-width: 750px) {
.order-table .note {
margin-top: 16px;
}
}
/* Overwrite Blog */
.blog-list-view {
padding-left: 8px;
padding-right: 8px;
}
/* Color Tips */
.meta--listing {
margin-top: 10px;
text-align: left;
}
.color-tips {
display: flex;
}
.color-tips span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 6px;
font-size: 0;
line-height: 0;
}
/* Tags */
.product-tags {
}
.product-tags .product-tag {
line-height: 1;
}
.product-tags a {
font-size: 10px;
pointer-events: auto;
z-index: 3;
}
@media only screen and (min-width: 750px) {
.product-tags a {
font-size: 12px;
line-height: 1.2em;
}
}
/* Badges */
.badge_label {
font-family: 'Noto sans JP', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.2em;
}
@media only screen and (max-width: 749px) {
.badge_label {
font-style: normal;
font-weight: 500 !important;
font-size: 10px;
transform: scale(0.7);
transform-origin: bottom left;
line-height: 10px;
letter-spacing: 0.2em;
}
}
.badge_new {
color: #23ABDD;
}
.badge_limited {
color: #ED2A3E;
}
.badge_soldout {
color: #000000;
}
.badge_some_soldout {
color: #ED2A3E;
}
/* Buttons */
.viewmore-wrapper {
margin-top: 50px;
text-align: center;
font-family: 'Optima';
}
.ranking-collection .viewmore-wrapper {
padding-top: 25px;
clear: both;
}
@media only screen and (max-width: 749px) {
.ranking-collection .viewmore-wrapper {
padding-top: 10px;
}
}
.viewmore-btn {
margin: 0 auto;
display: block;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 5px;
max-width: 315px;
height: 50px;
padding: 16px 80px;
letter-spacing: 0.1em;
position: relative;
font-family: Optima;
text-transform: uppercase;
font-size: 13px;
line-height: 18px;
}
.viewmore-btn span {
position: absolute;
right: 20px;
top: 14px;
}
.viewmore-btn span svg {
width: 14px;
height: 14px;
color: #888888;
}
@media only screen and (min-width: 750px) {
.viewmore-wrapper {
margin-top: 55px;
}
.viewmore-btn {
font-size: 14px;
}
}
@media only screen and (max-width: 749px) {
.viewmore-btn {
font-size: 14px;
line-height: 17px;
letter-spacing: 0.1em;
color: #000000;
}
}
.common-btn-wrapper {
margin-top: 50px;
text-align: center;
display: inline-block;
}
.common-btn {
border: 0.5px solid #00000055;
border-radius: 30px;
width: 315px;
padding: 16px 80px;
letter-spacing: 0.1em;
position: relative;
/* font-family: Futura PT; */
text-transform: uppercase;
font-size: 13px;
line-height: 18px;
}
@media only screen and (min-width: 750px) {
.common-btn {
font-size: 14px;
}
}
/* Icons */
.arrow-right {
position: absolute;
right: 1px;
top: 8px;
height: 12px;
width: 12px;
background: url(../assets/arrow-right.svg?v=2365424506863347726) no-repeat center;
background-size: 100% auto; }
.arrow-right-white {
position: absolute;
right: 1px;
top: 8px;
height: 12px;
width: 12px;
background: url(../assets/arrow-right.svg?v=2365424506863347726) no-repeat center;
background-size: 100% auto; }
@media (max-width: 750px) {
.arrow-right-white {
background: url(../assets/arrow-right-w.svg?v=2365424506863347726) no-repeat center; } }
/* Overwrite Instagram */
#rap__med__instabox {
width: 33.33%!important;
}
#rap__med__insta_title h2 {
font-size: 16px;
letter-spacing: 0.2em;
font-weight: bold;
/* font-family: Futura PT;*/
font-style: normal;
}
@media only screen and (min-width: 750px) {
#rap__med__instagram a {
font-size: 20px !important;
}
}
#rap__med__insta_title h2::after {
content: '';
border-top: 1px solid rgba(48,65,70,0.6) !important;
display: inline-block;
width: 32px;
margin: 0 auto;
margin-bottom: 20px;
}
/* Breadcrumb list */
.content{
font-family: 'Noto Sans JP', sans-serif;
padding: 0;
position: relative;}
.content .breadcrumb{
text-overflow: ellipsis;
white-space: nowrap; }
.content .breadcrumb .subsections {
font-family: 'Noto Sans JP', sans-serif;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.08em;
font-weight: 400;
color: #898989;
padding: 0;
color: #b1b1b1; }
.content .breadcrumb .subsections a {
color: #b1b1b1; }
.content .breadcrumb .subsections a:hover {
color: #b1b1b1;
text-decoration: underline; }
.content .breadcrumb .subsections h2,
.content .breadcrumb .subsections h3,
.content .breadcrumb .subsections h4 {
font-size: 12px;
color: #b1b1b1 !important; }
.subsections {
display: inline; }
.subsections h2,
.subsections h3,
.subsections h4,
.subsections h5 {
display: inline;
margin: 0;
padding: 0;
font-size: 14px;
font-weight: normal;
line-height: 0; }
.subsections h2 a,
.subsections h3 a,
.subsections h4 a,
.subsections h5 a{
text-decoration: none; }
@media (min-width: 960px) {
.content .breadcrumb {
line-height: 18px;
margin-top: 38px;
margin-left: 41px;
}
}
/* Mobile and down */
@media (max-width: 959px) {
.content .breadcrumb {
overflow: hidden;
text-overflow: clip;
padding-right: 0;
padding-top: 60px;
height: 84px;
background: #F4F3F2;
}
.template-cart .content .breadcrumb {
background: #FFFFFF;
}
.template-collection .content .breadcrumb {
/* visibility: hidden; */
}
.template-customers-login .content .breadcrumb,
.template-customers-account .content .breadcrumb,
.template-customers-addresses .content .breadcrumb,
.template-index .content .breadcrumb {
background: #FFFFFF;
height: 50px;
padding-top: 50px;
}
.content .breadcrumb .subsections{
/* display: none; */
overflow: auto;
overflow-x: scroll;
margin-left: 12px;
font-size: 10px;
display: block;
}
.content .breadcrumb .subsections h2,
.content .breadcrumb .subsections h3,
.content .breadcrumb .subsections h4 {
font-size: 10px; }
}
/* product page */
#shopify-section-product-template {
margin-top: -80px;
}
@media only screen and (min-width: 750px) {
#shopify-section-product-template {
margin-top: 0px;
}
}
/*======== fixed header ========*/
@media only screen and (max-width: 749px){
ul#MobileNav {
z-index: 99;
}
div#PageContainer {
/*margin-top: 48px;*/
}
.mobile-nav-wrapper {
}
.site-header__mobile-nav {
/* position: fixed; */
}
.js-menu--is-open {
position: fixed;
z-index: 10;
}
.site-header__search {
display: none;
}
.site-header__icon {
margin-left: 15px;
}
.site-header__icon .icon-hamburger {
vertical-align: top;
}
}