@charset "UTF-8";
/*============================================================================
Haravan Timber
Copyright 2016 Haravan Inc.
Author Carson Shold @cshold
Built with Sass - http://sass-lang.com/

Some things to know about this file:
- Sass is compiled on Haravan's server so you don't need to convert it to CSS yourself
- The output CSS is compressed and comments are removed
- You cannot use @imports in this file
* Use grunt or gulp tasks to enable @imports - https://github.com/Haravan/haravan-css-import
- Helpers variables, mixins, and starter classes are provided. Change as needed.
- The file is prepped with a CSS reset
- The font icons are prepared using https://icomoon.io/app
==============================================================================*/
/*============================================================================
Table of Contents

#Breakpoint and Grid Variables
#General Variables
#Sass Mixins
#Normalize
#Grid Setup
#Basic Styles
#Helper Classes
#Typography
#Rich Text Editor
#Links and Buttons
#Lists
#Tables
#Reponsive Tables
#OOCSS Media Object
#Images and Iframes
#Forms
#Icons
#Pagination
#Site Header
#Site Nav and Dropdowns
#Mobile Nav
#Drawers
#Site Footer
#Product and Collection Grids
#Collection Filters
#Breadcrumbs
#Product Page
#Notes and Form Feedback
#Cart Page
#Ajax Cart Styles
==============================================================================*/
/*============================================================================
#Breakpoint and Grid Variables
==============================================================================*/
/*================ The following are dependencies of csswizardry grid ================*/
/*============================================================================
#General Variables
==============================================================================*/
/*================ Typography ================*/
@font-face {
  font-family: 'OpenSans-Regular';
  src: url("//cdn.hstatic.net/themes/1000352324/1001422221/14/OpenSans-Regular.eot?v=960?#iefix") format("embedded-opentype"), url("//cdn.hstatic.net/themes/1000352324/1001422221/14/OpenSans-Regular.woff?v=960") format("woff"), url("//cdn.hstatic.net/themes/1000352324/1001422221/14/OpenSans-Regular.ttf?v=960") format("truetype"), url("//cdn.hstatic.net/themes/1000352324/1001422221/14/OpenSans-Regular.svg?v=960#OpenSans-Regular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'OpenSans-ExtraBold';
  src: url("//cdn.hstatic.net/themes/1000352324/1001422221/14/OpenSans-ExtraBold.eot?v=960?#iefix") format("embedded-opentype"), url("//cdn.hstatic.net/themes/1000352324/1001422221/14/OpenSans-ExtraBold.woff?v=960") format("woff"), url("//cdn.hstatic.net/themes/1000352324/1001422221/14/OpenSans-ExtraBold.ttf?v=960") format("truetype"), url("//cdn.hstatic.net/themes/1000352324/1001422221/14/OpenSans-ExtraBold.svg?v=960#OpenSans-ExtraBold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'icons';
  src: url("//cdn.hstatic.net/themes/1000352324/1001422221/14/icons.eot?v=960");
  src: url("//cdn.hstatic.net/themes/1000352324/1001422221/14/icons.eot?v=960#iefix") format("embedded-opentype"), url("//cdn.hstatic.net/themes/1000352324/1001422221/14/icons.woff?v=960") format("woff"), url("//cdn.hstatic.net/themes/1000352324/1001422221/14/icons.ttf?v=960") format("truetype"), url("//cdn.hstatic.net/themes/1000352324/1001422221/14/icons.svg?v=960#timber-icons") format("svg");
  font-weight: normal;
  font-style: normal; }

/*============================================================================
#Sass Mixins
==============================================================================*/
.clearfix {
  *zoom: 1; }
  .clearfix:after {
    content: '';
    display: table;
    clear: both; }

/*============================================================================
Prefixer mixin for generating vendor prefixes:
- Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
- Usage:

// Input:
.element {
@include prefixer(transform, scale(1), ms webkit spec);
}

// Output:
.element {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
==============================================================================*/
/*============================================================================
Layer promotion mixin for creating smoother animations with higher FPS.
==============================================================================*/
/*============================================================================
Dependency-free breakpoint mixin
- Based on http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
- Usage docs: http://haravan.github.io/Timber/#sass-mixins
==============================================================================*/
/*============================================================================
#Normalize
==============================================================================*/
*, input, :before, :after {
  box-sizing: border-box; }

html, body {
  padding: 0;
  margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/*============================================================================
#Grid Setup
- Based on csswizardry grid, but with floated columns, a fixed gutter size, and BEM classes
- Breakpoints defined above, under #Breakpoint and Grid Variables
- Note the inclusion of .grid-uniform to take care of clearfixes on evenly sized grid items
==============================================================================*/
/* Force clearfix on grids */
.grid, .grid--rev, .grid--full,
.grid-uniform {
  *zoom: 1; }
  .grid:after, .grid--rev:after, .grid--full:after,
  .grid-uniform:after {
    content: '';
    display: table;
    clear: both; }

/* Manual grid__item clearfix */
.grid__item.clear {
  clear: both; }

/*============================================================================
Drop relative positioning into silent classes which can't take advantage of
the `[class*="push--"]` and `[class*="pull--"]` selectors.
==============================================================================*/
/*============================================================================
Grid Setup
1. Allow the grid system to be used on lists.
2. Remove any margins and paddings that might affect the grid system.
3. Apply a negative `margin-left` to negate the columns' gutters.
==============================================================================*/
.grid, .grid--rev, .grid--full,
.grid-uniform {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -30px; }

.grid__item {
  box-sizing: border-box;
  float: left;
  min-height: 1px;
  padding-left: 30px;
  vertical-align: top;
  width: 100%; }

/*============================================================================
Reversed grids allow you to structure your source in the opposite
order to how your rendered layout will appear.
==============================================================================*/
.grid--rev {
  direction: rtl;
  text-align: left; }
  .grid--rev > .grid__item {
    direction: ltr;
    text-align: left;
    float: right; }

/* Gutterless grids have all the properties of regular grids, minus any spacing. */
.grid--full {
  margin-left: 0; }
  .grid--full > .grid__item {
    padding-left: 0; }

/*============================================================================
WIDTHS
- Create width classes, prefixed by the specified namespace.
==============================================================================*/
/*================ Clearfix helper on uniform grids ================*/
/*================ Helper show/hide classes around our breakpoints ================*/
/*================ Our regular, non-responsive width and helper classes ================*/
/** Whole */
.one-whole {
  width: 100%; }

/* Halves */
.one-half {
  width: 50%; }

/* Thirds */
.one-third {
  width: 33.333%; }

.two-thirds {
  width: 66.666%; }

/* Quarters */
.one-quarter {
  width: 25%; }

.two-quarters {
  width: 50%; }

.three-quarters {
  width: 75%; }

/* Fifths */
.one-fifth {
  width: 20%; }

.two-fifths {
  width: 40%; }

.three-fifths {
  width: 60%; }

.four-fifths {
  width: 80%; }

/* Sixths */
.one-sixth {
  width: 16.666%; }

.two-sixths {
  width: 33.333%; }

.three-sixths {
  width: 50%; }

.four-sixths {
  width: 66.666%; }

.five-sixths {
  width: 83.333%; }

/* Eighths */
.one-eighth {
  width: 12.5%; }

.two-eighths {
  width: 25%; }

.three-eighths {
  width: 37.5%; }

.four-eighths {
  width: 50%; }

.five-eighths {
  width: 62.5%; }

.six-eighths {
  width: 75%; }

.seven-eighths {
  width: 87.5%; }

/* Tenths */
.one-tenth {
  width: 10%; }

.two-tenths {
  width: 20%; }

.three-tenths {
  width: 30%; }

.four-tenths {
  width: 40%; }

.five-tenths {
  width: 50%; }

.six-tenths {
  width: 60%; }

.seven-tenths {
  width: 70%; }

.eight-tenths {
  width: 80%; }

.nine-tenths {
  width: 90%; }

/* Twelfths */
.one-twelfth {
  width: 8.333%; }

.two-twelfths {
  width: 16.666%; }

.three-twelfths {
  width: 25%; }

.four-twelfths {
  width: 33.333%; }

.five-twelfths {
  width: 41.666%; }

.six-twelfths {
  width: 50%; }

.seven-twelfths {
  width: 58.333%; }

.eight-twelfths {
  width: 66.666%; }

.nine-twelfths {
  width: 75%; }

.ten-twelfths {
  width: 83.333%; }

.eleven-twelfths {
  width: 91.666%; }

.show {
  display: block !important; }

.hide {
  display: none !important; }

.text-left {
  text-align: left !important; }

.text-right {
  text-align: right !important; }

.text-center {
  text-align: center !important; }

.left {
  float: left !important; }

.right {
  float: right !important; }

/*================ Our responsive classes, if we have enabled them ================*/
@media only screen and (max-width: 480px) {
  /** Whole */
  .small--one-whole {
    width: 100%; }
  /* Halves */
  .small--one-half {
    width: 50%; }
  /* Thirds */
  .small--one-third {
    width: 33.333%; }
  .small--two-thirds {
    width: 66.666%; }
  /* Quarters */
  .small--one-quarter {
    width: 25%; }
  .small--two-quarters {
    width: 50%; }
  .small--three-quarters {
    width: 75%; }
  /* Fifths */
  .small--one-fifth {
    width: 20%; }
  .small--two-fifths {
    width: 40%; }
  .small--three-fifths {
    width: 60%; }
  .small--four-fifths {
    width: 80%; }
  /* Sixths */
  .small--one-sixth {
    width: 16.666%; }
  .small--two-sixths {
    width: 33.333%; }
  .small--three-sixths {
    width: 50%; }
  .small--four-sixths {
    width: 66.666%; }
  .small--five-sixths {
    width: 83.333%; }
  /* Eighths */
  .small--one-eighth {
    width: 12.5%; }
  .small--two-eighths {
    width: 25%; }
  .small--three-eighths {
    width: 37.5%; }
  .small--four-eighths {
    width: 50%; }
  .small--five-eighths {
    width: 62.5%; }
  .small--six-eighths {
    width: 75%; }
  .small--seven-eighths {
    width: 87.5%; }
  /* Tenths */
  .small--one-tenth {
    width: 10%; }
  .small--two-tenths {
    width: 20%; }
  .small--three-tenths {
    width: 30%; }
  .small--four-tenths {
    width: 40%; }
  .small--five-tenths {
    width: 50%; }
  .small--six-tenths {
    width: 60%; }
  .small--seven-tenths {
    width: 70%; }
  .small--eight-tenths {
    width: 80%; }
  .small--nine-tenths {
    width: 90%; }
  /* Twelfths */
  .small--one-twelfth {
    width: 8.333%; }
  .small--two-twelfths {
    width: 16.666%; }
  .small--three-twelfths {
    width: 25%; }
  .small--four-twelfths {
    width: 33.333%; }
  .small--five-twelfths {
    width: 41.666%; }
  .small--six-twelfths {
    width: 50%; }
  .small--seven-twelfths {
    width: 58.333%; }
  .small--eight-twelfths {
    width: 66.666%; }
  .small--nine-twelfths {
    width: 75%; }
  .small--ten-twelfths {
    width: 83.333%; }
  .small--eleven-twelfths {
    width: 91.666%; }
  .small--show {
    display: block !important; }
  .small--hide {
    display: none !important; }
  .small--text-left {
    text-align: left !important; }
  .small--text-right {
    text-align: right !important; }
  .small--text-center {
    text-align: center !important; }
  .small--left {
    float: left !important; }
  .small--right {
    float: right !important; }
  .grid-uniform .small--one-half:nth-child(2n+1),
  .grid-uniform .small--one-third:nth-child(3n+1),
  .grid-uniform .small--one-quarter:nth-child(4n+1),
  .grid-uniform .small--one-fifth:nth-child(5n+1),
  .grid-uniform .small--one-sixth:nth-child(6n+1),
  .grid-uniform .small--two-sixths:nth-child(3n+1),
  .grid-uniform .small--three-sixths:nth-child(2n+1),
  .grid-uniform .small--two-eighths:nth-child(4n+1),
  .grid-uniform .small--four-eighths:nth-child(2n+1),
  .grid-uniform .small--five-tenths:nth-child(2n+1),
  .grid-uniform .small--one-twelfth:nth-child(12n+1),
  .grid-uniform .small--two-twelfths:nth-child(6n+1),
  .grid-uniform .small--three-twelfths:nth-child(4n+1),
  .grid-uniform .small--four-twelfths:nth-child(3n+1),
  .grid-uniform .small--six-twelfths:nth-child(2n+1) {
    clear: both; } }

@media only screen and (min-width: 481px) and (max-width: 768px) {
  /** Whole */
  .medium--one-whole {
    width: 100%; }
  /* Halves */
  .medium--one-half {
    width: 50%; }
  /* Thirds */
  .medium--one-third {
    width: 33.333%; }
  .medium--two-thirds {
    width: 66.666%; }
  /* Quarters */
  .medium--one-quarter {
    width: 25%; }
  .medium--two-quarters {
    width: 50%; }
  .medium--three-quarters {
    width: 75%; }
  /* Fifths */
  .medium--one-fifth {
    width: 20%; }
  .medium--two-fifths {
    width: 40%; }
  .medium--three-fifths {
    width: 60%; }
  .medium--four-fifths {
    width: 80%; }
  /* Sixths */
  .medium--one-sixth {
    width: 16.666%; }
  .medium--two-sixths {
    width: 33.333%; }
  .medium--three-sixths {
    width: 50%; }
  .medium--four-sixths {
    width: 66.666%; }
  .medium--five-sixths {
    width: 83.333%; }
  /* Eighths */
  .medium--one-eighth {
    width: 12.5%; }
  .medium--two-eighths {
    width: 25%; }
  .medium--three-eighths {
    width: 37.5%; }
  .medium--four-eighths {
    width: 50%; }
  .medium--five-eighths {
    width: 62.5%; }
  .medium--six-eighths {
    width: 75%; }
  .medium--seven-eighths {
    width: 87.5%; }
  /* Tenths */
  .medium--one-tenth {
    width: 10%; }
  .medium--two-tenths {
    width: 20%; }
  .medium--three-tenths {
    width: 30%; }
  .medium--four-tenths {
    width: 40%; }
  .medium--five-tenths {
    width: 50%; }
  .medium--six-tenths {
    width: 60%; }
  .medium--seven-tenths {
    width: 70%; }
  .medium--eight-tenths {
    width: 80%; }
  .medium--nine-tenths {
    width: 90%; }
  /* Twelfths */
  .medium--one-twelfth {
    width: 8.333%; }
  .medium--two-twelfths {
    width: 16.666%; }
  .medium--three-twelfths {
    width: 25%; }
  .medium--four-twelfths {
    width: 33.333%; }
  .medium--five-twelfths {
    width: 41.666%; }
  .medium--six-twelfths {
    width: 50%; }
  .medium--seven-twelfths {
    width: 58.333%; }
  .medium--eight-twelfths {
    width: 66.666%; }
  .medium--nine-twelfths {
    width: 75%; }
  .medium--ten-twelfths {
    width: 83.333%; }
  .medium--eleven-twelfths {
    width: 91.666%; }
  .medium--show {
    display: block !important; }
  .medium--hide {
    display: none !important; }
  .medium--text-left {
    text-align: left !important; }
  .medium--text-right {
    text-align: right !important; }
  .medium--text-center {
    text-align: center !important; }
  .medium--left {
    float: left !important; }
  .medium--right {
    float: right !important; }
  .grid-uniform .medium--one-half:nth-child(2n+1),
  .grid-uniform .medium--one-third:nth-child(3n+1),
  .grid-uniform .medium--one-quarter:nth-child(4n+1),
  .grid-uniform .medium--one-fifth:nth-child(5n+1),
  .grid-uniform .medium--one-sixth:nth-child(6n+1),
  .grid-uniform .medium--two-sixths:nth-child(3n+1),
  .grid-uniform .medium--three-sixths:nth-child(2n+1),
  .grid-uniform .medium--two-eighths:nth-child(4n+1),
  .grid-uniform .medium--four-eighths:nth-child(2n+1),
  .grid-uniform .medium--five-tenths:nth-child(2n+1),
  .grid-uniform .medium--one-twelfth:nth-child(12n+1),
  .grid-uniform .medium--two-twelfths:nth-child(6n+1),
  .grid-uniform .medium--three-twelfths:nth-child(4n+1),
  .grid-uniform .medium--four-twelfths:nth-child(3n+1),
  .grid-uniform .medium--six-twelfths:nth-child(2n+1) {
    clear: both; } }

@media only screen and (max-width: 768px) {
  /** Whole */
  .medium-down--one-whole {
    width: 100%; }
  /* Halves */
  .medium-down--one-half {
    width: 50%; }
  /* Thirds */
  .medium-down--one-third {
    width: 33.333%; }
  .medium-down--two-thirds {
    width: 66.666%; }
  /* Quarters */
  .medium-down--one-quarter {
    width: 25%; }
  .medium-down--two-quarters {
    width: 50%; }
  .medium-down--three-quarters {
    width: 75%; }
  /* Fifths */
  .medium-down--one-fifth {
    width: 20%; }
  .medium-down--two-fifths {
    width: 40%; }
  .medium-down--three-fifths {
    width: 60%; }
  .medium-down--four-fifths {
    width: 80%; }
  /* Sixths */
  .medium-down--one-sixth {
    width: 16.666%; }
  .medium-down--two-sixths {
    width: 33.333%; }
  .medium-down--three-sixths {
    width: 50%; }
  .medium-down--four-sixths {
    width: 66.666%; }
  .medium-down--five-sixths {
    width: 83.333%; }
  /* Eighths */
  .medium-down--one-eighth {
    width: 12.5%; }
  .medium-down--two-eighths {
    width: 25%; }
  .medium-down--three-eighths {
    width: 37.5%; }
  .medium-down--four-eighths {
    width: 50%; }
  .medium-down--five-eighths {
    width: 62.5%; }
  .medium-down--six-eighths {
    width: 75%; }
  .medium-down--seven-eighths {
    width: 87.5%; }
  /* Tenths */
  .medium-down--one-tenth {
    width: 10%; }
  .medium-down--two-tenths {
    width: 20%; }
  .medium-down--three-tenths {
    width: 30%; }
  .medium-down--four-tenths {
    width: 40%; }
  .medium-down--five-tenths {
    width: 50%; }
  .medium-down--six-tenths {
    width: 60%; }
  .medium-down--seven-tenths {
    width: 70%; }
  .medium-down--eight-tenths {
    width: 80%; }
  .medium-down--nine-tenths {
    width: 90%; }
  /* Twelfths */
  .medium-down--one-twelfth {
    width: 8.333%; }
  .medium-down--two-twelfths {
    width: 16.666%; }
  .medium-down--three-twelfths {
    width: 25%; }
  .medium-down--four-twelfths {
    width: 33.333%; }
  .medium-down--five-twelfths {
    width: 41.666%; }
  .medium-down--six-twelfths {
    width: 50%; }
  .medium-down--seven-twelfths {
    width: 58.333%; }
  .medium-down--eight-twelfths {
    width: 66.666%; }
  .medium-down--nine-twelfths {
    width: 75%; }
  .medium-down--ten-twelfths {
    width: 83.333%; }
  .medium-down--eleven-twelfths {
    width: 91.666%; }
  .medium-down--show {
    display: block !important; }
  .medium-down--hide {
    display: none !important; }
  .medium-down--text-left {
    text-align: left !important; }
  .medium-down--text-right {
    text-align: right !important; }
  .medium-down--text-center {
    text-align: center !important; }
  .medium-down--left {
    float: left !important; }
  .medium-down--right {
    float: right !important; }
  .grid-uniform .medium-down--one-half:nth-child(2n+1),
  .grid-uniform .medium-down--one-third:nth-child(3n+1),
  .grid-uniform .medium-down--one-quarter:nth-child(4n+1),
  .grid-uniform .medium-down--one-fifth:nth-child(5n+1),
  .grid-uniform .medium-down--one-sixth:nth-child(6n+1),
  .grid-uniform .medium-down--two-sixths:nth-child(3n+1),
  .grid-uniform .medium-down--three-sixths:nth-child(2n+1),
  .grid-uniform .medium-down--two-eighths:nth-child(4n+1),
  .grid-uniform .medium-down--four-eighths:nth-child(2n+1),
  .grid-uniform .medium-down--five-tenths:nth-child(2n+1),
  .grid-uniform .medium-down--one-twelfth:nth-child(12n+1),
  .grid-uniform .medium-down--two-twelfths:nth-child(6n+1),
  .grid-uniform .medium-down--three-twelfths:nth-child(4n+1),
  .grid-uniform .medium-down--four-twelfths:nth-child(3n+1),
  .grid-uniform .medium-down--six-twelfths:nth-child(2n+1) {
    clear: both; } }

@media only screen and (min-width: 769px) {
  /** Whole */
  .large--one-whole {
    width: 100%; }
  /* Halves */
  .large--one-half {
    width: 50%; }
  /* Thirds */
  .large--one-third {
    width: 33.333%; }
  .large--two-thirds {
    width: 66.666%; }
  /* Quarters */
  .large--one-quarter {
    width: 25%; }
  .large--two-quarters {
    width: 50%; }
  .large--three-quarters {
    width: 75%; }
  /* Fifths */
  .large--one-fifth {
    width: 20%; }
  .large--two-fifths {
    width: 40%; }
  .large--three-fifths {
    width: 60%; }
  .large--four-fifths {
    width: 80%; }
  /* Sixths */
  .large--one-sixth {
    width: 16.666%; }
  .large--two-sixths {
    width: 33.333%; }
  .large--three-sixths {
    width: 50%; }
  .large--four-sixths {
    width: 66.666%; }
  .large--five-sixths {
    width: 83.333%; }
  /* Eighths */
  .large--one-eighth {
    width: 12.5%; }
  .large--two-eighths {
    width: 25%; }
  .large--three-eighths {
    width: 37.5%; }
  .large--four-eighths {
    width: 50%; }
  .large--five-eighths {
    width: 62.5%; }
  .large--six-eighths {
    width: 75%; }
  .large--seven-eighths {
    width: 87.5%; }
  /* Tenths */
  .large--one-tenth {
    width: 10%; }
  .large--two-tenths {
    width: 20%; }
  .large--three-tenths {
    width: 30%; }
  .large--four-tenths {
    width: 40%; }
  .large--five-tenths {
    width: 50%; }
  .large--six-tenths {
    width: 60%; }
  .large--seven-tenths {
    width: 70%; }
  .large--eight-tenths {
    width: 80%; }
  .large--nine-tenths {
    width: 90%; }
  /* Twelfths */
  .large--one-twelfth {
    width: 8.333%; }
  .large--two-twelfths {
    width: 16.666%; }
  .large--three-twelfths {
    width: 25%; }
  .large--four-twelfths {
    width: 33.333%; }
  .large--five-twelfths {
    width: 41.666%; }
  .large--six-twelfths {
    width: 50%; }
  .large--seven-twelfths {
    width: 58.333%; }
  .large--eight-twelfths {
    width: 66.666%; }
  .large--nine-twelfths {
    width: 75%; }
  .large--ten-twelfths {
    width: 83.333%; }
  .large--eleven-twelfths {
    width: 91.666%; }
  .large--show {
    display: block !important; }
  .large--hide {
    display: none !important; }
  .large--text-left {
    text-align: left !important; }
  .large--text-right {
    text-align: right !important; }
  .large--text-center {
    text-align: center !important; }
  .large--left {
    float: left !important; }
  .large--right {
    float: right !important; }
  .grid-uniform .large--one-half:nth-child(2n+1),
  .grid-uniform .large--one-third:nth-child(3n+1),
  .grid-uniform .large--one-quarter:nth-child(4n+1),
  .grid-uniform .large--one-fifth:nth-child(5n+1),
  .grid-uniform .large--one-sixth:nth-child(6n+1),
  .grid-uniform .large--two-sixths:nth-child(3n+1),
  .grid-uniform .large--three-sixths:nth-child(2n+1),
  .grid-uniform .large--two-eighths:nth-child(4n+1),
  .grid-uniform .large--four-eighths:nth-child(2n+1),
  .grid-uniform .large--five-tenths:nth-child(2n+1),
  .grid-uniform .large--one-twelfth:nth-child(12n+1),
  .grid-uniform .large--two-twelfths:nth-child(6n+1),
  .grid-uniform .large--three-twelfths:nth-child(4n+1),
  .grid-uniform .large--four-twelfths:nth-child(3n+1),
  .grid-uniform .large--six-twelfths:nth-child(2n+1) {
    clear: both; } }

/*============================================================================
PUSH
- Push classes, to move grid items over to the right by certain amounts
==============================================================================*/
[class*="push--"] {
  position: relative; }

/* Whole */
.push--one-whole {
  left: 100%; }

/* Halves */
.push--one-half {
  left: 50%; }

/* Thirds */
.push--one-third {
  left: 33.333%; }

.push--two-thirds {
  left: 66.666%; }

/* Quarters */
.push--one-quarter {
  left: 25%; }

.push--two-quarters {
  left: 50%; }

.push--three-quarters {
  left: 75%; }

/* Fifths */
.push--one-fifth {
  left: 20%; }

.push--two-fifths {
  left: 40%; }

.push--three-fifths {
  left: 60%; }

.push--four-fifths {
  left: 80%; }

/* Sixths */
.push--one-sixth {
  left: 16.666%; }

.push--two-sixths {
  left: 33.333%; }

.push--three-sixths {
  left: 50%; }

.push--four-sixths {
  left: 66.666%; }

.push--five-sixths {
  left: 83.333%; }

/* Eighths */
.push--one-eighth {
  left: 12.5%; }

.push--two-eighths {
  left: 25%; }

.push--three-eighths {
  left: 37.5%; }

.push--four-eighths {
  left: 50%; }

.push--five-eighths {
  left: 62.5%; }

.push--six-eighths {
  left: 75%; }

.push--seven-eighths {
  left: 87.5%; }

/* Tenths */
.push--one-tenth {
  left: 10%; }

.push--two-tenths {
  left: 20%; }

.push--three-tenths {
  left: 30%; }

.push--four-tenths {
  left: 40%; }

.push--five-tenths {
  left: 50%; }

.push--six-tenths {
  left: 60%; }

.push--seven-tenths {
  left: 70%; }

.push--eight-tenths {
  left: 80%; }

.push--nine-tenths {
  left: 90%; }

/* Twelfths */
.push--one-twelfth {
  left: 8.333%; }

.push--two-twelfths {
  left: 16.666%; }

.push--three-twelfths {
  left: 25%; }

.push--four-twelfths {
  left: 33.333%; }

.push--five-twelfths {
  left: 41.666%; }

.push--six-twelfths {
  left: 50%; }

.push--seven-twelfths {
  left: 58.333%; }

.push--eight-twelfths {
  left: 66.666%; }

.push--nine-twelfths {
  left: 75%; }

.push--ten-twelfths {
  left: 83.333%; }

.push--eleven-twelfths {
  left: 91.666%; }

@media only screen and (min-width: 481px) and (max-width: 768px) {
  /* Whole */
  .push--medium--one-whole {
    left: 100%; }
  /* Halves */
  .push--medium--one-half {
    left: 50%; }
  /* Thirds */
  .push--medium--one-third {
    left: 33.333%; }
  .push--medium--two-thirds {
    left: 66.666%; }
  /* Quarters */
  .push--medium--one-quarter {
    left: 25%; }
  .push--medium--two-quarters {
    left: 50%; }
  .push--medium--three-quarters {
    left: 75%; }
  /* Fifths */
  .push--medium--one-fifth {
    left: 20%; }
  .push--medium--two-fifths {
    left: 40%; }
  .push--medium--three-fifths {
    left: 60%; }
  .push--medium--four-fifths {
    left: 80%; }
  /* Sixths */
  .push--medium--one-sixth {
    left: 16.666%; }
  .push--medium--two-sixths {
    left: 33.333%; }
  .push--medium--three-sixths {
    left: 50%; }
  .push--medium--four-sixths {
    left: 66.666%; }
  .push--medium--five-sixths {
    left: 83.333%; }
  /* Eighths */
  .push--medium--one-eighth {
    left: 12.5%; }
  .push--medium--two-eighths {
    left: 25%; }
  .push--medium--three-eighths {
    left: 37.5%; }
  .push--medium--four-eighths {
    left: 50%; }
  .push--medium--five-eighths {
    left: 62.5%; }
  .push--medium--six-eighths {
    left: 75%; }
  .push--medium--seven-eighths {
    left: 87.5%; }
  /* Tenths */
  .push--medium--one-tenth {
    left: 10%; }
  .push--medium--two-tenths {
    left: 20%; }
  .push--medium--three-tenths {
    left: 30%; }
  .push--medium--four-tenths {
    left: 40%; }
  .push--medium--five-tenths {
    left: 50%; }
  .push--medium--six-tenths {
    left: 60%; }
  .push--medium--seven-tenths {
    left: 70%; }
  .push--medium--eight-tenths {
    left: 80%; }
  .push--medium--nine-tenths {
    left: 90%; }
  /* Twelfths */
  .push--medium--one-twelfth {
    left: 8.333%; }
  .push--medium--two-twelfths {
    left: 16.666%; }
  .push--medium--three-twelfths {
    left: 25%; }
  .push--medium--four-twelfths {
    left: 33.333%; }
  .push--medium--five-twelfths {
    left: 41.666%; }
  .push--medium--six-twelfths {
    left: 50%; }
  .push--medium--seven-twelfths {
    left: 58.333%; }
  .push--medium--eight-twelfths {
    left: 66.666%; }
  .push--medium--nine-twelfths {
    left: 75%; }
  .push--medium--ten-twelfths {
    left: 83.333%; }
  .push--medium--eleven-twelfths {
    left: 91.666%; } }

@media only screen and (max-width: 768px) {
  /* Whole */
  .push--medium-down--one-whole {
    left: 100%; }
  /* Halves */
  .push--medium-down--one-half {
    left: 50%; }
  /* Thirds */
  .push--medium-down--one-third {
    left: 33.333%; }
  .push--medium-down--two-thirds {
    left: 66.666%; }
  /* Quarters */
  .push--medium-down--one-quarter {
    left: 25%; }
  .push--medium-down--two-quarters {
    left: 50%; }
  .push--medium-down--three-quarters {
    left: 75%; }
  /* Fifths */
  .push--medium-down--one-fifth {
    left: 20%; }
  .push--medium-down--two-fifths {
    left: 40%; }
  .push--medium-down--three-fifths {
    left: 60%; }
  .push--medium-down--four-fifths {
    left: 80%; }
  /* Sixths */
  .push--medium-down--one-sixth {
    left: 16.666%; }
  .push--medium-down--two-sixths {
    left: 33.333%; }
  .push--medium-down--three-sixths {
    left: 50%; }
  .push--medium-down--four-sixths {
    left: 66.666%; }
  .push--medium-down--five-sixths {
    left: 83.333%; }
  /* Eighths */
  .push--medium-down--one-eighth {
    left: 12.5%; }
  .push--medium-down--two-eighths {
    left: 25%; }
  .push--medium-down--three-eighths {
    left: 37.5%; }
  .push--medium-down--four-eighths {
    left: 50%; }
  .push--medium-down--five-eighths {
    left: 62.5%; }
  .push--medium-down--six-eighths {
    left: 75%; }
  .push--medium-down--seven-eighths {
    left: 87.5%; }
  /* Tenths */
  .push--medium-down--one-tenth {
    left: 10%; }
  .push--medium-down--two-tenths {
    left: 20%; }
  .push--medium-down--three-tenths {
    left: 30%; }
  .push--medium-down--four-tenths {
    left: 40%; }
  .push--medium-down--five-tenths {
    left: 50%; }
  .push--medium-down--six-tenths {
    left: 60%; }
  .push--medium-down--seven-tenths {
    left: 70%; }
  .push--medium-down--eight-tenths {
    left: 80%; }
  .push--medium-down--nine-tenths {
    left: 90%; }
  /* Twelfths */
  .push--medium-down--one-twelfth {
    left: 8.333%; }
  .push--medium-down--two-twelfths {
    left: 16.666%; }
  .push--medium-down--three-twelfths {
    left: 25%; }
  .push--medium-down--four-twelfths {
    left: 33.333%; }
  .push--medium-down--five-twelfths {
    left: 41.666%; }
  .push--medium-down--six-twelfths {
    left: 50%; }
  .push--medium-down--seven-twelfths {
    left: 58.333%; }
  .push--medium-down--eight-twelfths {
    left: 66.666%; }
  .push--medium-down--nine-twelfths {
    left: 75%; }
  .push--medium-down--ten-twelfths {
    left: 83.333%; }
  .push--medium-down--eleven-twelfths {
    left: 91.666%; } }

@media only screen and (min-width: 769px) {
  /* Whole */
  .push--large--one-whole {
    left: 100%; }
  /* Halves */
  .push--large--one-half {
    left: 50%; }
  /* Thirds */
  .push--large--one-third {
    left: 33.333%; }
  .push--large--two-thirds {
    left: 66.666%; }
  /* Quarters */
  .push--large--one-quarter {
    left: 25%; }
  .push--large--two-quarters {
    left: 50%; }
  .push--large--three-quarters {
    left: 75%; }
  /* Fifths */
  .push--large--one-fifth {
    left: 20%; }
  .push--large--two-fifths {
    left: 40%; }
  .push--large--three-fifths {
    left: 60%; }
  .push--large--four-fifths {
    left: 80%; }
  /* Sixths */
  .push--large--one-sixth {
    left: 16.666%; }
  .push--large--two-sixths {
    left: 33.333%; }
  .push--large--three-sixths {
    left: 50%; }
  .push--large--four-sixths {
    left: 66.666%; }
  .push--large--five-sixths {
    left: 83.333%; }
  /* Eighths */
  .push--large--one-eighth {
    left: 12.5%; }
  .push--large--two-eighths {
    left: 25%; }
  .push--large--three-eighths {
    left: 37.5%; }
  .push--large--four-eighths {
    left: 50%; }
  .push--large--five-eighths {
    left: 62.5%; }
  .push--large--six-eighths {
    left: 75%; }
  .push--large--seven-eighths {
    left: 87.5%; }
  /* Tenths */
  .push--large--one-tenth {
    left: 10%; }
  .push--large--two-tenths {
    left: 20%; }
  .push--large--three-tenths {
    left: 30%; }
  .push--large--four-tenths {
    left: 40%; }
  .push--large--five-tenths {
    left: 50%; }
  .push--large--six-tenths {
    left: 60%; }
  .push--large--seven-tenths {
    left: 70%; }
  .push--large--eight-tenths {
    left: 80%; }
  .push--large--nine-tenths {
    left: 90%; }
  /* Twelfths */
  .push--large--one-twelfth {
    left: 8.333%; }
  .push--large--two-twelfths {
    left: 16.666%; }
  .push--large--three-twelfths {
    left: 25%; }
  .push--large--four-twelfths {
    left: 33.333%; }
  .push--large--five-twelfths {
    left: 41.666%; }
  .push--large--six-twelfths {
    left: 50%; }
  .push--large--seven-twelfths {
    left: 58.333%; }
  .push--large--eight-twelfths {
    left: 66.666%; }
  .push--large--nine-twelfths {
    left: 75%; }
  .push--large--ten-twelfths {
    left: 83.333%; }
  .push--large--eleven-twelfths {
    left: 91.666%; } }

/*============================================================================
PULL
- Pull classes, to move grid items back to the left by certain amounts
==============================================================================*/
/*============================================================================
#Basic Styles
==============================================================================*/
html {
  background-color: #f2f2f2; }

body {
  background-color: #ffffff; }

[tabindex='-1']:focus {
  outline: none; }

.wrapper {
  *zoom: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px; }
  .wrapper:after {
    content: '';
    display: table;
    clear: both; }
  @media screen and (min-width: 480px) {
    .wrapper {
      padding: 0 30px; } }

.main-content {
  display: block; }

/*============================================================================
#Helper Classes
==============================================================================*/
.is-transitioning {
  display: block !important;
  visibility: visible !important; }

.display-table {
  display: table;
  table-layout: fixed;
  width: 100%; }

.display-table-cell {
  display: table-cell;
  vertical-align: middle;
  float: none; }

@media screen and (min-width: 769px) {
  .large--display-table {
    display: table;
    table-layout: fixed;
    width: 100%; }
  .large--display-table-cell {
    display: table-cell;
    vertical-align: middle;
    float: none; } }

.visually-hidden, .supports-fontface .icon-fallback-text .fallback-text {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0; }

/*============================================================================
#Typography
==============================================================================*/
body,
input,
textarea,
button,
select {
  font-size: 14px;
  line-height: 1.6;
  font-family: "OpenSans-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #242c30;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  display: block;
  font-family: "OpenSans-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin: 0 0 0.5em;
  line-height: 1.4; }
  h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a {
    text-decoration: none;
    font-weight: inherit; }

/*================ Use em() Sass function to declare font-size ================*/
h1, .h1 {
  font-size: 2.57143em; }

h2, .h2 {
  font-size: 2em; }

h3, .h3 {
  font-size: 1.57143em; }

h4, .h4 {
  font-size: 1.42857em; }

h5, .h5 {
  font-size: 1.14286em; }

h6, .h6 {
  font-size: 1em; }

p {
  margin: 0 0 15px 0; }
  p img {
    margin: 0; }

em {
  font-style: italic; }

b, strong {
  font-weight: bold; }

small {
  font-size: 0.9em; }

sup, sub {
  position: relative;
  font-size: 60%;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.5em; }

/*================ Blockquotes ================*/
blockquote {
  font-size: 1.125em;
  line-height: 1.45;
  font-style: italic;
  margin: 0 0 30px;
  padding: 15px 30px;
  border-left: 1px solid #e7e7e7; }
  blockquote p {
    margin-bottom: 0; }
    blockquote p + cite {
      margin-top: 15px; }
  blockquote cite {
    display: block;
    font-size: 0.75em; }
    blockquote cite:before {
      content: '\2014 \0020'; }

/*================ Code ================*/
code, pre {
  background-color: #faf7f5;
  font-family: Consolas,monospace;
  font-size: 1em;
  border: 0 none;
  padding: 0 2px;
  color: #51ab62; }

pre {
  overflow: auto;
  padding: 15px;
  margin: 0 0 30px; }

/*================ Horizontal Rules ================*/
hr {
  clear: both;
  border-top: solid #e7e7e7;
  border-width: 1px 0 0;
  margin: 30px 0;
  height: 0; }
  hr.hr--small {
    margin: 15px 0; }
  hr.hr--clear {
    border-top-color: transparent; }

/*================ Section Headers ================*/
.section-header {
  margin-bottom: 20px; }

@media screen and (min-width: 769px) {
  .section-header {
    display: table;
    width: 100%; }
  .section-header__title {
    margin-bottom: 12px; }
  .section-header__left {
    display: table-cell;
    vertical-align: middle;
    margin-bottom: 0; }
    .section-header__left h1, .section-header__left .h1, .section-header__left h2, .section-header__left .h2, .section-header__left h3, .section-header__left .h3, .section-header__left h4, .section-header__left .h4,
    .section-header__left .h1, .section-header__left .h2, .section-header__left .h3, .section-header__left .h4 {
      margin-bottom: 0; }
  .section-header__right {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    width: 335px; } }
  @media screen and (min-width: 769px) and (max-width: 768px) {
    .section-header__right {
      margin-bottom: 30px; } }

.section-header__right .form-horizontal,
.section-header__right .collection-view {
  display: inline-block;
  vertical-align: middle; }

@media screen and (min-width: 481px) {
  .section-header__right label + select,
  .section-header__right .collection-view {
    margin-left: 15px; } }

.collection-view {
  display: inline-block;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
  padding: 0 5px;
  height: 37px;
  overflow: hidden;
  /*================ Only show on larger screens ================*/ }
  @media screen and (min-width: 769px) {
    .collection-view {
      display: inline-block; } }

.change-view {
  display: block;
  background: none;
  border: 0 none;
  float: left;
  padding: 10px 8px;
  color: #e7e7e7;
  line-height: 1; }
  .change-view:hover, .change-view:focus {
    color: #0064ab; }

.change-view--active {
  cursor: default;
  color: #0064ab; }

/*============================================================================
#Rich Text Editor
==============================================================================*/
.rte {
  margin-bottom: 15px; }
  .rte a {
    text-decoration: underline; }
  .rte h1, .rte .h1, .rte h2, .rte .h2, .rte h3, .rte .h3, .rte h4, .rte .h4, .rte h5, .rte .h5, .rte h6, .rte .h6 {
    margin-top: 2em; }
    .rte h1:first-child, .rte .h1:first-child, .rte h2:first-child, .rte .h2:first-child, .rte h3:first-child, .rte .h3:first-child, .rte h4:first-child, .rte .h4:first-child, .rte h5:first-child, .rte .h5:first-child, .rte h6:first-child, .rte .h6:first-child {
      margin-top: 0; }
    .rte h1 a, .rte .h1 a, .rte h2 a, .rte .h2 a, .rte h3 a, .rte .h3 a, .rte h4 a, .rte .h4 a, .rte h5 a, .rte .h5 a, .rte h6 a, .rte .h6 a {
      text-decoration: none; }
  .rte > div {
    margin-bottom: 15px; }
  .rte li {
    margin-bottom: 0.4em; }

.rte--header {
  margin-bottom: 0; }

/*============================================================================
#Links and Buttons
==============================================================================*/
a,
.text-link {
  color: #0064ab;
  text-decoration: none;
  background: transparent; }

a:hover,
a:focus {
  color: #0091f8; }

button {
  overflow: visible; }

button[disabled],
html input[disabled] {
  cursor: default; }

.btn, .btn--secondary,
.rte .btn--secondary,
.rte .btn, .rte .btn--secondary {
  display: inline-block;
  padding: 8px 10px;
  width: auto;
  margin: 0;
  line-height: 1.42;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 3px;
  /*================ Set primary button colors - can override later ================*/
  background-color: #0064ab;
  color: #fff; }
  .btn:hover, .btn--secondary:hover,
  .rte .btn:hover, .rte .btn--secondary:hover {
    background-color: #004678;
    color: #fff; }
  .btn:active, .btn--secondary:active, .btn:focus, .btn--secondary:focus,
  .rte .btn:active, .rte .btn--secondary:active,
  .rte .btn:focus, .rte .btn--secondary:focus {
    background-color: #002845;
    color: #fff; }
  .btn[disabled], [disabled].btn--secondary, .btn.disabled, .disabled.btn--secondary,
  .rte .btn[disabled], .rte [disabled].btn--secondary,
  .rte .btn.disabled, .rte .disabled.btn--secondary {
    cursor: default;
    color: #b6b6b6;
    background-color: #f6f6f6; }

.btn--secondary,
.rte .btn--secondary {
  background-color: #012d59; }
  .btn--secondary:hover,
  .rte .btn--secondary:hover {
    background-color: #001427;
    color: #fff; }
  .btn--secondary:active, .btn--secondary:focus,
  .rte .btn--secondary:active,
  .rte .btn--secondary:focus {
    background-color: black;
    color: #fff; }

.btn--small {
  padding: 4px 5px;
  font-size: 0.85714em; }

.btn--large {
  padding: 12px 15px;
  font-size: 1.14286em; }

.btn--full {
  width: 100%; }

/*================ Force an input/button to look like a text link ================*/
.text-link {
  display: inline;
  border: 0 none;
  background: none;
  padding: 0;
  margin: 0; }

/*============================================================================
#Lists
==============================================================================*/
ul, ol {
  margin: 0 0 15px 20px;
  padding: 0; }

ol {
  list-style: decimal; }

ul ul, ul ol,
ol ol, ol ul {
  margin: 4px 0 5px 20px; }

li {
  margin-bottom: 0.25em; }

ul.square {
  list-style: square outside; }

ul.disc {
  list-style: disc outside; }

ol.alpha {
  list-style: lower-alpha outside; }

.no-bullets {
  list-style: none outside;
  margin-left: 0; }

.inline-list {
  margin-left: 0; }
  .inline-list li {
    display: inline-block;
    margin-bottom: 0; }

/*============================================================================
#Tables
==============================================================================*/
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; }

table.full {
  width: 100%;
  margin-bottom: 1em; }

.table-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

th {
  font-weight: bold; }

th, td {
  text-align: left;
  padding: 15px;
  border: 1px solid #e7e7e7; }

/*============================================================================
Responsive tables, defined with .table--responsive on table element.
Only defined for IE9+
==============================================================================*/
@media screen and (max-width: 480px) {
  .table--responsive thead {
    display: none; }
  .table--responsive tr {
    display: block; }
  .table--responsive tr,
  .table--responsive td {
    float: left;
    clear: both;
    width: 100%; }
  .table--responsive th,
  .table--responsive td {
    display: block;
    text-align: right;
    padding: 15px; }
  .table--responsive td:before {
    content: attr(data-label);
    float: left;
    text-align: center;
    font-size: 12px;
    padding-right: 10px; }
  .table--responsive.cart-table img {
    margin: 0 auto; }
  .table--responsive.cart-table .js-qty, .table--responsive.cart-table .ajaxcart__qty {
    float: right; } }

@media screen and (max-width: 480px) {
  .table--small-hide {
    display: none !important; }
  .table__section + .table__section {
    position: relative;
    margin-top: 10px;
    padding-top: 15px; }
    .table__section + .table__section:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 15px;
      right: 15px;
      border-bottom: 1px solid #e7e7e7; } }

/*============================================================================
#OOCSS Media Object
- http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
==============================================================================*/
.media,
.media-flex {
  overflow: hidden;
  _overflow: visible;
  zoom: 1; }

.media-img {
  float: left;
  margin-right: 30px; }

.media-img-right {
  float: right;
  margin-left: 30px; }

.media-img img,
.media-img-right img {
  display: block; }

/*============================================================================
#Images and Iframes
==============================================================================*/
img {
  border: 0 none; }

svg:not(:root) {
  overflow: hidden; }

img,
iframe {
  max-width: 100%; }

.video-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  height: auto; }
  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/*============================================================================
#Forms
==============================================================================*/
form {
  margin-bottom: 0; }

.form-vertical {
  margin-bottom: 15px; }

/*================ Prevent zoom on touch devices in active inputs ================*/
@media screen and (max-width: 768px) {
  input,
  textarea {
    font-size: 16px; } }

input,
textarea,
button,
select {
  padding: 0;
  margin: 0;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text; }

button {
  background: none;
  border: none;
  cursor: pointer; }

button,
input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none; }

button {
  background: none;
  border: none;
  display: inline-block;
  cursor: pointer; }

input[type="image"] {
  padding-left: 0;
  padding-right: 0; }

fieldset {
  border: 1px solid #e7e7e7;
  padding: 15px; }

legend {
  border: 0;
  padding: 0; }

button,
input[type="submit"] {
  cursor: pointer; }

input,
textarea,
select {
  border: 1px solid #e7e7e7;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 3px; }
  input:focus,
  textarea:focus,
  select:focus {
    border: 1px solid #cecece; }
  input[disabled], input.disabled,
  textarea[disabled],
  textarea.disabled,
  select[disabled],
  select.disabled {
    cursor: default;
    background-color: #f6f6f6;
    border-color: #b6b6b6; }
  input.input-full,
  textarea.input-full,
  select.input-full {
    width: 100%; }

textarea {
  min-height: 100px; }

/*================ Input element overrides ================*/
input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin: 0 8px 0 0;
  padding: 0;
  width: auto; }

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox; }

input[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio; }

input[type="image"] {
  padding-left: 0;
  padding-right: 0; }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-position: right center;
  background-image: url("//cdn.hstatic.net/themes/1000352324/1001422221/14/ico-select.svg?v=960");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: transparent;
  padding-right: 28px;
  text-indent: 0.01px;
  text-overflow: '';
  cursor: pointer;
  /*================ Hide the svg arrow in IE9 and below ================*/ }
  .ie9 select,
  .lt-ie9 select {
    padding-right: 10px;
    background-image: none; }

optgroup {
  font-weight: bold; }

option {
  color: #000;
  background-color: #fff; }

select::-ms-expand {
  display: none; }

/*================ Form labels ================*/
.hidden-label {
  position: absolute;
  height: 0;
  width: 0;
  margin-bottom: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); }
  .ie9 .hidden-label,
  .lt-ie9 .hidden-label {
    position: static;
    height: auto;
    width: auto;
    margin-bottom: 2px;
    overflow: visible;
    clip: initial; }

label[for] {
  cursor: pointer; }

/*================ Horizontal Form ================*/
.form-vertical input,
.form-vertical select,
.form-vertical textarea {
  display: block;
  margin-bottom: 10px; }

.form-vertical input[type="radio"],
.form-vertical input[type="checkbox"] {
  display: inline-block; }

/*================ Error styles ================*/
input.error,
select.error,
textarea.error {
  border-color: #d02e2e;
  background-color: #fff6f6;
  color: #d02e2e; }

label.error {
  color: #d02e2e; }

/*================ Input Group ================*/
.input-group {
  position: relative;
  display: table;
  border-collapse: separate; }
  .input-group .input-group-field:first-child,
  .input-group .input-group-btn:first-child,
  .input-group .input-group-btn:first-child > .btn,
  .input-group .input-group-btn:first-child > .btn--secondary,
  .input-group
  .rte .input-group-btn:first-child > .btn--secondary,
  .input-group input[type="hidden"]:first-child + .input-group-field,
  .input-group input[type="hidden"]:first-child + .input-group-btn > .btn,
  .input-group input[type="hidden"]:first-child + .input-group-btn > .btn--secondary,
  .input-group
  .rte input[type="hidden"]:first-child + .input-group-btn > .btn--secondary {
    border-radius: 3px 0 0 3px; }
  .input-group .input-group-field:last-child,
  .input-group .input-group-btn:last-child > .btn,
  .input-group .input-group-btn:last-child > .btn--secondary,
  .input-group
  .rte .input-group-btn:last-child > .btn--secondary {
    border-radius: 0 3px 3px 0; }
  .input-group input::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin-top: -1px;
    margin-bottom: -1px; }

.input-group-field,
.input-group-btn {
  display: table-cell;
  vertical-align: middle;
  margin: 0; }

.input-group .btn, .input-group .btn--secondary,
.input-group .input-group-field {
  height: 37px; }

.input-group .input-group-field {
  width: 100%; }

.input-group-btn {
  position: relative;
  white-space: nowrap;
  width: 1%;
  padding: 0; }

/*============================================================================
#Icons
==============================================================================*/
.icon-fallback-text .icon {
  display: none; }
  .supports-fontface .icon-fallback-text .icon {
    display: inline-block; }

/*============================================================================
A generic way to visually hide content while
remaining accessible to screen readers (h5bp.com)
==============================================================================*/
.icon:before {
  display: none; }

.supports-fontface .icon:before {
  display: inline;
  font-family: "icons";
  text-decoration: none;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/*================ Icon mapping ================*/
.icon-amazon_payments:before {
  content: "\e800"; }

.icon-american_express:before {
  content: "\41"; }

.icon-arrow-down:before {
  content: "\e607"; }

.icon-bitcoin:before {
  content: "\42"; }

.icon-cart:before {
  content: "\e600"; }

.icon-cirrus:before {
  content: "\43"; }

.icon-dankort:before {
  content: "\64"; }

.icon-diners_club:before {
  content: "\63"; }

.icon-discover:before {
  content: "\44"; }

.icon-dogecoin:before {
  content: "\e904"; }

.icon-dwolla:before {
  content: "\e905"; }

.icon-facebook:before {
  content: "\66"; }

.icon-fancy:before {
  content: "\46"; }

.icon-forbrugsforeningen:before {
  content: "\e906"; }

.icon-google-plus:before {
  content: "\e900"; }

.icon-grid-view:before {
  content: "\e603"; }

.icon-hamburger:before {
  content: "\e601"; }

.icon-instagram:before {
  content: "\e901"; }

.icon-interac:before {
  content: "\49"; }

.icon-jcb:before {
  content: "\4a"; }

.icon-list-view:before {
  content: "\e604"; }

.icon-litecoin:before {
  content: "\e908"; }

.icon-maestro:before {
  content: "\6d"; }

.icon-master:before {
  content: "\4d"; }

.icon-minus:before {
  content: "\e602"; }

.icon-paypal:before {
  content: "\50"; }

.icon-pinterest:before {
  content: "\70"; }

.icon-plus:before {
  content: "\e605"; }

.icon-rss:before {
  content: "\72"; }

.icon-search:before {
  content: "\73"; }

.icon-stripe:before {
  content: "\53"; }

.icon-tumblr:before {
  content: "\74"; }

.icon-twitter:before {
  content: "\54"; }

.icon-vimeo:before {
  content: "\76"; }

.icon-visa:before {
  content: "\56"; }

.icon-x:before {
  content: "\e606"; }

.icon-youtube:before {
  content: "\79"; }

.payment-icons {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default; }
  .payment-icons li {
    margin: 0 7.5px 7.5px;
    color: #bbbbbb;
    cursor: default; }
  .payment-icons .icon {
    font-size: 30px;
    line-height: 30px; }
  .payment-icons .fallback-text {
    text-transform: capitalize; }

.social-icons li {
  margin: 0 15px 15px;
  vertical-align: middle; }
  @media screen and (min-width: 481px) {
    .social-icons li {
      margin-left: 0; } }
  .social-icons li .icon {
    font-size: 30px;
    line-height: 26px; }
  .social-icons li a {
    color: #bbbbbb; }
    .social-icons li a:hover {
      color: #a2a2a2; }

/*============================================================================
#Pagination
==============================================================================*/
.pagination {
  margin-bottom: 1em;
  text-align: center; }
  .pagination > span {
    display: inline-block;
    line-height: 1; }
  .pagination a {
    display: block; }
  .pagination a,
  .pagination .page.current {
    padding: 8px; }

/*============================================================================
#Site Header
==============================================================================*/
.site-header {
  padding: 15px 0; }
  .site-header .grid--table {
    display: table;
    table-layout: fixed;
    width: 100%; }
    .site-header .grid--table > .grid__item {
      float: none;
      display: table-cell;
      vertical-align: middle; }

.site-header__logo {
  text-align: center;
  margin: 0 auto;
  max-width: 100%; }
  @media screen and (min-width: 769px) {
    .site-header__logo {
      text-align: left; } }
  .site-header__logo a,
  .site-header__logo a:hover,
  .site-header__logo a:focus {
    text-decoration: none; }
  .site-header__logo a, .site-header__logo img {
    display: block; }
  .site-header__logo img {
    margin: 0 auto; }

.site-header__logo-link {
  max-width: px;
  margin: 0 auto; }

.site-header__cart-toggle {
  display: inline-block; }

.site-header__search {
  display: inline-block;
  max-width: 400px;
  margin-top: 15px;
  width: 100%; }

.search-bar {
  max-width: 100%; }
  @media screen and (max-width: 768px) {
    .search-bar {
      margin-left: auto;
      margin-right: auto; } }

/*============================================================================
#Site Nav and Dropdowns
==============================================================================*/
.nav-bar {
  background-color: #f2f2f2; }

.site-nav, .site-nav--mobile {
  font-size: 1.14286em;
  cursor: default;
  margin: 0 0 0 -15px; }
  .site-nav li, .site-nav--mobile li {
    margin: 0;
    display: block; }
  .site-nav > li, .site-nav--mobile > li {
    position: relative;
    display: inline-block; }

/*================ Home to hamburger and cart that toggle drawers ================*/
.text-right .site-nav--mobile {
  margin: 0 -15px 0 0; }

.site-nav__link {
  display: block;
  text-decoration: none;
  padding: 15px;
  white-space: nowrap;
  color: #333; }
  .site-nav__link:hover, .site-nav__link:active, .site-nav__link:focus {
    color: #0d0d0d; }
  .site-nav__link .icon-arrow-down {
    position: relative;
    top: -2px;
    font-size: 10px;
    padding-left: 7.5px; }
  .site-nav--active > .site-nav__link {
    font-weight: bold; }
  .site-nav--mobile .site-nav__link {
    display: inline-block; }

/*================ Dropdowns ================*/
.site-nav__dropdown {
  display: none;
  position: absolute;
  left: 0;
  margin: 0;
  z-index: 5; }
  .supports-no-touch .site-nav--has-dropdown:hover .site-nav__dropdown,
  .site-nav--has-dropdown.nav-hover .site-nav__dropdown,
  .nav-focus + .site-nav__dropdown {
    display: block; }
  .site-nav__dropdown a {
    background-color: #f2f2f2; }
    .site-nav__dropdown a:hover, .site-nav__dropdown a:active, .site-nav__dropdown a:focus {
      background-color: #d9d9d9; }

/*================ Search bar in header ================*/
.nav-search {
  position: relative;
  padding: 10px 0; }
  @media screen and (max-width: 768px) {
    .nav-search {
      padding: 0 0 15px;
      margin: 0 auto;
      text-align: center; } }

/*============================================================================
#Mobile Nav
- List of items inside the mobile drawer
==============================================================================*/
.mobile-nav {
  margin: -15px -15px 0 -15px; }
  .mobile-nav li {
    margin-bottom: 0; }

.mobile-nav__search {
  padding: 15px; }
  .mobile-nav__search .search-bar {
    margin-bottom: 0; }

.mobile-nav__item {
  position: relative;
  display: block; }
  .mobile-nav > .mobile-nav__item {
    background-color: #f6f6f6; }
  .mobile-nav__item:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 15px; }
  .mobile-nav > .mobile-nav__item:last-child:after {
    display: none; }

.mobile-nav__item a {
  display: block; }

.mobile-nav__item a,
.mobile-nav__toggle button {
  color: #333;
  padding: 15px;
  text-decoration: none; }
  .mobile-nav__item a:hover, .mobile-nav__item a:active, .mobile-nav__item a:focus,
  .mobile-nav__toggle button:hover,
  .mobile-nav__toggle button:active,
  .mobile-nav__toggle button:focus {
    color: #0d0d0d; }
  .mobile-nav__item a:active, .mobile-nav__item a:focus,
  .mobile-nav__toggle button:active,
  .mobile-nav__toggle button:focus {
    background-color: #e9e9e9; }

.mobile-nav__item--active {
  /*font-weight: bold;*/ }

.mobile-nav__has-sublist {
  display: table;
  width: 100%; }
  .mobile-nav__has-sublist .mobile-nav__link {
    display: table-cell;
    vertical-align: middle;
    width: 100%; }

.mobile-nav__toggle {
  display: table-cell;
  vertical-align: middle;
  width: 1%; }

.mobile-nav--expanded .mobile-nav__toggle-open {
  display: none; }

.mobile-nav__toggle-close {
  display: none; }
  .mobile-nav--expanded .mobile-nav__toggle-close {
    display: block; }

.mobile-nav__sublist {
  margin: 0;
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  .mobile-nav--expanded + .mobile-nav__sublist {
    visibility: visible;
    max-height: 700px;
    transition: all 700ms cubic-bezier(0.57, 0.06, 0.05, 0.95); }
  .mobile-nav__sublist .mobile-nav__item:after {
    top: 0;
    bottom: auto; }
  .mobile-nav__sublist .mobile-nav__link {
    padding-left: 30px;
    font-weight: normal; }

/*============================================================================
#Drawers
==============================================================================*/
.js-drawer-open {
  overflow: hidden; }

.drawer {
  -webkit-transform: translateZ(0);
  will-change: transform;
  display: none;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  top: 0;
  bottom: 0;
  padding: 0 15px 15px;
  max-width: 95%;
  z-index: 10;
  color: #333;
  background-color: #f6f6f6;
  transition: all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1); }
  .drawer a {
    color: #333; }
    .drawer a:hover, .drawer a:focus {
      opacity: 0.7; }
  .drawer input,
  .drawer textarea {
    border-color: #e9e9e9; }

.drawer--left {
  width: 300px;
  left: -300px;
  border-right: 1px solid #e9e9e9; }
  .js-drawer-open-left .drawer--left {
    display: block;
    -ms-transform: translateX(300px);
    -webkit-transform: translateX(300px);
    transform: translateX(300px); }
    .lt-ie9 .js-drawer-open-left .drawer--left {
      left: 0; }

.drawer--right {
  width: 300px;
  right: -300px;
  border-left: 1px solid #e9e9e9; }
  .js-drawer-open-right .drawer--right {
    display: block;
    -ms-transform: translateX(-300px);
    -webkit-transform: translateX(-300px);
    transform: translateX(-300px); }
    .lt-ie9 .js-drawer-open-right .drawer--right {
      right: 0; }

#PageContainer {
  overflow: hidden; }

.is-moved-by-drawer {
  -webkit-transform: translateZ(0);
  will-change: transform;
  transition: all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1); }
  .js-drawer-open-left .is-moved-by-drawer {
    -ms-transform: translateX(300px);
    -webkit-transform: translateX(300px);
    transform: translateX(300px); }
  .js-drawer-open-right .is-moved-by-drawer {
    -ms-transform: translateX(-300px);
    -webkit-transform: translateX(-300px);
    transform: translateX(-300px); }

.drawer__header {
  display: table;
  height: 70px;
  width: 100%;
  margin-bottom: 15px;
  border-bottom: 1px solid #e9e9e9; }

.drawer__title,
.drawer__close {
  display: table-cell;
  vertical-align: middle; }

.drawer__title {
  width: 100%; }

.drawer__close {
  width: 1%;
  text-align: center;
  font-size: 1.28571em; }

.drawer__close button {
  position: relative;
  right: -20px;
  height: 100%;
  padding: 0 20px;
  color: inherit; }
  .drawer__close button:active, .drawer__close button:focus {
    background-color: #e9e9e9; }

/*============================================================================
#Site Footer
==============================================================================*/
.site-footer {
  background-color: #f2f2f2;
  padding: 30px 0;
  color: #636363; }
  @media screen and (min-width: 769px) {
    .site-footer {
      padding: 60px 0; } }

/*============================================================================
#Product and Collection Grids
==============================================================================*/
.grid__image {
  display: block;
  margin: 0 auto 15px; }
  .grid__image img {
    display: block;
    margin: 0 auto; }

/*============================================================================
#Collection Filters
==============================================================================*/
.filter--active {
  font-weight: bold; }

/*============================================================================
#Breadcrumbs
==============================================================================*/
.breadcrumb {
  margin-bottom: 30px; }
  .breadcrumb a,
  .breadcrumb span {
    display: inline-block;
    padding: 0 7px 0 0;
    margin-right: 7px; }
    .breadcrumb a:first-child,
    .breadcrumb span:first-child {
      padding-left: 0; }

/*============================================================================
#Product Page
==============================================================================*/
.product-single__variants {
  display: none; }
  .no-js .product-single__variants {
    display: block; }

.product-single__photos {
  margin-bottom: 15px; }

.product-single__photos a, .product-single__photos img,
.product-single__thumbnails a,
.product-single__thumbnails img {
  display: block;
  margin: 0 auto; }

.product-single__photos li,
.product-single__thumbnails li {
  /*margin-bottom: $gutter;*/ }

/*============================================================================
#Notes and Form Feedback
==============================================================================*/
.note,
.errors {
  border-radius: 3px;
  padding: 6px 12px;
  margin-bottom: 15px;
  border: 1px solid transparent;
  font-size: 0.9em;
  text-align: left; }
  .note ul,
  .note ol,
  .errors ul,
  .errors ol {
    margin-top: 0;
    margin-bottom: 0; }
  .note li:last-child,
  .errors li:last-child {
    margin-bottom: 0; }
  .note p,
  .errors p {
    margin-bottom: 0; }

.note {
  border-color: #e7e7e7; }

.errors ul {
  list-style: disc outside;
  margin-left: 20px; }

.form-success {
  color: #56ad6a;
  background-color: #ecfef0;
  border-color: #56ad6a; }
  .form-success a {
    color: #56ad6a;
    text-decoration: underline; }
    .form-success a:hover {
      text-decoration: none; }

.form-error,
.errors {
  color: #d02e2e;
  background-color: #fff6f6;
  border-color: #d02e2e; }
  .form-error a,
  .errors a {
    color: #d02e2e;
    text-decoration: underline; }
    .form-error a:hover,
    .errors a:hover {
      text-decoration: none; }

/*============================================================================
#Cart Page
==============================================================================*/
.cart__row {
  position: relative;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #e7e7e7; }
  .cart__row:first-child {
    margin-top: 0; }
  .cart__row:first-child {
    padding-top: 0; }
  .cart__row .js-qty, .cart__row .ajaxcart__qty {
    margin: 0 auto; }

.cart-table th {
  font-weight: normal; }

.cart-table td,
.cart-table th {
  padding: 30px 15px;
  border: none; }

@media screen and (min-width: 769px) {
  .cart__row--table-large {
    display: table;
    table-layout: fixed;
    width: 100%; }
    .cart__row--table-large .grid__item {
      display: table-cell;
      vertical-align: middle;
      float: none; } }

.cart__image {
  display: block; }
  .cart__image img {
    display: block;
    max-width: 100%; }

.cart__subtotal {
  margin: 0 0 0 10px;
  display: inline; }

.cart__mini-labels {
  display: block;
  margin: 10px 0;
  font-size: 0.85714em; }
  @media screen and (min-width: 769px) {
    .cart__mini-labels {
      display: none; } }

.cart__remove {
  display: block; }

/*============================================================================
#Ajax Cart Styles (conditionally loaded)
==============================================================================*/
.ajaxcart__inner {
  margin-bottom: 30px; }

.ajaxcart__row > .grid, .ajaxcart__row > .grid--rev, .ajaxcart__row > .grid--full {
  margin-left: -15px; }
  .ajaxcart__row > .grid > .grid__item, .ajaxcart__row > .grid--rev > .grid__item, .ajaxcart__row > .grid--full > .grid__item {
    padding-left: 15px; }

.ajaxcart__product {
  position: relative;
  max-height: 500px; }
  .ajaxcart__product.is-removed {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: all 450ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }

.ajaxcart__row {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #e9e9e9; }

.ajaxcart__product-image {
  display: block;
  overflow: hidden;
  margin-bottom: 15px; }
  .ajaxcart__product-image img {
    display: block;
    margin: 0 auto;
    max-width: 100%; }

.ajaxcart__product-name,
.ajaxcart__product-meta {
  display: block; }

.ajaxcart__product-name + .ajaxcart__product-meta {
  padding-top: 6px; }

/*================ Quantity Selectors ================*/
.js-qty, .ajaxcart__qty {
  position: relative;
  margin-bottom: 1em;
  max-width: 100px;
  min-width: 75px;
  overflow: visible; }
  .js-qty input, .ajaxcart__qty input {
    display: block;
    background: none;
    text-align: center;
    width: 100%;
    padding: 5px 25px;
    margin: 0; }

.js-qty__adjust, .ajaxcart__qty-adjust {
  cursor: pointer;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  border: 0 none;
  padding: 0 8px;
  background: none;
  text-align: center;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .js-qty__adjust:hover, .ajaxcart__qty-adjust:hover, .js-qty__adjust:focus, .ajaxcart__qty-adjust:focus {
    color: #0064ab; }

.js-qty__adjust--plus, .ajaxcart__qty--plus {
  right: 0;
  border-left: 1px solid #e7e7e7; }

.js-qty__adjust--minus, .ajaxcart__qty--minus {
  left: 0;
  border-right: 1px solid #e7e7e7; }

/*================ Quantity Selectors in Ajax Cart ================*/
.ajaxcart__qty {
  margin: 0; }
  .is-loading .ajaxcart__qty {
    opacity: 0.5;
    transition: none; }

.ajaxcart__qty-num {
  border-color: #e9e9e9;
  color: #333; }

.ajaxcart__qty-adjust {
  color: #333; }

.ajaxcart__qty--plus {
  border-color: #e9e9e9; }

.ajaxcart__qty--minus {
  border-color: #e9e9e9; }

.ajaxcart-item__price-strikethrough {
  float: right; }

/* 
Swatches Styles
*/
.swatch {
  margin: 0.5em 0; }

/* Label */
.swatch .header {
  margin: 0;
  font-weight: bold;
  margin-bottom: 5px;
  display: inline-block;
  min-width: 200px;
  position: relative; }

.swatch .header:before {
  content: ''; }

/* Hide radio buttons.*/
.swatch input {
  display: none !important; }

.swatch label {
  float: left;
  min-width: 35px !important;
  height: 35px !important;
  margin: 0;
  text-align: center;
  line-height: 35px;
  white-space: nowrap;
  font-size: 12px;
  border: 1px solid #ccc;
  cursor: pointer;
  position: relative; }

.swatch-element label {
  padding: 0 10px; }

.color.swatch-element label {
  background-size: contain !important;
  padding: 0px 10px 0px 40px; }

.swatch .swatch-element {
  -webkit-transform: translateZ(0);
  /* webkit flicker fix */
  -webkit-font-smoothing: antialiased;
  /* webkit text rendering fix */
  margin-right: 5px;
  display: inline-block;
  position: relative; }

/* Image with the cross in it */
.crossed-out {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; }

.swatch .swatch-element .crossed-out {
  display: none; }

.swatch .swatch-element.soldout .crossed-out {
  display: block; }

.swatch .swatch-element.soldout label {
  filter: alpha(opacity=60);
  /* internet explorer */
  -khtml-opacity: 0.6;
  /* khtml, old safari */
  -moz-opacity: 0.6;
  /* mozilla, netscape */
  opacity: 0.6;
  /* fx, safari, opera */ }

.swatch .img-check {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0; }

.swatch-element label.sd {
  border: 1px solid #e4393c; }

.swatch-element label.sd img.img-check {
  display: block; }

.swatch-element label span {
  color: #0064ab;
  font-size: 13px;
  line-height: normal;
  vertical-align: middle; }

.swatch-element-quickview label {
  padding: 0 10px; }

.color.swatch-element-quickview label {
  background-size: contain !important;
  padding: 0px 10px 0px 40px; }

.swatch .swatch-element-quickview {
  -webkit-transform: translateZ(0);
  /* webkit flicker fix */
  -webkit-font-smoothing: antialiased;
  /* webkit text rendering fix */
  margin-right: 5px;
  display: inline-block;
  position: relative; }

.swatch .swatch-element-quickview .crossed-out {
  display: none; }

.swatch .swatch-element-quickview.soldout .crossed-out {
  display: block; }

.swatch .swatch-element-quickview.soldout label {
  filter: alpha(opacity=60);
  /* internet explorer */
  -khtml-opacity: 0.6;
  /* khtml, old safari */
  -moz-opacity: 0.6;
  /* mozilla, netscape */
  opacity: 0.6;
  /* fx, safari, opera */ }

.swatch-element-quickview label.sd {
  border: 1px solid #e4393c; }

.swatch-element-quickview label.sd img.img-check {
  display: block; }

.swatch-element-quickview label span {
  color: #0064ab;
  font-size: 13px;
  line-height: normal;
  vertical-align: middle; }

.color.swatch-element-quickview label.no-thumb {
  padding-left: 10px; }

/*
label.sd{
border: 1px solid #F00;
background: url(//cdn.hstatic.net/themes/1000352324/1001422221/14/select-pro.png?v=960) right bottom no-repeat;
}

.n-sd:nth-child(1) label {
border: 1px solid #F00;
background: url(//cdn.hstatic.net/themes/1000352324/1001422221/14/select-pro.png?v=960) right bottom no-repeat;
}
*/
label[for="product-select-option-0"] {
  display: none; }

label[for="product-select-option-1"] {
  display: none; }

label[for="product-select-option-2"] {
  display: none; }

#product-select-option-0 {
  display: none; }

#product-select-option-1 {
  display: none; }

#product-select-option-2 {
  display: none; }

#product-select-option-0 + .custom-style-select-box {
  display: none !important; }

#product-select-option-1 + .custom-style-select-box {
  display: none !important; }

#product-select-option-2 + .custom-style-select-box {
  display: none !important; }

.selector-wrapper {
  display: none; }

.color.swatch-element label.no-thumb {
  padding-left: 10px; }

/*end swatch*/
#loading {
  background-image: url(//cdn.hstatic.net/themes/1000352324/1001422221/14/sprite.png?v=960); }

#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; }

#loading div {
  width: 44px;
  height: 44px;
  background: url(//cdn.hstatic.net/themes/1000352324/1001422221/14/loading.gif?v=960) center center no-repeat; }

/*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) {
  #loading {
    background-image: url(//cdn.hstatic.net/themes/1000352324/1001422221/14/sprite@2x.png?v=960);
    background-size: 44px 152px; }
  #loading div {
    background-image: url(//cdn.hstatic.net/themes/1000352324/1001422221/14/loading@2x.gif?v=960);
    background-size: 24px 24px; } }

/*****Quick View*****/
#productQuickView .image-zoom {
  min-width: 230px;
  max-width: 100%; }

#p-sliderproduct .owl-buttons div {
  position: absolute;
  top: calc(50% - 15px);
  font-size: 24px;
  background: #0064ab;
  color: #fff;
  width: 30px;
  height: 30px;
  padding: 0px;
  line-height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 0px;
  opacity: 0.6;
  outline: 0px; }
  #p-sliderproduct .owl-buttons div:before {
    content: none; }
  #p-sliderproduct .owl-buttons div.owl-next {
    right: 0px; }
  #p-sliderproduct .owl-buttons div.owl-prev {
    left: 15px; }

#p-sliderproduct .owl-buttons:hover div {
  opacity: 1; }

/* Ghi đè style để đảm bảo chữ và link trong footer có màu trắng */
.footer-hightech {
  color: #ffffff;
  /* Áp dụng màu trắng cho chữ chung */ }

.footer-hightech .footer-contact a {
  color: #ffffff;
  /* Buộc màu chữ của liên kết (a) trong footer là trắng */ }

/* chỉnh kích thước lá cờ ở header */
.item-lang img {
  width: 20px !important;
  /* hoặc 24px / 28px tùy bạn muốn lớn hay nhỏ */
  height: auto !important; }

/* Chỉnh kích thước Logo nếu nó nằm trong thanh Navbar */
/*.desktop-header-navbar .hd-logo img {
    height: 35px; /* Thường nhỏ hơn: (ví dụ: 40px) */
/*    max-width: 250px; 
    width: auto;
}
*/
.hd-logo img,
.header_logo img,
.site-header__logo img {
  max-height: 45px !important;
  /* bạn chỉnh số px tùy ý */
  width: auto !important; }

/* --- Sticky Menu HTVG --- */
.desktop-header-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #fff;
  /* chỉnh nếu header bạn dùng màu khác */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); }

body {
  padding-top: 95px;
  /* chỉnh theo chiều cao navbar thực tế */ }

/* ======================================= */
/* STYLE CHO TRANG LIÊN HỆ (page.contact) */
/* ======================================= */
.contact-page-wrapper {
  padding: 40px 0; }

.contact-info-column h2, .contact-info-column .h2,
.contact-form-column h2,
.contact-form-column .h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 2px solid #007bff;
  /* Màu xanh blue */
  padding-bottom: 10px; }

.contact-info-column {
  padding-right: 30px;
  /* Tạo khoảng cách với cột form */ }

/* Định dạng từng mục liên hệ */
.contact-item {
  display: flex;
  /* Sắp xếp icon và text trên cùng 1 hàng */
  align-items: center;
  margin-bottom: 15px; }

.contact-item i, .contact-item .icon-zalo {
  font-size: 20px;
  color: #007bff;
  /* Màu icon */
  width: 30px;
  /* Đảm bảo căn chỉnh icon */
  text-align: center;
  margin-right: 10px; }

.contact-item p {
  margin: 0; }

/* Zalo icon fix */
.icon-zalo {
  width: 18px;
  height: 18px;
  object-fit: contain; }

/* ========================= */
/* CONTACT ICON SVG FIX */
/* ========================= */
.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px; }

.contact-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px; }

.contact-icon svg {
  width: 16px;
  height: 16px;
  display: block; }

/* Định dạng Form */
.contact-form-column form {
  background: #f7f7f7;
  /* Màu nền nhẹ cho form */
  padding: 25px;
  border-radius: 5px; }

.contact-form-column .form-item {
  margin-bottom: 15px; }

.contact-form-column label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 14px; }

.contact-form-column input[type="text"],
.contact-form-column input[type="email"],
.contact-form-column input[type="tel"],
.contact-form-column textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box; }

.contact-form-column .btn--submit {
  background-color: #007bff;
  /* Màu nút submit */
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s; }

.contact-form-column .btn--submit:hover {
  background-color: #0056b3; }

/* Responsive (Thiết bị di động) */
@media screen and (max-width: 768px) {
  .contact-info-column,
  .contact-form-column {
    padding-right: 15px;
    padding-left: 15px; } }

/* ======================================= */
/* STYLE CHO TRANG TUYỂN DỤNG */
/* ======================================= */
.recruitment-page-wrapper {
  padding: 30px 0; }

/* Header của bảng (Màu xanh dương) */
.job-list-header {
  background-color: #007bff;
  /* Màu xanh dương */
  color: white;
  padding: 15px 0;
  margin-bottom: 5px;
  border-radius: 5px 5px 0 0;
  font-weight: bold; }

.job-list-header .job-list-title {
  font-size: 16px;
  margin: 0;
  padding: 0 15px;
  /* Thêm padding ngang */ }

/* Định dạng từng công việc */
.job-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s, transform 0.3s;
  margin: 0; }

.job-item:hover {
  background-color: #f5f5f5;
  color: #007bff;
  /* Đổi màu khi hover */
  transform: translateX(5px); }

/* Cột Tiêu đề công việc */
.job-col-title {
  display: flex;
  align-items: center;
  padding-left: 15px; }

.job-icon {
  font-size: 20px;
  color: #007bff;
  margin-right: 15px;
  width: 25px;
  /* Cố định chiều rộng icon */ }

.job-name {
  font-weight: 600; }

/* Cột Địa điểm và Hạn chót */
.job-col-location,
.job-col-quantity,
.job-col-deadline {
  font-size: 14px;
  padding-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center; }

.job-col-location i {
  margin-right: 5px;
  color: #e74c3c;
  /* Màu đỏ cho icon địa điểm */ }

.job-deadline {
  color: #007bff;
  /* Màu xanh cho ngày hết hạn */
  font-weight: 600; }

/* Responsive cho Mobile */
@media screen and (max-width: 768px) {
  .job-list-header .job-list-title {
    font-size: 14px; }
  .job-item {
    flex-wrap: wrap; }
  .job-col-title {
    width: 100%;
    margin-bottom: 10px; }
  .job-col-quantity,
  .job-col-location,
  .job-col-deadline {
    width: 33.333%;
    margin-bottom: 5px; }
  /* Ẩn cột Ngày hết hạn nếu cần trên Mobile */
  .job-list-header .job-col-deadline.medium--hide,
  .job-item .job-col-deadline.medium--hide {
    display: flex !important;
    /* Buộc hiển thị 3 cột trên mobile */ } }

.hero-slide {
  position: relative;
  /* Có thể cần chỉnh sửa: xóa background-image vì giờ đã có video */ }

.slick-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Đảm bảo video che phủ toàn bộ slide */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* Video nằm dưới nội dung overlay */ }

.hero-slide-content {
  /* Đảm bảo nội dung nằm trên video */
  position: relative;
  z-index: 2;
  /* Thêm các style để làm nổi bật chữ (ví dụ: text-shadow, background mờ) */
  color: white;
  /* Đảm bảo chữ trắng dễ đọc */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); }

/* --- CÂN CHỈNH VIDEO VÀ NỘI DUNG SLICK SLIDER --- */
/* 1. Đảm bảo slide là container chứa vị trí tương đối */
.hero-slide {
  position: relative;
  /* Có thể cần giữ lại chiều cao đã định sẵn trong Liquid: height: 600px; */
  /* Quan trọng: Loại bỏ background-image cũ nếu còn */
  background-image: none !important; }

/* 2. Đặt thẻ Video phủ kín và làm nền */
.slick-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Đảm bảo video che phủ toàn bộ slide mà không bị méo */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* Đặt video ở lớp dưới */ }

/* 3. Đặt nội dung (overlay) lên trên video */
.hero-slide-content {
  /* Đảm bảo nội dung nằm trên video */
  position: relative;
  z-index: 2;
  /* Đặt nội dung ở lớp trên */
  /* Căn chỉnh lại màu sắc và bóng đổ để dễ đọc trên video */
  color: white;
  /* Đảm bảo chữ trắng dễ đọc */
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
  /* Thêm nền mờ nếu cần để tăng độ tương phản */
  /* background-color: rgba(0, 0, 0, 0.3); */
  /* padding: 20px; */ }

/* 4. Đảm bảo các phần tử khác trong nội dung (ví dụ: nút bấm) cũng hiển thị đúng */
.hero-slide-content .slide-message h4, .hero-slide-content .slide-message .h4,
.hero-slide-content .slide-message p {
  color: inherit;
  /* Kế thừa màu trắng */
  text-shadow: inherit;
  /* Kế thừa bóng đổ */ }

/* Tùy chỉnh nút bấm nếu cần */
.hero-slide-content .slide-button a {
  /* Ví dụ: Đặt màu nền và hiệu ứng */
  background-color: #007bff;
  border-radius: 4px;
  padding: 10px 20px;
  text-shadow: none; }

.hero-slide {
  height: 600px !important; }

/* ================================
   HOME — ARTICLES BLOCK 
   ================================ */
#home-articles {
  background: #f5f5f5;
  /* nền xám nhạt */
  padding: 60px 0; }

/* Item nổi lên giống Nagata */
.article-block {
  transition: all .35s ease; }

.article-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); }

/* Làm section-title đẹp hơn */
#home-articles .section-title h2, #home-articles .section-title .h2 {
  font-size: 28px;
  font-weight: 700;
  color: #003a75; }

#home-articles .section-title-border {
  width: 60px;
  height: 3px;
  background: #0a74d4;
  margin: 12px auto 20px auto;
  display: block; }

/* ================================
   HOME — PROJECTS (DỰ ÁN)
   ================================ */
#home-projects {
  background: #e8f3ff;
  /* xanh nhạt kiểu Nagata */
  padding: 70px 0; }

/* Tabs */
.hc-tabs-wrapper .tab button {
  background: #ffffff;
  border: 1px solid #d0e1f7;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 6px;
  font-weight: 600; }

.hc-tabs-wrapper .tab button:hover,
.hc-tabs-wrapper .tab button.active {
  background: #1d72d8;
  color: #fff; }

/* Each project item */
.hproject-item {
  display: block;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 25px;
  transition: all .35s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); }

.hproject-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }

.hproject-img img {
  width: 100%;
  display: block;
  transition: transform .35s ease; }

.hproject-item:hover img {
  transform: scale(1.06); }

.hproject-info {
  padding: 15px; }

.hproject-type {
  font-size: 13px;
  color: #1d72d8;
  font-weight: 600;
  margin-bottom: 8px; }

.hproject-title {
  font-size: 17px;
  font-weight: 700;
  color: #002d64;
  line-height: 1.4; }

/* ============================================
   HOME — SERVICES (DỊCH VỤ)
   ============================================ */
/* =========================================================
   NAGATA – SERVICES STYLE
   ========================================================= */
/* ===== Dạng lưới ===== */
.nagata-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px; }

/* ===== CARD ===== */
.nagata-service-card {
  display: block;
  height: 260px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit; }

.nagata-service-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform .6s ease; }

.nagata-service-card:hover .nagata-service-bg {
  transform: scale(1.08); }

.nagata-service-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.15));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px; }

.nagata-service-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px; }

.nagata-service-desc {
  font-size: 14px;
  line-height: 1.4;
  color: #eaeaea; }

.nagata-service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12); }

/* Background cho section home-services */
#home-services.nagata-services {
  background: #b6d6f0;
  padding: 70px 0; }

/* Fix layout section CÁC CHỨNG CHỈ */
#home-testimonials {
  padding-top: 60px;
  /* chỉnh khoảng cách với section trên */
  padding-bottom: 40px; }

#home-testimonials .section-title {
  margin-bottom: 20px !important; }

#home-testimonials .img_review_new {
  margin-top: 10px; }

#home-testimonials .section-title {
  margin-top: 50px !important; }

/* ===== HOME ARTICLES - STYLE HSG ===== */
.hsg-article-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px; }

.hsg-article-image {
  display: block;
  position: relative; }

.hsg-article-image img {
  width: 100%;
  height: 260px;
  /* chỉnh tùy ý */
  object-fit: cover;
  border-radius: 12px; }

/* Overlay gradient */
.hsg-article-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
  color: #fff; }

/* Ngày tháng */
.hsg-article-meta {
  font-size: 14px;
  margin-bottom: 6px;
  opacity: 0.9; }

/* Tiêu đề tối đa 2 dòng */
.hsg-article-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* CHỈ 2 DÒNG */
  -webkit-box-orient: vertical;
  overflow: hidden; }

.htesti-cert-title {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #000; }

.htesti-img img {
  width: 100%;
  height: auto; }

/* ================================
   NAGATA – CARD TEXT CENTER STYLE
   ================================ */
.nagata-service-overlay {
  text-align: center;
  align-items: center;
  padding-bottom: 26px; }

/* TITLE */
.nagata-service-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 55px;
  position: relative;
  padding-bottom: 10px; }

/* GẠCH MẢNH GIỐNG NAGATA */
.nagata-service-title::after {
  content: "";
  width: 300px;
  height: 1px;
  background: rgba(255, 255, 255, 0.75);
  display: block;
  margin: 10px auto 0 auto; }

/* SUBTITLE */
.nagata-service-desc {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 6px; }

/* ===============================
   HOME – NEW MODEL SECTION
   =============================== */
.home-new-model {
  padding: 60px 0; }

.home-new-model .section-header {
  margin-bottom: 40px; }

.new-model-item {
  padding: 50px 0; }

.new-model-item.bg-alt {
  background: #f7f7f7; }

.new-model-row {
  display: flex;
  align-items: center;
  gap: 40px; }

.new-model-row.reverse {
  flex-direction: row-reverse; }

.new-model-text {
  width: 50%; }

.new-model-text h3, .new-model-text .h3 {
  margin-bottom: 15px; }

.new-model-image {
  width: 50%; }

.new-model-image img {
  max-width: 100%;
  height: auto;
  display: block; }

/* ===============================
   HOME ABOUT US – RICH TEXT
   =============================== */
#home-aboutus .haboutus-richtext {
  font-size: 14px;
  line-height: 1.8;
  color: #444; }

#home-aboutus .haboutus-richtext p {
  margin-bottom: 14px; }

#home-aboutus .haboutus-richtext strong {
  font-weight: 700;
  color: #1f2a44; }

#home-aboutus .haboutus-richtext em {
  font-style: italic; }

#home-aboutus .haboutus-richtext ul {
  padding-left: 20px;
  margin: 10px 0 20px; }

#home-aboutus .haboutus-richtext ul li {
  list-style: disc;
  margin-bottom: 8px; }

/* ===============================
   HOME ABOUT US – TY LE GRID
   =============================== */
#home-aboutus .grid__item.large--one-half {
  width: 35%; }

#home-aboutus .grid__item.large--one-half + .grid__item.large--one-half {
  width: 65%; }

/* HOME SHOW */
/* ============================================================================
   CUSTOM SECTION: HOME SHOW V2 (60/40 Split & Zigzag)
============================================================================== */
.hshow-v2-section {
  padding: 60px 0;
  overflow: hidden;
  background-color: #f5f5f5; }

.hshow-v2-item {
  width: 100%;
  padding: 50px 0;
  display: block; }

/* Màu nền phân biệt cho các show liền kề */
.hshow-v2-item:nth-child(even) {
  background-color: #dce4e6; }

.hshow-v2-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; }

/* Tỷ lệ 6/4: Văn bản 55% - Ảnh 40% (chừa 5% khoảng cách) */
.hshow-v2-text {
  flex: 0 0 55%;
  padding: 0 30px;
  box-sizing: border-box; }

.hshow-v2-img {
  flex: 0 0 45%;
  padding: 0 15px;
  box-sizing: border-box; }

/* Khống chế kích thước ảnh tuyệt đối */
/* Khống chế kích thước ảnh đồng nhất */
.hshow-v2-img img {
  width: auto !important;
  /* Bạn có thể điều chỉnh chiều cao cố định hoặc dùng tỉ lệ khung hình */
  maxheight: 500px;
  /* Tạo khung hình tỉ lệ 4:3 đồng nhất cho mọi ảnh  aspect-ratio: 4 / 3;*/
  object-fit: cover;
  /* Quan trọng: Giúp ảnh lấp đầy khung mà không bị méo/giãn */
  object-position: center;
  /* Giữ tâm hình ảnh ở giữa khung */
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease; }

/* Hiệu ứng phóng nhẹ khi di chuột vào (tùy chọn) */
.hshow-v2-item:hover .hshow-v2-img img {
  transform: scale(1.02); }

/* Logic đan xen: Block 2, 4, 6 đảo ngược */
.hshow-v2-item:nth-child(even) .hshow-v2-flex {
  flex-direction: row-reverse; }

/* Định dạng nội dung văn bản */
.hshow-v2-title {
  font-size: 26px;
  color: #004a99;
  margin-bottom: 20px;
  font-weight: bold;
  line-height: 1.3; }

.hshow-v2-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 25px; }

/* Nút bấm */
.btn-hshow-v2 {
  display: inline-block;
  padding: 12px 30px;
  background: #004a99;
  color: #fff !important;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 600;
  transition: opacity 0.3s; }

.btn-hshow-v2:hover {
  opacity: 0.9; }

/* Responsive cho thiết bị di động */
@media (max-width: 767px) {
  .hshow-v2-text, .hshow-v2-img {
    flex: 0 0 100%;
    padding: 15px;
    text-align: center; }
  .hshow-v2-item {
    padding: 30px 0; }
  .hshow-v2-item:nth-child(even) .hshow-v2-flex {
    flex-direction: column; }
  .hshow-v2-img {
    order: -1;
    /* Luôn hiển thị ảnh lên trên text ở mobile */
    margin-bottom: 20px; } }

/* ===============================
   HOME SHOW – RICH TEXT
   =============================== */
#home-show .hshow-v2-richtext {
  font-size: 14px;
  line-height: 1.8;
  color: #444; }

#home-show .hshow-v2-richtext p {
  margin-bottom: 14px; }

#home-show .hshow-v2-richtext strong {
  font-weight: 700;
  color: #1f2a44; }

#home-show .hshow-v2-richtext em {
  font-style: italic; }

#home-show .hshow-v2-richtext ul {
  padding-left: 20px;
  margin: 5px 0 20px; }

#home-show .hshow-v2-richtext ul li {
  list-style: disc;
  margin-bottom: 8px; }

/* Thu hẹp khoảng cách cho section home-show */
.home-show .section-title,
.home-show h2.title,
.home-show .title.h2 {
  margin-bottom: 10px !important;
  /* Giảm khoảng cách dưới tiêu đề */ }

.home-show .grid, .home-show .grid--rev, .home-show .grid--full,
.home-show .inner-content {
  padding-top: 0 !important;
  /* Xóa bớt khoảng cách trên của khối nội dung */ }

/* Nếu bạn muốn chỉnh cho phần "MẶT HÀNG CHỦ LỰC" (Ảnh đính kèm thứ 2) */
.section-main-product .section-title {
  margin-bottom: 20px !important; }

/* Căn lề TOP cho text ngang bằng với TOP của ảnh trong home-show */
.home-show .inner-content,
.home-show .show-item-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Ép nội dung sát lên trên */
  padding-top: 0 !important; }

.home-show h2, .home-show .h2,
.home-show h3,
.home-show .h3,
.home-show .title-show {
  margin-top: 0 !important;
  /* Xóa khoảng trống mặc định phía trên tiêu đề */
  line-height: 1.2;
  /* Tối ưu độ cao dòng để sát mép hơn */ }

.home-show .img-show,
.home-show .show-item-image {
  line-height: 0;
  /* Loại bỏ khoảng trống thừa dưới ảnh nếu có */ }

/* CSS Mới nhất cho Sidebar Tin tức bên phải - HTVG */
.sidebar-custom .sidebar-block {
  margin-bottom: 35px; }
  .sidebar-custom .sidebar-block .sidebar-title {
    font-size: 16px;
    font-weight: bold;
    color: #00509d;
    /* Màu xanh HTVG */
    text-transform: uppercase;
    border-bottom: 2px solid #00509d;
    padding-bottom: 8px;
    margin-bottom: 15px; }
  .sidebar-custom .sidebar-block ul li {
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1; }
    .sidebar-custom .sidebar-block ul li a {
      font-size: 14px;
      line-height: 1.4;
      display: block;
      color: #333;
      text-decoration: none; }
      .sidebar-custom .sidebar-block ul li a:hover {
        color: #00509d;
        padding-left: 5px;
        /* Hiệu ứng dịch chuyển nhẹ khi hover */
        transition: all 0.3s ease; }
    .sidebar-custom .sidebar-block ul li .date-side {
      display: block;
      font-size: 12px;
      color: #888;
      margin-top: 5px; }
      .sidebar-custom .sidebar-block ul li .date-side i {
        font-size: 10px;
        margin-right: 5px; }
  .sidebar-custom .sidebar-block ul li:last-child {
    border-bottom: none; }

.mg-top-30 {
  margin-top: 30px; }

/* Làm Sidebar cố định khi cuộn trang */
@media screen and (min-width: 769px) {
  .large--three-twelfths {
    position: -webkit-sticky;
    /* Cho trình duyệt Safari */
    position: sticky;
    top: 20px;
    /* Khoảng cách từ đỉnh màn hình khi dính */
    height: fit-content;
    z-index: 10; } }

/* Container chứa địa chỉ và nút */
.footer-address-container {
  margin-bottom: 15px; }

.address-link {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  /* Tạo khoảng cách với nút bên dưới */
  line-height: 1.5; }

.address-icon {
  width: 14px;
  height: 14px;
  fill: #fff;
  margin-right: 8px;
  margin-top: 4px;
  flex-shrink: 0; }

/* Footer-Định dạng nút Chỉ đường xuống dòng */
.direction-btn-wrapper {
  padding-left: 22px;
  /* Căn lề thẳng với chữ 'Địa chỉ' */ }

.direction-btn {
  display: inline-block;
  background-color: #ff9800;
  /* Màu nền cam nổi bật */
  color: #ffffff !important;
  /* Chữ trắng */
  padding: 5px 15px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent; }

.direction-btn:hover {
  background-color: #e68a00;
  /* Cam đậm hơn khi rê chuột */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px); }