/*
** Bootstrap over-rides
*/
body {
    font-family: 'Open Sans', sans-serif;
    color: #000;
    line-height: 1.5;
}
h1 {
    font-size: 30px;
}

.titles {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
}

.subcategories {
    border-bottom: 1px solid #ececec;
    padding: 0 0 30px;
}
.subcategories > ul > li > a {
    color: #000;
    text-decoration: none;
    display: block;
    -webkit-transition: all .25s ease-out;
    transition: all .25s ease-out;
}
.subcategories > ul > li > a:hover {
    opacity: 0.8;
}
.subcategories > ul > li span.name {
    color: #000;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}


/* DT ProFab width fix (2026-09-15, revised 2026-09-16): this 991px cap was the
   actual live bottleneck (confirmed on the real site — a 1920 monitor was
   rendering the whole page at 991px wide). Replaced with one continuous fluid
   width from tablet size up, capped on very wide monitors. Numbers below are
   worked out against the product grid math (see the grid rules further down):
   97% width, 3000px cap, so 8 grid columns finish stretching to ~360px right
   at the cap. Phone width (below 768px) is untouched. */
@media (min-width: 768px) {
    .container {
        width: 97%;
        max-width: 3000px;
    }
}

/* DT ProFab product grid (2026-09-16): replaces the platform's float + fixed
   percentage columns (.product-items-N .product-item{width:25%} etc., in the
   shared common-core/css/core.css — not touched) with CSS Grid. This fixes
   two real bugs the float version had: (1) floats don't give matching row
   heights, so a two-line product name knocked every tile after it out of
   alignment; (2) repeating percentages like 16.666% round unevenly and can
   knock the last column onto its own line. Grid tracks are computed exactly
   by the browser and every row is naturally equal-height, so neither bug is
   possible here regardless of column count or text length.
   Ignores whichever product-items-N the admin has set — column count is
   driven by available width instead, from a 280px minimum, growing smoothly
   up to 8 columns. Beyond that point it locks at 8 and lets those columns
   keep absorbing extra width as stretch (verified: 6 columns/~297px at 1920,
   8 columns/~361px at the 3000px cap). */
.product-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
@media (min-width: 2750px) {
    .product-items {
        grid-template-columns: repeat(8, 1fr);
    }
}
/* .product-items.product-items (the class written twice) is a specificity
   trick, not a typo: the platform's own core.css (shared, not touched) has
   rules like .product-items.product-items-4 .product-item{width:25%} — two
   classes on the parent — which otherwise beats a plain .product-items
   .product-item selector no matter what order the stylesheets load in. */
.product-items.product-items .product-item {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* Image now fills its box at every column width via a locked aspect-ratio +
   object-fit, instead of the platform's max-width/max-height rule, which
   never scales UP past a photo's native resolution — that mismatch left
   dead space beside the image whenever a column was wider than the photo. */
.product-items.product-items .product-item .img {
    aspect-ratio: 16 / 10;
    min-height: 0;
}
.product-items.product-items .product-item .img img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
    max-height: none;
    top: auto; left: auto; right: auto; bottom: auto;
    margin: 0;
}

/* Card layout: image left / text right at 2+ columns, single column (phone)
   stays fully stacked with the image on top. The real markup (product_items.html)
   has .img, .reviews, .name, .price, .status, .addtowishlist and .action as
   flat siblings under .product-content — no wrapper div around the text — so
   this uses a plain CSS float on the image (classic text-wraps-beside-a-float),
   not flexbox, which would need everything grouped into one box first.
   .mode-horizontal is set by a small script that counts the grid's actual
   rendered columns — see main.js — because that's the one thing CSS alone
   can't measure. */
.product-items.mode-horizontal .product-item .img {
    float: left;
    width: 34%;
    aspect-ratio: 1 / 1;
    margin: 0 12px 8px 0;
}
.product-items.mode-horizontal .product-item .reviews,
.product-items.mode-horizontal .product-item .name,
.product-items.mode-horizontal .product-item .price,
.product-items.mode-horizontal .product-item .status,
.product-items.mode-horizontal .product-item .addtowishlist {
    text-align: left;
}

/* Add to Cart: DT ProFab CTA Box spec (orange, black text, rounded corners) —
   applies in both stacked and side-by-side modes, always full tile width,
   directly below the image+text row. clear:both in horizontal mode drops it
   below the floated image even if the text beside it is shorter. */
.product-items.product-items .product-item .action,
.product-items.product-items .product-item .action .btn {
    width: 100%;
    margin-top: 8px;
}
.product-items.product-items .product-item .action .btn {
    background: #F75616;
    color: #000;
    border: none;
    border-radius: 6px;
    text-transform: uppercase;
    font-weight: bold;
}
.product-items.mode-horizontal .product-item .action {
    clear: both;
}

.form-control {
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    height: 36px;
    padding: 7px 12px;
}
.form-control.search-text {
     border:1px solid #ececec;
}

.btn {
    font-size: 13px;
    padding: 8px 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.btn-default,
.btn-primary:focus, 
.btn-primary:active:focus {
    border-color: #2e2d2e;
    background-color: #2e2d2e;
    color: #fff;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:hover:focus,
.btn-default.focus {
    color: #fff;
    background-color: #f16e23;
    border-color: #f16e23;
}
.btn-default.btn-inverse,
.btn-primary {
    border-color: #2e2d2e;
    background-color: #2e2d2e;
    color: #fff;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
.btn-default.btn-inverse:hover,
.btn-primary:hover {
    color: #fff;
    background-color: #f16e23;
    border-color: #f16e23;
}

.navbar-wrapper {
    margin: 0 0 25px;
}
.navbar-nav {
    text-align: center;
    padding: 10px 0;
}
.navbar-nav>li {
    float: none;
    display: inline-block;
}
.navbar.navbar-inverse {
    margin-bottom: 0;
    border: none;
    background-color: transparent;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.navbar-inverse .navbar-nav > li > a {
    color: #000;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1;
    min-height: auto;
    padding: 5px 10px;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #f16e23;
    text-decoration: none;
}

.home-page-content .category-header img {
    max-width: 100%;
    padding: 4px;
}
.logout-btn button {
    background: #2e2d2e;
    color: #fff;
}

.dropdown-menu > li > a {
    font-size: 12px;
    padding: 6px 20px;
    text-transform: uppercase;
}
.navbar-nav > li.dropdown > a:after {
    content: "\f107";
    font-family: "fontello";
    font-size: 18px;
    line-height: 1;
    margin-left: 5px;
}
.product-item .name {
    line-height: 1;
}
div.searchlight-balloon {
    top: 115px !important;
    right: 0;
}
@media (max-width: 1023px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
      background: #000;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
  }
  .navbar-nav>li {
      float: none;
  }
  .collapse.in{
      display:block !important;
  }
  .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #9d9d9d;
    }
    .navbar-nav .open .dropdown-menu > li > a {
        line-height: 20px;
    }
    .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 25px;
    }
}
/*
** Template code
*/
.p-0 {
    padding: 0;
}
.logo {
    height: 140px;
    position: relative;
    overflow: hidden;
}
.logo img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
.logo a:hover img {
    opacity: 0.6;
}
.top-nav {
    background: #2e2d2e;
}
.top-nav ul {
    padding: 10px 0;
    margin: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
}
.top-nav ul li {
    float: left;
    margin-right: 10px;
    padding-right: 10px;
    border-right: none;
}
.top-nav .useraccount ul {
    float: right;
}
.top-nav ul li:last-child {
    border: none;
    margin: 0;
    padding: 0;
}
.top-nav ul li a {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
}
.top-nav ul li a:hover {
    color: #f16e23;
    text-decoration: none;
}

.head-sm-banners {
    position: relative;
}
.head-sm-banners img {
    position: absolute;
    top: -18px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10001;
}
.head-sm-banners a {
    display: block;
    text-align: center;
}
/* .head-sm-banners a img {
    margin: 0 auto;
} */

.cart-box {
    position: relative;
}
.cart-box #topCart {
    position: absolute;
    top: 5px;
    right: 0;
}

#cart {
	background: url('https://www.tabzone.com/assets/images/TEMPLATE/cart-background.png') no-repeat center center;
	color: #2e2d2e;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
        text-decoration: none;
	text-align: right;
	position: relative;
	top: 6px;
	width: 130px;
	height: 42px;
        line-height: 16px;
	padding-top: 9px;
	padding-right: 14px;
	overflow: hidden;
	z-index: 1000;
	float: right;
    text-transform: uppercase;
}
#cart span#noItemsText {
    color: #2e2d2e;    
	font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}
#checkout {
	background: url('../images/cart-background.png') no-repeat center center;
	height: 36px;
	width: 89px;
	z-index: 1000;
	overflow: hidden;
	position: relative;
	top: 6px;
	float: right;
}


.site-header {
    padding: 10px 0;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;
    background: #fff;
    box-shadow: 0px 1px 3px #333;
}
.sticky .navbar.navbar-inverse {
    border: none !important;
}

.searchBox {
    padding: 35px 0 0;
    max-width: 175px;
    width: 100%;
    float: right;
}
.search-form {
    position: relative;
}
.search-form .search-text {
    padding: 9px 62px 9px 12px;
    height: 40px;
    border-bottom: 2px solid #000;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
    color: #000;
}
.search-form .search-submit {
    position: absolute;
    top: -2px;
    right: 0;
    width: 50px;
    height: 100%;
    text-align: center;
    background: #fff;
    border: none;
    color: #000;
    font-size: 20px;
    padding: 0;
}


.minicart {
    min-width: 165px;
    height: 60px;
    float: right;
    padding: 15px 0 15px 10px;
    border-left: 1px solid #ececec;
}
.minicart-inner {
    display: block;
    color: #000;
    text-transform: uppercase;
    cursor: pointer;
}
.minicart-inner:hover {
    color: #000;
    opacity: 0.8;
}
.minicart .cart-icon {
    display: block;
    width: auto;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    float: left;
    margin-right: 5px;
}
.minicart .cart-details {
    display: block;
    float: left;
}

span.cart-title {
    font-size: 12px;
    line-height: 15px;
    display: block;
    font-weight: bold;
}
span.cart-count {
    color: #666;
    font-size: 10px;
    display: block;
    line-height: 15px;
    font-weight: 500;
}
.site-footer {
    background-color: #fff;
    padding: 55px 0 0;
    color: #000;
    font-family: 'Open Sans', sans-serif;
}
.site-footer h1 {
    color: #2e2d2e;
    font-family: open sans,sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    margin: 35px 0 10px;
}
.site-footer .top-hr {
    margin-top: 0px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid #000;
}
.site-footer .bottom-hr {
    margin-top: 10px;
    margin-bottom: 0px;
    border: 0;
    border-top: 1px solid #000;
}
.extrapages {
    max-width: 355px;
    width: 100%;
}
ul.extrapages li {
    line-height: 1;
    margin: 0 0 4px;
}
ul.extrapages li a {
    color: #000;
    font-size: 12px;
    text-transform: uppercase;
}
.footer-social {
    /* border-top: 1px solid #2d2d2d; */
    border-bottom: 1px solid #2d2d2d;
}
.social-icons {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: right;
    margin: 0;
}
.social-icons li {
    padding: 0;
}
.copyright {
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: left;
    color: #000;
    font-size: 11px;
    font-weight: 500;
}
.copyright p {
    margin: 0;
}
.copyright a {
    color: #aaa;
    text-decoration: underline;
}
#divRewardWidget {
    color: #000 !important;
}

.mailinglist-form {
    position: relative;
}
.mailist-box {
    width: 100%;
    float: none;
    /* margin: 10px 0; */
    background: #2e2d2e;
    padding: 30px;
}
.mailist-box h3 {
    color: #fff;
    font-family: open sans,sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    display: block;
    margin: 15px 0;
}
.mailinglist-input.form-control {
    background-color: #fff;
    border-color: #fff;
    max-width: 100%;
    color: #000;
    float: none;
    width: 100%;
    height: 29px;
}
.mailinglist-submit {
    background-color: #f16e23;
    color: #fff !important;
    border: none !important;
    float: none;
    width: auto;
    position: absolute;
    top: 2px;
    right: 2px;
}
.btn-default.mailinglist-submit:hover, 
.btn-default.mailinglist-submit:focus {
    opacity: 0.6;
}
.mailinglist-response {
    display: none;
}
.maillist-options {
    margin: 15px 0 0;
}
.subscribe {
    float: left;
    margin-right: 20px;
    line-height: 13px;
}
.subscribe input[type="radio"] {
    margin: 0;
    vertical-align: middle;
}
.subscribe label {
    margin: 0;
    font-size: 12px;
    line-height: 13px;
    font-weight: 300;
    margin-left: 3px;
    color: #ccc;
    cursor: pointer;
}

.footer-social ul {
    margin: 0;
}
ul.payment-icons {
    text-align: right;
}
ul.payment-icons li {
    font-size: 34px;
    line-height: 36px;
    vertical-align: middle;
}

ul.payment-icons li.payment-icons-label,
ul.social-icons li.social-icons-label {
    font-size: 18px;
    vertical-align: middle;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    margin-right: 20px;
}

.social-icons {
}
.social-icons li a {
    color: #0f0f0f;
    background-color: #fff;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 100%;
    display: block;
    text-align: center;
    font-size: 18px;
}
.social-icons li a:hover {
    opacity: 0.6;
}


/*.product-item .reviews-stars:before {
    font-family: "fontello";
    content: "\e803 \e803 \e803 \e803 \e803";
    color: #b8b8b8;
}
.product-item .reviews-stars {
    color: #000;
}*/
.home-page .product-items .product-item .addtowishlist {
    display: none;
}
.reviews-stars:before {
    font-family: "fontello";
    content: "\e803 \e803 \e803 \e803 \e803";
    color: #b8b8b8;
}
.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star,
.reviews-stars {
    color: #000;
}
.product-items .product-item {
    margin-bottom: 25px;
    padding: 10px;
}
.product-items .product-item .name,
.product-items .product-item .price,
.product-items .product-item .status,
.product-items .product-item .reviews,
.product-items .product-item .addtowishlist,
.product-items .product-item .action {
    text-align: center;
}
.product-content {
    padding: 10px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
.product-content:hover {
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
}

.product-item .name {
    margin-bottom: 10px;
    line-height: 13px;
    height: 42px;
    overflow: hidden;
}
.product-item .name a {
    color: #000;
    font-size: 12px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
.product-item .name a:hover {
    color: #f16e23;
    text-decoration: none;
}

.product-item del.regular-price {
    text-decoration: line-through;
    color: rgb(241, 110, 35);
}
.sale-price {
    color: #000;
    font-size: 14px;
}
del.original-price {
    font-weight: 500;
}
span.freeshipping {
    color: #00a888;
}
.product-item .status span:before {
    content: "-";
}
.product-item .status {
    font-size: 12px;
}
.product-item .price {
    font-size: 16px;
    font-weight: bold;
}
.product-item .img {
    min-height: 130px;
    position: relative;
    /*border: 1px solid #ececec;*/
    background-color: #fff;
}
.product-item .img a {
    display: block;
}
.product-item .img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    -webkit-transition: top .5s ease;
    -moz-transition: top .5s ease;
    -o-transition: top .5s ease;
    transition: top .5s ease;
}
.product-item .img img:hover {
    top: -6px;
}
.product-item .action .btn {
    min-width: 150px;
}
.head-mobile-nav > a {
    color: #000;
    font-size: 24px;
    line-height: 1;
}

/*
** Homepage
*/
.products-section {
    background-color: #fff;
    padding: 30px 0;
}

.products-section h2 {
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 20px;
    border-bottom: 1px solid rgb(46, 45, 46);
    position: relative;
    border-top: 1px solid rgb(46, 45, 46);
    font-family: "Open Sans", sans-serif;
    color: rgb(46, 45, 46);
    padding: 10px 20px;
}
.products-section h2:after {
    content: "+";
    position: absolute;
    bottom: 10px;
    z-index: 10;
    color: #f16e23;
    left: 0;
}
.home-page-content {
    padding-top: 0;
}
/*.home-page-content .category-footer {
    padding: 40px 0 60px;
}*/
.home-page-content .category-footer h3 {
    font-size: 20px;
    line-height: 1;
    margin: 0 0 20px;
    font-weight: bold;
}
.home-page-content .category-footer p {
    margin: 0 0 30px;
    text-align: justify;
}
.home-page-content .category-footer a:hover img {
    opacity: 0.7;
}
.home-page-content .category-header img {
    margin: 0 auto;
}

.product-item .on-sale-badge {
    background: #f16e23;
    color: #fff;
    display: block;
    line-height: 30px;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    padding: 5px;
    position: absolute;
    opacity: .9;
    top: 5px;
    right: 5px;
    width: 40px;
    text-align: center;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 14px;
}

.extrapages-shower a {
    display: block;
    background-color: #2d2d2d;
    color: #fff;
    padding: 10px 18px;
    text-decoration: none !important;
}
.extrapages-shower a:after {
    content: "\f106";
    font-family: "fontello";
    float: right;
}
.extrapages-shower a.collapsed:after {
    content: "\f107";
}
@media(max-width: 1023px) {
    .navbar-inverse .navbar-nav > li > a {
        font-size: 14px;
        min-height: 0;
    }
    .navbar-nav > li.dropdown > a:after {
        float: right;
    }
    .mailist-box {
        float: none;
        /* padding: 30px 0; */
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    .footer-social {
        text-align: center;
    }
}
@media(max-width: 767px) {
    .logo {
        text-align: center;
        height: auto;
    }
    .logo img {
        position: static;
    }
    .searchBox {
        padding: 10px 0 0;
        float: none;
        max-width: 320px;
        width: 100%;
        margin: 0 auto;
    }
    .search-form-col {
        clear: both;
    }
    .flex-direction-nav a:before {
        font-size: 24px;
    }
    .flex-direction-nav a {
        width: 24px;
        height: 24px;
        line-height: 24px;
        margin: -12px 0 0;
    }
    .mailinglist-input.form-control {
        max-width: 200px;
    }
    .social-icons li a {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
    }
    .footer-social ul li {
        padding: 0 4px;
    }
    .extrapages {
        display: none;
    }
    .home-page-content .category-header {
        padding: 15px 0;
    }
    .extrapages-shower a {
        display: block;
    }
    ul.extrapages {
        margin: 0;
        padding: 15px 0;
    }
    ul.extrapages li a {
        font-size: 14px;
    }
    .mailist-box {
        margin: 10px auto;
    }
}
@media(max-width: 567px) {
    .product-items.product-items-1 .product-item,
    .product-items.product-items-2 .product-item,
    .product-items.product-items-3 .product-item,
    .product-items.product-items-4 .product-item,
    .product-items.product-items-5 .product-item,
    .product-items.product-items-6 .product-item {
        max-width: 270px;
    }
}

.menu-open {
    overflow: hidden;
}
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: rgba(0,0,0,0.5);
}
.menu-open .mobile-menu {
    overflow-x: hidden;
    overflow-y: auto;
}
.mobile-menu-inner {
    background-color: #fff;
    padding: 30px 20px;
    width: 250px;
    margin-left: auto;
    margin-right: 0;
    min-height: 100vh;
    position: relative;

    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(250px,0);
    -ms-transform: translate(250px,0);
    -o-transform: translate(250px,0);
    transform: translate(250px,0);
}
.menu-open .mobile-menu-inner {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}

.mobile-menu-close a {
    color: #000;
    display: inline-block;
    line-height: 1;
    font-size: 24px;
    text-decoration: none;
}
.mobile-menu-close a:after {
    content: '\e805';
    font-family: "fontello";
}
.mobile-menu-widget {
    margin: 30px 0;
}
.mobile-menu-widget h3 {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 10px;
    line-height: 1;
    border-bottom: 1px solid #ececec;
}
.mobile-menu-widget ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.mobile-menu-widget ul li {
    margin: 0 0 0;
    display: block;
    text-align: left;
}
.mobile-menu-widget ul li a {
    padding: 0;
    line-height: 40px;
    font-size: 13px;
    background-color: transparent !important;
    display: block;
    color: #555;
    text-decoration: none !important;
}
.mobile-menu-widget ul li a:hover {
    color: #333;
}
.mobile-menu-widget ul ul {
    display: none !important;
}
.mobile-menu-widget ul li a:after {
    display: none;
}

.mailinglist-response {
    margin: 10px 0;
    padding: 10px 20px;
    font-size: 12px;
    background-color: #2d2d2d;
    color: #ccc;
}
.mailinglist-error span {
    color: #8a6d3b;
}
.mailinglist-subscribed span,
.mailinglist-unsubscribed span {
    color: #3c763d;
}
.mailinglist-response,
.mailinglist-response div {
}

.floating-cart {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 999;
    background-color: #101010;
    color: #fff;
    border-radius: 20px 0 0 20px;
    padding: 15px;
    text-align: center;
    width: 90px;
    display: none;
}
.floating-cart a,
.floating-cart a:hover {
    color: #ececec;
    text-decoration: none;
}
.floating-cart a:hover {
    opacity: 0.6;
}
.floating-cart span.cart-icon {
    display: block;
    font-size: 30px;
    line-height: 1;
}
.floating-cart span.cart-details {
    font-size: 12px;
    text-transform: none;
    display: block;
    margin: 5px 0 0;
}

.paging {
    float: right;
}
.paging strong,
.paging a {}
.paging strong,
.paging a:hover {
    color: #fff;
    background-color: #0f0f0f;
    text-decoration: none;
}

/* DT ProFab homepage category tiles (2026-09-16, reworked 2026-09-27).
   Every tile sits in the same fixed 450x260 box, centered, capped at 6
   across on very wide monitors (extra space becomes centered margin; tiles
   never stretch). The new landscape images (450x250, rounded corners baked
   in, assets/images/category-images/) fill the box width. The older square
   183px images (assets/images/TEMPLATE/) are shown 260px tall and centered
   in the wider box, so they read as spaced further apart — an interim look
   until they are replaced with landscape tiles; the two img[src*=...] rules
   below can be deleted at that point. Phone: single column, box fills width. */
.home-category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, 450px);
    justify-content: center;
    gap: 10px;
    margin: 16px 0;
}
/* From tablet up, extend into the container's 15px side padding so four
   450px boxes fit on a 1920 monitor (4 x 450 + 3 x 10 = 1830px). */
@media (min-width: 768px) {
    .home-category-tiles {
        margin-left: -15px;
        margin-right: -15px;
    }
}
@media (min-width: 2900px) {
    .home-category-tiles {
        grid-template-columns: repeat(6, 450px);
    }
}
.home-category-tiles a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 450px;
    height: 260px;
}
.home-category-tiles img {
    display: block;
    max-width: 100%;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.15));
    transition: filter .2s ease;
}
.home-category-tiles a:hover img {
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
.home-category-tiles img[src*="category-images"] {
    width: 100%;
    height: auto;
}
.home-category-tiles img[src*="TEMPLATE"] {
    width: 260px;
    height: 260px;
    border: 1px solid #d8e0ec;
    border-radius: 8px;
    background: #fff;
}
@media (max-width: 479px) {
    .home-category-tiles {
        grid-template-columns: 1fr;
    }
    .home-category-tiles a {
        width: 100%;
        height: auto;
    }
    .home-category-tiles img[src*="TEMPLATE"] {
        width: min(260px, 100%);
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Category pages: Manufacturer column suppressed (2026-09-27), not deleted —
   remove these two rules to bring it back. The product grid takes the full
   width. Scoped to .category-page so other pages are untouched. */
.category-page #leftBar {
    display: none;
}
.category-page .cat-items-grid {
    width: 100%;
}