/*============================================================================
style-colors.scss

    -This file contains all the theme styles related to settings defined by user from config/settings.txt
    -Rest of styling can be found in:
        --static/css/style-async.scss --> For non critical styles witch will be loaded asynchronously
        --static/css/style-critical.scss --> For critical CSS rendered inline before the rest of the site

==============================================================================*/
/*============================================================================
  Table of Contents
  #Components
    // Margin and Padding
    // Mixins
    // SVG Icons
    // Texts
    // Animations
    // Wrappers
    // Placeholders
    // Dividers    
    // Headings
    // Buttons
    // Links
    // Chips
    // Progress bar 
    // Modals
    // Forms
    // Alerts and Notifications
    // Tooltip
    // Images
    // Tables
    // Tabs
    // Cards
    // Sliders
  #Home page
    // Home banners
    // Video
    // Instafeed
    // Newsletter
  #Product grid
    // Category controls
    // Grid item
    // Labels
  #Product detail
    // Image
    // Form and info
  #Header and nav
    // Header
    // Utilities
    // Search
    // Nav
  #Footer
    // Copyright
  #Media queries
    // Min width 768px
    //// Components
    //// Product grid

==============================================================================*/
/*============================================================================
  #Components
==============================================================================*/
/* // Margin and Padding */
.legacy .section-footer {
  margin-bottom: 70px;
}

.legacy .element-footer, .legacy .contact-item, .legacy .social-share, .legacy .category-header {
  margin-bottom: 20px;
}

/* // Mixins */
/* This mixin adds browser prefixes to a CSS property */
/* // SVG Icons */
.legacy .svg-icon-text {
  fill: var(--main-foreground);
}

.legacy .svg-icon-accent {
  fill: var(--accent-color);
}

.legacy .svg-icon-invert {
  fill: var(--main-background);
}

.legacy .icon-circle {
  background: var(--main-foreground-opacity-10);
}

.legacy .icon-svg-mask, .legacy .footer-colors .alert-danger:before, .legacy .footer-colors .alert-success:before, .legacy .search-empty-btn:before, .legacy .search-submit-btn:before, .legacy .head-main .search-btn.search-submit-btn:before, .legacy .section-newsletter-home-colors .alert-danger:before, .legacy .section-newsletter-home-colors .alert-success:before, .legacy .item-actions .alert:before, .legacy .alert-success:before, .legacy .alert-info:before, .legacy .alert-warning:before, .legacy .alert-danger:before, .legacy .alert-error:before, .legacy .password-toggle-show:before, .legacy .password-toggle-hide:before, .legacy .input-clear-content:before, .legacy .btn-primary .form-spinner:before {
  content: "";
  background-color: currentColor;
  -webkit-mask-position: center;
  -ms-mask-position: center;
  -moz-mask-position: center;
  -o-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -ms-mask-repeat: no-repeat;
  -moz-mask-repeat: no-repeat;
  -o-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.legacy {
  --icon-search: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.28,474.35l-115.05-115.47c28.37-35.14,45.42-79.8,45.42-128.48,0-113.11-91.69-204.8-204.8-204.8S29.06,117.29,29.06,230.4s91.69,204.8,204.8,204.8c55.27,0,105.32-21.99,142.17-57.58l114.32,114.73c4.95,4.97,12.99,4.97,17.94,0,4.96-4.97,4.96-13.03,0-18.01Zm-274.42-64.75c-98.97,0-179.2-80.23-179.2-179.2S134.89,51.2,233.86,51.2s179.2,80.23,179.2,179.2-80.23,179.2-179.2,179.2Z"/></svg>');
  --icon-search-clear: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256,274.92,72.67,458.25l-18.1-18.1L237.9,256.82,54.57,73.49l18.1-18.11L256,238.72,439.33,55.38l18.1,18.11L274.1,256.82,457.43,440.15l-18.1,18.1Z"/></svg>');
  --icon-btn-spinner: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M460.115 373.846l-6.941-4.008c-5.546-3.202-7.564-10.177-4.661-15.886 32.971-64.838 31.167-142.731-5.415-205.954-36.504-63.356-103.118-103.876-175.8-107.701C260.952 39.963 256 34.676 256 28.321v-8.012c0-6.904 5.808-12.337 12.703-11.982 83.552 4.306 160.157 50.861 202.106 123.67 42.069 72.703 44.083 162.322 6.034 236.838-3.14 6.149-10.75 8.462-16.728 5.011z"/></svg>');
  --icon-input-clear: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256.08,293.13L81.85,467.36l-36.19-36.19,174.23-174.23L45.66,82.71l36.19-36.19,174.23,174.23L430.31,46.52l36.19,36.19-174.23,174.23,174.23,174.23-36.19,36.19-174.23-174.23Z"/></svg>');
  --icon-password-hide: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"/></svg>');
  --icon-password-show: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"/></svg>');
  --icon-alert: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-11.49 120h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.556 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z"/></svg>');
  --icon-alert-success: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z"/></svg>');
  --icon-alert-warning: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M270.2 160h35.5c3.4 0 6.1 2.8 6 6.2l-7.5 196c-.1 3.2-2.8 5.8-6 5.8h-20.5c-3.2 0-5.9-2.5-6-5.8l-7.5-196c-.1-3.4 2.6-6.2 6-6.2zM288 388c-15.5 0-28 12.5-28 28s12.5 28 28 28 28-12.5 28-28-12.5-28-28-28zm281.5 52L329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.8 0 60-40 41.5-72zM528 480H48c-12.3 0-20-13.3-13.9-24l240-416c6.1-10.6 21.6-10.7 27.7 0l240 416c6.2 10.6-1.5 24-13.8 24z"/></svg>');
}

/* // Texts */
.legacy .text-secondary {
  color: var(--main-background);
}

.legacy .text-accent,
.legacy .product-installments.installment-no-interest {
  color: var(--accent-color) !important;
}

/* // Animations */
.legacy .swiper-text {
  transition: all 0.5s ease;
}

/* // Wrappers */
.legacy {
  color: var(--main-foreground);
  fill: var(--main-foreground);
  font-family: var(--body-font);
  background-color: var(--main-background);
  font-size: var(--font-base);
}

.legacy .box {
  float: left;
  width: 100%;
  margin-bottom: 20px;
  padding: 15px;
}

/* // Placeholders */
.legacy .placeholder-color {
  background-color: var(--main-foreground-opacity-20);
}

.legacy .placeholder-shine,
.legacy .placeholder-fade {
  background-color: var(--main-foreground-opacity-20);
}

.legacy .placeholder-shine-invert {
  background-color: var(--main-background-opacity-50);
}

.legacy .placeholder-overlay {
  background-color: var(--main-foreground-opacity-30);
  opacity: 0;
}
.legacy .placeholder-overlay:hover, .legacy .placeholder-overlay:active, .legacy .placeholder-overlay:focus {
  opacity: 1;
}

.legacy .placeholder-info {
  color: var(--main-foreground);
  fill: var(--main-foreground);
  background-color: var(--main-background);
}
.legacy .placeholder-info .placeholder-button {
  color: var(--main-background);
  background-color: var(--main-foreground);
  opacity: 1;
}
.legacy .placeholder-info .placeholder-button:hover {
  opacity: 0.8;
}

.legacy .spinner::before {
  background-color: var(--main-foreground);
}

/* // Dividers */
.legacy .divider {
  margin-top: 20px;
  margin-bottom: 20px;
  clear: both;
  border-bottom: var(--border-solid) var(--main-foreground-opacity-10);
}

.legacy .bottom-line {
  border-bottom: var(--border-solid) var(--main-foreground-opacity-10);
}

.legacy .line {
  border: var(--border-solid) var(--main-foreground-opacity-30);
}

.legacy .opacity-10-line {
  border: var(--border-solid) var(--main-foreground-opacity-10);
}

/* Headings */
.legacy .page-header h1, .legacy .page-header .h1 {
  margin-bottom: 0;
}

.legacy .category-header h1, .legacy .category-header .h1 {
  margin-bottom: 0;
}

.legacy .h1-huge,
.legacy h1,
.legacy .h1,
.legacy h2,
.legacy .h2,
.legacy h3,
.legacy .h3,
.legacy h4,
.legacy .h4,
.legacy h5,
.legacy .h5,
.legacy h6,
.legacy .h6 {
  margin-top: 0;
  font-family: var(--heading-font);
  font-weight: var(--title-font-weight);
}

/* // Buttons */
.legacy .btn {
  margin: 0;
  text-decoration: none;
  text-align: center;
  border: 0;
  cursor: pointer;
  font-size: var(--font-small);
  line-height: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  white-space: normal;
  background: none;
  -webkit-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.legacy .btn:hover, .legacy .btn:focus {
  outline: 0;
  opacity: 0.8;
}
.legacy .btn[disabled], .legacy .btn.disabled, .legacy .btn[disabled]:hover, .legacy .btn.disabled:hover {
  opacity: 0.8;
  cursor: not-allowed;
  outline: 0;
}
.legacy .btn-default {
  display: block;
  padding: 11px 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--main-background);
  fill: var(--main-background);
  background-color: var(--main-foreground);
  -webkit-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.legacy .btn-default:hover, .legacy .btn-default:focus {
  background-color: var(--main-foreground);
  color: --main-background-opacity-90;
}
.legacy .btn-primary {
  padding: 11px 15px;
  background-color: var(--button-background);
  color: var(--button-foreground);
  fill: var(--button-foreground);
}
.legacy .btn-primary:hover, .legacy .btn-primary:focus {
  color: var(--button-foreground);
}
.legacy .btn-primary[disabled], .legacy .btn-primary.disabled, .legacy .btn-primary[disabled]:hover, .legacy .btn-primary.disabled:hover {
  background-color: var(--button-background);
  color: var(--button-foreground);
  fill: var(--button-foreground);
}
.legacy .btn-primary .form-spinner:before {
  -webkit-mask-image: var(--icon-btn-spinner);
  -ms-mask-image: var(--icon-btn-spinner);
  -moz-mask-image: var(--icon-btn-spinner);
  -o-mask-image: var(--icon-btn-spinner);
  mask-image: var(--icon-btn-spinner);
}
.legacy .btn-secondary {
  padding: 9px 15px;
  background-color: var(--main-foreground-opacity-10);
  color: var(--main-foreground);
  fill: var(--main-foreground);
}
.legacy .btn-secondary:hover {
  color: var(--main-foreground);
  background-color: var(--main-foreground-opacity-05);
}
.legacy .btn-block {
  width: 100%;
}
.legacy .btn-big {
  padding: 13px;
}
.legacy .btn-medium {
  padding: 10px 15px;
  font-size: var(--font-base);
}
.legacy .btn-small {
  display: inline-block;
  padding: 8px 10px;
  font-size: var(--font-smallest);
  line-height: var(--font-base);
}
.legacy .btn-small-quickshop {
  display: block;
  margin: 0 auto;
  padding: 0 20px 0 0;
  border: 0;
  background: none;
}
.legacy .btn-smallest {
  display: inline-block;
  padding: 5px 8px;
  font-size: var(--font-smallest);
  line-height: var(--font-smallest);
}
.legacy .btn-append {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
  width: 42px;
  height: 42px;
  border-radius: 0;
  border-left: var(--border-solid) var(--main-foreground-opacity-30);
  text-indent: -99999px;
}
.legacy .btn-append .btn-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 10px;
  font-size: 18px;
}
.legacy .btn-append .btn-icon.icon-spin {
  top: 2px;
  left: 15px;
}
.legacy .btn-variant {
  display: inline-block;
  font-size: var(--font-small);
  line-height: 10px;
  min-width: 24px;
  min-height: 24px;
  margin: 0 8px 10px 0;
  border: var(--border-solid) var(--main-foreground-opacity-30);
  color: var(--main-foreground);
  font-weight: normal;
  text-transform: initial;
  vertical-align: top;
}
.legacy .btn-variant-content {
  display: block;
  min-width: var(--font-big);
  min-height: var(--font-big);
  margin: 4px;
  line-height: var(--font-big);
}
.legacy .btn-variant-content-square {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 2px;
}
.legacy .btn-variant.selected {
  color: var(--main-foreground);
  border-color: var(--main-foreground);
  border: var(--border-solid) var(--main-foreground);
}
.legacy .btn-variant-no-stock {
  position: relative;
  background: transparent;
  color: var(--main-foreground-opacity-50);
}
.legacy .btn-variant-no-stock:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top left, transparent 49%, var(--main-foreground-opacity-50), transparent 52%);
  content: "";
}
.legacy .btn-variant-no-stock.selected:after {
  background: linear-gradient(to top left, transparent 49%, var(--main-foreground), transparent 52%);
}
.legacy .btn-variant-no-stock.btn-variant-color:after {
  background: linear-gradient(-45deg, var(--main-background-opacity-30) calc(50% - 0.7px), var(--main-foreground-opacity-50) calc(50% - 0.7px), var(--main-foreground-opacity-50) 50%, var(--main-foreground-opacity-50) calc(50% + 0.7px), var(--main-background-opacity-30) calc(50% + 0.7px));
}
.legacy .btn-variant-no-stock.btn-variant-color.selected:after {
  background: linear-gradient(-45deg, var(--main-background-opacity-30) calc(50% - 0.7px), var(--main-foreground) calc(50% - 0.7px), var(--main-foreground) 50%, var(--main-foreground) calc(50% + 0.7px), var(--main-background-opacity-30) calc(50% + 0.7px));
}
.legacy .btn-facebook {
  background-color: #1977f2;
  color: white;
  border: none;
}
.legacy .btn-facebook-icon:before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="white"><path d="M1024 512a512 512 0 1 0-592 505.8V660H302V512h130V399.2C432 270.9 508.4 200 625.4 200c56 0 114.6 10 114.6 10v126h-64.6c-63.6 0-83.4 39.5-83.4 80v96h142l-22.7 148H592v357.8A512 512 0 0 0 1024 512z"/></svg>');
}
.legacy .btn-facebook:hover {
  background: #1977f2;
  color: #fff;
}
.legacy .btn-facebook:hover .svg-fb-icon {
  fill: #fff;
}

.legacy .btn-icon {
  position: relative;
  width: 38px;
  height: 38px;
  font-size: 0;
  line-height: 20px;
}
.legacy .btn-icon:before {
  position: absolute;
  top: 15px;
  left: 20px;
  width: 20px;
  height: 20px;
}

.legacy button {
  cursor: pointer;
}
.legacy button:focus {
  outline: 0;
  opacity: 0.8;
}

/* // Links */
.legacy a {
  color: var(--main-foreground);
  -webkit-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.legacy a:hover, .legacy a:focus {
  color: var(--main-foreground-opacity-50);
}
.legacy a.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.legacy .link-contrast {
  color: var(--main-background);
}
.legacy .link-contrast:hover, .legacy .link-contrast:focus {
  color: --main-background-opacity-80;
}

.legacy .btn-link, .legacy .search-suggestions .search-suggestions-all-link {
  color: var(--main-foreground);
  fill: var(--main-foreground);
  cursor: pointer;
  text-decoration: underline;
  font-size: var(--font-base);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
}
.legacy .btn-link.invert, .legacy .search-suggestions .invert.search-suggestions-all-link {
  color: var(--main-background);
  fill: var(--main-background);
}
.legacy .btn-link.invert:hover, .legacy .search-suggestions .invert.search-suggestions-all-link:hover, .legacy .btn-link.invert:focus, .legacy .search-suggestions .invert.search-suggestions-all-link:focus {
  color: var(--main-background);
  fill: var(--main-background);
  opacity: 0.5;
}
.legacy .btn-link-primary {
  color: var(--button-background);
  fill: var(--button-background);
}
.legacy .btn-link-primary:hover, .legacy .btn-link-primary:focus {
  color: var(--button-background);
  fill: var(--button-background);
  opacity: 0.5;
}
.legacy .btn-link.no-underline, .legacy .search-suggestions .no-underline.search-suggestions-all-link {
  text-decoration: none;
}

/* // Accordions */
.legacy .accordion {
  border-bottom: var(--border-solid) var(--main-foreground-opacity-10);
}

/* // Chips */
.legacy .chip {
  color: var(--main-foreground);
  fill: var(--main-foreground);
  background-color: var(--main-background);
  border: 1px solid var(--main-foreground);
}

/* // Progress bar */
.legacy .bar-progress {
  background: var(--main-foreground-opacity-10);
}
.legacy .bar-progress-active {
  background: var(--accent-color);
}
.legacy .bar-progress-check {
  background-color: var(--accent-color);
  fill: var(--main-background);
  border: 2px solid var(--main-background);
}

/* // Modals */
.legacy .modal {
  color: var(--main-foreground);
  fill: var(--main-foreground);
  background-color: var(--main-background);
}
.legacy .modal-header, .legacy.modal-header {
  background-color: var(--main-foreground-opacity-03);
  -webkit-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.legacy .modal-header:hover, .legacy.modal-header:hover, .legacy .modal-header:focus, .legacy.modal-header:focus {
  opacity: 0.8;
}
.legacy .modal-sticky-close, .legacy.modal-sticky-close {
  background-color: var(--main-background);
}
.legacy .modal-drawer .modal-close-floating, .legacy.modal-drawer .modal-close-floating {
  background-color: transparent;
}
.legacy .modal-drawer .modal-close-floating .svg-icon-text, .legacy.modal-drawer .modal-close-floating .svg-icon-text {
  fill: var(--main-background);
}
.legacy .modal .search-container {
  background-color: var(--main-foreground-opacity-03);
}
.legacy .modal-body, .legacy.modal-body, .legacy .modal-scrollable-area, .legacy.modal-scrollable-area {
  background-color: var(--main-background);
}
.legacy .modal-shadow, .legacy.modal-shadow {
  box-shadow: 0 0 8px 4px var(--main-foreground-opacity-10);
}
.legacy .modal .modal-footer, .legacy.modal .modal-footer {
  background-color: var(--main-background);
}
.legacy .modal-overlay, .legacy.modal-overlay {
  background-color: var(--main-foreground-opacity-80);
}

/* // Forms */
.legacy input,
.legacy textarea {
  font-family: var(--body-font);
}

.legacy .form-label-divider {
  border-bottom: var(--border-solid) var(--main-foreground-opacity-10);
}

.legacy .form-control::-webkit-input-placeholder {
  color: var(--main-foreground-opacity-30);
}

.legacy .form-control:-moz-placeholder {
  color: var(--main-foreground-opacity-30);
}

.legacy .form-control::-moz-placeholder {
  color: var(--main-foreground-opacity-30);
}

.legacy .form-control:-ms-input-placeholder {
  color: var(--main-foreground-opacity-30);
}

.legacy .form-control,
.legacy .form-select,
.legacy .form-quantity {
  display: block;
  width: 100%;
  margin: 0;
  padding: 11px;
  font-size: var(--font-small);
  font-family: var(--body-font);
  line-height: 16px;
  text-align: left;
  border: var(--border-solid) var(--main-foreground-opacity-30);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--main-foreground);
  fill: var(--main-foreground);
  background-color: transparent;
  -webkit-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.legacy .form-control:hover,
.legacy .form-select:hover,
.legacy .form-quantity:hover {
  border-color: var(--main-foreground-opacity-50);
}
.legacy .form-control:hover + .form-select-icon,
.legacy .form-select:hover + .form-select-icon,
.legacy .form-quantity:hover + .form-select-icon {
  fill: var(--main-foreground);
}
.legacy .form-control:focus,
.legacy .form-select:focus,
.legacy .form-quantity:focus {
  outline: 0px !important;
  -webkit-appearance: none;
}
.legacy .form-control-inline,
.legacy .form-select-inline,
.legacy .form-quantity-inline {
  display: inline;
  padding-right: 30px;
}
.legacy .form-control-transparent,
.legacy .form-select-transparent,
.legacy .form-quantity-transparent {
  background: transparent;
}
.legacy .form-control-opacity,
.legacy .form-select-opacity,
.legacy .form-quantity-opacity {
  background-color: --main-background-opacity-30;
}
.legacy .form-control-small,
.legacy .form-select-small,
.legacy .form-quantity-small {
  padding: 8px 10px;
  font-size: var(--font-small);
}
.legacy .form-control-big,
.legacy .form-select-big,
.legacy .form-quantity-big {
  padding: 13px;
}

.legacy .card .form-select {
  background-color: var(--main-background);
}

.legacy .form-select-options {
  padding: 0;
  background-color: var(--main-background);
  border: 1px solid var(--main-foreground-opacity-30);
}

.legacy .form-select-options::-webkit-scrollbar {
  width: 7px;
}

.legacy .form-select-options::-webkit-scrollbar-track {
  background: var(--main-foreground-opacity-50);
  border-radius: 6px;
}

.legacy .form-select-options::-webkit-scrollbar-thumb {
  background: var(--main-foreground-opacity-50);
  border-radius: 6px;
}

.legacy .form-select-option:hover,
.legacy .form-select-option:active {
  background-color: var(--main-foreground-opacity-03);
}

.legacy .form-select-option.selected {
  background-color: var(--main-foreground-opacity-05);
}

.legacy .form-select-icon {
  fill: var(--main-foreground);
}

.legacy .form-control-btn {
  position: absolute;
  right: 0;
  z-index: 9;
  width: 46px;
  height: 100%;
  text-align: center;
}
.legacy .form-control-btn-icon {
  width: 18px;
  height: 18px;
}

.legacy .form-quantity {
  padding: 0;
}
.legacy .form-quantity .form-control {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  border: 0;
  text-align: center;
}
.legacy .form-quantity.small {
  width: 90px;
  padding: 15px;
}
.legacy .form-quantity-product svg {
  margin-top: 9px;
  font-size: 15px;
}

.legacy input::-webkit-inner-spin-button,
.legacy input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.legacy input[type=number] {
  -moz-appearance: textfield;
}

.legacy .search-input {
  height: 100%;
  padding-right: 45px;
  font-size: var(--font-small);
}

/* IOS form CSS to avoid autozoom on focus */
.legacy .form-control-ios,
.legacy .form-group-quantity-ios .form-control-ios {
  /* enlarge by 16/12 = 133.33% */
  font-size: 18px;
  line-height: 30px;
  width: 133.333333333%;
  margin-bottom: -15px;
  /* scale down by 12/16 = 75% */
  transform: scale(0.75);
  transform-origin: left top;
  transition: none;
}
.legacy .form-control-ios.search-input,
.legacy .form-group-quantity-ios .form-control-ios.search-input {
  height: 58px;
  margin-bottom: -5px;
  font-size: 16px;
  border-radius: var(--border-radius-half);
}

.legacy .form-control-ios.form-control-area {
  margin-bottom: -64px;
}

.legacy .form-group-quantity-ios .form-control-ios {
  padding-top: 6px;
  line-height: 39px;
}

.legacy .search-container-ios {
  height: 90px;
}
.legacy .search-container-ios .form-group {
  height: 100%;
}

.legacy .head-main .search-container-ios {
  height: 44px;
}

.legacy .shipping-container-ios .form-control-submit {
  bottom: 18px;
}

.legacy .cart-quantity-container-ios {
  height: 22px;
}
.legacy .cart-quantity-container-ios .form-control-ios {
  padding-left: 8px;
}

.legacy .form-select {
  cursor: pointer;
}
.legacy .form-select.btn {
  font-size: 10px;
}
.legacy .form-select.btn.btn-medium {
  padding: 6px 8px;
}
.legacy .form-select.btn.btn-medium .form-select-icon {
  bottom: 7px;
}

.legacy .input-clear-content:before {
  -webkit-mask-image: var(--icon-input-clear);
  -ms-mask-image: var(--icon-input-clear);
  -moz-mask-image: var(--icon-input-clear);
  -o-mask-image: var(--icon-input-clear);
  mask-image: var(--icon-input-clear);
}

.legacy .radio-button-icon.unchecked {
  background-color: var(--main-background);
  border: var(--border-solid) var(--main-foreground);
}
.legacy .radio-button-icon.checked {
  background-color: var(--main-foreground);
}

.legacy .list-item-icon,
.legacy .list .radio-button .radio-button-content .radio-button-icon {
  background-color: var(--main-foreground);
}

.legacy .checkbox-container .checkbox-icon {
  background: var(--main-background);
  border: var(--border-solid) var(--main-foreground);
}
.legacy .checkbox-container .checkbox-icon:after {
  border: solid var(--main-foreground);
  border-width: 0 1px 1px 0;
}
.legacy .checkbox-container .checkbox:hover,
.legacy .checkbox-container input:checked ~ .checkbox {
  color: var(--main-foreground);
  fill: var(--main-foreground);
}
.legacy .checkbox-container .checkbox:hover .checkbox-icon,
.legacy .checkbox-container input:checked ~ .checkbox .checkbox-icon {
  border: var(--border-solid) var(--main-foreground);
}
.legacy .checkbox-container .checkbox-color {
  border: var(--border-solid) var(--main-foreground-opacity-30);
}

.legacy .password-toggle-hide:before {
  -webkit-mask-image: var(--icon-password-hide);
  -ms-mask-image: var(--icon-password-hide);
  -moz-mask-image: var(--icon-password-hide);
  -o-mask-image: var(--icon-password-hide);
  mask-image: var(--icon-password-hide);
}

.legacy .password-toggle-show:before {
  -webkit-mask-image: var(--icon-password-show);
  -ms-mask-image: var(--icon-password-show);
  -moz-mask-image: var(--icon-password-show);
  -o-mask-image: var(--icon-password-show);
  mask-image: var(--icon-password-show);
}

/* // Alerts and notifications */
.legacy .alert {
  border: var(--border-solid);
  border-radius: var(--border-radius-half);
}
.legacy .alert:before {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 1px 5px 0 0;
  vertical-align: top;
}
.legacy .alert-danger, .legacy .alert-error {
  color: var(--danger);
  border-color: var(--danger);
}
.legacy .alert-danger:before, .legacy .alert-error:before {
  -webkit-mask-image: var(--icon-alert);
  -ms-mask-image: var(--icon-alert);
  -moz-mask-image: var(--icon-alert);
  -o-mask-image: var(--icon-alert);
  mask-image: var(--icon-alert);
}
.legacy .alert-warning {
  color: var(--warning);
  border-color: var(--warning);
}
.legacy .alert-warning:before {
  -webkit-mask-image: var(--icon-alert-warning);
  -ms-mask-image: var(--icon-alert-warning);
  -moz-mask-image: var(--icon-alert-warning);
  -o-mask-image: var(--icon-alert-warning);
  mask-image: var(--icon-alert-warning);
}
.legacy .alert-info {
  color: #71b5dc;
  border-color: #71b5dc;
}
.legacy .alert-info:before {
  -webkit-mask-image: var(--icon-alert);
  -ms-mask-image: var(--icon-alert);
  -moz-mask-image: var(--icon-alert);
  -o-mask-image: var(--icon-alert);
  mask-image: var(--icon-alert);
}
.legacy .alert-success {
  color: var(--success);
  border-color: var(--success);
}
.legacy .alert-success:before {
  -webkit-mask-image: var(--icon-alert-success);
  -ms-mask-image: var(--icon-alert-success);
  -moz-mask-image: var(--icon-alert-success);
  -o-mask-image: var(--icon-alert-success);
  mask-image: var(--icon-alert-success);
}
.legacy .alert-primary {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.legacy .item-actions .alert {
  color: var(--main-foreground);
  background-color: var(--main-background);
  box-shadow: var(--shadow-distance) var(--main-foreground-opacity-20);
  border-radius: var(--border-radius-half);
}
.legacy .item-actions .alert:before {
  -webkit-mask-image: var(--icon-alert);
  -ms-mask-image: var(--icon-alert);
  -moz-mask-image: var(--icon-alert);
  -o-mask-image: var(--icon-alert);
  mask-image: var(--icon-alert);
}

.legacy .notification-primary {
  color: var(--main-foreground);
  fill: var(--main-foreground);
  background-color: var(--main-background);
  border-top: var(--border-solid) var(--main-foreground-opacity-07);
  border-bottom: var(--border-solid) var(--main-foreground-opacity-07);
}
.legacy .notification-primary.notification-fixed-bottom {
  border-top: var(--border-solid) var(--main-foreground-opacity-07);
  border-bottom: none;
}
.legacy .notification-arrow-up {
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--main-background);
  border-left: 10px solid transparent;
}
.legacy .notification-floating .notification-primary {
  border: var(--border-solid) var(--main-foreground-opacity-07);
}
.legacy .notification-secondary {
  background: var(--accent-color);
  color: var(--main-background);
  fill: var(--main-background);
}
.legacy .notification-tertiary {
  color: var(--accent-color);
}
.legacy .notification-img svg {
  border-radius: var(--border-radius-circle);
  background: var(--main-background);
}
.legacy .notification-danger {
  color: var(--danger);
}

/* // Tooltip */
.legacy .tooltip {
  background: var(--main-background);
  color: var(--main-foreground);
  border: var(--border-solid) var(--main-foreground);
}
.legacy .tooltip-icon {
  border: var(--border-solid) var(--main-foreground);
}
.legacy .tooltip-arrow {
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--main-foreground);
}
.legacy .tooltip-arrow:after {
  position: absolute;
  top: 1px;
  right: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--main-background);
  content: "";
}

.legacy .tooltip-card {
  background: var(--main-background);
}

/* // Images */
.legacy .card-img-pill {
  background-color: var(--main-background);
  color: var(--main-foreground);
}
.legacy .card-img-small {
  border-radius: 2px;
}

/* // Tables */
.legacy .table {
  background-color: var(--main-background);
  color: var(--main-foreground);
}
.legacy .table tbody tr:nth-child(odd) {
  background-color: var(--main-foreground-opacity-05);
}
.legacy .table tbody.table-body-inverted tr:nth-child(odd) {
  background-color: var(--main-background);
}
.legacy .table tbody.table-body-inverted tr:nth-child(even) {
  background-color: var(--main-foreground-opacity-05);
}
.legacy .table th {
  padding: 8px;
  text-align: left;
}

/* // Tabs */
.legacy .tab-group .tab-link {
  border-bottom: var(--border-solid) var(--main-foreground-opacity-20);
  color: var(--main-foreground);
}
.legacy .tab-group .tab.active .tab-link {
  border-bottom: var(--border-solid) var(--main-foreground);
}

/* Cards */
.legacy .card,
.legacy .box {
  background-color: var(--main-foreground-opacity-03);
}

/* // Sliders */
.legacy .swiper-text {
  opacity: 0;
  bottom: 0;
  left: -60px;
  color: var(--main-foreground);
}
.legacy .swiper-text-centered {
  top: 40%;
  bottom: initial;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.legacy .swiper-text-light {
  color: var(--main-background);
}

.legacy .swiper-slide-active .swiper-text {
  left: 0;
  opacity: 1;
}

.legacy .swiper-slide-active .swiper-text-centered {
  top: 50%;
  left: 50%;
  opacity: 1;
}

.legacy .swiper-text-light {
  color: var(--main-background);
  border-color: var(--main-background);
}
.legacy .swiper-text-light .btn-link, .legacy .swiper-text-light .search-suggestions .search-suggestions-all-link, .legacy .search-suggestions .swiper-text-light .search-suggestions-all-link {
  color: var(--main-background);
}

.legacy .swiper-arrows-light .swiper-button-next,
.legacy .swiper-arrows-light .swiper-button-prev {
  fill: var(--main-background);
}

.legacy .swiper-pagination-bullet,
.legacy .swiper-pagination-bullet-active {
  background-color: var(--main-foreground);
}

/*============================================================================
  #Home Page
==============================================================================*/
/* // Home banners */
.legacy .textbanner-text.over-image {
  color: var(--main-foreground);
}
.legacy .textbanner-text.over-image.over-image-invert {
  color: var(--main-background);
}
.legacy .textbanner-text.over-image.over-image-invert .btn-link, .legacy .textbanner-text.over-image.over-image-invert .search-suggestions .search-suggestions-all-link, .legacy .search-suggestions .textbanner-text.over-image.over-image-invert .search-suggestions-all-link {
  color: var(--main-background);
}

.legacy .home-category-name {
  color: var(--main-background);
}

.legacy .home-category-overlay {
  background: var(--main-foreground-opacity-30);
}

/* // Video */
.legacy .embed-responsive {
  background: var(--main-foreground);
}

.legacy .video-player-icon {
  background: var(--main-background);
}
.legacy .video-player-icon .svg-icon-text {
  fill: var(--main-foreground);
}

.legacy .home-video-text,
.legacy .home-video-text-bottom {
  color: var(--main-background);
}
.legacy .home-video-text .btn-link, .legacy .home-video-text .search-suggestions .search-suggestions-all-link, .legacy .search-suggestions .home-video-text .search-suggestions-all-link, .legacy .home-video-text-bottom .btn-link, .legacy .home-video-text-bottom .search-suggestions .search-suggestions-all-link, .legacy .search-suggestions .home-video-text-bottom .search-suggestions-all-link {
  color: var(--main-background);
}

.legacy .home-video-overlay:after {
  background: linear-gradient(transparent, var(--main-foreground-opacity-40));
}

/* // Instafeed */
.legacy .instafeed-title {
  color: var(--main-foreground);
}

.legacy .instafeed-info {
  color: var(--main-background);
  background: var(--main-foreground-opacity-40);
}

/* // Newsletter */
.legacy .section-newsletter-home {
  background: var(--main-foreground-opacity-10);
}

.legacy .section-newsletter-home-colors {
  background: var(--newsletter-background);
  color: var(--newsletter-foreground);
}
.legacy .section-newsletter-home-colors .form-control {
  color: var(--newsletter-foreground);
  border-color: var(--news-foreground-opacity-30);
}
.legacy .section-newsletter-home-colors .form-control:hover, .legacy .section-newsletter-home-colors .form-control:active {
  border-color: var(--newsletter-foreground);
}
.legacy .section-newsletter-home-colors .btn-link, .legacy .section-newsletter-home-colors .search-suggestions .search-suggestions-all-link, .legacy .search-suggestions .section-newsletter-home-colors .search-suggestions-all-link {
  color: var(--newsletter-foreground);
}
.legacy .section-newsletter-home-colors .form-control::-webkit-input-placeholder {
  color: var(--news-foreground-opacity-50);
}
.legacy .section-newsletter-home-colors .form-control:-moz-placeholder {
  color: var(--news-foreground-opacity-50);
}
.legacy .section-newsletter-home-colors .form-control::-moz-placeholder {
  color: var(--news-foreground-opacity-50);
}
.legacy .section-newsletter-home-colors .form-control:-ms-input-placeholder {
  color: var(--news-foreground-opacity-50);
}
.legacy .section-newsletter-home-colors .alert-success,
.legacy .section-newsletter-home-colors .alert-danger {
  color: var(--newsletter-foreground);
  border-color: var(--newsletter-foreground);
}
.legacy .section-newsletter-home-colors .alert-success:before {
  -webkit-mask-image: var(--icon-alert-success);
  -ms-mask-image: var(--icon-alert-success);
  -moz-mask-image: var(--icon-alert-success);
  -o-mask-image: var(--icon-alert-success);
  mask-image: var(--icon-alert-success);
}
.legacy .section-newsletter-home-colors .alert-danger:before {
  -webkit-mask-image: var(--icon-alert);
  -ms-mask-image: var(--icon-alert);
  -moz-mask-image: var(--icon-alert);
  -o-mask-image: var(--icon-alert);
  mask-image: var(--icon-alert);
}

/* // Informative banners */
.legacy .section-informative-banners-colors {
  background: var(--services-background);
  color: var(--services-foreground);
  fill: var(--services-foreground);
}
.legacy .section-informative-banners-colors a {
  color: var(--services-foreground);
}
.legacy .section-informative-banners-colors .svg-icon-text {
  fill: var(--services-foreground);
}

/*============================================================================
  #Product grid
==============================================================================*/
/* // Category controls */
.legacy .category-controls {
  background-color: var(--main-background);
  color: var(--main-foreground);
}

.legacy .category-controls.category-controls-transparent {
  background-color: transparent;
}

.legacy .filters-overlay {
  background-color: var(--main-background-opacity-95);
}

/* // Grid item */
.legacy .item, .legacy .card, .legacy .box {
  -webkit-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.legacy .item-link {
  color: var(--main-foreground);
  fill: var(--main-foreground);
}
.legacy .item-price {
  color: var(--main-foreground);
}
.legacy .item-colors-bullet {
  border: 1px solid var(--main-foreground-opacity-50);
}
.legacy .item-colors-bullet-more {
  border: none;
}

.legacy .modal-quickshop .alert-warning, .legacy.modal-quickshop .alert-warning {
  background-color: var(--main-background);
}

/* // Labels */
.legacy .label {
  background: var(--main-background);
  color: var(--main-foreground);
}
.legacy .label.label-accent {
  background: var(--label-background);
  color: var(--label-foreground);
  fill: var(--label-foreground);
}
.legacy .label.label-default {
  background: var(--main-foreground);
  color: var(--main-background);
}
.legacy .label.label-outline, .legacy .label.label-outline-success {
  display: inline-block;
  background: transparent;
  border: var(--border-solid) currentColor;
  border-radius: 100px;
}
.legacy .label.label-outline-success {
  color: var(--success);
}

.legacy .item-slider-pagination-container {
  background: var(--main-background-opacity-20);
}

/*============================================================================
  #Product detail
==============================================================================*/
/* // Image */
.legacy .product-video-container {
  background-color: var(--main-foreground-opacity-07);
}

.fancybox__toolbar {
  color: var(--main-background);
  background: transparent !important;
  text-shadow: none !important;
}

.fancybox__container .fancybox__backdrop {
  background: var(--main-foreground-opacity-80);
}

.carousel__button .svg-icon-text {
  fill: var(--main-background);
  filter: none;
}

/* // Form and info */
.legacy .social-share .social-share-button {
  color: var(--main-foreground);
}

/*============================================================================
  #Contact page
==============================================================================*/
/* // Data contact */
.legacy .contact-item-icon {
  fill: var(--main-foreground);
}

.legacy .contact-link {
  color: var(--main-foreground);
}

/*============================================================================
  #Header and nav
==============================================================================*/
/* // Header */
.legacy .head-main {
  color: var(--header-foreground);
  fill: var(--header-foreground);
  background-color: var(--header-background);
}
.legacy .head-main .btn-link, .legacy .head-main .search-suggestions .search-suggestions-all-link, .legacy .search-suggestions .head-main .search-suggestions-all-link {
  color: var(--header-foreground);
  fill: var(--header-foreground);
}
.legacy .head-main .section-adbar {
  background-color: var(--adbar-background);
  color: var(--adbar-foreground);
  fill: var(--adbar-foreground);
}
.legacy .head-main .section-adbar a,
.legacy .head-main .section-adbar .svg-icon-text {
  color: var(--adbar-foreground);
  fill: var(--adbar-foreground);
}
.legacy .head-main .form-control {
  background-color: var(--header-background);
  color: var(--header-foreground);
  fill: var(--header-foreground);
  border: var(--border-solid) var(--header-foreground-opacity-30);
}
.legacy .head-main .form-control::-webkit-input-placeholder {
  color: var(--header-foreground);
}
.legacy .head-main .form-control:-moz-placeholder {
  color: var(--header-foreground);
}
.legacy .head-main .form-control::-moz-placeholder {
  color: var(--header-foreground);
}
.legacy .head-main .form-control:-ms-input-placeholder {
  color: var(--header-foreground);
}
.legacy .head-main a,
.legacy .head-main .svg-icon-text {
  color: var(--header-foreground);
  fill: var(--header-foreground);
}
.legacy .head-main .search-btn {
  color: var(--header-foreground);
}
.legacy .head-main .search-btn.search-submit-btn:before {
  -webkit-mask-image: var(--icon-search);
  -ms-mask-image: var(--icon-search);
  -moz-mask-image: var(--icon-search);
  -o-mask-image: var(--icon-search);
  mask-image: var(--icon-search);
}
.legacy .head-main .search-suggestions {
  background-color: var(--header-background);
}
.legacy .head-main .search-suggestions a,
.legacy .head-main .search-suggestions .btn-link,
.legacy .head-main .search-suggestions .search-suggestions-all-link {
  color: var(--header-foreground);
  fill: var(--header-foreground);
}
.legacy .head-main .nav-primary {
  background-color: var(--header-background);
}
.legacy .head-main .nav-primary .nav-list .nav-item {
  border-color: var(--header-foreground-opacity-20);
}
.legacy .head-main .notification-primary a {
  color: var(--main-foreground);
  fill: var(--main-foreground);
}
.legacy .head-main .notification-primary .btn-primary {
  color: var(--button-foreground);
  fill: var(--button-foreground);
}

.legacy .nav-list-panel {
  color: var(--main-foreground);
  fill: var(--main-foreground);
  background-color: var(--main-background);
}

.legacy .modal-nav-hamburger .nav-secondary, .legacy.modal-nav-hamburger .nav-secondary {
  border-top: var(--border-solid) var(--main-foreground-opacity-05);
}

/* Header transparent */
.legacy .head-transparent,
.legacy .head-transparent-on-section,
.legacy .head-transparent .form-control,
.legacy .head-transparent-on-section .form-control {
  background: transparent;
}

.legacy .head-transparent:hover,
.legacy .head-transparent-on-section:hover {
  background: var(--header-background);
}

.legacy .head-transparent-on-section.head-transparent-contrast:not(:hover) {
  color: var(--header-transparent-foreground);
  fill: var(--header-transparent-foreground);
}

.legacy .head-transparent-on-section.head-transparent-contrast:not(:hover) .badge {
  color: var(--header-transparent-foreground);
}

.legacy .head-transparent-on-section.head-transparent-contrast:not(:hover) .form-control {
  color: var(--header-transparent-foreground);
  fill: var(--header-transparent-foreground);
  border: var(--border-solid) var(--header-transparent-foreground);
}

.legacy .head-transparent-on-section.head-transparent-contrast:not(:hover) .form-control::-webkit-input-placeholder {
  color: var(--header-transparent-foreground);
}

.legacy .head-transparent-on-section.head-transparent-contrast:not(:hover) .form-control:-moz-placeholder {
  color: var(--header-transparent-foreground);
}

.legacy .head-transparent-on-section.head-transparent-contrast:not(:hover) .form-control:-ms-input-placeholder {
  color: var(--header-transparent-foreground);
}

.legacy .head-transparent-on-section.head-transparent-contrast:not(:hover) .form-control::-webkit-input-placeholder {
  color: var(--header-transparent-foreground);
}

.legacy .head-transparent-on-section.head-transparent-contrast:not(:hover) a,
.legacy .head-transparent-on-section.head-transparent-contrast:not(:hover) .svg-icon-text,
.legacy .head-transparent-on-section.head-transparent-contrast:not(:hover) .search-btn {
  color: var(--header-transparent-foreground);
  fill: var(--header-transparent-foreground);
}

.legacy .head-transparent-on-section.head-transparent-contrast .section-adbar a,
.legacy .head-transparent-on-section.head-transparent-contrast .section-adbar .svg-icon-text {
  color: var(--adbar-foreground);
  fill: var(--adbar-foreground);
}

/* // Nav */
.legacy .desktop-dropdown {
  background-color: var(--main-background);
  border-bottom: var(--border-solid) var(--main-foreground-opacity-10);
}
.legacy .desktop-dropdown .nav-item a {
  color: var(--main-foreground);
}

.legacy .desktop-dropdown-small {
  background-color: var(--header-background);
}

.legacy .desktop-dropdown::-webkit-scrollbar-track {
  background: var(--main-foreground-opacity-50);
}

.legacy .desktop-dropdown::-webkit-scrollbar-thumb {
  background: var(--main-foreground-opacity-40);
}

.legacy .desktop-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--main-foreground);
}

/* // Search */
.legacy .search-btn {
  color: var(--main-foreground);
}

.legacy .search-submit-btn:before {
  -webkit-mask-image: var(--icon-search);
  -ms-mask-image: var(--icon-search);
  -moz-mask-image: var(--icon-search);
  -o-mask-image: var(--icon-search);
  mask-image: var(--icon-search);
}

.legacy .search-empty-btn:before {
  -webkit-mask-image: var(--icon-search-clear);
  -ms-mask-image: var(--icon-search-clear);
  -moz-mask-image: var(--icon-search-clear);
  -o-mask-image: var(--icon-search-clear);
  mask-image: var(--icon-search-clear);
}

.legacy .search-suggestions {
  background-color: var(--main-background);
  border: var(--border-solid) var(--main-foreground-opacity-07);
}
.legacy .search-suggestions a {
  color: var(--main-foreground);
  fill: var(--main-foreground);
}
.legacy .modal-nav-search .search-suggestions, .legacy.modal-nav-search .search-suggestions {
  border: none;
}

/*============================================================================
  #Footer
==============================================================================*/
.legacy footer {
  color: var(--footer-foreground);
  background: var(--footer-background);
}
.legacy footer a,
.legacy footer .contact-link,
.legacy footer .footer-menu-item {
  color: var(--footer-foreground);
}
.legacy footer a:hover {
  color: var(--footer-foreground-opacity-80);
}
.legacy footer svg {
  fill: var(--footer-foreground);
}
.legacy footer .form-control {
  color: var(--footer-foreground);
  border-color: var(--footer-foreground-opacity-30);
}
.legacy footer .form-control:hover, .legacy footer .form-control:active {
  border-color: var(--footer-foreground-opacity-60);
}
.legacy footer .form-select {
  color: var(--footer-foreground);
  background-color: transparent;
  border-color: var(--footer-foreground);
}
.legacy footer .form-select:hover, .legacy footer .form-select:active {
  border-color: var(--footer-foreground-opacity-60);
}
.legacy footer .form-select-icon {
  background-color: var(--footer-background);
}
.legacy footer .form-control::-webkit-input-placeholder {
  color: var(--footer-foreground);
}
.legacy footer .form-control:-moz-placeholder {
  color: var(--footer-foreground);
}
.legacy footer .form-control::-moz-placeholder {
  color: var(--footer-foreground);
}
.legacy footer .form-control:-ms-input-placeholder {
  color: var(--footer-foreground);
}
.legacy footer .footer-payments-shipping-logos img {
  border: var(--border-solid) var(--footer-foreground-opacity-80);
}

.legacy .footer-colors .divider,
.legacy .footer-colors .accordion {
  border-color: var(--footer-foreground-opacity-10);
}
.legacy .footer-colors .btn-link, .legacy .footer-colors .search-suggestions .search-suggestions-all-link, .legacy .search-suggestions .footer-colors .search-suggestions-all-link {
  color: var(--footer-foreground);
}
.legacy .footer-colors .btn-primary {
  background-color: var(--footer-foreground);
  color: var(--footer-background);
}
.legacy .footer-colors .btn-primary:hover, .legacy .footer-colors .btn-primary:focus {
  background-color: var(--footer-foreground);
  color: var(--footer-background);
}
.legacy .footer-colors .alert-success,
.legacy .footer-colors .alert-danger {
  color: var(--footer-foreground);
  border-color: var(--footer-foreground);
}
.legacy .footer-colors .alert-success:before {
  -webkit-mask-image: var(--icon-alert-success);
  -ms-mask-image: var(--icon-alert-success);
  -moz-mask-image: var(--icon-alert-success);
  -o-mask-image: var(--icon-alert-success);
  mask-image: var(--icon-alert-success);
}
.legacy .footer-colors .alert-danger:before {
  -webkit-mask-image: var(--icon-alert);
  -ms-mask-image: var(--icon-alert);
  -moz-mask-image: var(--icon-alert);
  -o-mask-image: var(--icon-alert);
  mask-image: var(--icon-alert);
}

.legacy .powered-by-logo svg {
  fill: var(--footer-foreground);
}

/*============================================================================
  #Media queries
==============================================================================*/
/* // Min width 768px */
@media (min-width: 768px) {
  /* //// Components */
  .legacy .btn-smallest {
    padding: 8px;
    font-size: var(--font-small);
    line-height: var(--font-base);
  }
  .legacy .btn-medium-md {
    padding: 10px 15px;
    font-size: var(--font-base);
    line-height: 18px;
    letter-spacing: 0;
  }
  .legacy .modal-drawer .modal-close-floating .svg-icon-text, .legacy.modal-drawer .modal-close-floating .svg-icon-text {
    fill: var(--main-foreground);
  }
  .legacy .modal::-webkit-scrollbar-track,
  .legacy .modal-scrollable-area::-webkit-scrollbar-track, .legacy.modal-scrollable-area::-webkit-scrollbar-track {
    background: var(--main-foreground-opacity-50);
  }
  .legacy .modal::-webkit-scrollbar-thumb,
  .legacy .modal-scrollable-area::-webkit-scrollbar-thumb, .legacy.modal-scrollable-area::-webkit-scrollbar-thumb {
    background: var(--main-foreground-opacity-40);
  }
  .legacy .modal::-webkit-scrollbar-thumb:hover,
  .legacy .modal-scrollable-area::-webkit-scrollbar-thumb:hover, .legacy.modal-scrollable-area::-webkit-scrollbar-thumb:hover {
    background: var(--main-foreground);
  }
  .legacy .head-main {
    border-bottom: none;
  }
  .legacy .head-main .form-control {
    border: var(--border-solid) var(--header-foreground-opacity-30);
  }
  .legacy .modal-nav-search .search-container, .legacy.modal-nav-search .search-container {
    background-color: var(--main-background);
  }
  .legacy footer .accordion {
    border: 0;
  }
  /* //// Home Banners */
  .legacy .textbanner-shadow {
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .legacy .textbanner-shadow:hover {
    box-shadow: 0 1px 10px var(--main-foreground-opacity-80);
  }
  /* //// Product grid */
  .legacy .item-description {
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
}