@charset "UTF-8";
$special-letter-spacing: 0.05em;
$uppercase-special-mode: true;
$logo-stack-snap: 1020px;
$product-size: 255px;
$mobile-product-size: 200px;
$dividers-col: #e2e2e2;
$section-padding: 40px;
$product-margin-bottom: 20px;
$slider-product-margin-bottom: 30px;
$social-sharing-icon-size: 15px;
$loading-image-bg: #f4f4f4;
$label-font-size: 0.875em;
$label-line-height: 1.4em;
$label-margin-bottom: 4px;
$home-overlay-title-mobile-size: 20px;
$home-overlay-text-mobile-size: 16px;
$input-padding-hori: 15px;
$btn-padding-hori: 25px;
$input-btn-padding-vert: 11px;
$input-btn-padding-vert-large: 15px;
// Mixins
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
@mixin flex-grow($val) {
-webkit-box-flex: $val;
-webkit-flex-grow: $val;
-moz-flex-grow: $val;
-ms-flex-positive: $val;
flex-grow: $val;
}
@mixin flex-basis($val) {
-webkit-flex-basis: $val;
-moz-flex-basis: $val;
-ms-flex-preferred-size: $val;
flex-basis: $val;
}
@mixin flex-wrap-wrap() {
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@mixin flex-wrap-nowrap() {
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: none;
flex-wrap: nowrap;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
(Tweaked for CleanThemes theme)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* CSS cross-browser clear fix */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
/* Remove FF input padding for consistant alignment */
input::-moz-focus-inner,
button::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Remove the odd input formatting from iOS */
button,
input[type=submit],
input[type=button]{
-webkit-appearance: none;
}
/* Stop Webkit's big glowy boxes, we have our own highlight effect */
input:focus,
select:focus,
textarea:focus {
outline: none;
}
/* Standard text CSS */
strong, b { font-weight:bold; }
abbr, acronym { border-bottom:1px dotted #232323; cursor:help; }
em, i { font-style:italic; }
ul,ol,dl { margin:1em; font-size:100%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
blockquote {
margin:1.5em 0em 1.5em 10px;
padding:.5em 0em;
quotes:"\201C""\201D";
font-size:130%;
font-style:italic;
line-height: 1.5em;
}
blockquote:before{
color: #232323;
content:open-quote;
font-size:3em;
line-height:.1em;
margin-left: -20px;
margin-right: 10px;
vertical-align:-0.48em;
}
blockquote :first-child { display:inline; }
blockquote :last-child { margin-bottom:0; }
blockquote:after { content: no-close-quote; }
ol,ul,dl { margin-left:2em; }
ol li { list-style: decimal outside; }
ul li { list-style: disc outside; }
dl dd { margin-left:1em; }
th,td {
border-bottom: 1px solid $dividers-col;
border-collapse: collapse;
border-top: 1px solid $dividers-col;
padding: 0.7em;
}
th {
/*distinguishing table headers from data cells*/
font-weight:bold;
text-align:left;
border-bottom-width: 3px;
}
table.noborders {
td, th { border: none; }
}
caption { margin-bottom:.5em; text-align:center; }
p,fieldset,table { margin-bottom:1em; }
hr {
border: none;
width: 100%;
color: transparent;
border-bottom: 3px double $dividers-col;
height: 9px;
margin: 1em 0;
}
/* Fonts */
@font-face {
font-family: "Open Sans";
font-weight: 400;
font-style: normal;
src: url("//thehandmadeshowroom.com/cdn/fonts/open_sans/opensans_n4.c32e4d4eca5273f6d4ee95ddf54b5bbb75fc9b61.woff2") format("woff2"),
url("//thehandmadeshowroom.com/cdn/fonts/open_sans/opensans_n4.5f3406f8d94162b37bfa232b486ac93ee892406d.woff") format("woff");
}
body, input, textarea, select {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-style: normal
}@font-face {
font-family: "Open Sans";
font-weight: 700;
font-style: normal;
src: url("//thehandmadeshowroom.com/cdn/fonts/open_sans/opensans_n7.a9393be1574ea8606c68f4441806b2711d0d13e4.woff2") format("woff2"),
url("//thehandmadeshowroom.com/cdn/fonts/open_sans/opensans_n7.7b8af34a6ebf52beb1a4c1d8c73ad6910ec2e553.woff") format("woff");
}
@font-face {
font-family: "Open Sans";
font-weight: 400;
font-style: italic;
src: url("//thehandmadeshowroom.com/cdn/fonts/open_sans/opensans_i4.6f1d45f7a46916cc95c694aab32ecbf7509cbf33.woff2") format("woff2"),
url("//thehandmadeshowroom.com/cdn/fonts/open_sans/opensans_i4.4efaa52d5a57aa9a57c1556cc2b7465d18839daa.woff") format("woff");
}
@font-face {
font-family: "Open Sans";
font-weight: 700;
font-style: italic;
src: url("//thehandmadeshowroom.com/cdn/fonts/open_sans/opensans_i7.916ced2e2ce15f7fcd95d196601a15e7b89ee9a4.woff2") format("woff2"),
url("//thehandmadeshowroom.com/cdn/fonts/open_sans/opensans_i7.99a9cff8c86ea65461de497ade3d515a98f8b32a.woff") format("woff");
}
@font-face {
font-family: Jost;
font-weight: 300;
font-style: normal;
src: url("//thehandmadeshowroom.com/cdn/fonts/jost/jost_n3.a5df7448b5b8c9a76542f085341dff794ff2a59d.woff2") format("woff2"),
url("//thehandmadeshowroom.com/cdn/fonts/jost/jost_n3.882941f5a26d0660f7dd135c08afc57fc6939a07.woff") format("woff");
}
h1, .h1-style, h2, h3, h4, h5, h6,
#pageheader .logotext,
#shoplogo .logotext {
font-family: Jost, sans-serif;
font-weight: 300;
font-style: normal
}
@font-face {
font-family: "Open Sans";
font-weight: 400;
font-style: normal;
src: url("//thehandmadeshowroom.com/cdn/fonts/open_sans/opensans_n4.c32e4d4eca5273f6d4ee95ddf54b5bbb75fc9b61.woff2") format("woff2"),
url("//thehandmadeshowroom.com/cdn/fonts/open_sans/opensans_n4.5f3406f8d94162b37bfa232b486ac93ee892406d.woff") format("woff");
}
.nav-row {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-style: normal
}
/* Slick slider */
.slick-slider {
position: relative;
display: block;
-moz-box-sizing: border-box;
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;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&.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;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
/* FOUC */
.slideshow .slide { display: none; }
.slideshow .slide:first-child { display: block; }
/* /FOUC */
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
&:focus, a:focus { outline: none; }
}
.slick-arrow.slick-hidden {
display: none;
}
// Default Variables
$slick-arrow-color: white !default;
$slick-dot-color: #232323 !default;
$slick-dot-color-active: $slick-dot-color !default;
$slick-dot-character: "•" !default;
$slick-dot-size: 37px !default;
$slick-opacity-default: 0.75 !default;
$slick-opacity-on-hover: 1 !default;
$slick-opacity-not-active: 0.25 !default;
$slick-opacity-dots-default: 0.75 !default;
$slick-opacity-dots-on-hover: 0.75 !default;
$slick-opacity-dots-not-active: 0.4 !default;
$slick-prevnext-font-size: 80px;
/* Slider */
.slick-list {
.slick-loading & {
background: #fff url(//thehandmadeshowroom.com/cdn/shop/t/3/assets/ajax-load.gif?v=62939699503414190391555549919) center center no-repeat;
}
}
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
z-index: 1;
display: block;
height: $slick-prevnext-font-size;
width: $slick-prevnext-font-size;
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;
outline: none;
min-width: 0;
&:hover, &:focus {
outline: none;
background: transparent;
color: transparent;
svg {
opacity: $slick-opacity-on-hover;
}
}
&.slick-disabled:before {
opacity: $slick-opacity-not-active;
}
}
.slick-prev svg,
.slick-next svg {
width: $slick-prevnext-font-size;
height: $slick-prevnext-font-size;
fill: $slick-arrow-color;
opacity: $slick-opacity-default;
-webkit-filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
-moz-filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
-o-filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
-ms-filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.5));
&.feather {
fill: transparent;
stroke: $slick-arrow-color;
stroke-width: 0.6;
}
}
.slick-prev {
left: 0;
[dir="rtl"] & {
left: auto;
right: 0;
}
}
.slick-next {
right: 0;
[dir="rtl"] & {
left: 0;
right: auto;
}
}
/* Dots */
.slick-dots {
list-style: none;
display: block;
text-align: center;
margin: 0;
padding: 10px 0;
width: 100%;
li {
position: relative;
display: inline-block;
vertical-align: top;
height: 20px;
width: 21px;
margin: 0;
padding: 0;
cursor: pointer;
button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
min-width: 0;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 0;
cursor: pointer;
&:hover, &:focus {
outline: none;
&:before {
opacity: $slick-opacity-dots-on-hover;
}
}
&:before {
position: absolute;
top: 0;
left: 0;
content: $slick-dot-character;
width: 20px;
height: 20px;
font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
font-size: $slick-dot-size;
line-height: 20px;
text-align: center;
color: $slick-dot-color;
opacity: $slick-opacity-dots-not-active;
transition: opacity 150ms;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
&.slick-active button:before {
color: $slick-dot-color-active;
opacity: $slick-opacity-dots-default;
}
}
}
/* lazy load */
.slick-slide img {
opacity: 1;
transition: opacity 250ms;
}
.slick-slide img.slick-loading {
opacity: 0;
}
/* Owl Carousel - two carousels are better than one */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height .5s ease-in-out;-moz-transition:height .5s ease-in-out;-ms-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel{width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.no-js .owl-carousel{display:block}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity .4s ease;-moz-transition:opacity .4s ease;-ms-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;-webkit-transition:scale .1s ease;-moz-transition:scale .1s ease;-ms-transition:scale .1s ease;-o-transition:scale .1s ease;transition:scale .1s ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transition:scale(1.3,1.3);-moz-transition:scale(1.3,1.3);-ms-transition:scale(1.3,1.3);-o-transition:scale(1.3,1.3);transition:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;-webkit-transition:opacity .4s ease;-moz-transition:opacity .4s ease;-ms-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1}.owl-carousel {height: 0px; overflow: hidden; } .owl-carousel.owl-loaded { height: auto; overflow: visible; }
/* Theme styles */
body {
font-size: 16px;
line-height: 1.6em;
color: #232323;
background: #ffffff;
background-repeat:repeat;
overflow-y: scroll;
/* Fonts on Macs look bad without these */
-moz-font-feature-settings: "liga";
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
$base-text-size: 16px;
$smaller-text-size: 16px * 0.8;
$larger-text-size: 32px;
$nav-text-size: 14px;
$selection-color-text: #ffffff;
$selection-color-bg: #18332f;
@if alpha($selection-color-text) > 0 {
::selection{/* Webkit & Opera */
background: $selection-color-bg;
color: $selection-color-text;
}
::-moz-selection{ /* Firefox */
background: $selection-color-bg;
color: $selection-color-text;
}
}
a,
a:visited {
color:#18332f;
-moz-transition: color 100ms, border-color 100ms;
-webkit-transition: color 100ms, border-color 100ms;
transition: color 100ms, border-color 100ms;
text-decoration:none;
}
a:hover {
color:#605e5e;
}
select {
max-width: 100%;
}
$input-background-col: #ffffff;
$input-text-col: #232323;
$input-border-col: mix($input-text-col, $input-background-col, 25%);
input,
textarea {
font-size: 16px;
line-height: 16px;
background: $input-background-col;
color: $input-text-col;
border: 1px solid $input-border-col;
padding: $input-btn-padding-vert $input-padding-hori;
margin: 0;
vertical-align: middle;
max-width: 100%;
border-radius: 0;
-webkit-appearance: none; // ios input shadow
box-sizing: border-box;
}
input[type=checkbox] {
border:none;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
-webkit-appearance: checkbox;
}
textarea {
height:120px;
padding-top: 10px;
padding-bottom: 10px;
}
/* HTML5 input placeholders */
::-webkit-input-placeholder {
color: #232323;
font-size: 85%;
}
:-moz-placeholder { /* Firefox 18- */
color: #232323;
font-size: 85%;
}
::-moz-placeholder { /* Firefox 19+ */
color: #232323;
font-size: 85%;
}
:-ms-input-placeholder {
color: #232323;
font-size: 85%;
}
.input--large {
padding-top: $input-btn-padding-vert-large;
padding-bottom: $input-btn-padding-vert-large;
height: $input-btn-padding-vert-large * 2 + 16px + 2px;
}
.button,
a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background: #18332f;
border: 1px solid #18332f;
color:#ffffff;
font-size: $smaller-text-size;
line-height: 16px;
letter-spacing: $special-letter-spacing;
@if($uppercase-special-mode == true) {
text-transform: uppercase;
}
height: auto;
margin: 0;
text-decoration: none !important;
cursor: pointer;
padding: $input-btn-padding-vert $btn-padding-hori;
vertical-align: middle;
text-align: center;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
-moz-transition: background-color 100ms, color 100ms, border-color 100ms;
-webkit-transition: background-color 100ms, color 100ms, border-color 100ms;
transition: background-color 100ms, color 100ms, border-color 100ms;
display: inline-block;
svg {
fill: #ffffff;
}
.icon {
position: relative;
display: inline-block;
vertical-align: middle;
height: 1em;
width: 28px;
svg {
position: absolute;
top: 50%;
left: 0;
margin-top: -12px;
}
}
&:hover {
background: #605e5e;
border-color: #605e5e;
}
&.button--large {
padding: $input-btn-padding-vert-large $btn-padding-hori;
font-size: 16px;
}
}
.button.compact,
button.compact,
input[type="submit"].compact,
input[type="reset"].compact,
input[type="button"].compact {
width: auto;
min-width: 0;
padding: $input-btn-padding-vert + 1;
}
.button.altcolour,
button.altcolour,
input[type="submit"].altcolour,
input[type="reset"].altcolour,
input[type="button"].altcolour {
background: #18332f;
color: #ffffff;
$_body_bg: #ffffff;
$_alt_btn_txt: #ffffff;
@if $_body_bg == $_alt_btn_txt {
border: 1px solid #18332f;
} @else {
border: 1px solid #ffffff;
}
svg {
fill: #ffffff;
}
&:hover {
background: #ffffff;
color: #18332f;
$_alt_btn_bg: #18332f;
@if $_body_bg == $_alt_btn_bg {
border-color: #ffffff;
} @else {
border-color: #18332f;
}
svg {
fill: #18332f;
}
}
}
.button.notabutton,
a.button.notabutton,
button.notabutton,
input[type="submit"].notabutton {
background: none;
border: none;
padding: 0;
margin: 0;
font-size: inherit;
line-height: inherit;
font-family: inherit;
letter-spacing: inherit;
text-transform: none;
vertical-align: baseline;
min-width: 0;
overflow: visible;
height: auto;
color:#18332f;
-moz-transition: color 100ms;
-webkit-transition: color 100ms;
transition: color 100ms;
&:hover {
color:#605e5e;
}
}
.button.disabled,
a.button.disabled,
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
background: #999 !important;
color: #fff !important;
border-color: #999 !important;
}
.button__icon {
display: inline-block;
vertical-align: middle;
position: relative;
width: 24px;
height: 16px;
svg {
position: absolute;
left: 0;
top: 50%;
margin-top: -12px;
}
svg.feather {
fill: transparent;
stroke: #ffffff;
stroke-width: 1;
}
}
h1, .h1-style, h2, h3, h4, h5, h6 {
color: #18332f;
line-height: 1.2em;
margin-bottom: 10px;
svg, svg g {
fill: #18332f;
}
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: inherit;
text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
color:#605e5e;
}
h1,
.h1-style,
h2.h1-style { font-size: $larger-text-size; }
h2,
h1.h2-style,
h2.h2-style,
h3.h2-style,
h4.h2-style,
h5.h2-style,
h6.h2-style,
.h2-style {
font-size: $base-text-size + (7 - 2) * ($larger-text-size - $base-text-size) / 6;
}
h3,
h1.h3-style,
h2.h3-style,
h3.h3-style,
h4.h3-style,
h5.h3-style,
h6.h3-style,
.h3-style {
font-size: $base-text-size + (7 - 3) * ($larger-text-size - $base-text-size) / 6;
}
h4,
h1.h4-style,
h2.h4-style,
h3.h4-style,
h4.h4-style,
h5.h4-style,
h6.h4-style,
.h4-style {
font-size: $base-text-size + (7 - 4) * ($larger-text-size - $base-text-size) / 6;
}
h5,
h1.h5-style,
h2.h5-style,
h3.h5-style,
h4.h5-style,
h5.h5-style,
h6.h5-style,
.h5-style {
font-size: $base-text-size + (7 - 5) * ($larger-text-size - $base-text-size) / 6;
}
h6,
h1.h6-style,
h2.h6-style,
h3.h6-style,
h4.h6-style,
h5.h6-style,
h6.h6-style,
.h6-style {
font-size: $base-text-size + (7 - 6) * ($larger-text-size - $base-text-size) / 6;
}
h1.majortitle,
h2.title,
h2.majortitle,
h3.majortitle,
h4.majortitle,
h5.majortitle,
h6.majortitle,
.majortitle {
margin: 10px 0;
}
h1.hometitle,
h2.hometitle,
h3.hometitle,
.hometitle {
line-height: 1em;
margin: 0 0 20px;
}
.hometitle {
letter-spacing: $special-letter-spacing;
}
img {
max-width: 100%;
height: auto;
}
svg {
width: 24px;
height: 24px;
fill: #232323;
vertical-align: middle;
transition: fill 100ms;
g {
fill: #232323;
transition: fill 100ms;
}
}
.beside-svg {
vertical-align: middle;
}
svg.feather {
fill: transparent;
stroke: #232323;
}
.icon-small svg {
width: 16px;
height: 16px;
}
.icon-natcol .feather {
stroke: currentColor;
}
.hidden {
display: none;
}
/* Lists */
#pageheader ul,
#pageheader li {
margin: 0;
padding: 0;
display: inline;
}
.container {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
padding-right: 40px;
}
@media (max-width: 1080px) {
.uncontain-desktop-down {
padding-left: 0;
padding-right: 0;
}
}
.slideshow .container {
padding-left: 40px;
padding-right: 40px;
}
.template-index,
.template-collection,
.template-list-collections,
.template-product,
.template-blog,
.template-article,
.template-page,
.template-search {
#content > .container {
max-width: none;
padding-left: 0;
padding-right: 0;
}
}
#content {
padding-bottom: 60px;
}
.template-index #content {
padding-bottom: 0;
}
/* Header */
#mobile-header {
display: none;
text-align: right;
background: #ffffff;
color: #232323;
border-bottom: 1px solid #e2e2e2;
font-size: 15px;
line-height: 32px;
position: relative;
}
#mobile-header a {
color: inherit;
}
#mobile-header .mobile-nav-toggle {
position: absolute;
top: 50%;
left: 0;
margin-top: -26px;
padding: 0;
width: 50px;
height: 50px;
}
#mobile-header .mobile-nav-toggle .feather {
fill: transparent;
stroke: #232323;
}
#mobile-header .cart-count {
position: absolute;
top: 50%;
right: 20px;
margin-top: -18px;
font-size: 12px;
line-height: 32px;
letter-spacing: $special-letter-spacing;
.beside-svg {
margin-right: 2px;
}
}
#mobile-header .logo {
img {
vertical-align: middle;
}
> a {
display: block;
margin: 0 auto;
width: 135px;
&:before {
content: '';
display: inline-block;
width: 1px;
margin-left: -1px;
vertical-align: middle;
height: 32px;
}
}
}
#pageheader #mobile-header .logo .logotext {
display: inline-block;
width: calc(100% - 5px);
}
#mobile-nav-return {
z-index: 7000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
background: rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.75, 0.03, 0.52, 1);
}
#main-nav .mobile-features {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#main-nav .mobile-features .mobile-search input[type=text] {
box-sizing: border-box;
width: 100%;
border: none;
height: 60px;
font-size: 18px;
line-height: 60px;
padding-left: 20px;
letter-spacing: $special-letter-spacing;
}
#main-nav .mobile-features .mobile-search button {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 40px;
text-align: left;
}
#main-nav .mobile-social {
display: none;
}
#pageheader {
position: relative;
background: #ffffff;
z-index: 4000; /* Place above slider for live-search dropdown */
}
#pageheader,
#pageheader a {
color: #232323;
}
#pageheader svg,
#pageheader svg g {
fill: #232323;
}
#pageheader svg.feather {
fill: none;
stroke: #232323;
}
#pageheader .logo {
text-align: center;
padding: 20px 0;
}
#pageheader .logo a {
color: #232323;
}
.logo img {
display: inline-block;
vertical-align: top;
}
#pageheader .logo .logotext {
font-size: $larger-text-size;
line-height: 1.4em;
letter-spacing: $special-letter-spacing;
}
#pageheader .search-box,
#pageheader .utils {
position: absolute;
top: 50%;
}
#pageheader .logo-pos-below .search-box,
#pageheader .logo-pos-below .utils,
#pageheader .logo-pos-above .search-box,
#pageheader .logo-pos-above .utils {
top: 0;
margin-top: 0;
}
#pageheader .search-box {
left: 30px;
margin-top: -19px;
}
#pageheader .search-box .search-form {
border: 1px solid transparent;
position: relative;
display:inline-block;
}
$header-search-form-bg: #fff;
$header-search-form-border: #dedede;
$header-search-form-text: #666;
#pageheader .search-box.focus .search-form {
background-color: $header-search-form-bg;
border-color: $header-search-form-border;
}
#pageheader .search-box .search-form .feather-search {
position: absolute;
z-index: 1;
fill: none;
stroke: #232323;
top: 50%;
margin-top: -12px;
left: 7px;
pointer-events: none;
}
#pageheader .search-box .search-form .search-box-label {
position: absolute;
display: inline-block;
padding: 11px 10px 11px 42px;
font-size: $smaller-text-size;
line-height: 1.2em;
letter-spacing: $special-letter-spacing;
color: #232323;
cursor: text;
}
#pageheader .search-box .search-form input[type="text"] {
opacity: 0;
font-size: $smaller-text-size;
line-height: 1.2em;
letter-spacing: $special-letter-spacing;
border: none;
background: transparent;
color: $header-search-form-text;
&::-ms-clear {
display: none;
}
}
#pageheader .search-box.focus .search-form .search-box-label {
display: none;
}
#pageheader .search-box.focus .search-form input[type="text"] {
opacity: 1;
padding: 11px 10px 11px 42px;
width: 262px;
}
#pageheader .search-box.focus .search-form .feather-search {
stroke: $header-search-form-text;
}
#pageheader .search-box .search-form button {
opacity: 0;
position: absolute;
top: 0;
right: 8px;
background: transparent;
color: $header-search-form-text;
border: none;
width: 20px;
min-width: 0;
height: 25px;
padding: 5px 0;
line-height: 2px;
font-size: 100%;
pointer-events: none;
svg.feather {
stroke: $header-search-form-text;
}
}
#pageheader .search-box.focus .search-form button {
pointer-events: auto;
opacity: 1;
}
#pageheader .search-box .results-box {
position: absolute;
background: #fff;
color: #333;
width: 264px;
z-index: 5000;
font-size: $smaller-text-size;
}
#pageheader .search-box .results-box a,
#pageheader .search-box .results-box a:hover {
color: inherit;
}
#pageheader .search-box .results-box > * {
display: block;
padding: 7px 2px;
margin: 0;
border-bottom: 1px solid $dividers-col;
border-left: 1px solid $dividers-col;
border-right: 1px solid $dividers-col;
min-height: 24px;
}
#pageheader .search-box .results-box > *:first-child {
border-top: 1px solid $dividers-col;
}
#pageheader .search-box .results-box > *:hover {
}
#pageheader .search-box .results-box .img {
float: left;
margin: -4px 10px 0 0;
width: 32px;
height: 32px;
text-align: center;
overflow: hidden;
}
#pageheader .search-box .results-box .img img {
vertical-align: middle;
margin-top: -2px;
}
#pageheader .search-box .results-box .load {
background: url('//thehandmadeshowroom.com/cdn/shop/t/3/assets/ajax-load.gif?v=62939699503414190391555549919') center center no-repeat;
text-align: center;
}
#pageheader .search-box .results-box .note {
text-align: center;
background: #18332f;
border: #18332f;
color: #ffffff;
font-size: $smaller-text-size;
&:hover {
background: #605e5e;
color: #ffffff;
}
}
#pageheader .utils {
right: 30px;
height: 44px;
line-height: 40px;
margin-top: -22px;
font-size: $smaller-text-size;
letter-spacing: $special-letter-spacing;
}
#pageheader .social-links,
#pageheader .utils .cart-summary {
display: inline-block;
vertical-align: middle;
}
#pageheader .social-links {
height: 15px;
}
#pageheader .search-box.focus .social-links {
display: none;
}
#pageheader .utils .cart-summary {
margin-left: 10px;
}
#pageheader .utils .switcher {
margin-left: 10px;
display: inline-block;
vertical-align: middle;
position: relative;
padding-top: 0;
padding-bottom: 0;
.selected-currency {
vertical-align: middle;
}
}
.switcher {
position: relative;
padding: 4px 5px;
cursor: pointer;
svg {
margin: 0 -3px;
width: 16px;
height: 16px;
vertical-align: middle;
}
select {
position: absolute;
opacity: 0;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
}
#pageheader .utils .cart-summary .button {
min-width: 0;
margin-top: -1px;
padding: 8px 15px;
vertical-align: middle;
color: #ffffff;
text-transform: none;
.cart-count__text {
vertical-align: top;
}
}
#pageheader .util-area {
letter-spacing: $special-letter-spacing;
}
.cart-count__text {
vertical-align: middle;
}
#pageheader .logo-pos-above .util-area,
#pageheader .logo-pos-below .util-area {
position: relative;
height: 55px;
}
#pageheader .logo-pos-below .util-area {
margin-top: 10px;
}
.contains-dropdown {
position: relative;
}
.dropdown {
position: absolute;
z-index: 50;
top: 100%;
left: -21px;
margin-top: -5px;
padding: 10px 0 0;
pointer-events: none;
opacity: 0;
transform: translate3d(0, -5px, 0);
transition: all 150ms ease-out;
}
.dropdown__inner {
position: relative;
padding: 8px 20px 6px;
border: 1px solid #dedede;
background: #fff;
color: #444;
line-height: 2em;
white-space: nowrap;
#pageheader & a {
color: #444;
}
&::before {
content: " ";
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 6px 6px 6px;
border-color: transparent transparent #dedede transparent;
position: absolute;
top: 0;
left: 15px;
margin-top: -6px;
}
&::after {
content: " ";
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 6px 6px 6px;
border-color: transparent transparent #fff transparent;
position: absolute;
top: 0;
left: 15px;
margin-top: -5px;
}
}
.contains-dropdown:hover .dropdown,
.contains-dropdown--active .dropdown {
pointer-events: auto;
opacity: 1;
transform: translate3d(0,0,0);
}
.announcement {
font-size: $smaller-text-size;
letter-spacing: $special-letter-spacing;
line-height: 1.4em;
text-align: center;
a {
display: block;
color: inherit;
text-decoration: none;
transition: background 100ms;
}
a:hover {
background: rgba(255, 255, 255, 0.1);
text-decoration: none;
}
.announcement__inner {
padding: 6px;
}
}
/* Nav */
.nav-row {
text-align: center;
line-height: 1.5em;
font-size: $nav-text-size;
letter-spacing: $special-letter-spacing;
}
.nav-row ul {
margin: 0;
display:inline-block;
}
.nav-row ul li {
vertical-align: top;
margin: 0;
display:inline-block;
}
.nav-row a {
padding: 20px 18px;
white-space: nowrap;
display:inline-block;
}
.nav-row a.expanded {
color:#605e5e;
}
.nav-row a .exp {
margin-left: 5px;
width: 10px;
display:inline-block;
svg {
display: none;
}
}
.nav-row ul ul {
display: none;
}
@media (min-width: 768px) {
.nav-row a.column-title {
display: block;
padding-top: 0;
padding-bottom: 15px;
white-space: normal;
text-align: left;
font-size: 0.85em;
line-height: 1.2em;
letter-spacing: 0.15em;
text-transform: uppercase;
opacity: 0.7;
.exp {
display: none;
}
}
.multi-level-nav.reveal-on-hover {
position: relative;
.tier-2,
.tier-3 {
position: absolute;
z-index: 10;
top: 100%;
left: 0;
width: 100%;
border-bottom: 1px solid #e2e2e2;
opacity: 0;
transition: opacity 250ms ease-in-out;
&.tier-appeared {
opacity: 1;
}
}
}
.nav-row .nav-columns {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 1080px;
padding: 20px 10px 0;
&.nav-columns--count-1,
&.nav-columns--count-2,
&.nav-columns--count-3,
&.nav-columns--count-4 {
justify-content: center;
}
&.nav-columns--count-1 > li,
&.nav-columns--count-2 > li,
&.nav-columns--count-3 > li,
&.nav-columns--count-4 > li { width: calc(100% / 5 - 20px); }
&.nav-columns--count-7 > li,
&.nav-columns--count-8 > li { width: calc(100% / 4 - 20px); }
&.nav-columns--count-6 > li { width: calc(100% / 6 - 20px); }
> li {
margin: 0 10px;
width: calc(100% / 5 - 20px);
text-align: left;
a {
padding-left: 0;
padding-right: 0;
}
> ul {
display: block;
padding-bottom: 20px;
text-align: left;
> li {
display: block;
> a {
display: block;
padding-top: 4px;
padding-bottom: 4px;
white-space: normal;
}
}
}
}
}
.nav-row .tier-1 .nav-columns {
display: none;
}
}
.tags.nav-row {
border-top: 1px solid $dividers-col;
border-bottom: 1px solid $dividers-col;
padding: 5px;
text-transform: capitalize;
}
.tags .active a {
color: #e94b3f;
}
.tags .active a .x {
position: relative;
top: 2px;
font-weight: bold;
font-size: 150%;
line-height: 75%;
margin: 0 0 0 5px;
}
.multi-tag-row {
margin-top: -10px;
margin-bottom: 20px;
}
.multi-tag-row .tags.nav-row {
margin-top: -1px;
}
.multi-tag-row .tags.nav-row.height-hidden {
display: block;
height: 0;
overflow: hidden;
border: none;
padding: 0;
}
.tags-inline {
font-size: $smaller-text-size;
letter-spacing: $special-letter-spacing;
label {
margin-right: 10px;
@if($uppercase-special-mode == true) {
text-transform: uppercase;
}
}
ul {
font-style: italic;
}
ul, li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
li:after {
content: ',';
}
li:last-child:after {
content: none;
}
}
/* Main nav only */
#main-nav {
border-bottom: 1px solid #e2e2e2;
}
$main-nav-level1-bg: #ffffff;
$main-nav-level2-bg: $main-nav-level1-bg;
$main-nav-level3-bg: $main-nav-level1-bg;
#main-nav .multi-level-nav > div {
border-top: 1px solid #e2e2e2;
background: $main-nav-level3-bg;
}
#main-nav .multi-level-nav .tier-1 { background: $main-nav-level1-bg; }
#main-nav .multi-level-nav .tier-2 { background: $main-nav-level2-bg; }
#main-nav a {
color: #605e5e;
}
#main-nav svg,
#main-nav svg g {
fill: #605e5e;
&.feather {
fill: none;
stroke: #605e5e;
}
}
#main-nav a.expanded,
#main-nav a:hover {
color: #22595b;
}
#main-nav .account-links {
display: none;
}
.account-links-inline {
display: inline-block;
vertical-align: middle;
> .contains-dropdown__toggle,
> .login {
display: inline-block;
vertical-align: middle;
}
}
/* Store messages */
#store-messages {
background: #ffffff;
}
#store-messages .message {
position: relative;
text-align: center;
padding: 12px 0;
}
#store-messages.messages-2 .message {
float: left;
width:49.5%;
}
#store-messages.messages-3 .message {
float: left;
width:33.33%;
}
#store-messages .message a {
display: block;
}
#store-messages .message .title,
#store-messages .message .tagline {
margin: 0 20px;
}
#store-messages .message .title {
font-size: 100%;
line-height:1.3em;
color: #18332f;
letter-spacing: $special-letter-spacing;
}
#store-messages .message .tagline {
display: block;
margin-bottom: 4px;
font-size: $smaller-text-size;
line-height: 1.4em;
color: #605e5e;
letter-spacing: $special-letter-spacing;
&:nth-child(2) {
margin-top: 5px;
}
}
#store-messages .message .fluff {
border-left: 1px solid $dividers-col;
width: 1px;
position: absolute;
left: 0;
top: 28%;
bottom: 29%;
}
#store-messages-mobile {
display: none;
padding: 8px 0;
background: #ffffff;
color: #18332f;
border-bottom: 1px solid $dividers-col;
font-size: 12px;
line-height: 1.2em;
letter-spacing: $special-letter-spacing;
text-align: center;
a, a:hover {
color: #18332f;
}
}
/* Headings above content */
.page-header {
text-align: center;
padding: 20px 0 20px;
}
.page-header .pagetitle {
margin-bottom: 20px;
}
.page-header .user-content {
text-align: left;
}
.page-header .filters {
float: left;
margin: 10px 0;
}
.page-header .filters,
.page-header .social-area {
font-size: $smaller-text-size;
letter-spacing: $special-letter-spacing;
@if($uppercase-special-mode == true) {
text-transform: uppercase;
}
}
.page-header .social-area {
float: right;
margin: 10px 0;
}
.page-header .social-area.center {
float: none;
}
.page-header .social-area .rsslink,
.page-header .social-area .sharing {
vertical-align: middle;
display: inline-block;
}
.page-header .social-area .rsslink svg {
margin-left: 8px;
width: $social-sharing-icon-size;
height: $social-sharing-icon-size;
fill: #18332f;
}
.page-header .filters .tags {
margin-right: 25px;
white-space: nowrap;
float: left;
}
.page-header .filters .sort {
.styled-select {
vertical-align: middle;
margin: -16px 0 -16px 3px;
}
select {
text-transform: none;
}
}
.page-header .nextprev {
font-size: $smaller-text-size;
letter-spacing: $special-letter-spacing;
@if($uppercase-special-mode == true) {
text-transform: uppercase;
}
}
/* Pagination */
.pagination-row {
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
font-size: $smaller-text-size;
letter-spacing: $special-letter-spacing;
@if($uppercase-special-mode == true) {
text-transform: uppercase;
}
}
.pagination {
font-size: $smaller-text-size;
letter-spacing: $special-letter-spacing;
@if($uppercase-special-mode == true) {
text-transform: uppercase;
}
}
.pagination__sep {
margin: 0 4px;
}
.pagination__number {
margin: 0 4px;
}
.pagination-row.pagination-row-tabular {
display: table;
width: 100%;
}
.pagination-row.pagination-row-tabular > .inner {
display: table-row;
}
.pagination-row.pagination-row-tabular > .inner > * {
display: table-cell;
width: 33.33333%;
vertical-align: bottom;
}
.pagination-row.pagination-row-tabular { .prev, .next { span { vertical-align: middle; } } }
.pagination-row.pagination-row-tabular .prev { text-align: left; }
.pagination-row.pagination-row-tabular .next { text-align: right; }
/* Main footer */
#pagefooter {
background: #18332f;
padding: 0 0 50px;
font-size: $smaller-text-size;
&, a {
color: #ffffff;
}
a:hover {
opacity: 0.75;
}
}
#pagefooter .cross-page-promos {
background: #ffffff;
padding-top: 16px;
padding-bottom: 16px;
&, a, h6 {
color: #18332f;
}
svg {
stroke: #18332f;
}
.overlay-text .text > div {
padding-left: 0;
padding-right: 0;
}
}
#pagefooter .nav-row {
border-top: 1px solid #605e5e;
border-bottom: 1px solid #605e5e;
}
#pagefooter .signup-form .input-block {
border-color: #605e5e;
}
#pagefooter .lower {
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
#pagefooter .copyright {
margin-top: 30px;
}
#pagefooter .copyright .copy {
white-space: nowrap;
}
#pagefooter .interact {
margin-top: 30px;
}
#pagefooter .interact .social-links {
display:inline-block;
zoom:1;
*display:inline;
vertical-align: middle;
}
#pagefooter .social-links {
margin: 30px 0;
a {
margin: 0 8px;
}
svg, svg g {
fill: #ffffff;
}
}
#pagefooter .payment-methods {
margin-top: 20px;
}
/* Signup form in header *or* footer */
.signup-form-cont {
text-align: center;
clear: both;
}
.signup-form {
display: inline-block;
max-width: 100%;
}
.signup-form .input-block {
border: 1px solid $input-border-col;
background-color: $input-background-col;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
.signup-form-title {
display: block;
margin: 0 0 10px;
font-size: $smaller-text-size;
line-height: 1.4em;
letter-spacing: $special-letter-spacing;
@if($uppercase-special-mode == true) {
text-transform: uppercase;
}
}
.signup-form-subtitle {
font-size: $smaller-text-size;
line-height: 1.4em;
}
.signup-form input[type="email"] {
border: none;
line-height: 1.2em;
width: 200px;
}
.signup-form h4 {
margin: 0.6em 2em;
}
@media (min-width: 500px) {
.section-signup .signup-form input[type="email"],
#pagefooter .signup-form input[type="email"] {
width: 300px;
}
}
/* Social links */
$social-icon-size: 23px;
.social-links {
ul, li {
display: inline-block;
vertical-align: top;
list-style: none;
margin: 0;
padding: 0;
line-height: $social-icon-size;
}
a {
display:inline-block;
vertical-align: top;
margin: 0 0 0 10px;
svg {
width: $social-icon-size;
height: $social-icon-size;
vertical-align: top;
}
img {
height: $social-icon-size;
width: auto;
vertical-align: top;
}
}
}
.sharing {
display: inline;
.label {
vertical-align: middle;
font-size: $smaller-text-size;
letter-spacing: $special-letter-spacing;
@if($uppercase-special-mode == true) {
text-transform: uppercase;
}
}
ul {
vertical-align: middle;
}
ul, li {
line-height: $social-sharing-icon-size;
}
a {
svg {
width: $social-sharing-icon-size;
height: $social-sharing-icon-size;
&, & g {
fill: #18332f;
}
}
&:hover svg, &:hover svg g {
fill: #605e5e;
}
}
}
ul.plain li {
list-style: none;
}
ul.inline,
ul.inline li {
margin: 0;
display: inline;
}
/* Product listing */
.product-block {
text-align: center;
&.fixed-width {
width: $product-size;
}
}
.product-block .block-inner {
position: relative;
margin: 0 0 20px;
}
.product-block .product-link {
display: block;
position: relative;
color: inherit;
}
.product-block .image-cont {
position: relative;
margin: 0 auto;
overflow: hidden;
}
.product-block .image-cont .placeholder-image {
width: $product-size;
max-width: 100%;
}
.product-block.variable-width .image-cont .rimage-outer-wrapper {
max-width: 100% !important;
}
.image-cont.with-secondary-image .secondary-image {
display: none;
}
@media (min-width: 960px) {
.image-cont.with-secondary-image {
.secondary-image {
display: block;
position: absolute;
top: 0;
left: 0;
width: calc(100% + 0.5px);
height: calc(100% + 0.5px);
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 250ms;
}
.primary-image {
transition: opacity 250ms;
}
&:hover {
.primary-image {
opacity: 0;
}
.secondary-image {
opacity: 1;
}
}
&.same-aspect-ratio {
.primary-image {
transition: opacity 0ms 0ms;
}
&:hover .primary-image {
transition: opacity 50ms 250ms;
}
}
}
}
.product-block .image-label-wrap {
position: relative;
}
.product-block .productlabel {
position: absolute;
bottom: 5%;
left: 0;
right: 0;
text-align: center;
}
.productlabel > span {
display: inline-block;
padding: 10px 20px;
background: #e9657a;
color: #ffffff;
font-size: $smaller-text-size;
line-height: 1.2em;
vertical-align: top;
letter-spacing: $special-letter-spacing;
@if($uppercase-special-mode == true) {
text-transform: uppercase;
}
}
.productlabel.soldout > span {
background: #18332f;
}
.productlabel.general > span {
background: #55c79e;
}
.product-block .product-info {
display: block;
color: inherit;
margin: 5px 5px $product-margin-bottom;
}
.product-block .product-info .dash { display: none; }
.product-block .product-info .reducedfrom {
font-style: italic;
opacity: 0.7;
margin: 0 5px;
display: inline;
}
.product-block .product-info .reducedfrom .amount {
text-decoration: line-through;
}
.product-block .product-info .price {
margin: 0 5px;
}
.product-block .product-info .price .from {
font-size: 80%;
}
.product-block.detail-mode-hover .product-info {
position: absolute;
margin: 0;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 100ms;
}
.product-block.detail-mode-hover .product-info .dash { display: block; }
.product-block.detail-mode-hover .product-info:before {
content: '';
background: #ffffff;
opacity: 0.9;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
.product-block.detail-mode-hover:hover .product-info,
.product-block.detail-mode-hover.expanded .product-info {
opacity: 1;
}
.product-block.detail-mode-hover .product-info .reducedfrom {
display: block;
}
.product-block.detail-mode-hover .product-info > .inner {
position: relative;
z-index: 10;
display: table;
width: 100%;
height: 100%;
}
.product-block.detail-mode-hover .product-info > .inner > .innerer {
display: table-cell;
vertical-align: middle;
padding: 0 20px;
}
.product-block.expanded .block-inner:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
z-index: 10;
pointer-events: none;
border-bottom-color: #ffffff;
border-width: 15px;
left: 50%;
margin: -9px 0 0 -15px;
}
.product-block.detail-mode-permanent .product-info > .inner {
margin-left: auto;
margin-right: auto;
}
/* Collection blocks - in style of product block */
.carousel .product-block.collection-block .block-inner {
margin-bottom: 0;
}
.collection-slider .collection-listing .product-block.collection-block .product-info {
margin: 0;
}
.product-block.collection-block .product-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
.productlabel {
position: static;
margin: 0;
}
}
.overlay-mode-none .product-block.collection-block .productlabel {
display: none!important;
}
.overlay-mode-t .product-block.collection-block .product-info {
align-items: flex-start;
.productlabel {
width: 100%;
}
}
.overlay-mode-b .product-block.collection-block .product-info {
align-items: flex-end;
.productlabel {
width: 100%;
}
}
.overlay-mode-t .product-block.collection-block .productlabel > span,
.overlay-mode-b .product-block.collection-block .productlabel > span {
padding-left: 10px;
padding-right: 10px;
width: 100%;
box-sizing: border-box;
}
.product-block.collection-block .productlabel > span {
background: #18332f;
color: #ffffff;
-moz-transition: background-color 100ms;
-webkit-transition: background-color 100ms;
transition: background-color 100ms;
}
.product-block.collection-block:hover .productlabel > span {
background: #605e5e;
}
.product-block.collection-block .productlabel .count {
text-transform: none;
font-style: italic;
display: block;
font-size: 0.8em;
margin-top: 5px;
letter-spacing: $special-letter-spacing;
}
.product-block.collection-block .image-cont {
padding-bottom: 0;
}
.collection-slider-row.for-collections {
padding-bottom: $section-padding;
&.no-bg {
margin-bottom: $section-padding;
padding-bottom: 0;
}
}
/* Search results */
.product-block.page-block {
}
.product-block.page-block .article-image {
margin: 1em 0 0;
}
.product-block.page-block .block-inner {
border: 1px solid #000;
width: 300px;
overflow: hidden;
}
.product-block.fixed-width.page-block .block-inner {
width: $product-size;
}
.product-block.page-block .block-inner .text-cont {
padding: 20px;
overflow: hidden;
text-align: left;
}
.product-block .spr-badge {
margin-top: 5px;
font-size: 0.75em;
line-height: 1.7em;
&[data-rating="0.0"] {
visibility: hidden;
}
}
.spr-icon {
margin-right: 0.1em;
}
.spr-icon-star,
.spr-icon-star-half-alt {
color: #f6c446;
}
.spr-badge-caption {
white-space: nowrap;
}
/* Product detail */
.product-detail .gallery {
position: relative;
}
.product-detail .gallery .main-image {
margin: 0 0 20px 0;
text-align: center;
}
.product-detail .gallery .thumbnails {
margin-left: -5px;
a {
display: inline-block;
width: 74px;
max-width: 100%;
margin: 0 0 7px 5px;
}
}
.product-detail .gallery-layout-beside {
&.has-thumbnails .main-image {
float: left;
width: calc(100% - 60px);
}
.thumbnails {
float: right;
width: 50px;
a {
display: block;
margin: 0 0 10px;
}
}
}
.product-detail .gallery .mobile-slideshow {
display: none;
}
.product-detail .gallery .mobile-slideshow .slide img {
margin-left: auto;
margin-right: auto;
}
.product-detail .spr-badge {
margin: -0.8em 0 15px;
font-size: 0.875em;
}
.product-detail .detail {
text-align: left;
position: relative;
}
.product-detail .detail .title {
margin: 0 0 0.5em;
}
.price-area {
font-family: inherit;
}
.price-area .was-price {
font-size: 16px;
line-height: 1em;
margin-right: 10px;
text-decoration: line-through;
}
.product-detail .detail .productlabel {
position: static;
float: right;
margin: 0 0 10px 10px;
}
.product-detail .detail .description {
margin: 50px 0;
}
.product-detail .description {
clear: both;
}
.product-detail .product-form .input-row .original-selector { display: none; }
.no-js .product-detail .product-form .option-selectors { display: none; }
.no-js .product-detail .product-form .original-selector { display: inline; }
.product-detail .product-form .input-row {
margin: 20px 0;
clear: both;
}
.product-detail .input-row label {
display: block;
margin-top: 7px;
font-size: $label-font-size;
line-height: $label-line-height;
margin-bottom: $label-margin-bottom;
}
.product-detail .singleopt .size-chart-container {
margin-top: 10px;
}
.product-form .selector-wrapper {
margin-bottom: 10px;
}
.product-detail .product-form .input-row select {
min-width: 70px;
display: inline-block;
}
.product-form .input-row input[name=quantity] {
margin-right: 5px;
width: 60px;
text-align: center;
}
.product-form .quantity-submit-row {
label {
display: none;
}
}
$spb-button-height: 48px;
.product-form .quantity-submit-row.has-spb {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
.quantity-submit-row__quantity,
label {
display: block;
}
.quantity-submit-row__quantity {
width: 100%;
margin-bottom: 20px;
.input--large {
padding-top: $input-btn-padding-vert;
padding-bottom: $input-btn-padding-vert;
}
}
.button {
@extend .button.altcolour;
min-height: $spb-button-height;
box-sizing: border-box;
width: 100%;
}
.quantity-submit-row__submit,
.shopify-payment-button {
width: 50%;
box-sizing: border-box;
@media (max-width: 450px) {
width: 100%;
}
}
.quantity-submit-row__submit {
padding-right: 10px;
@media (max-width: 450px) {
padding-right: 0;
}
}
.shopify-payment-button {
padding-left: 10px;
@media (max-width: 450px) {
padding-top: 10px;
padding-left: 0;
}
}
.shopify-payment-button__button {
min-height: $spb-button-height;
font-size: 16px;
line-height: 16px;
letter-spacing: $special-letter-spacing;
box-sizing: border-box;
}
.shopify-payment-button__button--unbranded {
background: #18332f;
border: 1px solid #18332f;
color: #ffffff;
padding: $input-btn-padding-vert-large $btn-padding-hori;
&:hover {
background: #605e5e;
border-color: #605e5e;
}
}
@media (min-width: 768px) and (max-width: 940px) {
flex-direction: column;
.quantity-submit-row__submit,
.shopify-payment-button {
width: 200px;
}
.quantity-submit-row__submit {
padding-right: 0;
}
.shopify-payment-button {
padding: 10px 0 0 0;
}
}
.featured-product & {
flex-direction: column;
@media (max-width: 767px) and (min-width: 451px) {
flex-direction: row;
}
.quantity-submit-row__submit,
.shopify-payment-button {
width: 200px;
@media (max-width: 767px) and (min-width: 451px) {
width: 50%;
}
@media (max-width: 450px) {
width: 100%;
}
}
.quantity-submit-row__submit {
padding-right: 0;
@media (max-width: 767px) and (min-width: 451px) {
padding-right: 10px;
}
}
.shopify-payment-button {
padding-top: 10px;
padding-left: 0;
@media (max-width: 767px) and (min-width: 451px) {
padding-top: 0px;
padding-left: 10px;
}
}
.shopify-payment-button__more-options {
white-space: nowrap;
}
}
}
.shopify-payment-button {
transition: opacity 150ms;
.shopify-payment-button__button {
border-radius: 0;
}
.shopify-payment-button__more-options {
box-sizing: border-box;
color: inherit;
text-transform: none;
padding: 0 10%;
font-size: 14px;
line-height: 1.2em;
letter-spacing: 0;
&:hover {
background: transparent;
}
&[disabled] {
background: transparent!important;
}
}
}
.variant-status--unavailable .shopify-payment-button {
opacity: 0;
}
.product-detail .sharing {
margin-top: 20px;
}
@media (min-width: 768px) {
.featured-product.product-detail .detail .productlabel {
margin-right: -60px;
}
}
.product-detail {
.productlabel.sale {
display: none;
}
&.variant-status--on-sale .productlabel.sale {
display: block;
}
}
.sku--no-sku {
display: none;
}
.styled-select {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
height: 42px;
overflow: hidden;
width: 240px;
position: relative;
background: $input-background-col;
border: 1px solid $input-border-col;
&.styled-select--small {
width: 180px;
}
&::after {
pointer-events: none;
content: '';
position: absolute;
right: 0px;
top: 0px;
width: 28px;
height: 100%;
$svg-fill: rgba($input-text-col, 0.999999);
background-image: url("data:image/svg+xml,%3Csvg fill='#{ $svg-fill }' height='18' width='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z'/%3E%3Cpath d='M0-.75h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 1px center;
background-color: $input-background-col;
}
select {
background: transparent!important;
color: $input-text-col;
border: none!important;
font-size: 14px!important;
height: 100%!important;
line-height: 40px!important;
padding: 0 30px 0 #{ $input-padding-hori }!important; /* If you add too much padding here, the options won't show in IE */
width: 268px!important;
width: calc(100% + 28px)!important;
max-width: none!important;
-webkit-appearance: none;
appearance: none;
}
}
/* Slide-out product detail, i.e. home, collection */
.collection-listing .product-detail {
background: #ffffff;
overflow: hidden;
position: relative;
line-height: 1.6em;
}
.collection-listing .product-detail .inner {
padding: 50px 90px;
}
.collection-listing-stream .product-detail .gallery .thumbnails,
.collection-listing .product-detail .gallery .thumbnails {
position: static;
}
.collection-listing .product-detail,
.collection-listing .product-detail .title,
.collection-listing .product-detail .title a,
.collection-listing .product-detail h1.majortitle,
.collection-listing .product-detail h2,
.collection-listing .product-detail h3,
.collection-listing .product-detail h4,
.collection-listing .product-detail h5,
.collection-listing .product-detail h6 {
color: #232323;
}
.collection-listing .product-detail {
.vendor a,
.more,
.user-content a,
.size-chart-link {
color: #18332f;
}
}
.collection-listing .product-detail a.button {
background-color: #18332f;
color: #fff;
}
.collection-listing .product-detail a.button:hover {
background-color: #18332f;
}
.collection-listing .product-detail .gallery .main-image,
.collection-listing-stream .product-detail .gallery .main-image {
margin-right: 0;
}
.product-detail .close-detail {
position: absolute;
right: 30px;
top: 30px;
width: 50px;
height: 50px;
.feather {
width: 50px;
height: 50px;
stroke-width: 1;
@if alpha(#ffffff) > 0 {
@if lightness(#ffffff) > 50% {
stroke: #5c5c5c;
} @else {
stroke: #fff;
}
} @else {
@if lightness(#ffffff) > 50% {
stroke: #5c5c5c;
} @else {
stroke: #fff;
}
}
}
}
/* Collection slider specific */
.collection-slider-row {
padding-top: $section-padding;
&.no-bg {
margin-top: $section-padding;
padding-top: 0;
}
}
.collection-slider .collection-listing {
overflow: hidden;
position: relative;
}
.collection-slider .collection-listing .product-list {
// margins conflict with carousel plugin
margin-left: 0;
margin-right: 0;
}
.collection-slider .collection-listing .product-block {
padding-bottom: 0;
}
.collection-slider .collection-listing .product-block .product-info {
margin-bottom: $slider-product-margin-bottom;
}
.collection-slider .product-block.expanded .block-inner:after {
margin-top: $slider-product-margin-bottom - 29px;
}
.collection-slider .collection-listing .product-block .product-detail {
display: none;
}
// in a carousel where js controls the widths, let it control all layout
.collection-slider .fixed-mode .product-block {
display: block;
margin-left: 0;
margin-right: 0;
width: auto;
.image-cont {
.image-link {
height: auto;
}
img {
max-height: none;
max-width: 100%;
}
}
}
.collection-listing .product-list {
margin-left: 20px;
margin-right: 20px;
margin-bottom: -$product-margin-bottom;
}
.container > .collection-listing .product-list {
margin-left: -8px;
margin-right: -8px;
}
.collection-listing .product-list.carousel {
margin-bottom: 0;
}
.collection-slider-row .collection-listing .product-detail {
position: relative;
height: auto;
margin-top: 0;
}
/* Collection page specific */
.collection-listing {
text-align: center;
line-height: 0;
}
.collection-listing .product-block {
display: inline-block;
max-width: 100%;
margin-left: 8px;
margin-right: 8px;
vertical-align: top;
line-height: 1.6em;
}
.collection-listing .product-detail {
position: absolute;
top: auto;
left: 0;
width: 100%;
height: 0;
}
.collection-listing .product-detail .spr-badge {
display: none;
}
/* Collection page stream-mode */
.collection-listing-stream .product-block.fixed-width {
width: auto;
}
.collection-listing-stream .block-inner {
display: none;
}
.collection-listing-stream .product-detail {
padding-top: $section-padding;
padding-bottom: $section-padding;
border-top: 1px solid $dividers-col;
}
.collection-listing-stream .product-detail .spr-badge {
display: block;
}
.collection-listing-stream .product-block:first-child .product-detail {
border-top: none;
}
.collection-listing-stream .product-detail .close-detail {
display: none;
}
/* View-all under title on homepage */
.view-all {
text-align: center;
font-size: $smaller-text-size;
letter-spacing: $special-letter-spacing;
line-height: 1em;
@if($uppercase-special-mode == true) {
text-transform: uppercase;
}
margin: -10px 0 20px;
}
.view-all > * {
vertical-align: middle;
}
.view-all .prev,
.view-all .next {
margin: 0 40px;
font-size: 140%;
}
.collection-slider .has-paging .prev,
.collection-slider .has-paging .next {
font-size: 80%;
margin: 0 30px;
vertical-align: top;
display: inline-block!important;
&.slick-hidden {
display: none!important;
}
}
.owl-btn-disabled {
visibility: hidden;
}
/* Collection page items */
.view-as {
white-space: nowrap;
display: inline-block;
}
.view-as-label {
}
#view-as-tiles,
#view-as-stream {
padding-left: 25px;
position: relative;
margin-left: 15px;
}
#view-as-tiles div,
#view-as-stream div {
background: #18332f;
position: absolute;
-moz-transition: background-color 100ms;
-webkit-transition: background-color 100ms;
transition: background-color 100ms;
}
#view-as-tiles.active,
#view-as-stream.active {
color: #605e5e;
}
#view-as-tiles.active div,
#view-as-stream.active div {
background: #605e5e;
position: absolute;
}
#view-as-tiles:hover div,
#view-as-stream:hover div {
background: #605e5e;
}
#view-as-tiles div {
height: 6px;
width: 6px;
}
#view-as-tiles .fluff1 { left: 0; top: 0; }
#view-as-tiles .fluff2 { left: 8px; top: 0; }
#view-as-tiles .fluff3 { left: 0; top: 8px; }
#view-as-tiles .fluff4 { left: 8px; top: 8px; }
#view-as-stream div {
left: 0;
width: 14px;
height: 6px;
}
#view-as-stream .fluff1 { top: 0; }
#view-as-stream .fluff2 { top: 8px; }
/* Blog / articles */
.article-list .article {
padding-top: 50px;
padding-bottom: 50px;
border-top: 1px solid $dividers-col;
}
.article-list .article:first-child {
border-top: none;
padding-top: 20px;
}
@media (min-width: 767px) {
.article-list.article-layout--columns {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
margin-right: -20px;
.article {
display: flex;
box-sizing: border-box;
padding: 0 20px;
margin: 0 0 50px;
border: none;
width: 50%;
border-right: 1px solid $dividers-col;
&:nth-child(2n),
&:last-child {
border-right: 0;
}
}
.article__inner {
display: flex;
flex-direction: column;
flex-basis: 100%;
> .user-content {
flex-grow: 1;
margin-bottom: 2em;
}
}
&.article-layout--one-row .article:nth-child(3) {
display: none;
}
}
}
@media (min-width: 1024px) {
.article-list.article-layout--columns {
.article {
width: 33.33%;
&:nth-child(2n) {
border-right: 1px solid $dividers-col;
}
&:nth-child(3n),
&:last-child {
border-right: 0;
}
}
&.article-layout--one-row .article:nth-child(3) {
display: flex;
}
}
}
.article .container,
#comments.container {
max-width: 800px;
}
.article .meta {
margin-top: 1em;
font-style: italic;
font-size: 90%;
}
.article .meta .time {
display: block;
}
.article .meta .tags .label {
font-style: normal;
}
.user-content {
}
.user-content h1,
.user-content h2,
.user-content h3,
.user-content h4,
.user-content h5,
.user-content h6 {
margin: 1em 0 15px;
}
.user-content a {
text-decoration: underline;
}
.user-content a.text-link {
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid #18332f;
&:hover {
border-bottom-color: #605e5e;
}
}
.user-content iframe {
max-width: 100%;
}
/* Meta info */
.meta .iconmeta {
margin-right: 10px;
line-height: 1.4em;
display: inline-block;
font-size: $smaller-text-size;
}
.meta .iconmeta a {
white-space: nowrap;
}
.meta .tags a {
&:after { content: ','; }
&:last-child:after { content: none; }
}
/* Cart */
#cartform .divider {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid $dividers-col;
}
#cartform .item-list {
margin: 10px 0 40px;
}
#cartform .item {
display: flex;
list-style: none;
border-top: 1px solid $dividers-col;
padding: 10px 0;
&:first-child {
border-top: none;
}
}
#cartform .item .image {
flex-shrink: 0;
display: flex;
align-items: center;
width: 100px;
margin: 0 4% 0 0;
a {
display: block;
width: 100%;
}
img {
vertical-align: middle;
}
}
#cartform .item .quantity-container {
padding-top: 15px;
padding-bottom: 10px;
}
#cartform .item .desc,
#cartform .item .line-total {
padding-top: 24px;
padding-bottom: 24px;
}
#cartform .item .desc {
flex-grow: 1;
padding-right: 20px;
}
.quantity-container {
margin-right: 40px;
text-align: center;
}
.buttoned-input {
white-space: nowrap;
border: 1px solid $input-border-col;
background: $input-background-col;
color: $input-text-col;
a {
display: inline-block;
padding: 0 5px 0 10px;
}
a:last-child {
padding: 0 10px 0 5px;
}
svg {
width: 16px;
height: 16px;
}
input {
border: none;
width: 2em;
padding-left: 0;
padding-right: 0;
text-align: center;
box-sizing: content-box;
}
.unusable {
visibility: hidden;
pointer-events: none;
}
}
#cartform .item .remove {
display: block;
margin-top: 5px;
svg {
width: 16px;
height: 16px;
stroke: currentColor;
}
}
#cartform .item .line-total {
text-align: right;
width: 200px;
flex-shrink: 0;
}
#cartform .checkout-note textarea {
width: 370px;
max-width: 90%;
height: 70px;
margin-top: 10px;
}
.checkout-subtotal-container__left {
float: left;
}
.checkout-subtotal-container__right {
float: right;
}
#cartform .subtotal {
margin: 0 0 30px;
}
#cartform .checkout-misc-container .layout-column-half-right {
text-align: right;
}
#cartform .checkout-col {
float: right;
margin-top: 20px;
width: 33.33%;
width: calc(33.33% - 20px);
text-align: center;
.button {
width: 100%;
box-sizing: border-box;
}
}
#cartform .checkout-buttons {
margin-bottom: 10px;
}
.update-cart-container {
display: none;
margin-bottom: 5px;
.no-js &,
[data-ajax-update="false"] & {
display: inline;
}
}
#cartform .termsagreement {
margin-bottom: 5px;
}
#cartform .termsagreement label {
vertical-align:middle;
}
.additional-checkout-buttons {
margin-top: 40px;
box-sizing: border-box;
*, *:before, *:after {
box-sizing: inherit;
}
> * {
vertical-align: top;
}
.additional-checkout-button {
margin: 0 0 10px;
width: 100%;
&+.additional-checkout-button {
margin-left: 0;
}
}
}
.additional-checkout-buttons input {
background: none;
border: none;
height: auto;
}
.continue-shopping {
display: block;
margin-top: 20px;
}
#shipping-calculator {
margin-top: 20px;
margin-right: -30px;
}
#cartform #shipping-calculator .styled-select {
width: 100%;
}
#cartform #shipping-calculator .inputrow {
float: left;
clear: none;
width: calc(33.3% - 30px);
padding: 0 30px 20px 0;
}
#cartform #shipping-calculator .inputrow label {
display: block;
float: none;
font-size: $label-font-size;
line-height: $label-line-height;
margin-bottom: $label-margin-bottom;
}
#cartform #shipping-calculator .inputrow input[type=text] {
box-sizing: border-box;
width: 100%;
}
#cartform #shipping-calculator #wrapper-response {
margin: 20px 0;
clear: both;
}
.struck-out-price {
text-decoration: line-through;
}
/** Forms **/
.input-row select,
.inputrow select {
height: 30px;
line-height: 30px;
padding: 4px 14px 4px 4px;
border: 1px solid $dividers-col;
}
#template .template_header {
margin: 40px 0;
}
.small-form {
margin-left: auto;
margin-right: auto;
width: 420px;
max-width: 100%;
.title {
text-align: center;
}
@media (max-width: 767px) {
box-sizing: border-box;
}
}
#template,
.small-form {
input[type=email],
input[type=text],
input[type=number],
input[type=password],
textarea,
.styled-select {
width: 100%;
}
}
.text-over-input {
position: relative;
}
.text-over-input__text {
margin-top: 1em;
}
@media (min-width: 400px) {
.text-over-input__text {
position: absolute;
top: 50%;
right: 20px;
line-height: 1em;
margin-top: -0.5em;
font-size: $smaller-text-size;
letter-spacing: $special-letter-spacing;
}
}
#template label,
.edit_address label {
display: block;
font-size: $label-font-size;
line-height: $label-line-height;
margin-bottom: $label-margin-bottom;
}
.input-row {
margin-bottom: 20px;
}
#template .action_bottom {
margin-top: 27px;
}
#template .note {
display: block;
margin: 10px 0;
}
.errors {
margin: 20px 0;
padding: 10px 20px;
border: 1px solid rgba(0,0,0,0.1);
background: rgba(0,0,0,0.05);
}
#template .errors ul {
margin: 0;
}
#template .errors li {
list-style: none;
}
#template.lefty-form {
text-align: left;
}
.righty-form input[type="text"],
.righty-form input[type="email"],
.righty-form textarea {
width: 100%;
}
.address_actions .action_edit {
margin-right: 15px;
}
#address_tables {
margin-top: 40px;
}
.address_table {
background: rgba(0,0,0,0.05);
padding: 20px;
}
@media (min-width: 800px) {
#address_tables {
display: flex;
flex-wrap: wrap;
}
.address_table {
width: calc(50% - 20px);
margin-right: 20px;
box-sizing: border-box;
&:nth-child(2n) {
margin-left: 20px;
margin-right: 0;
}
}
}
.edit_address .small-form {
margin-left: 0;
}
#admin_header {
margin: 20px 0 40px;
}
#admin_header .title {
text-align: center;
}
#admin_header .action_return {
margin-bottom: 20px;
}
#customer_sidebar {
float: left;
width: 33%;
}
#customer_detail .address p,
.address_table .view_address p,
#order_address .address p {
margin-bottom: 0;
}
#customer_orders {
float: right;
width: 60%;
}
#order_details {
clear: both;
width: 100%;
@media (max-width: 767px) {
.price,
.sku {
visiblity: hidden;
padding: 0;
font-size: 0;
}
}
}
.order-table-container {
overflow: auto;
}
#comments .comment {
padding-top: 20px;
border-top: 1px solid $dividers-col;
}
#comments .comment.first {
border-top: 0;
}
#comments .comment .gravatar {
float: left;
width: 60px;
border-radius: 100%;
overflow: hidden;
img {
vertical-align: top;
}
}
#comments .comment .detail {
margin-left: 80px;
}
.payment-methods .payment-icon {
margin: 0 3px;
height: 25px;
width: 40px;
}
ul.taglist {
margin:0;
}
ul.taglist li {
display:inline;
white-space: nowrap;
}
table.noborders,
table.noborders tr,
table.noborders th,
table.noborders td {
border:0;
}
.simple-popup {
position: absolute;
width: 140px;
padding: 10px 15px;
border: 1px solid $dividers-col;
color: #232323;
background: #ffffff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-box-shadow: 0 0 2px 0 #888;
-moz-box-shadow: 0 0 2px 0 #888;
box-shadow: 0 0 2px 0 #888;
text-align:center;
}
/* quick hacks for Facebook button */
.fb_iframe_widget > span { vertical-align: baseline!important; }
.fb_iframe_widget iframe {
max-width:none;
}
.slide {
position: relative;
}
.slide img { width: 100%; }
/* Overlays over slider and ad on homepage */
.overlay-text {
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 100%;
text-align: center;
display: flex;
align-items: center;
// rte styles in overlays - a bit unique
p {
margin: 0.1em 0;
}
}
.overlay-text.overlay-left {
text-align: left;
}
.overlay-text.overlay-right {
text-align: right;
}
.overlay-text .inner {
display: block;
width: 100%;
}
.overlay-text .text > div {
line-height: 1.2em;
padding: 15px 1em;
display: inline-block;
}
.slide .overlay-text .text {
@extend h1;
line-height: 1.4;
margin: 0;
padding: 0;
.second-line {
font-size: 60%;
line-height: 1.2;
}
@media(max-width: 1160px) {
.snap-text {
font-size: $home-overlay-title-mobile-size;
.second-line {
font-size: $home-overlay-text-mobile-size;
}
}
}
}
.slide .overlay-text .button:not(:first-child) {
margin-top: 10px;
}
/* Full width ad only */
.full-width-image,
.image-block {
overflow: hidden;
position: relative;
line-height: 0;
.img-cont {
display: block;
position: relative;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
a {
display: block;
}
img {
width: 100%;
height: auto;
vertical-align: top;
}
&.no-stretch img {
width: auto;
}
}
.slideshow,
.full-width-image {
.overlay-text .text {
font-size: $larger-text-size * 1;
line-height: 1.2em;
}
.rimage-outer-wrapper {
max-width: none!important;
max-height: none!important;
}
}
.full-width-image .rimage-outer-wrapper {
visibility: hidden;
}
/* Onboarding placeholder */
.placeholder-image {
position: relative;
padding-top: 100%;
height: 0px;
overflow: hidden;
background: #f9fafa;
&.dark {
background: #c6c7c8;
svg, svg g {
fill: #a3a6a9;
}
}
&.landscape {
padding-top: 55%;
}
&.placeholder--banner {
padding-top: 475px;
@media (max-width: 767px) {
padding-top: 55%;
}
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&, & g {
fill: #c8cbcd;
}
}
}
$instagram-gutter: 16px;
.willstagram {
overflow: hidden;
white-space: nowrap;
.item {
display: inline-block;
max-width: 100%;
vertical-align: top;
width: 200px;
margin: 0 $instagram-gutter 0 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
> a {
display: block;
height: 0;
padding-top: 100%;
overflow: hidden;
img {
display: none;
}
}
}
.owl-item {
background: $loading-image-bg;
.item {
display: block;
width: auto;
margin: auto;
.placeholder-image {
width: 100%;
max-width: 100%;
}
}
}
.desc {
display: none;
}
img {
width: 100%;
vertical-align: top;
}
a {
display: block;
transform: scale(1);
transition: opacity 150ms;
}
a:hover {
opacity: 0.9;
}
&.willstagram--uncontained {
padding-left: $instagram-gutter;
padding-right: $instagram-gutter;
}
&.willstagram--no-margins {
padding-left: 0;
padding-right: 0;
.item {
margin-right: 0;
}
}
.willstagram__error {
font-style: italic;
text-align: center;
}
}
.align-center,
.align-centre {
text-align: center;
}
.align-right {
text-align: right;
}
a .state {
display: inline-block;
width: 1em;
text-align: center;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
iframe, object, embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
}
.video-container__cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: #eee;
.rimage-outer-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
}
}
.video-container__cover--playing {
opacity: 0!important;
pointer-events: none;
}
$_video-play-button-size: 80px;
.video-container__play {
position: absolute;
top: 50%;
left: 50%;
margin: (-$_video-play-button-size/2) 0 0 (-$_video-play-button-size/2);
transition: transform 150ms;
svg {
width: $_video-play-button-size;
height: $_video-play-button-size;
fill: transparent;
stroke: #fff;
polygon {
fill: #fff;
}
}
&:hover {
transform: scale(1.1);
svg {
fill: transparent;
}
}
}
/* Content and content layouts */
.spaced-row {
margin-bottom: $section-padding;
}
.spaced-row-above {
margin-top: $section-padding;
}
.fully-spaced-row {
margin-top: $section-padding;
margin-bottom: $section-padding;
}
.strongly-spaced-row {
margin-top: $section-padding*1.5;
margin-bottom: $section-padding*1.5;
}
.lightly-spaced-row {
margin-bottom: 1em;
}
.padded-row {
padding-top: $section-padding;
padding-bottom: $section-padding;
&.no-bg {
margin-top: $section-padding;
margin-bottom: $section-padding;
padding-top: 0;
padding-bottom: 0;
}
}
.strongly-padded-row {
padding-top: $section-padding*2;
padding-bottom: $section-padding*2;
}
.content img,
.content iframe,
.content embed,
.content object {
max-width: 100%;
height: auto;
}
.layout-column-half-left {
float: left;
width: 45%;
}
.layout-column-half-right {
float: right;
width: 45%;
}
.layout-content-with-image-left,
.layout-content-with-image-right {
&.valign-top {
.image-cont, .content {
vertical-align: top;
}
}
&.valign-middle {
.image-cont, .content {
vertical-align: middle;
}
}
&.valign-bottom {
.image-cont, .content {
vertical-align: bottom;
}
}
}
.layout-content-with-image-left .image-cont,
.layout-content-with-image-right .image-cont {
display: inline-block;
width: 33.333%;
text-align: center;
}
.layout-content-with-image-left .content,
.layout-content-with-image-right .content {
display: inline-block;
width: 60%;
margin-right: 6.666%;
}
.layout-content-with-image-left .content {
margin-left: 5%;
margin-right: 0;
}
.layout-content-with-image--large-image {
.image-cont {
width: 60%;
}
.content {
width: 33.333%;
}
}
$_micro-collage-unit-width: 14.5%;
.micro-collage {
position: relative;
height: 0px;
padding-top: 60%;
@media (max-width: 767px) {
padding-top: 100%;
}
.fade-in {
opacity: 0;
transition: opacity 500ms;
}
.fade-in.lazyloaded {
opacity: 1;
}
.placeholder-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
}
.micro-collage__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
}
.micro-collage__image-1-frame {
position: absolute;
z-index: 2;
transform: translate(0, 0);
transition: all 200ms ease-out;
outline: 1px solid transparent; // required rendering hack
left: $_micro-collage-unit-width;
right: 0;
top: $_micro-collage-unit-width * 1.5;
bottom: $_micro-collage-unit-width * 1.5;
&.lazyload--placeholder {
background: $loading-image-bg;
}
}
.micro-collage__image-2-frame {
position: absolute;
z-index: 1;
transform: translate(0, 0);
transition: all 200ms ease-out;
outline: 1px solid transparent; // required rendering hack
left: 0;
right: $_micro-collage-unit-width * 2.5;
top: $_micro-collage-unit-width / 2;
bottom: $_micro-collage-unit-width / 2;
.placeholder-image {
opacity: 0.25;
}
&.lazyload--placeholder {
background: $loading-image-bg;
}
}
@media (min-width: 768px) {
&.micro-collage--link-hover {
.micro-collage__image-1-frame {
transform: scale(1.03);
//transform: translate(10px, -10px);
}
.micro-collage__image-2-frame {
transform: scale(0.97);
//transform: translate(-10px, 10px);
}
&.micro-collage--style-2,
&.micro-collage--style-4 {
.micro-collage__image-1-frame {
transform: scale(1.03);
//transform: translate(0, -10px);
}
.micro-collage__image-2-frame {
transform: scale(0.97);
//transform: translate(0, 10px);
}
}
}
}
&.micro-collage--style-1,
&.micro-collage--style-4 {
margin-top: - $_micro-collage-unit-width / 4;
margin-bottom: - $_micro-collage-unit-width / 4;
}
&.micro-collage--style-3 {
margin-top: - $_micro-collage-unit-width / 2;
margin-bottom: - $_micro-collage-unit-width / 2;
}
&.micro-collage--style-2 {
margin-top: - $_micro-collage-unit-width / 4;
margin-bottom: - $_micro-collage-unit-width / 4;
.micro-collage__image-1-frame {
left: 0;
right: $_micro-collage-unit-width;
@media (max-width: 767px) {
left: $_micro-collage-unit-width / 2;
right: $_micro-collage-unit-width / 2;
}
.layout-content-with-image-right & {
left: $_micro-collage-unit-width;
right: 0;
@media (max-width: 767px) {
left: $_micro-collage-unit-width / 2;
right: $_micro-collage-unit-width / 2;
}
}
}
.micro-collage__image-2-frame {
left: $_micro-collage-unit-width * 0.75;
right: $_micro-collage-unit-width * 1.75;
@media (max-width: 767px) {
left: $_micro-collage-unit-width * 1.25;
right: $_micro-collage-unit-width * 1.25;
}
.layout-content-with-image-right & {
left: $_micro-collage-unit-width * 1.75;
right: $_micro-collage-unit-width * 0.75;
@media (max-width: 767px) {
left: $_micro-collage-unit-width * 1.25;
right: $_micro-collage-unit-width * 1.25;
}
}
}
}
&.micro-collage--style-3 {
.micro-collage__image-1-frame {
top: $_micro-collage-unit-width;
bottom: $_micro-collage-unit-width * 2;
}
.micro-collage__image-2-frame {
top: $_micro-collage-unit-width * 2;
bottom: $_micro-collage-unit-width;
right: $_micro-collage-unit-width;
}
}
&.micro-collage--style-4 {
.micro-collage__image-1-frame {
top: $_micro-collage-unit-width / 2;
bottom: $_micro-collage-unit-width / 2;
right: $_micro-collage-unit-width * 2;
@media (max-width: 767px) {
left: $_micro-collage-unit-width * 1.5;
right: $_micro-collage-unit-width * 1.5;
}
.layout-content-with-image-right & {
left: $_micro-collage-unit-width * 2;
right: $_micro-collage-unit-width;
@media (max-width: 767px) {
left: $_micro-collage-unit-width * 1.5;
right: $_micro-collage-unit-width * 1.5;
}
}
}
.micro-collage__image-2-frame {
top: $_micro-collage-unit-width;
bottom: $_micro-collage-unit-width;
right: $_micro-collage-unit-width;
@media (max-width: 767px) {
left: $_micro-collage-unit-width / 2;
right: $_micro-collage-unit-width / 2;
}
.layout-content-with-image-right & {
left: $_micro-collage-unit-width;
right: 0;
@media (max-width: 767px) {
left: $_micro-collage-unit-width / 2;
right: $_micro-collage-unit-width / 2;
}
}
}
}
&.micro-collage--style-5 {
.micro-collage__image-1-frame {
top: 0;
left: $_micro-collage-unit-width * 2;
bottom: $_micro-collage-unit-width;
right: $_micro-collage-unit-width;
}
.micro-collage__image-2-frame {
left: $_micro-collage-unit-width;
right: $_micro-collage-unit-width * 2;
top: $_micro-collage-unit-width;
bottom: 0;
}
}
}
.product-collage {
position: relative;
.product-collage__inner {
pointer-events: none;
height: 0;
padding-top: 100%;
position: relative;
}
.product-collage__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
transition: all 200ms;
transform: translate3d(0, 0, 0);
transform-origin: center center;
.rimage-outer-wrapper,
.placeholder-image {
width: 75%;
margin-left: auto;
margin-right: auto;
@media (max-width: 767px) {
width: 95%;
}
}
}
.product-collage__image.active {
z-index: 1;
opacity: 1;
.rimage-outer-wrapper .rimage-wrapper img.lazyloaded {
opacity: 1!important;
}
}
}
.product-collage--multiple-images {
cursor: none;
.product-collage__image {
opacity: 0;
.rimage-outer-wrapper .rimage-wrapper {
background: #ffffff;
img.lazyloaded {
opacity: 0.75!important;
}
}
}
}
.product-collage.product-collage--focus {
.product-collage__image {
opacity: 1;
}
.rimage-outer-wrapper .rimage-wrapper img.lazyloaded {
transition: none;
}
}
.product-collage--show-borders.product-collage--focus .rimage-outer-wrapper {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.product-collage__prev,
.product-collage__next {
position: absolute;
top: 0;
width: 50%;
height: 100%;
z-index: 2;
cursor: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.product-collage__prev { left: 0; }
.product-collage__next { right: 0; }
.product-collage__cursor {
position: absolute;
top: -21px;
left: -21px;
width: 42px;
height: 42px;
opacity: 0;
z-index: 2;
pointer-events: none;
background: transparent url("data:image/svg+xml,%3Csvg width='42px' height='42px' viewBox='0 0 42 42' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFFFFF' cx='21' cy='21' r='21'%3E%3C/circle%3E%3Cg transform='translate%2813.000000, 16.000000%29' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.5,5.5 L16,5.5'%3E%3C/path%3E%3Cpolyline points='11 0.5 16 5.5 11 10.5'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat;
.product-collage--hover & {
opacity: 1;
}
}
.product-collage__prev:hover {
cursor: none;
}
@media (max-width: 767px) {
.featured-product {
display: flex;
flex-direction: column;
.content {
order: 1;
}
}
}
.styled-select.has-clickyboxes {
display: block;
height: auto;
overflow: visible;
width: auto;
background: transparent;
border: none;
&::after {
content: none;
}
}
.clickyboxes {
margin: 0 0 -10px;
padding: 0;
li {
display: inline;
a {
display: inline-block;
margin: 0 10px 10px 0;
padding: 6px 15px;
min-width: 1em;
border: 1px solid $input-border-col;
background: $input-background-col;
color: $input-text-col;
position: relative;
text-align: center;
&:hover {
color: $input-text-col;
background: darken($input-background-col, 5%);
}
&.unavailable {
color: rgba($input-text-col, 0.5);
&::after {
content: '';
position: absolute;
top: 50%;
margin-top: 1px;
left: 10px;
right: 10px;
border-top: 1px solid rgba($input-text-col, 0.3);
}
&.active,
&.active:hover {
background: $input-background-col;
color: rgba($input-text-col, 0.5);
border-color: mix(#18332f, $input-border-col, 50%);
}
}
&.active,
&.active:hover {
background: #18332f;
border-color: #18332f;
color:#ffffff;
}
}
}
}
.responsive-table {
width: 100%;
.responsive-table__cell-label,
.responsive-table__cell-head__icon,
.responsive-table__more {
display: none;
}
@media (max-width: 767px) {
display: block;
width: auto;
margin-left: -$section-padding/2;
margin-right: -$section-padding/2;
border-top: 1px solid $dividers-col;
thead {
display: none;
}
tbody, tr, td {
display: block;
}
tr {
border-bottom: 1px solid $dividers-col;
}
td {
display: none;
border: none;
padding: 0 $section-padding/2;
background: darken(#ffffff, 8%);
color: #18332f;
}
td.responsive-table__first-mobile-cell {
padding-top: $section-padding/2;
}
td:last-child {
padding-bottom: $section-padding/2;
}
.responsive-table__cell-head {
display: block;
cursor: pointer;
position: relative;
padding-top: $section-padding/2;
padding-bottom: $section-padding/2;
padding-right: 30px + $section-padding/2;
background: #ffffff;
a {
color: inherit;
}
}
.responsive-table__cell-head__icon {
display: block;
position: absolute;
top: $section-padding/2;
right: $section-padding/2;
}
.responsive-table__cell-label {
display: inline;
font-weight: bold;
&:after {
content: ':';
}
}
.responsive-table__more {
display: block;
margin-top: 1em;
}
.desktop-only {
display: none!important;
}
.expanded {
.responsive-table__cell-head__icon {
transform: rotate(90deg);
}
td {
display: block;
}
}
}
}
$flexible-layout-gutter: 16px;
// warning: do not add a .cf to a .flexible-layout - breaks in Safari
.flexible-layout {
margin-left: -$flexible-layout-gutter;
margin-bottom: -$flexible-layout-gutter;
@include flexbox();
@include flex-wrap-wrap();
-webkit-box-align: stretch;
-ms-flex-align: stretch;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
&.valign-middle > [class^="column"] {
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center;
}
&.valign-bottom > [class^="column"] {
-ms-flex-item-align: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
}
.column-quarter,
.column-third,
.column-half,
.column-two-thirds,
.column-three-quarters,
.column-full {
float: left;
margin-left: $flexible-layout-gutter;
margin-bottom: $flexible-layout-gutter;
@include flex(0 0 auto);
}
.column-quarter {
width: calc(25% - #{$flexible-layout-gutter});
-webkit-flex-basis: calc(25% - #{$flexible-layout-gutter});
flex-basis: calc(25% - #{$flexible-layout-gutter});
}
.column-third {
width: calc(33.333% - #{$flexible-layout-gutter});
@include flex-basis(calc(33.333% - #{$flexible-layout-gutter}));
}
.column-half {
width: calc(50% - #{$flexible-layout-gutter});
@include flex-basis(calc(50% - #{$flexible-layout-gutter}));
}
.column-two-thirds {
width: calc(66.666% - #{$flexible-layout-gutter});
@include flex-basis(calc(66.666% - #{$flexible-layout-gutter}));
}
.column-three-quarters {
width: calc(75% - #{$flexible-layout-gutter});
@include flex-basis(calc(75% - #{$flexible-layout-gutter}));
}
.column-full {
width: calc(100% - #{$flexible-layout-gutter});
@include flex-basis(calc(100% - #{$flexible-layout-gutter}));
}
}
@media (max-width: 767px) {
.flexible-layout {
margin-left: auto;
display: block;
@include flex-wrap-wrap();
.column-quarter,
.column-third,
.column-half,
.column-two-thirds,
.column-three-quarters,
.column-full {
float: none;
margin-left: auto;
width: auto;
@include flex-basis(initial);
}
&.layout-all-quarters {
margin-left: -$flexible-layout-gutter;
[class^="column"] {
float: left;
margin-left: $flexible-layout-gutter;
width: calc(50% - #{$flexible-layout-gutter});
@include flex-basis(calc(50% - #{$flexible-layout-gutter}));
}
}
}
}
@media (max-width: 500px) {
.flexible-layout.layout-all-quarters {
margin-left: auto;
[class^="column"] {
float: none;
margin-left: auto;
width: auto;
@include flex-basis(initial);
}
}
}
.size-chart-container {
margin-bottom: 10px;
}
.size-chart-link {
display: block;
font-size: $label-font-size;
line-height: 1.2em;
}
.size-chart {
padding: 40px;
max-width: 84vw;
width: 700px;
@media (max-width: 767px) {
padding: 20px;
table {
display: flex;
overflow: auto;
width: 100%;
}
}
}
.size-chart__inner {
width: 100%;
overflow: auto;
}
.image-cont img {
max-width: 100%;
height: auto;
vertical-align: top;
}
.article-image {
margin-top: 0;
margin-bottom: 1em;
}
.template-article .article-image {
margin-bottom: 0;
}
.icon-with-caption {
.icon-with-caption__text {
margin: 0.5em 0 0;
white-space: pre-line;
}
}
.icon-with-caption__image-icon {
margin: 0 auto;
width: 34px;
}
/* Just-added-to-cart summary */
$_cart-summary-overlay-column-margin: 15px;
.cart-summary-overlay {
position: fixed;
z-index: 6000;
top: 0;
left: 0;
width: 100%;
padding: ($_cart-summary-overlay-column-margin * 2) 20px;
background: #fafafa;
border-bottom: 1px solid $dividers-col;
font-size: $smaller-text-size;
line-height: 1.4;
display: flex;
box-sizing: border-box;
}
.cart-summary-overlay__column-title {
margin: 0 (-$_cart-summary-overlay-column-margin) 15px 0;
padding: 0 0 12px;
border-bottom: 1px solid $dividers-col;
}
.cart-summary-overlay__column-image {
width: 85px;
}
.cart-summary-overlay__column-item {
margin-left: $_cart-summary-overlay-column-margin;
width: 300px;
}
.cart-summary-overlay__column-price {
margin-left: $_cart-summary-overlay-column-margin;
width: 95px;
}
.cart-summary-overlay__column-quantity {
margin-left: $_cart-summary-overlay-column-margin;
width: 70px;
}
.cart-summary-overlay__column-total {
margin-left: $_cart-summary-overlay-column-margin;
width: 70px;
}
.cart-summary-overlay__column-subtotal {
flex-grow: 1;
text-align: right;
margin-bottom: 5em; // room for buttons
.cart-summary-overlay__column-title {
margin-right: 0;
}
}
.cart-summary-overlay__note {
font-style: italic;
}
.cart-summary-overlay__actions {
position: absolute;
bottom: $_cart-summary-overlay-column-margin * 2;
right: $_cart-summary-overlay-column-margin;
.button:last-child {
margin-left: 10px;
}
}
.cart-summary-overlay__title {
margin: -0.25em 0 10px;
font-size: $base-text-size;
}
.cart-summary-overlay__variant {
margin-bottom: 0.2em;
}
.cart-summary-overlay__variant-option {
margin-right: 0.5em;
}
.cart-summary-overlay__mobile-price-row {
display: none;
}
.cart-summary-overlay__note {
margin-top: 10px;
}
.cart-summary-overlay__title,
.cart-summary-overlay__variant-option,
.cart-summary-overlay__line-price,
.cart-summary-overlay__mobile-line-price,
.cart-summary-overlay__subtotal {
color: #18332f;
}
@media (max-width: 900px) {
.cart-summary-overlay__column-item {
width: 250px;
}
}
@media (max-width: 767px) {
.cart-summary-overlay {
flex-wrap: wrap;
}
.cart-summary-overlay__column-item {
width: calc(100% - 100px);
}
.cart-summary-overlay__mobile-price-row {
display: flex;
}
.cart-summary-overlay__mobile-unit-price {
width: 33%;
flex-grow: 1;
}
.cart-summary-overlay__mobile-quantity {
width: 33%;
flex-grow: 1;
text-align: center;
.cart-summary-overlay__quantity {
margin-left: 0.5em;
}
}
.cart-summary-overlay__mobile-line-price {
width: 33%;
flex-grow: 1;
text-align: right;
}
.cart-summary-overlay__column-price,
.cart-summary-overlay__column-quantity,
.cart-summary-overlay__column-total {
display: none;
}
.cart-summary-overlay__column-subtotal {
margin: 15px 0;
padding: 15px 0 0;
width: 100%;
border-top: 1px solid $dividers-col;
.cart-summary-overlay__column-title {
display: inline;
margin: 0 0.5em 0 0;
padding: 0;
border: none;
}
}
.cart-summary-overlay__note {
margin-top: 10px;
}
.cart-summary-overlay__actions {
position: static;
width: 100%;
.button {
box-sizing: border-box;
width: calc(50% - 5px);
}
.button:last-child {
margin: 0 0 0 10px;
}
}
}
@media (max-width: 400px) {
.cart-summary-overlay__actions {
.button {
margin: 0;
width: 100%;
}
.button:last-child {
margin: 10px 0 0;
}
}
}
/*
* FancyBox - jQuery Plugin
* Simple and fancy lightbox alternative
*
* Examples and documentation at: http://fancybox.net
*
* Copyright (c) 2008 - 2010 Janis Skarnelis
* That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
*
* Version: 1.3.4 (11/11/2010)
* Requires: jQuery v1.3+
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
cursor: pointer;
z-index: 5104;
display: none;
background: #fff;
border-radius: 10px
}
#fancybox-loading div {
top: 0 !important;
border: 4px solid #aaa;
border-top: 4px solid #333;
border-radius: 50%;
margin: 6px;
width: 38px;
height: 38px;
animation: spin 2s linear infinite
}
@keyframes spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
#fancybox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 5100;
display: none;
}
#fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: none;
}
#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
padding: 20px;
z-index: 5101;
outline: none;
display: none;
@media (max-width: 767px) {
padding-top: 55px;
}
}
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #ffffff;
}
#fancybox-content {
width: 0;
height: 0;
padding: 0;
outline: none;
position: relative;
overflow: hidden;
z-index: 5102;
border: 1px solid rgba(0,0,0,0.2);
}
#fancybox-hide-sel-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 5101;
}
#fancybox-close {
position: fixed;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235c5c5c' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center center;
background-size: 50px 50px;
cursor: pointer;
z-index: 5103;
display: none
}
@media (max-width: 767px) {
#fancybox-close {
position: absolute;
top:-45px;
right: -5px
}
}
#fancybox-error {
color: #444;
font: normal 12px/20px Arial;
padding: 14px;
margin: 0;
}
#fancybox-img {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
outline: none;
line-height: 0;
vertical-align: top;
}
#fancybox-frame {
width: 100%;
height: 100%;
border: none;
display: block;
}
#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url(//thehandmadeshowroom.com/cdn/shop/t/3/assets/blank.gif?v=164826798765693215961555549919);
z-index: 5102;
display: none;
}
#fancybox-left {
left: 0px;
}
#fancybox-right {
right: 0px;
}
#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
left: -9999px;
width: 40px;
height: 80px;
margin-top: -40px;
cursor: pointer;
z-index: 5102;
display: block;
background-size: auto 100%;
background-position: center center;
background-repeat: no-repeat
}
#fancybox-left-ico {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#464749' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='0.9' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E")
}
#fancybox-right-ico {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#464749' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='0.9' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}
#fancybox-left:hover, #fancybox-right:hover {
visibility: visible; /* IE6 */
}
#fancybox-left:hover span {
left: 20px;
}
#fancybox-right:hover span {
left: auto;
right: 20px;
}
.fancybox-bg {
position: absolute;
padding: 0;
margin: 0;
border: 0;
width: 20px;
height: 20px;
z-index: 5001;
}
#fancybox-bg-n {
top: -20px;
left: 0;
width: 100%;
}
#fancybox-bg-ne {
top: -20px;
right: -20px;
background-position: -40px -162px;
}
#fancybox-bg-e {
top: 0;
right: -20px;
height: 100%;
background-position: -20px 0px;
}
#fancybox-bg-se {
bottom: -20px;
right: -20px;
background-position: -40px -182px;
}
#fancybox-bg-s {
bottom: -20px;
left: 0;
width: 100%;
background-position: 0px -20px;
}
#fancybox-bg-sw {
bottom: -20px;
left: -20px;
background-position: -40px -142px;
}
#fancybox-bg-w {
top: 0;
left: -20px;
height: 100%;
}
#fancybox-bg-nw {
top: -20px;
left: -20px;
background-position: -40px -122px;
}
#fancybox-title {
font-size: 12px;
z-index: 5102;
}
.fancybox-title-inside {
padding-bottom: 10px;
text-align: center;
color: #333;
background: #fff;
position: relative;
}
.fancybox-title-outside {
padding-top: 10px;
color: #fff;
}
.fancybox-title-over {
position: absolute;
bottom: 0;
left: 0;
color: #FFF;
text-align: left;
}
#fancybox-title-over {
padding: 10px;
display: block;
}
.fancybox-title-float {
position: absolute;
left: 0;
bottom: -20px;
height: 32px;
}
#fancybox-title-float-wrap {
border: none;
border-collapse: collapse;
width: auto;
}
#fancybox-title-float-wrap td {
border: none;
line-height: 1.4em;
text-align: center;
}
#fancybox-title-float-left {
padding: 0 0 0 15px;
background: #fff;
}
#fancybox-title-float-main {
color: #999;
line-height: 29px;
padding: 0 0 3px 0;
background: #fff;
}
#fancybox-title-float-right {
padding: 0 0 0 15px;
background: #fff;
}
.mobile-currency-switcher {
display: none;
margin: -5px 20px 20px;
font-size: 16px;
.switcher {
padding: 0;
}
}
/* Map section */
$_map-text-padding-vertical: 80px;
$_map-text-padding-horizontal: 40px;
$_map-text-padding-mobile-vertical: 40px;
$_map-text-padding-mobile-horizontal: 20px;
.map-section {
position: relative;
}
.map-section--map-constrained .map-section__wrapper {
position: relative;
}
.map-section__wrapper {
display: flex;
.errors {
padding: $_map-text-padding-vertical $_map-text-padding-horizontal;
}
}
.map-section__text {
box-sizing: border-box;
padding: $_map-text-padding-vertical $_map-text-padding-horizontal $_map-text-padding-vertical 0;
width: 50%;
}
.map-section__feature {
width: 33.333%;
display: flex;
}
.map-section__feature-image {
flex-grow: 1;
background-size: cover;
background-position: center;
&.placeholder-image {
height: auto;
padding-top: 0;
}
}
.map-section__map {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
}
.map-section__map-image {
height: 100%;
background-size: cover;
background-position: center;
// Only show the background image if map fails to load
.map-section--display-map & {
display: none !important;
}
}
.map-section__placeholder {
height: 100%;
padding: 0;
// Only show the placeholder image if map fails to load
.map-section--display-map & {
display: none !important;
}
}
.map-section__map-container {
height: 100%;
}
.map-section--has-feature-image {
.map-section__text {
width: 25%;
}
.map-section__map {
width: calc(50% - 89.5px);
}
}
@media (max-width: 1160px) {
.map-section--has-feature-image .map-section__map {
width: calc((100% - 80px) * 0.41666 + 40.5px);
}
}
@media (max-width: 959px) {
.map-section .container {
padding: 0;
}
.map-section__wrapper {
flex-wrap: wrap;
}
.map-section__text {
width: 50%;
padding: $_map-text-padding-vertical $_map-text-padding-horizontal;
}
.map-section__map {
width: 50%;
}
.map-section--has-feature-image {
.map-section__text,
.map-section__feature {
width: 50%;
}
.map-section__text {
padding-right: $_map-text-padding-horizontal;
}
}
.map-section--has-feature-image .map-section__map {
position: static;
width: 100%;
height: 55vh;
}
}
@media (max-width: 767px) {
.map-section__wrapper {
display: block;
}
.map-section__text,
.map-section--has-feature-image .map-section__text {
width: auto;
padding: $_map-text-padding-mobile-vertical $_map-text-padding-mobile-horizontal;
}
.map-section__feature,
.map-section__map {
position: static;
width: auto;
height: 55vh;
}
.map-section--has-feature-image .map-section__text,
.map-section--has-feature-image .map-section__feature,
.map-section--has-feature-image .map-section__map {
width: auto;
}
.map-section__feature,
.map-section__placeholder,
.map-section__map-container {
height: 55vh;
}
}
/* Responsive images */
.rimage-outer-wrapper {
margin-left: auto;
margin-right: auto;
}
.rimage-wrapper {
position: relative;
transition: background 150ms;
&.lazyload--placeholder {
background: $loading-image-bg;
}
.rimage__image {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.blur-in {
-webkit-filter: blur(10px);
filter: blur(10px);
transition: filter 400ms, -webkit-filter 400ms;
}
&.blur-in.lazyloaded {
-webkit-filter: blur(0);
filter: blur(0);
}
&.fade-in {
opacity: 0;
transition: opacity 500ms;
}
&.fade-in.lazyloaded {
opacity: 1;
}
&.cover {
object-fit: cover;
}
}
}
.rimage-background {
background-repeat: no-repeat;
background-position: center center;
&[data-parent-fit="contain"] {
background-size: contain;
}
&.fade-in {
opacity: 0;
transition: opacity 500ms;
}
&.fade-in.lazyloaded {
opacity: 1;
}
}
.rimage-background--atop {
background-position: center top;
}
$_review-border-color: rgba(#232323, 0.2);
.theme-product-reviews-full #shopify-product-reviews {
margin: 1em 0 2em
}
.theme-product-reviews-full .spr-container {
padding: 0;
border-color: $_review-border-color;
}
.theme-product-reviews-full .spr-header {
padding: 20px
}
.theme-product-reviews-full .spr-form {
margin: 0;
padding: 20px;
border-top: 1px solid $_review-border-color;
}
.theme-product-reviews-full .spr-reviews {
margin: 0;
padding: 0 0 20px;
border-top: 1px solid $_review-border-color;
}
.theme-product-reviews-full .spr-review {
box-sizing: border-box;
margin: 0;
padding: 20px 20px 0;
border: 0
}
.theme-product-reviews-full .spr-review .spr-icon {
font-size: 100%
}
.theme-product-reviews-full .spr-review:first-child {
margin-top: 0
}
.theme-product-reviews-full .spr-review-header-title {
font-size: 18px
}
.theme-product-reviews-full .spr-review-header-byline {
display: block;
margin: 0.1em 0 0.6em;
font-size: 15px;
line-height: 1.4em;
font-style: normal;
opacity: 0.6
}
.theme-product-reviews-full .spr-review-header-byline strong {
font-weight: normal
}
.theme-product-reviews-full .spr-review-content-body {
font-size: 15px;
line-height: 1.4em
}
.theme-product-reviews-full .spr-review-reportreview {
font-size: 80%
}
@media (min-width: 800px) {
.theme-product-reviews-full .spr-reviews {
display:flex;
flex-wrap: wrap
}
.theme-product-reviews-full .spr-reviews .spr-review {
width: 50%
}
}
.theme-product-reviews-full {
.spr-pagination {
width: 100%;
margin-top: 20px;
padding: 20px 0 0;
border-top-color: $_review-border-color;
}
.spr-pagination .spr-pagination-page {
margin: 0 5px;
}
.spr-pagination .spr-pagination-page.is-active {
font-weight: normal;
}
.spr-pagination .spr-pagination-prev {
left: 20px;
}
.spr-pagination .spr-pagination-next {
right: 20px;
}
}
/* mobile visibility utilities */
.mobile-only { display: none; }
.mobile-only-ib { display: none; }
/* Responsive styles */
/*
* This media query is specifically for shunting logo onto its own line
* before search/social icons overlap.
*/
@media only screen and (max-width: $logo-stack-snap) {
/* Sit search/socials on different level to logo */
#pageheader .logo {
clear: both; /* avoid social icons interfering */
}
#pageheader .util-area {
margin-left: 30px;
margin-right: 30px;
height: auto;
}
#pageheader .search-box,
#pageheader .utils {
position: static;
float: right;
margin: 10px 0;
height: auto;
}
#pageheader .search-box {
position: relative;
top: 0;
left: 0;
float: left;
}
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
.product-block.fixed-width {
@if $product-size < 250 {
width: calc(25% - 20px);
} @else {
width: calc(33.3% - 20px);
}
}
.collection-slider .collection-listing .product-block.fixed-width {
width: $product-size;
}
}
/* Roughly tablet size */
@media only screen and (max-width: 959px) {
.layout .col-third {
float: none;
width: auto;
margin-left: 0;
}
.layout .col-third,
.layout .col-third.left,
.layout .col-third.right {
float: none;
width: auto;
margin-bottom: 20px;
margin-left: 0;
}
#customer_sidebar,
#customer_orders {
float: none;
display: block;
width: auto;
margin: 20px 0;
}
.nav-row a {
padding-left: 14px;
padding-right: 14px;
}
#cartform .item .line-total {
width: 100px;
}
#template button,
#template input,
#template textarea {
max-width: 100%;
box-sizing: border-box;
}
}
/* Phone sizes typically start here */
@media only screen and (max-width: 767px) {
.mobile-only { display: block; }
.mobile-only-ib { display: inline-block; }
.desktop-only { display: none; }
/* iOS zoom workaround */
input,
select,
textarea {
font-size: 16px;
line-height: 1em;
}
.styled-select select {
font-size: 16px !important;
line-height: 1em!important;
}
.align-left-mobile {
text-align: left;
}
/* General layout */
.container {
padding-left: $section-padding/2;
padding-right: $section-padding/2;
}
.strongly-padded-row {
padding-top: $section-padding;
padding-bottom: $section-padding;
}
.strongly-spaced-row {
margin-top: $section-padding;
margin-bottom: $section-padding;
}
.layout-column-half-left,
.layout-column-half-right {
float: none;
width: auto;
}
.layout-column-half-left {
margin-bottom: $section-padding;
}
.layout-content-with-image-left .content,
.layout-content-with-image-left .image-cont,
.layout-content-with-image-right .content,
.layout-content-with-image-right .image-cont {
display: block;
width: auto;
margin: 20px 0;
}
.layout-content-with-image-mobile-above {
display: flex;
flex-direction: column;
.content {
order: 2;
}
.image-cont {
order: 1;
}
}
.layout-content-with-image-mobile-below {
display: flex;
flex-direction: column;
.content {
order: 1;
}
.image-cont {
order: 2;
}
}
#template.lefty-form {
text-align: center;
}
.nav-row a {
padding-left: 10px;
padding-right: 10px;
}
#store-messages { display: none; }
#store-messages-mobile { display: block; }
.page-header .filters {
float: none;
@include flexbox();
@include flex-wrap-wrap();
}
.page-header .filters .tags {
margin: 0 13px;
float: none;
flex: 1;
order: 2;
}
.page-header .filters .tags.sort {
margin: 10px 0 26px;
display: block;
flex: 100%;
order: 1;
}
.page-header .social-area {
margin-top: 20px;
float: none;
}
.collection-slider .has-paging {
padding-left: 30px;
padding-right: 30px;
position: relative;
}
.collection-slider .has-paging .prev,
.collection-slider .has-paging .next {
position: absolute;
left: 10px;
top: 0px;
margin: 0;
}
.collection-slider .has-paging .next {
left: auto;
right: 10px;
}
.collection-listing .product-list {
margin-left: 10px;
margin-right: 10px;
}
.container > .collection-listing .product-list {
margin-left: -10px;
margin-right: -10px;
}
.collection-listing .product-block {
height: auto;
width: 45%;
margin-left: 2%;
margin-right: 2%;
}
.collection-listing .product-list:not(.carousel) .product-block:not(.fixed-width) .image-cont .rimage-outer-wrapper {
width: auto!important;
}
.collection-slider .carousel .product-block {
margin-left: 5px;
margin-right: 5px;
width: auto;
}
.collection-slider .carousel .product-block.fixed-width {
width: $mobile-product-size;
}
.collection-slider .product-block.collection-block {
.product-info {
margin: 0;
}
.productlabel {
position: static;
display: block;
margin: 0;
> span {
display: block;
}
}
}
.product-block.page-block .block-inner,
.product-block.fixed-width.page-block .block-inner {
width: auto;
}
.collection-listing .product-detail .inner {
padding: 100px 40px 50px 40px;
margin-left: 10px;
margin-right: 10px;
}
.product-block.detail-mode-hover .product-info {
position: static;
display: block;
padding-top: 10px;
opacity: 1;
}
.product-block.detail-mode-hover .product-info:before,
.product-block.detail-mode-hover .product-info .dash {
display: none;
}
.blog-row .layout .article.col-third:not(:last-child) {
margin-bottom: 60px;
}
#cartform .item {
flex-wrap: wrap;
}
#cartform .item .image {
margin-right: 20px;
}
#cartform .item .desc {
padding-right: 0;
width: calc(100% - 130px);
}
#cartform .item .line-total {
flex-grow: 1;
}
.checkout-misc-container {
display: flex;
flex-direction: column;
.layout-column-half-left {
order: 2;
margin-bottom: 20px;
}
}
#cartform .checkout-misc-container .layout-column-half-right {
text-align: left;
margin-bottom: 20px;
}
#cartform #shipping-calculator {
margin-right: 0;
}
#cartform #shipping-calculator .inputrow {
float: none;
width: auto;
padding-right: 0;
}
#cartform .checkout-col {
float: none;
width: auto;
}
.page-header .social-area {
margin-left: -20px;
margin-right: -20px;
padding: 10px 20px;
border-top: 1px dotted mix($dividers-col, #ffffff, 50%);
border-bottom: 1px dotted mix($dividers-col, #ffffff, 50%);
.rsslink svg {
margin-left: 20px;
}
}
.sharing {
display: block;
a {
margin-left: 20px;
}
svg {
width: 20px;
height: 20px;
}
li:last-child a {
margin-right: 0;
}
}
.template-collection #content .page-header,
.template-blog #content .page-header {
@include flexbox();
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
.majortitle {
@include order(1);
}
.user-content {
@include order(1);
}
.filters {
@include order(3);
}
.social-area {
@include order(2);
}
}
.template-product #content {
padding-bottom: 0;
}
.product-detail .detail .productlabel {
display: block;
float: none;
margin: 20px auto;
}
.template-product .product-detail .gallery .main-image {
display: block;
margin: 0 0 12px 0;
text-align: center;
}
.template-product .product-detail .gallery .main-image img {
display: block;
width: 100%;
max-width: 400px;
height: auto;
margin: 0 auto;
}
.template-product .product-detail .gallery .thumbnails {
display: flex;
flex-wrap: nowrap !important;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
margin: 0;
padding: 0 0 10px 0;
}
.template-product .product-detail .gallery .thumbnails a {
display: inline-block;
flex: 0 0 72px;
width: 72px;
margin: 0;
}
.product-detail .gallery .mobile-slideshow {
display: none;
}
.product-detail .product-form .input-row select {
font-size: 16px!important;
}
.product-meta {
border-top: 1px solid mix($dividers-col, #ffffff, 50%);
}
.product-meta .product-meta-row {
display: block;
padding: 10px 0;
border-bottom: 1px dotted mix($dividers-col, #ffffff, 50%);
}
.product-meta .product-meta-row:last-child {
border-bottom: none;
}
.product-meta .further-nav > .container {
@include flexbox();
@include flex-wrap-nowrap();
> * {
@include flex-grow(1);
float: left;
width: 33.3%;
box-sizing: content-box;
}
.prev {
padding-right: 1em;
}
.see-more { text-align: center; }
.next {
text-align: right;
padding-left: 1em;
}
font-size: $smaller-text-size;
letter-spacing: $special-letter-spacing;
@if($uppercase-special-mode == true) {
text-transform: uppercase;
}
}
.template-article .article {
.meta {
border-top: 1px solid mix($dividers-col, #ffffff, 50%);
.iconmeta {
display: block;
padding: 10px 0;
border-bottom: 1px dotted mix($dividers-col, #ffffff, 50%);
}
}
.pagination-row {
margin-top: 0;
padding: 10px 0;
border-bottom: 1px solid mix($dividers-col, #ffffff, 50%);
}
}
/* Mobile header */
#mobile-header {
display: block;
}
.reveal-mobile-nav #mobile-nav-return {
height: 100%;
opacity: 1;
}
#pageheader .logo {
padding: 10px 0;
pointer-events: none;
a {
pointer-events: auto;
}
.logotext {
margin-top: 12px;
margin-bottom: 12px;
display: block;
font-size: 15px;
line-height: 1em;
}
}
#pageheader .logo-area {
display: none;
}
.mobile-currency-switcher {
display: block;
}
#main-nav {
position: fixed;
text-align: left;
background: #ffffff;
border-right: 1px solid #e2e2e2;
left: -1px;
width: 82%;
top: 0;
height: 100%;
-webkit-transform: translate(-100%);
transform: translate(-100%);
z-index: 8000;
transition: transform 0.5s cubic-bezier(0.75, 0.03, 0.52, 1);
font-size: 17px;
overflow: auto;
letter-spacing: 0;
a {
white-space: normal;
}
}
.reveal-mobile-nav #main-nav {
-webkit-transform: translate(0);
transform: translate(0);
}
#main-nav a {
padding: 14px 20px;
}
#main-nav .mobile-features {
display: block;
border-bottom: 1px solid #e2e2e2;
}
#main-nav .multi-level-nav {
padding-top: 60px;
box-sizing: border-box;
}
#main-nav.nav-row ul {
width: 100%;
}
#main-nav.nav-row ul li {
display: block;
padding: 0;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
#main-nav.nav-row .mobile-expanded {
background: $main-nav-level2-bg;
border-top: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
}
#main-nav.nav-row ul ul .mobile-expanded {
background: $main-nav-level3-bg;
}
#main-nav.nav-row .mobile-expanded > a {
display: block;
}
#main-nav.nav-row .mobile-expanded > ul {
display: block;
}
#main-nav.nav-row .multi-level-nav > div > ul { display: none; }
#main-nav.nav-row .multi-level-nav > div.tier-1 > ul {
display: block;
margin-bottom: 10px;
}
#main-nav .multi-level-nav ul ul {
background: $main-nav-level3-bg;
padding-bottom: 0;
}
#main-nav .multi-level-nav > div > ul > li > ul { background: $main-nav-level2-bg; }
#main-nav.nav-row ul .contains-children > a {
position: relative;
padding-right: 40px;
}
#main-nav.nav-row ul li a.has-children .exp {
position: absolute;
top: 11px;
right: 15px;
margin: 0;
width: 24px;
transition: transform 150ms;
span { display: none; }
svg {
display: inline;
width: 24px;
height: 24px;
stroke: #605e5e;
}
}
#main-nav.nav-row ul li.mobile-expanded > a.has-children .exp {
transform: rotate(180deg);
}
#main-nav a { display: block; }
#main-nav a.expanded { color: #605e5e; }
#main-nav a:hover { color: #22595b; }
#main-nav .account-links {
display: block;
}
#main-nav.nav-row .account-links {
border-top: 1px solid #e2e2e2;
font-size: 16px;
padding-top: 10px;
a {
padding: 10px 20px;
}
}
#main-nav .mobile-social {
display: block;
padding: 10px 20px;
border-top: 1px solid #e2e2e2;
ul li {
display: inline-block;
border: none;
vertical-align: middle;
}
}
#main-nav.nav-row .mobile-social a {
display: inline-block;
padding-left: 0;
line-height: $social-icon-size;
}
.nav-row {
line-height: 1em;
}
.view-as {
display: block;
margin: 10px 0 0;
}
#comments .comment .gravatar {
width: 40px;
}
#comments .comment .detail {
margin-left: 55px;
}
#pagefooter .copyright .copy {
white-space: normal;
}
.slideshow .slide .overlay-text {
position: static;
padding: 15px 20px 5px;
width: auto;
text-align: center;
}
#content .slideshow .slide .overlay-text .text > div {
font-size: $larger-text-size !important;
color: inherit;
background: transparent;
padding: 0;
display: block;
}
.full-width-image .overlay-text .text {
> div {
font-size: $home-overlay-title-mobile-size !important;
}
.second-line {
font-size: $home-overlay-text-mobile-size;
}
}
.slide .overlay-text .button {
margin-bottom: 10px;
}
.pagination-row.pagination-row-tabular {
display: block;
> .inner {
@include flexbox();
@include flex-wrap-wrap();
> * {
display: block;
width: 50%;
@include order(1);
}
> .back {
@include order(2);
flex-size: 2;
width: 100%;
margin-top: 20px;
}
}
}
.product-detail .product-form .quantity-submit-row {
@include flexbox();
input[name=quantity] {
@include flex-grow(0);
}
input[type=submit] {
@include flex-grow(2);
}
}
}
@media only screen and (max-width: 500px) {
.collection-slider .product-block.collection-block {
width: 94%;
}
}
@media only screen and (max-width: 400px) {
.product-block.collection-block .product-info {
position: static;
.productlabel {
display: block;
}
.productlabel > span {
display: block;
padding-left: 0;
padding-right: 0;
background: transparent !important;
color: inherit !important;
}
}
}
@media only screen and (max-width: 360px) {
#cartform .item .image {
margin-left: 0;
width: 50px;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
html {
-webkit-text-size-adjust: none; /* Prevent iOS font scaling */
}
}
/* thinner icons on high-dpi screens */
@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {
#pageheader svg.feather,
#main-nav svg.feather,
#pagefooter .cross-page-promos svg.feather {
stroke-width: 1;
}
}
/* Animations */
@-webkit-keyframes reveal {
0% {
margin-left:-999px;
opacity:0;
}
1% {
margin-left:0;
opacity:0;
-webkit-transform:scale(0.98) translateY(-15px);
}
80% { -webkit-transform:scale(1); }
100% { -webkit-transform:translateY(0); }
}
@keyframes reveal {
0% {
margin-left:-999px;
opacity:0;
}
1% {
margin-left:0;
opacity:0;
transform:scale(0.98) translateY(-15px); }
80% { transform:scale(1); }
100% { transform:translateY(0); }
}
/*****************************/
/***** PASSWORD TEMPLATE *****/
/*****************************/
@mixin vendor-prefix($name, $argument...) {
-webkit-#{$name}: #{$argument};
-ms-#{$name}: #{$argument};
-moz-#{$name}: #{$argument};
-o-#{$name}: #{$argument};
#{$name}: #{$argument};
}
html.template-password {
height: 100%;
body {
height: 100vh;
font-size: 15px;
line-height: 1.3em;
text-align: center;
background: #ffffff;
background-repeat:repeat;
}
.password-container {
display: table;
height: 100%;
width: 100%;
}
.password-store-name,
.password-main,
.password-footer {
display: table-row;
}
.password-store-name-inner,
.password-main-inner,
.password-footer-inner {
display: table-cell;
padding: 20px;
}
.password-store-name { height: 1px; }
.password-main { height: 100%; }
.password-main-inner { vertical-align: middle; }
.password-footer { height: 1px; }
.password-login-link {
margin: 20px 0 40px;
text-align: right;
svg {
width: 10px;
height: 12px;
margin-right: 4px;
path {
@include vendor-prefix(transition, fill 100ms);
}
}
a:hover svg path,
a:focus svg path {
fill: #605e5e;
}
}
h1 {
font-size: 2em;
a:hover {
text-decoration: none;
}
}
h2 {
font-size: 4em;
}
input[type=text], input[type=email], input[type=password] {
margin: 0 5px 0 0;
color: #666;
background: #fff;
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
input[type=submit] {
display: inline-block;
background: #18332f;
color: #ffffff;
vertical-align: top;
margin: 0;
padding: 4px 14px;
min-width: 0;
font-family: Arial, sans-serif;
font-size: 90%;
height: 30px;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#shoplogo {
margin: 0 auto;
.logotext {
font-size: $larger-text-size;
line-height: 1em;
}
}
.shopify-name { display: none; }
.password-message {
margin-bottom: 2em;
}
.password-signup {
margin-bottom: 4em;
input[type=email] {
box-sizing: content-box;
font-size: 16px;
line-height: 36px;
height: 36px;
padding: 4px 18px;
margin-right: -1px;
width: 250px;
@include vendor-prefix(border-radius, 3px 0 0 3px);
}
input[type=submit] {
box-sizing: content-box;
font-size: 13px;
line-height: 36px;
height: 36px;
padding: 4px 18px;
border: 1px solid #18332f;
@include vendor-prefix(border-radius, 0 3px 3px 0);
&:hover {
background-color: #605e5e;
}
}
}
@media only screen and (max-width: 420px) {
.password-signup {
input[type=email] {
width: 90%;
}
input[type=email],
input[type=submit] {
margin: 0 0 10px;
@include vendor-prefix(border-radius, 3px);
}
}
}
.password-social {
li {
display: inline-block;
white-space: nowrap;
}
a {
color: #fff;
margin: 10px;
display: inline-block;
padding: 2px 12px 4px 4px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
span {
vertical-align: middle;
}
}
a:hover {
color: #fff;
opacity: 0.9;
&, span {
text-decoration: none;
}
}
a svg {
display: inline-block;
vertical-align: middle;
margin: 0 4px;
height: 15px;
width: 15px;
&, & g {
fill: #fff;
}
}
.password-social-item-facebook {
background: #3b5998;
}
.password-social-item-twitter {
background: #00aced;
}
}
.password-footer-inner {
padding-top: 150px;
line-height: 2em;
.powered-by, svg {
vertical-align: top;
}
svg {
margin: 0 0 0 5px;
width: 80px;
height: 23px;
}
}
#password-login {
width: 300px;
padding: 1em 0;
label {
display: block;
margin: 0 0 0.5em;
}
input[type=password] {
width: 150px;
}
.password-owner {
margin-top: 2em;
}
}
}
.giftcard-header {
text-align: center;
.logo {
max-height: none;
}
}
/************* --- --- --- *************/
/************* | ENTER YOUR CUSTOM CODE BELOW HERE | *************/
/************* --- --- --- *************/
/* -------------------------------------------------------------------------- */
/* SALE PRICING (site-wide, safe) */
/* -------------------------------------------------------------------------- */
/* Most themes use one or more of these. Keeping all is intentional. */
.price-compare,
.compare-at-price,
.price__compare-at,
.price__sale--compare,
.product__price--compare {
text-decoration: line-through;
opacity: 0.6;
margin-right: 6px;
}
.price-sale,
.sale-price,
.price__sale,
.price--sale,
.product__price--sale {
color: #e04b5a;
font-weight: 600;
}
/* -------------------------------------------------------------------------- */
/* THS SHOWROOM COLLECTIONS ONLY */
/* Scope: only the collection template that contains #THSCollectionGrid */
/* -------------------------------------------------------------------------- */
#THSCollectionGrid .product-list {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 24px !important;
width: 100% !important;
}
#THSCollectionGrid .product-list > .product-block {
min-width: 0 !important;
}
@media (max-width: 1200px) {
#THSCollectionGrid .product-list {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
@media (max-width: 900px) {
#THSCollectionGrid .product-list {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 740px) {
#THSCollectionGrid .product-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
#THSCollectionGrid,
#THSCollectionGrid .collection-listing,
#THSCollectionGrid .product-list {
overflow-x: hidden !important;
max-width: 100% !important;
}
/* --- Bezel & Kiln badge in product grid titles --- */
/* Title stays normal text flow */
.product-block .title {
display: block;
}
/* Badge behaves like a character at the start of the title */
.product-block .title .bnk-badge {
width: 20px;
height: auto;
display: inline-block;
vertical-align: middle;
margin-right: 0px;
position: relative;
top: -2px;
}
/* Force price onto its own line */
.product-block .price {
display: block;
}
/* Hide the dash separator since price is now on its own line */
.product-block .dash {
display: none;
}
/* Bezel & Kiln legend (small, subtle, centered) */
.bnk-legend {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
font-size: 14px;
color: #777;
margin: 4px 0 12px 0; /* was 10px 0 22px 0 */
text-align: center;
}
.bnk-legend-icon {
width: 20px;
height: auto;
opacity: 0.7;
flex-shrink: 0;
}
.bnk-legend-text {
line-height: 1.4;
}
.bnk-legend a {
color: inherit;
text-decoration: underline;
}
/* --- FORCE Bezel & Kiln legend styling (wins over styles.scss) --- */
#THSCollectionGrid .bnk-legend,
.collection-listing .bnk-legend,
.template-collection #THSCollectionGrid .bnk-legend {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
gap: 6px !important;
font-size: 14px !important;
line-height: 1.2 !important;
color: #777 !important;
margin: 4px auto 10px !important; /* tightened spacing */
text-align: center !important;
}
#THSCollectionGrid .bnk-legend-icon,
.collection-listing .bnk-legend-icon,
.template-collection #THSCollectionGrid .bnk-legend-icon {
width: 20px !important;
height: auto !important;
display: inline-block !important;
opacity: 0.7 !important;
flex: 0 0 auto !important;
}
#THSCollectionGrid .bnk-legend-text,
.collection-listing .bnk-legend-text,
.template-collection #THSCollectionGrid .bnk-legend-text {
line-height: 1.2 !important;
}
#THSCollectionGrid .bnk-legend-text em,
.collection-listing .bnk-legend-text em,
.template-collection #THSCollectionGrid .bnk-legend-text em {
font-style: italic !important;
}
#THSCollectionGrid .bnk-legend a,
.collection-listing .bnk-legend a,
.template-collection #THSCollectionGrid .bnk-legend a {
color: inherit !important;
text-decoration: underline !important;
}
/* --- FORCE sort dropdown to left on desktop, even inside centered header --- */
.template-collection .ths-controls {
width: 100%;
display: flex !important;
justify-content: flex-start !important;
text-align: left !important;
}
.template-collection .ths-sort-wrapper {
margin-left: 0 !important;
}
/* Center it again on mobile */
@media screen and (max-width: 767px) {
.template-collection .ths-controls {
justify-content: center !important;
}
}
/* --- THS product card hover image swap (only if 2nd image exists) --- */
.ths-image-frame {
position: relative;
}
/* Secondary image sits on top, hidden by default */
.product-block.has-secondary .ths-image-frame .secondary-image {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
}
.product-block.has-secondary .ths-image-frame .primary-image {
transition: opacity 200ms ease;
}
/* Desktop hover: swap */
@media (min-width: 960px) {
.product-block.has-secondary:hover .ths-image-frame .secondary-image {
opacity: 1;
}
.product-block.has-secondary:hover .ths-image-frame .primary-image {
opacity: 0;
}
}
/* Touch devices: disable hover swap */
@media (hover: none) {
.product-block.has-secondary .ths-image-frame .secondary-image {
opacity: 0 !important;
}
.product-block.has-secondary .ths-image-frame .primary-image {
opacity: 1 !important;
}
}
/* FORCE sort dropdown to left on desktop, even inside centered header */
.template-collection .ths-controls {
width: 100%;
display: flex !important;
justify-content: flex-start !important;
text-align: left !important;
}
.template-collection .ths-sort-wrapper {
margin-left: 0 !important;
}
/* Center it again on mobile */
@media screen and (max-width: 767px) {
.template-collection .ths-controls {
justify-content: center !important;
}
}
/* Center and enlarge pagination */
.pagination,
.pagination-wrapper,
.collection-pagination,
.search-pagination {
text-align: center !important;
margin: 40px 0 !important;
}
.pagination a,
.pagination span {
display: inline-block;
font-size: 12px !important;
padding: 10px 12px !important;
margin: 0 4px !important;
}
/* Pagination: lock baseline, underline-only active state */
.pagination a,
.pagination span {
font-size: 16px;
font-weight: 500;
position: relative;
padding-bottom: 6px; /* reserve space for underline */
}
/* Invisible underline for all items */
.pagination a::after,
.pagination span::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: transparent;
}
/* Visible underline ONLY on current */
.pagination .current::after,
.pagination span.current::after,
.pagination li.active span::after {
background: #1a4d4d;
}
/* Shrink ONLY the product grid inventory badges */
.ths-image-frame .productlabel > span {
padding: 4px 10px !important;
line-height: 1.1em !important;
}
/* Restore normal size for category / promo labels (not stock related) */
.collection-block .productlabel > span,
.collection-listing .productlabel > span {
padding: 10px 20px;
line-height: 1.2em;
}
/* BEZEL ARTIST COLLECTIONS ONLY | 2026-10-08
A collection must have class ths-bezel-artist (from collection-template.liquid).
Do not use .bnk-legend to target Bezel pages: the legend is shared with THS.
The grid's column counts are controlled in collection-template.liquid. */
/* Bezel's pale pink across the collection content area */
.template-collection:has(#THSCollectionGrid.ths-bezel-artist) #content {
background-color: #fff5f6 !important;
}
/* White, rounded-square images in Bezel artist collection grids */
#THSCollectionGrid.ths-bezel-artist .product-block.ths-item .ths-image-frame {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 9px;
overflow: hidden;
background: #fff;
}
#THSCollectionGrid.ths-bezel-artist .product-block.ths-item .ths-image-frame .primary-image,
#THSCollectionGrid.ths-bezel-artist .product-block.ths-item .ths-image-frame .secondary-image {
width: 100%;
height: 100%;
}
#THSCollectionGrid.ths-bezel-artist .product-block.ths-item .ths-grid-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Low stock and sold-out badges: same size, bottom-center. Bezel artist grids only. */
#THSCollectionGrid.ths-bezel-artist .product-block.ths-item .ths-image-frame .productlabel.ths-inventory-label {
position: absolute !important;
top: auto !important;
bottom: 12px !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
transform: none !important;
text-align: center !important;
z-index: 5;
pointer-events: none;
}
#THSCollectionGrid.ths-bezel-artist .product-block.ths-item .ths-image-frame .productlabel.ths-inventory-label > span {
display: inline-block;
box-sizing: border-box;
width: 135px;
max-width: calc(100% - 16px);
padding: 4px 8px !important;
line-height: 1.1em !important;
background: #203e36 !important;
color: #fff !important;
border-radius: 2px;
white-space: nowrap;
}
#THSCollectionGrid.ths-bezel-artist .product-block.ths-item .ths-image-frame .productlabel.ths-inventory-label.soldout > span {
background: #b66b83 !important;
color: #fff !important;
}
