/* Minification failed. Returning unminified contents.
(3604,36): run-time error CSS1030: Expected identifier, found '.'
(3604,52): run-time error CSS1031: Expected selector, found ')'
(3604,52): run-time error CSS1025: Expected comma or open brace, found ')'
(3612,36): run-time error CSS1030: Expected identifier, found '.'
(3612,52): run-time error CSS1031: Expected selector, found ')'
(3612,52): run-time error CSS1025: Expected comma or open brace, found ')'
(3626,36): run-time error CSS1030: Expected identifier, found '.'
(3626,52): run-time error CSS1031: Expected selector, found ')'
(3626,52): run-time error CSS1025: Expected comma or open brace, found ')'
(3632,36): run-time error CSS1030: Expected identifier, found '.'
(3632,52): run-time error CSS1031: Expected selector, found ')'
(3632,52): run-time error CSS1025: Expected comma or open brace, found ')'
(6217,1): run-time error CSS1019: Unexpected token, found '}'
(6969,47): run-time error CSS1030: Expected identifier, found '.'
(6969,63): run-time error CSS1031: Expected selector, found ')'
(6969,63): run-time error CSS1025: Expected comma or open brace, found ')'
(6978,51): run-time error CSS1030: Expected identifier, found '.'
(6978,67): run-time error CSS1031: Expected selector, found ')'
(6978,67): run-time error CSS1025: Expected comma or open brace, found ')'
(6988,51): run-time error CSS1030: Expected identifier, found '.'
(6988,67): run-time error CSS1031: Expected selector, found ')'
(6988,67): run-time error CSS1025: Expected comma or open brace, found ')'
(6995,51): run-time error CSS1030: Expected identifier, found '.'
(6995,67): run-time error CSS1031: Expected selector, found ')'
(6995,67): run-time error CSS1025: Expected comma or open brace, found ')'
(7570,5): run-time error CSS1019: Unexpected token, found '@keyframes'
(7571,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(9065,1): run-time error CSS1019: Unexpected token, found '}'
 */
/********* Defaults **********
 ****  ***** *****  ***  *   * *     *****
 *   * *     *     *   * *   * *       *
 *   * ***   ***   ***** *   * *       *
 *   * *     *     *   * *   * *       *
 ****  ***** *     *   *  ***  *****   *
*/

/* resets */
* {
    margin: 0;
    padding: 0;
    outline: 0;
}

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix::after, .clearfix::before {
    content: "";
    display: table
}

.clearfix::after {
    clear: both
}

.hidden {
    display: none;
}

html {
    min-height: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased !important
}

html, body, img {
    border: 0;
}

body {
    font-family: "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
    font-size: 14px;
    font-weight: normal;
    background-color: #fff;
    color: #222;
    overflow-x: hidden;
    font-display: swap; /* Add this */
}

h1, h2, h3, h4 {
    margin: 10px 0 10px;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: #1d5796;
    text-decoration: none;
}

    a:hover {
        color: #f30;
        text-decoration: none
    }

    a:focus, a:active {
        color: #f30;
    }

label {
    line-height: 1.5em;
}

/* form objects */
input, select, textarea {
    font-family: "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
}

    input[type="text"], input[type="search"], input[type="email"], input[type="password"], select, textarea {
        font-size: 14px;
        padding: 6px;
        border: 1px solid #ccc;
        margin: 0;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }

    input[type="image"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    input[type="text"], input[type="search"], input[type="email"], textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
    }

        input[type="text"]:hover, select:hover, textarea:hover {
            font-size: 14px;
            background: #eee;
        }

    input[type="radio"] {
        width: 20px;
        height: 20px;
    }

.required::after {
    content: "*";
    font-weight: bold;
    color: red;
    margin-left: 5px;
}


.required.over18::after {
    content: "";
}


/* password strength */
.strength_meter {
    float: left;
    margin-left: 10px;
}

    .strength_meter .veryweak, .strength_meter .weak {
        color: #fff;
        background-color: red;
        padding: 6px;
    }

    .strength_meter .medium {
        color: #fff;
        background-color: orange;
        padding: 6px;
    }

    .strength_meter .strong {
        color: #fff;
        background-color: green;
        padding: 6px;
    }

/* buttons */
.button {
    padding: 8px 16px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 18px;
    font-weight: normal;
}

    .button.default {
        background-color: #fff;
        border: 1px solid silver;
        color: #333;
    }

        .button.default:hover {
            background-color: #eee;
        }

    .button.defaultcontact {
        background-color: #fff;
        border: 1px solid silver;
        color: #333;
        width: 50%;
    }

        .button.defaultcontact:hover {
            background-color: #eee;
        }

    .button.secondary {
        background-color: #eee;
        border: 1px solid #ccc;
        color: #333;
    }

        .button.secondary:hover {
            background-color: #ccc;
        }

    .button.checkout {
        font-size: 20px;
        float: right;
    }

    .button.proceed {
        background-color: #239043;
        border: 2px solid #1e7a36;
        color: #fff;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        position: relative;
        overflow: hidden;
    }

        .button.proceed.header {
            padding: 6px 16px;
        }

        .button.proceed.link {
            background-color: #1d5796;
            border: 1px solid #1d5796;
            color: #fff;
            width: 100%;
        }

            .button.proceed.link:hover {
                background-color: #2365ad;
                cursor: pointer;
            }

        .button.proceed:hover {
            background-color: #1e7a36;
            border-color: #155d2a;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(35, 144, 67, 0.3);
            color: white;
            text-decoration: none;
            cursor: pointer;
        }

        .button.proceed:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .button.proceed:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(35, 144, 67, 0.3);
        }

    .button.warning {
        background-color: #ffecec;
        border: 1px solid #f5aca6;
        color: #333;
    }

        .button.warning:hover {
            background-color: #ffecec;
        }

    .button.util {
        background: #e3f7fc;
        border: 2px solid #8ed9f6;
        color: #333;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        position: relative;
        overflow: hidden;
    }

        .button.util:hover {
            background-color: #c4e5ed;
            border-color: #6bc5e8;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(142, 217, 246, 0.3);
            color: #333;
            text-decoration: none;
            cursor: pointer;
        }

        .button.util:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .button.util:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(142, 217, 246, 0.3);
        }

    .button.basket {
        background-color: #239043;
        border: 2px solid #1e7a36;
        width: 100%;
        color: #fff;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        position: relative;
        overflow: hidden;
    }

        .button.basket:hover {
            background-color: #1e7a36;
            border-color: #155d2a;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(35, 144, 67, 0.3);
            color: white;
            text-decoration: none;
        }

        .button.basket:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .button.basket:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(35, 144, 67, 0.3);
        }

    .button.prominent {
        padding: 8px 32px;
    }

    .button.prominentpadding {
        padding: 6px 12px;
    }

    .button.facebook, .button.twitter {
        color: #fff;
        padding: 10px 10px 10px 40px;
        background-repeat: no-repeat;
        background-position: 4px 4px;
        background-size: 30px;
        min-width: 80%;
        text-align: left;
    }

        .button.facebook span, .button.twitter span {
            border-left: 1px solid #fff;
            margin-right: 8px;
        }

    .button.facebook {
        background-color: #3b5998;
        border: 1px solid #3b5998;
        background-image: url(/Content/images/facebook_white.png);
    }

        .button.facebook:hover {
            background-color: #2d4373;
        }

    .button.twitter {
        background-color: #55acee;
        border: 1px solid #55acee;
        background-image: url(/Content/images/twitter_white.png);
    }

        .button.twitter:hover {
            background-color: #2795e9;
        }

    .button.expand {
        background-color: #eee;
        border: 1px solid silver;
        color: #333;
        width: 100%;
        margin-top: 10px;
        background-repeat: no-repeat;
        background-position: right 10px center;
    }

        .button.expand.closed {
            background-image: url(/Content/images/icon_closed.png);
        }

        .button.expand.open {
            background-image: url(/Content/images/icon_open.png);
        }

        .button.expand:hover {
            background-color: #ddd;
        }

    .button.proceedcontact {
        background-color: #239043;
        border: 2px solid #1e7a36;
        color: #fff;
        width: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        position: relative;
        overflow: hidden;
    }

        .button.proceedcontact:hover {
            background-color: #1e7a36;
            border-color: #155d2a;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(35, 144, 67, 0.3);
            color: white;
            text-decoration: none;
            cursor: pointer;
        }

        .button.proceedcontact:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .button.proceedcontact:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(35, 144, 67, 0.3);
        }

/* Grid-specific smaller basket buttons */
.featprod .button.basket.grid {
    font-size: 14px;
    padding: 6px 12px;
    margin-top: 8px;
    width: 100%;
}

.featprod .button.util.grid {
    font-size: 14px;
    padding: 6px 12px;
    margin-top: 8px;
    width: 100%;
}

.featprod .button.util.grid:hover {
    background-color: #d0f2fb;
    border-color: #7dd3f0;
    transform: translateY(-2px);
}

.button.basket.grid:disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    border: 2px solid #ccc !important;
    cursor: not-allowed;
    color: #666 !important;
}

.button.basket.grid:disabled:hover {
    background-color: #ccc !important;
    border-color: #ccc !important;
    border: 2px solid #ccc !important;
    transform: none !important;
    box-shadow: none !important;
}

.button.basket.grid:disabled:active {
    background-color: #ccc !important;
    border-color: #ccc !important;
    border: 2px solid #ccc !important;
    transform: none !important;
    box-shadow: none !important;
}

.button.basket.grid.adding {
    background-color: #1e7e34;
    color: white;
}

.button.basket.grid.success {
    background-color: #28a745;
    color: white;
}

.button.basket.grid.error {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.deliveryinfo a {
    font-size: 12px;
}

.link.box {
    flex-shrink: 0;
    flex-grow: 0;
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 4px;
    border: 2px solid #fff;
    outline: 1px solid;
    margin-right: 8px;
    vertical-align: top;
}

/* alert messages */
.field-validation-error {
    margin: 10px 0 10px 0;
    color: red;
    width: 100%;
    float: left;
}

    .field-validation-error::after {
        clear: both;
    }

.validation-summary-errors {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 10px 20px;
    margin: 10px;
    background: #ffecec;
    border: 1px solid #f5aca6;
}

.input-validation-error {
    border: 1px solid #f5aca6 !important;
    background: #fff !important;
}

/*Clearance Page*/
.clearancemessage {
    padding-top: 4px;
    font-size: 14px;
    color: red;
}


.alert-box {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 10px 20px;
    margin: 10px 0;
}

    .alert-box span {
        font-weight: bold;
        text-transform: uppercase;
    }

.error {
    background: #ffecec;
    border: 1px solid #f5aca6;
}

.success {
    background: #e9ffd9;
    border: 1px solid #a6ca8a;
}

.warning {
    background: #fff8c4;
    border: 1px solid #f2c779;
}

.notice {
    background: #e3f7fc;
    border: 1px solid #8ed9f6;
}

.coming_soon {
    background: #D3EEFA;
    border: 1px solid #00A6EE;
}

.offermsg {
    background: #ff3031;
    color: #fff;
}

    .offermsg a {
        color: #fff;
    }

        .offermsg a:hover {
            text-decoration: underline;
        }

/* autocomplete */
.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ccc;
    text-align: left;
    z-index: 1001;
    padding: 5px;
}

.ui-menu-item {
    padding: 5px;
}

.ui-helper-hidden-accessible {
    position: absolute;
    left: -999em;
}

/* main structure */
#wrapper {
    text-align: left;
    position: relative;
    background-color: #fff;
}

.container {
    margin-left: auto;
    margin-right: auto;
}

#header {
    background-color: #1d5796;
}

.christmas {
    background-image: url(/Content/images/christmas-bg-250px.png);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

#logoutForm {
    display: inline;
}

.noborder {
    border: 0 !important;
}

#main {
    clear: both;
    padding: 0 10px 0 10px;
}

/* nav bar */
#nav .tab a, #nav .tabbig a {
    cursor: pointer;
}

#nav .tabsmall a {
    cursor: pointer;
}

.dropdown_menu .column, .dropdown_menu .column-double {
    border-left: 1px dotted #ccc;
}

    .dropdown_menu .column.first, .dropdown_menu .column-double.first {
        padding-left: 0;
        border-left: none;
    }

    .dropdown_menu .column .item a.head, .dropdown_menu .column-double .item a.head {
        font-weight: bold;
    }


/* footer */
#footer {
    background-color: #222;
    font-size: 12px;
    border-top: 5px solid #fff32f;
    border-bottom: 20px solid #222;
    color: #fff;
    float: left;
    width: 100%;
    margin-top: 20px;
}

    #footer a {
        color: #fff;
    }

    #footer #signup .email, .sign_up .email {
        font-size: 16px;
        padding: 10px;
        border: none;
        width: 260px;
        height: 42px;
        float: left;
        margin: 0;
    }

    #footer #signup .email {
        border: none;
    }

.sign_up .email {
    border: 1px solid #ccc;
}

.sign_up p {
    margin-bottom: 8px;
}

#footer #signup p {
    margin-bottom: 5px;
}

#footer #social p {
    margin: 10px 0 10px;
    font-size: 1.5em;
    font-weight: bold;
}

#footer #social li {
    display: inline;
}

    #footer #social li a {
        display: inline-block;
        line-height: 32px;
        height: 32px;
        width: 32px;
    }

#footer #social .facebook {
    background: no-repeat;
    background-size: cover;
}

#footer #social .twitter {
    background: no-repeat;
    background-size: cover;
}

#footer #social .threads {
    background: no-repeat;
    background-size: cover;
}

#footer #social .youtube {
    background: no-repeat;
    background-size: cover;
}

#footer #social .instagram {
    background: no-repeat;
    background-size: cover;
}

#footer #social .tiktok {
    background: no-repeat;
    background-size: cover;
}

#footer #reviews {
    background-color: #333;
    width: 100%;
    float: left;
}

    #footer #reviews li {
        float: left;
        background-repeat: no-repeat;
        background-position: left center;
    }

        #footer #reviews li.prod {
            /*background-image: url(/content/images/icon_review_prod.svg);*/
            background-repeat: no-repeat;
        }

        #footer #reviews li.estb {
            /*background-image: url(/content/images/icon_review_estb.svg);*/
            background-repeat: no-repeat;
        }

        #footer #reviews li.delv {
            /*background-image: url(/content/images/icon_review_delv.svg);*/
            background-repeat: no-repeat;
        }

        #footer #reviews li.cust {
            /*background-image: url(/content/images/icon_review_cust.svg);*/
            background-repeat: no-repeat;
        }

        #footer #reviews li span {
            font-weight: bold;
        }

.footerlinks li.dim, .footerlinks a.dim {
    color: #8f8d8d !important;
}

.footer_row {
    margin-top: 5px !important;
}

.footer_col {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}



.clear {
    clear: both;
}

/* flexible columns */
.row {
    margin: 0 0px;
    margin-bottom: 0;
}

    .row:last-child {
        margin-bottom: 0;
    }

[class*="col-"] {
    padding: 3px;
    float: left;
}

/* breadcrumb */
#breadcrumb {
    color: #666;
    float: left;
    width: 100%;
    overflow: hidden;
}

    #breadcrumb a, #breadcrumb span {
        float: left;
        position: relative;
        display: block;
    }

    #breadcrumb a {
        color: #666;
    }

    #breadcrumb span {
        color: #333;
    }

.blurb_wrapper {
    float: left;
    width: 100%;
}

/* std text page */
.std p, .std table, .std hr {
    margin-bottom: 1em;
}

.std ul {
    list-style: disc outside;
    margin-bottom: 1em;
}

.std li {
    display: list-item;
    text-align: -webkit-match-parent;
    margin-left: 2em;
    margin-bottom: 0.4em;
}

.std table {
    margin-bottom: 1em;
    border: 1px solid #ccc;
}

    .std table th, .std table td {
        padding: 5px;
        border: 1px solid #ccc;
    }

/* home page */
#scroller {
    width: 100%;
    float: left;
    min-height: 225px;
}

    #scroller img {
        max-width: 100%;
        min-height: 197px;
        padding-bottom: 3px;
    }

#banners img, #catlinks img {
    max-width: 100%;
    padding: 0;
    margin: 0;
    height: auto;
}

#homecats, #catlist {
    float: left;
    width: 100%;
}

    #catlist a {
        display: block;
        background-color: #aaa;
        text-align: center;
        color: #fff;
        font-weight: bold;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    #homecats .link {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        width: 100%;
        height: 50px;
        text-align: center;
        border: 1px solid #1d5796;
    }

        #homecats .link .icon {
            width: 100%;
            padding: 5px 5px;
            float: left;
            height: 100%;
        }

            #homecats .link .icon img {
                width: 100%;
                height: 100%;
            }

        #homecats .link .label {
            float: left;
            color: #2d2d2d;
            width: 100%;
            padding-top: 2px;
            line-height: 16px;
            height: 32px;
        }

    #zzhomecats a:hover, #catlist a:hover {
        background-color: #aaa;
        text-decoration: underline;
    }

#zzbrands a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #fff;
    font-weight: bold;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.brands, .ranges, .promotions {
    text-align: center;
    border: 1px solid #ccc;
    padding: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .brands img {
        min-width: 100px;
        min-height: 100px;
        max-width: 100px;
        max-height: 100px;
        width: 100%;
        height: auto;
    }

    .ranges p {
        height: 40px;
    }

    .ranges img {
        max-width: 100%;
    }

#linkcat_body, #subcat_body {
    margin-top: 10px;
    margin-left: 5px;
}

    #linkcat_body .filt, #subcat_body .filt {
        margin-bottom: 5px;
    }

        #linkcat_body .filt a:hover, #subcat_body .filt a:hover {
            margin-bottom: 5px;
            color: #1d5796;
        }

    #linkcat_body .filt2, #subcat_body .filt2 {
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 900;
    }

        #linkcat_body .filt2 a:hover, #subcat_body .filt2 a:hover {
            margin-bottom: 5px;
            color: #1d5796;
        }

/* product listing boxes */
.featprod {
    border: 1px solid #1d5796;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.featuredRow {
    min-height: 350px;
}

.featprod.grid .thumb {
    position: relative;
    border-bottom: 1px solid white;
}

.featprod.grid a {
    color: #1d5796;
}

.featprod.grid img {
    margin: 5px auto 5px auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.featprod .price {
    font-size: 18px;
    line-height: 20px;
    font-weight: bold;
    padding: 5px 5px 5px 5px;
    text-align: center;
    vertical-align: bottom;
    color: #1d5796;
}

.featprod.grid .price {
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-left-radius: 4px;
    height: 50px;
    overflow: hidden;
}

.featprod .price span {
    font-size: 12px;
    font-weight: normal;
}

    .featprod .price span.matches {
        color: #239043;
    }

.featprod .price img {
    margin: 0;
    padding: 0;
    max-width: 140px;
}

.featprod .price .instock, .featprod .price .avail, .featprod .price .outstock, .featprod .price .comingsoon {
    background-repeat: no-repeat;
    background-position: calc(50% - 47px) center;
    padding-left: 0;
    padding-right: 0;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    display: block;
    text-indent: 0;
}

.featprod .price .instock, .featprod .price .avail {
    background-image: url(/Content/images/icon_tick.svg);
}

.featprod .price .outstock {
    background-image: url(/Content/images/icon_cross.svg);
}

.featprod .price .comingsoon {
    background-image: url(/Content/images/icon_coming_soon.svg);
}

featprod .rating {
    width: 100%;
    height: 20px;
    float: left;
}

#product .thumb .offerdefinedimage, #product .thumb .offer, #product .thumb .offerdefinedimagelower {
    width: 100px;
    height: 100px;
}

.featprod .offerdefinedimage, .featprod .offer {
    width: 100px;
    height: 100px;
}

.manuf {
    width: 100%;
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
    border-radius: 4px;
}

    .manuf img {
        width: 100%;
        height: auto;
        text-align: center;
        display: block; /* because of descenders if it were text */
    }

#values {
    margin-top: 20px;
    width: 100%;
    float: left;
}

    #values li {
        float: left;
        background-repeat: no-repeat;
        background-position: left center;
        color: #1d5796;
        display: flex;
        align-items: center;
    }

        #values li.safe {
            /*background-image: url(/content/images/home_icon_security.svg);*/
            background-repeat: no-repeat;
        }

        #values li.return {
            /*background-image: url(/content/images/home_icon_returns.svg);*/
            background-repeat: no-repeat;
        }

        #values li.express {
            /*background-image: url(/content/images/home_icon_delivery.svg);*/
            background-repeat: no-repeat;
        }

        #values li.collect {
            /*background-image: url(/content/images/home_icon_collect.svg);*/
            background-repeat: no-repeat;
        }

/* product page */
#product {
    width: 100%;
    float: left;
}

    #product .kit {
        font-weight: bold;
        color: #1d5796;
    }

    #product h1 {
        margin-bottom: 10px;
    }

    #product h3 {
        border-top: 1px solid #ccc;
    }

    #product .thumb h1 {
        margin-bottom: 3px;
    }

#prodright h3 {
    border: none;
    margin: 0 0 10px 0;
    padding: 0;
}

.del_box h3 {
    border: none !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

#product .thumb .img-gallery {
    position: relative;
    height: 375px;
    display: flex;
    flex-wrap: nowrap; /* Changed from wrap to nowrap */
    margin-top: 7px;
    min-height: 375px;
}

    /* Main product image container */
    #product .thumb .img-gallery > div:first-child {
        flex: 0 0 350px; /* Fixed width for main image */
        height: 350px;
    }


#product .thumb h4 {
    margin: 10px 0 10px 0;
}

@keyframes performanceSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes productImageShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Ensure buy_box doesn't shift when content loads */
.buy_box {
    min-height: 200px; /* Prevents layout shift */
}

/* Ensure buy_box doesn't shift when content loads */
.buy_box {
    min-height: 200px; /* Prevents layout shift */
}

.buy_box {
    width: 100%;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    min-height: 200px; /* Prevents layout shift */
}

.del_box {
    width: 100%;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    min-height: 115px;
}

    .del_box p {
        margin-bottom: 10px;
    }

.buy_box .yousaved {
    font-size: 12px;
    color: #e31b23;
    font-weight: bold;
}

.buy_box .oldprice {
    font-size: 16px;
    color: #e31b23;
    font-weight: normal;
    text-decoration: line-through;
}

.buy_box .price {
    font-size: 24px;
    color: #e31b23;
    font-weight: bold;
}

.buy_box .smallprice {
    font-size: 12px;
    color: #000000;
    font-weight: bold;
}

.buy_box .buy-qty {
    width: 23%;
    float: left;
    margin-top: 8px;
    margin-bottom: 5px;
    position: relative; /* For absolute positioning of spinner buttons */
}

.buy_box .buy-add {
    width: 70%;
    float: right;
    margin-top: 8px;
    margin-bottom: 5px;
}

.buy_box .qty {
    font-size: 14px;
    width: 100%;
    padding: 10px 12px; /* Match button height */
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background-color: #f9f9f9;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    text-align: center;
}

    /* Hover State */
    .buy_box .qty:hover:not(:disabled) {
        border-color: #1d5796;
        box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.1);
        transform: translateY(-1px);
    }

    /* Focus State */
    .buy_box .qty:focus {
        outline: none;
        border-color: #1d5796;
        box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.15);
        background-color: white;
    }

    /* Valid State (when user has entered a value) */
    .buy_box .qty:valid:not([value=""]):not([value="0"]) {
        background-color: white;
        border-color: #28a745;
        color: #333;
    }

    /* Disabled State */
    .buy_box .qty:disabled {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
        opacity: 0.6;
    }

/* Quantity Spinner Buttons */
.buy_box .qty-spinner {
    position: absolute;
    top: 3px;
    width: 24px;
    height: calc(100% - 5px);
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

    .buy_box .qty-spinner:hover {
        background: #e9e9e9;
        color: #333;
        border-color: #1d5796;
    }

    .buy_box .qty-spinner:active {
        background: #ddd;
        transform: translateY(1px);
    }

    /* Move spinner buttons with the qty input on hover - target parent container approach */
    .buy_box:hover .qty-spinner {
        transform: translateY(-1px);
    }

    .buy_box .qty-spinner.minus {
        left: 2px;
        border-radius: 4px 0 0 4px;
        border-right: none;
    }

    .buy_box .qty-spinner.plus {
        right: 2px;
        border-radius: 0 4px 4px 0;
        border-left: none;
    }

    /* Adjust input padding to make room for spinner buttons */
    .buy_box .qty {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

.buy_box .avail {
    margin: 5px 0 10px 0;
}

.buy_box .dim {
    width: 100%;
    padding: 8px 50px 8px 8px;
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin-bottom: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(to right, #239043, #239043);
    background-position: calc(100% - 17px) calc(1em + 2px), calc(100% - 12px) calc(1em + 2px), 100% 0;
    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
    overflow: hidden;
}

    .buy_box .dim::-ms-expand {
        display: none;
    }

    .buy_box .dim:hover {
        border: 1px solid #090;
    }

.buy_box .offer {
    font-size: 18px;
}

#prodspecs {
    width: 90%;
}

    #prodspecs th {
        width: 40%;
        padding: 4px;
        font-weight: normal;
        color: #000;
        border-right: 1px dotted #eee;
    }

    #prodspecs td {
        width: 60%;
        padding: 4px;
    }

    #prodspecs tr {
        border-bottom: 1px dotted #eee;
    }

#productreview, #productquery {
    width: 100%;
}

#productreview {
    overflow-y: scroll;
}

    #productreview .pagingwrapper {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }

    #productreview .review, #productquery .query {
        border-bottom: 1px dotted #ddd;
        padding: 10px;
        margin-bottom: 10px;
        float: left;
        width: 100%;
    }

    #productreview .rating {
        float: left;
    }

    #productreview .detail {
        float: left;
        font-size: 14px;
        line-height: 1.4em;
    }

.ttable {
    display: table;
}

.rrow {
    display: table-row;
}

.ccell {
    display: table-cell;
}

#productreview .rating .ttable .rrow {
    text-align: left;
    padding: 0 20px 4px 0;
    font-weight: normal;
    font-size: 12px;
    white-space: nowrap;
}

#productreview .rating .ttable .ccell {
    padding: 0 20px 4px 0;
    font-size: 12px;
    white-space: nowrap;
    vertical-align: top;
}

#productreview .detail .author {
    margin-bottom: 8px;
}

#productreview .stars, #review-entry .star {
    margin: 0 2px 0 0;
}

#productreview .write {
    float: left;
    width: 100%;
    border-bottom: 1px dotted #eee;
    padding: 0 10px 10px 10px;
}

#productquery .query .author {
    font-size: 12px;
}

#productquery .query .answer {
    margin: 10px 0 0 10px;
}

    #productquery .query .question .head, #productquery .query .answer .head {
        font-size: 18px;
        font-weight: bold;
    }

#review-entry {
    margin: 20px 0 20px 0;
}

    #review-entry td {
        padding-bottom: 10px;
        padding-right: 30px;
    }

.prodlinks {
    float: left;
    width: 100%;
    margin-top: 4px;
}

    .prodlinks a {
        padding: 6px 8px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: #fff;
        border: 1px solid silver;
        color: #333;
        font-size: 13px;
    }

        .prodlinks a:hover {
            background-color: #eee;
        }

        /* Override prodlinks hover for our modern utility buttons */
        .prodlinks a.modern-util-btn:hover {
            background-color: transparent !important;
        }

    .prodlinks li {
        display: inline;
    }

        .prodlinks li a {
            display: inline-block;
            line-height: 32px;
            height: 32px;
            width: 32px;
            margin-top: 5px;
        }

    .prodlinks .facebook {
        background: no-repeat;
        background-size: cover;
    }

    .prodlinks .threads {
        background: no-repeat;
        background-size: cover;
    }

    .prodlinks .twitter {
        background: no-repeat;
        background-size: cover;
    }

    .prodlinks .youtube {
        background: no-repeat;
        background-size: cover;
    }

    .prodlinks .instagram {
        background: no-repeat;
        background-size: cover;
    }

    .prodlinks .tiktok {
        background: no-repeat;
        background-size: cover;
    }

.videowrapper {
    float: left;
    margin-right: 20px;
}

    .videowrapper iframe {
        width: 100% !important;
        height: 320px !important;
        border: 0;
    }

    .videowrapper lite-youtube {
        width: 100% !important;
        height: 320px !important;
        border: 0;
    }

    .videowrapper p {
        margin: 2px 0 8px 0;
    }

.pdfwrapper {
    border: 1px solid #ccc;
    float: left;
}

.pdfimage {
    float: left;
    margin-right: 10px;
}

.pdfdetail {
    float: left;
}

.LookDims {
    font-weight: bold;
    font-size: 14px;
    color: red;
    padding-left: 10px;
}

.Look {
    font-weight: bold;
    font-size: 14px;
    color: red;
    padding-left: 10px;
    text-align: left;
    margin-top: 12px;
}

.accesswrapper {
    float: left;
    margin-bottom: 10px;
}

    .accesswrapper .price {
        font-size: 14px;
        color: #e31b23;
        font-weight: bold;
    }

.accessimage, .rangeimage, .manufacturerimage {
    float: left;
    width: 80px;
}

div.rangeimage > a > img, div.manufacturerimage > a > img, div.accessimage > a > img, div.accessimage > a > picture > img,
div.rangeimage > a > picture > img, div.manufacturerimage > a > picture > img, div.includeimage > picture > img, div.includeimage > a > picture > img {
    max-height: 70px;
    max-width: 70px;
}


.accessdetail {
    width: 225px;
    float: right;
}

.rangewrapper {
    float: left;
}

.rangedetail, .manufacturerdetail {
    width: 225px;
    float: right;
    padding-top: 23px;
}


.includewrapper {
    float: left;
    margin: 0 10px 10px 0;
    border: 1px solid #ccc;
    padding: 5px;
}

.includeimage {
    float: left;
    width: 90px;
}

.includedetail {
    float: right;
}

.helplist {
    margin-top: 10px;
}

    .helplist li {
        list-style: disc inside;
        margin-bottom: 4px;
    }

#bulkprice {
    border-collapse: collapse;
    border: none;
    width: 100%;
    margin-top: 4px;
    text-align: left;
}

    #bulkprice th {
        color: #fff;
        font-weight: bold;
        background-color: #1d5896;
        padding: 4px;
        text-align: left;
    }

    #bulkprice tr:nth-child(odd) {
        background-color: #eee;
    }

    #bulkprice tr:nth-child(even) {
        background-color: #fff;
    }

    #bulkprice td {
        padding: 4px;
    }

#delcosts, #wrrty, #techhelp {
    display: none;
    margin-bottom: 20px;
}

/* paging and sorting */
.pagingwrapper {
    float: left;
    padding: 15px;
    border-top: 1px solid #e0e0e0;
    width: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Modern sort wrapper styling */
.sortwrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 7px 10px;
    border-radius: 21px;
    border: 2px solid #1d5796;
    box-shadow: 0 2px 10px rgba(29, 87, 150, 0.1);
    transition: all 0.3s ease;
}

.sortwrapper:focus-within {
    border-color: #f8ec1a;
    box-shadow: 0 3px 15px rgba(248, 236, 26, 0.3);
    transform: translateY(-1px);
}

.sortwrapper label {
    font-weight: 600;
    color: #1d5796;
    font-size: 12px;
    margin: 0;
    white-space: nowrap;
}

.sortwrapper select {
    border: none !important;
    background: transparent !important;
    padding: 3px 7px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #333 !important;
    outline: none !important;
    cursor: pointer !important;
    min-width: 119px;
}

.sortwrapper select:hover {
    background: transparent !important;
}

/* Modern results count styling */
.pagewrapper {
    float: right;
    text-align: right;
    display: flex;
    align-items: center;
    height: 35px;
}

.pagewrapper p {
    background: linear-gradient(135deg, #1d5796 0%, #2a66a8 100%);
    color: #ffffff;
    padding: 1px 14px;
    border-radius: 17px;
    font-weight: 600;
    font-size: 12px;
    margin: 0;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(29, 87, 150, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
    line-height: 1.2;
}

.pagewrapper a {
    border: 1px solid #ccc;
}

    .pagewrapper a:hover {
        background-color: #eee;
    }

    .pagewrapper a.selected {
        font-weight: bold;
        background-color: #ccc;
    }

    .pagewrapper a.plain {
        border: none;
    }

/* basket contents */
#basket-content, #basket-footer, #basket-totals {
    width: 100%;
}

#basket-content {
    border-bottom: 2px solid #eee;
}

    #basket-content tr.item {
        width: 100%;
    }

    #basket-content tr.divide {
        border-top: 2px solid #eee;
        height: 1px;
    }

#basket-totals tr {
    border-bottom: 2px solid #eee;
    width: 100%;
}

#basket-content tr.item.promo {
    background-color: #e9ffd9;
}

#basket-content td.image {
    height: 140px;
}

#basket-content tr.item img, .checkout-wrapper #basket-content td.image img {
    min-height: 30px;
    max-width: 100px;
}

#basket-content .code {
    font-size: 12px;
    color: #666;
}

#basket-content .avail {
    font-size: 12px;
}

#basket-content .direct-delivery {
    font-size: 12px;
    color: #239043;
}

/* Modern basket action buttons */
#basket-content .remove, #basket-content .updateBasket {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    user-select: none;
}

/* Remove button styling */
#basket-content .remove {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    border-color: #e74c3c;
}

#basket-content .remove:hover {
    background: linear-gradient(135deg, #ff5252, #e74c3c);
    border-color: #c0392b;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Update button styling */
#basket-content .updateBasket {
    background: linear-gradient(135deg, #1d5796, #2980b9);
    color: white;
    border-color: #1d5796;
}

#basket-content .updateBasket:hover {
    background: linear-gradient(135deg, #2980b9, #3498db);
    border-color: #2c3e50;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Basket footer action buttons - Clear and Continue Shopping */
.basket-clear, .basket-continue {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    user-select: none;
    vertical-align: top; /* Ensure consistent alignment within table cell */
}

/* Container for basket footer buttons - force right alignment */
tfoot td[align="right"],
.basket tfoot td[align="right"],
#basket-content table tfoot td[align="right"] {
    text-align: right !important;
    white-space: nowrap; /* Prevent buttons from wrapping */
}

/* Remove any margin/padding issues between inline-block buttons */
tfoot .basket-clear,
.basket tfoot .basket-clear,
#basket-content tfoot .basket-clear {
    margin-right: 4px;
    margin-left: 0;
}

tfoot .basket-continue,
.basket tfoot .basket-continue,
#basket-content tfoot .basket-continue {
    margin-right: 0;
    margin-left: 0;
}

/* Clear Basket button styling - matches Remove button */
.basket-clear {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    border-color: #e74c3c;
}

.basket-clear:hover {
    background: linear-gradient(135deg, #ff5252, #e74c3c);
    border-color: #c0392b;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: white;
    text-decoration: none;
}

/* Continue Shopping button styling - matches Update button */
.basket-continue {
    background: linear-gradient(135deg, #1d5796, #2980b9);
    color: white;
    border-color: #1d5796;
}

.basket-continue:hover {
    background: linear-gradient(135deg, #2980b9, #3498db);
    border-color: #2c3e50;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: white;
    text-decoration: none;
}

/* Basket Share Buttons */
.basket-share-text {
    display: inline-block;
    font-weight: 600;
    color: #333;
    margin-right: 10px;
    vertical-align: middle;
}

.basket-share-buttons {
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
}

.basket-share-buttons .share-icon {
    margin-right: 5px;
    vertical-align: middle;
}

.basket-share-buttons .share-icon:last-child {
    margin-right: 0;
}

/* Collect in Store button - modern orange/amber styling */
.collect-store-btn {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    border: 2px solid #d68910;
    width: 189px;
    height: 40px;
    padding: 0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    margin-top: -2px;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
}

/* Add a subtle store icon effect with pseudo element */
.collect-store-btn::before {
    content: '🏪';
    margin-right: 6px;
    font-size: 14px;
    opacity: 0.9;
}

.collect-store-btn:hover {
    background: linear-gradient(135deg, #e67e22, #d35400);
    border-color: #b7950b;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(211, 84, 0, 0.3);
    color: white;
    text-decoration: none;
}

.collect-store-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.collect-store-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.3);
}

/* Buy with Card button - modern blue/teal styling */
.buy-with-card-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: 2px solid #2471a3;
    width: 189px;
    height: 40px;
    padding: 0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
}

/* Add a subtle card icon effect with pseudo element */
.buy-with-card-btn::before {
    content: '💳';
    margin-right: 6px;
    font-size: 14px;
    opacity: 0.9;
}

.buy-with-card-btn:hover {
    background: linear-gradient(135deg, #2980b9, #1f4e79);
    border-color: #1b4f72;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(41, 128, 185, 0.3);
    color: white;
    text-decoration: none;
}

.buy-with-card-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.buy-with-card-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

/* Focus state for accessibility */
.collect-store-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.4);
}

/* Continue to Payment button styling - matches buy-with-card blue theme */
.continue-payment-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: 2px solid #2471a3;
    width: 236px;
    height: 50px;
    padding: 0;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
}

/* Payment icon for Continue to Payment button */
.continue-payment-btn::before {
    content: '→';
    margin-right: 6px;
    font-size: 16px;
    opacity: 0.9;
}

.continue-payment-btn:hover {
    background: linear-gradient(135deg, #2980b9, #1f4e79);
    border-color: #1b4f72;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(41, 128, 185, 0.3);
    color: white;
    text-decoration: none;
}

.continue-payment-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.continue-payment-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

/* Proceed with Payment button styling - matches buy-with-card blue theme */
.proceed-payment-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: 2px solid #2471a3;
    width: 236px;
    height: 50px;
    padding: 0;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
}

/* Payment icon for Proceed with Payment button */
.proceed-payment-btn::before {
    content: '✓';
    margin-right: 6px;
    font-size: 14px;
    opacity: 0.9;
}

.proceed-payment-btn:hover {
    background: linear-gradient(135deg, #2980b9, #1f4e79);
    border-color: #1b4f72;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(41, 128, 185, 0.3);
    color: white;
    text-decoration: none;
}

.proceed-payment-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.proceed-payment-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

/* Modern utility buttons - matching basket button styling */
.modern-util-btn,
.prodlinks .modern-util-btn {
    padding: 8px 12px !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 2px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    user-select: none !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}


/* Change button styling - modernized blue theme matching payment buttons */
.change-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: 2px solid #2471a3;
    width: auto;
    height: 36px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
    margin-left: 8px;
    vertical-align: middle;
}

.change-btn:hover {
    background: linear-gradient(135deg, #2980b9, #1f4e79);
    border-color: #1b4f72;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(41, 128, 185, 0.3);
    color: white;
    text-decoration: none;
}

.change-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.change-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

/* Desktop layout - buttons side by side below quantity controls */
#basket-content .qty .qtyButtons {
    margin-top: 8px;
    text-align: center;
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

#basket-content .qty {
    position: relative;
    text-align: center;
}


#basket-content .variant, .accesswrapper .variant {
    color: #999;
}

.featprod .variant {
    color: hsl(204, 2%, 47%);
    font-size: 12px;
}

#basket-totals td.total {
    font-size: 16px;
    font-weight: bold;
}

#basket-totals td.discount {
    font-size: 16px;
    font-weight: bold;
    color: red;
}

#basket-totals .checkout-buttons tr {
    border: none;
}

#basket-totals .checkout-buttons td {
    padding: 4px;
    width: 190px;
}

#basket-footer #postage {
    width: 43%;
    float: left;
}

#basket-footer #promo {
    width: 43%;
    float: left;
    padding-left: 10px;
}

#basket-footer #totals {
    width: 55%;
    float: right;
}


#basket-footer #postage {
    margin-top: 10px;
    background-color: #eee;
    padding: 10px 20px 20px 20px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-right-radius: 8px;
}

#basket-footer #promo {
    margin-top: 10px;
}

#basket-footer #postage input, #basket-footer #postage select {
    margin-bottom: 8px;
}

/* basket related */
#basket-related .panel {
    width: 100%;
    height: 200px;
}

#basket-related .added img {
    float: left;
    width: 25%;
    border: 1px solid #ccc;
    margin-right: 10px;
    padding: 5px;
    background-color: #fff;
}

#basket-related .added p {
    float: left;
    width: 70%;
}

#basket-related .summary p {
    font-size: 16px;
    margin-bottom: 10px;
}

#basket-related .summary span {
    font-weight: bold;
}

#basket_coupon {
    border: 1px solid #ccc;
    background-color: #e9ffd9;
    padding: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px 20px;
    margin-top: 10px;
}

    #basket_coupon.open {
        display: block;
    }

    #basket_coupon.closed {
        display: none;
    }

    #basket_coupon input.wrong {
        border: 1px solid red;
    }

    #basket_coupon input.ok {
        border: 1px solid green;
    }

/* compare contents */
.compare-content {
    width: 100%;
    border: 1px solid #ccc;
}

    .compare-content th {
        border: 1px solid #ccc;
        background-color: #eee;
        padding: 5px;
    }

    .compare-content td {
        border: 1px solid #ccc;
        padding: 5px;
    }

        .compare-content td.image {
            text-align: center;
        }

            .compare-content td.image img {
                max-width: 100%;
            }

/* testimonials page */
#testimonials {
    float: left;
    margin-bottom: 20px;
}

    #testimonials .header {
        width: 100%;
        float: left;
        font-size: 10px;
        margin: 20px 0 20px 0;
    }

    #testimonials .testimonial {
        padding: 20px;
        font-size: 10pt;
        border-top: 1px dotted #ddd;
    }

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

/* login */
.login-left, .login-right {
    border: 1px #ccc solid;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

    .login-left p, .login-right p {
        margin-bottom: 1em;
    }

    .login-right ul {
        list-style: disc outside;
        margin-bottom: 1em;
    }

    .login-right li {
        display: list-item;
        text-align: -webkit-match-parent;
        margin-left: 2em;
        margin-bottom: 0.4em;
    }

/* checkout */
.checkout-wrapper {
    float: left;
}

    .checkout-wrapper h3 {
        margin-bottom: 15px;
    }

    .checkout-wrapper .inputs, .login .inputs, .login-left .inputs {
        float: left;
        width: 100%;
    }

    .checkout-wrapper .checkbox label, .login .checkbox label, .login-left .checkbox label {
        margin-left: 10px;
    }

    .checkout-wrapper label, .login label, .login-left label, .checkout-wrapper input,
    .checkout-wrapper select, .login input, .login-left input, .login-left select {
        float: left;
    }

    .checkout-wrapper .address {
        float: left;
        width: 50%;
    }

    .checkout-wrapper .add {
        float: left;
        border: 1px solid #ccc;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        margin: 0 10px 10px 0;
        height: 240px;
        position: relative;
        width: 100%;
        padding: 20px;
        overflow: hidden;
    }

        .checkout-wrapper .add button {
            width: calc(100% - 40px);
            position: absolute;
            bottom: 20px;
            left: 20px;
        }

    .checkout-wrapper .selected {
        color: #fff;
        background-color: #239043;
        border: 1px solid #239043;
    }

        .checkout-wrapper .selected button {
            background: url(/Content/images/icon_tick.svg) no-repeat;
            background-color: #fff;
            background-position: right 8px center;
            background-size: 20px;
        }

#delivery_opts p {
    margin-bottom: 10px;
}

#delivery_opts .upgrade {
    float: left;
    width: 100%;
    border: 1px solid #239043;
    padding: 10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin: 0 10px 10px 0;
    background: #fff; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(39,160,75,0.05), rgba(39,160,75,0.3)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(39,160,75,0.05), rgba(39,160,75,0.3)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(39,160,75,0.05), rgba(39,160,75,0.3)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(39,160,75,0.05), rgba(39,160,75,0.3)); /* Standard syntax */
}

    #delivery_opts .upgrade.selected {
        background: #239043;
        color: #fff;
    }

#delivery_opts div.upgrade:hover {
    background-color: #090;
    cursor: pointer;
}

#addresses .address {
    height: 250px;
    position: relative;
}

    #addresses .address .buttons {
        position: absolute;
        bottom: 10px;
        left: 0;
    }

#payment-cards {
    width: 100%;
}

    #payment-cards tr {
        height: 56px;
    }

        #payment-cards tr.chosen {
            background: #239043;
            color: #fff;
            font-weight: bold;
        }

    #payment-cards th {
        padding: 8px;
        border-bottom: 1px solid #eee;
    }

    #payment-cards td {
        padding: 8px;
        border-bottom: 1px solid #eee;
    }

        #payment-cards td.choice {
            min-width: 30px;
            padding-left: 12px;
        }

    #payment-cards img {
        width: 60px;
    }

/*.cat-tree
{
}*/
.cat-tree ul:nth-child(n+2) {
    padding-left: 20px;
}

/* Modern back to top button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #1d5796;
    border: 3px solid #f8ec1a;
    border-radius: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    z-index: 1000;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .back-to-top:hover {
        background: #155d8a;
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 10px 35px rgba(29, 87, 150, 0.4);
        text-decoration: none;
        border-color: #f8ec1a;
    }

    .back-to-top:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(29, 87, 150, 0.3);
    }

    .back-to-top i {
        font-style: normal;
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 2px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }

    /* Make the arrow specifically bigger and bolder */
    .back-to-top i::first-letter {
        font-size: 20px;
        font-weight: 900;
        margin-right: 2px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    }

.orderlist {
    border: 1px solid #ccc;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 20px 15px;
}

/* infinite scroll */
.product-list {
    float: left;
    width: 100%;
}

.infinite-scroll-request {
    text-align: center;
    font-size: 30px;
}

    .infinite-scroll-request img {
        vertical-align: middle;
    }

.page-load-status {
    display: none !important;
}

.smallprint {
    font-size: 11px;
    padding-bottom: 10px;
}

    .smallprint ul {
        list-style: disc inside;
    }

.voucher {
    min-height: 210px;
    position: relative;
    width: 100%;
    border: 1px solid #ccc;
    padding: 3px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    text-align: center;
}

    .voucher .code {
        font-size: 23px;
        line-height: 23px;
        font-weight: bold;
        background: #e9ffd9;
        border: 1px solid #a6ca8a;
        padding: 10px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        margin: 5px;
    }

        .voucher .code.expired {
            background: #ffecec;
            border: 1px solid #f5aca6;
            text-decoration: line-through;
        }

    .voucher h3 {
        font-size: 22px;
        margin: 0 0 10px 0;
    }

    .voucher .expiry {
        font-size: 12px;
        font-weight: normal;
    }

.loader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    text-align: center;
    width: 100%;
}

.loader_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader.message .loader_inner {
    background: rgba(0,0,0,.7);
    z-index: 9999;
    padding: 10px;
}

.loader_inner img {
    width: 63px;
    height: 64px;
}

.loader_inner p, .loader_inner a {
    color: #fff;
    font-size: 26px;
}

.loader_inner a {
    cursor: pointer;
    color: #fff32f
}

span.overlay {
    position: absolute;
    bottom: 15px;
    left: 80px;
    pointer-events: none;
}

    span.overlay img {
        width: 50px !important;
        height: 50px !important;
    }

span.overlay2 {
    position: absolute;
    bottom: 0px;
    right: 0px;
    pointer-events: none;
}

    span.overlay2 img {
        width: 75px !important;
        height: 75px !important;
    }

span.offer2 {
    position: absolute;
    bottom: 0px;
    right: 0px;
    pointer-events: none;
    background-image: url(/Content/images/offer_stripe_df.png);
    z-index: 1;
    width: 75px !important;
    height: 75px !important;
    background-size: contain;
}

#basket-content span.overlay img {
    width: 30px !important;
    height: 30px !important;
}

.IncVAT a, .ExVAT a {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

.IncVAT img, .ExVAT img {
    height: 10px;
    width: auto;
}

#badge-ribbon {
    height: 90px;
}

.promoTag {
    width: 100%;
    max-width: 100%;
    min-height: 50px;
    color: #000 !important;
    font-size: 18px;
    border-radius: 8px;
    margin: 15px 0px 0px 0px;
}

    .promoTag a {
        cursor: pointer;
    }

    .promoTag a, .promoTag img {
        width: inherit !important;
    }

.hideBlurb {
    display: none;
}

.authorizedSellerContainer, .authorizedSellerContainer img {
    width: 340px;
    height: 35px;
}

.paypal a,
.paypal2 a {
    text-decoration: underline; /* Always show underline */
    text-underline-offset: 2px; /* Better spacing for underline */
    font-weight: 600; /* Slightly bolder */
    color: #0d3660; /* Ensure good contrast */
}

    .paypal a:hover,
    .paypal2 a:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px; /* Thicker underline on hover */
        color: #1d5796;
    }

    .paypal a:focus,
    .paypal2 a:focus {
        outline: 2px solid #4d94ff;
        outline-offset: 2px;
        border-radius: 2px;
        text-decoration: underline;
    }

    /* Add visual indicator with pseudo-element (optional) */
    .paypal a::after,
    .paypal2 a::after {
        content: " ?"; /* External link indicator */
        font-size: 0.8em;
        vertical-align: super;
    }

.paypal p {
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: center;
}

.paypal img, .paypal2 img {
    vertical-align: top;
    width: 67px;
    height: 18px;
}

.paypal2 p {
    margin-bottom: 5px;
    text-align: right;
}

/* Logid#96 - brandcategory layout additional classes */
.new .col a, .col-sm a, .col-1-1 a, .new .col-1-2 a, .new .col-1-3 a, .new .col-1-4 a, .new .col-1-5 a, .new .col-1-6 a, .new .col-1-8 a {
    display: block;
    width: 100%;
    height: 100%;
}

.new.allcategories .col-1-4.cat, .brandCategories .col-1-4.cat {
    display: flex;
}

.new .col img, .col-sm img, .col-1-1 img, .new .col-1-2 img, .new .col-1-3 img, .new .col-1-4 img, .new .col-1-5 img, .new .col-1-6 img, .new .col-1-8 img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
}

.brandCategories .new h2 {
    padding-left: 5px;
}

.brandCategories .new .cat a, .allcategories .cat a {
    position: relative;
    display: block;
    border: 1px solid #ccc;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .brandCategories .new .cat a div.blueBar, .allcategories .cat a div.blueBar {
        height: 65px;
        position: absolute;
        bottom: 0px;
        width: 100%;
        display: table;
        background-color: #1D5796;
    }

        .brandCategories div.blueBar div, .allcategories .cat a div.blueBar div {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            color: #fff;
            font-size: 20px;
            height: 65px;
            width: 100%;
        }

        .brandCategories div.blueBar.man div, .allcategories .cat a div.blueBar.man div {
            font-size: 20px;
            padding-left: 2px;
            padding-right: 2px;
        }

.brandCategories .new {
    min-height: 300px;
}


/* Ensure the main product image maintains aspect ratio */
#product .thumb .prodimg {
    width: 350px; /* Fixed width instead of 100% */
    height: 350px;
    max-width: 350px;
    max-height: 350px;
    aspect-ratio: 1/1;
    object-fit: contain;
}

/* Override Bootstrap figure margin for product gallery */
#product .thumb .img-gallery figure {
    margin: 0;
}


#logo a {
    display: block;
    height: auto;
}

.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.brandProdList {
    min-height: 450px;
}

.bt-drop-in-wrapper {
    min-height: 200px;
    position: relative;
    z-index: 1;
}

#payment-form .hidden {
    display: none;
}

.modal-dialog {
    overflow: initial;
}

.modal-body {
    max-height: 600px;
    min-width: 600px;
    overflow-y: auto;
    padding-top: 0;
}

.modal-content {
    background-color: #fff;
    min-height: 200px;
    min-width: 600px;
    /*border: 0px !important;*/
}

.modal-body h1, .modal-body h3 {
    margin: 0 !important;
}

.modal-content .proceed {
    margin-left: 50px;
    float: left !important;
}

.modal-header {
    border: 0;
    border-radius: 0.3rem;
    height: 30px;
    width: 600px;
}

    .modal-header button {
        position: absolute;
        right: 20px;
    }

.addressPane {
    height: 150px;
}

.paymentErrorMessage {
    padding: 10px;
    font-weight: bold;
    color: red;
    text-align: center;
}

.updateBasket {
    display: none;
}

/* Removed old qtyBox width - now handled by qty-input-wrapper */

/* Basket quantity controls - use same structure as buy_box */
#basket-content .qty-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100px; /* Wide enough for 999 + spinner buttons */
}

#basket-content .qty-spinner {
    position: absolute;
    top: 3px;
    width: 24px;
    height: calc(100% - 6px);
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

#basket-content .qty-spinner:hover {
    background: #e9e9e9;
    color: #333;
    border-color: #1d5796;
}

#basket-content .qty-spinner:active {
    background: #ddd;
    transform: translateY(1px);
}

/* Move spinner buttons with the qty input on hover - target parent container approach */
#basket-content .qty:hover .qty-spinner {
    transform: translateY(-1px);
}

#basket-content .qty-spinner.minus {
    left: 2px;
    border-radius: 4px 0 0 4px;
    border-right: none;
}

#basket-content .qty-spinner.plus {
    right: 2px;
    border-radius: 0 4px 4px 0;
    border-left: none;
}

/* Adjust basket quantity input to make room for spinner buttons and match product page styling exactly */
#basket-content .qty-input-wrapper .qtyBox {
    font-size: 14px;
    width: 100% !important;
    padding: 8px 32px !important; /* Slightly more padding for 3 digits */
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background-color: #f9f9f9;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    text-align: center;
    min-width: 100px; /* Ensure minimum width for 3 digits */
}

/* Hover State for quantity input */
#basket-content .qty-input-wrapper .qtyBox:hover:not(:disabled),
#basket-content .qty:hover .qtyBox:not(:disabled) {
    border-color: #1d5796;
    box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.1);
    transform: translateY(-1px);
}

/* Focus State for quantity input */
#basket-content .qty-input-wrapper .qtyBox:focus {
    outline: none;
    border-color: #1d5796;
    box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.15);
    background-color: white;
}

.gap {
    margin-top: 10px;
}

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

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

.signInSpan {
    float: left;
    margin-right: 10px;
}

.product-list .brands p a, #homecats .ranges p a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
}

#homecats .ranges p a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

#billadd h3, #shipadd h3 {
    padding-bottom: 10px;
    float: left;
    padding-right: 10px;
}

#billadd button.returnList, #shipadd button.returnList {
    background-color: #239043;
    border: 1px solid #239043;
    color: #fff;
    padding: 2px 10px;
    font-size: 10px;
}

.DefaultButtons {
    width: 70%;
    padding-top: 10px;
}

.DefaultButtons {
    padding-top: 5px;
}

    .DefaultButtons span {
        min-width: 200px;
        display: inline-block;
    }

#DefaultBill, #DefaultShip {
    margin-top: 2px;
}

.checkout-wrapper.add label {
    width: 25%;
}

/*Braintree override*/

[data-braintree-id="save-card-field-group"] label {
    width: 100px;
}

.reviews-io-rating-bar-widget {
    float: left;
    /*padding: 5px 0px 0px 6px;*/
    margin-top: 1px;
}

#accbar2 {
    float: left;
    background-color: #333;
    font-size: 13px;
    color: #fff;
    width: 100%;
    min-height: 32px;
}

    #accbar2 li {
        margin-top: 6px;
        display: inline;
        margin-left: 40px;
    }

    #accbar2 #acclinks2 {
        float: left;
        margin-top: 6px;
    }

    #accbar2 #acclinks3 {
        float: left;
        margin-top: 6px;
    }

/* Fix accbar text overflow on smaller screens - more aggressive */
@media (max-width: 1400px) {
    #accbar2 li {
        margin-left: 20px;
        font-size: 12px;
    }
}

@media (max-width: 1200px) {
    #accbar2 li {
        margin-left: 15px;
        font-size: 11px;
    }

    #accbar2 #acclinks3 {
        display: none; /* Hide "Online Trading Since 1996" */
    }
}

@media (max-width: 1000px) {
    #accbar2 li {
        margin-left: 10px;
        font-size: 10px;
    }

}

@media (max-width: 800px) {
    #accbar2 li {
        margin-left: 5px;
        font-size: 9px;
    }

    /* Also fix top accbar on smaller screens */
    #accbar li {
        padding: 0 3px;
        font-size: 10px;
    }

}

@media (max-width: 600px) {
    #accbar2 {
        display: none; /* Hide entire bottom bar on mobile */
    }
}

.competition-scroller {
    height: 350px;
}

/* Base container styles */
#filters,
.enhanced-filters,
.mobile-filter-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    float: left;
    padding: 0 10px 10px 10px;
    width: 100%;
}

    /* Filter headers - unified */
    #filters .filter-header,
    #filters .btn_header,
    #filters a.expand,
    .enhanced-filters .filter-header {
        display: block;
        width: 100%;
        padding: 14px 16px;
        background: linear-gradient(to bottom, #f8f9fa, #f3f4f6);
        border: 1px solid #e1e5eb;
        border-radius: 6px;
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #2c5282;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        text-decoration: none;
    }

    /* Filter sections */
    #filters .filter-section,
    .enhanced-filters .filter-section {
        background: #fff;
        border: 1px solid #e1e5eb;
        border-radius: 6px;
        margin-bottom: 12px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    /* Individual filter items */
    #filters .filt,
    .enhanced-filters .filt {
        margin: 0;
        border-bottom: 1px solid #f0f2f5;
        transition: background 0.2s ease;
    }

        #filters .filt:last-child,
        .enhanced-filters .filt:last-child {
            border-bottom: none;
        }

        /* Filter links - unified base */
        #filters .filt a,
        .enhanced-filters .filter-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            text-decoration: none;
            color: #4a5568;
            font-size: 14px;
            transition: all 0.2s ease;
            position: relative;
        }

            #filters .filt a:hover,
            .enhanced-filters .filter-item:hover {
                background: #f7fafc;
                color: #2c5282;
            }

            /* Checkbox styling - unified */
            #filters .filt a::before,
            .enhanced-filters .filter-item::before {
                content: "";
                width: 18px;
                height: 18px;
                background: #fff;
                border: 2px solid #cbd5e0;
                border-radius: 4px;
                margin-right: 12px;
                transition: all 0.2s ease;
                flex-shrink: 0;
                display: inline-block;
                vertical-align: top;
            }

            /* Selected state */
            #filters .filt a.selected::before,
            .enhanced-filters .filter-item.selected::before {
                background: hsl(211, 68%, 35%);
                border-color: hsl(211, 68%, 35%);
            }

            /* Hover state for checkbox */
            #filters .filt a:hover::before,
            .enhanced-filters .filter-item:hover::before {
                border-color: hsl(211, 68%, 35%);
            }

.arrow {
    margin-left: auto;
}

/* Checkmark for selected items 
            #filters .filt a.selected::after,
            .enhanced-filters .filter-item.selected::after {
                content: "";
                position: absolute;
                left: 22px;
                top: 50%;
                width: 5px;
                height: 9px;
                border: solid white;
                border-width: 0 2px 2px 0;
                transform: translateY(-60%) rotate(45deg);
                margin-top: -2px;
            }*/

/* Product Count */
#filters .count,
.enhanced-filters .count,
#filters .filter-count,
.enhanced-filters .filter-count {
    margin-left: auto;
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

#filters .filt a.selected .count,
.enhanced-filters .filter-item.selected .count,
#filters .filt a.selected .filter-count,
.enhanced-filters .filter-item.selected .filter-count {
    background: #2c5282;
    color: white;
}

/* Disabled filter items (cannot be deselected) */
.enhanced-filters .filter-item.disabled,
.enhanced-filters .filter-item.selected.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
    display: block !important;
    padding: 12px 16px;
}

.enhanced-filters .filter-item.disabled::before,
.enhanced-filters .filter-item.selected.disabled::before {
    display: none !important;
}

.enhanced-filters .filter-item.disabled .deselect-message,
.enhanced-filters .selected.disabled .deselect-message {
    display: block;
    font-size: 10px;
    color: #e53e3e;
    font-weight: normal;
    margin-top: 3px;
    line-height: 1;
    white-space: nowrap;
    width: 100%;
    clear: both;
}

/* Category parent context styling - blue theme */
.enhanced-filters .category-parent {
    display: block;
    font-size: 10px;
    color: #2c5282;
    font-weight: normal;
    margin-bottom: 2px;
    line-height: 1;
    white-space: nowrap;
    width: 100%;
    opacity: 0.8;
}

/* Category filter items with parent context - stack vertically */
.enhanced-filters .filter-item:has(.category-parent) {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding-left: 0; /* Remove global padding */
}

/* Move checkbox to align with category name, not parent */
.enhanced-filters .filter-item:has(.category-parent)::before {
    position: absolute;
    left: 16px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    margin-top: 6px; /* Fine-tune alignment with category name */
}

/* Fallback for browsers that don't support :has() */
.enhanced-filters .filter-item .category-parent + .category-main {
    margin-top: 0;
}

.enhanced-filters .filter-item:has(.category-parent) .category-main {
    width: 100%;
    padding-left: 32px; /* Reduced spacing to match normal filters */
    margin-left: 0;
}

.enhanced-filters .filter-item:has(.category-parent) .category-parent {
    padding-left: 32px; /* Align parent text with category */
    margin-left: 0;
}

.enhanced-filters .category-main {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}


.enhanced-filters .filter-item.disabled .filter-main,
.enhanced-filters .selected.disabled .filter-main {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.enhanced-filters .filter-item.disabled:hover {
    background: #f7fafc !important;
    border-color: #e2e8f0 !important;
}

/* Clear Filters Button - Match product dimension dropdown styling with red theme */
#filters .btn_header_clear,
.enhanced-filters .btn_header_clear {
    display: block;
    width: 100%;
    padding: 8.8px 12px; /* Match dropdown padding */
    margin: 12px 0;
    background: #fdf0f0; /* Light red background like light green on dropdowns */
    border: 2px solid #f5a3a3; /* Light red border like light green on dropdowns */
    color: #5a5a5a; /* Match dropdown text color */
    text-align: center;
    text-decoration: none;
    border-radius: 8px; /* Match dropdown border radius */
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease; /* Match dropdown transition */
    cursor: pointer;
    box-sizing: border-box;
}

    #filters .btn_header_clear:hover,
    .enhanced-filters .btn_header_clear:hover {
        border: 2px solid #1d5796; /* Match dropdown hover border */
        box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.1); /* Match dropdown hover shadow */
        transform: translateY(-1px);
        background: white; /* Clean white background on hover */
    }

    /* Active state when clicked/focused */
    #filters .btn_header_clear:focus,
    .enhanced-filters .btn_header_clear:focus,
    #filters .btn_header_clear:active,
    .enhanced-filters .btn_header_clear:active {
        outline: none;
        border: 2px solid #e74c3c; /* Red border for active state */
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
        background: white;
        color: #e74c3c;
    }

/* View More Link */
#filters .view-more-wrapper,
.enhanced-filters .view-more-wrapper {
    padding: 12px;
    text-align: center;
    background: #f8f9fa;
    border-top: 1px solid #e1e5eb;
}

    #filters .view-more-wrapper a.more,
    .enhanced-filters .view-more-wrapper a.more,
    #filters .view-more a,
    .enhanced-filters .view-more a {
        color: #2c5282;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s ease;
    }

        #filters .view-more-wrapper a.more:hover,
        .enhanced-filters .view-more-wrapper a.more:hover,
        #filters .view-more a:hover,
        .enhanced-filters .view-more a:hover {
            color: #1d5796;
            text-decoration: underline;
        }

/* Back link styling */
.back-link {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e5eb;
}

    .back-link a {
        font-weight: 600;
        color: #2c5282;
    }

/* Filter Options Header */
#filters .btn_header_pad,
.enhanced-filters .btn_header_pad {
    text-align: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #1d5796;
}

/* Desktop only - devices that truly support hover */
@media (hover: hover) and (pointer: fine) and (min-width: 897px) {
    .img-gallery:not(.photoswipe-loaded) {
        position: relative; /* Ensure positioning context */
    }

        .img-gallery:not(.photoswipe-loaded):hover::after {
            content: 'Click to enable image zoom';
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform: translate(-50%, 50%); /* Center both horizontally and vertically */
            background: rgba(29, 87, 150, 0.9);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            pointer-events: none;
            z-index: 10;
            white-space: nowrap;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
}
/* ========================================
   MODERN DROPDOWN STYLING
   Updated dropdown styles for ProductDimensions and Variant Modal
   ======================================== */
/* Variant Selection Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

    .modal-overlay .modal-content {
        background: white;
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        max-width: 500px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        animation: modalSlideIn 0.3s ease-out;
    }

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

.modal-overlay .modal-header {
    padding: 24px 24px 32px;
    border-bottom: 1px solid #e5e5e5;
    display: block; /* Changed from flex to block to prevent line-through */
    position: relative;
    min-height: 100px; /* Increased from 90px to accommodate extra spacing */
}

    .modal-overlay .modal-header h3 {
        margin: 0 0 16px 0; /* Original spacing */
        font-size: 18px; /* Reduced from 20px to 18px (2px smaller) */
        color: #333; /* Changed from blue to black */
        line-height: 1.3;
        font-weight: 600;
    }

    .modal-overlay .modal-header .product-name {
        font-size: 16px; /* Increased from 14px to make it larger */
        color: #1d5796; /* Keep product name blue */
        font-weight: 600;
        line-height: 1.4;
        margin-top: 10px; /* Add space between Select Type and product name */
        margin-bottom: 16px; /* Added bottom margin to separate from Level1Name */
        display: block;
        word-wrap: break-word; /* Allow long product names to wrap */
        overflow-wrap: break-word; /* Additional browser support */
        white-space: normal; /* Allow wrapping */
        text-decoration: none; /* Remove underline from link */
        transition: color 0.2s ease; /* Smooth color transition on hover */
    }

    .modal-overlay .modal-header .product-name:hover {
        color: #0f3d66; /* Darker blue on hover */
        text-decoration: underline; /* Add underline on hover */
    }

.modal-overlay .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: absolute;
    top: 20px;
    right: 20px;
}

    .modal-overlay .modal-close:hover {
        background: #f5f5f5;
        color: #333;
    }

.modal-overlay .modal-body {
    padding: 24px;
}

.modal-overlay .modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center; /* Center the buttons */
    max-width: 100%; /* Ensure it doesn't exceed dropdown width */
}

/* Product description link styling */
.modal-overlay .modal-footer .product-description-link {
    text-align: center;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    width: 100%; /* Full width for centering */
    order: 3; /* Place after buttons */
}

.modal-overlay .modal-footer .product-description-link a {
    color: #1d5796;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: color 0.2s ease;
    display: block; /* Make it a block element for better centering */
}

.modal-overlay .modal-footer .product-description-link a:hover {
    color: #0f3d66;
    text-decoration: underline;
}
/* Variant Selection Groups */
.variant-group {
    margin-bottom: 20px;
}

    .variant-group:last-child {
        margin-bottom: 0;
    }

    .variant-group label {
        display: block;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
        font-size: 14px;
        transition: color 0.2s ease;
    }

        .variant-group label.disabled {
            color: #999;
        }
    /* Modern Dropdown Styles - Universal */
    .variant-group select,
    .buy_box .dim,
    select.dim {
        width: 100%;
        padding: 8.8px 50px 8.8px 8px; /* Increased from original 8px to 8.8px (10% increase) */
        border: 2px solid #e0e0e0 !important; /* !important to override base select styles */
        border-radius: 8px;
        background: white;
        font-size: 14px;
        color: #333;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: 50px; /* Keep original right padding for arrow space */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin-bottom: 6px; /* Increased from original 4px to 6px (2px increase) */
    }
        /* Remove old MS expand arrow */
        .variant-group select::-ms-expand,
        .buy_box .dim::-ms-expand,
        select.dim::-ms-expand {
            display: none;
        }
        /* Inactive/Placeholder State - Light green to invite action */
        .variant-group select:invalid,
        .buy_box .dim:invalid,
        select.dim:invalid,
        .variant-group select[value=""],
        .buy_box .dim[value=""],
        select.dim[value=""] {
            background-color: #f0f9f0;
            border-color: #90c695;
            color: #5a5a5a;
        }
        /* Hover State */
        .variant-group select:hover:not(:disabled),
        .buy_box .dim:hover:not(:disabled),
        select.dim:hover:not(:disabled) {
            border: 2px solid #1d5796 !important; /* Maintain 2px width */
            box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.1);
            transform: translateY(-1px);
        }
        /* Focus State */
        .variant-group select:focus,
        .buy_box .dim:focus,
        select.dim:focus {
            outline: none;
            border: 2px solid #1d5796 !important; /* Maintain 2px width */
            box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.15);
            background-color: white;
        }
        /* Active/Selected State - Clear background when value selected */
        .variant-group select:valid:not([value=""]),
        .buy_box .dim:valid:not([value=""]),
        select.dim:valid:not([value=""]) {
            background-color: white;
            border-color: #28a745;
            color: #333;
        }

        /* Disabled State */
        .variant-group select:disabled,
        .buy_box .dim:disabled,
        select.dim:disabled {
            background-color: #f8f9fa;
            border-color: #e9ecef;
            color: #6c757d;
            cursor: not-allowed;
            opacity: 0.6;
        }
/* Button Styling for Modal */
.modal-overlay .button {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    min-width: 100px;
    max-width: 140px; /* Limit button width to fit nicely with dropdowns */
    flex: 0 0 auto; /* Don't grow or shrink */
}

    .modal-overlay .button.secondary {
        background: #f8f9fa;
        color: #6c757d;
        border: 1px solid #dee2e6;
    }

        .modal-overlay .button.secondary:hover {
            background: #e9ecef;
            color: #495057;
        }

    .modal-overlay .button.basket {
        background: #239043;
        color: white;
        border: 1px solid #239043;
    }

        .modal-overlay .button.basket:hover {
            background: #090;
            border-color: #090;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(35, 144, 67, 0.3);
        }

    .modal-overlay .button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }
/* ProductDimensions Help Text */
.LookDims {
    background: linear-gradient(135deg, #e3f2fd, #f0f9ff);
    border: 1px solid #90caf9;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 9px 0 12px 0; /* Reduced top margin from 12px to 9px (3px less) */
    color: #1976d2;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    position: relative;
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(25, 118, 210, 0.3);
    }

    50% {
        box-shadow: 0 0 15px rgba(25, 118, 210, 0.5);
    }
}

.LookDims::before {
    content: "👆";
    margin-right: 8px;
}
/* Notification System for Grid */
.grid-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 10000;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.grid-notification.success {
    background: #28a745;
}

.grid-notification.error {
    background: #dc3545;
}

.grid-notification .close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

    .grid-notification .close:hover {
        opacity: 1;
    }

/* Desktop/Tablet Navigation Bar Layout */
.zzchristmas {
    display: flex;
    align-items: center;
    min-height: 55px;
    padding: 5px 20px;
    gap: 20px;
}

#logo {
    flex-shrink: 0;
    width: auto;
    margin: 0; /* Remove margins to allow bigger logo without expanding bar */
    padding: 0; /* Remove padding to maximize logo space */
}

#logo img {
    max-height: 65px; /* Increase logo size */
    width: auto;
}

.basket_summary {
    flex-shrink: 0;
    width: auto;
    min-width: 280px;
    align-self: center;
    margin: 0 !important; /* Remove any existing margins that might misalign */
    background-image: url(/content/images/basket.svg);
    background-repeat: no-repeat;
    background-position: 10px center !important; /* Center basket icon vertically with text */
    background-size: 50px;
    padding-top: 8px !important; /* Add small padding to help with text positioning */
    padding-bottom: 8px !important;
}

    .basket_summary.full {
        background-image: url(/content/images/basket_full.svg);
    }

/* Modern Responsive Search Bar */
#search {
    flex: 1;
    max-width: 600px;
    min-width: 250px;
    margin: 0 20px;
}

#search form {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    border: 2px solid #1d5796;
    border-radius: 25px;
    padding: 4px;
    box-shadow: 0 3px 15px rgba(29, 87, 150, 0.2);
    transition: all 0.3s ease;
    width: 100%;
}

#search form:focus-within {
    border-color: #f8ec1a;
    box-shadow: 0 4px 20px rgba(248, 236, 26, 0.4);
    transform: translateY(-1px);
}

#search .keywords {
    flex: 1;
    height: 46px;
    border: none;
    border-radius: 20px;
    padding: 0 16px;
    font-size: 16px;
    color: #1d5796;
    background: transparent;
    outline: none;
    margin: 0;
}

#search .keywords::placeholder {
    color: #6c757d;
    font-style: italic;
}

#search button {
    border: none;
    background: #1d5796;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

#search button:hover {
    background: #0d3a6e;
    transform: translateY(-1px);
}

#search button:active {
    transform: scale(0.95);
}

#search button img {
    width: 22px !important;
    height: 22px !important;
}

/* Gentle flash animation for search button when user has typed */
@keyframes search-button-flash {
    0%, 100% {
        background: #1d5796;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border: 2px solid #1d5796;
    }
    50% {
        background: #2a6bb3;
        box-shadow: 0 2px 8px rgba(29,87,150,0.4);
        border: 2px solid #f8ec1a;
    }
}

#search button.flash-typing {
    animation: search-button-flash 2s ease-in-out infinite;
}

/* Simplified responsive behavior - fewer breakpoints */
@media (max-width: 1000px) {
    .zzchristmas {
        min-height: 45px;
        padding: 3px 12px;
        gap: 12px;
    }

    #logo img {
        max-height: 55px;
    }

    #search {
        margin: 0 10px;
        max-width: 400px;
    }

    #search .keywords {
        font-size: 14px;
    }

    .basket_summary {
        min-width: 240px;
    }
}

@media (max-width: 700px) {
    .zzchristmas {
        min-height: 40px;
        padding: 2px 8px;
        gap: 8px;
    }

    #logo img {
        max-height: 50px;
    }

    #search {
        margin: 0 6px;
        max-width: 300px;
        min-width: 200px;
    }

    #search .keywords {
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
    }

    #search button {
        width: 40px;
        height: 40px;
    }

    #search button img {
        width: 18px !important;
        height: 18px !important;
    }

    .basket_summary {
        min-width: 220px;
    }
}

/* Mobile override - revert to original mobile layout */
@media (max-width: 600px) {
    .zzchristmas {
        display: block !important;
        min-height: auto;
        padding: 5px 10px; /* Minimal top/bottom padding */
    }

    #logo {
        float: none;
        margin: 10px;
        width: auto;
        max-width: 250px; /* Reasonable mobile logo size */
        display: inline-block;
    }

    #logo img {
        max-width: 240px;
        max-height: none; /* Remove height restriction on mobile */
        height: auto;
    }

    .basket_summary, #search {
        float: none;
        margin: 0;
        width: auto;
        max-width: none;
        min-width: auto;
    }
}

/* Search Filter Styles */
#searchLimit {
    display: none;
    margin-left: 15px;
    z-index: 9999;
}

#brand_body {
    margin-top: 10px;
}

.filter-more-section {
    display: none;
}

/* Floating Basket Summary */
.floating-basket-summary {
    position: fixed;
    left: 30px;
    bottom: 30px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

.floating-basket-summary.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}

.floating-basket-link {
    display: block;
    background: #1d5796;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    min-width: 260px;
    padding: 9px 16px;
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 40px;
    border: 3px solid #f8ec1a;
    font-weight: 600;
}

.floating-basket-link:hover {
    background-color: #155d8a;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 35px rgba(29, 87, 150, 0.4);
    text-decoration: none;
    border-color: #f8ec1a;
}

.floating-basket-link.has-items {
    background-image: url(/content/images/basket_full.svg);
}

.floating-basket-link.empty {
    background-image: url(/content/images/basket.svg);
}

.floating-basket-icon {
    display: none; /* Hide since we're using background image */
}

.floating-basket-count {
    display: none; /* Hide separate count since it's in the text */
}

.floating-basket-details {
    margin-left: 65px;
    padding: 2px 0;
}

.floating-basket-details p {
    margin: 0;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.floating-basket-total {
    font-size: 16px;
    font-weight: 800;
    color: white;
    display: inline;
}

.floating-basket-items {
    font-size: 14px;
    color: white;
    display: inline;
    font-weight: 600;
}

/* Modern Follow Us Section */
.follow-us-section {
    margin-top: 10px;
}

.social-icons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.social-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-decoration: none;
}

.social-icon.facebook { color: #1877F2; }
.social-icon.facebook:hover { background: rgba(24, 119, 242, 0.1); color: #1877F2; }

.social-icon.threads { color: #000; }
.social-icon.threads:hover { background: rgba(0, 0, 0, 0.1); color: #000; }

.social-icon.twitter { color: #000; }
.social-icon.twitter:hover { background: rgba(0, 0, 0, 0.1); color: #000; }

.social-icon.youtube { color: #FF0000; }
.social-icon.youtube:hover { background: rgba(255, 0, 0, 0.1); color: #FF0000; }

.social-icon.instagram { color: #E4405F; }
.social-icon.instagram:hover { background: rgba(228, 64, 95, 0.1); color: #E4405F; }

.social-icon.tiktok { color: #000; }
.social-icon.tiktok:hover { background: rgba(0, 0, 0, 0.1); color: #000; }

.social-icon img {
    width: 34px;
    height: 34px;
    transition: all 0.3s ease;
    margin-left: -2px;
    margin-top: -1px;
    display: block;
}

/* Share Section */
.share-section {
    margin-bottom: 15px;
}

.share-icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-decoration: none;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.share-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-decoration: none;
}

.share-icon.facebook { color: #1877F2; }
.share-icon.facebook:hover { background: rgba(24, 119, 242, 0.1); color: #1877F2; }

.share-icon.twitter { color: #000; }
.share-icon.twitter:hover { background: rgba(0, 0, 0, 0.1); color: #000; }

.share-icon.pinterest { color: #E60023; }
.share-icon.pinterest:hover { background: rgba(230, 0, 35, 0.1); color: #E60023; }

.share-icon.whatsapp { color: #25D366; }
.share-icon.whatsapp:hover { background: rgba(37, 211, 102, 0.1); color: #25D366; }

.share-icon.linkedin { color: #0077B5; }
.share-icon.linkedin:hover { background: rgba(0, 119, 181, 0.1); color: #0077B5; }

.share-icon.reddit { color: #FF4500; }
.share-icon.reddit:hover { background: rgba(255, 69, 0, 0.1); color: #FF4500; }

.share-icon.telegram { color: #0088CC; }
.share-icon.telegram:hover { background: rgba(0, 136, 204, 0.1); color: #0088CC; }

.share-icon.email { color: #666; }
.share-icon.email:hover { background: rgba(102, 102, 102, 0.1); color: #666; }

.share-icon img {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
    display: block;
}

/* AI Search Tabs */
.search-tabs-container {
    margin: 20px 0;
}

.search-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 20px;
}

.search-tab {
    padding: 12px 24px;
    background: #f5f5f5;
    border: 2px solid #e0e0e0;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    transition: all 0.3s ease;
}

.search-tab:hover {
    background: #e8e8e8;
    color: #333;
}

.search-tab.active {
    background: white;
    border-color: #1d5796;
    color: #1d5796;
    position: relative;
    top: 2px;
}

.search-tab#tab-ai {
    animation: subtlePulse 2s ease-in-out infinite;
}

.search-tab#tab-ai.active {
    animation: none;
}

.search-tab-content {
    display: none;
}

.search-tab-content.active {
    display: block;
}

.ai-search-banner {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes subtlePulse {
    0%, 100% {
        transform: scale(1);
        border-color: #e0e0e0;
        color: #666;
        box-shadow: 0 0 0 rgba(255, 193, 7, 0);
    }
    50% {
        transform: scale(1.05);
        border-color: #ffc107;
        color: #ffc107;
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.5);
    }
}

/* Hide the PageLinks "Showing X results" badge in AI search since we have our own message */
#ai-search-content .pagewrapper p {
    display: none;
}



/********* Desktop *********
 ***   *****  ***  *   * *****  ***  ****
 *  *  *     *     *  *    *   *   * *   *
 *   * ***    ***  **      *   *   * ****
 *  *  *         * *  *    *   *   * *
 ***   *****  ***  *   *   *    ***  *
*/
@media only screen and (min-width: 1024px) {

    body {
        min-width: 1024px;
    }

    .container {
        max-width: 1280px;
    }

        .container.main {
            padding: 10px;
        }

    /* basket summary */
    .basket_summary {
        float: right;
        margin: 10px 0 10px 0;
        width: 280px;
    }

    /* nav bar */
    #nav .tab a, #nav .tabbig a {
        font-size: 20px;
    }

    .browse_menu {
        top: 38px;
        width: 100%;
    }

    .sign_up {
        top: 38px;
    }

    .dropdown_menu .column {
        width: 23%;
        padding-left: 8px;
    }

    .dropdown_menu .title {
        font-size: 16px;
    }

    .dropdown_menu .exit {
        top: 18px;
    }

    .dropdown_menu .column .item {
        line-height: 20px;
    }

    /* home page */
    #catlist a, #zzbrands a, #zzhomecats a {
        padding: 20px 5px 20px 5px;
    }

    /* product page */
    #product .thumb, #product .blurb {
        width: 66%;
        min-height: 100px;
    }

    #prodright {
        width: 33%;
        float: right;
    }

    #productreview .rating {
        width: 25%;
    }

    #productreview .detail {
        width: 70%;
    }

    .locationErrorDiv {
        margin-top: 30px;
        height: 250px;
        background: url("/Content/images/Delivery-Location-Error-header.jpg") no-repeat top left;
    }

    #banners img {
        min-height: 164px;
        min-width: 235px;
    }

    #scrollers img {
        min-height: 200px;
        min-width: 1280px;
    }

    /* Add these styles to make filters scrollable independently */
    .filter-container {
        position: sticky;
        top: 10px;
        height: calc(100vh - 50px);
        max-height: 800px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
        scroll-behavior: smooth;
    }

    /* Smooth scrollbar for filters */
    .filter-container::-webkit-scrollbar {
        width: 6px;
    }

    .filter-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .filter-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

    @media (hover: hover) {
        .filter-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    }

        /* Ensure the main content area scrolls independently */
        .col-4-5g {
            height: 100%;
            overflow-y: visible;
        }
    }

/********* Anything over portrait tablet *********
 *****  ***  ****  *     ***** *****
   *   *   * *   * *     *       *  
   *   ***** ****  *     ***     *  
   *   *   * *   * *     *       *  
   *   *   * ****  ***** *****   *  
*/

@media only screen and (min-width: 768px), (width: 768px) and (height: 1024px) {
    .mobileVAT {
        display: none;
    }

    body {
        text-align: center;
    }

    /* main structure */
    #wrapper {
        margin-bottom: 10px;
    }

    #accbar {
        float: left;
        background-color: #333;
        font-size: 12px;
        color: #fff;
        width: 100%;
        padding-top: 6px;
        min-height: 30px
    }

        #accbar a {
            color: #fff;
        }

        #accbar li {
            display: inline;
            padding: 0 8px 0 8px;
            border-right: 1px solid #fff;
        }


    #accbar2 li {
        display: inline;
    }

    #accbar #acclinks {
        float: left;
    }

    #accbar #contact {
        float: right;
    }

    #accbar2 #acclinks2 {
        float: right;
        margin-right: 10px;
    }

    #accbar2 #acclinks3 {
        float: right;
    }

    #accbar #contact li {
        border: none;
        padding-left: 25px;
        margin-left: 20px;
    }

        #accbar #contact li.phone {
            /*background-image: url(/content/images/icon_phone.svg);*/
            background-repeat: no-repeat;
            background-position: top left;
        }

        #accbar #contact li.mail {
            /*background-image: url(/content/images/icon_mail.svg);*/
            background-repeat: no-repeat;
            background-position: top left;
        }

    /* header */
    #links {
        float: left;
    }

    #also_like .also {
        padding: 10px;
        margin-top: 5px;
        border-top: solid 1px;
        border-color: rgba(0, 0, 0, 0.2);
    }

    #also_like .alsotext {
        font-size: 1.17em;
        font-weight: bold;
    }

    #links {
        margin-top: 5px;
    }

        #links li {
            padding-left: 25px;
            margin-bottom: 10px;
        }

            #links li.wishlist {
                background-image: url(/content/images/icon_wishlist.png);
                background-repeat: no-repeat;
            }

            #links li.compare {
                background-image: url(/content/images/icon_compare.png);
                background-repeat: no-repeat;
            }

        #links a {
            color: #fff;
            font-size: 14px;
        }

    /* basket summary */
    .basket_summary {
        width: 260px;
        padding: 10px;
        color: #faec19;
        font-size: 14px;
        border-left: 2px dotted #043D81;
        margin-left: 10px;
        background-image: url(/content/images/basket.svg);
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 50px;
        margin-bottom: 10px;
        margin-right: 20px;
    }

        .basket_summary.full {
            background-image: url(/content/images/basket_full.svg);
        }

        .basket_summary .contents {
            float: left;
            width: 150px;
            margin-bottom: 10px;
        }

        .basket_summary .checkout {
            float: left;
        }

        .basket_summary .basket_icon {
            float: left;
            width: 80px;
            height: 80px;
        }

        .basket_summary a {
            color: #fff;
            font-size: 16px;
        }

    #nav_wrapper {
        border-bottom: 2px solid #ccc;
    }

    #product .figaction {
        display: flex;
        flex-wrap: wrap;
        flex: 0 0 200px;
        flex-direction: column;
        height: 350px;
        padding-left: 30px;
    }

    /* nav bar */
    #nav {
        position: relative;
        width: 100%;
        clear: both;
        background-color: #fff32f;
        height: 36px;
    }

    #nav a {
        color: #1d5796;
    }

    #nav .tab, #nav .tabsmall, #nav .tabbig {
        float: left;
    }

    #nav .tab a, #nav .tabbig a {
        display: block;
        padding: 4px 12px 4px 12px;
        margin: 4px 0 4px 0;
        border-right: 1px solid #ccc;
        line-height: 20px;
        font-weight: 600;
    }

    #nav .tab a.browse, #nav .tabbig a.browse {
        background-position-x: 18px;
        background-position-y: center;
        background-size: 34px;
        padding: 11px 22px 11px 58px;
    }

    #nav .tabsmall a.browse {
        /*background-image: url(/Content/images/mobile_menu.svg);*/
        background-position-x: 18px;
        background-position-y: center;
        background-size: 34px;
        padding: 11px 22px 11px 58px;
    }

        #nav .tabsmall a {
            font-size: 14px;
            display: block;
            padding: 4px 11px 4px 11px;
            margin: 4px 0 4px 0;
            border-right: 1px solid #ccc;
            line-height: 20px;
            font-weight: 500;
        }

            /* Prevent layout shift during background image loading for browse button */
            #nav .tab a.browse,
            #nav .tabsmall a.browse,
            #nav .tabbig a.browse {
                background-repeat: no-repeat;
                padding-left: 65px !important;
                min-height: 44px;
                display: inline-flex;
                align-items: center;
                box-sizing: border-box;
                background-color: #fff;
                border: none;
                margin-top: -6px;
                border-left: 2px solid #ccc;
                border-top: 2px solid #ccc;
                border-right: 2px solid #ccc;
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
            }

    @media (hover: hover) {

        #nav .tabsmall a:hover {
            margin-top: -2px;
            line-height: 22px;
            padding-top: 6px;
            background-color: #fff32f;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
            font-weight: 500;
        }

        #nav .tabsmall a.browse:hover {
            line-height: 20px;
        }

        #nav .tab a:hover {
            margin-top: -2px;
            line-height: 22px;
            padding-top: 6px;
            background-color: #fff32f;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
            font-weight: 600;
        }
    }

    .browse_menu {
        display: none;
        position: absolute;
        left: 0;
        z-index: 9999;
        background: #fff; /*#f9f7d8;*/
        text-align: left;
        padding: 20px;
        border-left: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
        border-right: 2px solid #ccc;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
        -webkit-box-shadow: 0 4px 8px 0 rgba(204, 204, 204, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 4px 8px 0 rgba(204, 204, 204, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 4px 8px 0 rgba(204, 204, 204, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    }

    .sign_up {
        display: none;
        position: absolute;
        left: 530px;
        z-index: 9999;
        background: #fff; /*#f9f7d8;*/
        text-align: left;
        padding: 20px;
        border-left: 1px dotted #ccc;
        border-bottom: 1px dotted #ccc;
        border-right: 1px dotted #ccc;
    }

    #mobile_nav, .mobile_menu, .mobile_search {
        display: none;
    }

    .dropdown_menu .column {
        float: left;
        margin-top: 10px;
        margin-right: 10px;
    }

    .dropdown_menu .title {
        padding-bottom: 10px;
        font-weight: bold;
        line-height: 20px;
        border-bottom: 1px dotted #ccc;
    }

        .dropdown_menu .title ul li, .lower-all-nav ul li {
            display: inline;
        }

    .browse_menu .title ul li:nth-child(2) {
        padding-left: 37%;
    }

    .browse_menu .title ul li:nth-child(3) {
        padding-left: 13%;
    }

    .dropdown_menu .exit {
        position: absolute;
        right: 26px;
        cursor: pointer;
        /*background-image:url(/content/images/icon_close.png);*/
        background-repeat: no-repeat;
        line-height: 16px;
        padding-left: 22px;
        overflow: hidden;
    }

    .dropdown_menu .column .item {
        margin-top: 8px;
        font-size: 14px;
    }

    .under-all {
        width: 100%;
        float: left;
    }

    .column-double {
        width: 47%;
        float: left;
        margin-top: 10px;
        margin-right: 10px;
    }

    .doubleitem {
        /*width: 210%;*/
        display: block;
        text-align: center;
        padding: 3px;
        margin-top: 10px;
        background-color: #eee;
    }
    /* breadcrumb */
    #breadcrumb {
        font-size: 13px;
        margin: 8px 0;
        padding: 8px 12px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        overflow: visible;
    }

        #breadcrumb a, #breadcrumb span {
            padding: 4px 8px;
            margin-right: 4px;
            border-radius: 3px;
            transition: all 0.2s ease;
        }

        #breadcrumb a {
            background-color: transparent;
            text-decoration: none;
        }

            @media (hover: hover) {
                #breadcrumb a:hover {
                    background: #e9ecef;
                    color: #495057;
                }
            }

        #breadcrumb a::after {
            content: "→";
            margin-left: 8px;
            color: #6c757d;
            font-weight: normal;
        }

        #breadcrumb span {
            color: #495057;
            font-weight: 500;
        }

        /* footer */
        #footer #reviews {
            padding: 10px 0 10px 0;
        }

            #footer #reviews li {
                width: 25%;
                padding: 0 10px 0 45px;
                height: 40px;
                font-size: 11px;
                background-size: 40px 40px;
            }

        #footer #reviewscouk {
            background-color: #222;
            padding: 10px 0 10px 0;
        }

        #footer #signup {
            float: left;
            margin: 20px 0 0 20px;
        }

        #footer #social {
            float: right;
            display: flex;
            align-items: center;
            margin-right: 20px;
        }

        .checkout-wrapper #payment {
            margin: 10px 0 10px 0;
            float: left;
        }

            .checkout-wrapper #payment li {
                float: left;
                margin-right: 5px;
            }

        #footer #payment {
            margin: 20px 0 20px 0;
        }

            #footer #payment li {
                float: left;
                width: 14.2%;
                text-align: center;
                padding: 5px;
            }

        #payment li img {
            max-width: 100%;
        }

        .footerlinks {
            margin-top: 20px;
        }

            .footerlinks li {
                margin-bottom: 14px;
                font-size: 14px;
            }

        /* flexible columns */
        .col-1-1 {
            width: 100%;
        }

        .col-1-2 {
            width: 50%;
        }

            .col-1-2:nth-child(2n+1) {
                clear: both;
            }

        .col-1-3 {
            width: 33.33%;
        }

            .col-1-3:nth-child(3n+1) {
                clear: none;
            }

        .col-2-3 {
            width: 66.66%;
        }

        .col-1-4, .col-1-4.full {
            width: 25%;
        }

            .col-1-4:nth-child(2n+1) {
                clear: none;
            }

        .col-1-8 {
            width: 12.5%;
        }

            .col-1-8:nth-child(4n+1) {
                clear: none;
            }

        .col-3-4 {
            width: 75%;
        }

        .col-4-5 {
            width: 80%;
        }

        .col-1-5, .col-1-5.full {
            width: 20%;
        }

        .col-1-5f, .col-1-5f.full {
            width: 28%;
        }

        .col-4-5g {
            width: 72%;
        }

        .col-5-5g {
            width: 100%;
        }

        /*#values {
}*/
        #values li {
            width: 25%;
            height: 70px;
            padding: 10px 10px 0 75px;
            font-size: 18px;
            background-size: 70px 70px;
        }

        /* product page */
        #product h3 {
            margin: 20px 0 10px 0;
            padding-top: 20px;
        }

        #product .thumb, #product .blurb {
            float: left;
        }

            #product .thumb .offerdefinedimage, #product .thumb .offer, #product .thumb .offerdefinedimagelower {
                background-repeat: no-repeat;
                background-size: contain;
                position: absolute;
                bottom: 22px;
                left: 250px;
                z-index: 1;
                pointer-events: none;
            }

        #product .featprod, .offerdefinedimage, .featprod .offer {
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            bottom: 0px;
            right: 0px;
            z-index: 1;
            pointer-events: none;
        }

        #product .thumb .offerdefinedimage, #product .thumb .offer {
            bottom: 25px;
        }

        #product .blurb p {
            margin-bottom: 10px;
        }

        #product .action {
            width: 80px;
            height: 350px;
        }

            #product .action img {
                max-width: 80px;
                max-height: 80px;
                aspect-ratio: 1/1;
                object-fit: cover;
            }

        .buy_box .dim {
            font-size: 14px;
        }

        #productreview {
            max-height: 800px;
        }

            #productreview .detail {
                margin-left: 20px;
            }

        .pdfwrapper {
            width: 100%;
            padding: 10px;
            margin: 10px 10px 0 0;
        }

        .videowrapper {
            width: 100%;
            height: 350px;
        }

        .includedetail {
            width: 165px;
        }

        #productreview .read {
            float: right;
            width: 50%;
            text-align: right;
        }

        .displaywrapper {
            float: left;
            margin-left: 20px;
            margin-right: 20px;
        }

        .pagewrapper {
            float: right;
            text-align: right;
            margin-left: 10px;
        }

            .pagewrapper p {
                line-height: 2em;
                text-align: right;
            }

            .pagewrapper a {
                padding: 4px;
            }

        #category_blurb {
            margin: 20px 0 20px 0;
            line-height: 1.5em;
        }

            #category_blurb img {
                max-width: 100% !important;
            }

        .category_blog {
            padding: 15px 20px 15px 60px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            background: #e3f7fc url('/content/images/icon_blog.png') no-repeat 10px;
            border: 1px solid #8ed9f6;
            margin-bottom: 10px;
            line-height: 20px;
        }

        .category_blog2 {
            padding: 15px 20px 15px 60px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            background: #e3f7fc url('/content/images/icon_blog.png') no-repeat 10px;
            border: 1px solid #8ed9f6;
            margin-bottom: 10px;
            line-height: 20px;
            margin-top: 20px;
        }

        .category_blog .bottom {
            margin-top: 10px;
        }

        /* home page */
        #scroller {
            margin: 20px 0 20px 0;
        }


        /* product listing boxes */
        .featprod.grid .desc {
            height: 82px;
            padding: 3px 5px 3px 5px;
            font-size: 14px;
            line-height: 16px;
            overflow: hidden;
        }

        .featprod.grid img {
            margin: 5px auto 5px auto;
            max-width: 96%;
            height: auto;
            min-height: 170px;
        }

        /* basket contents */
        #basket-content {
            margin-top: 10px;
        }

            #basket-content th, #basket-content td, #basket-totals td {
                padding: 10px;
            }

            #basket-content thead {
                border: 1px solid #ccc;
            }

            #basket-content th.value, #basket-content td.value, #basket-totals td.value {
                text-align: right;
            }

            #basket-content th.qty, #basket-content td.qty {
                text-align: center;
            }

            #basket-content .lbl {
                display: none;
            }

        #basket-footer #postage {
            width: 38%;
            float: left;
        }

        #basket-footer #promo {
            width: 38%;
            float: left;
            padding-left: 10px;
        }

        #basket-footer #totals {
            width: 60%;
            float: right;
        }

        #basket-totals td.checkout {
            text-align: right;
            padding-right: 0;
        }

        #basket-totals .checkout-buttons {
            margin-left: auto;
            margin-right: -4px;
        }

        /* testimonials page */
        #testimonials .header {
            background-image: url(/Content/images/reviews_head.jpg);
            background-repeat: no-repeat;
            background-position: center;
        }


        /* login */
        .login-left, .login-right {
            padding: 10px 20px 20px 20px;
            margin-bottom: 20px;
            width: 100%;
            height: 310px;
        }

        /* checkout */
        .checkout-wrapper {
            width: 100%;
            padding: 15px 15px 0 0;
        }

            .checkout-wrapper label, .login label, .login-left label {
                width: 20%;
            }

        .login .checkbox label, .login-left .checkbox label {
            width: 80%;
        }

        .checkout-wrapper input[type="text"], .checkout-wrapper input[type="email"],
        .checkout-wrapper select, .checkout-wrapper textarea,
        .login input[type="text"], .login input[type="email"], .login input[type="password"],
        .login-left input[type="text"], .login-left input[type="email"], .login-left input[type="password"],
        .login-left select {
            width: 70%;
            margin-bottom: 10px;
        }

        .login-left input.button.proceed, .login-left select, .login-left a.button.proceed {
            font-size: 16px;
        }

        .checkout-wrapper input[type="password"] {
            width: 50%;
            margin-bottom: 10px;
        }

        #delivery_opts .upgrade {
            padding: 10px 15px;
            height: 140px;
        }

        .tech_nos {
            width: 90%;
        }

        .locationErrorDiv {
            margin-top: 30px;
            height: 250px;
            background: url("/Content/images/Delivery-Location-Error-Header.jpg") no-repeat top left;
        }

        .helplist li {
            list-style: disc inside;
            margin-bottom: 4px;
            margin-top: 16px;
        }

        .flext {
            display: flex;
        }

        .button {
            font-weight: bold;
        }

        .pdfdetail {
            padding: 10px 0px 0px 0px;
        }

        /* Add at the end of this media query */
        .col-1-5f.full {
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
            padding-bottom: 20px;
        }

        /* Tablet optimized green buttons - inherit desktop styling but adjust for touch */
        .button.proceed,
        .button.basket,
        .button.proceedcontact {
            border: 2px solid #1e7a36 !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
            position: relative !important;
            overflow: hidden !important;
            touch-action: manipulation !important;
            min-height: 44px !important; /* Better touch targets on tablet */
        }

            /* Tablet tap feedback - subtle effect to prevent jumping */
            .button.proceed:active,
            .button.basket:active,
            .button.proceedcontact:active {
                background-color: #155d2a !important;
                box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
                /* Removed transform to prevent layout jumping */
            }

        /* Tablet optimized util button - inherit desktop styling but adjust for touch with blue theme */
        .button.util {
            border: 2px solid #8ed9f6 !important; /* Keep blue border */
            transition: all 0.3s ease !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
            position: relative !important;
            overflow: hidden !important;
            touch-action: manipulation !important;
            min-height: 44px !important; /* Better touch targets on tablet */
        }

            /* Tablet tap feedback for util button */
            .button.util:active {
                background-color: #c4e5ed !important;
                box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
                /* Removed transform to prevent layout jumping */
            }

        /* Tablet Continue to Payment button styling */
        .continue-payment-btn {
            width: 275px !important;
            height: 55px !important;
            font-size: 15px !important;
            min-height: 55px !important; /* Better touch targets on tablet */
        }

        /* Tablet Proceed with Payment button styling */
        .proceed-payment-btn {
            width: 275px !important;
            height: 55px !important;
            font-size: 15px !important;
            min-height: 55px !important; /* Better touch targets on tablet */
        }

            /* Tablet payment button icons */
            .continue-payment-btn::before,
            .proceed-payment-btn::before {
                font-size: 16px !important;
            }

        /* Tablet Buy with Card button styling */
        .buy-with-card-btn {
            width: 220px !important;
            height: 44px !important;
            font-size: 15px !important;
            min-height: 44px !important;
        }

        /* Tablet Collect in Store button styling */
        .collect-store-btn {
            width: 220px !important;
            height: 44px !important;
            font-size: 15px !important;
            min-height: 44px !important;
        }

            /* Tablet basket button icons */
            .buy-with-card-btn::before,
            .collect-store-btn::before {
                font-size: 15px !important;
            }

        /* Tablet tap feedback for payment buttons */
        .continue-payment-btn:active,
        .proceed-payment-btn:active {
            background: linear-gradient(135deg, #2471a3, #1a5490) !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
        }

        /* Tablet Change button styling */
        .change-btn {
            height: 38px !important;
            font-size: 13px !important;
            min-height: 38px !important;
        }

            /* Tablet tap feedback for change buttons */
            .change-btn:active {
                background: linear-gradient(135deg, #2471a3, #1a5490) !important;
                box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
                transform: none !important;
            }

        /* Tablet-specific styling for result page return button */
        .button.checkout.proceed {
            font-size: 16px !important; /* Slightly reduce from default 18px for better fit */
            max-width: 95% !important; /* Ensure button doesn't exceed container */
        }
    }

/* iPhone landscape fix (800px-950px) - target phone landscape specifically, avoiding tablet ranges */
@media only screen and (min-width: 800px) and (max-width: 950px) and (orientation: landscape) and (max-height: 500px) {
    /* Force mobile search behavior on iPhone landscape */
    #search {
        display: none !important;
    }

    #mobile_search, .mobile_search {
        display: block !important;
    }

    /* Ensure full viewport width usage - remove any max-width constraints */
    body, html {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .container, .row, .main {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Mobile-style layout for search results - force full width */
    .col-1-4, .col-3-4, .col-4-5g, .col-1-5f, .col-4-5, .col-1-5 {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 5px !important;
    }

    /* Force mobile filter behavior */
    .filter-container, .col-1-4.full.filter-container {
        display: none !important;
    }

    .mobile-filters {
        display: block !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Ensure search results use full width */
    .product-list {
        width: 100% !important;
    }

    .product-list .col-1-4, .product-list .col-1-5 {
        width: 50% !important; /* 2 products per row on landscape */
        float: left !important;
    }

    /* Remove any fixed widths that might cause white space */
    #main, main {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Force mobile pagination styles */
    .pager, .page-numbers {
        text-align: center !important;
        width: 100% !important;
    }
}

/********* Tablet Portrait / Large Mobile Landscape **********
 *****  ***  ****  *     ***** *****      ****   ***  ****  *****
   *   *   * *   * *     *       *        *   * *   * *   *   *
   *   ***** ****  *     ***     *        ****  *   * ****    *
   *   *   * *   * *     *       *        *     *   * *   *   *
   *   *   * ****  ***** *****   *        *      ***  *   *   *
*/
@media only screen and (min-width: 768px) and (max-width: 1023px) and (min-height: 500px), (width: 768px) and (height: 1024px) {

    body {
        min-width: 100%;
    }

    /* main structure */
    .container {
        max-width: 1023px;
    }

        .container.main {
            padding: 5px;
        }

    #accbar2 li {
        margin-left: 30px;
    }

    /* basket summary */
    .basket_summary {
        float: right;
        margin-right: 10px;
        margin-bottom: 10px;
        width: 250px;
        background-size: 40px;
    }

        .basket_summary.full {
            float: right;
            margin-right: 10px;
            margin-bottom: 10px;
            width: 250px;
            background-size: 40px;
        }

        .basket_summary .basket_icon {
            float: left;
            width: 60px;
            height: 60px;
        }

    /* nav bar */
    #nav {
        height: 26px;
    }

        #nav .tab a, #nav .tabbig a {
            padding: 2px 11px 2px 11px;
            font-size: 13px;
            line-height: 14px;
            margin: 4px 0 4px 0;
        }

    #nav .tab a.browse, #nav .tabbig a.browse {
        background-position-x: 18px;
        background-size: 26px;
        padding: 9px 15px 9px 50px;
        /* Prevent layout shift - space already reserved by padding */
        background-repeat: no-repeat;
        background-position-y: center;
        min-height: 44px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
    }

    #nav .tabsmall a {
        padding: 2px 11px 2px 11px;
        font-size: 11px;
        line-height: 14px;
        margin: 4px 0 4px 0;
    }

    .browse_menu {
        top: 28px;
        width: 100%;
        padding: 10px;
    }

    .sign_up {
        top: 28px;
    }

    .dropdown_menu .column {
        width: 23%;
        padding-left: 5px;
    }

    .dropdown_menu .title {
        font-size: 14px;
    }

    .dropdown_menu .exit {
        top: 10px;
    }

    .dropdown_menu .column .item {
        line-height: 18px;
    }

    .browse_menu .title ul li:nth-child(2) {
        padding-left: 36%;
    }

    /* flexible columns */
    .col-1-4, .col-1-4.full {
        width: 33%;
    }

    .col-1-5, .col-1-5.full {
        width: 25%;
    }

    .col-1-8 {
        width: 12.5%;
    }

    /* home page */
    #catlist a {
        padding: 5px;
        font-size: 12px;
        font-weight: normal;
        height: 50px;
    }

    /*
#homecats a, #catlist a  {
  padding:5px;
  font-size:12px;
  font-weight:normal;
  height:50px;
}
*/

    /* product page */
    #product .thumb, #product .blurb {
        width: 100%;
    }

    #prodright {
        width: 100%;
        float: left;
    }

    #productreview .rating {
        width: 35%;
    }

    #productreview .detail {
        width: 60%;
    }

    .buy_box .add {
        width: 280px;
        margin: 10px 0 10px 0;
    }

    .locationErrorDiv {
        margin-top: 30px;
        height: 250px;
        background: url("/Content/images/Delivery-Location-Error-Header.jpg") no-repeat top left;
    }

    .brandCategories .new {
        min-height: 100px;
    }

    .brandProdList {
        min-height: 400px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 999px) and (min-height: 500px) {

    #accbar2 li {
        margin-left: 20px;
    }


    .featprod.grid img {
        min-height: 130px !important;
    }

    .featprod.grid .desc {
        height: 109px;
        padding: 3px 5px 3px 5px;
        font-size: 13px;
        line-height: 15px;
        overflow: hidden;
    }

    .featprod.grid .price {
        -webkit-border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        border-bottom-left-radius: 4px;
        height: 69px;
        overflow: hidden;
    }

    #footer #reviewscouk {
        margin-left: 1%;
        margin-right: 1%;
    }

    /* Logo styling moved to main style.css for unified flexbox design */

    .dropdown_menu .column {
        width: 23%;
    }

    .dropdown_menu .title {
        font-size: 12px;
    }

    .dropdown_menu .column .item {
        line-height: 16px;
    }

    .browse_menu .title ul li:nth-child(2) {
        padding-left: 36%;
    }

    .col-1-8 {
        width: 25%;
    }

}


    /* Tablet Portrait optimized green buttons - inherit desktop styling but adjust for touch */
    .button.proceed,
    .button.basket,
    .button.proceedcontact {
        border: 2px solid #1e7a36 !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        position: relative !important;
        overflow: hidden !important;
        touch-action: manipulation !important;
        min-height: 44px !important; /* Better touch targets on tablet */
    }

        /* Tablet Portrait tap feedback - subtle effect to prevent jumping */
        .button.proceed:active,
        .button.basket:active,
        .button.proceedcontact:active {
            background-color: #155d2a !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
            /* Removed transform to prevent layout jumping */
        }

    /* Tablet Portrait optimized util button - inherit desktop styling but adjust for touch with blue theme */
    .button.util {
        border: 2px solid #8ed9f6 !important; /* Keep blue border */
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        position: relative !important;
        overflow: hidden !important;
        touch-action: manipulation !important;
        min-height: 44px !important; /* Better touch targets on tablet */
    }

        /* Tablet Portrait tap feedback for util button */
        .button.util:active {
            background-color: #c4e5ed !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
            /* Removed transform to prevent layout jumping */
        }

    /* Tablet Portrait modern utility buttons */
    .modern-util-btn,
    .prodlinks .modern-util-btn {
        min-height: 44px !important; /* Better touch targets on tablet */
        touch-action: manipulation !important;
        padding: 12px 16px !important; /* Larger touch area */
    }

    .wishlist-btn:active,
    .prodlinks .wishlist-btn:active {
        background: linear-gradient(135deg, #ff5252, #e74c3c) !important;
        transform: none !important;
    }

    .compare-btn:active,
    .prodlinks .compare-btn:active {
        background: linear-gradient(135deg, #2980b9, #3498db) !important;
        transform: none !important;
    }

    /* Tablet Portrait Continue to Payment button styling */
    .continue-payment-btn {
        width: 250px !important;
        height: 53px !important;
        font-size: 14px !important;
        min-height: 53px !important; /* Better touch targets on tablet portrait */
    }

    /* Tablet Portrait Proceed with Payment button styling */
    .proceed-payment-btn {
        width: 250px !important;
        height: 53px !important;
        font-size: 14px !important;
        min-height: 53px !important; /* Better touch targets on tablet portrait */
    }

        /* Tablet Portrait payment button icons */
        .continue-payment-btn::before,
        .proceed-payment-btn::before {
            font-size: 15px !important;
        }

    /* Tablet Portrait Buy with Card button styling */
    .buy-with-card-btn {
        width: 200px !important;
        height: 42px !important;
        font-size: 14px !important;
        min-height: 42px !important;
    }

    /* Tablet Portrait Collect in Store button styling */
    .collect-store-btn {
        width: 200px !important;
        height: 42px !important;
        font-size: 14px !important;
        min-height: 42px !important;
    }

        /* Tablet Portrait basket button icons */
        .buy-with-card-btn::before,
        .collect-store-btn::before {
            font-size: 14px !important;
        }

    /* Tablet Portrait tap feedback for payment buttons */
    .continue-payment-btn:active,
    .proceed-payment-btn:active {
        background: linear-gradient(135deg, #2471a3, #1a5490) !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    }

    /* Tablet Portrait Change button styling */
    .change-btn {
        height: 36px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }

        /* Tablet Portrait tap feedback for change buttons */
        .change-btn:active {
            background: linear-gradient(135deg, #2471a3, #1a5490) !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
            transform: none !important;
        }

    /* Tablet Portrait-specific styling for result page return button */
    .button.checkout.proceed {
        font-size: 15px !important; /* Reduce from default 18px for better fit on portrait */
        max-width: 90% !important; /* Ensure button doesn't exceed container */
    }
}

/*************** Mobile ****************
 *     *  ****  ****  ***** *     *****
 **   ** *    * *   *   *   *     *
 * *** * *    * ****    *   *     ***
 *     * *    * *   *   *   *     *
 *     *  ****  ****  ***** ***** *****
*/

@media (hover: none) and (pointer: coarse), (max-width: 767px), 
    (max-width: 950px) and (orientation: landscape) and (max-height: 500px) {
    .img-gallery:not(.photoswipe-loaded):hover::after {
        display: none !important;
    }

    /* Disable hover effects on quantity controls for touch devices */
    #basket-content .qty-spinner:hover,
    #basket-content .qty:hover .qty-spinner,
    #basket-content .qty-input-wrapper .qtyBox:hover:not(:disabled),
    #basket-content .qty:hover .qtyBox:not(:disabled),
    #basket-content .remove:hover,
    #basket-content .updateBasket:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: #e0e0e0 !important;
    }

    /* Reset button gradients to flat colors on mobile */
    #basket-content .remove {
        background: #e74c3c !important;
    }

    #basket-content .updateBasket {
        background: #1d5796 !important;
    }

    /* Disable hover effects on clear filters button for touch devices */
    #filters .btn_header_clear:hover,
    .enhanced-filters .btn_header_clear:hover {
        border: 2px solid #f5a3a3 !important; /* Keep default light red border */
        box-shadow: none !important;
        transform: none !important;
    }

    /* Mobile optimized util button - inherit desktop styling but disable problematic hover */
    .button.util {
        border: 2px solid #8ed9f6 !important; /* Keep blue border */
        transition: background-color 0.2s ease, box-shadow 0.2s ease !important; /* Remove transform from transition */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        position: relative !important;
        overflow: hidden !important;
        touch-action: manipulation !important; /* Improve touch response */
        transform: none !important; /* Prevent transforms to stop jumping */
    }

        /* Removed .button.util:hover - mobile devices don't need hover states */

        /* Mobile tap feedback for util button */
        .button.util:active {
            background-color: #c4e5ed !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
            transform: none !important;
        }

    /* Mobile modern utility buttons */
    .modern-util-btn,
    .prodlinks .modern-util-btn {
        min-height: 48px !important; /* Better touch targets on mobile */
        padding: 12px 16px !important; /* Larger touch area */
        touch-action: manipulation !important;
        transform: none !important; /* Prevent transforms to stop jumping */
        transition: background-color 0.2s ease !important; /* Remove transform from transition */
    }

    /* Removed hover effects - mobile devices don't need hover states */

    /* Mobile tap feedback for modern utility buttons */
}

/* Force single column filter layout on mobile - matches clearance behavior */
@media only screen and (max-width: 767px) and (max-height: 1023px),
    (max-width: 950px) and (orientation: landscape) and (max-height: 500px) {
    /* Prevent horizontal overflow on all mobile devices */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Ensure containers don't exceed viewport */
    .container, #wrapper, #main {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .mobile-filter-container .filter-section,
    #filters .filter-section {
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 15px;
        clear: both !important;
    }

        .mobile-filter-container .filter-section .filter-body .filt,
        #filters .filter-section .filt,
        #filters .filt {
            width: 100% !important;
            float: none !important;
            display: block !important;
            box-sizing: border-box;
            clear: both !important;
        }

    .mobile-filter-container,
    #filters {
        width: 100% !important;
        column-count: 1 !important;
        -webkit-column-count: 1 !important;
        -moz-column-count: 1 !important;
    }

    .filter-container {
        max-height: 80vh !important;
        overflow-y: auto !important;
        padding-right: 10px !important;
        scroll-behavior: smooth !important;
    }

    #mobileFilterPanel {
        max-height: 60vh !important;
        overflow-y: auto !important;
        padding-right: 10px !important;
        scroll-behavior: smooth !important;
    }

    /* Mobile Search Filter Styles */
    .mobile-filters {
        margin-bottom: 15px;
    }

    .mobile-filter-toggle {
        width: 100%;
        margin-bottom: 10px;
    }

    #filterCount {
        display: none;
    }

    #mobileFilterPanel {
        display: none;
    }

    /* Mobile search grid styles */
    .mobile-search-grid-item {
        padding: 5px;
    }

    /* Mobile clear filters button */
    .mobile-clear-filters {
        margin-bottom: 10px;
    }

        .mobile-clear-filters .btn_header_clear {
            width: 100%;
            text-align: center;
        }

    /* Mobile filter body sections */
    .filter-collapsed {
        display: none !important;
    }

    /* Compact quantity input - wrapper must contain all buttons */
    #basket-content .qty-input-wrapper {
        width: 95px !important; /* Wide enough to properly contain spinner buttons without overflow */
        flex-shrink: 0;
        margin-right: 6px !important;
    }

        #basket-content .qty-input-wrapper .qtyBox {
            height: 32px !important;
            min-height: 32px !important;
            padding: 6px 22px !important; /* Adjust for 20px spinner buttons */
            font-size: 12px !important;
            line-height: 1.3;
            box-sizing: border-box !important;
            width: 100% !important;
            text-align: center !important;
        }

    /* Compact spinner buttons - align perfectly with input borders */
    #basket-content .qty-spinner {
        height: calc(100% - 4px) !important;
        top: 2px !important;
        width: 20px !important;
        font-size: 10px !important;
        border: 1px solid #ddd !important;
    }

        #basket-content .qty-spinner.minus {
            left: 1px !important; /* Align perfectly with input box left edge */
            border-radius: 6px 0 0 6px !important;
            border-right: none !important;
        }

        #basket-content .qty-spinner.plus {
            right: 0px !important; /* Prevent overflow beyond container */
            border-radius: 0 6px 6px 0 !important;
            border-left: none !important;
        }

    /* Compact action buttons - Update: ~50px, Remove: ~45px */
    #basket-content .updateBasket {
        padding: 0 8px !important;
        font-size: 10px !important;
        height: 32px !important;
        line-height: 30px !important;
        min-width: 45px !important;
        margin-right: 2px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        display: inline-block !important;
    }

    #basket-content .remove {
        padding: 0 6px !important;
        font-size: 10px !important;
        height: 32px !important;
        line-height: 30px !important;
        min-width: 40px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        display: inline-block !important;
    }

    #basket-content .remove, #basket-content .updateBasket {
        box-sizing: border-box;
        border-radius: 3px !important;
        font-weight: 600 !important;
        white-space: nowrap;
        line-height: 1.2;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Horizontal layout container */
    #basket-content .qty .qtyButtons {
        display: inline-flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        margin: 0 !important;
        align-items: center !important;
        height: 32px !important;
    }

    /* Quantity cell layout */
    #basket-content .qty {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        padding: 1px !important;
        gap: 0 !important;
    }

    /* Mobile clear filters button - optimized for touch */
    #filters .btn_header_clear,
    .enhanced-filters .btn_header_clear {
        padding: 12px !important; /* Larger touch target */
        font-size: 16px !important; /* Larger text for better readability */
        min-height: 44px !important; /* Minimum touch target size */
        margin: 16px 0 !important; /* More spacing on mobile */
        box-sizing: border-box !important;
    }

        /* Ensure mobile tap feedback */
        #filters .btn_header_clear:active,
        .enhanced-filters .btn_header_clear:active {
            background: #f5f5f5 !important; /* Light tap feedback */
            transform: scale(0.98) !important; /* Subtle press effect */
        }

    /* Basket footer buttons - mobile optimization */
    .basket-clear, .basket-continue {
        font-size: 16px !important; /* Larger text for better readability on mobile */
        min-height: 44px !important; /* Minimum touch target size */
        padding: 12px 16px !important; /* Larger touch targets */
        margin: 4px !important; /* More spacing between buttons */
        box-sizing: border-box !important;
        vertical-align: top !important; /* Consistent alignment in table cell */
    }

    /* Mobile basket footer alignment - center buttons */
    #basket-content tfoot td,
    .basket tfoot td,
    tfoot td {
        text-align: center !important;
        white-space: nowrap !important; /* Prevent buttons from wrapping on mobile */
    }

    /* Mobile button spacing */
    #basket-content tfoot .basket-clear {
        margin-right: 6px !important;
        margin-left: 0 !important;
    }

    #basket-content tfoot .basket-continue {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Mobile tap feedback for basket buttons */
    .basket-clear:active {
        background: #e74c3c !important; /* Solid color for tap feedback */
        transform: scale(0.98) !important;
    }

    .basket-continue:active {
        background: #1d5796 !important; /* Solid color for tap feedback */
        transform: scale(0.98) !important;
    }

    /* Mobile Collect in Store button optimization */
    .collect-store-btn {
        font-size: 16px !important; /* Larger text for mobile readability */
        min-height: 48px !important; /* Larger touch target */
        padding: 14px 24px !important; /* More generous padding for touch */
        margin: 8px 4px !important; /* Better spacing on mobile */
        box-sizing: border-box !important;
        display: block !important; /* Full width on mobile for easier tapping */
        width: 100% !important;
        max-width: 280px !important; /* Prevent it from being too wide */
    }

        /* Mobile-specific store icon sizing */
        .collect-store-btn::before {
            font-size: 18px !important; /* Slightly larger icon on mobile */
            margin-right: 10px !important;
        }

        /* Mobile tap feedback */
        .collect-store-btn:active {
            background: #d35400 !important; /* Solid color for tap feedback */
            transform: scale(0.98) !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
        }

    /* Remove hover effects on touch devices */
    @media (hover: none) and (pointer: coarse) {
        .collect-store-btn:hover {
            background: linear-gradient(135deg, #f39c12, #e67e22) !important;
            transform: none !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        }
    }

    /* Mobile Buy with Card button - responsive sizing */
    .buy-with-card-btn {
        width: min(282px, 90vw) !important; /* Responsive width, max 90% of viewport */
        height: 50px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        touch-action: manipulation !important;
    }

    /* Mobile Collect in Store button - identical styling */
    .collect-store-btn {
        width: min(282px, 90vw) !important; /* Responsive width, max 90% of viewport */
        height: 50px !important; /* Same height as buy with card */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        touch-action: manipulation !important;
    }

        /* Make both button icons identical on mobile */
        .buy-with-card-btn::before,
        .collect-store-btn::before {
            margin: 0 6px 0 0 !important;
            padding: 0 !important;
            line-height: 1 !important;
        }

    /* Mobile tap feedback */
    .buy-with-card-btn:active {
        background: linear-gradient(135deg, #2471a3, #1a5490) !important; /* Darker blue for tap feedback */
        transform: scale(0.98) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    }

    /* Remove hover effects on touch devices */
    @media (hover: none) and (pointer: coarse) {
        .buy-with-card-btn:hover {
            background: linear-gradient(135deg, #3498db, #2980b9) !important;
            transform: none !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        }
    }

    /* Mobile Continue to Payment button styling */
    .continue-payment-btn {
        width: min(282px, 90vw) !important; /* Responsive width, max 90% of viewport */
        height: 50px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        touch-action: manipulation !important;
    }

    /* Mobile Proceed with Payment button styling */
    .proceed-payment-btn {
        width: min(282px, 90vw) !important; /* Responsive width, max 90% of viewport */
        height: 50px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        touch-action: manipulation !important;
    }

        /* Mobile payment button icons */
        .continue-payment-btn::before,
        .proceed-payment-btn::before {
            margin: 0 6px 0 0 !important;
            padding: 0 !important;
            line-height: 1 !important;
        }

    /* Mobile-specific styling for result page return button to prevent text wrapping */
    .button.checkout.proceed {
        font-size: 15px !important; /* Increase from 14px to 15px as requested, still smaller than default 18px */
        white-space: nowrap !important; /* Prevent text wrapping */
        overflow: hidden !important; /* Hide overflow if still too long */
        text-overflow: ellipsis !important; /* Add ellipsis if text is cut off */
        max-width: 90% !important; /* Ensure button doesn't exceed container */
        box-sizing: border-box !important;
        line-height: 1.2 !important; /* Better vertical centering */
        display: inline-flex !important; /* Use flexbox for better vertical centering */
        align-items: center !important; /* Center text vertically */
        justify-content: center !important; /* Center text horizontally */
        min-height: 44px !important; /* Ensure minimum touch target size */
    }

    /* Hidden class definition - required for payment button visibility control */
    .hidden {
        display: none;
    }

    #payment-form .hidden {
        display: none;
    }

    /* Override payment button display when hidden - higher specificity than button styles */
    .proceed-payment-btn.hidden,
    .continue-payment-btn.hidden {
        display: none !important;
    }

    /* Mobile Change button styling - matches blue theme but optimized for touch */
    .change-btn {
        width: auto !important;
        height: 40px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        margin-left: 8px !important;
        touch-action: manipulation !important;
        transform: none !important; /* Prevent jumping */
    }

        /* Mobile tap feedback - no transform to prevent jumping */
        .change-btn:active {
            background: linear-gradient(135deg, #2471a3, #1a5490) !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
            transform: none !important;
        }

    /* Remove hover effects on touch devices */
    @media (hover: none) and (pointer: coarse) {
        .change-btn:hover {
            background: linear-gradient(135deg, #3498db, #2980b9) !important;
            transform: none !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        }
    }

    body {
        max-width: 767px; /*was 660 / was 768*/
        width: 100%;
    }

    h1 {
        font-size: 1.6em;
    }

    h2 {
        font-size: 1.3em;
    }

    h3 {
        font-size: 1.1em;
    }

    /* main structure */
    #wrapper {
        max-width: 767px; /*was 660 / was 768*/
        width: 100%;
        overflow: hidden;
    }

    #main {
        clear: both;
        padding: 0 5px 0 5px;
    }

    .container {
        width: 100%;
    }

        .container.main {
            padding: 5px;
        }

    /* footer */
    #footer #reviewscouk {
        display: none;
    }

    #footer #signup {
        width: 320px;
        padding: 10px 0 10px 0;
        margin-left: auto;
        margin-right: auto;
    }

    #footer #social {
        width: 320px;
        padding: 10px 0 10px 0;
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }

    .footerlinks {
        margin: 0 10px 0 10px;
        font-size: 14pt;
        line-height: 20pt;
    }

        .footerlinks li {
            margin-bottom: 4px;
        }

    /* Footer reviews section - mobile optimized */
    #footer #reviews {
        padding: 15px 5px;
        background-color: #333;
    }

        #footer #reviews li {
            width: 50%;
            padding: 5px 5px 5px 50px;
            background-size: 35px;
            background-position: 10px center;
            height: 45px;
            font-size: 11px;
            line-height: 14px;
            margin-bottom: 5px;
            box-sizing: border-box;
            float: left;
        }

            #footer #reviews li:nth-child(2n+1) {
                clear: left;
            }

    /* flexible columns */
    .col-1-1 {
        width: 100%;
    }

    .col-1-2 {
        width: 50%;
        float: left;
    }

    .product-list .col-1-2 {
        padding: 5px;
    }

    .col-1-3 {
        width: 50%;
    }

        .col-1-3:nth-child(2n+1) {
            clear: both;
        }

        .col-1-3.full {
            width: 100%;
            max-height: 375px;
        }

    .col-2-3 {
        width: 100%;
    }

    /* Footer columns - responsive layout */
    .col-1-4 {
        width: 50%; /* Two columns on mobile */
        float: left;
        clear: none;
    }

        .col-1-4.full {
            width: 50%;
        }

    .col-1-5f {
        width: 33%;
    }

    .col-4-5g {
        width: 66%;
    }

    /* Footer specific styling for base mobile */
    #footer .col-1-4 {
        padding: 10px 5px; /* Add padding for better spacing */
        box-sizing: border-box;
    }

    #footer .footerlinks {
        margin: 0 5px; /* Reduce excessive margins */
        font-size: 12pt; /* Slightly smaller for mobile */
        line-height: 18pt;
    }

    /* Footer specific 2-column layout for base mobile screens */
    #footer .col-1-4 {
        width: 50% !important; /* Two columns on base mobile */
        float: left !important;
        clear: none !important;
    }

    .col-1-8 {
        width: 25%;
    }

        .col-1-8.full {
            width: 50%;
        }

        .col-1-8:nth-child(4n+1) {
            clear: both;
        }

    .col-3-4 {
        width: 100%;
    }

    .col-1-5 {
        width: 100%;
    }

    #mobileFilterPanel {
        background: #f9f9f9;
        padding: 15px;
        border: 1px solid #ddd;
        margin-bottom: 15px;
    }

    .mobile-filters button {
        font-size: 16px;
        padding: 10px;
    }

    .filt a {
        display: block;
        padding: 10px 5px;
        border-bottom: 1px solid #eee;
    }

        .filt a:last-child {
            border-bottom: none;
        }

    /* Mobile disabled filter items (cannot be deselected) */
    .filt .selected.disabled {
        opacity: 0.6;
        cursor: not-allowed;
        position: relative;
        display: block !important;
        padding: 12px 16px;
    }

        .filt .selected.disabled::before {
            display: none !important;
        }

        .filt .selected.disabled .deselect-message {
            display: block;
            font-size: 9px;
            color: #e53e3e;
            font-weight: normal;
            margin-top: 3px;
            line-height: 1;
            white-space: nowrap;
            width: 100%;
            clear: both;
        }

    .flext {
        display: flex;
    }

    /* Category parent context styling - blue theme - mobile */
    .mobile-filter-container .category-parent,
    .enhanced-filters .category-parent {
        display: block;
        font-size: 9px;
        color: #2c5282;
        font-weight: normal;
        margin-bottom: 2px;
        line-height: 1;
        white-space: nowrap;
        width: 100%;
        opacity: 0.8;
    }

    /* Category filter items with parent context - stack vertically - mobile */
    .mobile-filter-container .filter-item:has(.category-parent),
    .enhanced-filters .filter-item:has(.category-parent) {
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        padding-left: 0; /* Remove global padding */
    }

        /* Move checkbox to align with category name, not parent - mobile */
        .mobile-filter-container .filter-item:has(.category-parent)::before,
        .enhanced-filters .filter-item:has(.category-parent)::before {
            position: absolute;
            left: 12px;
            top: 50%;
            bottom: auto;
            transform: translateY(-50%);
            margin-top: 6px; /* Smaller adjustment for mobile */
        }

        .mobile-filter-container .filter-item:has(.category-parent) .category-main,
        .enhanced-filters .filter-item:has(.category-parent) .category-main {
            width: 100%;
            padding-left: 26px; /* Closer to checkbox - reduced by 5px */
            margin-left: 0;
        }

        .mobile-filter-container .filter-item:has(.category-parent) .category-parent,
        .enhanced-filters .filter-item:has(.category-parent) .category-parent {
            padding-left: 26px; /* Align parent text with category - reduced by 5px */
            margin-left: 0;
        }

    .enhanced-filters .category-main {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        font-size: 13px;
    }

    .filt .selected.disabled .filter-main {
        display: flex;
        align-items: center;
        width: 100%;
    }

    /* hide stuff we don't want on small screen */
    .mobile_hide, #accbar, /*#accbar2,*/ #search, .basket_summary, #links, #nav_wrapper, #nav, #payment {
        display: none;
    }

    .mobile_show {
        display: block;
    }

    /* header - unified mobile logo styling */
    #logo {
        max-width: 190px;
        padding: 10px 0;
        margin: 0 auto; /* Center the logo properly */
        display: inline-block;
    }

        #logo img {
            max-width: 180px;
            height: auto;
        }

    .mobileVAT {
        margin-top: 10px;
        display: inline-block;
        float: right;
        margin-right: 8px;
        height: 36px;
    }

    .zzchristmas {
        text-align: center !important; /* Match the inline style in mobile layout */
        min-height: 50px; /* Much smaller than before */
        padding: 1px 1px; /* Reduce top/bottom padding */
    }

    .reviews-io-rating-bar-widget {
        display: none !important;
    }

    /* Hide the accbar2 container entirely on mobile */
    #accbar2 {
        display: none;
    }

    /* Modern responsive navigation */
    #mobile_nav {
        background: linear-gradient(135deg, #f8ec1a 0%, #f4e60e 100%);
        width: 100%;
        position: sticky;
        bottom: 0;
        z-index: 999;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
        border-top: 1px solid rgba(29, 87, 150, 0.1);
        padding: 6px 0;
        min-height: 65px;
        /* Prevent layout shifts during image loading */
        height: 65px;
        display: flex;
        align-items: center;
    }

        #mobile_nav ul {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        #mobile_nav li {
            flex: 1;
            text-align: center;
            position: relative;
            transition: all 0.2s ease;
            margin: 0 2px;
            color: #1d5796;
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            padding: 4px 2px;
            min-height: 50px;
        }

            /* Remove hover - use only active/touch states for mobile */
            #mobile_nav li:active {
                background: rgba(29, 87, 150, 0.15);
                transform: scale(0.95);
                border-radius: 12px;
            }

            #mobile_nav li a {
                display: inline-block;
                text-decoration: none;
                color: inherit;
                line-height: 1;
            }

            #mobile_nav li br {
                display: block;
                height: 2px;
                margin: 1px 0;
            }

            #mobile_nav li img {
                width: 31px;
                height: 31px;
                display: block;
                margin: 0 auto;
                transition: transform 0.2s ease;
                /* Prevent layout shift during loading */
                min-width: 31px;
                min-height: 31px;
                background: transparent;
                box-sizing: border-box;
            }

            /* Touch feedback for icons */
            #mobile_nav li:active img {
                transform: scale(0.9);
            }

    .browse_menu, sign_up {
        display: none;
    }

    .mobile_menu {
        display: none;
    }

    .mobile_menu, .mobile_search {
        /*display:none;*/
        float: left;
        width: 100%;
        background: #eee; /*#f9f7d8;*/
        text-align: left;
        border-top: 1px dotted #1d5796;
    }

    .mobile_search {
        padding: 12px;
        border-bottom: 3px solid #1d5796;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        box-shadow: 0 2px 10px rgba(29, 87, 150, 0.15);
        position: relative;
    }

        .mobile_search::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #f8ec1a 0%, #1d5796 50%, #f8ec1a 100%);
        }

        .mobile_search form {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #ffffff;
            border: 2px solid #1d5796;
            border-radius: 25px;
            padding: 4px;
            box-shadow: 0 3px 15px rgba(29, 87, 150, 0.2);
            transition: all 0.3s ease;
        }

            .mobile_search form:focus-within {
                border-color: #f8ec1a;
                box-shadow: 0 4px 20px rgba(248, 236, 26, 0.4);
                transform: translateY(-1px);
            }

        .mobile_search .keywords {
            flex: 1;
            height: 46px;
            border: none;
            border-radius: 20px;
            padding: 0 16px;
            font-size: 16px;
            color: #1d5796;
            background: transparent;
            outline: none;
        }

            .mobile_search .keywords::placeholder {
                color: #6c757d;
                font-style: italic;
            }

        .mobile_search button {
            border: none;
            background: #1d5796;
            border-radius: 50%;
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            padding: 0;
        }

            .mobile_search button:active {
                transform: scale(0.95);
                background: #0d3a6e;
            }

            .mobile_search button .search-icon {
                width: 24px;
                height: 24px;
            }

        /* Mobile search button flash animation */
        @keyframes search-button-flash {
            0%, 100% {
                background: #1d5796;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                border: 2px solid #1d5796;
            }
            50% {
                background: #2a6bb3;
                box-shadow: 0 2px 8px rgba(29,87,150,0.4);
                border: 2px solid #f8ec1a;
            }
        }

        .mobile_search button.flash-typing {
            animation: search-button-flash 2s ease-in-out infinite;
        }

    /* Main header search button styling */
    #searchButton {
        border: none;
        background: #1d5796;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0;
    }

        #searchButton:active {
            transform: scale(0.95);
            background: #0d3a6e;
        }

        #searchButton .search-icon {
            width: 24px;
            height: 24px;
        }

    .dropdown_menu .column {
        width: 100%;
        float: left;
    }

        .dropdown_menu .column .item {
            display: block;
            width: 100%;
            font-size: 14px;
            line-height: 20px;
            padding: 8px;
            border-bottom: 1px dotted #1d5796;
        }

    /* mobile button list */
    .mobile_list {
        margin: 0;
    }

        .mobile_list li {
            list-style: none;
            margin: 0;
        }

            .mobile_list li a {
                display: block;
                padding: 10px;
                border: 1px solid #ccc;
                width: 100%;
                margin-bottom: 5px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
            }


    /* breadcrumb */
    #breadcrumb {
        font-size: 12px;
        margin: 8px 0;
        padding: 6px 8px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 3px;
        overflow: hidden;
    }

        #breadcrumb a, #breadcrumb span {
            padding: 3px 4px;
            margin-right: 2px;
            border-radius: 2px;
        }

        #breadcrumb a {
            text-decoration: none;
        }

            #breadcrumb a::after {
                content: "→";
                margin-left: 8px;
                color: #6c757d;
                font-weight: normal;
            }

        #breadcrumb span {
            color: #495057;
            font-weight: 500;
        }

    /* home page */

    #scroller {
        margin: 10px 0 10px 0;
        overflow: hidden;
        min-height: 240px;
        min-width: 285px;
    }

    .authorizedSellerContainer, .authorizedSellerContainer img {
        margin-bottom: 10px;
        width: 235px;
        height: 24px;
    }

    .paypal p {
        font-size: 13px;
    }

    .paypal2 p {
        text-align: center;
    }

    #homecats .link .label {
        height: 48px;
        font-size: 12px;
        line-height: 13px;
    }

    #catlist a {
        padding: 15px 5px 15px 5px;
        font-size: 14px;
        font-weight: normal;
    }

    #zzbrands a {
        padding: 10px;
        font-size: 14px;
        font-weight: normal;
        height: 50px;
    }

    /* product listing boxes */
    .featprod.grid .desc {
        height: 97px;
        overflow: hidden;
        padding: 5px;
        font-size: 14px;
        line-height: 15px;
    }

    .featprod.grid img {
        margin: 5px auto 5px auto;
        max-width: 100%;
        height: auto;
        min-height: 109px;
    }

    .featprod.grid .price {
        -webkit-border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        border-bottom-left-radius: 4px;
        height: 42px;
        overflow: hidden;
    }

    .featprod .price {
        font-size: 16px;
        line-height: 16px;
        font-weight: bold;
        padding: 5px 5px 5px 5px;
        text-align: center;
        vertical-align: bottom;
    }

        .featprod .price .instock, .featprod .price .avail, .featprod .price .outstock, .featprod .price .comingsoon {
            background-position: calc(50% - 42px) center;
            padding-left: 0;
            padding-right: 0;
            text-align: center;
            display: block;
            text-indent: 0;
        }

    .grid-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto;
        min-width: auto;
    }

    #values li {
        width: 50%;
        padding: 0 0 0 45px;
        height: 40px;
        font-size: 14px;
        margin-bottom: 10px;
        background-size: 40px 40px;
    }

        #values li:nth-child(2n+1) {
            clear: both;
        }

    /*product page */

    #product h3 {
        margin: 10px 0 10px 0;
        padding-top: 10px;
    }

    #product .thumb, #product .blurb {
        width: 100%;
        float: left;
    }

    #product .thumb {
        margin-bottom: 5px;
    }

        #product .thumb .prodimg {
            width: 100%;
            min-width: 280px; /* Reduced from 350px for landscape mobile */
            min-height: 280px; /* Reduced from 350px for landscape mobile */
            aspect-ratio: 1/1;
        }

    #prodright {
        width: 100%;
        float: left;
    }

    .buy_box {
        min-height: 150px;
    }

        .buy_box .buy-qty {
            width: 29%;
        }

        .buy_box .buy-add {
            width: 70%;
        }

        .buy_box .dim,
        select.dim {
            width: 100%;
            padding: 8.8px 50px 8.8px 8px; /* Increased from original 8px to 8.8px (10% increase) */
            border: 2px solid #e0e0e0 !important; /* !important to override base select styles */
            border-radius: 8px;
            background: white;
            font-size: 16px; /* Prevents zoom on iOS */
            color: #333;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 12px center;
            background-repeat: no-repeat;
            background-size: 16px;
            padding-right: 50px; /* Keep original right padding for arrow space */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin-bottom: 6px; /* Increased from original 4px to 6px (2px increase) */
        }

            /* Remove old MS expand arrow on mobile */
            .buy_box .dim::-ms-expand,
            select.dim::-ms-expand {
                display: none;
            }

            /* Mobile dropdown states */
            .buy_box .dim:invalid,
            select.dim:invalid,
            .buy_box .dim[value=""],
            select.dim[value=""] {
                background-color: #f0f9f0;
                border-color: #90c695;
                color: #5a5a5a;
            }


            .buy_box .dim:focus,
            select.dim:focus {
                outline: none;
                border: 2px solid #1d5796 !important; /* Maintain 2px width */
                box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.15);
                background-color: white;
            }

            .buy_box .dim:valid:not([value=""]),
            select.dim:valid:not([value=""]) {
                background-color: white;
                border: 2px solid #28a745 !important; /* Maintain 2px width */
                color: #333;
            }

            .buy_box .dim:disabled,
            select.dim:disabled {
                background-color: #f8f9fa;
                border-color: #e9ecef;
                color: #6c757d;
                cursor: not-allowed;
                opacity: 0.6;
            }

    /* ProductDimensions Help Text - Mobile */
    .LookDims {
        background: linear-gradient(135deg, #e3f2fd, #f0f9ff);
        border: 1px solid #90caf9;
        border-radius: 8px;
        padding: 12px 16px;
        margin: 9px 0 12px 0; /* Reduced top margin from 12px to 9px (3px less) */
        color: #1976d2;
        font-size: 13px;
        font-weight: 500;
        text-align: center;
        position: relative;
        animation: pulseGlow 3s ease-in-out infinite;
    }

    @keyframes pulseGlow {
        0%, 100% {
            box-shadow: 0 0 5px rgba(25, 118, 210, 0.3);
        }

        50% {
            box-shadow: 0 0 15px rgba(25, 118, 210, 0.5);
        }
    }

    .LookDims::before {
        content: "👆";
        margin-right: 8px;
    }

    /* Modern Variant Selection Modal - Mobile */
    .modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 9999 !important;
        backdrop-filter: blur(2px) !important;
    }

        .modal-overlay .modal-content {
            background: white !important;
            margin: 10px;
            width: calc(100% - 20px);
            max-height: calc(100vh - 20px);
            border-radius: 12px !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
            overflow-y: auto !important;
            animation: modalSlideIn 0.3s ease-out !important;
        }

        .modal-overlay .modal-header {
            padding: 20px 20px 32px !important; /* Increased bottom padding for more space */
            border-bottom: 1px solid #e5e5e5 !important;
            display: block !important; /* Same as desktop - prevent flex layout issues */
            position: relative !important;
            width: auto !important; /* Override desktop width: 600px */
            min-height: 100px !important; /* Increased from 90px to accommodate extra spacing */
        }

        .modal-overlay .modal-body {
            padding: 24px 24px 20px !important; /* More horizontal padding for dropdown centering */
            background: white !important; /* Ensure white background */
        }

    /* Variant Selection Groups - Mobile */
    .variant-group {
        margin-bottom: 20px; /* Consistent spacing on mobile */
        width: 100%;
        max-width: 100%;
    }

        .variant-group:last-child {
            margin-bottom: 0;
        }

        .variant-group label {
            display: block;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            font-size: 14px;
            transition: color 0.2s ease;
            text-align: left;
        }

            .variant-group label.disabled {
                color: #999;
            }

        .variant-group select {
            width: 100% !important; /* Force full width */
            margin: 0 auto; /* Center the dropdown */
            box-sizing: border-box;
            /* Match desktop dropdown styling */
            padding: 8.8px 50px 8.8px 8px !important;
            border: 2px solid #e0e0e0 !important;
            border-radius: 8px !important;
            background: white !important;
            font-size: 14px !important;
            color: #333 !important;
            transition: all 0.3s ease !important;
            cursor: pointer !important;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
            background-position: right 12px center !important;
            background-repeat: no-repeat !important;
            background-size: 16px !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            margin-bottom: 6px !important;
        }

            /* Mobile dropdown states - match desktop */
            .variant-group select:invalid,
            .variant-group select[value=""] {
                background-color: #f0f9f0 !important;
                border-color: #90c695 !important;
                color: #5a5a5a !important;
            }

            /* Mobile touch interaction - use active instead of hover */
            .variant-group select:active:not(:disabled) {
                border-color: #1d5796 !important;
                box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.1) !important;
                transform: translateY(-1px) !important;
            }

            .variant-group select:focus {
                outline: none !important;
                border-color: #1d5796 !important;
                box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.15) !important;
                background-color: white !important;
            }

            .variant-group select:valid:not([value=""]) {
                background-color: white !important;
                border-color: #28a745 !important;
                color: #333 !important;
            }

            .variant-group select:disabled {
                background-color: #f8f9fa !important;
                border-color: #e9ecef !important;
                color: #6c757d !important;
                cursor: not-allowed !important;
                opacity: 0.6 !important;
            }

    /* ProductDimension Quantity Input - Match Add to Basket Button Height */
    .buy-qty .qty {
        padding: 8px 30px !important; /* Match button padding + space for spinners */
        border: 2px solid #e0e0e0 !important;
        border-radius: 8px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        height: auto !important;
        min-height: 44px !important; /* Match button height */
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Quantity Spinner Buttons */
    .buy_box .qty-spinner {
        height: calc(100% - 5px);
    }

    .modal-overlay .modal-header h3 {
        margin: 0 0 16px 0 !important; /* Original spacing */
        font-size: 16px !important; /* Reduced from 18px to 16px (2px smaller) */
        color: #333 !important; /* Black color - same as desktop */
        line-height: 1.2 !important; /* Tighter line height */
        font-weight: 600 !important;
        white-space: nowrap !important; /* Prevent wrapping */
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* Show ... if too long */
        padding-right: 50px !important; /* More space for larger close button */
        width: 100% !important; /* Force full width on mobile */
    }

    .modal-overlay .modal-header .product-name {
        font-size: 14px !important; /* Slightly smaller to fit better */
        color: #1d5796 !important; /* Blue color - same as desktop */
        font-weight: 600 !important;
        line-height: 1.4 !important; /* Better line height for wrapping */
        margin-top: 10px !important; /* Add space between Select Type and product name */
        margin-bottom: 16px !important; /* Match desktop spacing */
        display: block !important;
        word-wrap: break-word !important; /* Allow product name to wrap if needed */
        overflow-wrap: break-word !important; /* Additional browser support */
        white-space: normal !important; /* Allow wrapping */
        text-decoration: none !important; /* Remove underline from link */
        transition: color 0.2s ease !important; /* Smooth color transition */
    }

        .modal-overlay .modal-header .product-name:active {
            color: #0f3d66 !important; /* Darker blue on touch (mobile doesn't have hover) */
        }

    .modal-overlay .modal-close {
        background: none !important;
        border: none !important;
        font-size: 28px !important; /* Larger for mobile */
        color: #999 !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 44px !important; /* Mobile-friendly touch target */
        height: 44px !important; /* Mobile-friendly touch target */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important; /* Slightly larger radius */
        transition: all 0.2s ease !important;
        position: absolute !important;
        top: 12px !important; /* Adjusted for larger button */
        right: 12px !important; /* Adjusted for larger button */
    }

        /* Use active state instead of hover for mobile */
        .modal-overlay .modal-close:active,
        .modal-overlay .modal-close:focus {
            background: #f5f5f5 !important;
            color: #333 !important;
        }

    /* Modal button effects for mobile */
    .modal-overlay .button.secondary:active {
        background: #e9ecef !important;
        color: #495057 !important;
    }

    .modal-overlay .button.basket:active {
        background: #090 !important;
        border-color: #090 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(35, 144, 67, 0.3) !important;
    }

    .modal-overlay .modal-footer {
        padding: 16px 20px 20px;
        display: flex;
        flex-wrap: wrap; /* Allow wrapping if needed */
        justify-content: center; /* Center buttons */
        align-items: center;
        gap: 12px; /* Match desktop gap */
        max-width: 100%;
    }

        /* Mobile product description link styling */
        .modal-overlay .modal-footer .product-description-link {
            text-align: center !important;
            margin-top: 8px !important;
            padding-top: 12px !important;
            border-top: 1px solid #f0f0f0 !important;
            width: 100% !important;
        }

            .modal-overlay .modal-footer .product-description-link a {
                color: #1d5796 !important;
                text-decoration: none !important;
                font-size: 13px !important; /* Slightly smaller for mobile */
                line-height: 1.4 !important;
                transition: color 0.2s ease !important;
                display: block !important;
            }

                .modal-overlay .modal-footer .product-description-link a:active {
                    color: #0f3d66 !important; /* Use active instead of hover on mobile */
                }

    .modal-overlay .button {
        flex: 0 0 auto; /* Don't grow to full width */
        width: auto; /* Let content determine width */
        max-width: 140px; /* Match desktop max width */
        min-width: 100px; /* Match desktop min width */
        padding: 12px 20px; /* Match desktop padding */
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-block;
        text-align: center;
    }

        .modal-overlay .button.secondary {
            background: #f8f9fa;
            color: #6c757d;
            border: 1px solid #dee2e6;
        }

        /* Removed .modal-overlay .button.secondary:hover - mobile devices don't need hover states */

        .modal-overlay .button.basket {
            background: #239043; /* Green basket button - same as desktop */
            color: white;
            border: 2px solid #239043;
        }

        /* Removed .modal-overlay .button.basket:hover - mobile devices don't need hover states */

        .modal-overlay .button.util {
            background: #e3f7fc; /* Light blue util button - same as desktop */
            color: #333;
            border: 2px solid #8ed9f6;
        }

        /* Removed .modal-overlay .button.util:hover - mobile devices don't need hover states */

        .modal-overlay .button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important;
        }

    #productreview {
        max-height: 500px;
    }

        #productreview .rating {
            width: 100%;
        }

        #productreview .detail {
            width: 100%;
            margin-top: 15px;
        }

    #review-entry td {
        padding-right: 10px;
    }

    .videowrapper {
        width: 100%;
    }

    .pdfwrapper {
        width: 100%;
        padding: 10px;
        margin: 10px 0 0 0;
    }

    .includewrapper {
        width: 100%;
    }

    /* paging and sorting */
    .pagingwrapper {
        padding: 7px;
    }

    .includedetail {
        width: calc(100% - 90px);
    }

    .accessdetail {
        width: 200px;
        float: right;
    }

    .rangewrapper {
        margin-bottom: 5px;
    }

    .rangedetail, .manufacturerdetail {
        width: 200px;
    }

    #product .action {
        margin-right: 5px;
    }

        #product .action img {
            border: 1px solid #ccc;
            max-width: 50px;
            max-height: 50px;
        }

    #product .figaction {
        display: flex;
        height: 50px;
    }

    #product .thumb .img-gallery {
        height: 425px;
        aspect-ratio: 350/425;
        min-height: 425px;
    }

    /* Mobile PhotoSwipe indicator */
    .img-gallery:not(.photoswipe-loaded):active::after {
        content: 'Tap to enable zoom';
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(29, 87, 150, 0.9);
        color: white;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 11px;
        pointer-events: none;
        z-index: 1;
    }

    /*Added August 2023 for shorter blue boxes in mobile view*/
    .brandCategories .new .cat a div.blueBar, .allcategories .cat a div.blueBar {
        height: 55px;
        position: absolute;
        bottom: 0px;
        width: 100%;
        display: table;
        background-color: #1D5796;
    }

        .brandCategories div.blueBar div, .allcategories .cat a div.blueBar div {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            color: #fff;
            font-size: 14px;
            height: 55px;
            width: 100%;
        }

        .brandCategories div.blueBar.man div, .allcategories .cat a div.blueBar.man div {
            font-size: 14px;
            padding-left: 2px;
            padding-right: 2px;
        }
    /*Added August 2023 for shorter blue boxes in mobile view*/

    /* Mobile specific sorting adjustments */
    .sortwrapper {
        padding: 6px 10px !important;
        gap: 6px !important;
        font-size: 12px !important;
        float: left;
        margin-right: 10px;
        display: inline-flex !important;
        align-items: center !important;
    }

        .sortwrapper label {
            font-size: 12px !important;
            margin-left: 4px !important; /* Add small left margin to prevent text touching border */
        }

        .sortwrapper select {
            font-size: 12px !important;
            min-width: 100px !important;
            padding: 2px 4px !important;
        }

    /* paging */
    .pagewrapper {
        width: auto;
        margin-bottom: 10px;
        float: right;
        text-align: right;
        display: flex;
        align-items: center;
        height: 34px;
    }

        .pagewrapper p {
            background: linear-gradient(135deg, #1d5796 0%, #2a66a8 100%);
            color: #ffffff;
            padding: 5px 10px;
            border-radius: 13px;
            font-weight: 600;
            font-size: 10px;
            margin: 0;
            display: inline-block;
            box-shadow: 0 2px 6px rgba(29, 87, 150, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .pagewrapper a {
            padding: 1px 5px;
        }

    .displaywrapper {
        display: none;
    }

    .category_blog {
        padding: 15px 20px 15px 60px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        background: #e3f7fc url('/content/images/icon_blog.png') no-repeat 10px;
        border: 1px solid #8ed9f6;
        margin-bottom: 10px;
        line-height: 20px;
    }

    .category_blog2 {
        padding: 15px 20px 15px 60px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        background: #e3f7fc url('/content/images/icon_blog.png') no-repeat 10px;
        border: 1px solid #8ed9f6;
        margin-bottom: 10px;
        line-height: 20px;
        margin-top: 20px;
    }

    #category_blurb img {
        max-width: 50% !important;
    }

    /* basket contents */
    /* break normal table layout */
    #basket-content, #basket-content tr, #basket-content td {
        display: block;
    }

        #basket-content thead {
            display: none;
        }


    .separate {
        border-bottom: 2px solid #eee;
    }

    #basket-content {
        margin-top: 10px;
    }

        #basket-content tr {
            width: 100%;
            float: left;
        }

        #basket-content td {
            padding: 5px;
        }

            #basket-content td.image {
                float: left;
                width: 30%;
            }

                #basket-content td.image img {
                    max-width: 100%;
                }

            #basket-content td.desc {
                float: right;
                width: 70%;
            }

            #basket-content td.qty {
                float: right;
                width: 70%;
                text-align: left;
            }

            #basket-content td.value {
                float: right;
                width: 70%;
                text-align: left;
            }

        #basket-content .remove, #basket-content .updateBasket {
            display: inline-block !important;
            margin-right: 2px !important;
        }

        #basket-content .qty .qtyButtons {
            left: 90px;
            bottom: 10px;
            transform: none;
        }

        #basket-content .qtyBox {
            width: 40px;
        }


    #basket-footer #postage {
        width: 100%;
        float: left;
    }

    #basket-footer #promo {
        width: 100%;
        float: left;
    }

    #basket-footer #totals {
        width: 100%;
        float: left;
    }

    #basket-totals td {
        padding: 5px;
    }

        #basket-totals td.value {
            text-align: right;
        }

        #basket-totals td.checkout {
            text-align: center;
        }

    #basket-totals .checkout-buttons {
        margin-left: auto;
        margin-right: auto;
    }

    /* login */
    .login-left, .login-right {
        padding: 10px 20px 20px 20px;
        margin-bottom: 10px;
    }

    /* checkout */
    .checkout-wrapper {
        width: 100%;
        padding: 10px 0 10px 0;
    }

        .checkout-wrapper label, .login label, .login-left label {
            width: 100%;
        }

        .checkout-wrapper input, .checkout-wrapper select, .checkout-wrapper textarea,
        .login input, .login select, .login-left input, .login-left select, .login-left a.button.proceed {
            width: 100%;
            margin-bottom: 5px;
        }

    .login .checkbox input, .login-left .checkbox input {
        width: 10%;
        text-align: left;
    }

    .login .checkbox label, .login-left .checkbox label {
        width: 80%;
        text-align: left;
    }

    .login-right .button {
        margin-bottom: 5px;
    }

    #delivery_opts .upgrade {
        padding: 10px;
        height: 140px;
    }

    .tech_nos {
        width: 100%;
    }

    .locationErrorDiv {
        margin-top: 30px;
        height: 250px;
        background: url("/Content/banners/Mobile/Delivery-Location-Error-Mobile.jpg") no-repeat top left;
    }

    .button.prominent {
        padding: 8px 6px;
    }

    /* Mobile back-to-top button - smaller and repositioned */
    .back-to-top {
        bottom: 20px !important;
        right: 20px !important;
        padding: 14px 18px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        border-radius: 50px !important;
    }

        .back-to-top i {
            font-size: 14px !important;
            font-weight: 900 !important;
            letter-spacing: 1.5px !important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
        }

            /* Make the arrow specifically bigger and bolder on mobile */
            .back-to-top i::first-letter {
                font-size: 18px !important;
                font-weight: 900 !important;
                margin-right: 2px !important;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) !important;
            }

        /* Mobile tap feedback instead of hover */
        .back-to-top:active {
            transform: translateY(-1px) !important;
            background: #155d8a !important;
            color: #ffffff !important;
        }
    /*Added August 2023 for redesigned contact page buttons*/
    .button.proceedcontact {
        background-color: #239043;
        border: 1px solid #239043;
        color: #fff;
        width: 100%;
    }

    .button.defaultcontact {
        background-color: #fff;
        border: 1px solid silver;
        color: #333;
        width: 100%;
    }


    /* Mobile optimized green buttons - inherit desktop styling but disable problematic hover */
    .button.proceed,
    .button.basket,
    .button.proceedcontact {
        border: 2px solid #1e7a36 !important;
        transition: background-color 0.2s ease, box-shadow 0.2s ease !important; /* Remove transform from transition */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        position: relative !important;
        overflow: hidden !important;
        touch-action: manipulation !important; /* Improve touch response */
    }

    /* Prevent all transforms to stop jumping */
    .button.proceed,
    .button.basket,
    .button.proceedcontact,
    .continue-payment-btn,
    .proceed-payment-btn {
        transform: none !important;
    }

    /* Override for alignCenter containers - ensure proper centering (higher specificity, placed after general rule) */
    div.alignCenter .button.proceed,
    div.alignCenter .button.basket,
    div.alignCenter .button.proceedcontact,
    div.alignCenter .continue-payment-btn,
    div.alignCenter .proceed-payment-btn {
        transform: translate(-50%, 0%) !important; /* Force centering transform */
        left: 50% !important; /* Ensure proper positioning for translate */
        width: 70% !important; /* Match alignCenter width */
        position: absolute !important; /* Match alignCenter positioning */
    }

    /* Mobile disabled basket buttons - match desktop styling */
    .button.basket.grid:disabled,
    .button.basket.disabled {
        background-color: #ccc !important;
        border-color: #ccc !important;
        cursor: not-allowed !important;
        color: #666 !important;
    }

    /* Mobile tap feedback instead of hover - no transform to prevent jumping */
    .button.proceed:active,
    .button.basket:active,
    .button.proceedcontact:active,
    .continue-payment-btn:active,
    .proceed-payment-btn:active {
        background-color: #155d2a !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
        /* Removed transform to prevent jumping */
    }

    /* Specific mobile tap feedback for payment buttons - override above rule */
    .continue-payment-btn:active,
    .proceed-payment-btn:active {
        background: linear-gradient(135deg, #2471a3, #1a5490) !important; /* Darker blue for tap feedback */
        box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
        /* Removed transform to prevent jumping */
    }

    /* Removed hover effects - mobile devices don't need hover states */

    /*Added August 2023 for redesigned contact page buttons*/

    .loader_inner p, .loader_inner a {
        color: #fff;
        font-size: 22px;
    }

    .loader_inner a {
        cursor: pointer;
        color: #fff32f;
    }

    #vatswitch {
        float: right;
        max-width: 125px;
        display: block;
        color: #FFF;
    }

        #vatswitch span, #vatswitch a {
            float: left;
        }

            #vatswitch a img {
                max-width: 30px;
            }

    #badge-ribbon {
        height: 90px;
    }

    #banners img {
        min-height: auto;
        min-width: 250px;
    }

    #Scroller .bannerDiv img {
        min-height: auto;
        min-width: 250px;
    }

    .scrollers .bannerDiv a {
        height: auto;
        width: 100%;
        display: block;
    }

    .viewAllBrands {
        line-height: 30pt;
    }

    .featprod .offerdefinedimage, .featprod .offerdefinedimagelower, .featprod .offer {
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 0px;
        right: 0;
        z-index: 1;
        pointer-events: none;
        width: 135px;
        height: 135px;
    }

    #product .thumb .offerdefinedimage, #product .thumb .offer, #product .thumb .offerdefinedimagelower {
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 75px;
        right: 0;
        z-index: 1;
        pointer-events: none;
        width: 135px;
        height: 135px;
    }

    #product .thumb .offer, .featprod .offer {
        background-image: url(/Content/images/offers_stripe_df.png);
        z-index: 1;
    }

    .featprod .offerdefinedimage, .featprod .offer {
        width: 85px;
        height: 85px;
    }

    .modal-body {
        max-height: 300px;
        min-width: 200px;
        overflow-y: auto;
    }

    .modal-content {
        background-color: #fff;
        min-height: 200px;
        min-width: 200px;
    }

        .modal-content .proceed {
            margin-left: 50px;
            float: left !important;
        }

    .modal-header {
        border: 0;
        border-radius: 0.3rem;
        height: 30px;
        width: 200px;
    }

    .mobileLi {
        position: relative;
    }

    /* Modern basket quantity badge */
    .basketQtyMobile {
        position: absolute;
        top: -2px;
        right: 0px; /* Prevent overflow beyond container */
        background: #dc3545;
        color: #ffffff;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
        border: 2px solid #ffffff;
        z-index: 10;
        min-width: 20px;
        text-align: center;
    }

        /* Handle 2-3 digit quantities */
        .basketQtyMobile[data-count="99+"],
        .basketQtyMobile:contains("99") {
            width: 24px;
            height: 20px;
            border-radius: 12px;
            font-size: 10px;
            right: 0px; /* Prevent overflow beyond container */
        }

    /* Position relative for basket item to contain the badge */
    #mobile_nav .mobileLi {
        position: relative;
    }

        /* Ensure basket quantity badge works with new layout */
        #mobile_nav .mobileLi .basketQtyMobile {
            position: absolute;
            top: -2px;
            right: 8px;
            z-index: 10;
        }


    .alignCenter {
        float: none;
        text-align: center !important;
        position: relative;
        height: 30px;
    }

        .alignCenter input, .alignCenter button {
            transform: translate(-50%, 0%);
            width: 70%;
            position: absolute;
        }

        .alignCenter button, .alignCenter input {
            font-size: 16px !important;
        }

    .signInSpan {
        float: none;
        margin-right: 0px;
        margin-bottom: 10px;
        display: block !important;
    }

    /* Ensure login button divs display as block with proper spacing */
    .login-left .inputs > div {
        display: block !important;
        float: none !important;
        clear: both;
        width: 100% !important;
    }

    /* Reduce text size of login heading in mobile */
    .login-left h2 {
        font-size: calc(1em + 2px);
    }

    /* Reduce margin bottom after forgotten password link in mobile */
    .login-left p {
        margin-bottom: 45px !important;
    }

    .login-left {
        padding: 10px 20px 0px 20px;
    }


    span.overlay {
        position: absolute;
        left: 54px;
        bottom: 51px;
        pointer-events: none;
    }

    .brandCategories .new {
        min-height: 100px;
    }

    .brands img {
        min-width: 100px;
        min-height: 100px;
        max-width: 100px;
        max-height: 100px;
        width: 100%;
        height: auto;
    }

    .link.expand {
        width: 100%;
        margin-top: 10px;
        background-repeat: no-repeat;
        background-position: right 10px center;
        display: inline-block;
        margin-bottom: 3px;
        font-size: 16px;
        font-weight: 900;
    }

    .Look {
        font-weight: bold;
        font-size: 14px;
        color: red;
        padding-left: 10px;
        text-align: left;
        margin-top: 2px;
    }

    .helplist li {
        list-style: disc inside;
        margin-bottom: 4px;
        margin-top: 16px;
    }

    .button {
        font-weight: bold;
    }

    /* Modern Mobile Filter Toggle - Match Modal Dropdown Style */
    .mobile-filter-toggle {
        background-color: #f0f9f0 !important;
        border: 2px solid #90c695 !important;
        border-radius: 8px !important;
        color: #333 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 10px 16px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.2s ease !important;
        position: relative !important;
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }


        .mobile-filter-toggle:active {
            border-color: #1d5796 !important;
            box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.15) !important;
            transform: translateY(0) !important;
        }

        .mobile-filter-toggle .filter-icon {
            font-size: 16px;
            color: #666;
            flex-shrink: 0;
        }

        .mobile-filter-toggle .filter-count {
            background: #28a745;
            color: white;
            padding: 2px 6px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 700;
            min-width: 20px;
            text-align: center;
            margin-left: auto;
        }

        .mobile-filter-toggle.has-filters {
            background-color: white !important;
            border-color: #28a745 !important;
            color: #333 !important;
        }


            .mobile-filter-toggle.has-filters .filter-icon {
                color: #28a745;
            }

    .pdfdetail {
        padding: 10px 0px 0px 0px;
    }

    .competition-scroller {
        height: 350px;
    }

    /* Back to top button mobile */
    .back-to-top {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        padding: 14px 18px !important;
        font-size: 13px !important;
        min-height: 44px !important; /* Better touch target */
        display: none; /* Initially hidden, JavaScript will show on scroll */
        z-index: 1000 !important;
        border-radius: 50px !important;
        width: auto !important;
        height: auto !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

        .back-to-top .back-to-top-icon {
            font-size: 16px !important;
            font-weight: 900 !important;
            margin-right: 2px !important;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) !important;
        }

        /* Touch feedback for back to top */
        .back-to-top:active {
            transform: translateY(-1px) !important;
            background: #155d8a !important;
            color: #ffffff !important;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
        }

    .floating-basket-summary {
        left: 10px;
        bottom: 20px;
    }

    .floating-basket-link {
        min-width: 280px;
        padding: 12px 16px;
        background: #1d5796 !important;
        border: 3px solid #f8ec1a !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        background-size: 35px !important;
        background-position: 12px center !important;
        background-repeat: no-repeat !important;
        transition: none !important;
        transform: none !important;
    }


    .floating-basket-details {
        margin-left: 55px;
        padding: 1px 0;
    }

        .floating-basket-details p {
            margin: 0 !important;
            line-height: 1.2 !important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
            display: inline !important;
        }

    .floating-basket-total {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: white !important;
        display: inline !important;
    }

    .floating-basket-items {
        font-size: 13px !important;
        color: white !important;
        font-weight: 600 !important;
        display: inline !important;
    }

    /* Mobile Floating Basket - Bottom Left */
    .mobile-floating-basket {
        position: fixed;
        bottom: 20px;
        left: 10px;
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.3s ease-in-out;
        pointer-events: none;
    }

        .mobile-floating-basket.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: all;
        }

    .mobile-basket-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: #1d5796;
        color: white;
        text-decoration: none;
        border-radius: 50px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        min-width: 190px;
        min-height: 44px;
        padding: 9px 16px;
        border: 3px solid #f8ec1a;
        font-weight: 600;
        background-repeat: no-repeat;
        background-position: 12px center;
        background-size: 24px;
        transition: none;
        transform: none;
        box-sizing: border-box;
    }


        .mobile-basket-link.has-items {
            background-image: url(/content/images/basket_full.svg);
        }

        .mobile-basket-link.empty {
            background-image: url(/content/images/basket.svg);
        }

    .mobile-basket-details {
        margin-left: 36px;
        padding: 0;
    }

        .mobile-basket-details p {
            margin: 0;
            line-height: 1.1;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }

    /*.mobile-basket-details p:first-child {
                font-size: 11px;
                font-weight: 500;
                margin-bottom: 1px;
            }*/

    .mobile-basket-total {
        font-size: 12px;
        font-weight: 700;
        color: white;
        display: inline;
    }

    .mobile-basket-items {
        font-size: 11px;
        color: white;
        font-weight: 600;
        display: inline;
    }

    .mobile-basket-count {
        position: absolute;
        top: 8px;
        right: 15px;
        background: #e74c3c;
        color: white;
        border-radius: 50%;
        min-width: 24px;
        height: 24px;
        font-size: 12px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        border: 2px solid white;
    }

    /* Hide mobile floating basket when basket count is 0 */
    .mobile-floating-basket .mobile-basket-count:empty,
    .mobile-floating-basket .mobile-basket-count[data-count="0"] {
        display: none;
    }

    /* Remove red color change on mobile floating basket tap/click */
    .floating-basket-link:active,
    .floating-basket-link:focus,
    .mobile-floating-basket a:active,
    .mobile-floating-basket a:focus,
    .mobile-floating-basket .floating-basket-link:active,
    .mobile-floating-basket .floating-basket-link:focus {
        background-color: #1d5796 !important;
        color: white !important;
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }

        /* Mobile Follow Us Section */
        .follow-us-section-mobile {
            margin-top: 10px;
            text-align: center;
        }

        .social-icons-mobile {
            display: flex;
            gap: 8px;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            overflow-x: auto;
        }

        .social-icon-mobile {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 43px;
            height: 43px;
            border-radius: 10px;
            transition: all 0.3s ease;
            text-decoration: none;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
        }

            .social-icon-mobile.facebook {
                color: #1877F2;
            }

            .social-icon-mobile.threads {
                color: #000;
            }

            .social-icon-mobile.twitter {
                color: #000;
            }

            .social-icon-mobile.youtube {
                color: #FF0000;
            }

            .social-icon-mobile.instagram {
                color: #E4405F;
            }

            .social-icon-mobile.tiktok {
                color: #000;
            }

            .social-icon-mobile img {
                width: 30px;
                height: 30px;
                transition: all 0.3s ease;
                margin-top: 0;
                display: block;
            }

        .prodlinks a {
            padding: 6px 6px;
        }

            /* Mobile Share Section */
            .share-section-mobile {
            margin-bottom: 15px;
            text-align: center;
        }

        .share-icons-mobile {
            display: flex;
            gap: 6px;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            overflow-x: auto;
        }

        .share-icon-mobile {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            transition: all 0.3s ease;
            text-decoration: none;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
        }

            .share-icon-mobile.facebook {
                color: #1877F2;
            }

            .share-icon-mobile.twitter {
                color: #000;
            }

            .share-icon-mobile.pinterest {
                color: #E60023;
            }

            .share-icon-mobile.whatsapp {
                color: #25D366;
            }

            .share-icon-mobile.linkedin {
                color: #0077B5;
            }

            .share-icon-mobile.reddit {
                color: #FF4500;
            }

            .share-icon-mobile.telegram {
                color: #0088CC;
            }

            .share-icon-mobile.email {
                color: #666;
            }

            .share-icon-mobile img {
                width: 19px;
                height: 19px;
                transition: all 0.3s ease;
                display: block;
            }

        /* AI Search Tabs - Mobile */
        .search-tabs-container {
            margin: 15px 0;
        }

        .search-tabs {
            display: flex;
            gap: 5px;
            border-bottom: 2px solid #e0e0e0;
            margin-bottom: 15px;
        }

        /* Product description paragraph spacing - mobile only */
        /* Target paragraphs from database inside description div */
        div.description p,
        div.description span p,
        .description p {
            margin-bottom: 1em !important;
            margin-top: 0.5em !important;
            line-height: 1.3 !important;
            display: block !important;
        }

        div.description p:first-child,
        div.description span p:first-child,
        .description p:first-child {
            margin-top: 0 !important;
        }

        div.description p:last-child,
        div.description span p:last-child,
        .description p:last-child {
            margin-bottom: 0 !important;
        }

        .search-tab {
            flex: 1;
            padding: 10px 12px;
            background: #f5f5f5;
            border: 2px solid #e0e0e0;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            color: #666;
            transition: all 0.3s ease;
            text-align: center;
        }

            .search-tab:hover {
                background: #e8e8e8;
                color: #333;
            }

            .search-tab.active {
                background: white;
                border-color: #4a90e2;
                color: #4a90e2;
                position: relative;
                top: 2px;
            }

        .ai-search-banner {
            font-size: 13px;
            padding: 12px;
        }

            .ai-search-banner strong {
                font-size: 14px;
            }

}

/* Very small screens - compact mode */
@media only screen and (max-width: 360px) {
    #mobile_nav {
        min-height: 58px;
        height: 58px;
        padding: 4px 0;
    }

        #mobile_nav li {
            padding: 3px 1px;
            font-size: 10px;
            min-height: 45px;
        }

            #mobile_nav li img {
                width: 26px;
                height: 26px;
                /* Prevent layout shift during loading */
                min-width: 26px;
                min-height: 26px;
            }

    .basketQtyMobile {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
}

/* Larger mobile screens - enhanced mode */
@media only screen and (min-width: 480px) {
    #mobile_nav {
        min-height: 75px;
        height: 75px;
        padding: 8px 0;
    }

        #mobile_nav li {
            padding: 6px 4px;
            margin: 2px 4px;
            font-size: 13px;
            min-height: 55px;
        }

            #mobile_nav li img {
                width: 34px;
                height: 34px;
                /* Prevent layout shift during loading */
                min-width: 34px;
                min-height: 34px;
            }

    .basketQtyMobile {
        width: 22px;
        height: 22px;
        font-size: 12px;
        top: -3px;
        right: 0px; /* Prevent overflow beyond container */
    }
}

@media only screen and (min-width: 410px) and (max-width: 767px) {

    /* Basket badge responsive adjustments */
    .basketQtyMobile {
        top: -1px;
        right: 0px; /* Prevent overflow beyond container */
    }

    .featprod .price {
        font-size: 18px;
    }
}

/************* Mobile Small ************************************************
 *     *  ****  ****  ***** *     *****      ***  *     *  ***  *     *
 **   ** *    * *   *   *   *     *         *     **   ** *   * *     *
 * *** * *    * ****    *   *     ***        ***  * *** * ***** *     *
 *     * *    * *   *   *   *     *             * *     * *   * *     *
 *     *  ****  ****  ***** ***** *****     ****  *     * *   * ***** *****
*/
/* Very small phones only */
@media only screen and (max-width: 360px) {
    #logo {
        max-width: 200px;
    }

        #logo img {
            max-width: 190px;
        }

    .featprod.grid img {
        height: 130px;
    }

    /* footer */
    #footer #social {
        width: 240px;
        padding: 10px 0 10px 0;
        text-align: center;
        margin-left: 20px;
    }

    .videowrapper {
        margin: 0; /* Removed negative margins to prevent horizontal overflow */
    }

    .featprod .price .avail {
        font-size: 10px;
    }

    .checkout-wrapper .selected button {
        background-position: right 4px center;
        background-size: 18px;
    }

    .featprod .offerdefinedimage, .featprod .offer {
        width: 85px !important;
        height: 85px !important;
    }

    #product .thumb .offerdefinedimage, #product .thumb .offer, #product .thumb .offerdefinedimagelower {
        width: 85px !important;
        height: 85px !important;
    }

    .footerlinks {
        margin: 0 10px 0 10px;
        font-size: 11pt;
        line-height: 15pt;
    }
}

@media only screen and (min-width: 321px) and (max-width: 767px) {
    /* Logo styling handled by base mobile CSS - no overrides needed */

    .featprod.grid img {
        min-height: 130px;
    }

    .checkout-wrapper .selected button {
        background-position: right 4px center;
        background-size: 18px;
    }

    #basket-content tr.item img, .checkout-wrapper #basket-content td.image img {
        max-width: 80px;
    }

    #basket-related .panel {
        width: 100%;
        height: auto !important;
        min-height: 160px;
    }

    #basket-related .button.proceed {
        display: inline-block;
        width: 25%;
        padding: 6px 1px !important;
    }

    .featprod .offerdefinedimage, .featprod .offer {
        width: 85px !important;
        height: 85px !important;
    }

    #product .thumb .offerdefinedimage, #product .thumb .offer, #product .thumb .offerdefinedimagelower {
        width: 135px !important;
        height: 135px !important;
    }
}

@media only screen and (max-width: 437px) {
    /* Logo styling handled by base mobile CSS and 360px breakpoint - no additional overrides needed */

    #basket-content tr.item img, .checkout-wrapper #basket-content td.image img {
        max-width: 80px;
    }

    #basket-related .panel {
        width: 100%;
        height: auto !important;
        min-height: 160px;
    }

    #basket-related .button.proceed {
        width: 49%;
    }

    #basket-related .button.default {
        display: block;
        margin-top: 5px;
    }

    /* Mobile-specific basket action buttons (Continue Shopping & Clear Basket) */
    #basket-content .button.default,
    #basket-content .button.warning {
        font-size: 12px;
        padding: 8px 12px;
        margin: 2px 5px 2px 0;
        min-width: auto;
        white-space: nowrap;
        display: inline-block;
        vertical-align: top;
    }

    /* Stack buttons on very small screens */
    @media (max-width: 480px) {
        #basket-content .button.default,
        #basket-content .button.warning {
            display: block;
            width: 48%;
            margin: 2px 1% 5px 0;
            text-align: center;
        }
        
        #basket-content .button.default {
            float: left;
        }
        
        #basket-content .button.warning {
            float: right;
            margin-right: 0;
        }
    }

    .featprod .offerdefinedimage, .featprod .offer {
        width: 85px;
        height: 85px;
    }

    #product .thumb .offerdefinedimage, #product .thumb .offer, #product .thumb .offerdefinedimagelower {
        width: 135px;
        height: 135px;
    }

    .footerlinks {
        margin: 0 5px 0 5px;
        font-size: 11pt;
        line-height: 16pt;
    }

}

/* Ultra-small screens: Reduce button text size for better fit */
@media only screen and (max-width: 357px) {
    /* Reduce sort wrapper gap for tighter layout */
    .sortwrapper {
        gap: 3px !important; /* Reduce from 6px to 3px */
    }

    /* Reduce select type dropdown text size by 1px */
    .product-options select,
    .product-variant select,
    .featprod select {
        font-size: calc(1em - 1px) !important; /* Reduce by 1px from current size */
    }
}

@media only screen and (min-width: 0px) and (max-width: 360px) {

    .featprod .price {
        font-size: 14px;
    }

        .featprod .price span {
            font-size: 11px;
        }

    .featprod.grid .desc {
        font-size: 12px;
        line-height: 14px;
        height: 111px;
    }
}

/* Medium mobile screens - 3 column footer layout */
@media only screen and (min-width: 480px) and (max-width: 799px) and (orientation: landscape) and (max-height: 500px) {
    /* 3 columns for medium mobile screens */
    #footer .col-1-4 {
        width: 33.33% !important;
        float: left !important;
        padding: 10px 4px; /* Balanced padding for 3 columns */
    }

    #footer .footerlinks {
        margin: 0 3px;
        font-size: 11.5pt;
        line-height: 17pt;
    }
}

/* Small mobile screens - single column footer */
@media only screen and (min-width: 0px) and (max-width: 375px) {
    .col-1-2 {
        width: 100%;
    }

    /* Single column footer for very small screens */
    #footer .col-1-4 {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-bottom: 20px;
    }

}

/* iPhone landscape and tablet portrait specific fixes */
@media only screen and (max-width: 950px) and (orientation: landscape) and (max-height: 500px) {


    /* Ensure logo is centered in landscape mode */
    .zzchristmas {
        text-align: center !important;
    }

    #logo {
        margin: 0 auto !important;
        display: inline-block !important;
    }

    /* OVERRIDE: Force proper footer layout in landscape - use 4 columns for wide screens */
    body #footer .col-1-4 {
        width: 25% !important; /* 4 columns for landscape mobile */
        float: left !important;
        max-width: 25% !important; /* Override the universal max-width */
        padding: 10px 3px !important; /* Tighter padding for 4 columns */
    }


    /* Fix transform centering that might cause overflow */
    .alignCenter input, .alignCenter button {
        transform: translate(-50%, 0%) !important;
        left: 50% !important;
        width: min(70%, 280px) !important; /* Prevent exceeding viewport */
        max-width: calc(100vw - 20px) !important;
    }

    /* Constrain absolutely positioned elements */
    .proceed-payment-btn[style*="position: absolute"] {
        max-width: calc(100vw - 40px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

@media print {

    body {
        color: #000;
    }

    #header {
        display: none;
    }

    #footer {
        display: none;
    }

    #scroller {
        display: none;
    }

    #filters {
        display: none;
    }

    .pagingwrapper {
        display: none;
    }
}