Skip to content

Instantly share code, notes, and snippets.

@emailrhoads

emailrhoads/cart.liquid

Last active September 16, 2022 16:11
Show Gist options
  • Save emailrhoads/616dbca7ea6510c7105e4fae51a41d8e to your computer and use it in GitHub Desktop.
Save emailrhoads/616dbca7ea6510c7105e4fae51a41d8e to your computer and use it in GitHub Desktop.
Download ZIP
Leckerlee Shopify
Raw
cart.liquid
{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>
<div class="cart container">
<div class="inner">
{% if cart.item_count == 0 %}
<div class="cart__empty">
<p>{{ 'cart.general.empty' | t }}</p>
<a href="/collections/shop" class="button button--primary">{{ 'cart.general.back' | t }}</a>
</div>
{% else %}
<form action="/cart" method="POST" class="cart__form">
<table class="cart__table cart__table--mobile table">
{% for line_item in cart.items %}
{%- include 'giftship-cart-item' with line_item -%}
<tr class="cart__item cart-item" data-index="{{ forloop.index }}" data-variant="{{ line_item.variant.id }}">
<td class="cart-item__image-container">
<img class="cart-item__image" src="{{ line_item.image | img_url: 'medium' }}">
</td>
<td class="cart-item__details">
{% if section.settings.show_vendor and line_item.product.vendor != blank %}
<a href="{{ line_item.product.vendor | url_for_vendor }}" class="cart-item__vendor">{{ line_item.product.vendor }}</a>
{% endif %}
<a href="{{ line_item.url }}" class="cart-item__title">{{ line_item.product.title }}</a>
{% unless line_item.product.has_only_default_variant %}
<p class="cart-item__variant">{{ line_item.variant.title }}</p>
{% endunless %}
{% unless line_item.properties == empty %}
<ul class="cart-item__properties list--unstyled">
{% for property in line_item.properties %}
<li class="cart-item__property">{{ property.first }}: {{ property.last }}</li>
{% endfor %}
</ul>
{% endunless %}
<div class="cart-item__actions">
<input class="cart-item__quantity" pattern="[0-9]*" type="number" min="1" value="{{ line_item.quantity }}">
<div class="cart-item__price-and-remove">
<span class="cart-item__line-price" data-money-convertible>{{ line_item.line_price | money }}</span>
{% if line_item.total_discount > 0 %}
<span class="cart-item__line-price-discounted" data-money-convertible>{{ line_item.original_line_price | money }}</span>
{% endif %}
</div>
<a href="/cart/change?quantity=0&line={{ forloop.index }}" class="cart-item__remove link--primary">
<img src="{{ 'remove-icon_28x28.png' | asset_url }}" alt="{{ 'cart.items.remove' | t }}" />
</a>
</div>
</td>
</tr>
{% endfor %}
</table>
<table class="cart__table cart__table--desktop table">
<thead>
<tr>
<th>{{ 'cart.items.product' | t }}</th>
<th></th>
<th class="table__center">{{ 'cart.items.unit_price' | t }}</th>
<th class="table__center">{{ 'cart.items.quantity' | t }}</th>
<th class="table__center">{{ 'cart.items.line_price' | t }}</th>
<th class="table__right">{{ 'cart.items.remove' | t }}</th>
</tr>
</thead>
<tbody class="cart__items">
{% for line_item in cart.items %}
<tr class="cart__item cart-item" data-index="{{ forloop.index }}" data-variant="{{ line_item.variant.id }}">
<td class="cart-item__image-container">
<img class="cart-item__image" src="{{ line_item.image | img_url: 'medium' }}">
</td>
<td class="cart-item__left cart__meta">
{% if section.settings.show_vendor and line_item.product.vendor != blank %}
<a href="{{ line_item.product.vendor | url_for_vendor }}" class="cart-item__vendor">{{ line_item.product.vendor }}</a>
{% endif %}
<a href="{{ line_item.url }}" class="cart-item__title">{{ line_item.product.title }}</a>
{% unless line_item.product.has_only_default_variant %}
<p class="cart-item__variant">{{ line_item.variant.title }}</p>
{% endunless %}
{% unless line_item.properties == empty %}
<ul class="cart-item__properties list--unstyled">
{% for property in line_item.properties %}
<li class="cart-item__property">{{ property.first }}: {{ property.last }}</li>
{% endfor %}
</ul>
{% endunless %}
</td>
<td class="table__center">
<span class="cart-item__unit-price" data-money-convertible>{{ line_item.price | money }}</span>
{% if line_item.total_discount > 0 %}
<span class="cart-item__line-price-discounted" data-money-convertible>{{ line_item.original_price | money }}</span>
{% endif %}
</td>
<td class="table__center">
<input class="cart-item__quantity" type="number" min="1" value="{{ line_item.quantity }}">
</td>
<td class="table__center">
<span class="cart-item__line-price" data-money-convertible>
{{ line_item.line_price | money }}
</span>
{% if line_item.total_discount > 0 %}
<span class="cart-item__line-price-discounted" data-money-convertible>
{{ line_item.original_line_price | money }}
</span>
{% endif %}
</td>
<td class="table__right">
<a href="/cart/change?quantity=0&line={{ forloop.index }}" class="cart-item__remove">
<img src="{{ 'remove-icon_28x28.png' | asset_url }}" alt="{{ 'cart.items.remove' | t }}" />
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if block.settings.currency_conversion_enabled %}
<p class="cart__currency-notice alert alert--mono alert--info">{{ 'cart.general.currency_notice' | t: shop_currency: shop.currency }}</p>
{% endif %}
<div class="grid grid--right" style="margin: 0px">
{% if section.settings.show_notes %}
<div class="cart__instructions grid__cell 2/4--handheld-and-up">
<!--
<label class="form__label" for="note">{{ 'cart.general.note' | t }}</label>
<textarea class="cart__note" name="note" id="note" cols="30" rows="5">{{ cart.note }}</textarea>
<p></p>
-->
</div>
{% endif %}
<div class="grid__cell 2/4--handheld-and-up custom-cart-container">
<p class="cart__total">
<span class="cart__total-text">{{ 'cart.general.total' | t }}: </span>
<span class="cart__total-amount" data-money-convertible>{{ cart.total_price | money }}</span>
<span class="cart__taxes" style="display: none">{{ 'cart.general.estimated_taxes' | t }}</span>
</p>
<div class="cart__total">
<span class="cart__total-text leckerlee-red">ORDER OPTIONS</span>
<hr width="90%"">
</div>
<div class="cart-input-container">
<div class="toggle-input-container">
{% if cart.attributes["Ship ASAP"] == blank %}
{% assign ship_asap = "Yes" %}
{% else %}
{% assign ship_asap = cart.attributes["Ship ASAP"] %}
{% endif %}
<div class="cart-attribute__field ship-field-trigger toggled">
<label class='big-bold'>Ship ASAP?</label>
<div class="button-toggle r" id="button-1">
<input type="checkbox" class="toggle-checkbox" id="ship-field-trigger" name="attributes[Ship ASAP]" value="{{ ship_asap }}" {% if ship_asap == "Yes" %} <checked {% endif %}/>
<div class="knobs"></div>
<div class="layer"></div>
</div>
</div>
<div class="toggle-caption">
<label for="ship-asap-note" style="font-size: 90%;">
<p class="no-margin franklin-font">Select NO to pick a later shipping date.</p>
<p class="franklin-font">For Christmas orders, we suggest the week of 12/12.</p>
</label>
</div>
<p class="cart-attribute__field ship-fields" {% if ship_asap == "Yes" %} style="display: none;" {% endif %}>
<label for="requested-ship-week"><strong>Requested Ship Week</strong></label>
{% comment %} all this just to find the next Monday... {% endcomment %}
{% assign date_now = 'now' | date: '%s' %}
{% assign day = 'now' | date: '%w' %}
{% if day contains 0 %}
{% assign day_diff = 1 %}
{% endif %}
{% if day contains 1 %}
{% assign day_diff = 7 %}
{% endif %}
{% if day contains 2 %}
{% assign day_diff = 6 %}
{% endif %}
{% if day contains 3 %}
{% assign day_diff = 5 %}
{% endif %}
{% if day contains 4 %}
{% assign day_diff = 4 %}
{% endif %}
{% if day contains 5 %}
{% assign day_diff = 3 %}
{% endif %}
{% if day contains 6 %}
{% assign day_diff = 2 %}
{% endif %}
{% assign second_diff = day_diff | times: 24 | times: 60 | times: 60 %}
{% assign date_new = date_now | plus: second_diff %}
<input type="text"
class="ship-fields"
id="requested-ship-week" name="attributes[Requested Ship Week]"
name="attributes[Requested Ship Week]"
min = "{{ date_new | date: "%Y-%m-%d" }}"
step = 7
>
</input>
</p>
</div>
<script>
/* the input type = date doesn't work well on mobile. instead use jQuery date picker */
window.onload = function() {
if (window.jQuery) {
let $ = window.jQuery;
$(function() {
$("#requested-ship-week").datepicker({
beforeShow: function() {
setTimeout(function(){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
},
minDate: +1,
beforeShowDay: function(date){
var day = date.getDay();
return [day == 1,""];
}
});
});
}
}
</script>
<div class="toggle-input-container">
<div class="cart-attribute__field gift-field-trigger toggled">
{% if cart.attributes["Is this a gift?"] == blank %}
{% assign is_gift = "No" %}
{% else %}
{% assign is_gift = cart.attributes["Is this a gift?"] %}
{% endif %}
<label class='big-bold'>Is this a gift?</label>
<div class="button-toggle r" id="button-1">
<input type="checkbox" class="toggle-checkbox" id="gift-field-trigger" name="attributes[Is this a gift?]" value="{{ is_gift }}" {% if is_gift == "Yes" %} checked {% endif %}/>
<div class="knobs"></div>
<div class="layer"></div>
</div>
</div>
<div class="toggle-caption">
<label for="gift-caption" style="font-size: 90%;">
<p class="no-margin franklin-font">Select YES to enter a gift message</p>
</label>
</div>
<div class="cart-attribute__field gift-fields toggle-display" {% unless is_gift == "Yes" %} style="display: none;" {% endunless %}>
<label class="cart-input-label" for="gift-message-to-recipient"><strong>{{ 'cart.general.note' | t }}</strong></label>
<textarea id="gift-message-to-recipient" name="note">{{ cart.note }}</textarea>
</div>
<script>
/*
Fixes super weird bug where the checkbox is always checked on page load ... Not sure what's going on, but seems related to giftship
*/
document.getElementById('gift-field-trigger').checked = {% if is_gift == 'Yes' %} true {% else %} false {% endif %};
</script>
</div>
<p>
<label class="cart-input-label" for="cart-general-note"><strong>Order Notes for Leckerlee:</strong></label>
<textarea id="cart-general-note" class="cart__note" name="attributes[general-note]">{{ cart.attributes.general-note }}</textarea>
</p>
<div>
{% if section.settings.enable_terms %}
<div class="cart__terms">
<input type="checkbox" id="terms">
{% assign terms_page = pages[section.settings.terms_page] %}
<label for="terms" class="form__label">
{{ 'cart.general.accept_terms' | t }}
{% unless terms_page.empty? %}
<a href="{{ terms_page.url }}" target="_blank">{{ 'cart.general.read_terms' | t }}</a>
{% endunless %}
</label>
</div>
{% endif %}
<!--
<label for="start">Start date:</label>
-->
</div>
<div class="cart__checkout">
<input type="submit" name="checkout" class="button button--primary" value="{{ 'cart.general.checkout' | t }}">
</div>
</div>
</div>
</form>
{% endif %}
{% if cart.item_count > 0 and section.settings.show_shipping_estimator %}
{% include 'shipping_estimator' %}
{% endif %}
</div>
</div>
<script>
console.log('{{ cart.attributes }}')
</script>
{% schema %}
{
"name": "Cart",
"settings": [
{
"type": "checkbox",
"id": "show_notes",
"label": "Enable order notes",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "enable_terms",
"label": "Enable terms and conditions",
"default": false
},
{
"type": "page",
"id": "terms_page",
"label": "Terms and conditions page"
},
{
"type": "checkbox",
"id": "show_shipping_estimator",
"label": "Show shipping rates calculator",
"default": true
},
{
"type": "text",
"id": "shipping_estimator_default_country",
"label": "Default country to use",
"info": "If your customer is logged-in, the country in his default shipping address will be selected.",
"default": "United States"
}
]
}
{% endschema %}
<script>
$(document).ready(function(){
console.log('hmmm');
document.getElementById('ship-field-trigger').checked = {% if ship_asap == 'Yes' %} true {% else %} false {% endif %};
});
</script>
Raw
javascript.js
/**
*
* Shows and hides gift message on checkbox tick
*
*/
$('#gift-field-trigger').on('change', function(){
var selector = $('div.cart-attribute__field.gift-fields')
if ($(this).is(':checked')){
selector.show();
$('#gift-field-trigger').val('Yes');
$.ajax({
type: 'POST',
url: '/cart/update.js',
data: 'attributes[Is this a gift?]=Yes',
dataType: 'json',
success: function(result) {
// console.log(result); // use to inspect
},
error: function(jqxhr, status, exception) {
console.log(exception);
}
});
}else{
selector.hide();
$('#gift-field-trigger').val('No');
$.ajax({
type: 'POST',
url: '/cart/update.js',
data: {
note: null,
attributes: {
'Is this a gift?': 'No'
},
},
dataType: 'json',
success: function(result) {
// console.log(result); // use to inspect
},
error: function(jqxhr, status, exception) {
console.log(exception);
}
});
$('#gift-message-to-recipient').val("");
}
});
$('#ship-field-trigger').on('change', function(){
if ($(this).is(':checked')){
$('p.cart-attribute__field.ship-fields').hide();
$('#ship-field-trigger').val('Yes')
$.ajax({
type: 'POST',
url: '/cart/update.js',
data: {
attributes: {
'Ship ASAP': 'Yes',
'Requested Ship Week': null
}
},
dataType: 'json'
});
$('#requested-ship-week').val("");
}else{
$('p.cart-attribute__field.ship-fields').show();
$('#ship-field-trigger').val('No')
$.ajax({
type: 'POST',
url: '/cart/update.js',
data: 'attributes[Ship ASAP]=No',
dataType: 'json'
});
}
});
Raw
styles.scss
/**
* ----------------------------------------------------------------------------------------------
* This is a variation of Normalize.css (http://necolas.github.io/normalize.css/)
* ----------------------------------------------------------------------------------------------
*/
/**
* Base
*/
*,
*:before,
*:after {
box-sizing: border-box !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
body {
margin: 0;
background-image: url({{ 'stripe.png' | asset_url }});
}
/**
* HTML5 display definitions
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Text-level semantic
*/
:active {
outline: none;
}
a {
color: inherit;
background-color: transparent;
text-decoration: none;
&:active,
&:hover {
outline: 0;
}
}
b,
strong {
font-weight: bold;
}
small {
font-size: 80%;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
font-size: inherit;
}
p:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
margin-bottom: 0;
}
/**
* Embedded content
*/
img {
max-width: 100%;
height: auto;
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
/**
* Grouping content
*/
ul,
ol {
margin: 0;
padding: 0;
list-style-position: inside;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 16px;
font-size: 1rem;
}
/**
* Forms
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: none;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
margin: 0 0.125rem;
padding: 6px 10px 12px;
padding: 0.375rem 0.625rem 0.75rem;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
/**
* Tables
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
.slick-slider {
display: block;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
}
}
.slick-track,
.slick-list {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
display: block;
position: relative;
top: 0;
left: 0;
&:before,
&:after {
display: table;
content: '';
}
&:after {
clear: both;
}
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
overflow: hidden;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block !important;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/*! Avalanche | MIT License | @colourgarden */
/*------------------------------------
* GRID LAYOUT
*------------------------------------*/
.grid {
display: block;
list-style: none;
padding: 0;
margin: 0 0 0 -52px;
margin: 0 0 0 -3.25rem;
font-size: 0;
}
.grid__cell {
box-sizing: border-box;
display: inline-block;
width: 100%;
padding: 0 0 0 52px;
padding: 0 0 0 3.25rem;
margin: 0;
vertical-align: top;
font-size: 1rem;
}
.grid--gallery {
margin-bottom: -25px;
}
.grid--gallery > .grid__cell {
padding-bottom: 25px;
}
.grid--center {
text-align: center;
}
.grid--center > .grid__cell {
text-align: left;
}
.grid__cell--center {
display: block;
margin: 0 auto;
}
.grid--right {
text-align: right;
}
.grid--right > .grid__cell {
text-align: left;
}
.grid--middle > .grid__cell {
vertical-align: middle;
}
.grid--bottom > .grid__cell {
vertical-align: bottom;
}
.grid--flush {
margin-left: 0;
}
.grid--flush > .grid__cell {
padding-left: 0;
}
.grid--tiny {
margin-left: -6.25px;
}
.grid--tiny > .grid__cell {
padding-left: 6.25px;
}
.grid--gallery-tiny {
margin-bottom: -6.25px;
}
.grid--gallery.grid--tiny > .grid__cell,
.grid--gallery-tiny > .grid__cell {
padding-bottom: 6.25px;
}
.grid--small {
margin-left: -12.5px;
}
.grid--small > .grid__cell {
padding-left: 12.5px;
}
.grid--gallery-small {
margin-bottom: -12.5px;
}
.grid--gallery.grid--small > .grid__cell,
.grid--gallery-small > .grid__cell {
padding-bottom: 12.5px;
}
.grid--large {
margin-left: -50px;
}
.grid--large > .grid__cell {
padding-left: 50px;
}
.grid--gallery-large {
margin-bottom: -50px;
}
.grid--gallery.grid--large > .grid__cell,
.grid--gallery-large > .grid__cell {
padding-bottom: 50px;
}
.grid--huge {
margin-left: -75px;
}
.grid--huge > .grid__cell {
padding-left: 75px;
}
.grid--gallery-tiny {
margin-bottom: -75px;
}
.grid--gallery.grid--huge > .grid__cell,
.grid--gallery-huge > .grid__cell {
padding-bottom: 75px;
}
.grid--auto > .grid__cell {
width: auto;
}
/*------------------------------------*\
GRID WIDTHS
\*------------------------------------*/
.\31\/2, .\32\/4, .\33\/6 {
width: 50%;
}
.\31\/3, .\32\/6 {
width: 33.33333%;
}
.\32\/3, .\34\/6 {
width: 66.66667%;
}
.\31\/4 {
width: 25%;
}
.\33\/4 {
width: 75%;
}
.\31\/5 {
width: 20%;
}
.\32\/5 {
width: 40%;
}
.\33\/5 {
width: 60%;
}
.\34\/5 {
width: 80%;
}
.\31\/6 {
width: 16.66667%;
}
.\35\/6 {
width: 83.33333%;
}
/* If responsive flag enabled, loop breakpoint widths */
/* Create each media query */
@media screen and (max-width: 499px) {
.\31\/2--thumb, .\32\/4--thumb, .\33\/6--thumb {
width: 50%;
}
.\31\/3--thumb, .\32\/6--thumb {
width: 33.33333%;
}
.\32\/3--thumb, .\34\/6--thumb {
width: 66.66667%;
}
.\31\/4--thumb {
width: 25%;
}
.\33\/4--thumb {
width: 75%;
}
.\31\/5--thumb {
width: 20%;
}
.\32\/5--thumb {
width: 40%;
}
.\33\/5--thumb {
width: 60%;
}
.\34\/5--thumb {
width: 80%;
}
.\31\/6--thumb {
width: 16.66667%;
}
.\35\/6--thumb {
width: 83.33333%;
}
}
/* Create each media query */
@media screen and (min-width: 500px) and (max-width: 800px) {
.\31\/2--handheld, .\32\/4--handheld, .\33\/6--handheld {
width: 50%;
}
.\31\/3--handheld, .\32\/6--handheld {
width: 33.33333%;
}
.\32\/3--handheld, .\34\/6--handheld {
width: 66.66667%;
}
.\31\/4--handheld {
width: 25%;
}
.\33\/4--handheld {
width: 75%;
}
.\31\/5--handheld {
width: 20%;
}
.\32\/5--handheld {
width: 40%;
}
.\33\/5--handheld {
width: 60%;
}
.\34\/5--handheld {
width: 80%;
}
.\31\/6--handheld {
width: 16.66667%;
}
.\35\/6--handheld {
width: 83.33333%;
}
}
/* Create each media query */
@media screen and (min-width: 500px) {
.\31\/2--handheld-and-up, .\32\/4--handheld-and-up, .\33\/6--handheld-and-up {
width: 50%;
}
.\31\/3--handheld-and-up, .\32\/6--handheld-and-up {
width: 33.33333%;
}
.\32\/3--handheld-and-up, .\34\/6--handheld-and-up {
width: 66.66667%;
}
.\31\/4--handheld-and-up {
width: 25%;
}
.\33\/4--handheld-and-up {
width: 75%;
}
.\31\/5--handheld-and-up {
width: 20%;
}
.\32\/5--handheld-and-up {
width: 40%;
}
.\33\/5--handheld-and-up {
width: 60%;
}
.\34\/5--handheld-and-up {
width: 80%;
}
.\31\/6--handheld-and-up {
width: 16.66667%;
}
.\35\/6--handheld-and-up {
width: 83.33333%;
}
}
/* Create each media query */
@media screen and (max-width: 800px) {
.\31\/2--pocket, .\32\/4--pocket, .\33\/6--pocket {
width: 50%;
}
.\31\/3--pocket, .\32\/6--pocket {
width: 33.33333%;
}
.\32\/3--pocket, .\34\/6--pocket {
width: 66.66667%;
}
.\31\/4--pocket {
width: 25%;
}
.\33\/4--pocket {
width: 75%;
}
.\31\/5--pocket {
width: 20%;
}
.\32\/5--pocket {
width: 40%;
}
.\33\/5--pocket {
width: 60%;
}
.\34\/5--pocket {
width: 80%;
}
.\31\/6--pocket {
width: 16.66667%;
}
.\35\/6--pocket {
width: 83.33333%;
}
}
/* Create each media query */
@media screen and (min-width: 801px) and (max-width: 1024px) {
.\31\/2--lap, .\32\/4--lap, .\33\/6--lap {
width: 50%;
}
.\31\/3--lap, .\32\/6--lap {
width: 33.33333%;
}
.\32\/3--lap, .\34\/6--lap {
width: 66.66667%;
}
.\31\/4--lap {
width: 25%;
}
.\33\/4--lap {
width: 75%;
}
.\31\/5--lap {
width: 20%;
}
.\32\/5--lap {
width: 40%;
}
.\33\/5--lap {
width: 60%;
}
.\34\/5--lap {
width: 80%;
}
.\31\/6--lap {
width: 16.66667%;
}
.\35\/6--lap {
width: 83.33333%;
}
}
/* Create each media query */
@media screen and (min-width: 801px) {
.\31\/2--lap-and-up, .\32\/4--lap-and-up, .\33\/6--lap-and-up {
width: 50%;
}
.\31\/3--lap-and-up, .\32\/6--lap-and-up {
width: 33.33333%;
}
.\32\/3--lap-and-up, .\34\/6--lap-and-up {
width: 66.66667%;
}
.\31\/4--lap-and-up {
width: 25%;
}
.\33\/4--lap-and-up {
width: 75%;
}
.\31\/5--lap-and-up {
width: 20%;
}
.\32\/5--lap-and-up {
width: 45%;
}
.\33\/5--lap-and-up {
width: 55%;
}
.\34\/5--lap-and-up {
width: 80%;
}
.\31\/6--lap-and-up {
width: 16.66667%;
}
.\35\/6--lap-and-up {
width: 83.33333%;
}
}
/* Create each media query */
@media screen and (max-width: 1024px) {
.\31\/2--portable, .\32\/4--portable, .\33\/6--portable {
width: 50%;
}
.\31\/3--portable, .\32\/6--portable {
width: 33.33333%;
}
.\32\/3--portable, .\34\/6--portable {
width: 66.66667%;
}
.\31\/4--portable {
width: 25%;
}
.\33\/4--portable {
width: 75%;
}
.\31\/5--portable {
width: 20%;
}
.\32\/5--portable {
width: 40%;
}
.\33\/5--portable {
width: 60%;
}
.\34\/5--portable {
width: 80%;
}
.\31\/6--portable {
width: 16.66667%;
}
.\35\/6--portable {
width: 83.33333%;
}
}
/* Create each media query */
@media screen and (min-width: 1025px) {
.\31\/2--desk, .\32\/4--desk, .\33\/6--desk {
width: 50%;
}
.\31\/3--desk, .\32\/6--desk {
width: 33.33333%;
}
.\32\/3--desk, .\34\/6--desk {
width: 66.66667%;
}
.\31\/4--desk {
width: 25%;
}
.\33\/4--desk {
width: 75%;
}
.\31\/5--desk {
width: 20%;
}
.\32\/5--desk {
width: 40%;
}
.\33\/5--desk {
width: 60%;
}
.\34\/5--desk {
width: 80%;
}
.\31\/6--desk {
width: 16.66667%;
}
.\35\/6--desk {
width: 83.33333%;
}
}
/* Create each media query */
@media screen and (min-width: 1160px) {
.\31\/2--widescreen, .\32\/4--widescreen, .\33\/6--widescreen {
width: 50%;
}
.\31\/3--widescreen, .\32\/6--widescreen {
width: 33.33333%;
}
.\32\/3--widescreen, .\34\/6--widescreen {
width: 66.66667%;
}
.\31\/4--widescreen {
width: 25%;
}
.\33\/4--widescreen {
width: 75%;
}
.\31\/5--widescreen {
width: 20%;
}
.\32\/5--widescreen {
width: 40%;
}
.\33\/5--widescreen {
width: 60%;
}
.\34\/5--widescreen {
width: 80%;
}
.\31\/6--widescreen {
width: 16.66667%;
}
.\35\/6--widescreen {
width: 83.33333%;
}
}
/* Create each media query */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
.\31\/2--retina, .\32\/4--retina, .\33\/6--retina {
width: 50%;
}
.\31\/3--retina, .\32\/6--retina {
width: 33.33333%;
}
.\32\/3--retina, .\34\/6--retina {
width: 66.66667%;
}
.\31\/4--retina {
width: 25%;
}
.\33\/4--retina {
width: 75%;
}
.\31\/5--retina {
width: 20%;
}
.\32\/5--retina {
width: 40%;
}
.\33\/5--retina {
width: 60%;
}
.\34\/5--retina {
width: 80%;
}
.\31\/6--retina {
width: 16.66667%;
}
.\35\/6--retina {
width: 83.33333%;
}
}
@mixin av-mq($alias) {
@if $alias == "thumb" {
@media screen and (max-width: 499px) {
@content;
}
} @else if $alias == "handheld" {
@media screen and (min-width: 500px) and (max-width: 800px) {
@content;
}
} @else if $alias == "handheld-and-up" {
@media screen and (min-width: 500px) {
@content;
}
} @else if $alias == "pocket" {
@media screen and (max-width: 800px) {
@content;
}
} @else if $alias == "lap" {
@media screen and (min-width: 801px) and (max-width: 1024px) {
@content;
}
} @else if $alias == "lap-and-up" {
@media screen and (min-width: 801px) {
@content;
}
} @else if $alias == "portable" {
@media screen and (max-width: 1024px) {
@content;
}
} @else if $alias == "desk" {
@media screen and (min-width: 1025px) {
@content;
}
} @else if $alias == "widescreen" {
@media screen and (min-width: 1160px) {
@content;
}
} @else if $alias == "retina" {
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
@content;
}
}
}
@function dark-or-light-color($color) {
@if (lightness($color) > 70) {
@return #000000; /* Lighter background, return dark color */
} @else {
@return #ffffff; /* Darker background, return light color */
}
}
/**
* COLORS
*/
$background : {{settings.background}};
$heading-color : {{settings.heading_color}};
$text-color : {{settings.text_color}};
$accent-color : {{settings.accent_color}};
$border-color : {{settings.border_color}};
$grey-color : #C8CACB;
$primary-button-color : {{settings.primary_button_color}};
$primary-button-background : {{settings.primary_button_background}};
$secondary-button-color : {{settings.secondary_button_color}};
$secondary-button-background: {{settings.secondary_button_background}};
$popup-color : {{settings.popup_color}};
$footer-background : {{settings.footer_background}};
$footer-border-color: {{settings.footer_border_color}};
$footer-title-color : {{settings.footer_title_color}};
$footer-text-color : {{settings.footer_text_color}};
/**
* TYPOGRAPHY
*/
/**@font-face {
font-family: "clarendon-text-pro";
src: url("Clarendon-Regular.otf") format('opentype');
}
@font-face {
font-family: "franklin-gothic-urw-comp";
src: url("TitlingGothicFBCond-Stand.otf") format('opentype');
} */
@font-face {
font-family: "BlockGothicRR-LightExtraCond";
src: url("BlockGothicRR-LightExtraCond.otf") format('opentype');
}
@font-face {
font-family: "Franklin Gothic";
src: url("//db.onlinewebfonts.com/t/e5d82a158dd9527c9fa282b24d344396.eot");
src: url("//db.onlinewebfonts.com/t/e5d82a158dd9527c9fa282b24d344396.eot?#iefix") format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/e5d82a158dd9527c9fa282b24d344396.woff2") format("woff2"),
url("//db.onlinewebfonts.com/t/e5d82a158dd9527c9fa282b24d344396.woff") format("woff"),
url("//db.onlinewebfonts.com/t/e5d82a158dd9527c9fa282b24d344396.ttf") format("truetype"),
url("//db.onlinewebfonts.com/t/e5d82a158dd9527c9fa282b24d344396.svg#Franklin Gothic") format("svg");
}
$heading-font-family : {{settings.heading_font}};
$heading-font-weight : 400;
$heading-font-style : normal;
$text-font-family : {{settings.text_font}};
$text-font-weight : 400;
$text-font-style : normal;
$navigation-font-family : {{settings.navigation_font}};
$navigation-font-weight : 400;
$navigation-font-style : normal;
$slideshow-heading-font-family : {{settings.slideshow_heading_font}};
$slideshow-heading-font-weight : 400;
$slideshow-heading-font-style : normal;
$slideshow-subheading-font-family : {{settings.slideshow_subheading_font}};
$slideshow-subheading-font-weight : 400;
$slideshow-subheading-font-style : normal;
$footer-font-factor : {{settings.footer_font_factor}};
$slideshow-heading-font-factor : {{settings.slideshow_heading_font_factor}};
$slideshow-subheading-font-factor: {{settings.slideshow_subheading_font_factor}};
/**
* HEADER
*/
$header-text-color : {{settings.header_text_color}};
$header-background : {{settings.header_background}};
/**
* SLIDESHOW
*/
$slideshow-heading-color : {{settings.slideshow_heading_color}};
$slideshow-subheading-color : {{settings.slideshow_subheading_color}};
$slideshow-button-color : {{settings.slideshow_button_color}};
$slideshow-button-background : {{settings.slideshow_button_background}};
/**
* COLLECTION
*/
$collection-description-color : {{settings.collection_description_color}};
$collection-description-background : {{settings.collection_description_background}};
/**
* PRODUCT
*/
$product-sold-out-background : {{settings.product_sold_out_background}};
$product-sold-out-color : dark-or-light-color({{settings.product_sold_out_background}});
$product-on-sale-background : {{settings.product_on_sale_background}};
$product-on-sale-color : dark-or-light-color({{settings.product_on_sale_background}});
$product-related-products-background : {{settings.product_related_products_background}};
/**
* BLOG
*/
$blog-description-color : {{settings.collection_description_color}};
$blog-description-background : {{settings.collection_description_background}};
/**
* Sticky footer, normalized to work on all browsers (http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/)
*/
.page__container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
height: 100%;
background: $background;
}
.top-bar,
.header__mobile-nav,
.header {
font-family: $navigation-font-family;
}
.top-bar,
.header__mobile-nav,
.header,
.footer {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.main {
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
margin:45px auto;
margin: 2.8125rem 0;
}
.container, #gsGroup, .shopify-challenge__container {
max-width: 1150px;
margin: 0 auto;
/*padding: 0 20px;
padding: 0 1.25rem;*/
}
.container--shrink {
max-width: 700px;
}
.inner, #gsGroups {
margin: 0 auto;
padding: 20px 53px 40px;
padding: 1.25rem 3.3125rem 2.5rem;
}
.shopify-challenge__container
{
padding: 20px 53px 40px;
padding: 1.25rem 3.3125rem 2.5rem;
}
.page__overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000000;
opacity: 0;
z-index: 5;
visibility: hidden;
transition: opacity 0.3s, visibility 0s 0.3s;
}
.page__overlay--open {
opacity: 0.6;
visibility: visible;
transition: opacity 0.3s;
}
.accessibility-skip {
position: absolute;
list-style: none;
top: -40px;
top: -2.5rem;
}
.accessibility-skip__item > a {
position: absolute;
left: -9999em;
transition: none !important;
&:active,
&:focus {
display: block;
position: static;
left: 0;
}
}
.placeholder-svg {
display: block;
width: 100%;
max-width: 100%;
max-height: 100%;
fill: currentColor;
}
@include av-mq("handheld-and-up") {
/*.main > .container > .inner {
padding: 15px 25px;
padding: 0.9375rem 1.5625rem;
}*/
}
body {
font-size: 100%;
font-family: $text-font-family;
font-weight: $text-font-weight;
font-style: $text-font-style;
color: $text-color;
line-height: 1.6;
}
a {
transition: color 0.25s ease-in-out, opacity 0.25s ease-in-out;
}
.link--primary {
color: $accent-color;
&:hover {
color: darken($accent-color, 15%);
}
}
.link--secondry {
color: #fff;
&:hover {
color: $accent-color;
}
}
.no--link
{
color: $text-color;
&:hover {
color: $text-color;
}
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
}
/**
* Those next two rules allow to remove margin-top, this is easier to maintain to only act on the margin-bottom
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
font-weight: inherit;
}
p:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
margin-bottom: 0;
}
.visually-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
height: 0.0625rem;
width: 1px;
width: 0.0625rem;
margin: -1px;
margin: -0.0625rem;
padding: 0;
border: 0;
}
.list--unstyled {
list-style: none;
padding: 0;
margin: 0;
}
.rte {
h1,
h2,
h3,
h4,
h5,
h6 {
color: $heading-color;
font-family: $heading-font-family;
font-weight: $heading-font-weight;
font-style: $heading-font-style;
}
a {
@extend .link--primary;
}
.no--link
{
color: $text-color;
&:hover {
color: $text-color;
}
}
img {
margin-bottom: 35px;
margin-bottom: 2.1875rem;
}
blockquote {
margin: 30px 0;
margin: 1.875rem 0;
padding: 35px;
padding: 2.1875rem;
background: $heading-color;
color: $background;
font-weight: bolder;
}
ul,
ol {
margin: 25px 0 25px 25px;
margin: 1.5625rem 0 1.5625rem 1.5625rem;
}
h1 {
font-size: 28px;
font-size: 1.75rem;
}
h2 {
font-size: 24px;
font-size: 1.5rem;
}
h3 {
margin-bottom: 16px;
margin-bottom: 1rem;
font-size: 20px;
font-size: 1.25rem;
}
h4 {
margin-bottom: 14px;
margin-bottom: 0.875rem;
font-size: 18px;
font-size: 1.125rem;
}
h5, h6 {
margin-bottom: 12px;
margin-bottom: 0.75rem;
font-size: 16px;
font-size: 1rem;
}
}
.video-wrapper,
.video-container {
height: 0;
padding-bottom: 56.25%;
position: relative;
iframe,
embed,
object {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
}
/**
* Those two breakpoints allow to reduce the font-size of all texts as well as the margin and
* padding, thanks to the magic of REM
*/
html {
font-size: 15px;
}
@include av-mq("handheld-and-up") {
html {
font-size: 15px;
}
}
@include av-mq("desk") {
html {
font-size: 16px;
}
}
@font-face {
font-family: 'icomoon';
src:url('{{ 'icomoon.eot' | asset_url }}');
src:url('{{ 'icomoon.eot?#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'icomoon.woff2' | asset_url }}') format('woff2'),
url('{{ 'icomoon.ttf' | asset_url }}') format('truetype'),
url('{{ 'icomoon.woff' | asset_url }}') format('woff');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-tick:before {
content: '\e900';
}
/* Lazyloading */
.image--fade-in {
opacity: 0;
transition: opacity 0.3s ease;
}
.lazyloaded.image--fade-in {
opacity: 1;
}
/* Aspect ratio */
.aspect-ratio {
position: relative;
margin-left: auto;
margin-right: auto;
}
.aspect-ratio > img,
.no-js .aspect-ratio > noscript img {
position: absolute;
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
top: 0;
left: 0;
}
.no-js .aspect-ratio > img {
display: none;
}
img.lazyload[data-sizes="auto"] {
width: 100%; /* this is needed to help LazySizes calculate the correct size */
}
/* Placeholder background */
.placeholder-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.placeholder-background > .placeholder-svg {
fill: $text-color;
background-color: $background;
}
.breadcrumb {
display: inline-block;
margin-bottom: 4px;
margin-bottom: 0.25rem;
vertical-align: top;
text-transform: capitalize;
font-size: 16px;
font-size: 1rem;
}
.breadcrumb__item {
display: inline-block;
color: #ADAFB0;
}
.breadcrumb__item:not(.breadcrumb__item--active) {
color: #ADAFB0;
&::after {
display: inline-block;
content: '/';
margin: 0 3px;
margin: 0 0.1875rem;
transition: color 0.25s ease-in-out;
}
}
.alert {
margin-bottom: 30px;
margin-bottom: 1.875rem;
padding: 15px 20px 20px 20px;
padding: 0.9375rem 1.25rem 1.25rem 1.25rem;
/*border: 1px solid $border-color;
border-radius: 4px;
box-shadow: 1px 1px 2px $border-color;*/
}
.alert__title {
position: relative;
display: block;
font-size: 20px;
font-size: 1.25rem;
&::before {
position: absolute;
content: '';
width: 3px;
width: 0.1875rem;
height: 100%;
left: -20px;
left: -1.25rem;
background: transparent;
}
}
.alert__errors {
margin-top: 20px;
margin-top: 1.25rem;
}
.alert--mono {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
padding: 10px 15px;
padding: 0.625rem 0.9375rem;
/*border-radius: 3px;*/
border: none;
box-shadow: none;
text-align: left;
.alert__title::before {
display: none;
}
}
.alert--error {
.alert__title {
color: #e9573f;
&::before {
background: #e9573f;
}
}
}
.alert--mono.alert--error {
&, .alert__title {
color: #ffffff;
}
background: #e9573f;
}
.alert--success {
.alert__title {
color: $accent-color;
&::before {
background: $accent-color;
}
}
}
.alert--mono.alert--success {
&,
.alert__title {
color: #ffffff;
}
background: $accent-color;
}
.alert--mono.alert--info {
&,
.alert__title {
color: #ffffff;
}
background: #bdbdbd;
}
@include av-mq(widescreen) {
.alert__title {
font-size: 24px;
font-size: 1.5rem;
}
}
input,
textarea {
width: 100%;
padding: 12px 15px;
padding: 0.75rem 0.9375rem;
/* border-radius: 2px; */
border: 1px solid $border-color;
font-size: inherit;
-webkit-appearance: none; /* Remove the inner box-shadow in iOS devices */
-webkit-border-radius:0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
@if (lightness($background) < 30 and lightness($text-color) > 70) {
color: complement($background);
}
&:focus {
border-color: #1790d3;
}
&::-webkit-input-placeholder {
color: inherit;
}
&::-moz-placeholder {
color: inherit;
}
&:-ms-input-placeholder {
color: inherit;
}
&::placeholder {
color: inherit;
}
}
input[type="checkbox"] {
width: 1em;
height: 1em;
margin-right: 15px;
margin-right: 0.9375rem;
-webkit-appearance: checkbox;
& + .form__label {
display: inline-block;
vertical-align: 1px;
}
}
textarea {
display: block; /* Fix in inconsistency with Chrome/Safari */
resize: vertical;
}
input:not(.button):focus,
textarea:not(.button):focus {
outline: none;
}
.form--shrink {
max-width: 500px;
margin: 0 auto;
}
.form__control,
.form__row {
position: relative;
margin-bottom: 30px;
margin-bottom: 1.875rem;
text-align: left;
&:last-child {
margin-bottom: 0;
}
}
.form__label, #gsMessageContainer label {
display: block;
margin-bottom: 10px;
margin-bottom: 0.625rem;
font-size: 14px;
font-size: 0.875rem;
text-transform: capitalize;
font-weight: normal;
}
.cart .form__label, #gsMessageContainer label
{
letter-spacing:1px;
color: $accent-color;
}
.form--inline {
.form__control {
display: table;
width: 100%;
table-layout: fixed;
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.form__label {
display: table-cell;
margin: 0 10px 0 0;
margin: 0 0.625rem 0 0;
vertical-align: middle;
& + input,
& + textarea,
& + .form__select {
display: table-cell;
width: 60%;
}
}
}
.form__submit-duo {
input:last-child {
margin-top: 10px;
margin-top: 0.625rem;
}
}
.flexbox .form__submit-duo {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
input {
margin: 0 15px 0 0;
margin: 0 0.9375rem 0 0;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
}
input[type="submit"] {
margin: 0;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
@include av-mq("handheld-and-up") {
.flexbox .form__row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
.form__control {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0 20px 0 0;
margin: 0 1.25rem 0 0;
}
.form__control:last-child {
margin-right: 0;
}
}
}
/**
* Style selects
*/
select {
/* Disable built-in styles */
-webkit-appearance: none;
-moz-appearance: none;
font-family: $text-font-family;
display: inline-block;
width: 100%;
height: 45px;
height: 2.8125rem;
padding-left: 15px;
padding-left: 0.9375rem;
padding-right: 45px;
padding-right: 2.8125rem;
/* border-radius: 2px; */
font-size: 14px;
font-size: 0.875rem;
cursor: pointer;
line-height: normal;
background: transparent;
border: 1px solid $border-color;
-webkit-border-radius:0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
&:active,
&:focus {
outline: none;
}
&:focus {
border-color: $accent-color;
}
/* Remove the ugly blue background on IE when a value is selected */
&:focus::-ms-value {
background: inherit;
color: inherit;
}
.ie9 & {
padding-right: 0; /* Allow to cover the arrow */
}
}
/* Allow to remove the ugly dashes when selecting an option in Firefox */
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $text-color;
}
/* Disable default styles for IE10+ */
select::-ms-expand {
display: none;
}
/* Browsers do not support ::after pseudo-element on <select> elements, so we are forced
to wrap the <select> around an additional div */
.form__select {
position: relative;
border: none;
.icon {
position: absolute;
top: calc(50% - 8px);
top: calc(50% - 0.5rem);
right: 15px;
right: 0.9375rem;
width: 18px;
width: 1.125rem;
height: 18px;
height: 1.125rem;
line-height: normal;
pointer-events: none;
fill: $accent-color;
color:$accent-color;
}
.ie9 & svg {
display: none;
}
}
.button, .jdgm-write-rev-link, .shopify-challenge__container .shopify-challenge__button {
position: relative;
display: inline-block;
padding: 8px 40px;
padding: 0.5rem 2.5rem;
line-height: normal;
border: none;
/* border-radius: 2px; */
text-transform: uppercase;
font-size: 20px;
font-size: 1.25rem;
text-align: center;
font-weight: normal;
transition: all 0.25s ease-in-out;
cursor: pointer;
font-family: $navigation-font-family;
-webkit-appearance: none; /* Remove the inner box-shadow in iOS devices */
-webkit-border-radius:0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
&[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
}
.button--full {
width: 100%;
}
.button--small {
padding: 8px 20px;
padding: 0.5rem 1.25rem;
}
.button--primary, .jdgm-write-rev-link, .shopify-challenge__container .shopify-challenge__button {
color: $primary-button-color;
background: $primary-button-background;
&:hover:not([disabled]) {
@if (lightness($primary-button-background) < 15%) {
background: lighten($primary-button-background, 15%);
} @else {
background: $secondary-button-background;
}
}
}
.button--secondary {
color: $secondary-button-color;
background: $secondary-button-background;
&:hover:not([disabled]) {
@if (lightness($secondary-button-background) > 50%) {
background: darken($secondary-button-background, 15%);
} @else {
background: lighten($secondary-button-background, 15%);
}
}
}
.button-wrapper {
text-align: center;
}
.b-modal {
cursor: default !important;
}
.modal {
position: relative;
width: 90%;
max-width: 600px;
padding: 15px 20px;
padding: 0.9375rem 1.25rem;
border-radius: 0;
background-size: cover;
background-color: #fff;
text-align: center;
box-shadow: 0 0 4px rgba(#000000, 0.3);
}
.marketing-popup
{
top:15% !important;
max-width: 520px;
padding: 15px 50px;
padding: 0.9375rem 3.125rem;
background-color: $accent-color;
}
.modal__close {
position: absolute;
right: 15px;
right: 0.9375rem;
top: 15px;
top: 0.9375rem;
svg {
width: 22px;
width: 1.375rem;
height: 22px;
height: 1.375rem;
color: $text-color;
text-shadow: 0 1px #000000;
}
}
.modal__title {
margin: 0;
font-size: 24px;
font-size: 1.5rem;
letter-spacing: 1px;
text-transform: uppercase;
color: $heading-color;
font-family: $heading-font-family;
}
.modal__body p
{
font-size:15px;
font-size:0.9375rem;
margin:0;
}
.modal__body2 p
{
font-size:11px;
font-size:0.6875rem;
margin:0;
}
.modal__body2
{
margin-bottom:20px;
margin-bottom:1.25rem;
}
.modal__newsletter {
margin: 20px auto 20px auto;
margin: 1.25rem auto 1.25rem auto;
max-width: 320px;
color: $text-color;
input[type="email"] {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
padding:8px 12px;
font-family: $navigation-font-family;
letter-spacing: 1px;
&::-webkit-input-placeholder {
color: lighten($text-color, 15%);
}
&::-moz-placeholder {
color: lighten($text-color, 15%);
}
&:-ms-input-placeholder {
color: lighten($text-color, 15%);
}
&::placeholder {
color: lighten($text-color, 15%);
}
&:focus {
border-color: #fff;
}
}
input[type="submit"] {
padding: 5px 10px;
padding: 0.3125rem 0.625rem;
letter-spacing: 1px;
font-size: 16px;
font-size: 1rem;
}
}
.modal__newsletter-success {
margin: 20px auto 20px auto !important;
margin: 1.25rem auto 1.25rem auto !important;
color: $text-color;
}
/**
* Special code for the marketing popup
*/
.marketing-popup {
&,
.modal__title {
color: $popup-color;
}
}
@include av-mq("handheld-and-up") {
.modal {
padding: 45px 50px;
padding: 2.8125rem 3.125rem;
}
.modal__title {
font-size: 40px;
font-size: 2.5rem;
}
.marketing-popup {
padding: 32px 40px 20px;
padding: 2rem 2.5rem 1.25rem;
}
.marketing-popup .modal__title {
font-size: 50px;
font-size: 3.125rem;
}
.modal__newsletter {
.flexbox & .modal__form {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
input[type="email"] {
margin: 0 15px 0 0;
margin: 0 0.9375rem 0 0;
-webkit-flex: 6;
-ms-flex: 6;
flex: 6;
}
input[type="submit"] {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
}
}
@include av-mq("thumb") {
.modal__title
{
line-height:40px;
}
}
@include av-mq("lap-and-up") {
.modal {
width: 600px;
width: 37.5rem;
}
.marketing-popup {
width: 540px;
width: 33.75rem;
}
}
.hamburger {
display: block;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin: 0 auto;
padding: 0;
width: 28px;
width: 1.75rem;
height: 35px;
height: 2.1875rem;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
cursor: pointer;
z-index: 3;
background: none;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-tap-highlight-color: transparent;
&:focus {
outline: none;
}
span {
display: block;
position: absolute;
top: 16px;
top: 1rem;
left: 0;
right: 0;
height: 2px;
height: 0.125rem;
background: $header-text-color;
transition: background 0s 0.2s;
}
span::before,
span::after {
position: absolute;
content: '';
display: block;
left: 0;
width: 100%;
height: 2px;
height: 0.125rem;
background-color: $header-text-color;
transition-duration: 0.2s, 0.2s;
transition-delay: 0.2s, 0s;
}
span::before {
top: -9px;
top: -0.5625rem;
transition-property: top, -webkit-transform;
transition-property: top, transform;
}
span::after {
bottom: -9px;
bottom: -0.5625rem;
transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
}
}
.header__mobile-tab--open .hamburger {
span {
background: none;
}
span::before,
span::after {
transition-delay: 0s, 0.2s;
background: $header-background;
}
span::before {
top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
span::after {
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@-webkit-keyframes spinner-bounce {
0%, 100% {
-webkit-transform: scale(0.0);
transform: scale(0.0);
}
50% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
@keyframes spinner-bounce {
0%, 100% {
-webkit-transform: scale(0.0);
transform: scale(0.0);
}
50% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
.spinner {
position: relative;
width: 40px;
width: 2.5rem;
height: 40px;
height: 2.5rem;
margin: 25px auto;
margin: 1.5625rem auto;
}
.spinner__bounce1, .spinner__bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: $text-color;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: spinner-bounce 2.0s infinite ease-in-out;
animation: spinner-bounce 2.0s infinite ease-in-out;
}
.spinner__bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@include av-mq("handheld-and-up") {
.spinner {
margin: 40px auto;
margin: 2.5rem auto;
}
}
table {
width: 100%;
border: none;
border-spacing: 0;
border-collapse: separate;
border-radius: 0;
font-size: 16px;
font-size: 1rem;
margin-bottom: 20px;
margin-bottom: 1.25rem;
/*box-shadow: 0 1px 1px rgba($border-color, 0.6);*/
}
thead {
text-align: left;
text-transform: uppercase;
font-size: 16px;
font-size: 1rem;
color: $heading-color;
font-size: 16px;
letter-spacing:1px;
th {
padding: 10px 15px;
padding: 0.625rem 0.9375rem;
border-bottom: 1px solid $border-color !important;
color: #670001;
background: none;
text-transform:uppercase;
font-family: $navigation-font-family;
}
}
tbody {
td {
padding: 18px 15px;
padding: 1.125rem 0.9375rem;
border-bottom: 1px solid $border-color;
}
tr:last-child td {
border-bottom: none;
}
}
tfoot {
td {
padding: 10px 15px;
padding: 0.625rem 0.9375rem;
color: $text-color;
border-bottom: 1px solid $border-color;
}
}
.table--responsive {
@include av-mq("thumb") {
border: none;
box-shadow: none;
thead,
td:not([data-label]) {
display: none;
}
tr {
display: block;
margin-bottom: 15px;
margin-bottom: 0.9375rem;
border: 1px solid $border-color;
border-bottom: none;
&:last-child {
margin-bottom: 0;
td {
border-bottom: 1px solid $border-color;
}
}
}
// IE9 table layout fixes
tr,
td {
float: left;
clear: both;
width: 100%;
}
th,
td {
display: block;
text-align: right !important;
padding: 8px 15px;
padding: 0.5rem 0.9375rem;
border-right: none;
}
td:before {
content: attr(data-label);
float: left !important;
font-size: 13px;
font-size: 0.8125rem;
padding-right: 10px;
padding-right: 0.625rem;
text-transform: uppercase;
}
tfoot {
tr {
margin-bottom: 0;
}
tr:first-child {
margin-top: 25px;
margin-top: 1.5625rem;
}
}
}
}
.table__right {
text-align: right !important;
}
.table__center {
text-align: center !important;
}
.table__left {
text-align: left !important;
}
.label {
display: inline-block;
padding: 6px 14px 4px 14px;
padding: 0.375rem 0.875rem 0.25rem 0.875rem;
font-size: 12px;
font-size: 0.75rem;
text-transform: uppercase;
font-weight: bolder;
}
.label--unavailable,
.label--sold-out {
color: $product-sold-out-color;
background: $product-sold-out-background;
}
.label--sold-out {
position: relative;
color: #e95842;
border-radius: 50% !important;
width: 40%;
height: 40%;
margin-left: 32%;
margin-top: 32%;
padding: 8% 10%;
font-size: 40px;
font-size: 2.5rem;
line-height: 40px;
line-height: 2.5rem;
font-weight: 100;
text-align:center;
}
.triangle-svg{
height: 100%;
width: auto;
}
.triangle-svg-color{
fill: $primary-button-background;
}
.on-sale-container{
height: 37%;
position: relative;
display: inline-block;
}
.on-sale-text-container{
display: flex;
position: absolute;
height: 100%;
width: 100%;
align-items: center;
}
.on-sale-text-svg{
width: 100%
}
.on-sale-text{
width: 100%;
fill: $footer-text-color;
font-size: 2.3rem;
}
.jdgm-histogram__bar-content{
background: $secondary_button_background !important;
}
.label--custom {
color: $primary-button-color;
background: $primary-button-background;
}
.top-bar {
display: none; /* Not visible on mobile */
}
.mobile-top-bar
{
display: none; /* Not visible on desktop */
}
@include av-mq("handheld-and-up") {
.top-bar {
display: block;
font-size: 15px;
font-size: 0.9375rem;
letter-spacing: 1px;
text-transform: uppercase;
overflow: hidden;
}
.top-bar__container {
padding-top: 6px;
padding-top: 0.375rem;
padding-bottom: 6px;
padding-bottom: 0.375rem;
}
.top-bar__container .top-bar__message span
{
color: $accent-color;
}
.top-bar__contact {
display: inline-block;
float: right;
}
.top-bar__contact a
{
color: $accent-color;
&:hover {
color: darken($accent-color, 2%);
}
}
.top-bar__contact-item {
display: inline-block;
padding: 0 5px;
padding: 0 0.3125rem;
}
.top-bar__social {
.social__item {
display: inline-block;
vertical-align: text-top;
&:not(:last-child) {
margin-right: 4px;
margin-right: 0.25rem;
}
}
svg {
height: 14px;
height: 0.875rem;
width: 14px;
width: 0.875rem;
}
}
}
@media screen and (min-width: 500px) and (max-width: 1185px){
.top-bar__container {
padding-left: 18px;
padding-left: 1.125rem;
padding-right: 13px;
padding-right: 0.8125rem;
}
}
@media screen and (min-width: 500px) and (max-width: 650px){
.top-bar__contact {
display: block;
float: none;
text-align: center;
}
.top-bar__message
{
text-align: center;
display: block;
}
}
@include av-mq("thumb") {
.mobile-top-bar
{
color: $accent-color !important;
padding:2px 0;
text-align:center;
display: block; /* Not visible on desktop */
}
}
.pagination {
clear: both;
text-align: center;
color: #a4a6b0;
margin-top: 35px;
margin-top: 2.1875rem;
.pagination__item {
display: inline-block;
width: 30px;
border: 2px solid #dfdfdf;
border-radius: 2px;
font-size: 14px;
font-size: 0.875rem;
a
{
display:block;
svg
{
vertical-align: middle;
color: #a4a6b0;
height: 14px;
height: 0.875rem;
width: 14px;
width: 0.875rem;
}
}
}
.pagination__item--active
{
color: #fff;
background: #ec7067;
border-color: #ec7067;
}
}
.swatch__colors {
text-align: right;
}
.swatch__item {
position: relative;
display: inline-block;
margin-right: 5px;
margin-right: 0.3125rem;
padding: 5px;
padding: 0.3125rem;
border: 1px solid $border-color;
border-radius: 100%;
cursor: pointer;
&:last-child {
margin-right: 0;
}
}
.swatch__item--active {
border-color: $accent-color;
&::after {
position: absolute;
content: '\e900';
top: -10px;
top: -0.625rem;
right: -6px;
right: -0.375rem;
width: 18px;
width: 1.125rem;
height: 18px;
height: 1.125rem;
font-family: 'icomoon';
line-height: 18px;
color: #ffffff;
background: $accent-color;
border-radius: 10px;
font-size: 7px;
font-size: 0.4375rem;
text-align: center;
}
}
.swatch__input {
display: none;
}
.swatch__label {
height: 25px;
height: 1.5625rem;
width: 25px;
width: 1.5625rem;
margin: 0 !important;
border-radius: 100%;
pointer-events: none;
}
.flexbox {
.swatch__colors {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
margin: -5px -5px -5px 0;
margin: -0.3125rem -0.3125rem -0.3125rem 0;
}
.swatch__item {
margin: 5px;
margin: 0.3125rem;
}
}
#shopify-product-reviews {
overflow: visible !important;
}
.spr-container {
border: none !important;
max-width: 800px;
margin: 0 auto;
padding: 0 !important;
}
.spr-header-title {
display: none;
}
.spr-summary {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.spr-summary-starrating {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
margin: 0 0 20px 0 !important;
margin: 0 0 1.25rem 0 !important;
}
.spr-summary-caption {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
margin-bottom: 10px;
margin-bottom: 0.625rem;
color: $heading-color;
font-weight: bolder;
font-size: 20px;
font-size: 1.25rem;
}
.spr-summary-actions {
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
.spr-icon-star,
.spr-icon-star-half-alt {
color: #f4da4b;
}
.spr-icon-star-empty {
color: $text-color;
opacity: 1 !important;
}
.spr-summary-actions-newreview,
.spr-button-primary {
@extend .button, .button--primary;
}
.spr-form-title {
display: none;
}
.spr-form-contact-name,
.spr-form-contact-email,
.spr-form-review-rating,
.spr-form-review-title,
.spr-form-review-body {
margin-bottom: 30px !important;
margin-bottom: 1.875rem !important;
}
.spr-form-label {
@extend .form__label;
}
.spr-form-actions {
text-align: center;
.spr-button {
float: none;
}
}
.spr-form-input-error {
border-color: #e9573f !important;
}
.spr-form-input-error .spr-icon {
color: #e9573f !important;
}
.spr-form-message {
margin-bottom: 30px !important;
margin-bottom: 1.875rem !important;
padding: 10px 15px !important;
padding: 0.625rem 0.9375rem !important;
border-radius: 3px !important;
box-shadow: none !important;
}
.spr-form-message-error {
color: #ffffff !important;
background: #e9573f !important;
}
.spr-form-message-success {
color: #ffffff !important;
background: #0bb73a !important;
}
.spr-review {
position: relative;
margin-top: 0 !important;
margin-bottom: 45px;
margin-bottom: 2.8125rem;
padding: 25px !important;
padding: 1.5625rem !important;
border: 1px solid $border-color !important;
border-radius: 5px;
box-shadow: 0 2px 10px rgba($border-color, 0.6);
}
.spr-review-header-starratings {
float: right;
}
.spr-review-header-title {
color: $heading-color;
font-weight: bolder;
font-size: 18px;
font-size: 1.125rem;
}
.spr-review-header-byline {
margin-bottom: 20px !important;
margin-bottom: 1.25rem !important;
text-transform: uppercase;
font-size: 14px;
font-size: 0.875rem;
font-weight: bolder;
font-style: normal !important;
opacity: 1 !important;
}
.spr-review-content {
margin-bottom: 0 !important;
}
.spr-review-footer {
position: absolute;
right: 0;
bottom: -25px;
bottom: -1.5625rem;
}
.spr-pagination {
margin-top: 55px;
margin-top: 3.4375rem;
clear: both;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
@include av-mq("handheld-and-up") {
.spr-container {
padding-top: 10px !important;
padding-top: 0.625rem !important;
}
.spr-summary {
display: block;
}
.spr-summary-starrating {
display: inline-block;
margin: 2px 0 0 0 !important;
margin: 0.125rem 0 0 0 !important;
}
.spr-summary-caption {
float: left;
margin: 0 20px 0 0;
margin: 0 1.25rem 0 0;
color: $heading-color;
font-weight: bolder;
font-size: 20px;
font-size: 1.25rem;
}
.spr-summary-actions-newreview {
margin-top: -7px;
margin-top: -0.4375rem;
}
.spr-reviews {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 45px !important;
margin-top: 2.8125rem !important;
margin-left: -25px !important;
margin-left: -1.5625rem !important;
font-size: 0;
}
.spr-review {
width: calc(50% - 25px);
width: calc(50% - 1.5625rem);
margin: 0 0 65px 25px;
margin: 0 0 4.0625rem 1.5625rem;
box-shadow: 0 10px 45px 5px rgba($border-color, 0.6);
vertical-align: top;
font-size: 1rem;
&:nth-child(2n+1):nth-last-child(-n+2),
&:nth-child(2n+1):nth-last-child(-n+2) ~ * {
margin-bottom: 0;
}
}
}
/**
* Navigation
*/
.menu--desktop {
display: none;
}
.menu--mobile {
.menu__item {
position: relative;
border-bottom: 1px solid rgba($header-background, 0.5);
&:last-child {
border-bottom: none;
}
}
.menu__link {
position: relative;
display: block;
padding: 13px 20px 11px 20px;
padding: 0.8125rem 1.25rem 0.6875rem 1.25rem;
text-align: left;
font-size: 18px;
font-size: 1.125rem;
font-weight: lighter;
text-transform: uppercase;
transition: none;
}
.icon-plus,
.icon-minus {
margin: 0 auto;
width: 30px;
width: 1.875rem;
height: 100%;
}
.icon-minus {
display: none;
}
.menu__icon-container {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 60px;
width: 3.75rem;
text-align: center;
}
.menu__item--open {
& > .menu__link {
.icon-plus {
display: none;
}
.icon-minus {
display: block;
}
}
}
.menu__links--level-1 {
background: $header-background;
color: $header-text-color;
.menu__item {
border-bottom-color: $header-text-color;
}
.menu__link {
padding-left: 35px;
padding-left: 2.1875rem;
}
}
.menu__links--level-2 {
background: $header-text-color;
color: $header-background;
.menu__item {
border-bottom-color: $header-background;
}
.menu__link {
padding-left: 45px;
padding-left: 2.8125rem;
}
}
}
@include av-mq('thumb') {
.menu__links--nested {
display: none;
}
}
@include av-mq("handheld-and-up") {
.menu--desktop {
display: block;
margin: 30px 0 0 0;
margin: 1.875rem 0 0 0;
clear: both;
font-size: 21px;
font-size: 1.3125rem;
text-align: center;
.menu__item {
position: relative;
display: inline-block;
margin-right: 19px;
margin-right: 1.1875rem;
letter-spacing: 2px;
text-transform: uppercase;
transition: opacity 0.2s ease-in-out;
&:last-child {
margin-right: 0;
a {
vertical-align: middle;
}
}
}
.menu__item--has-submenu {
/*& > .menu__link::after {
content: '';
margin-left: 2px;
margin-left: 0.125rem;
display: inline-block;
height: 0;
width: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid $header-text-color;
vertical-align: middle;
}*/
@media (max-width: 1025px) {
.touchevents & > .menu__link {
pointer-events: none; /* This prevent click on touch devices, so that dropdown can be opened */
}
}
}
.menu__link {
padding-bottom: 15px;
padding-bottom: 0.9375rem;
}
.menu__item:hover .menu__link,
.menu__item--active .menu__link {
opacity: 1;
}
.menu__links--nested {
position: absolute;
visibility: hidden;
left: 0;
top: 0;
min-width: 150px;
padding: 10px 0;
padding: 0.625rem 0;
background: rgba(64,43,31,0.8);
color: $header-background;
/*border: 1px solid $header-text-color;*/
white-space: nowrap;
text-align: left;
z-index: 3;
font-family: $text-font-family;
.menu__item {
display: block;
margin: 0;
padding: 0;
}
.menu__link {
display: block;
margin: 0;
padding: 4px 30px 4px 15px;
padding: 0.25rem 1.875rem 0.25rem 0.9375rem;
font-weight: normal;
font-size: 15px;
font-size: 0.9375rem;
text-transform: none;
transition: none;
opacity: 1;
letter-spacing: 1px;
}
.menu__item:hover {
color: $header-background;
background: $header-text-color;
}
}
.menu__item--has-submenu:hover ~ .menu__item {
pointer-events: none;
}
.menu__item--has-submenu > .menu__link:focus + .menu__links,
.menu__item--has-submenu:hover > .menu__links {
visibility: visible;
}
.menu__links--level-1 {
top: 100%;
left: 0;
margin-top: 8px;
margin-top: 0.5rem;
&::before {
position: absolute;
content: '';
/*left: 15px;
left: 0.9375rem;
top: -6px;
top: -0.375rem;*/
left: 0px;
top: -10px;
top: -0.625rem;
height: 0;
width: 0;
/*border-left: 7.5px solid transparent;*/
border-right: 20.5px solid transparent;
border-bottom: 9.5px solid rgba(64,43,31,0.8);
/*-webkit-filter: drop-shadow(0 -2px $header-text-color);
filter: drop-shadow(0 -2px $header-text-color);*/
}
.menu__link::after {
position: absolute;
right: 10px;
right: 0.625rem;
top: 12px;
top: 0.75rem;
border-left: 4px solid $header-text-color;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
}
.menu__item:hover .menu__link::after {
border-left-color: $header-background;
}
}
.menu__links--level-2 {
top: -11px;
top: -0.6875rem;
left: 100%;
.menu__link::after {
display: none;
}
}
.menu__links--left {
left: auto;
right: 100%;
}
.mega-nav {
padding: 15px 0;
padding: 0.9375rem 0;
left: -200px !important;
left: -12.5rem !important;
white-space: nowrap;
&::before {
left: 215px !important;
left: 13.4375rem !important;
}
}
.mega-nav--has-image {
left: -275px !important;
left: -17.1875rem !important;
&::before {
left: 290px !important;
left: 18.125rem !important;
}
}
.mega-nav--left {
left: auto !important;
right: 0;
&::before {
left: auto !important;
right: 20px !important;
right: 1.25rem !important;
}
}
.mega-nav__image-container {
display: inline-block;
margin: 0 15px;
margin: 0 0.9375rem;
width: 150px;
width: 9.375rem;
font-size: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
}
.mega-nav__image {
max-width: 150px;
max-height: 150px;
font-size: 0;
}
.dropdown-column {
display: inline-block;
padding: 0 20px;
padding: 0 1.25rem;
vertical-align: top;
}
.dropdown-column__title {
display: block;
margin: 8px 0 10px 0;
margin: 0.5rem 0 0.625rem 0;
padding-bottom: 14px;
padding-bottom: 0.875rem;
color: $header-text-color;
font-weight: bolder;
font-size: 14px;
font-size: 0.875rem;
line-height: 14px;
text-transform: uppercase;
border-bottom: 1px solid rgba($header-text-color, 0.4);
}
.dropdown-column__list-link {
display: block;
padding: 2px 0;
padding: 0.125rem 0;
font-size: 15px;
font-size: 0.9375rem;
text-transform: none;
font-weight: normal;
color: $header-text-color;
opacity: 0.7;
&:hover {
opacity: 1;
}
}
}
}
@media screen and (min-width: 1150px) {
.header__wrapper--right {
.menu--desktop {
margin-top: 27px;
/*margin-top: 2.1875rem;*/
float: right;
text-align: right;
}
}
.menu--desktop {
.menu__item {
margin-right: 20px;
margin-right: 1.25rem;
}
.menu__item--has-submenu {
& > .menu__link::after {
margin-left: 8px;
margin-left: 0.5rem;
}
}
}
}
@include av-mq("desk") {
.menu--desktop {
.menu__item {
margin-right: 30px;
margin-right: 1.875rem;
}
}
}
/**
* If we are on the home page, and that the slideshow has been activated, we position the header
* differently so that it can overlaps the slider
*/
.header {
background: $header-background;
color: $header-text-color;
background-position: center center;
background-size: cover;
}
.header__wrapper {
padding: 16px 0;
padding: 1rem 0;
&::after {
display: table;
content: '';
clear: both;
}
}
.header__container {
position: relative;
}
.header--pushed {
padding-bottom: 0 !important;
}
.header__logo {
margin: 0;
text-align: center;
}
.header__logo--text {
font-size: 30px;
font-size: 1.875rem;
font-weight: bolder;
text-transform: uppercase;
}
.header__logo-image {
max-height: 92px; /* We enforce a low max-height on mobile so that it does not take too much space */
width: auto;
margin-left: -4px;
vertical-align: middle;
}
.header__actions {
display: none;
}
/**
* Mobile nav
*/
.header__mobile-nav {
position: fixed;
top: 0;
color: $header-text-color;
z-index: 5;
}
.mobile-login-link
{
font-size: 21px;
font-size: 1.3125rem;
text-transform: uppercase;
}
.header__mobile-nav ~ .header__wrapper {
margin-top: 74px;
margin-top: 4.625rem; /* this is the height of the mobile nav */
}
.header__mobile-tabs {
position: relative;
display: table;
width: 100%;
height: 48px;
height: 3rem;
table-layout: fixed;
border-bottom: 1px solid rgba($header-text-color, 0.5);
background: $header-background;
}
.header__mobile-tab {
display: table-cell;
text-align: center;
/*border-right: 1px solid rgba($header-text-color, 0.5);*/
vertical-align: middle;
transition: all 0.25s ease-in-out;
&:last-child {
border-right: none;
}
}
.header__mobile-icon {
position: relative;
display: block;
padding: 6px 0;
padding: 0.375rem 0;
transition: none;
svg {
vertical-align: middle;
width: 25px;
width: 1.5625rem;
height: 25px;
height: 1.5625rem;
}
}
.header__mobile-content {
display: none;
position: absolute;
max-height: calc(100vh - 48px);
width: 100%;
top: 100%;
left: 0;
background: $header-text-color;
border-bottom: 1px solid $border-color;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.header__mobile-tab--open {
background: $header-text-color;
color: $header-background;
box-shadow: 0 1px $header-text-color, -1px 0 $header-text-color;
}
.header__mobile-search {
padding: 20px;
padding: 1.25rem;
}
.mobile-search__input {
color: $text-color;
}
.header__cart-count {
position: absolute;
width: 18px;
width: 1.125rem;
height: 18px;
height: 1.125rem;
top: 8px;
top: 0.5rem;
font-size: 10px;
font-size: 0.625rem;
background: $header-text-color;
color: $header-background;
border-radius: 100%;
text-align: center;
line-height: 18px;
}
.currency-selector {
display: none; /* Not visible on mobile */
}
/**
* Push
*/
.header__push {
clear: both;
/*margin-top: 20px;
margin-top: 1.25rem;*/
color: $heading-color;
.inner {
/*padding-top: 18px;
padding-top: 1.125rem;*/
padding-bottom:0;
background: $background;
}
}
.header__push-meta {
display: none;
}
.header__push-content {
font-family: $navigation-font-family;
/*padding-bottom: 18px;
padding-bottom: 1.125rem;
border-bottom: 1px solid $border-color;*/
}
.header__push-title {
display: block;
margin: 0;
font-family: $heading-font-family;
font-weight: $heading-font-weight;
font-style: $heading-font-style;
font-size: 70px;
letter-spacing: 3px;
font-size: 4.375rem;
line-height: 70px;
line-height: 4.375rem;
text-transform: uppercase;
text-align: center;
}
.header__push-context {
display: block;
margin-top: 10px;
margin-top: 0.625rem;
/*padding-left: 15px;
padding-left: 0.9375rem;*/
text-transform: uppercase;
color: $text-color;
font-size: 18px;
font-size: 1.125rem;
font-weight: bolder;
text-align: center;
}
.header__push-filter {
color: $text-color;
margin-top: 15px;
margin-top: 0.9375rem;
}
.header__push-meta {
display: inline-block;
float: right;
font-size: 12px;
font-size: 0.75rem;
text-transform: uppercase;
}
.header__push-title {
display: inline-block;
/*font-size: 22px;
font-size: 1.375rem;*/
text-align: left;
}
.header__push-context {
display: inline-block;
/*margin: 0 0 0 15px;
margin: 0 0 0 0.9375rem;
padding-left: 15px;
padding-left: 0.9375rem;
border-left: 1px solid $border-color;*/
vertical-align: super;
text-align: left;
}
.header__push-tags {
display: block;
margin-top: 25px;
margin-top: 1.5625rem;
color: $accent-color;
&.header__push-context {
display: inline-block;
margin-top: 0;
}
}
.header__push-tag {
display: inline-block;
margin-right: 20px;
margin-right: 1.25rem;
padding-bottom: 2px;
padding-bottom: 0.125rem;
text-transform: uppercase;
font-size: 21px;
font-size: 1.3125rem;
font-weight: normal;
letter-spacing: 1px;
&:last-child {
margin-right: 0;
}
a {
transition: none;
}
&:hover a {
border-bottom: 2px solid $text-color;
}
}
.header__push-tag--active {
color: $text-color;
a {
border-bottom: 2px solid $text-color;
}
}
.header__push-filter--tags {
display: none;
}
.header__push-filter--sort {
display: inline-block;
float: right;
height: 36px;
height: 2.25rem;
margin-top: 0;
max-width: 250px;
select {
height: 36px;
height: 2.25rem;
}
}
@include av-mq("thumb") {
.header:not(.gift-card__header) {
background-image: none !important;
}
}
@include av-mq("handheld-and-up") {
.header {
background-size: cover;
}
.header__wrapper {
padding: 18px 0;
padding: 1.125rem 0;
}
.header__logo {
display: block;
text-align: center;
}
.header__mobile-nav {
display: none;
}
.header__mobile-nav ~ .header__wrapper {
margin-top: 0;
}
.header__logo-image {
max-height: none;
}
.header__actions {
position: absolute;
display: block;
top: 0;
right: 0;
padding-right: 20px;
padding-right: 1.25rem;
font-size: 12px;
font-size: 0.75rem;
font-weight: bolder;
text-transform: uppercase;
}
.header__actions-item {
display: inline-block;
&:not(:last-child)::after {
display: inline-block;
content: '';
margin: 0 12px;
margin: 0 0.75rem;
height: 16px;
height: 1rem;
width: 1px;
width: 0.0625rem;
background: $header-text-color;
vertical-align: text-bottom;
}
}
.currency-selector {
position: relative;
svg {
position: absolute;
right: 30px;
right: 1.875rem;
top: 3px;
top: 0.1875rem;
pointer-events: none;
}
}
.currency-selector__select {
padding-right: 24px;
padding-right: 1.5rem;
border: none;
background: transparent;
font-size: 12px;
font-size: 0.75rem;
width: auto;
height: auto;
color: $header-text-color;
&:focus {
color: $header-text-color;
}
option {
color: invert($header-text-color);
}
}
.header--absolute .header__wrapper {
position: absolute;
width: 100%;
z-index: 2;
background: transparent none !important;
}
}
@include av-mq("handheld-and-up") {
.header__push {
/*margin-top: 16px;
margin-top: 1rem;*/
}
}
@include av-mq("lap-and-up") {
.header__push {
/* margin-top: 16px;
margin-top: 1rem;*/
}
.header__push-title {
/*font-size: 70px;
font-size: 4.375rem;*/
}
}
@media screen and (min-width: 1150px) {
.header__wrapper--right {
.header__logo {
display: inline-block;
text-align: left;
}
}
}
/**
* ----------------------------------------------------------------------------------------------------
* FOOTER
* ----------------------------------------------------------------------------------------------------
*/
#shopify-section-footer {
/*margin-top: 25px;
margin-top: 1.5625rem;*/
}
.footer {
padding: 20px 0;
padding: 1.25rem 0;
background: $footer-background;
color: $footer-text-color;
text-align: center;
p {
margin-bottom: 0;
}
}
.footer--no-margin {
margin-top: 0;
}
.footer__module {
font-size: 12px * $footer-font-factor;
font-size: 0.75rem * $footer-font-factor;
margin:0 15px 0 0;
/*padding: 16px;
padding: 1rem;
border: 1px solid $footer-border-color;
& + .footer__module {
border-top: none;
} */
}
.footer__module + .footer__module,
.footer__row + .footer__row .footer__module:first-child {
border-top: none;
}
.footer__module--centered {
text-align: center;
vertical-align: middle;
}
.footer__title {
font-family: $navigation-font-family;
margin-bottom: 10px;
margin-bottom: 0.625rem;
font-size: 15px * $footer-font-factor;
font-size: 0.9375rem * $footer-font-factor;
font-weight: bolder;
color: $footer-title-color;
letter-spacing: 1px;
text-transform: uppercase;
}
.footer__logo_section
{
display:block;
text-align:left;
}
.footer__logo {
max-width: 115px;
vertical-align: middle;
padding-top:20px;
}
.footer__linklist {
/* margin-bottom: -8px;
margin-bottom: -0.5rem;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;*/
li {
/* -webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
padding-bottom: 8px;
padding-bottom: 0.5rem; */
}
}
.footer__about-text {
white-space: pre-line;
}
.footer__social {
.social__item {
display: inline-block;
&:not(:last-child) {
margin-right: 10px;
margin-right: 0.625rem;
}
}
svg {
height: 30px;
height: 1.875rem;
width: 30px;
width: 1.875rem;
&:hover {
color: $accent-color;
}
}
}
.footer__form {
position: relative;
}
.footer__content {
margin-bottom: 10px;
margin-bottom: 0.625rem;
}
.footer__input,
.footer__submit {
float:left;
line-height:17px;
padding: 5px 6px;
padding: 0.3125rem 0.375rem;
}
.footer__input-wrapper {
position: relative;
}
.footer__input {
width: 60%;
border-radius: 0;
border: 1px solid #c8492c;
font-size: inherit;
-webkit-appearance: none;
padding: 0.3rem 0.9375rem;
border: none;
background: $footer-text-color;
color:$text-color;
&::-webkit-input-placeholder {
color: lighten($text-color, 15%);
}
&::-moz-placeholder {
color: lighten($text-color, 15%);
}
&:-ms-input-placeholder {
color: lighten($text-color, 15%);
}
&::placeholder {
color: lighten($text-color, 15%);
}
}
.footer__submit {
/*position: absolute;
right: 0;
top: 0;*/
width: auto;
background: $footer-title-color;
border: none;
text-align: right;
border-radius: 0;
letter-spacing: 1px;
margin-left: 14px;
transition: color 0.25s ease-in-out;
font-family: $navigation-font-family;
text-transform: uppercase;
&:hover {
background: lighten($footer-title-color, 15%);
}
}
.footer__row + .footer__misc {
margin-top: 20px;
margin-top: 1.25rem;
}
.footer__copyright {
font-size: 12px * $footer-font-factor;
font-size: 0.75rem * $footer-font-factor;
}
.payment-methods {
margin-top: 10px;
margin-top: 0.625rem;
}
.payment-methods__item {
display: inline-block;
&:not(:last-child) {
margin-right: 10px;
margin-right: 0.625rem;
}
svg {
width: 38px;
width: 2.375rem;
height: 24px;
height: 1.5rem;
}
}
@include av-mq("handheld-and-up") {
.footer {
text-align: left;
}
.footer__row {
display: table;
width: 100%;
margin: 0;
border: 1px solid $footer-border-color;
& + .footer__row {
border-top: 0;
}
}
.footer__module {
/* display: table-cell;
margin-right: 15px;
margin-right: 0.9375rem;
padding: 20px 30px;
padding: 1.25rem 1.875rem;
border-width: 0 1px 0 0;
&:last-child {
border-right: none;
}*/
}
.footer__linklist a {
white-space: nowrap;
letter-spacing: 1px;
}
.footer__copyright {
display: inline-block;
}
.payment-methods {
margin-top: -8px;
margin-top: -0.5rem;
float: right;
}
}
@include av-mq("lap-and-up") {
.footer__linklist li {
white-space: nowrap;
}
}
@include av-mq("desk") {
.footer {
padding: 50px 0 50px 0;
padding: 3.125rem 0 3.125rem 0;
}
.footer__linklist {
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}
.footer__row + .footer__misc {
margin-top: 30px;
margin-top: 1.875rem;
}
}
@media screen and (min-width: 801px) and (max-width: 1160px) {
.grid__cell.footer__module {
margin:0 0 0 10px;
}
}
@include av-mq("handheld") {
.grid__cell.footer__module {
padding: 16px 0 0 80px;
margin:0;
}
.footer__logo {
padding-top:0;
}
}
@include av-mq("thumb") {
.grid__cell.footer__module {
padding: 8px 0 8px 52px;
padding: 0.5rem 0 0.5rem 3.25rem;
margin:0;
}
.footer__title
{
margin:0;
}
.footer__logo_section
{
text-align:center;
}
.footer__logo {
padding-top:0;
}
.footer__input-wrapper{
width: 75%;
margin:0 auto;
}
.footer__input {
width: 75%;
}
.footer__input, .footer__submit {
float: left;
line-height: 22px;
padding: 8px 0px;
padding: 0.5rem 0;
text-align: center;
}
.footer__submit {
width: 25%;
font-size: 17px;
font-size:1.0625rem;
margin:0;
}
}
.slideshow,
.slideshow__slide {
position: relative;
}
.slideshow__slides {
opacity: 0;
transition: opacity 0.2s cubic-bezier(0.25, 0.45, 0.45, 0.90);
will-change: opacity;
}
.slideshow__slide {
height: auto;
}
.no-js .slideshow__slides,
.slick-initialized.slideshow__slides {
opacity: 1;
}
.slideshow__image {
width: 100%;
}
.slideshow__background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
}
.slideshow__cover {
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.slideshow__heading {
font-family: $slideshow-heading-font-family;
font-weight: $slideshow-heading-font-weight;
font-style: $slideshow-heading-font-style;
font-size: 20px * $slideshow-heading-font-factor;
font-size: 1.25rem * $slideshow-heading-font-factor;
color: $slideshow-heading-color;
}
.slideshow__subheading {
display: none; /* Do not display on mobile */
font-family: $slideshow-subheading-font-family;
font-weight: $slideshow-subheading-font-weight;
font-style: $slideshow-subheading-font-style;
color: $slideshow-subheading-color;
}
.slideshow__button {
background: $slideshow-button-background;
color: $slideshow-button-color;
.no-touchevents &:hover {
background: $slideshow-button-color;
color: $slideshow-button-background;
}
}
.slideshow__arrows {
position: absolute;
width: 100%;
bottom: 0;
right: 0;
padding-bottom: 5px;
padding-bottom: 0.3125rem;
text-align: right;
color: $slideshow-heading-color;
}
.slideshow .placeholder-svg,
.slideshow__placeholder {
background: #a1a1a1;
color: #4e4e4e;
}
.slideshow__placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.placeholder-svg {
height: 100%;
}
}
.slideshow__arrow {
display: inline-block;
svg {
width: 24px;
width: 1.5rem;
height: 24px;
height: 1.5rem;
}
}
.slideshow__prev {
margin-right: 6px;
margin-right: 0.375rem;
}
@include av-mq("thumb") {
.slideshow__background-slide {
display: none !important; /* Make sure it's not loaded on mobile */
}
.slideshow__button {
padding: 10px 15px;
padding: 0.625rem 0.9375rem; /* We slightly reduce slideshow button only on mobile due to limited size */
}
}
@include av-mq("handheld-and-up") {
.slideshow {
min-height: 350px;
}
.slideshow--uncropped {
.slideshow__slide {
background-image: none !important;
}
}
.slideshow:not(.slideshow--separate) {
.slideshow__cover {
padding-top: 80px;
padding-top: 5rem;
}
&.slideshow--cropped {
.slideshow__slide {
min-height: 600px;
background-position: center center;
background-size: cover;
}
.slideshow__image-wrapper {
display: none !important;
}
.slideshow__cover {
position: relative;
padding: 305px 0 175px 0;
padding: 19.0625rem 0 10.9375rem 0;
width: 100%;
top: 0;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
}
.slideshow__heading {
margin-bottom: 25px;
margin-bottom: 1.5625rem;
font-size: 40px * $slideshow-heading-font-factor;
font-size: 2.5rem * $slideshow-heading-font-factor;
}
.slideshow__subheading {
display: block;
text-transform: uppercase;
font-size: 18px * $slideshow-subheading-font-factor;
font-size: 1.125rem * $slideshow-subheading-font-factor;
font-weight: bolder;
& > span {
padding-bottom: 4px;
padding-bottom: 0.25rem;
border-bottom: 4px solid currentColor;
}
}
.slideshow__arrow svg {
width: 34px;
width: 2.125rem;
height: 34px;
height: 2.125rem;
}
/**
* If the marketing module is enabled, the marketing module will slightly "eat up" over the slider. As
* a consequence, we need to "move a bit" the content
*/
.shopify-section__slideshow--pull .slideshow__arrows {
bottom: 40px;
bottom: 2.5rem;
}
}
@include av-mq('lap-and-up') {
.shopify-section__slideshow--pull .slideshow__arrows {
bottom: 80px;
bottom: 5rem;
}
}
@include av-mq("desk") {
.slideshow.slideshow--cropped:not(.slideshow--separate) {
.slideshow__cover {
padding: 275px 0 225px 0;
padding: 17.1875rem 0 14.0625rem 0;
}
}
.slideshow--uncropped {
.slideshow__cover {
padding-top: 25px;
padding-top: 1.5625rem;
}
}
.shopify-section__slideshow--pull .slideshow__arrows {
bottom: 120px;
bottom: 7.5rem;
}
}
@include av-mq("widescreen") {
.slideshow__heading {
font-size: 80px * $slideshow-heading-font-factor;
font-size: 5rem * $slideshow-heading-font-factor;
}
}
.marketing-module {
display: block;
padding: 1.5%;
}
.marketing-module .placeholder-svg {
background: #000000;
color: #ffffff;
}
.marketing-module__wrapper {
background: $background;
white-space: nowrap;
font-size: 0;
}
.marketing-module__column {
display: inline-block;
width: 100%;
margin-bottom: 0;
vertical-align: top;
white-space: normal;
}
.marketing-module__link {
transition: opacity 0.25s ease-in-out;
will-change: opacity;
&:hover {
opacity: 0.7;
}
}
.marketing-module__item {
width: 100%;
display: inline-block;
vertical-align: top;
& > .marketing-module__image {
width: 100%;
}
}
.marketing-module__wrapper--row-of-3 {
.marketing-module__column {
width: calc(33.3333% - 1%);
& + .marketing-module__column {
margin-left: 1.5%;
}
}
}
.marketing-module__wrapper--row-of-2 {
.marketing-module__column {
width: calc(50% - 0.75%);
& + .marketing-module__column {
margin-left: 1.5%;
}
}
}
.marketing-module__wrapper--collage {
.marketing-module__column {
width: calc(50% - 0.75%);
& + .marketing-module__column {
margin-left: 1.5%;
}
}
.marketing-module__column:last-child .marketing-module__item:first-child {
margin-bottom: 3%;
}
}
@include av-mq('thumb') {
.marketing-module--hide-mobile {
display: none;
}
}
/* When the slideshow is enabled and that it is just before the featured images module, we have some adjustments to do */
.shopify-section__slideshow + .shopify-section__featured-images {
.marketing-module {
position: relative;
padding-top: 0;
padding-bottom: 0;
}
.marketing-module__wrapper {
padding: 1.5% 0;
}
@include av-mq("handheld-and-up") {
.marketing-module {
margin-top: -40px;
margin-top: -2.5rem;
}
.marketing-module__wrapper {
padding: 1.5%;
}
}
@include av-mq("lap-and-up") {
.marketing-module {
margin-top: -80px;
margin-top: -5rem;
}
}
@include av-mq("desk") {
.marketing-module {
margin-top: -120px;
margin-top: -7.5rem;
}
}
}
.quick-shop {
display: table;
table-layout: fixed;
padding: 35px 35px 30px 35px;
padding: 2.1875rem 2.1875rem 1.875rem 2.1875rem;
width: 850px;
width: 53.125rem;
max-width: 100%;
top: 50% !important;
left: 50% !important;
background: #fff;
border: 1px solid $border-color;
border-radius: 5px;
box-shadow: 0 0 4px rgba(#000000, 0.3);
-webkit-transform: translate(-50%, -50%) !important;
-ms-transform: translate(-50%, -50%) !important;
transform: translate(-50%, -50%) !important;
}
.quick-shop__slideshow {
display: table-cell;
vertical-align: middle;
width: 40%;
}
.quick-shop__product {
display: table-cell;
width: 60%;
padding-left: 50px;
padding-left: 3.125rem;
vertical-align: middle;
.product__form-status {
position: relative;
background:#fff;
margin-bottom: 45px;
margin-bottom: 2.8125rem;
}
}
.quick-shop__see-more {
font-weight: bolder;
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
svg {
margin-left: 10px;
margin-left: 0.625rem;
vertical-align: text-top;
transition: margin-left 0.25s ease-in-out;
}
&:hover {
svg {
margin-left: 15px;
margin-left: 0.9375rem;
}
}
}
.mega-search {
width: 400px;
width: 25rem;
}
.mega-search .icon-cross {
display: block;
margin: 0 auto 35px auto;
margin: 0 auto 2.1875rem auto;
width: 35px;
width: 2.1875rem;
height: 35px;
height: 2.1875rem;
fill: #ffffff;
cursor: pointer;
}
.mega-search__form {
position: relative;
}
.mega-search__input {
padding: 18px 25px;
padding: 1.125rem 1.5625rem;
background: transparent;
border: 3px dashed #ffffff;
font-size: 18px;
font-size: 1.125rem;
color: #ffffff;
&:focus {
border-color: inherit;
}
&::-webkit-input-placeholder {
color: rgba(#ffffff, 0.6);
}
&::-moz-placeholder {
color: rgba(#ffffff, 0.6);
}
&:-ms-input-placeholder {
color: rgba(#ffffff, 0.6);
}
&::placeholder {
color: rgba(#ffffff, 0.6);
}
}
.mega-search__spinner {
position: absolute;
margin: 0;
width: 25px;
width: 1.5625rem;
height: 25px;
height: 1.5625rem;
top: 20px;
top: 1.25rem;
right: 20px;
right: 1.25rem;
}
.mega-search__suggestions {
position: relative;
display: none;
top: -3px;
top: -0.1875rem;
background: #ffffff;
border-radius: 0 0 3px 3px;
}
.mega-search__suggestion {
padding: 10px;
padding: 0.625rem;
cursor: pointer;
& > div {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
/* Last one is the "display all results" link */
&:last-child {
border-top: 1px solid $border-color;
}
}
.mega-search__image {
display: inline-block;
max-width: 35px;
max-height: 35px;
margin-right: 20px;
margin-right: 1.25rem;
border-radius: 3px;
vertical-align: baseline;
}
.mega-search__info {
display: inline-block;
}
.mega-search__item-title {
display: block;
color: $heading-color;
font-size: 15px;
font-size: 0.9375rem;
font-weight: 400;
}
.mega-search__item-subtitle {
display: block;
font-size: 13px;
font-size: 0.8125rem;
text-transform: uppercase;
}
.mega-search__all-results {
color: $heading-color;
text-transform: uppercase;
font-size: 13px;
font-size: 0.8125rem;
font-weight: bolder;
}
.mega-search__suggestion.selected {
background: $primary-button-background;
&:last-child {
border-radius: 0 0 3px 3px;
}
.mega-search__item-title,
.mega-search__item-subtitle,
.mega-search__all-results {
color: $primary-button-color;
}
}
.share-buttons__label {
display: inline-block;
margin-right: 25px;
margin-right: 1.5625rem;
text-transform: uppercase;
font-size: 14px;
font-size: 0.875rem;
font-weight: bolder;
vertical-align: text-bottom;
}
.share-buttons__list {
display: inline-block;
}
.share-buttons__item {
display: inline-block;
&:not(:last-child) {
margin-right: 16px;
margin-right: 1rem;
}
a
{
color: $grey-color;
&:hover {
color: #ADAFB0;
}
}
svg {
height: 30px;
height: 1.875rem;
width: 30px;
width: 1.875rem;
}
}
.article__comments {
max-width: 900px;
margin: 0 auto 40px auto;
margin: 0 auto 2.5rem auto;
}
.comments__count {
margin-top: -10px;
margin-top: -0.625rem;
text-align: center;
font-weight: bolder;
color: $heading-color;
}
.comments__moderated {
display: block;
margin-top: 10px;
margin-top: 0.625rem;
text-align: center;
}
.comments__new {
max-width: 700px;
margin: 0 auto;
}
.comments__section-title {
@extend .index-module__title;
text-align: center;
color: $heading-color;
}
.comment {
padding: 25px 0;
padding: 1.5625rem 0;
border-bottom: 1px solid $border-color;
&:last-child {
border-bottom: none;
}
}
.comment__header {
margin-bottom: 25px;
margin-bottom: 1.5625rem;
text-transform: uppercase;
font-size: 14px;
font-size: 0.875rem;
overflow: hidden;
}
.comment__gravatar {
float: left;
margin-right: 15px;
margin-right: 0.9375rem;
}
.comment__author {
margin-bottom: 5px;
margin-bottom: 0.3125rem;
padding-top: 10px;
padding-top: 0.625rem;
font-weight: bolder;
}
.comment__gravatar {
max-width: 60px;
border-radius: 100%;
}
.comment__content {
clear: both;
}
@include av-mq("handheld-and-up") {
.comment {
display: table;
width: 100%;
table-layout: fixed;
}
.comment__header {
display: table-cell;
width: 200px;
width: 12.5rem;
}
.comment__gravatar {
float: none;
}
.comment__content {
display: table-cell;
padding-left: 60px;
padding-left: 3.75rem;
vertical-align: top;
}
}
@include av-mq("lap-and-up") {
.article__comments {
margin-bottom: 80px;
margin-bottom: 5rem;
}
}
/**
* Google map
*/
.featured-map__map-container {
position: relative;
height: 225px;
height: 14.0625rem;
background-size: cover;
background-position: center;
}
.featured-map__map-container .placeholder-svg {
height: 100%;
width: auto;
max-width: none;
}
.featured-map__gmap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.featured-map__info {
position: relative;
padding: 25px;
padding: 1.5625rem;
margin: 0 auto;
background: $background;
text-align: left;
z-index: 1;
}
.featured-map__store {
display: block;
margin-bottom: 0.5em;
font-size: 20px;
font-size: 1.25rem;
font-family: $heading-font-family;
font-weight: $heading-font-weight;
font-style: $heading-font-style;
color: $heading-color;
}
.featured-map__address {
margin-bottom: 0.8em;
}
.featured-map__hours {
font-size: 14px;
font-size: 0.875rem;
}
.featured-map__location {
margin-top: 1.6em;
}
@include av-mq('handheld-and-up') {
.featured-map {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
padding-top: 0;
height: 550px;
height: 34.375rem;
}
.featured-map__map-container {
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
height: 100%;
}
.featured-map__info {
-webkit-flex: none;
-ms-flex: none;
flex: none;
min-width: 370px;
width: 370px;
width: 23.125rem;
padding: 38px;
padding: 2.375rem;
}
.featured-map__store {
margin-bottom: 2.3em;
}
.featured-map__location {
margin-top: 2.6em;
}
}
.error-404 {
text-align: center;
}
.error-404__icon {
display: inline-block;
padding: 20px 40px;
padding: 1.25rem 2.5rem;
color: $primary-button-background;
border: 1px solid $primary-button-background;
border-radius: 12px;
font-size: 64px;
font-size: 4rem;
font-weight: bolder;
}
.error-404__empty {
margin: 50px 0;
margin: 3.125rem 0;
}
.login__forgot-password {
font-weight: normal;
text-transform: none;
text-decoration: underline;
}
/**
* Address
*/
.address {
position: relative;
padding: 15px;
padding: 0.9375rem;
border: 1px solid $border-color;
}
.address__type {
position: absolute;
display: inline-block;
width: 100%;
top: 0;
left: 0;
padding: 6px 14px 4px 14px;
padding: 0.375rem 0.875rem 0.25rem 0.875rem;
border-radius: 3px 3px 0 0;
font-size: 18px;
font-size: 1.2rem;
text-transform: uppercase;
text-align: center;
color: $accent-color;
font-family: $navigation-font-family;
& + .address__customer {
margin-top: 35px;
margin-top: 2.1875rem;
}
}
.address__customer {
font-weight: bolder;
font-size: 18px;
font-size: 1.125rem;
color: $heading-color;
}
.address__details {
p {
margin-bottom: 5px;
margin-bottom: 0.3125rem;
}
& + .address__see-all {
display: inline-block;
margin-top: 12px;
margin-top: 0.75rem;
}
}
.address__actions {
margin-top: 20px;
margin-top: 1.25rem;
.button {
display: block;
text-align: center;
&:first-child {
margin-bottom: 10px;
margin-bottom: 0.625rem;
}
}
}
/**
* Addresses
*/
.addresses__empty {
text-align: center;
margin: 50px 0;
margin: 3.125rem 0;
}
.addresses__modal {
margin: 25px 0;
margin: 1.5625rem 0;
max-height: calc(100% - 50px);
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.addresses__close {
display: block;
margin-top: 10px;
margin-top: 0.625rem;
text-align: center
}
/**
* Orders
*/
.orders__table,
.order__table {
margin-bottom: 50px;
margin-bottom: 3.125rem;
}
.order__address {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.collections {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-top: 25px;
margin-top: 1.5625rem;
}
.collections__item {
display: block;
position: relative;
font-size: 0;
text-align: center;
}
.collections__image {
display: block;
margin: 0 auto;
}
.collections__overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(#000000, 0.2);
}
.collections__title {
position: absolute;
top: 50%;
left: 0;
width: 100%;
padding: 0 10px;
padding: 0 0.625rem;
font-family: $heading-font-family;
font-weight: $heading-font-weight;
font-style: $heading-font-style;
color: #ffffff;
font-size: 20px;
font-size: 1.25rem;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.no-touchevents {
.collections__overlay {
background: rgba(#000000, 0.4);
}
.collections__overlay,
.collections__title {
opacity: 0;
transition: opacity 0.25s ease-in-out;
will-change: opacity;
}
.collections__item:hover {
.collections__overlay,
.collections__title {
opacity: 1;
}
}
}
.collection__description {
margin-bottom: 25px;
margin-bottom: 1.5625rem;
background: $collection-description-background;
color: $collection-description-color;
}
.collection__empty {
text-align: center;
margin: 50px 0;
margin: 3.125rem 0;
}
.product-item {
position: relative;
}
.product-item__image-wrapper {
position: relative;
width: 100%;
}
.product-item__image {
display: block;
margin: 0 auto;
}
.product-item__image--alternate {
display: none;
}
.product-item--sold-out {
.product-item__image-wrapper::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
opacity: 0.4;
}
}
.no-touchevents .product-item__figure--alternate-image-loaded:hover {
.product-item__image {
display: none;
}
.product-item__image--alternate {
display: block;
}
}
.product-item__figure {
position: relative;
margin: 0 0 15px 0;
margin: 0 0 0.9375rem 0;
font-size: 0;
/*overflow: hidden;*/
& > a {
display: block;
position: relative;
max-width: 100%;
}
}
.product-item .product__labels {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
font-family: $heading-font-family;
.label ~ .label {
margin-top: 5px;
margin-top: 0.3125rem;
}
}
.product-item__details {
text-align: center;
font-weight: bolder;
}
.product-item__colors {
line-height: 0;
margin-bottom: 12px;
margin-bottom: 0.75rem;
}
.product-item__color {
display: inline-block;
margin: 0 1px;
margin: 0 0.0625rem;
padding: 2px;
padding: 0.125rem;
border-radius: 100%;
border: 1px solid $border-color;
vertical-align: middle;
span {
display: block;
width: 12px;
width: 0.75rem;
height: 12px;
height: 0.75rem;
border-radius: 100%;
background-size: cover;
}
}
.product-item__vendor,
.product-item__type,
.product-item__price {
text-transform: uppercase;
font-size: 15px;
font-size: 0.9375rem;
}
.product-item__vendor,
.product-item__type {
display: block;
margin-bottom: 4px;
margin-bottom: 0.25rem;
}
.product-item__price {
display: inline-block;
}
.product-item__price--old {
text-decoration: line-through;
font-weight: normal;
}
.product-item__title {
display: block;
margin-bottom: 0;
font-family: $navigation-font-family;
text-transform: uppercase;
font-size: 16px;
font-size: 1rem;
color: $heading-color;
}
.button--quick-shop {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
text-align: center;
border-radius: 0;
}
.no-touchevents .product-item__figure:hover {
.button--quick-shop {
display: block !important;
}
}
.cart
{
font-size: 20px;
font-size: 1.25rem;
font-weight: normal;
color:#670001;
}
.cart__empty {
text-align: left;
padding: 0 0 50px;
padding: 0 0 3.125rem;
}
.cart__empty p
{
color: #919191;
font-size: 18px;
font-size: 1.125rem;
}
.cart__table--desktop {
display: none;
}
.cart__item td, .gs__group-wrapper table td
{
vertical-align:top;
}
.cart-item__image-container, .gs__cart-image-wrapper {
max-width: 100px;
width: 100px;
width: 6.25rem;
padding-right: 0;
padding-left: 0;
}
.cart-item__image, .gs__cart-image {
//border-right: 1px solid $border-color;
padding-right: 15px;
padding-right: 0.9375rem;
vertical-align: middle;
}
.gs__item-title,
.gs__cart-meta-text,
.gs__line-item-props,
.gs__cart-price-wrapper,
.cart-item__vendor,
.cart-item__title,
.cart-item__variant,
.cart-item__properties,
.cart-item__unit-price,
.cart-item__unit-price-discounted,
.cart-item__line-price,
.cart-item__line-price-discounted {
display: block;
letter-spacing:1px;
}
.gs__cart-meta-text,
.gs__line-item-props,
.gs__cart-price-wrapper,
.cart-item__variant,
.cart-item__properties,
.cart-item__unit-price,
.cart-item__unit-price-discounted,
.cart-item__quantity,
.cart-item__line-price,
.cart-item__line-price-discounted {
font-size: 16px;
font-size: 1rem;
}
/*.cart-item__vendor,
.cart-item__title,
.cart-item__variant {
margin-bottom: 8px;
margin-bottom: 0.5rem;
}*/
.cart-item__title,
.cart-item__line-price {
//color: $heading-color;
}
.cart-item__unit-price-discounted,
.cart-item__line-price-discounted {
text-decoration: line-through;
font-weight: normal;
}
.cart-item__title, .gs__item-title {
text-transform:uppercase;
font-family: $navigation-font-family;
}
.cart-item__properties, .gs__line-item-props {
font-weight: normal;
display:none;
}
.cart-item__quantity {
max-width: 62px;
text-align: center;
-moz-appearance: textfield;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
}
.cart-item__remove {
color: $accent-color;
&:hover {
color: darken($accent-color, 15%);
}
svg {
width: 28px;
width: 1.75rem;
height: 28px;
height: 1.75rem;
}
}
.cart__checkout
{
input[type="submit"]
{
font-family: $navigation-font-family;
font-size: 22px;
font-size: 1.375rem;
letter-spacing: 1px;
padding: 10px 40px;
padding: 0.625rem 2.5rem;
}
margin-top: 15px;
display: block;
width: auto;
padding: 15px;
}
.cart__table--mobile {
.cart-item__properties {
margin-bottom: 16px;
margin-bottom: 1rem;
font-size:8px;
}
.cart-item__quantity {
display: inline-block;
width: 60px;
width: 3.75rem;
vertical-align: top;
}
.cart-item__price-and-remove {
display: inline-block;
margin:0 15px;
margin:0 0.9375rem;
vertical-align: top;
}
}
.cart__total,
.cart__total-discount {
margin-bottom: 35px;
margin-bottom: 2.1875rem;
font-size: 16px;
font-size: 1rem;
text-transform: uppercase;
text-align: center;
}
.cart__total-text
{
font-size: 17px;
font-family: $navigation-font-family;
letter-spacing: 1px;
}
.cart__total-amount
{
font-weight:bold;
padding-left:20px;
}
.cart__total-amount,
.cart__total-amount-saved {
font-size: 22px;
font-size: 1.375rem;
}
.cart__original-total-amount {
margin-left: 8px;
margin-left: 0.5rem;
text-decoration: line-through;
}
.cart__total-discount {
margin-top: -25px;
margin-top: -1.5625rem;
}
.cart__instructions {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
}
.cart__note {
max-width: 500px;
}
.cart__terms {
margin-bottom: 6px;
margin-bottom: 0.375rem;
}
.cart__taxes {
display: block;
font-size: 15px;
font-size: 0.9375rem;
}
.cart__table,.gs__group-wrapper table {
th {
&:first-child {
padding-left:0;
}
&:last-child {
padding-right:0;
}
}
}
.cart__total,
.cart__total-discount {
text-align: center;
}
.cart__total-discount {
font-size: 18px;
font-size: 1.125rem;
}
.cart__total-amount {
font-size: 30px;
font-size: 1.875rem;
}
.cart__total-amount-saved {
font-size: 24px;
font-size: 1.5rem;
}
.cart__instructions {
/*margin-top: -6px;
margin-top: -0.375rem;*/
}
.cart__terms {
text-align: right;
margin-bottom: 15px;
margin-bottom: 0.9375rem;
}
.cart__checkout-with {
text-align: right;
input {
margin-right: 0;
}
}
.cart-item__unit-price, .cart-item__line-price, .cart-item__remove img
{
padding-top:12px;
}
/**
* Shipping estimator
*/
.shipping-estimator {
margin-top: 45px;
margin-top: 2.8125rem;
padding-top: 25px;
padding-top: 1.5625rem;
border-top: 1px solid $border-color;
}
.shipping-estimator__title {
@extend .index-module__title;
color: $heading-color;
text-align: center;
}
.shipping-estimator__results {
margin-top: 30px;
margin-top: 1.875rem;
}
@include av-mq("handheld-and-up") {
.cart__table--mobile {
display: none;
}
.cart__table--desktop {
display: table;
}
.flexbox {
.shipping-estimator__form {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
.form__control {
margin: 0 15px 0 0;
margin: 0 0.9375rem 0 0;
}
}
.shipping-estimator__zip {
max-width: 160px;
}
}
}
@include av-mq("lap-and-up") {
.cart-item__image-container, .gs__cart-image-wrapper {
max-width: 160px;
width: 160px;
width: 10rem;
}
}
.contact {
margin-top: 40px;
margin-top: 2.5rem;
}
@include av-mq("handheld-and-up") {
.template-page-contact {
.contact {
margin-top: 0;
}
.page__content + .contact {
margin-top: 0;
}
}
}
@include av-mq("lap-and-up") {
.template-page-contact {
.page__content + .contact {
margin-top: 0;
}
}
}
.header__push-rss {
display: none;
}
/**
* BLOG
*/
.blog__articles {
text-align: left;
}
.blog__article {
margin-bottom: 35px;
margin-bottom: 2.1875rem;
padding: 0 0 35px;
padding: 0 0 2.1875rem;
border-bottom: 1px solid #dfdfdf;
}
.article_last
{
border-bottom:0;
}
@include av-mq("handheld-and-up") {
.header__push-rss {
display: inline-block;
margin-top: 16px;
margin-top: 1rem;
float: right;
font-size: 12px;
font-size: 0.75rem;
text-transform: uppercase;
color: $heading-color;
svg {
margin-right: 4px;
margin-right: 0.25rem;
vertical-align: text-top;
}
}
.flexbox {
.blog__articles {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.blog__article {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
}
/**
* ARTICLE
*/
.article__header {
margin-bottom: 20px;
margin-bottom: 1.25rem;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.article__meta {
margin: 13px 0 0;
margin: 0.8125rem 0 0;
//text-transform: uppercase;
font-size: 13px;
font-size: 0.8125rem;
}
.article__meta-separator {
display: inline-block;
margin: 0 5px;
margin: 0 0.3125rem;
}
.article__author {
font-weight: bolder;
text-transform: capitalize;
}
.article__title {
color: $heading-color;
font-family: $navigation-font-family;
font-weight: $heading-font-weight;
font-style: $heading-font-style;
position: relative;
margin: 0;
padding-bottom: 12px;
font-size: 22px;
font-size: 1.375rem;
text-transform: uppercase;
&:after {
position: absolute;
content: '';
left: 0;
bottom: 0;
height: 2px;
width: 40px;
background: $heading-color;
}
}
.article__excerpt {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.article__image {
display: block;
width: 100%;
vertical-align: top;
}
.article__comments-count {
&:hover {
color: $accent-color;
}
svg {
vertical-align: middle;
margin-right: 5px;
margin-right: 0.3125rem;
}
}
.article--full {
max-width: 900px;
margin: 0 auto 30px auto;
margin: 0 auto 1.875rem auto;
.article__meta {
//text-align: center;
}
.article__image-wrapper {
margin: 0 auto 35px auto;
margin: 0 auto 2.1875rem auto;
}
.article__body {
margin-bottom: 50px;
margin-bottom: 3.125rem;
}
.article__footer {
//text-align: center;
}
}
.article__tags {
margin-top: 15px;
margin-top: 0.9375rem;
}
.article__tags-label {
display: inline-block;
margin-right: 25px;
margin-right: 1.5625rem;
text-transform: uppercase;
font-size: 14px;
font-size: 0.875rem;
font-weight: bolder;
vertical-align: middle;
}
.article__tags-list {
display: inline-block;
font-style: italic;
}
.article__tags-item {
display: inline-block;
&:hover {
color: $accent-color;
}
}
.article-share {
padding: 26px 0;
padding: 1.625rem 0;
font-size: 18px;
font-size: 1.125rem;
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
p {
display: inline-block;
margin-bottom: 13px;
margin-bottom: 0.8125rem;
}
}
@include av-mq("lap-and-up") {
.article__title {
//font-size: 20px;
//font-size: 1.25rem;
}
}
.search__empty {
text-align: center;
padding: 50px 0;
padding: 3.125rem 0;
}
.search__input {
max-width: 400px;
margin: 0 auto 20px auto;
margin: 0 auto 1.25rem auto;
}
.template-product {
#shopify-section-footer {
margin-top: 0;
}
}
/**
* Navigation
*/
.product__next,
.product__previous {
&:hover {
color: $accent-color;
}
svg {
vertical-align: middle;
}
}
.product__previous + .separator {
display: inline-block;
margin: 0 5px;
margin: 0 0.3125rem;
color: $text-color;
}
/**
* Showcase and details
*/
.product__slideshow {
padding-left:51.984px;
padding-left:3.249rem;
.slick-arrow {
display: none !important;
}
.slick-dots {
margin-top: 10px;
margin-top: 0.625rem;
padding: 0;
text-align: center;
li {
display: inline-block;
cursor: pointer;
}
.slick-active button {
background: $primary-button-background;
}
button {
display: inline-block;
margin: 4px 8px;
margin: 0.25rem 0.5rem;
padding: 0;
height: 12px;
width: 12px;
background: $text-color;
border-radius: 100%;
cursor: pointer;
border: none;
outline: none;
font-size: 0;
}
}
}
.product__slideshow-image {
max-width: 100%;
margin: 0 auto;
}
.product__slideshow-image--zoomed {
visibility: hidden;
}
.product__slideshow--nav {
display: none;
}
.product__meta--desktop {
display: none;
}
.product__meta--mobile {
/*margin-bottom: 25px;
margin-bottom: 1.5625rem;*/
text-align: center;
}
.product__info {
margin-bottom: 25px;
margin-bottom: 1.5625rem;
}
.product__labels {
text-align: left;
}
.product__meta .product__labels {
text-align: center;
}
.product__labels--always {
margin-top: 18px;
margin-top: 1.125rem;
}
.product__vendor {
margin-bottom: 8px;
margin-bottom: 0.5rem;
text-transform: uppercase;
font-size: 13px;
font-size: 0.8125rem;
font-weight: bolder;
}
.product__inventory,
.product__reviews-badge {
display: block;
margin-bottom: 12px;
margin-bottom: 0.75rem;
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
}
.spr-badge-caption {
margin-left: 8px;
margin-left: 0.5rem;
}
.product__title {
margin-bottom: 10px;
margin-bottom: 0.625rem;
font-family: $heading-font-family;
font-weight: $heading-font-weight;
font-style: $heading-font-style;
font-size: 50px;
font-size: 3.125rem;
color: $heading-color;
text-transform: uppercase;
}
.product__price {
font-weight: normal;
font-size: 25px;
font-size: 1.5625rem;
color: $text-color;
}
.product__price--old {
margin-right: 15px;
margin-right: 0.9375rem;
font-weight: normal;
text-decoration: line-through;
}
.product__sale-percent {
margin-left: 15px;
margin-left: 0.9375rem;
padding: 5px 10px;
padding: 0.3125rem 0.625rem;
color: $product-on-sale-color;
background: $product-on-sale-background;
font-size: 16px;
font-size: 1rem;
font-weight: bolder;
border-radius: 3px;
}
@include av-mq("handheld-and-up") {
/*.product__slideshow {
margin: 0;
}*/
.product__slideshow .slick-dots {
display: none !important;
}
.product__slideshow--nav {
display: block;
margin: 20px 0;
margin: 1.25rem 0;
text-align: center;
}
.flexbox .product__slideshow--nav {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: left;
-ms-flex-align: left;
align-items: left;
-webkit-justify-content: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.product__slideshow-nav-image {
/* width: 70px;
width: 4.375rem;
height: 70px;
height: 4.375rem; */
margin: 0 16px 16px 0;
margin: 0 1rem 1rem 0;
margin-left:0;
object-fit: cover;
vertical-align: middle;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.product__slideshow-nav-image--rounded {
border-radius: 100%;
border: 1px solid rgba($border-color, 0.8);
box-shadow: 0 1px 2px rgba($border-color, 0.8);
&:hover {
border-color: rgba($accent-color, 0.6);
box-shadow: 0 1px 2px rgba($border-color, 0.6);
}
}
}
@include av-mq("lap-and-up") {
.product__meta--desktop {
display: block;
}
.product__meta--mobile {
display: none;
}
.product__meta .product__labels {
text-align: left;
}
.product__meta {
/*padding-bottom: 22px;
padding-bottom: 1.375rem;
border-bottom: 1px solid $border-color;*/
}
.product__title {
font-size: 68px;
font-size: 4.25rem;
letter-spacing: 2px;
line-height:60px;
}
}
@include av-mq("thumb") {
.product__meta
{
margin-top: 16px;
margin-top: 1rem;
.product__title
{
}
}
}
/**
* Form
*/
.product__form {
margin-top: 24px;
margin-top: 1.5rem;
padding-bottom: 24px;
padding-bottom: 1.5rem;
.form__label
{
color: $accent-color;
text-transform: uppercase;
font-size: 21px;
font-size: 1.3125rem;
font-family: $navigation-font-family;
}
}
.product__size-chart {
display: block;
font-size: 12px;
font-size: 0.75rem;
font-weight: bolder;
color: $heading-color;
text-decoration: underline;
text-transform: none;
}
.product__quantity {
width: 90px !important;
width: 5.625rem !important;
float: right;
}
.product__buy {
position: relative;
}
.product__form-status {
position: relative;
width: 100%;
padding: 16px 10px 25px 10px;
padding: 1rem 0.625rem 1.5625rem 0.625rem;
text-align: center;
border: 1px solid $border-color;
border-top: none;
/*border-radius: 0 0 3px 3px;
box-shadow: 0 21px 27px 3px $border-color;
z-index: 2;*/
background: #fff;
svg {
vertical-align: middle;
margin-left: 10px;
margin-left: 0.625rem;
}
}
.product__form-message {
font-weight: bolder;
}
.product__form-message--success {
color: $accent-color;
}
.product__form-message--error {
color: #e9573f;
}
.product__form-continue {
font-weight: bolder;
padding-bottom: 3px;
padding-bottom: 0.1875rem;
border-bottom: 2px solid $heading-color;
color: $heading-color;
}
.product__form-or {
display: block;
margin: 10px 0;
margin: 0.625rem 0;
padding: 4px;
padding: 0.25rem;
font-size: 12px;
font-size: 0.75rem;
font-style: italic;
}
@include av-mq("handheld-and-up") {
.product__form-status {
padding: 24px 10px 32px 10px;
padding: 1.5rem 0.625rem 2rem 0.625rem;
}
.product__form-or {
display: inline-block;
margin: 0 20px;
margin: 0 1.25rem;
}
}
/**
* Tabs and description
*/
.product__description {
padding: 25px 0;
padding: 1.5625rem 0;
border-top: 1px solid $border-color;
}
.product__description-label {
display: inline-block;
margin-bottom: 25px;
margin-bottom: 1.5625rem;
text-transform: uppercase;
font-weight: bolder;
font-size: 14px;
font-size: 0.875rem;
border-bottom: 3px solid $border-color;
}
.product__tabs-title {
display: none; /* On mobile we use a dropdown insted */
}
.product__tabs {
clear: both;
border: 1px solid $accent-color;
margin-top: 16px;
margin-top: 1rem;
}
.product__tab-selector {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
/*@include av-mq("handheld-and-up") {*/
.product__tab-selector {
display: none;
}
.product__tabs-title {
font-family: $navigation-font-family;
color: $heading-color;
text-transform: uppercase;
display: block;
text-align: center;
margin: 0;
letter-spacing: 1px;
li {
float: left;
position: relative;
display: block;
border-right: 1px solid $accent-color;
border-bottom: 1px solid $accent-color;
padding: 0;
margin: 0px;
width:40%;
}
li.product__tab-title--active {
border-bottom-color: #fff;
}
li:first-child {
width:20%;
}
li:last-child {
border-right: 0;
}
li > a {
display: block;
padding: 10px 0;
text-align: center;
}
}
.two__tabber .product__tabs-title {
li
{
width:50%;
}
}
.product__tabs-content {
margin: 47px 0 30px 0;
margin: 2.9375rem 0 1.875rem 0;
padding: 20px 15px 0;
border-top: none;
width:98%;
clear:both;
}
/*}*/
@include av-mq("desk") {
.product__tab-title {
margin: 0 45px;
margin: 0 2.8125rem;
}
}
/**
* Payment button
*/
.shopify-payment-button {
margin-top: 15px;
margin-top: 0.9375rem;
}
.shopify-payment-button__button--unbranded {
@extend .button, .button--primary;
width: 100%;
}
.shopify-payment-button__button--branded {
border-radius: 2px;
overflow: hidden;
}
.shopify-payment-button__more-options {
margin-top: 8px;
margin-top: 0.5rem;
}
/**
* Related products
*/
.related-products {
@extend .index-module;
/*padding-top: 45px;
padding-top: 2.8125rem;
background: $product-related-products-background;*/
}
.related-products__title {
@extend .index-module__title;
}
.related-products__list {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
/**
* Featured product
*/
.index-module__featured-product {
text-align: left !important;
}
@include av-mq('pocket') {
.product__featured-image {
margin-bottom: 25px;
margin-bottom: 1.5625rem;
}
}
.template-gift-card {
.header {
padding: 75px 0;
padding: 4.6875rem 0;
text-align: center;
}
.main {
margin-top: 0;
}
}
.gift-card__subheader {
margin-bottom: 60px;
margin-bottom: 3.75rem;
padding: 15px 0;
padding: 0.9375rem 0;
font-size: 22px;
font-size: 1.375rem;
font-weight: bolder;
text-transform: uppercase;
text-align: center;
background: $heading-color;
color: $background;
}
.gift-card__details {
margin-top: 30px;
margin-top: 1.875rem;
text-align: center;
}
.gift-card__issued-text {
margin-bottom: 0;
font-size: 30px;
font-size: 1.875rem;
font-weight: lighter;
}
.gift-card__amount {
display: block;
margin-bottom: 35px;
margin-bottom: 2.1875rem;
font-size: 75px;
font-size: 4.6875rem;
font-weight: bolder;
color: $heading-color;
}
.gift-card__code {
display: inline-block;
padding: 8px 20px;
padding: 0.5rem 1.25rem;
font-weight: bolder;
font-size: 26px;
font-size: 1.625rem;
text-align: center;
border: 2px solid $border-color;
/*border-radius: 4px;*/
-webkit-appearance: none; /* Remove the inner box-shadow in iOS devices */
-webkit-border-radius:0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.gift-card__qr-code {
margin: 25px 0;
margin: 1.5625rem 0;
img {
margin: 0 auto;
}
}
.gift-card__actions {
margin-top: 50px;
margin-top: 3.125rem;
.button {
display: block;
margin: 0;
}
.button:first-child {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
}
}
.gift-card__apple-wallet {
display: block;
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.gift-card__footer {
text-align: center;
}
.gift-card__copyright {
margin-top: 50px;
margin-top: 3.125rem;
padding: 40px 0;
padding: 2.5rem 0;
border-top: 1px solid $border-color;
font-size: 13px;
font-size: 0.8125rem;
}
@include av-mq("handheld-and-up") {
.gift-card__actions {
margin-top: 50px;
margin-top: 3.125rem;
.button {
display: inline-block;
}
.button:first-child {
margin-right: 15px;
margin-right: 0.9375rem;
margin-bottom: 0;
}
}
}
@include av-mq("lap-and-up") {
.gift-card__subheader {
font-size: 30px;
font-size: 1.875rem;
}
.gift-card__issued-text {
font-size: 55px;
font-size: 3.4375rem;
}
.gift-card__illustration {
text-align: center;
}
.gift-card__details {
margin-top: 0;
text-align: left;
}
.gift-card__qr-code img {
margin-left: 0;
}
}
.template-password {
.header {
padding: 75px 0;
padding: 4.6875rem 0;
text-align: center;
}
.main {
margin-top: 35px;
margin-top: 2.1875rem;
text-align: center;
}
}
.password__store,
.password__message {
text-transform: uppercase;
font-size: 15px;
font-size: 0.9375rem;
font-weight: bolder;
}
.password__opening {
font-family: 'Give You Glory', 'Arial', 'sans-serif';
font-size: 32px;
font-size: 2rem;
color: $accent-color;
}
.password__register {
input[type="email"] {
font-size: 14px;
font-size: 0.875rem;
}
}
.password__powered-by {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
svg {
height: 25px;
height: 1.5625rem;
vertical-align: middle;
}
}
.password__footer {
margin: 80px 0 50px 0;
margin: 5rem 0 3.125rem 0;
padding-top: 50px;
padding-top: 3.125rem;
border-top: 1px solid $border-color;
font-size: 14px;
font-size: 0.875rem;
font-weight: lighter;
text-align: center;
}
.password__admin-form {
.form__control {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
}
}
@include av-mq("handheld-and-up") {
.password__opening {
font-size: 48px;
font-size: 3rem;
}
}
@include av-mq("handheld-and-up") {
.password__opening {
margin-bottom: 50px;
margin-bottom: 3.125rem;
font-size: 90px;
font-size: 5.625rem;
}
.password__powered-by {
margin: 10px 0 0 0;
margin: 0.625rem 0 0 0;
text-align: left;
}
}
.template-index {
.main,
#shopify-section-footer {
margin-top: 0;
}
}
.index-module {
padding: 20px 0;
padding: 1.25rem 0;
text-align: center;
}
.index-module__title {
font-family: $heading-font-family;
font-weight: $heading-font-weight;
font-style: $heading-font-style;
font-size: 22px;
font-size: 1.375rem;
}
.index-module__rte a {
text-decoration: underline;
text-underline-position: under;
}
.index-module__blog {
.blog__article {
margin-bottom: 20px;
margin-bottom: 1.25rem;
padding: 15px;
padding: 0.9375rem;
background: $background;
border-radius: 4px;
}
.article__image {
max-width: none;
width: calc(100% + 30px);
width: calc(100% + 1.875rem);
margin-left: -15px;
margin-left: -0.9375rem;
}
}
.index-module__newsletter-form {
max-width: 650px;
margin: 25px auto 0 auto;
margin: 1.5625rem auto 0 auto;
input {
border: none;
}
input[type="submit"] {
margin-top: 10px;
margin-top: 0.625rem;
}
}
.index-module__instagram {
.icon-instagram {
display: inline-block;
margin-right: 10px;
margin-right: 0.625rem;
vertical-align: -1px;
}
}
.instagram__overlay {
display: none;
}
.instagram__image-wrapper {
position: relative;
font-size: 0;
background-size: cover;
background-position: center;
}
.instagram__image-wrapper > a {
display: block;
padding-bottom: 100%;
}
.instagram__image--placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.no-touchevents {
.instagram__overlay {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 18px 15px 16px 20px;
padding: 1.125rem 0.9375rem 1rem 1.25rem;
opacity: 0;
background: rgba(0, 0, 0, 0.6);
text-align: left;
transition: opacity 0.25s ease-in-out;
}
.instagram__caption,
.instagram__date {
color: #ffffff;
}
.instagram__caption {
display: block;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0;
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.55;
height: 4.65em; /* Exactly three lines */
}
.instagram__date {
font-size: 14px;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
}
.instagram__image-wrapper:hover {
.instagram__overlay {
opacity: 1;
}
}
&.flexbox {
.instagram__image-wrapper .instagram__overlay {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
}
@include av-mq('handheld-and-up') {
.index-module {
padding: 30px 0 38px 0;
padding: 1.875rem 0 2.375rem 0;
}
.index-module__title {
font-size: 26px;
font-size: 1.625rem;
}
.index-module__featured-content-with-image .rte {
text-align: left;
}
.index-module__blog .blog__article {
height: 100%;
}
.flexbox .index-module__newsletter-form {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
input {
margin-top: 0;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
input[type="email"] {
margin-right: 20px;
margin-right: 1.25rem;
-webkit-flex: 2.5;
-ms-flex: 2.5;
flex: 2.5;
}
}
.index-module__instagram {
display: block;
.icon-instagram {
vertical-align: -3px;
}
}
}
@include av-mq('lap-and-up') {
.index-module {
padding: 36px 0 44px 0;
padding: 2.25rem 0 2.75rem 0;
}
.index-module__title {
font-size: 30px;
font-size: 1.875rem;
}
}
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #fff;
text-shadow: none;
/*border-radius: 4px;*/
-webkit-appearance: none; /* Remove the inner box-shadow in iOS devices */
-webkit-border-radius:0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
/*padding-top: 4% !important;*/
/*padding-bottom: 4% !important;*/
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-type-iframe .fancybox-nav {
width: 7%;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image-container, .fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image-container {
overflow: scroll;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url("{{ 'fancybox_sprite.png' | asset_url }}");
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url("{{ 'fancybox_loading.gif' | asset_url }}") center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url("{{ 'blank.gif' | asset_url }}"); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: -60px;
}
.fancybox-next {
right: -60px;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url("{{ 'fancybox_overlay.png' | asset_url }}");
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
/*border-radius: 15px;*/
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
-webkit-appearance: none; /* Remove the inner box-shadow in iOS devices */
-webkit-border-radius:0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
/**
* This code is used for the Fancybox used in product showcase, to display thumbnails
*/
#product-showcase-links {
position: fixed;
bottom: 10px;
width: 100%;
padding-top: 10px;
list-style: none;
text-align: center;
z-index: 99999;
li {
position: relative;
display: inline-block;
padding: 0 8px;
font-size: 0;
cursor: pointer;
}
li img {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0, 0, 0, 0.15);
transition: background 0.1s ease-in-out;
}
li:hover .overlay {
background: rgba(0, 0, 0, 0);
}
li.active .overlay {
background: rgba(0, 0, 0, 0.4);
}
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url("{{ '[email protected]' | asset_url }}");
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url("{{ '[email protected]' | asset_url }}");
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}
}
.main .container, #gsGroups, .shopify-challenge__container
{
background:#fff;
}
.template-index
{
background:#fff;
}
.featured-brands
{
padding: 60px 0 30px 0;
padding: 3.75rem 0 1.875rem 0;
}
.featured-brands .container
{
max-width: 880px;
padding:0 30px;
}
.featured-brands .container h1
{
font-family: $navigation-font-family;
color: $accent-color;
text-transform: uppercase;
font-size: 22px;
font-size: 1.375rem;
margin-bottom: 16px;
margin-bottom: 1rem;
}
.clear
{
clear:both;
}
.featured-brands-logo
{
vertical-align:middle;
}
.featured-brands-container2
{
max-width: 768px;
margin: 0 auto;
}
.featured-brands-logo.logo1 img
{
max-height:92px;
}
.featured-brands-logo.logo2 img
{
max-height:105px;
}
.featured-brands-logo.logo3 img
{
max-height:100px;
}
.featured-brands-logo.logo4 img
{
max-height:80px;
}
.featured-brands-logo.logo5 img
{
max-height:85px;
}
.featured-brands-logo.logo6 img
{
max-height:75px;
}
.cart-icon-img
{
background: url({{ 'cart_41x29.png' | asset_url }}) left center no-repeat;
width: 41px;
height: 29px;
display: inline-block;
vertical-align: sub;
&:hover {
background: url({{ 'cart-brown_41x29.png' | asset_url }}) left center no-repeat;
}
}
.mobile-cart-icon-img
{
background: url({{ 'cart-brown_41x29.png' | asset_url }}) left center no-repeat;
min-width: 41px;
min-height: 29px;
display: inline-block;
vertical-align: sub;
}
.cart-icon
{
color: $accent-color;
display: inline-block;
&:hover {
color:$text-color;
.cart-icon-img
{
background: url({{ 'cart-brown_41x29.png' | asset_url }}) left center no-repeat;
}
}
}
.cart-icon .cart-item-count
{
padding:0 2px;
}
.social-link
{
font-family: $navigation-font-family;
font-size: 14px;
font-size: 0.875rem;
letter-spacing: 1px;
}
@include av-mq("thumb") {
.inner {
padding: 15px 15px;
padding: 0.9375rem 0.9375rem;
}
.shopify-challenge__container {
padding: 15px 15px;
padding: 0.9375rem 0.9375rem;
}
.footer__logo {
margin:0;
}
.featured-brands {
padding: 25px 0 0 0;
padding: 1.5625rem 0 0 0;
}
.featured-brands .container h1
{
margin-bottom:0;
}
.featured-brands-logo {
margin: 0 auto;
width: 100%;
font-size: 0;
}
.featured-brands-logo img
{
max-height: 50px !important;
}
.label--sold-out {
font-size: 28px;
font-size: 1.75rem;
line-height: 24px;
line-height: 1.5rem;
}
}
@include av-mq("handheld") {
.label--sold-out {
font-size: 32px;
font-size: 2rem;
line-height: 32px;
line-height: 2rem;
}
}
.lecker-heart-full {
background:url({{ 'heart-full.svg' | asset_url }}) left top;
width:25px;
height:22px;
display: inline-block;
margin-right: 6px;
margin-top: 3px;
}
.lecker-heart-half {
background:url({{ 'heart-half.svg' | asset_url }}) left top;
width:25px;
height:22px;
display: inline-block;
margin-right: 6px;
margin-top: 3px;
}
.lecker-heart-empty {
background:url({{ 'heart-empty.svg' | asset_url }}) left top;
width:25px;
height:22px;
display: inline-block;
margin-right: 6px;
}
.lecker-heart-full-small {
background:url({{ 'heart-full-small.svg' | asset_url }}) left top;
width:20px;
height:17px;
display: inline-block;
margin-right: 6px;
margin-top: 3px;
}
.lecker-heart-half-small {
background:url({{ 'heart-half-small.svg' | asset_url }}) left top;
width:20px;
height:17px;
display: inline-block;
margin-right: 6px;
margin-top: 3px;
}
.lecker-heart-empty-small {
background:url({{ 'heart-empty-small.svg' | asset_url }}) left top;
width:20px;
height:17px;
display: inline-block;
margin-right: 6px;
}
.lecker-reviews, .product .product__info .jdgm-prev-badge__text {
color:#C8492C;
padding-left: 0.5em;
text-transform: capitalize;
vertical-align: middle;
font-size: 18px;
cursor: default;
}
.lecker-review-container {
border: none;
padding: 0;
margin: 0;
display: table;
}
.lecker-reviews-bar {
border-top-color: rgb(200, 73, 44);
border-top-style: solid;
border-top-width: 1px;
margin-bottom: 40px;
}
.lecker-review-name {
color:#402B1F;
font-size: 16px;
}
.lecker-review-verified {
margin-left: 10px;
font-size: 14px;
color: $grey-color;
}
.lecker-review-date {
float:right;
color:#402B1F;
font-size: 16px;
}
.lecker-review-subject {
font-size: 15px;
margin-bottom:12px;
color:#C8492C;
}
.lecker-review-text {
color:#402B1F;
font-size: 15px;
}
@include av-mq("thumb") {
.lecker-heart-full {
margin-right: 3px;
}
.lecker-heart-half {
margin-right: 3px;
}
.lecker-heart-empty {
margin-right: 3px;
}
.lecker-reviews
{
font-size: 15px;
padding-left: 0.2em;
}
.popup {
bottom: 3px !important;
}
.lecker-review-verified {
float: right !important;
margin: 0 !important;
font-size: 12px !important;
}
.lecker-review-date {
font-size: 12px !important;
}
.page-navigation {
padding-top: 17% !important;
}
.mobile-page-navigation {
margin-top: -45px !important;
}
.lecker-review-verified {
display: block !important;
float: none !important;
}
.lecker-review-date {
display: block !important;
float: none !important;
}
}
@media only screen and (max-width : 1080px) {
.lecker-heart-full {
background: url({{ 'heart-full-small.svg' | asset_url }}) left top !important;
width: 20px !important;
height: 17px !important;
}
.lecker-heart-half {
background: url({{ 'heart-half-small.svg' | asset_url }}) left top !important;
width: 20px !important;
height: 17px !important;
}
.lecker-heart-empty {
background: url({{ 'heart-empty-small.svg' | asset_url }}) left top !important;
width: 20px !important;
height: 17px !important;
}
}
.customer_forms
{
max-width: 375px;
margin:0;
color: #919191;
input, textarea
{
border-color: lightgray;
padding: 8px 12px;
padding: 0.5rem 0.75rem;
line-height: normal;
}
.form__control, .form__row
{
margin-bottom: 16px;
margin-bottom: 1rem;
}
.form-link
{
font-size: 14px;
font-size: 0.875rem;
}
.form-link a.form-login-link
{
text-decoration: underline;
}
input[type="submit"] {
width: auto;
padding: 8px 30px;
padding: 0.5rem 1.875rem;
}
}
.page-subtitle
{
color: #C8492C;
font-size: 22px;
font-size: 1.375rem;
text-transform: uppercase;
font-family: $navigation-font-family;
}
.rte a.button--primary
{
color:#fff;
&:hover {
color: #fff;
}
}
.press-page
{
color: #919191;
img , .press-item-title
{
margin-bottom:16px;
margin-bottom:1rem;
}
.press-item-title
{
font-size:18px;
font-size:1.125rem;
}
.press-item-desc
{
font-size:14px;
font-size:0.875rem;
}
}
#shopify-section-blog, #shopify-section-article{
color: #919191;
}
.blog-sidebar
{
font-size:15px;
.article__title
{
margin-bottom:20px;
}
& > section {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid #dfdfdf;
}
ol, ul {
margin: 0;
list-style:none;
}
.recent-articles a,
.tags a,
.rss-feed a {
color: $accent-color;
text-transform: uppercase;
&:hover {
color: darken($accent-color, 15%);
}
}
.recent-articles {
li {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
a {
display: block;
font-family: $navigation-font-family;
}
time {
font-size: 13px;
}
}
.rss-feed {
}
.tags {
li {
margin-bottom: 10px;
font-size: 13px;
&:last-child {
padding-bottom: 0;
}
}
}
}
.tin-showcase-page
{
.hide
{
display:none;
}
.tin-showcase-main
{
margin-bottom: 35px;
margin-bottom: 2.1875rem;
img
{
margin-bottom: 25px;
margin-bottom: 1.5625rem;
}
}
}
.tin-showcase-css
{
.fancybox-skin
{
padding:30px !important;
padding:1.875rem !important;
background:#f5f5f5;
}
.fancybox-opened .fancybox-skin {
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.tin-showcase-date, .tin-showcase-inner-text
{
font-family: $navigation-font-family;
color: $text-color;
font-size: 16px;
font-size: 1rem;
font-weight: normal;
letter-spacing: 1px;
}
.tin-showcase-inner-title
{
font-family: $navigation-font-family;
text-transform: uppercase;
letter-spacing: 1px;
color: $accent-color;
margin: 0;
font-size: 25px;
line-height: 25px;
font-size: 1.5625rem;
line-height: 1.5625rem;
}
.tin-showcase-inner-image
{
background:#fff;
padding:20px;
padding:1.25rem;
margin-bottom:16px;
margin-bottom:1rem;
img
{
}
}
}
@include av-mq("thumb") {
.collection__list.grid
{
margin-left: -12.5px;
.grid__cell
{
padding-left: 12.5px;
}
}
/*.product__tabs
{
border:0;
}*/
.product__tabs-content
{
padding-bottom:0;
}
.product__tabs-title li
{
padding:0 1.5%;
width: 33.3%;
}
.product__tabs-title li:first-child{
width: 33.3%;
}
.product__tabs-title li>a {
/* line-height: 17px; */
height:54px;
}
/* .product__tabs-title li:first-child>a{
height: 54px;
line-height: 35px;
} */
.two__tabber .product__tabs-title li
{
width: 50%;
}
.two__tabber .product__tabs-title li:first-child>a{
height: auto;
line-height: 17px;
}
}
p.gs__remove-btn
{
display: block;
text-align: right;
}
.gs__cart-remove
{
background:url("{{ 'remove-icon_28x28.png' | asset_url }}") left center no-repeat;
width:28px;
height:28px;
color: transparent;
display:inline-block;
}
@media screen and (max-width: 670px)
{
.gs__remove-wrapper {
padding-top:0 !important;
}
}
.gs__cart-meta, .cart__meta
{
width:371px;
}
#gs__toggle-box input
{
height: 26px !important;
margin: 0 12px 0 0 !important;
}
#gs__toggle-box label
{
color:$accent-color !important;
font-size: 16px !important;
}
.gs__row .selection.dropdown, .cart__checkout .gs__row textarea, .cart__checkout input.gs__delivery-date
{
border-radius:0 !important;
border-color: $border-color !important;
}
.gs__row .selection.dropdown input
{
border:0 !important;
}
.gs__select, .gs__row select
{
-webkit-appearance: none; /* Remove the inner box-shadow in iOS devices */
-webkit-border-radius:0 !important;
border-radius: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.gs__cart-qty {
height: 45px !important;
line-height: 45px !important;
border: 0 !important;
margin: 0 !important;
}
.gs__row input[type="text"]:focus
{
border-radius:0 !important;
}
.cart__checkout #gsAppContainer,.cart__checkout .gsAppContainer
{
margin-top:0 !important;
}
#gsMessageContainer .gs__fields
{
margin:0;
}
#gsMessageContainer .gs__field
{
padding:0;
}
#gsMessageContainer .gs__wrapper
{
width:100%;
}
input.gs__delivery-date
{
margin:6px 0 0;
}
/*
.cart__checkout
{
width: 325px;
float: right;
}
*/
.form__select:after {
position: absolute;
top: calc(50% - 8px);
top: calc(50% - 0.5rem);
right: 15px;
right: 0.9375rem;
width: 18px;
width: 1.125rem;
height: 18px;
height: 1.125rem;
line-height: normal;
pointer-events: none;
fill: $accent-color;
color:$accent-color;
content: '\25BC';
}
.form__select .icon
{
display:none;
}
/*** REVIEW SECTION CSS **/
.jdgm-all-reviews-widget, .jdgm-rev-widg
{
border:0 !important;
padding: 0 !important;
}
.jdgm-rev-widg__title
{
font-family: $navigation-font-family;
text-transform: uppercase;
border-bottom:1px solid $border-color;
font-size: 22px;
letter-spacing: 1px;
margin-bottom: 16px 0 12px !important;
padding-bottom: 8px;
}
.jdgm-quest, .jdgm-rev
{
border-color:$border-color !important;
}
.jdgm-rev__title
{
color:$accent-color;
font-weight: normal;
margin: 0px 0 4px !important;
font-size: 15px !important;
}
.jdgm-rev__body>p
{
font-size: 15px;
font-weight: normal;
}
.jdgm-star.jdgm--on:before{
content:none !important;
}
.jdgm-star.jdgm--on
{
background:url("{{ 'heart-full-small.svg' | asset_url }}") left center no-repeat;
width: 20px;
height: 17px;
display: inline-block !important;
margin-right: 3px !important;
margin-top: 3px !important;
}
.jdgm-star.jdgm--off:before{
content:none !important;
}
.jdgm-star.jdgm--off
{
background:url("{{ 'heart-empty-small.svg' | asset_url }}") left center no-repeat;
width: 20px;
height: 17px;
display: inline-block !important;
margin-right: 3px !important;
margin-top: 3px !important;
}
.jdgm-star.jdgm--half:before{
content:none !important;
}
.jdgm-star.jdgm--half
{
background:url("{{ 'heart-half-small.svg' | asset_url }}") left center no-repeat;
width: 20px;
height: 17px;
display: inline-block !important;
margin-right: 3px !important;
margin-top: 3px !important;
}
.jdgm-rev__icon
{
display:none;
}
.jdgm-rev__author
{
letter-spacing: 1px;
font-weight: normal;
font-size: 15px;
}
.jdgm-rev__timestamp
{
letter-spacing: 1px;
font-weight: normal;
font-size: 15px;
opacity: 1 !important;
float: right;
}
.jdgm-prev-badge__text {
position: relative;
bottom: 3px;
font-weight: normal;
}
.product .product__info .jdgm-prev-badge__stars
{
.jdgm-star.jdgm--on
{
background:url("{{ 'heart-full.svg' | asset_url }}") left center no-repeat;
width: 25px;
height: 22px;
display: inline-block !important;
margin-right: 6px !important;
margin-top: 3px !important;
}
}
.product .product__info .jdgm-prev-badge__stars
{
.jdgm-star.jdgm--off
{
background:url("{{ 'heart-empty.svg' | asset_url }}") left center no-repeat;
width: 25px;
height: 22px;
display: inline-block !important;
margin-right: 6px !important;
margin-top: 3px !important;
}
}
.product .product__info .jdgm-prev-badge__stars
{
.jdgm-star.jdgm--half
{
background:url("{{ 'heart-half.svg' | asset_url }}") left center no-repeat;
width: 25px;
height: 22px;
display: inline-block !important;
margin-right: 6px !important;
margin-top: 3px !important;
}
}
.jdgm-widget label.error {
font-size: 13px;
padding: 5px;
color: #fff;
background: $accent-color !important;
}
.jdgm-rev-widg__summary-text
{
font-size:15px;
}
.jdgm-review-widget .jdgm-paginate__page.jdgm-curt
{
font-size: inherit;
}
.popup {
position: relative;
display: inline-block;
user-select: none;
bottom: 5px;
}
.popup img
{
vertical-align: middle;
margin-left:5px;
width:16px;
height:16px;
}
/* The actual popup */
.popup .popuptext {
display: none;
width: 298px;
background-color: #fff;
color: #9191a9;
text-align: center;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 40%;
margin-left: -80px;
font-size: 12px;
border: 1px solid #C8492C;
padding: 10px 10px 10px 10px;
text-transform: none;
text-align: justify;
}
.shopify-challenge__container .shopify-challenge__button
{
width:330px;
display: block;
}
input, select, textarea {
-webkit-appearance: none; /* Remove the inner box-shadow in iOS devices */
-webkit-border-radius:0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
@include av-mq("thumb") {
.popup .popuptext
{
width:100%;
}
}
/* RESPONSIVE TABLE CODE */
@media all and (max-width:500px){
table#home{
width:100%;
}
.responsive-table thead {
display: none
}
.responsive-table tr {
display: block;
}
.responsive-table tr,.responsive-table td {
float: left;
clear: both;
width: 100%;
background-color:#f7f7f7; // remove this line if you don't want a background color on mobile
border-bottom: 1px solid white; // remove this line as well if you don't want a background color on mobile
}
.responsive-table th,.responsive-table td {
display: block;
text-align: right;
padding: 15px;
margin: 0;
}
.responsive-table td::before {
content: attr(data-label);
float: left;
text-align: center;
padding-right: 10px;
font-weight: 400;
}
.responsive-table-row+.responsive-table-row,tfoot>.responsive-table-row:first-child {
position: relative;
margin-top: 10px;
padding-top: 15px
}
.responsive-table-row+.responsive-table-row::after,tfoot>.responsive-table-row:first-child::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 15px;
right: 15px
}
}
/*========================= */
/* Custom Css on 24-09-2021 */
/*========================= */
@media screen and (min-width: 1150px){
.header__wrapper--right .header__logo {
display: inline-block;
text-align: left;
width: 36%;
}
}
@media (min-width:768px){
.header__logo-image{
width:100%;
max-width:415px !important;
}
.header__logo-image {
margin-left: -84px;
}
}
/*========================= */
/* Custom Css on 23-10-2021 */
/*========================= */
@media screen and (max-width: 499px){
.product__tabs-title li>a
{
display:flex;
margin:auto;
align-items:center;
justify-content:center;
}
}
@media screen and (max-width: 499px){
.two__tabber .product__tabs-title li>a {
height: auto;
line-height: 17px;
display: flex;
justify-content: center;
}
}
/*========================= */
/* Custom Css on 25-08-2022 */
/* Bulk discount table to use font from site */
/*========================= */
table.adp-discount-table {
font-family: $text-font-family !important;
}
.adp-discount-tiers > h4 {
font-family: $text-font-family !important;
}
$common-cart-font-size: 25px; /* Same as the price */
.leckerlee-red {
color: #c8492c;
}
/* Cart customizations */
.cart-attribute__field {
.big-bold {
font-weight: bold;
font-size: $common-cart-font-size;
letter-spacing: 1px;
text-transform: uppercase;
min-width: 150px;
}
font-family: $navigation-font-family;
}
.cart-input-container {
padding-left: 2vw;
}
.toggle-input-container {
padding-bottom: 4vh;
}
.toggle-caption {
padding-bottom: 1vh;
}
.toggle-display {
padding-bottom: 1rem;
}
.cart-input-label {
text-transform: uppercase;
font-family: $navigation-font-family;
}
.cart-attribute__field.toggled {
display: flex;
align-items: end;
}
.franklin-font {
/* font-family: 'franklin-gothic-urw-comp'; */
font-family: 'Franklin Gothic';
}
p.cart__total {
margin-bottom: 5px;
}
.cart__total-text {
font-size: $common-cart-font-size;
}
.cart__total-amount {
font-size: $common-cart-font-size;
/* font-family: 'franklin-gothic-urw-comp'; */
font-family: $navigation-font-family;
padding-left: 0px;
}
table.cart__table--desktop{
border-bottom: 1px solid #c8492c;
}
/* Toggle2 */
.toggle-button-cover {
display: table-cell;
position: relative;
width: 200px;
height: 140px;
box-sizing: border-box;
}
.button-cover {
height: 100px;
margin: 20px;
background-color: #fff;
box-shadow: 0 10px 20px -8px #c5d6d6;
border-radius: 4px;
}
.button-cover:before {
counter-increment: button-counter;
content: counter(button-counter);
position: absolute;
right: 0;
bottom: 0;
color: #d7e3e3;
font-size: 12px;
line-height: 1;
padding: 5px;
}
.button-cover,
.knobs,
.layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.button-toggle {
position: relative;
top: 50%;
width: 74px;
height: 36px;
margin: -20px auto 0 auto;
overflow: hidden;
}
.button-toggle.r,
.button-toggle.r .layer {
border-radius: 100px;
}
.button-toggle.b2 {
border-radius: 2px;
}
.toggle-checkbox {
position: relative;
width: 100% !important;
height: 100% !important;
padding: 0;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 3;
}
.knobs {
z-index: 2;
}
.layer {
width: 100%;
background-color: #c8492c;
transition: 0.3s ease all;
z-index: 1;
}
/* Button 1 */
#button-1 .knobs:before {
content: "NO";
position: absolute;
top: 2px;
left: 4px;
width: 30px;
height: 30px;
color: #c8492c;
font-size: 15px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 9px 4px;
background-color: #fff;
border-radius: 50%;
transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
#button-1 .toggle-checkbox:checked + .knobs:before {
content: "YES";
left: 40px;
background-color: #fff;
}
#button-1 .toggle-checkbox:unchecked ~ .layer {
background-color: #fcebeb;
}
#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer {
transition: 0.3s ease all;
}
/* End Toggle 2 */
.custom-cart-container {
background: #F6F6F6;
margin: 0;
padding: 20px 10px 0 10px;
}
.no-margin {
margin: 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment