@media only screen and (max-width: 767px) { .text-xs-left { text-align: left; }
  .text-xs-right { text-align: right; }
  .text-xs-center { text-align: center; } }

@media only screen and (min-width: 768px) and (max-width: 991px) { .text-sm-left { text-align: left; }
  .text-sm-right { text-align: right; }
  .text-sm-center { text-align: center; } }

@media only screen and (min-width: 992px) and (max-width: 1199px) { .text-md-left { text-align: left; }
  .text-md-right { text-align: right; }
  .text-md-center { text-align: center; } }

@media only screen and (min-width: 1200px) { .text-lg-left { text-align: left; }
  .text-lg-right { text-align: right; }
  .text-lg-center { text-align: center; } }

@font-face {font-display:swap; font-family: "button-icons"; font-style: normal; font-weight: normal; src: url("../fonts/buttons/button-icons.eot?#iefix") format("embedded-opentype"), url("../fonts/buttons/button-icons.woff") format("woff"), url("../fonts/buttons/button-icons.ttf") format("truetype"), url("../fonts/buttons/button-icons.svg#button-icons") format("svg"); }

#vol-push-cart { position: fixed; top: 0; right: 0; z-index: 20; max-width: 320px; height: 100%; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: 0.5s all ease; transition: 0.5s all ease; visibility: visible; background-color: white; color: #000; }

#vol-push-cart:after { background: rgba(0, 0, 0, 0.15); }

#vol-push-cart .vol-invisible { visibility: hidden; }

#vol-push-cart .push-cart__inner { position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: inherit; height: 100%; }

#vol-push-cart .push-cart__header, #vol-push-cart .push-cart__body, #vol-push-cart .push-cart__footer { position: relative; width: 100%; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; }

#vol-push-cart .push-cart__header, #vol-push-cart .push-cart__footer { padding: 10px 15px; }

#vol-push-cart .push-cart__header { background-color: inherit; border-bottom: 1px solid #bbbbbb; cursor: pointer; }

#vol-push-cart .push-cart__header .push-cart__title { margin: 0; }

#vol-push-cart .push-cart__body { -webkit-box-flex: 1; -webkit-flex: 1 0 0vh; -moz-box-flex: 1; -ms-flex: 1 0 0vh; flex: 1 0 0vh; overflow-y: auto; }

#vol-push-cart .push-cart__footer { background-color: inherit; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; font-size: 14px; border-top: 1px solid #bbbbbb; }

#vol-push-cart .push-cart__footer.push-cart__footer--focus-mobile { position: fixed; bottom: 0; z-index: 21; display: block; background-color: #fff; -webkit-align-self: normal; -ms-flex-item-align: normal; -ms-grid-row-align: normal; align-self: normal; }

#vol-push-cart .push-cart__footer--coupon-wrap { background-color: #e9e9e9; margin-bottom: 10px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(12vh, #e9e9e9), to(#c9c9c9)); background-image: -webkit-linear-gradient(#e9e9e9 12vh, #c9c9c9 100%); background-image: linear-gradient(#e9e9e9 12vh, #c9c9c9 100%); max-height: 15vh; -webkit-transition: 0.5s background color ease; transition: 0.5s background color ease; overflow-y: auto; }

#vol-push-cart .push-cart__footer--trigger { text-align: center; font-weight: 600; cursor: pointer; display: block; color: #3b3b3b; }

#vol-push-cart .push-cart__footer--coupon-list { margin-bottom: 0; }

#vol-push-cart .push-cart__footer .alert { margin-bottom: 5px; }

#vol-push-cart .push-cart__footer__control { padding-top: 10px; }

#vol-push-cart .push-cart__coupon-info, #vol-push-cart .push-cart__coupon-text, #vol-push-cart .push-cart__coupon-amt, #vol-push-cart .push-cart__coupon-remove { display: inline-block; vertical-align: top; margin-right: -4px; }

#vol-push-cart .push-cart__coupon-item { padding: 5px 8px; }

#vol-push-cart .push-cart__coupon-item:nth-child(even) { background-color: rgba(255, 255, 255, 0.4); }

#vol-push-cart .push-cart__coupon-info { width: 90%; }

#vol-push-cart .push-cart__coupon-text { width: 70%; }

#vol-push-cart .push-cart__coupon-amt { width: 30%; text-align: center; }

#vol-push-cart .push-cart__coupon-remove { width: 10%; text-align: center; }

#vol-push-cart .push-cart__coupon-remove .icon { width: 14px; height: 14px; -webkit-transform: rotate(angle); -ms-transform: rotate(angle); transform: rotate(angle); }

#vol-push-cart .push-cart__coupon .apply-coupon { padding: 9px 16px; font-weight: 400; border-radius: 0; cursor: pointer; -webkit-transition: 0.5s background-color ease; transition: 0.5s background-color ease; }

#vol-push-cart .push-cart__checkout { font-weight: 700; font-size: 14px; padding-top: 10px; padding-bottom: 10px; width: 49%; }

#vol-push-cart .push-cart__item { position: relative; padding: 15px; border-top: 1px solid #eeeeee; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; }

#vol-push-cart .push-cart__item[data-product-code='SETUP'] { border-top: none; }

#vol-push-cart .push-cart__item[data-product-code='SETUP']:hover { background-color: #fff; }

#vol-push-cart .push-cart__item[data-product-code='SETUP'] .push-cart__item__title { pointer-events: none; }

#vol-push-cart .push-cart__item:first-child { border-top: none; }

#vol-push-cart .push-cart__item__price { display: none; }

#vol-push-cart .push-cart__item--top, #vol-push-cart .push-cart__item--bottom { position: relative; padding: 5px 15px 5px 0; }

#vol-push-cart .push-cart__item__img { max-height: 100px; }

#vol-push-cart .push-cart__item__img-wrapper { width: 25%; }

#vol-push-cart .push-cart__item__img-anchor { display: inline-block; max-width: 100%; }

#vol-push-cart .push-cart__item__details { width: 75%; padding-right: 10px; padding-left: 10px; overflow-y: auto; max-height: 100px; }

#vol-push-cart .push-cart__item__title { display: block; color: #000; font-weight: 700; margin: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; }

#vol-push-cart .push-cart__item__options-wrapper { padding-top: 5px; padding-bottom: 5px; }

#vol-push-cart .push-cart__item__total { display: inline-block; float: right; width: 55%; text-align: right; }

#vol-push-cart .push-cart__remove { position: absolute; top: 0; right: 0; }

#vol-push-cart .push-cart__close-menu { position: absolute; top: 50%; left: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

#vol-push-cart .push-cart__empty { text-align: center; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; }

#vol-push-cart .push-cart__btn { width: 48%; }

#vol-push-cart .push-cart__result { padding-top: 10px; padding-left: 10px; padding-bottom: 10px; }

#vol-push-cart .push-cart__result .icon { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); font-size: 16px; width: 15px; height: 15px; }

#vol-push-cart .push-cart__result--text { margin: 0; }

#vol-push-cart .push-cart__coupon { padding-bottom: 10px; }

#vol-push-cart .push-cart__coupon .form-control { height: 40px; padding-top: 0; padding-bottom: 0; border: 1px solid #3b3b3b; }

#vol-push-cart .push-cart--vol-loader { width: 125px; height: 125px; position: absolute; z-index: 12; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.5s opacity ease; transition: 0.5s opacity ease; }

#vol-push-cart .push-cart--vol-loader.hide-vol-loader { opacity: 0; }

#vol-push-cart .push-cart--vol-loader__contents { position: fixed; text-indent: -9999em; border-top: 20px solid rgba(255, 255, 255, 0.4); border-right: 20px solid rgba(255, 255, 255, 0.4); border-bottom: 20px solid rgba(255, 255, 255, 0.4); border-left: 20px solid #fff; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; }

#vol-push-cart .push-cart__body .push-cart--vol-loader { position: absolute; }

#vol-push-cart .push-cart--vol-loader__contents, #vol-push-cart .push-cart--vol-loader__contents:after { position: relative; border-radius: 50%; width: 100%; height: 100%; }

#vol-push-cart .vol-qty-toggle--decrement, #vol-push-cart .vol-qty-input, #vol-push-cart .vol-qty-toggle-increment { height: 30px; }

#vol-push-cart .vol-qty-input { line-height: 10px; text-align: center; }

#vol-push-cart .vol-qty-toggle { float: left; text-align: center; width: 45%; }

#vol-push-cart .vol-qty-toggle-input { text-align: center; }

#vol-push-cart .vol-qty-toggle .icon { width: 14px; height: 14px; }

#vol-push-cart .vol-qty-toggle .input-group-addon { padding: 5px 8px; cursor: pointer; }

#vol-push-cart .vol-qty-toggle .input-group-addon:hover { background-color: #c8c8c8; }

.push-cart-open .menu-mask { position: absolute; top: 0; left: 0; z-index: 15; width: 100%; height: 100%; background: transparent; }

.vol-fade { -webkit-animation: vol-fade 0.5s forwards; animation: vol-fade 0.5s forwards; }

.vol-fade-add { -webkit-animation: vol-fade-add 1.25s forwards; animation: vol-fade-add 1.25s forwards; }

.vol-fade-remove { -webkit-animation: vol-fade-remove 0.65s forwards; animation: vol-fade-remove 0.65s forwards; }

.vol-loading#vol-push-cart:after, .vol-loading .page-wrap:after, .push-cart-open .page-wrap:after { opacity: 1; visibility: visible; z-index: 11; }

.page-wrap:after, #vol-push-cart:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.35); content: ''; opacity: 0; visibility: hidden; -webkit-transition: 0.5s all ease, 0s z-index; transition: 0.5s all ease, 0s z-index; z-index: 1; }

body.push-cart-open { position: fixed; overflow: hidden; height: 100%; }

body[class*='push-cart-open'] #vol-push-cart { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); }

@-webkit-keyframes vol-fade-remove { 0% { opacity: 1;
    overflow: hidden; }
  10% { max-height: 150px;
    opacity: 0.9; }
  20% { max-height: 130px;
    opacity: 0.8; }
  30% { max-height: 110px;
    opacity: 0.7; }
  40% { max-height: 90px;
    opacity: 0.6; }
  50% { max-height: 70px;
    opacity: 0.5; }
  60% { max-height: 50px;
    opacity: 0.4; }
  70% { max-height: 30px;
    opacity: 0.3; }
  80% { max-height: 20px;
    opacity: 0.2; }
  90% { max-height: 10px;
    opacity: 0.1; }
  100% { opacity: 0;
    max-height: 0px;
    overflow: hidden; } }

@keyframes vol-fade-remove { 0% { opacity: 1;
    overflow: hidden; }
  10% { max-height: 150px;
    opacity: 0.9; }
  20% { max-height: 130px;
    opacity: 0.8; }
  30% { max-height: 110px;
    opacity: 0.7; }
  40% { max-height: 90px;
    opacity: 0.6; }
  50% { max-height: 70px;
    opacity: 0.5; }
  60% { max-height: 50px;
    opacity: 0.4; }
  70% { max-height: 30px;
    opacity: 0.3; }
  80% { max-height: 20px;
    opacity: 0.2; }
  90% { max-height: 10px;
    opacity: 0.1; }
  100% { opacity: 0;
    max-height: 0px;
    overflow: hidden; } }

@-webkit-keyframes vol-fade-add { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes vol-fade-add { from { opacity: 0; }
  to { opacity: 1; } }

@-webkit-keyframes vol-fade { from { opacity: 1; }
  to { opacity: 0; } }

@keyframes vol-fade { from { opacity: 1; }
  to { opacity: 0; } }

@-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

.btn-icon { font-family: 'button-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; margin-right: 5px; }

.btn-icon:hover { text-decoration: none; }

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

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

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

.btn-icon-photos:before { content: "\e603"; }

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

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

.btn-icon-zoom:before { content: "\e608"; }

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

.btn-icon-warning:before { content: "\e610"; }

.icon-star:before { font-family: 'button-icons' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; margin: 0 !important; }

.icon-star-empty:before { content: "\e611"; }

.icon-star-half:before { content: "\e612"; }

.icon-star-full:before { content: "\e613"; }

.icon-free-shipping:before { content: "\e614"; font-family: 'button-icons' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; margin: 0 !important; width: auto !important; }

.cartDiv, .cartDiv2 { display: inline; }

.soft_add_content_shadow { width: auto; max-height: 500px; padding: 35px 0 0; overflow-y: auto; background: #fff; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); border-radius: 5px; }

.soft_add_header { width: auto; padding: 0; border: 0; background: white; }

.soft_add_header_shadow { position: absolute; top: 0; left: 0; padding: 0; width: 100%; }

.soft_add_header .soft_add_span { font-size: 0; }

.soft_add_header .soft_add_span:before { content: "Items in Cart"; display: inline-block; margin-left: -25px; padding-top: 10px; left: 0; font-size: 16px; }

.soft_add_content_area { padding: 15px; width: auto; max-height: 250px; overflow: auto; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: none; }

.soft_add_content_wrapper { padding: 0; width: auto; border: none; background: none; }

.soft_add_wrapper { position: fixed; min-width: 265px; max-width: -webkit-calc(100% - 30px); max-width: calc(100% - 30px); max-height: 400px !important; z-index: 1100; top: 50% !important; left: 0 !important; right: 0 !important; bottom: auto !important; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin: auto !important; padding: 0; line-height: initial; font-family: inherit; font-weight: normal; color: #666666; }

@media only screen and (min-width: 768px) { .soft_add_wrapper { max-width: 400px; } }

@media only screen and (min-width: 992px) { .soft_add_wrapper { min-width: 400px; top: 15% !important; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } }

.ie8 .soft_add_wrapper { border: 1px solid #eee; }

.soft_add_wrapper .cart_table .icon { width: auto; height: auto; }

.soft_add_wrapper ul.anchored-cart { display: table; width: 100%; padding: 0; margin: 0; list-style: none; border-collapse: collapse; }

.soft_add_wrapper li { display: table-row; width: auto; margin: 0; overflow: hidden; vertical-align: middle; text-align: left; }

.soft_add_wrapper li.product-row:not(:last-child) { border-bottom: 1px solid #eee; }

.soft_add_wrapper li img { max-width: 55px !important; }

@-webkit-keyframes recently-added-fadeout { 0% { background-color: rgba(0, 0, 0, 0.1); }
  80% { background-color: rgba(0, 0, 0, 0.1); }
  100% { background-color: transparent; } }

@keyframes recently-added-fadeout { 0% { background-color: rgba(0, 0, 0, 0.1); }
  80% { background-color: rgba(0, 0, 0, 0.1); }
  100% { background-color: transparent; } }

.soft_add_wrapper li.recently-added { -webkit-animation-name: recently-added-fadeout; animation-name: recently-added-fadeout; -webkit-animation-duration: 2s; animation-duration: 2s; background-color: transparent; }

.soft_add_wrapper li div { font-size: 12px; width: 100%; }

.soft_add_wrapper .product-row * { font-size: 14px; line-height: 1.428571429; }

.soft_add_wrapper .product-image { display: table-cell; width: 55px; padding: 10px 4px 10px 10px; }

.soft_add_wrapper .product-detail { display: table-cell; padding: 10px 5px; vertical-align: top; }

.soft_add_wrapper .product-name { display: block; }

.soft_add_wrapper .product-name a { color: #666666; font-size: 12px; font-weight: bold; word-break: break-word; }

@media only screen and (min-width: 992px) { .soft_add_wrapper .product-name a { font-size: 14px; } }

.soft_add_wrapper .product-options a { color: #666666; font-size: 12px; font-weight: normal; word-break: break-all; pointer-events: none; }

.soft_add_wrapper .product-qty, .soft_add_wrapper .product-qty .quantity_text { display: block; color: #666666; }

.soft_add_wrapper .product-qty .quantity_text { display: inline; }

.soft_add_wrapper .product-price { display: table-cell; padding: 8px 8px 10px 0; vertical-align: middle; text-align: right; color: #666666; font-size: 14px; }

.soft_add_wrapper .product-remove { display: table-cell; vertical-align: middle; padding-right: 5px; }

.soft_add_wrapper .product-remove .aremove { background: none; margin-left: 15px; font-size: 0; text-indent: unset; color: #000; }

.soft_add_wrapper .product-remove .aremove:before { display: table-cell; content: "\e601"; font-family: button-icons; speak: none; font-style: normal; font-weight: normal; font-size: 16px; text-transform: none; line-height: 1; font-variant: normal normal; }

.soft_add_wrapper .soft_add_sub_total { padding: 4px 20px 0; height: 24px; background: none; }

.soft_add_wrapper .sub_total { color: #666666; font-size: 12px; }

.soft_add_wrapper span.sub_total_amount { color: #666666; font-size: 14px; }

.soft_add_wrapper .soft_add_action_area { clear: both; height: auto; overflow: hidden; padding: 15px; position: relative; border-top: none; background: none; }

.soft_add_wrapper .check_out, .soft_add_wrapper .continue_shopping { overflow: hidden; position: static; display: inline-block; width: 48%; float: right; height: 45px; margin: 0 auto; padding: 1px 20px 0; border: 1px solid rgba(42, 122, 139, 0); border-radius: 0px; line-height: 43px; font-family: "Open Sans", sans-serif, "google"; font-size: 14px; font-weight: bold; background: #9e8238; color: #fff; text-align: center; text-indent: 0; text-decoration: none; }

.soft_add_wrapper .check_out:hover, .soft_add_wrapper .continue_shopping:hover { background-color: #78632b; border-color: rgba(28, 81, 92, 0); color: #fff; text-decoration: none; }

.soft_add_wrapper .continue_shopping { float: left; padding: 0 10px; background: #666; border-color: #666; text-transform: capitalize; }

.soft_add_wrapper .continue_shopping:hover { background-color: #4d4d4d; border-color: #474747; }

.soft_add_wrapper .close_btn, .soft_add_wrapper .close_btn:link, .soft_add_wrapper .close_btn:visited, .soft_add_wrapper .close_btn:focus, .soft_add_wrapper .close_btn:hover, .soft_add_wrapper .close_btn:active { background: none; z-index: 200; text-indent: initial; font-size: 0; top: 8px; right: 12px; }

.soft_add_wrapper .close_btn { color: #9e8238; }

.soft_add_wrapper .close_btn:hover { color: #53441d; }

.soft_add_wrapper .close_btn:before { content: "\e609"; display: inline-block; font-size: 16px; font-family: 'button-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; }

/* MOBILE STYLINGS */
/* the soft add to cart hides after a couple seconds unless your cursor hovers over it;
mobile devices do not have a cursor, carts with several items could become frustrating to view
shows: only the name, picture, and text "added to cart" of item which was added; hides: details, price, and remove link*/
@media only screen and (max-width: 991px) { .touch-device .soft_add { /* cart title */ }
  .touch-device .soft_add_span:before { content: "Cart" !important; }
  .touch-device .soft_add_content_area { min-height: auto; /* hide all products without .recently-added class */ }
  .touch-device .soft_add_content_area li:not(.recently-added) { display: none; border: none; }
  .touch-device .soft_add_content_area li.recently-added { display: block; background: white; }
  .touch-device .soft_add_content_area li .product-detail, .touch-device .soft_add_content_area li .product-price, .touch-device .soft_add_content_area li .product-remove { display: none; }
  .touch-device .soft_add_content_area li .product-image { display: block; width: 100%; padding: 0; }
  .touch-device .soft_add_content_area li .product-image:after { content: "Added to Cart"; font-size: 14px; font-weight: bold; margin-left: 20px; }
  .touch-device .soft_add_wrapper .check_out, .touch-device .soft_add_wrapper .continue_shopping { font-size: 14px; } }

.vol-logo { /* Text Logo Styling goes here */ /* Graphic Logo Styling goes here */ }

@media only screen and (max-width: 991px) { .vol-logo { padding: 20px 30px; text-align: center; } }

.vol-logo meta[itemprop="name"] + a { word-break: break-word; line-height: 1; }

.vol-logo meta[itemprop="name"] + a:not(#homepage_title) { display: inline-block; background-image: url("../images/template/header_bg.jpg"); font-size: 0; background-size: 0; }

.vol-logo meta[itemprop="name"] + a:not(#homepage_title) img { max-height: 100%; }

/* Asssume no left nav until JS verifies */
html:not(.has-sidebar) .sidebar-wrapper, html:not(.home):not(.category) .sidebar-wrapper { display: none; }

html:not(.has-sidebar) .content_area-wrapper, html:not(.home):not(.category) .content_area-wrapper { width: 100%; }

/*hides the sidebar navigation*/
#side-nav-parent-contain{
display: none;
}

/*hides the search within input on category refine */
.category #MainForm.search_results_section>input[name='Cat']+table table[width='250'] td:nth-child(6), #additionalsearch{
visibility: hidden;
}

/* missing css added back in to make content areas full width again */
.content_area-wrapper{
width: 100%;
}

/* ===================================================
   FIX: remove gray background box behind header search
   The theme's core stylesheet sets ".search, .collapsing-search {
   background-color: #eeeeee; }" which shows through as a stray
   gray rectangle around the search input/button in the header
   (div#search-container). Overriding by ID here beats that class
   rule on specificity, without needing to edit the locked theme file.
==================================================== */
#search-container {
    background-color: transparent;
}

/* =====================================================
   PERFORMANCE FIX: Reserve space for dynamically-loaded
   product thumbnails (category grids + homepage featured
   products) to prevent layout shift (CLS). These images
   are rendered by Volusion's own product-list engine, not
   this theme file, so they can't carry per-image width/
   height attributes here -- most source photos are 200x200,
   but a few are shot at other ratios (e.g. 200x150), so we
   reserve a square box via aspect-ratio and use
   object-fit: contain so an off-ratio photo letterboxes
   instead of stretching/distorting.
   ===================================================== */
.v-product__img img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ===== OPTION SPACING FIX (2026-10-08) =====================================
   The theme's product-option layout rules (.productdetails #options_table ...) expect
   template.min.js to tag the option cells with vol-option-* classes. Since design-toolkit.min.js
   was moved to requestIdleCallback, template.min.js runs BEFORE html.productdetails exists, so
   the cells are never tagged and every cell (spacer, help icon, input) stacks as a full-width
   block with 5px padding -> the big gaps. These rules re-create the theme's tagged layout from
   the table structure instead of the classes. Scoped to an UNTAGGED options table only, so they
   switch themselves off if the classes ever come back. */
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[colspan="3"]:has(>font.colors_productname){padding:20px 0 0}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr:first-child>td[colspan="3"]{padding-top:0}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[colspan="3"]>br,
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[colspan="3"]>table{display:none}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[colspan="3"]>font.colors_productname b{display:block;font-size:14px;font-style:normal;font-weight:bold;margin-bottom:0}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[colspan="3"]>font.colors_productname i{font-style:normal}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]{display:none}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]+td{width:30px;flex-basis:30px;order:1;text-align:center;padding:5px 0}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]+td:empty{display:none}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]+td+td{order:3;width:100%;flex-basis:100%;padding:5px 0}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]+td:not(:empty)+td{width:calc(100% - 30px);flex-basis:calc(100% - 30px)}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]+td+td input[type='text'],
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]+td+td select,
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]+td+td textarea{display:block;width:100%;max-width:100%;margin:0}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]+td+td input{margin:0}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]+td+td textarea{min-height:100px;resize:vertical}
@media only screen and (max-width:767px){html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr:has(>td[colspan="3"]>font.colors_productname)+tr{margin-top:0}}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]+td a:before{content:'\e605';font-family:'button-icons'}
html.productdetails:not(.lt-ie10) #options_table:not(:has(tr.vol-option-heading))>tbody>tr>td[align="right"]+td a img{display:none}