﻿
@media all and (min-width: 1025px) {

/* GLOBAL STYLES */

.desktop-device.scrollYRemove {
	margin-right: 17px; /*document no scroll fix*/
}
.overlayOffCanvas {
	z-index: 1010 !important;
    background-color: rgba(255,255,255,0.8);
}
.admin-header-links {
	z-index: 1020;
}
.master-wrapper-content {
	overflow: hidden;
	padding-top: 240px;
}
.home-page-body .master-wrapper-content {
	padding-top: 0 !important;
}
.master-column-wrapper {
	width: 980px;
}
.master-column-wrapper:after {
	content: "";
	display: block;
	clear: both;
}
.center-2 {
	float: right;
	width: 715px;
}
.side-2 {
	float: left;
	width: 245px;
	margin-top: 0 !important;
}
.page {
	clear: both;
	text-align: left;
}
.page-title {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px;
	margin: 0;
}
.air-theme .page-title {
	background: url('../img/title-banner-1.jpg') center no-repeat;
}
.earth-theme .page-title {
	background: url('../img/title-banner-2.jpg') center no-repeat;
}
.page-title h1 {
	position: absolute;
	bottom: 58px;
	left: 0;
	width: 100%;
	color: #fff;
}
.air-theme .page-title h1,
.air-theme .product-grid .title strong,
.air-theme .product-filter-level-values-box .title {
	font-size: 26px;
}
.earth-theme .page-title h1,
.earth-theme .product-grid .title strong,
.earth-theme .product-filter-level-values-box .title {
	font-size: 28px;
}
.home-page .topic-block,
.home-page .product-grid,
.home-page-polls {
	width: 980px;
}

/* GLOBAL FORMS */
/* GLOBAL TABLES */

.cart .product-picture img {
	max-width: 150px;
}
.reward-points-history .data-table col:first-child,
.reward-points-history .data-table th:first-child,
.reward-points-history .data-table td:first-child {
	display: none !important; /*hides counter*/
}
.order-details-page .data-table col:first-child,
.order-details-page .data-table th:first-child,
.order-details-page .data-table td:first-child {
	display: none !important; /*hides counter*/
}
.forums-table-section col:first-child,
.forums-table-section th:first-child,
.forums-table-section td:first-child {
	display: none !important; /*hides counter*/
}

/* NOTIFICATIONS & POPUPS */
/* HEADER */

.desktop-nav-wrapper {
	display: table;
	position: relative;
	top: 0; /*transition start*/
	z-index: 1020;
	width: 100%;
	min-height: 80px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	padding: 15px;
	text-align: center;
	font-size: 0;
	transition: top 0.3s ease;
}
.air-theme .desktop-nav-wrapper {
	background-color: #fff;
}
.earth-theme .desktop-nav-wrapper {
	background-color: #222;
}
.desktop-nav-wrapper.stick {
	position: fixed;
	top: 0;
	width: 100%;
}
.desktop-device.scrollYRemove .desktop-nav-wrapper.stick {
	width: calc(100% - 17px);
}
.header,
.header-menu-parent,
.responsive-nav-wrapper-parent {
	display: table-cell;
	vertical-align: middle;
}
.header,
.menu-title-wrapper,
.responsive-nav-wrapper-parent {
	width: 200px;
}
/* The menu cell is static while .store-search-box (inside the sibling .header
   cell) is `position: fixed` - a positioned element, so it paints above the
   static one no matter how deep the menu is. Deep sublists (3rd/4th level)
   therefore disappeared behind the search. Making this cell positioned with a
   z-index above the search box's 1040 (styles.css) puts the whole menu, and
   every sublist inside it, in front.

   Scoped to >=1025px on purpose: below that .store-search-box is a full-screen
   fixed overlay at z-index 1040, and raising the menu above it site-wide would
   let the menu cover the open search panel on mobile.

   `position: relative` is deliberately low-specificity (0,1,0) so
   `.air-theme.variant-2 .header-menu-parent { position: absolute }` (0,3,0)
   below still wins for that variant; the z-index applies either way. */
.header-menu-parent {
	position: relative;
	z-index: 1041;
	padding: 0 20px;
}
.header-logo {
	padding: 0;
	text-align: left;
}
.responsive-nav-wrapper-parent {
	height: auto !important;
}
.responsive-nav-wrapper {
	height: 50px; /* fix for JS height calculation conflict */
	overflow: hidden;
	text-align: right;
}
.responsive-nav-wrapper div {
	margin: 0;
}
.responsive-nav-wrapper .menu-title {
	display: none;
}
.earth-theme .responsive-nav-wrapper span,
.earth-theme .responsive-nav-wrapper a {
}

/* HEADER VARIANTS */

.air-theme.variant-2 .menu-title-wrapper,
.earth-theme.variant-2 .menu-title-wrapper {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}
.air-theme.variant-2 .menu-title-wrapper div,
.earth-theme.variant-2 .menu-title-wrapper div {
	display: inline-block;
}
.air-theme.variant-2 .menu-title-wrapper span,
.earth-theme.variant-2 .menu-title-wrapper span {
	display: block;
	position: relative;
	height: 50px;
	width: 50px;
	background-repeat: no-repeat;
	font-size: 0;
	cursor: pointer;
}
.air-theme.variant-2 .menu-title-wrapper span {
	background-color: #eda187;
}
.earth-theme.variant-2 .menu-title-wrapper span {
	background-color: #007c5a;
}
.air-theme.variant-2 .menu-title-wrapper .personal-button span {
}
.earth-theme.variant-2 .menu-title-wrapper .menu-title span {
}
.earth-theme.variant-2 .menu-title-wrapper .search-wrap span {
}
.air-theme.variant-2 .header-menu-parent {
	position: absolute;
	top: 80px;
	right: 0;
	left: 0;
	width: 100%;
	margin: auto;
	padding: 0;
	transition: all 0.2s ease;
}
.air-theme.variant-2 .stick .header-menu-parent {
	top: 0;
}
.earth-theme.variant-2 .header-menu-parent {
	padding: 0;
}
.air-theme.variant-2 .header-menu {
	margin: auto;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
	background-color: #fff;
	padding: 10px 20px;
	transition: all 0.2s ease;
}
/*.air-theme.variant-2 .header-menu {
	width: 980px;
}*/
.air-theme.variant-2 .stick .header-menu {
	width: 100% !important;
	min-height: 80px;
	padding: 20px;
}
.air-theme.variant-2 .header-menu:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 15px;	
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.04) 50%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.04) 50%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#00000000',GradientType=0 );
}
.earth-theme.variant-2 .header-menu,
.earth-theme.variant-2 .header-menu.open {
	display: block;
}
.air-theme.variant-2 .header,
.earth-theme.variant-2 .header {
	width: auto;
}
.air-theme.variant-2 .header-logo,
.earth-theme.variant-2 .header-logo {
	text-align: center;
}
.air-theme.variant-2 .header-logo img {
	max-height: 50px; /* in this variant the header should always have static height, 80px at max, because of the overlapping header-menu.
	The only element that can cause the header to expand is the logo image, so its height is limited here. */
}

/* HEADER MENU, Air-1&2, Earth-1 */

.air-theme .menu-title,
.air-theme .close-menu,
.air-theme .header-menu .plus-button,
.air-theme .header-menu .back-button,
.earth-theme.variant-1 .menu-title,
.earth-theme.variant-1 .close-menu,
.earth-theme.variant-1 .header-menu .plus-button,
.earth-theme.variant-1 .header-menu .back-button {
	display: none;
}
.air-theme .top-menu,
.earth-theme.variant-1 .top-menu {
	display: block;
}

.air-theme .header-menu,
.earth-theme.variant-1 .header-menu {
	position: relative;
}
.air-theme .header-menu > ul,
.earth-theme.variant-1 .header-menu > ul {
	font-size: 0;
}
.air-theme .header-menu > ul > li,
.earth-theme.variant-1 .header-menu > ul > li {
	display: inline-block;
	margin: 0 -1px 0 0;
}
.air-theme .header-menu > ul > li > a,
.earth-theme.variant-1 .header-menu > ul > li > a {
	display: block;
	position: relative;
	padding: 10px 20px;
	text-transform: uppercase;
	cursor: pointer;
}
.air-theme .header-menu > ul > li > a {
	font-size: 14px;
	font-weight: 700;
	color: #333;
}
.earth-theme.variant-1 .header-menu > ul > li > a {
	font-size: 15px;
	font-weight: 400;
	color: #fff;
}
.air-theme .header-menu > ul > li > a:before,
.air-theme .header-menu > ul > li > a:after,
.earth-theme.variant-1 .header-menu > ul > li > a:before,
.earth-theme.variant-1 .header-menu > ul > li > a:after {
	content: "";
	position: absolute;
	width: 1px;
}
.air-theme .header-menu > ul > li > a:before,
.earth-theme.variant-1 .header-menu > ul > li > a:before {
	left: 0;
}
.air-theme .header-menu > ul > li > a:after,
.earth-theme.variant-1 .header-menu > ul > li > a:after {
	right: 0;
}
.air-theme .header-menu > ul > li > a:before,
.air-theme .header-menu > ul > li > a:after {
	height: 18px;
	background-color: #e5e5e5;
}
.earth-theme.variant-1 .header-menu > ul > li > a:before,
.earth-theme.variant-1 .header-menu > ul > li > a:after {
	height: 22px;
	background-color: #393939;
}

.air-theme .header-menu ul > li:hover
.earth-theme.variant-1 .header-menu ul > li:hover {
	z-index: 50;
}
.air-theme .header-menu ul > li:hover > a {
	color: #eda187;
}
.earth-theme.variant-1 .header-menu ul > li:hover > a {
	color: #007c5a;
}
.air-theme .header-menu .sublist-wrap,
.earth-theme.variant-1 .header-menu .sublist-wrap {
	display: none;
	position: absolute;
	z-index: 1;
	border-top: 10px solid transparent;
}
.air-theme .header-menu .sublist-wrap.active,
.earth-theme.variant-1 .header-menu .sublist-wrap.active {
	display: block;
}
.air-theme .header-menu .sublist,
.earth-theme.variant-1 .header-menu .sublist {
	width: 250px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	background-color: #fff;
	text-align: left;
}
.air-theme .header-menu .sublist {
	padding: 10px 0;
}
.earth-theme.variant-1 .header-menu .sublist {
	padding: 15px 0;
}
.air-theme .header-menu .sublist li,
.earth-theme.variant-1 .header-menu .sublist li {
	position: relative;
}
.air-theme .header-menu .sublist li a,
.earth-theme.variant-1 .header-menu .sublist li a {
	display: block;
	position: relative;
	padding: 12px 25px;
	color: #666;
}
.air-theme .header-menu .sublist li a {
	font-size: 14px;
}
.earth-theme.variant-1 .header-menu .sublist li a {
	font-size: 15px;
}
.air-theme .header-menu .sublist li .with-subcategories:after,
.earth-theme.variant-1 .header-menu .sublist li .with-subcategories:after {
	content: "";
	position: absolute;
	right: 20px;
	width: 6px;
	height: 9px;
}
.air-theme .header-menu .sublist li .with-subcategories:after {
	top: 17px;
}
.earth-theme.variant-1 .header-menu .sublist li .with-subcategories:after {
	top: 20px;
}
.air-theme .header-menu .sublist-wrap .sublist-wrap {
	top: -20px;
	left: 100%;
}
.earth-theme.variant-1 .header-menu .sublist-wrap .sublist-wrap {
	top: -25px;
	left: 100%;
}

/* HEADER MENU, Air-2 */

.air-theme.variant-2 .header-menu-parent.hidden {
	visibility: hidden;
	opacity: 0;
}
.air-theme.variant-2 .header-menu-parent.visible {
	visibility: visible;
	opacity: 1;
}

/* HEADER MENU, Earth-2 */

.earth-theme.variant-2 .header-menu,
.earth-theme.variant-2 .header-menu .sublist-wrap {
    position: fixed;
    top: 0; left: 0;
	z-index: 1070;
	width: 500px;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
	text-align: left;
    transition: all 0.8s ease;
    -webkit-transform: translate(-100%);
    -ms-transform: translate(-100%);
    transform: translate(-100%);
}
.earth-theme.variant-2 .header-menu.open,
.earth-theme.variant-2 .header-menu .sublist-wrap.active {
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
}

.earth-theme.variant-2 .header-menu .close-menu,
.earth-theme.variant-2 .header-menu .back-button {
	padding: 20px;
	text-align: right;
	font-size: 0;
}
.earth-theme.variant-2 .header-menu .close-menu span,
.earth-theme.variant-2 .header-menu .back-button span {
	display: inline-block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #ccc;
	cursor: pointer;
}

.earth-theme.variant-2 .header-menu > ul li {
	position: relative;
	z-index: auto !important; /*overrides JS z-index reversing for the default desktop menu*/
	margin: 0 100px 0 80px;
	padding: 40px 0 0;
}
.earth-theme.variant-2 .header-menu > ul li:after {
	content: "";
	position: absolute;
	bottom: 5px;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 2px;
	background-color: #eee;
}
.earth-theme.variant-2 .header-menu > ul li > a {
	position: relative;
	min-height: 60px;
	background-color: #fff;
	padding: 0 10px 0 0;
	line-height: 24px;
	color: #aaa;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: 400;
}
.earth-theme.variant-2 .header-menu > ul li > a:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -100px;
	width: 0;
	height: 4px;
	margin: -2px 0 0;
	background-color: #007c5a;
	transition: all 0.2s ease;
}
.earth-theme.variant-2 .header-menu > ul li > a:hover:before {
	width: 80px;
}
.earth-theme.variant-2 .header-menu .plus-button {
	position: absolute;
	right: -48px;
	z-index: 1;
	float: right;
	width: 40px;
	height: 40px;
	border: 8px solid #fff;
	border-radius: 50%;
	background-color: #ccc;
	cursor: pointer;
	bottom: -4px;
}

.earth-theme.variant-2 .header-menu .sublist {
	width: 100% !important;
}
.earth-theme.variant-2 .header-menu li.back-button {
	margin: 0;
}
.earth-theme.variant-2 .header-menu li.back-button:after {
	display: none;
}

/* HEADER DROPDOWNS */

.store-search-box {
	z-index: auto;
	width: 100%;
	height: 100%;
	overflow: hidden;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
	background-color: rgba(255,255,255,0.75);
	padding: 0;
}
.desktop-device.scrollYRemove .store-search-box {
	width: calc(100% - 17px);
}
.store-search-box .close {
	display: inline-block;
	position: absolute;
	top: 22px;
	right: 22px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #ccc;
	cursor: pointer;
}
.store-search-box form {
	position: absolute;
	top: 28%;
	right: 0;
	left: 0;
	width: 600px;
	height: 80px;
	margin: auto;
	border-width: 2px 0;
	border-color: #ccc;
	padding: 10px 0;
}
.air-theme .search-box input.search-box-text {
	font-size: 18px;
}
.earth-theme .search-box input.search-box-text {
	font-size: 24px;
}
.search-box .search-box-button {
	border: none;
}
.search-box .ui-autocomplete {
	width: 600px !important;
	border-top: 10px solid #fff; /* pseudo offset */
}

/* --- inline header search (desktop) ---------------------------------------
   The search field is shown directly in the header, to the left of the
   profile/cart icons, instead of behind the magnifier.

   The box lives in the .header cell in the server-rendered markup
   (_Header.cshtml:9-12), on the opposite side of the header from those icons
   (.responsive-nav-wrapper, rendered by the layout-variant partial). Getting
   it next to them means moving the DOM node, not just restyling it - table
   layout cannot visually relocate a box into a sibling cell with CSS alone.
   element.js now does that move (see positionSearchBoxForBreakpoint), putting
   the box right before .personal-button - exactly where the magnifier
   (.search-wrap, hidden below) used to sit - and moving it back after
   .header-logo below 1025px, its original slot, so the overlay mode on
   phone/tablet is unaffected.

   SPECIFICITY: styles.css is registered AFTER this file (Head.cshtml:21-26)
   and media queries carry no specificity, so its `.store-search-box.active`
   (0,2,0) would beat a plain `.store-search-box` here. The
   `.desktop-nav-wrapper .responsive-nav-wrapper` prefix (0,3,0) is what makes
   these win - preferred over !important so it stays clear what is being
   overridden. */
.desktop-nav-wrapper .responsive-nav-wrapper-parent {
	width: 380px;
	max-width: 380px;
}
.desktop-nav-wrapper .responsive-nav-wrapper {
	height: auto;
	overflow: visible;
}
/* .active is matched too so a stray class toggle can never re-hide the field */
.desktop-nav-wrapper .responsive-nav-wrapper .store-search-box,
.desktop-nav-wrapper .responsive-nav-wrapper .store-search-box.active {
	display: inline-block;
	position: static;
	vertical-align: middle;
	width: 190px;
	height: auto;
	margin: 0 15px 0 0;
	box-shadow: none;
	overflow: visible;
	background-color: transparent;
	padding: 0;
	transition: none;
}
.desktop-nav-wrapper .responsive-nav-wrapper .store-search-box form {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	width: 100%;
	/* match the 50px icon squares beside it (.responsive-nav-wrapper span/a,
	   styles.css:1049) so the search field doesn't sit visibly shorter than
	   its neighbours */
	height: 50px;
	margin: 0;
	border-width: 1px;
	border-style: solid;
	border-color: #eee;
	padding: 0;
	/* An autocomplete plugin wraps the real <input> in its own
	   <span class="k-autocomplete k-input ...">, a direct child of this form.
	   Making the form itself the flex container lets that span stretch to
	   the form's full height via the default `align-items: stretch` -
	   simpler than sizing the span by hand. The absolutely-positioned
	   .search-box-button is unaffected: out-of-flow elements never
	   participate in flex layout. */
	display: flex;
	align-items: stretch;
}
/* the overlay sized its input for a 80px-tall centred form */
.desktop-nav-wrapper .responsive-nav-wrapper .search-box input.search-box-text {
	/* the widget's own wrapper now reserves the 40px the button needs (see
	   .k-input below), so this only needs a little breathing room before that
	   wrapper's own icon children, not the full button width itself */
	padding: 0 8px 0 12px;
	font-size: 13px;
}
/* Grow the widget's wrapper span to fill the row's width (it has no
   flex-grow of its own) and allow it to shrink below its content width so
   it doesn't push past the button - the actual stretching/filling of its
   height now comes for free from the form's flex context above.
   The wrapper's own box (Kendo's `.k-input`, `overflow: hidden`) still runs
   edge-to-edge across the full form width, right underneath the
   absolutely-positioned button - so its own trailing children (the loading
   spinner, the "clear" x) sat flush against that right edge too, i.e.
   directly behind the button. padding-right reserves the same 40px the
   button occupies so those icons land clear of it instead. */
.desktop-nav-wrapper .responsive-nav-wrapper .store-search-box .k-input {
	flex: 1;
	min-width: 0;
	padding-right: 40px;
}
.desktop-nav-wrapper .responsive-nav-wrapper .search-box .search-box-button {
	width: 40px;
	overflow: hidden;
	border: none;
	/* this button is a plate for the search-icon pseudo below, not a coloured
	   accent button - the accent background (styles.css:1135-1139, restated in
	   theme.custom-2.css:23-24) is meant to sit BEHIND the pseudo's white
	   plate + icon and never show, but pin it here directly so it can't leak
	   around the edges of the pseudo at this button's new, smaller size. */
	background-color: transparent !important;
}
/* nothing to close any more, and the magnifier is redundant - the search box
   now sits where it used to sit */
.desktop-nav-wrapper .responsive-nav-wrapper .store-search-box .close,
.desktop-nav-wrapper .responsive-nav-wrapper .search-wrap {
	display: none;
}
/* the 600px above was sized for the fullscreen overlay. The autocomplete list
   is appended into .search-box itself (SearchBox/Default.cshtml:90), so it can
   simply track the field width. */
.desktop-nav-wrapper .responsive-nav-wrapper .search-box .ui-autocomplete {
	width: 100% !important;
	border-top: none;
}
/* The generic ".responsive-nav-wrapper span/a" rules above turn every span/
   anchor in this wrapper into a 50x50 accent-coloured icon tile - correct for
   the six icon openers (menu-title, search-wrap, personal-button, wishlist,
   cart, filters: each exactly one span/a, one level deep), but now that the
   search box's whole form lives in this wrapper too, it also hijacks anything
   a search widget mounts inside it - e.g. an autocomplete plugin's Kendo
   loading-icon span (class "k-icon k-i-loading k-input-loading-icon
   k-hidden") - forcing it visible as a green block and defeating Kendo's own
   `.k-hidden` class. Reset those properties (not `display` - that stays
   whatever Kendo/the browser decides) for anything inside .store-search-box,
   and assert `.k-hidden`'s own contract defensively in case its stylesheet
   isn't the one loaded on this page.
   !important throughout: theme.custom-2.css (generated, loads after every
   other sheet per Head.cshtml) restates the accent background at equal
   specificity, so a plain override would lose the tie regardless of source
   order here. */
.responsive-nav-wrapper .store-search-box span,
.responsive-nav-wrapper .store-search-box a {
	height: auto !important;
	width: auto !important;
	font-size: inherit !important;
	background-color: transparent !important;
	cursor: auto !important;
}
.responsive-nav-wrapper .store-search-box span:before,
.responsive-nav-wrapper .store-search-box a:before,
.responsive-nav-wrapper .store-search-box span:after,
.responsive-nav-wrapper .store-search-box a:after {
	content: none !important;
	display: none !important;
}
.responsive-nav-wrapper .store-search-box .k-hidden {
	display: none !important;
}

.header-options {
	position: absolute;
	top: 100% !important;
	right: 5px;
	left: auto;
	z-index: auto;
	width: 270px;
	/* top: 100% resolves against .desktop-nav-wrapper's padding box (the only
	   positioned ancestor), so the panel already starts 15px below the icons.
	   Pull that padding back instead of adding to it. */
	margin-top: -15px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.header-selectors-wrapper {
	padding: 20px;
}
.header-selectors-wrapper > div {
	margin-top: 10px;
}
.header-links-wrapper {
	text-align: left;
}

.flyout-cart {
	display: none;
	position: absolute;
	top: 100%;
	right: 5px;
	width: 400px;
	margin-top: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	background-color: #f6f6f6;
	transition: all 0.3s ease;
}
.flyout-cart.active  {
	display: block;
}
.earth-theme .mini-shopping-cart {
	font-weight: 400;
}
.mini-shopping-cart .count {
	border-bottom: 1px solid #eee;
	background-color: #f6f6f6;
	padding: 20px;
	text-align: center;
	font-size: 14px;
}
.air-theme .mini-shopping-cart .count a {
	color: #eda187;
}
.earth-theme .mini-shopping-cart .count a {
	color: #007c5a;
}
.mini-shopping-cart .count a:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 17px;
	margin: 0 5px 0 0;
	vertical-align: middle;
}
/* theme.custom-2.css targets this exact selector with the accent bg at
   equal specificity but later load order - !important to win reliably */
.air-theme .mini-shopping-cart .count a:before,
.earth-theme .mini-shopping-cart .count a:before {
	background-color: transparent !important;
}
.mini-shopping-cart .items {
	position: relative;
	border-bottom: 1px solid #eee;
	overflow: hidden;
	background-color: #fff;
}
.mini-shopping-cart .item {
	display: table;
	width: 100%;
	margin: -10px 0 30px; /*perfect scrollbar container fix*/
	padding: 0 20px;
}
.mini-shopping-cart .item.first {
	margin-top: 30px;
}
.mini-shopping-cart .picture {
	display: table-cell;
	width: 120px;
	padding: 0 20px 0 0;
	text-align: center;
	vertical-align: top;
}
.mini-shopping-cart .picture a {
	display: block;
	position: relative;
	overflow: hidden;
}
.mini-shopping-cart .picture a:before {
	content: "";
	display: block;
	padding-top: 100%;
}
.mini-shopping-cart .picture img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-width: 100%;
}
.mini-shopping-cart .product {
	display: table-cell;
	position: relative;
	padding: 10px 0 60px;
	text-align: left;
	vertical-align: top;
}
.mini-shopping-cart .name {
	margin: 0 0 10px;
	color: #555;
	text-transform: uppercase;
}
.air-theme .mini-shopping-cart .name {
	font-size: 14px;
}
.earth-theme .mini-shopping-cart .name {
	font-size: 16px;
}
.mini-shopping-cart .attributes {
	display: none;
}
.mini-shopping-cart .quantity {
	font-size: 13px;
}
.mini-shopping-cart .price {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-width: 1px 0;
	border-style: solid;
	border-color: #eee;
	padding: 10px 15px;
	text-align: right;
}
.mini-shopping-cart .price span {
	font-size: 16px;
}
.air-theme .mini-shopping-cart .price span {
	font-weight: 700;
	color: #eda187;
}
.earth-theme .mini-shopping-cart .price span {
	font-weight: 400;
	color: #007c5a;
}
.mini-shopping-cart .totals {
	padding: 25px 20px;
	text-align: center;
	font-size: 18px;
}
.air-theme .mini-shopping-cart .totals strong {
	font-weight: 700;
	color: #eda187;
}
.earth-theme .mini-shopping-cart .totals strong {
	font-weight: 400;
	color: #007c5a;
}
.mini-shopping-cart .buttons {
	padding: 0 10px 20px;
	text-align: center;
}
.mini-shopping-cart button {
	display: inline-block;
	width: 46%;
	height: 55px;
	margin: 0 2%;
	color: #fff;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}
.mini-shopping-cart button:hover {
	opacity: 0.9;
}
.air-theme .mini-shopping-cart button {
	font-size: 14px;
}
.earth-theme .mini-shopping-cart button {
	font-size: 16px;
}
.air-theme .mini-shopping-cart .cart-button {
	background-color: #eda187;
}
.earth-theme .mini-shopping-cart .cart-button {
	background-color: #007c5a;
}
.mini-shopping-cart .checkout-button {
	background-color: #555;
}
.mini-shopping-cart button:before {
	content: "";
	display: inline-block;
	width: 33px;
	height: 33px;
	margin: 0 10px 0 0;
	vertical-align: middle;
}
.mini-shopping-cart button span {
	vertical-align: middle;
}
.mini-shopping-cart .cart-button:before {
}
.mini-shopping-cart .checkout-button:before {
}
.mini-shopping-cart button:only-child {
}
.mini-shopping-cart button + button {
}

/* HEADER VARIANTS DROPDOWNS */

.air-theme.variant-2.home-page-body .search-wrap {
	display: none;
}
.air-theme.variant-2 .responsive-nav-wrapper .personal-button {
	display: none;
}
.air-theme.variant-2 .header-options {
	right: auto;
	left: 5px;
}
.air-theme.variant-2 .header-options,
.air-theme.variant-2 .flyout-cart {
	z-index: 1040;
	transition: all 0.3s ease;
}
.air-theme.variant-2 .stick .header-options {
	left: -100%;
}
.air-theme.variant-2 .stick .flyout-cart {
	right: -100%;
}

.air-theme.variant-2 .search-box.static {
	display: block !important;
	position: relative;
	top: 0 !important;
	z-index: 99; /* higher than the possible number of slider images */
	width: 980px;
	margin: 100px auto 0;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
	overflow: visible;
	background-color: #fff;
	padding: 10px;
	transition: none;
}
.air-theme.variant-2 .slider-wrapper + .search-box.static {
	top: -35px !important;
	margin: auto;
}
.air-theme.variant-2 .search-box.static form {
	position: relative;
	top: 0;
	width: 100%;
	height: 60px;
	border: 1px solid #eee;
	padding: 0;
}
.air-theme.variant-2 .search-box .select-box {
	background-color: #333;
}
.air-theme.variant-2 .search-box.static .search-box-button {
	border-left: 1px solid #eee;
}
.air-theme.variant-2 .search-box.static .ui-autocomplete {
	width: calc(100% - 82px) !important;
	border: none;
}

/* FOOTER */

.newsletter-email {
	width: 560px;
	margin: auto;
}
.footer-columns {
	padding: 60px 30px;
}

/* LEFT/RIGHT COLUMN */

.block {
	float: none;
	width: auto;
	margin: 0 0 20px;
}
.block:last-child {
	margin: 0;
}
.block .listbox {
	display: block;
}
.block .title {
	padding: 15px 20px;
	cursor: default;
}
.block .title:before,
.block .title:after {
	display: none;
}
.block .title strong {
	display: block;
}

.block-recently-viewed-products li {
	padding: 10px 0;
	font-size: 0;
}
.block .product-picture {
	display: inline-block !important;
	width: 25%;
	padding: 0 10px !important;
	vertical-align: top;
}
.block .product-picture img {
	display: block;
	max-width: 100%;
}
.block .product-name {
	display: inline-block !important;
	width: 75%;
	padding: 0 10px !important;
	vertical-align: top;
}

/* CATEGORY PAGE & GRIDS */

.breadcrumb {
	width: 980px;
	margin: 0 auto 40px;
}
.home-page .item-box {
	text-align: center;
}
.item-box .buttons {
	position: absolute;
	bottom: -100px;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100px; /*fixed height required, depending on padding*/
	margin: 0;
	padding: 30px 0;
	opacity: 0.95;
	transition: all 0.4s ease;
}
.item-box .buttons.mobile {
	display: none;
}
.item-box .buttons.desktop {
	display: block;
}
.item-box:hover .buttons {
	bottom: 0;
}
.item-box .buttons button {
	display: inline-block;
	width: auto;
	position: relative;
	margin: 0 2px;
	overflow: visible; /*Ie fix*/
	padding: 0 3px;
	font-size: 0;
	transition: opacity 0.2s ease;
}
.item-box .buttons button:before {
	margin: 0;
}
.item-box .add-to-wishlist-button:before {
}
.item-box .add-to-compare-list-button:before {
}
.product-grid .item-box button span {
	position: absolute;
	bottom: -25px;
	left: 50%;
	background-color: rgba(255,255,255,0.8);
	padding: 5px 8px;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.air-theme .product-grid .item-box button span {
	font-size: 10px;
	color: #eda187;
}
.earth-theme .product-grid .item-box button span {
	font-size: 10px;
	letter-spacing: 0.5px;
	color: #007c5a;
}
.product-grid .item-box button span:before {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	margin: 0 0 0 -5px;
	border-width: 0 5px 5px;
	border-style: dashed dashed solid;
	border-color: transparent transparent rgba(255,255,255,0.8);
}
.product-grid .item-box button:hover span {
	opacity: 1;
}
.product-grid .swiper-pagination {
	display: none !important;
}

.category-page .products-wrapper .product-grid .item-box .buttons {
	background-color: transparent !important;
	padding: 26px 0;
}
.category-page .products-wrapper .product-grid .item-box .buttons button {
	opacity: 0;
	margin: 0 1px;
}
.category-page .products-wrapper .product-grid .item-box:hover .buttons button {
	opacity: 1;
}
.category-page .products-wrapper .product-grid .item-box .buttons button:before {
	box-sizing: content-box;
	border-width: 4px;
	border-style: solid;
	border-radius: 50%;
	border-color: #00a651;
	background-color: #00a651;
}

/* GENERIC hover-lane discs for every product grid. The circle treatment only
   ever existed on .category-page (above), the product-details collaterals
   (below) and .alternate-products; search / manufacturer / vendor /
   sub-category / the plain home grid / carousels / SPC tabs all got the flat
   accent BAR from 720.css:113 repainted by theme.custom-2.css:398 instead.

   :not(.alternate-products) is load-bearing, not cosmetic: that grid is itself
   a .product-grid and its own rules are only (0,3,x), so without the carve-out
   this block would shrink its 60px discs and blow out its 80px lane. */

/* (0,5,0) - clears theme.custom-2.css's `.earth-theme .item-box .buttons`
   background-color: #00a651 (0,3,0), which the theme DLL injects after every
   other sheet, so no !important is needed. Matching .buttons.desktop rather
   than .buttons also leaves the .mobile lane its labelled green bar. */
.product-grid:not(.alternate-products) .item-box .buttons.desktop {
	background-color: transparent;
	padding: 26px 0; /*26 + 48 + 26 = the fixed 100px lane height*/
}
/* 1320.css gives buttons an 8px gutter, too wide for five 48px discs */
.product-grid:not(.alternate-products) .item-box .buttons.desktop button {
	margin: 0 1px;
}
/* No `content` here on purpose - the per-button glyphs must keep coming from
   `.item-box button:before` (720.css) and the wishlist/compare rules in
   styles.css. box-sizing: content-box is required because the reset sets
   border-box globally, which would otherwise eat into the 40x40 instead of
   growing the disc to 48x48. */
.product-grid:not(.alternate-products) .item-box .buttons button:before {
	box-sizing: content-box;
	border-width: 4px;
	border-style: solid;
	border-radius: 50%;
	border-color: var(--el-accent, #00a651);
	background-color: var(--el-accent, #00a651);
	font-size: 16px;
}

/* The product-details collaterals (also-purchased, related, cross-sells) run
   the same hover lane as the home/category grids, but the baseline never gave
   them the circle treatment - the accent sat on the whole .buttons bar instead,
   so they render as one solid green block behind all four icons. Match the
   category grid: transparent bar, one accent disc per icon.
   background-color needs !important because theme.custom-2.css (generated from
   preset.less, injected after every other sheet) repaints .item-box .buttons
   with the accent at >=721px at the same specificity and would win the tie. */
.also-purchased-products-grid .item-box .buttons,
.related-products-grid .item-box .buttons,
.cross-sells .item-box .buttons {
	background-color: transparent !important;
	padding: 26px 0;
}
.also-purchased-products-grid .item-box .buttons button,
.related-products-grid .item-box .buttons button,
.cross-sells .item-box .buttons button {
	margin: 0 1px;
}
/* no `content` here on purpose - the per-button glyphs (cart / heart / compare
   / quick view) must keep coming from their own lower-specificity rules */
.also-purchased-products-grid .item-box .buttons button:before,
.related-products-grid .item-box .buttons button:before,
.cross-sells .item-box .buttons button:before {
	box-sizing: content-box;
	border-width: 4px;
	border-style: solid;
	border-radius: 50%;
	border-color: var(--el-accent, #00a651);
	background-color: var(--el-accent, #00a651);
	font-size: 16px;
}

.home-page-category-grid {
	width: 980px;
	margin: 50px auto 60px;
}
.sub-category-grid {
	margin: 50px 0 60px;
}
.home-page-category-grid .item-box,
.sub-category-grid .item-box {
	margin-bottom: 2%;
}
.home-page-category-grid .title,
.sub-category-grid .title {
	text-align: right;
}
.home-page-category-grid .title a,
.sub-category-grid .title a {
	display: inline-block;
}
.product-viewmode {
	width: 18%;
}

/* ALTERNATE FEATURED PRODUCTS */

.alternate-products {
	margin-bottom: 80px !important;
}
.alternate-products .item-box {
	clear: none;
	width: 24.25%;
	margin-bottom: 2%;
	margin-left: 1%;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	background-color: #fff;
	padding: 10px 10px 30px;
}
.alternate-products .item-box:nth-child(4n+1) {
	clear: both;
	margin-left: 0;
}
.alternate-products .item-box .details {
	padding: 0 10px;
}
.alternate-products .item-box .buttons {
	height: 80px;
	background-color: transparent !important;
	padding: 10px 0;
	opacity: 1;
}
.alternate-products .item-box .buttons:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: #fff;
	transition: all 0.2s ease;
}
.alternate-products .item-box .buttons button {
	opacity: 0;
}
.alternate-products .item-box button:nth-child(4) {
	display: none; /*hidden when the button lane is full*/
}
.alternate-products .item-box button:before {
	box-sizing: content-box;
	border-width: 10px;
	border-style: solid;
	border-radius: 50%;
}
.air-theme .alternate-products .item-box button:before {
	border-color: #eda187;
	background-color: #eda187;
}
.earth-theme .alternate-products .item-box button:before {
	border-color: #007c5a;
	background-color: #007c5a;
}
.alternate-products .item-box button span {
	display: none; /*tooltip hidden*/
}
.alternate-products .item-box button span:before {
	display: none;
}
.alternate-products .item-box:hover .buttons:before {
	height: 50%;
}
.alternate-products .item-box:hover .buttons button {
	opacity: 1;
}

/* PRODUCT PAGE */

.gallery {
	float: left;
	width: 48%;
}
.gallery .picture {
	width: auto;
}
.gallery .picture-gallery {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 14px;
}
.gallery .picture-wrapper,
.gallery .picture-gallery > .picture {
	flex: 1 1 auto;
	min-width: 0;
}
.gallery .picture-thumbs {
	display: flex;
	flex: 0 0 92px;
	flex-direction: column;
	width: 92px;
	max-height: 560px;
	margin: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
.gallery .picture-thumbs > li,
.gallery .picture-thumbs > .picture-thumb {
	display: block;
	margin: 0 0 10px;
}
.gallery .picture-thumbs > li:last-child,
.gallery .picture-thumbs > .picture-thumb:last-child {
	margin-bottom: 0;
}
/* the CloudZoom "thumbnails in carousel" setting renders thumbs through a slick
   slider (horizontal by default); neutralize its inline sizing so the thumbs
   lay out in the same vertical column instead of a horizontal strip */
.gallery .picture-thumbs.in-carousel .slick-slider,
.gallery .picture-thumbs.in-carousel .slick-list,
.gallery .picture-thumbs.in-carousel .slick-track {
	width: auto !important;
	height: auto !important;
	transform: none !important;
	position: static !important;
}
.gallery .picture-thumbs.in-carousel .slick-list {
	overflow: visible !important;
}
.gallery .picture-thumbs.in-carousel .slick-track {
	display: flex !important;
	flex-direction: column !important;
}
.gallery .picture-thumbs.in-carousel .slick-slide {
	float: none !important;
	width: 92px !important;
	margin: 0 0 10px !important;
}
.gallery .picture-thumbs.in-carousel .slick-prev,
.gallery .picture-thumbs.in-carousel .slick-next,
.gallery .picture-thumbs.in-carousel .slick-dots {
	display: none !important;
}
.gallery .picture-thumbs a {
	width: 92px;
	height: 92px;
}
.overview {
	float: right;
	width: 48%;
}

/* product details facelift: keep the theme's gallery/overview float pair (the
   full-width blocks below them clear it via `clear: both` in styles.css) and
   just give the two columns a bit more breathing room */
.product-details-page .gallery {
	width: 50%;
	padding-right: 20px;
}
.product-details-page .overview {
	width: 50%;
	padding-left: 20px;
}
.product-details-page .gallery .picture-thumbs {
	max-height: 600px;
}

.variant-picture {
	float: left;
	width: 250px;
	height: 250px;
	margin: 0;
}
.variant-overview {
	position: relative;
	float: right;
	width: 700px;
	min-height: 250px;
	padding: 0 0 110px;
}
.variant-overview .attributes {
	border: none;
	background-color: transparent;
	padding: 0;
}
.variant-overview .rental-attributes {
	margin-bottom: 0 !important;
}
.variant-overview .buttons-wrapper {
	display: table;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-top: 1px solid #eee;
	overflow: hidden;
	background-color: #f9f9f9;
	padding: 15px;
}
.variant-overview .prices,
.variant-overview .add-to-cart,
.variant-overview .add-to-wishlist {
	display: table-cell;
	vertical-align: middle;
	white-space: nowrap;
}
.variant-overview .add-to-cart {
	text-align: right;
}
.variant-overview .add-to-cart-panel > div {
	display: inline-block;
	margin: 0;
	vertical-align: middle;
}
.variant-overview .add-to-wishlist {
	width: 55px;
}
.variant-overview .add-to-wishlist-button {
	display: block;
	margin: 0 -5px 0 5px;
}
.ui-tabs .ui-tabs-panel {
	padding: 40px;
}
.product-details-page .item-box {
	width: 23.5%; /*four per row*/
}
.product-details-page .item-box:nth-child(3n+1) {
	clear: none;
	margin-left: 2%;
}
.product-details-page .item-box:nth-child(4n+1) {
	clear: both;
	margin-left: 0;
}
.product-details-page .item-box .prices {
	margin: 0;
}

/* REVIEW PAGE */

.product-review-item .review-item-head {
	float: left;
	width: 20%;
	margin: 0;
}
.product-review-item .review-info .user,
.product-review-item .review-info .avatar {
	padding: 0 20px 0 0;
}
.product-review-item .review-content {
	float: right;
	width: 80%;
}

/* WISHLIST & COMPARE LIST */

.wishlist-content .message-error {
	margin: -20px 0 20px;
}
.wishlist-page .share-info {
	margin: 0 0 80px;
}
.compare-products-page .button-wrapper {
	margin: 0 0 40px;
	text-align: center;
}
.compare-products-mobile {
	display: none;
}
.compare-products-table {
	display: table;
	margin: 0 0 80px;
}
.compare-products-table td {
	position: relative;
	border-width: 1px;
	border-style: solid;
	border-color: #eee transparent;
	padding: 20px;
	vertical-align: top;
	color: #555;
}
.compare-products-table td:first-child {
	min-width: 200px;
	border-color: #eee #eee #eee transparent;
	vertical-align: middle;
	color: #aaa;
}
.compare-products-table .product-picture {
	text-align: left;
	vertical-align: top;
	font-size: 0;
}
.compare-products-table .product-picture a {
	display: inline-block;
}
.compare-products-table .product-picture img {
	max-width: 230px; /*Ie fix*/
}
.compare-products-table .remove-button {
	position: absolute;
	top: 19px;
	left: 19px;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}
.earth-theme .compare-products-page .remove-button {
	text-transform: uppercase;
}
.compare-products-table .remove-button:hover {
	opacity: 1;
}
.air-theme .compare-products-table .remove-button:before {
	margin: 0 6px 0 -2px;
}
.earth-theme .compare-products-table .remove-button:before {
	margin: 0 8px 0 -2px;
}
.earth-theme .compare-products-page .product-name td {
	font-weight: 400;
}
.air-theme .compare-products-page .product-price td {
	font-weight: 700;
	color: #eda187;
}
.earth-theme .compare-products-page .product-price td {
	font-weight: 400;
	color: #007c5a;
}
.compare-products-table .full-description {
	display: none;
}

/* TOPICS */

.topic-password {
	width: 600px;
	margin: -150px auto 100px;
}

/* CONTACT PAGES */
/* REGISTRATION, LOGIN */

.registration-page .title,
.account-page .title {
	text-align: center;
}
.login-page .customer-blocks {
	margin-bottom: 40px;
}
.login-page .returning-wrapper {
	float: left;
	width: 49%;
}
.login-page .new-wrapper {
	float: right;
	width: 49%;
}
.air-theme .login-page .content {
	min-height: 170px;
}
.earth-theme .login-page .content {
	min-height: 190px;
}
.login-page .inner-wrapper .buttons {
	border-top: 1px solid #eee;
	padding: 30px 0 0;
}

/* ACCOUNT PAGES */

.customer-pages-body .center-2 {
	width: 100%;
}
.customer-pages-body .side-2 {
	display: none !important;
}

.block-account-navigation {
	margin: 10px 0 70px !important;
	border-bottom: 1px solid #eee;
	background-color: #f9f9f9;
	text-align: center;
}
.block-account-navigation .title {
	display: none;
}
.block-account-navigation .listbox {
	padding: 0;
	font-size: 0;
}
.block-account-navigation .list li {
	display: inline-block;
	margin: 2px 1px 0;
}
.block-account-navigation .list a {
	height: 50px;
	background-color: transparent;
	padding: 0 20px 0 50px;
	line-height: 50px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: all 0.2s ease;
}
.block-account-navigation .list a:before,
.block-account-navigation .list a:after {
	content: "";
	position: absolute;
	top: 13px;
	left: 15px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	transition: all 0.2s ease;
}
.air-theme .block-account-navigation .list a:before {
	background-color: #eda187;
}
.earth-theme .block-account-navigation .list a:before {
	background-color: #007c5a;
}
.block-account-navigation .list a:after {
	background-color: transparent;
	opacity: 0;
}

.air-theme .block-account-navigation .list a:hover,
.air-theme .block-account-navigation .list .active a {
	background-color: #eda187;
	color: #fff;
}
.earth-theme .block-account-navigation .list a:hover,
.earth-theme .block-account-navigation .list .active a {
	background-color: #007c5a;
	color: #fff;
}
.block-account-navigation .list a:hover:before,
.block-account-navigation .list .active a:before {
	background-color: transparent;
	opacity: 0;
}
.block-account-navigation .list a:hover:after,
.block-account-navigation .list .active a:after {
	opacity: 1;
}

.block-account-navigation .customer-info a:before {
}
.block-account-navigation .customer-addresses a:before {
}
.block-account-navigation .customer-orders a:before {
}
.block-account-navigation .return-requests a:before {
}
.block-account-navigation .downloadable-products a:before {
}
.block-account-navigation .back-in-stock-subscriptions a:before {
}
.block-account-navigation .reward-points a:before {
}
.block-account-navigation .change-password a:before {
}
.block-account-navigation .customer-avatar a:before {
}
.block-account-navigation .forum-subscriptions a:before {
}
.block-account-navigation .customer-reviews a:before {
}
.block-account-navigation .customer-vendor-info a:before {
}
.block-account-navigation .customer-gdpr a:before {
}
.block-account-navigation .customer-check-gift-card-balance a:before {
}
.block-account-navigation .price-match-requests a:before {
}

.block-account-navigation .customer-info a:after {
}
.block-account-navigation .customer-addresses a:after {
}
.block-account-navigation .customer-orders a:after {
}
.block-account-navigation .return-requests a:after {
}
.block-account-navigation .downloadable-products a:after {
}
.block-account-navigation .back-in-stock-subscriptions a:after {
}
.block-account-navigation .reward-points a:after {
}
.block-account-navigation .change-password a:after {
}
.block-account-navigation .customer-avatar a:after {
}
.block-account-navigation .forum-subscriptions a:after {
}
.block-account-navigation .customer-reviews a:after {
}
.block-account-navigation .customer-vendor-info a:after {
}
.block-account-navigation .customer-gdpr a:after {
}
.block-account-navigation .customer-check-gift-card-balance a:after {
}
.block-account-navigation .price-match-requests a:after {
}

/*.block-account-navigation .list span:after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 50%;
	margin: 0 0 0 -10px;
	border-width: 8px 10px 0 10px;
	border-style: solid dashed dashed;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.air-theme .block-account-navigation .list span:after {
	border-color: #eda187 transparent transparent;
}
.earth-theme .block-account-navigation .list span:after {
	border-color: #007c5a transparent transparent;
}
.block-account-navigation .list a:hover span:after,
.block-account-navigation .list .active a span:after {
	opacity: 1;
}*/

.account-page .page-body {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.back-in-stock-subscription-list-page,
.forum-subscriptions-page {
	margin: 0 0 40px;
}
.account-page .edit-address,
.account-page.order-list-page,
.return-request-list-page,
.change-password-page {
	margin: 20px 0 40px;
}
.recurring-payments {
	margin: 0 0 60px;
}
.page.avatar-page {
	margin: 20px 0 40px;
	text-align: center;
}
.account-page .review-item-head {
	width: 25%;
}
.account-page .review-content {
	width: 75%;
}
.account-page .review-info label {
	display: none;
}
.gdpr-tools-page form {
	overflow: hidden;
}
.gdpr-tools-page .fieldset {
	width: 49%;
	float: left;
}
.gdpr-tools-page .fieldset + .fieldset {
	float: right;
}
.gdpr-tools-page .form-fields {
	padding: 25px 5%;
}

/* SHOPPING CART */

.order-progress {
	margin: 0 0 90px;
}
.shopping-cart-page
.tax-shipping-info {
	text-align: right;
}
.options-wrapper:after {
	content: "";
	display: block;
	clear: both;
}
.checkout-attributes:not(.section) {
	float: left;
	margin-bottom: -5px !important;
	padding: 0 20px;
	text-align: left;
}
.checkout-attributes ul {
	padding: 5px 0;
}
.checkout-attributes li {
	margin: 0 10px 0 0 !important;
}
.checkout-attributes .attribute-squares li {
	margin: 5px 5px 5px -5px !important;
}
.selected-checkout-attributes {
	text-align: right;
}
.cart-estimate-shipping {
	float: right;
	margin-bottom: -5px !important;
	padding: 0 20px;
	text-align: right;
}
.cart-estimate-shipping > a {
	text-align: left;
}
.shopping-cart-page .cart-footer {
	margin-bottom: 80px;
}
.cart-footer:after {
	content: "";
	display: block;
	clear: both;
}
.cart-collaterals {
	float: left;
	width: 65%;
	max-width: none;
}
.cart-collaterals .deals {
	overflow: hidden;
	text-align: center;
}
.cart-collaterals .coupon-box,
.cart-collaterals .giftcard-box {
	float: left;
	width: 48.5%;
	background-color: #f9f9f9;
	padding: 25px 20px;
}
.cart-collaterals
.coupon-box + .giftcard-box {
	margin: 0 0 0 3%;
}
.cart-collaterals .inner-wrapper {
	display: block !important;
	height: auto !important;
}
.cart-footer .totals {
	float: right;
	width: 33%;
	max-width: none;
}
/* 33% leaves no room once a shipping method is chosen: a label like
   "Dostava: (PTT za pakete dolžine do 150 cm)" wraps over several lines and
   squeezes the amounts ("291,70 € brez DDV") into a wrap of their own. Only
   the cart's own block is widened - .opc / .ropc keep the narrower column. */
.shopping-cart-page .cart-footer .totals {
	width: 45%;
}
.cart-total .cart-total-left {
	padding: 5px 10px 5px 15px;
}
.cart-total .cart-total-right {
	padding: 5px 15px 5px 10px;
}

.cross-sells .item-box {
	width: 23.5%; /*four per row*/
}
.cross-sells .item-box:nth-child(3n+1) {
	clear: none;
	margin-left: 2%;
}
.cross-sells .item-box:nth-child(4n+1) {
	clear: both;
	margin-left: 0;
}

/* CHECKOUT */

.checkout-page .section .title {
	text-align: center;
}
.checkout-page .address-grid {
	overflow: hidden;
}
.checkout-page .address-item {
	float: left;
	width: 32%;
	margin: 0 0 2% 2%;
}
.checkout-page .address-item:nth-child(3n+1) {
	clear: both;
	margin-left: 0;
}
.checkout-page .address-item:only-child {
	display: block;
	float: none;
	max-width: 1000px;
	margin: auto;
}
.checkout-page .totals {
	width: 400px;
}
.opc .step-title .number {
	display: inline-block;
}

/* ORDER DETAILS & RETURN REQUEST */

.order-details-page .buttons {
	position: relative;
	top: 240px;
	margin: 0;
}
.order-details-page .order-overview {
	margin-top: 80px;
	text-align: center;
}
.order-details-page .options,
.order-details-page .actions {
	text-align: right;
}
.order-details-page .totals {
	width: 400px;
	margin: 0 0 30px auto;
}
.return-request-page {
	text-align: center;
}

/* SEARCH & SITEMAP */

.search-page-body .center-2,
.search-page-body .side-2 {
	padding-top: 10px;
}
.search-page .search-input {
	width: auto;
}
.sitemap-page {
	text-align: center;
}

/* BLOG & NEWS */

.blog-pages-body .center-2,
.blog-pages-body .side-2,
.news-pages-body .center-2,
.news-pages-body .side-2 {
	margin: 20px 0 60px !important;
}
.blog-page .post,
.news-items .news-item {
	margin: 0 auto 50px;
}
.blog-page .buttons,
.news-items .buttons {
	text-align: left;
}
.new-comment .title,
.comment-list .title {
	text-align: center;
}
.new-comment form {
	width: auto;
}

.news-list-homepage .news-items {
	width: 980px;
	overflow: hidden;
}
.news-list-homepage .news-item {
	display: block;
	float: left;
	width: 49%;
}
.news-list-homepage .news-item:nth-child(odd) {
	clear: both;
}
.news-list-homepage .news-item:nth-child(even) {
	margin-left: 2%;
}
.news-list-homepage .news-item:only-child {
	float: none;
	width: auto;
}
.news-list-homepage .news-body {
	max-height: 104px;
}

/* FORUM & PROFILE */

.forum-page .forum-name,
.forum-topic-page .topic-name,
.forums-main-page .topic-block-title,
.forum-group-page .forums-table-section-title,
.active-discussions-page .forums-table-section-title {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px;
	margin: 0;
}
.air-theme .forum-page .forum-name,
.air-theme .forum-topic-page .topic-name,
.air-theme .forums-main-page .topic-block-title,
.air-theme .forum-group-page .forums-table-section-title,
.air-theme .active-discussions-page .forums-table-section-title {
	background: url('../img/title-banner-1.jpg') center no-repeat;
}
.earth-theme .forum-page .forum-name,
.earth-theme .forum-topic-page .topic-name,
.earth-theme .forums-main-page .topic-block-title,
.earth-theme .forum-group-page .forums-table-section-title,
.earth-theme .active-discussions-page .forums-table-section-title {
	background: url('../img/title-banner-2.jpg') center no-repeat;
}
.forum-page .forum-name h1,
.forum-topic-page .topic-name h1,
.forums-main-page .topic-block-title h2,
.forum-group-page .forums-table-section-title a,
.active-discussions-page .forums-table-section-title strong {
	position: absolute;
	bottom: 58px;
	left: 0;
	width: 100%;
	color: #fff;
}
.air-theme .forum-page .forum-name h1,
.air-theme .forum-topic-page .topic-name h1,
.air-theme .forums-main-page .topic-block-title h2,
.air-theme .forum-group-page .forums-table-section-title a,
.air-theme .active-discussions-page .forums-table-section-title strong {
	font-size: 26px;
}
.earth-theme .forum-page .forum-name h1,
.earth-theme .forum-topic-page .topic-name h1,
.earth-theme .forums-main-page .topic-block-title h2,
.earth-theme .forum-group-page .forums-table-section-title a,
.earth-theme .active-discussions-page .forums-table-section-title strong {
	font-size: 28px;
}

.forums-main-page,
.forum-group-page {
	margin: 0 0 80px;
}
.forums-header {
	margin: 0 0 90px;
}
.forums-table-section {
	margin: 0 0 60px;
}
.active-discussions-page {
	margin: 0 0 80px;
}
.topic-post .post-info {
	width: 15%;
}
.topic-post .post-content {
	width: 85%;
}
.forum-edit-page,
.private-message-send-page {
	margin: 20px 0 80px;
}
.private-message-view-page .buttons {
	position: relative;
}
.private-message-view-page button.back-pm-button {
	position: absolute;
	top: 20px;
	left: 20px;
	margin: 0;
}
	/*Upraded CSS */
	.home-page-search-filter .advanced-search {
		padding: 30px;
	}

	/* RFQ CSS */
	.html-rfq-requests-page .master-column-wrapper,
	.html-rfq-request-page .master-column-wrapper {
		display: flex;
		flex-direction: column-reverse;
	}
	.html-rfq-requests-page .side-2,
	.html-rfq-request-page .side-2 {
		display: block !important;
		width: 100%;
		float: none;

	}
	.menu__grid-view .menu__group .sublist {
		width: 100% !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin-top: 8px;
	}
	.menu__grid-view .menu__group .sublist > li > a{
		padding: 5px 0 5px 10px !important;
	}
	.menu__grid-view .menu__group{
		width: calc((100% - 60px)/4);
		display: flex;
		flex-direction: column;
	}
	.menu__image-link {
		font-size: 18px;
		color: #333;
		text-transform: uppercase;
		font-weight: 400;
		margin-top: 20px;
		text-align: start;
	}
	.grid-menu-img-wrapper {
		display: flex;
		max-height: 200px;
	}
	.grid-menu-img-wrapper img{
		height: 100%;
		width: 100%;
	}
	.header-menu .sublist-wrap.menu__grid-view.active{
		display: flex !important;
	}
	.header-menu .sublist-wrap.menu__grid-view {
		left: 50%;
		flex-wrap: wrap;
		margin: auto;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
		background-color: #fff;
		padding: 20px;
		gap: 20px;
	}
}


/* ==========================================================================
   ICON GLYPHS (Font Awesome 7) - replaces header-navigation-sprite(-grey).png,
   close.png, arrow-white.png, flyout-cart-sprite.png, tick-color.png and
   account-navigation-sprite.png at this breakpoint (>=1025px).
   ========================================================================== */

/* earth-theme header nav swaps to the near-black plate at this width */
.earth-theme .responsive-nav-wrapper span:before,
.earth-theme .responsive-nav-wrapper a:before {
	background-color: #1e1e1e;
	color: #fff;
}

/* variant-2 header tiles: air = white plate/black icon (same sheet as base),
   earth = near-black plate/white icon (grey sheet) */
.air-theme.variant-2 .menu-title-wrapper span,
.earth-theme.variant-2 .menu-title-wrapper span {
	position: relative;
}
.air-theme.variant-2 .menu-title-wrapper span:before,
.earth-theme.variant-2 .menu-title-wrapper span:before {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}
.air-theme.variant-2 .menu-title-wrapper span:before   { background-color: #fff; color: #000; }
.earth-theme.variant-2 .menu-title-wrapper span:before { background-color: #1e1e1e; color: #fff; }
.air-theme.variant-2 .menu-title-wrapper .personal-button span:before { content: "\f007"; font-weight: 400; }
.earth-theme.variant-2 .menu-title-wrapper .menu-title span:before    { content: "\f0c9"; }
.earth-theme.variant-2 .menu-title-wrapper .search-wrap span:before   { content: "\f002"; }

/* mega-menu close / back / expand discs and the search-box close: all
   GLYPH white icons on the existing #ccc discs, no plate needed.
   .plus-button and .store-search-box .close already have their own
   `position: absolute` in the baseline (self-pinned to a corner) - adding
   `position: relative` here would silently overwrite that and drop them
   into normal flow, so they're excluded from this list. */
.earth-theme.variant-2 .header-menu .close-menu span,
.earth-theme.variant-2 .header-menu .back-button span {
	position: relative;
}
.earth-theme.variant-2 .header-menu .close-menu span:before,
.earth-theme.variant-2 .header-menu .back-button span:before,
.earth-theme.variant-2 .header-menu .plus-button:before,
.store-search-box .close:before {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-style: normal;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	-webkit-font-smoothing: antialiased;
}
.earth-theme.variant-2 .header-menu .close-menu span:before,
.store-search-box .close:before                             { content: "\f00d"; }
.earth-theme.variant-2 .header-menu .back-button span:before { content: "\f104"; }
.earth-theme.variant-2 .header-menu .plus-button:before      { content: "\f105"; }

/* mini cart flyout: tick is a KNOCKOUT on a plate matching the panel's own
   #f6f6f6, so it blends in and only the accent-coloured tick shows;
   the cart/checkout icons sit on the near-black flyout-cart-sprite plate */
.mini-shopping-cart .count a:before {
	content: "\f00c";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-style: normal;
	font-size: 12px;
	line-height: 1;
	color: var(--el-accent, #00a651);
	-webkit-font-smoothing: antialiased;
}
.mini-shopping-cart button:before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-style: normal;
	font-size: 16px;
	line-height: 1;
	color: #fff;
	-webkit-font-smoothing: antialiased;
}
.mini-shopping-cart .cart-button:before     { content: "\f07a"; }
.mini-shopping-cart .checkout-button:before { content: "\f09d"; }

/* account nav flyout: KNOCKOUT accent icons on discs matching the panel bg,
   :before = default state, :after = hover/active state (both painted, only
   one visible at a time via opacity, same as the original two-row sheet) */
.block-account-navigation .list a:before,
.block-account-navigation .list a:after {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-style: normal;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0;
	/* white, not the accent: the :before disc is painted with the accent green
	   (#007c5a earth / #eda187 air) right above this block, so an accent glyph
	   was invisible on it. The :after state sits on the green hovered row, so
	   white is right there too. */
	color: #fff;
	-webkit-font-smoothing: antialiased;
}
.block-account-navigation .list a:hover:before,
.block-account-navigation .list .active a:before,
.block-account-navigation .list a:hover:after,
.block-account-navigation .list .active a:after { color: #fff; }
.block-account-navigation .customer-info a:before                    { content: "\f007"; font-weight: 400; }
.block-account-navigation .customer-addresses a:before               { content: "\f2b9"; font-weight: 400; }
.block-account-navigation .customer-orders a:before                  { content: "\f15c"; font-weight: 400; }
.block-account-navigation .customer-recurring-payments a:before      { content: "\f021"; }
.block-account-navigation .customer-multiFactor-authentication a:before { content: "\f023"; }
.block-account-navigation .return-requests a:before                  { content: "\f0e2"; }
.block-account-navigation .downloadable-products a:before            { content: "\f019"; }
.block-account-navigation .back-in-stock-subscriptions a:before      { content: "\f0f3"; font-weight: 400; }
.block-account-navigation .reward-points a:before                    { content: "\f51e"; }
.block-account-navigation .change-password a:before                  { content: "\f084"; }
.block-account-navigation .customer-avatar a:before                  { content: "\f03e"; font-weight: 400; }
.block-account-navigation .forum-subscriptions a:before              { content: "\f086"; font-weight: 400; }
.block-account-navigation .customer-reviews a:before                 { content: "\f005"; font-weight: 400; }
.block-account-navigation .customer-vendor-info a:before             { content: "\f2c2"; font-weight: 400; }
.block-account-navigation .customer-gdpr a:before                    { content: "\f3ed"; }
.block-account-navigation .customer-check-gift-card-balance a:before { content: "\f06b"; }
.block-account-navigation .price-match-requests a:before             { content: "\f571"; }
.block-account-navigation .customer-info a:after                    { content: "\f007"; font-weight: 400; }
.block-account-navigation .customer-addresses a:after               { content: "\f2b9"; font-weight: 400; }
.block-account-navigation .customer-orders a:after                  { content: "\f15c"; font-weight: 400; }
.block-account-navigation .customer-recurring-payments a:after      { content: "\f021"; }
.block-account-navigation .customer-multiFactor-authentication a:after { content: "\f023"; }
.block-account-navigation .return-requests a:after                  { content: "\f0e2"; }
.block-account-navigation .downloadable-products a:after            { content: "\f019"; }
.block-account-navigation .back-in-stock-subscriptions a:after      { content: "\f0f3"; font-weight: 400; }
.block-account-navigation .reward-points a:after                    { content: "\f51e"; }
.block-account-navigation .change-password a:after                  { content: "\f084"; }
.block-account-navigation .customer-avatar a:after                  { content: "\f03e"; font-weight: 400; }
.block-account-navigation .forum-subscriptions a:after              { content: "\f086"; font-weight: 400; }
.block-account-navigation .customer-reviews a:after                 { content: "\f005"; font-weight: 400; }
.block-account-navigation .customer-vendor-info a:after             { content: "\f2c2"; font-weight: 400; }
.block-account-navigation .customer-gdpr a:after                    { content: "\f3ed"; }
.block-account-navigation .customer-check-gift-card-balance a:after { content: "\f06b"; }
.block-account-navigation .price-match-requests a:after             { content: "\f571"; }

/* item-box wishlist/compare hover buttons (>=1025px lane) */
.item-box .add-to-wishlist-button:before     { content: "\f004"; font-weight: 900; }
.item-box .add-to-compare-list-button:before { content: "\f0ec"; }

/* category-page hard-coded #00a651 circle (48x48) sizes its glyph down so it
   lines up with the 60x60 circle used elsewhere. It must NOT declare `content`:
   at 5 classes it outranks `.item-box .add-to-wishlist-button:before` and would
   force the cart glyph onto the wishlist and compare buttons too. The default
   cart glyph already comes from `.item-box button:before` in 720.css. */
.category-page .products-wrapper .product-grid .item-box .buttons button:before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-style: normal;
	font-size: 16px;
	line-height: 1;
	color: #fff;
	-webkit-font-smoothing: antialiased;
}
