/* Minification failed. Returning unminified contents.
(4313,36): run-time error CSS1030: Expected identifier, found '.'
(4313,52): run-time error CSS1031: Expected selector, found ')'
(4313,52): run-time error CSS1025: Expected comma or open brace, found ')'
(4321,36): run-time error CSS1030: Expected identifier, found '.'
(4321,52): run-time error CSS1031: Expected selector, found ')'
(4321,52): run-time error CSS1025: Expected comma or open brace, found ')'
(4335,36): run-time error CSS1030: Expected identifier, found '.'
(4335,52): run-time error CSS1031: Expected selector, found ')'
(4335,52): run-time error CSS1025: Expected comma or open brace, found ')'
(4341,36): run-time error CSS1030: Expected identifier, found '.'
(4341,52): run-time error CSS1031: Expected selector, found ')'
(4341,52): run-time error CSS1025: Expected comma or open brace, found ')'
(8015,47): run-time error CSS1030: Expected identifier, found '.'
(8015,63): run-time error CSS1031: Expected selector, found ')'
(8015,63): run-time error CSS1025: Expected comma or open brace, found ')'
(8024,51): run-time error CSS1030: Expected identifier, found '.'
(8024,67): run-time error CSS1031: Expected selector, found ')'
(8024,67): run-time error CSS1025: Expected comma or open brace, found ')'
(8034,51): run-time error CSS1030: Expected identifier, found '.'
(8034,67): run-time error CSS1031: Expected selector, found ')'
(8034,67): run-time error CSS1025: Expected comma or open brace, found ')'
(8041,51): run-time error CSS1030: Expected identifier, found '.'
(8041,67): run-time error CSS1031: Expected selector, found ')'
(8041,67): run-time error CSS1025: Expected comma or open brace, found ')'
(10188,1): run-time error CSS1019: Unexpected token, found '}'
 */
/********* Defaults **********
 ****  ***** *****  ***  *   * *     *****
 *   * *     *     *   * *   * *       *
 *   * ***   ***   ***** *   * *       *
 *   * *     *     *   * *   * *       *
 ****  ***** *     *   *  ***  *****   *
*/

/* resets */
* {
    margin: 0;
    padding: 0;
    /* Removed outline: 0 - was breaking keyboard accessibility (WCAG 2.4.7) */
}

/* ==========================================================================
   FOCUS STYLES - Keyboard Accessibility (WCAG 2.4.7 Focus Visible)
   Using :focus-visible to show focus only for keyboard navigation,
   not mouse clicks. Orange (#ff6b00) for high visibility and consistency.
   ========================================================================== */
:focus-visible {
    outline: 3px solid #ff6b00 !important;
    outline-offset: 2px !important;
}

/* Specific focus-visible overrides for elements with outline:none in :focus rules */
.button:focus-visible,
.button.proceed:focus-visible,
.button.util:focus-visible,
.button.basket:focus-visible,
.button.proceedcontact:focus-visible,
.collect-store-btn:focus-visible,
.buy-with-card-btn:focus-visible,
.continue-payment-btn:focus-visible,
.proceed-payment-btn:focus-visible,
.change-btn:focus-visible,
#filters .btn_header_clear:focus-visible,
.enhanced-filters .btn_header_clear:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ff6b00 !important;
    outline-offset: 2px !important;
}

/* Form inputs - only show focus outline when tabbed to, not clicked */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #ff6b00 !important;
    outline-offset: 2px !important;
}

/* Remove focus outline on mouse click for form inputs */
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
input[type="radio"]:focus,
input[type="checkbox"]:focus,
input[type="text"]:focus:not(:focus-visible),
input[type="email"]:focus:not(:focus-visible),
input[type="password"]:focus:not(:focus-visible),
input[type="tel"]:focus:not(:focus-visible),
input[type="number"]:focus:not(:focus-visible),
input[type="search"]:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible),
.form-actions input:focus:not(:focus-visible),
.form-actions select:focus:not(:focus-visible),
.form-actions textarea:focus:not(:focus-visible) {
    outline: none !important;
}

/* Bootstrap form-control - remove orange outline on click */
.form-control:focus {
    outline: none !important;
}

/* Product dimension dropdowns - remove orange outline on click */
.dim:focus:not(:focus-visible),
select.dim:focus:not(:focus-visible),
.buy_box .dim:focus:not(:focus-visible),
.variant-group select:focus:not(:focus-visible) {
    outline: none !important;
}

/* Dimension dropdowns use their own blue focus styling, not orange */
.dim:focus-visible,
select.dim:focus-visible,
.buy_box .dim:focus-visible,
.variant-group select:focus-visible {
    outline: none !important;
    border: 2px solid #1d5796 !important;
    box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.15);
}

/* Category icons in homecats - use box-shadow since they already have blue borders */
#homecats a:focus-visible {
    outline: none !important;
}
#homecats a:focus-visible .link {
    border-color: #ff6b00 !important;
    box-shadow: 0 0 0 3px #ff6b00, inset 0 0 0 1px #ff6b00 !important;
    background-color: #fff8f0 !important;
}

/* Slick carousel on home page - products in featured slider */
.featured a:focus-visible,
.featured .button:focus-visible {
    outline: 3px solid #ff6b00 !important;
    outline-offset: 2px !important;
}

/* Slick slides need special handling - the carousel sets tabindex=-1 on slides */
.slick-slide .featprod a:focus-visible,
.slick-slide .featprod .button:focus-visible {
    outline: 3px solid #ff6b00 !important;
    outline-offset: -3px !important;
}

.slick-slide .featprod.grid .thumb a:focus-visible {
    outline: 3px solid #ff6b00 !important;
    outline-offset: -3px !important;
}

.slick-slide .featprod.grid .thumb a:focus-visible img {
    box-shadow: inset 0 0 0 4px #ff6b00 !important;
}

/* Product grid focus styles (non-slick) - use orange for visibility */
.featprod a:focus-visible,
.featprod .button:focus-visible,
.featprod.grid .thumb a:focus-visible {
    outline: 3px solid #ff6b00 !important;
    outline-offset: -3px !important;
}

/* Product images should show focus on their parent link */
.featprod.grid .thumb a:focus-visible img {
    box-shadow: inset 0 0 0 4px #ff6b00 !important;
}

/* Slick carousel slide focus - ensure buttons inside slides are focusable */
.slick-slide a:focus-visible,
.slick-slide button:focus-visible,
.slick-slide .button:focus-visible {
    outline: 3px solid #ff6b00 !important;
    outline-offset: -3px !important;
}

/* Fallback for browsers that don't support :focus-visible */
@supports not selector(:focus-visible) {
    :focus {
        outline: 3px solid #ff6b00;
        outline-offset: 2px;
    }
}

/* Remove default focus for mouse users in supporting browsers */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link - hidden until focused (WCAG 2.4.1 Bypass Blocks) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff6b00;
    color: #000;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    z-index: 100000;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #000;
    outline-offset: -3px;
}

*, *::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%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

            .button.proceed.link:hover {
                background-color: #2365ad;
                border-color: #2365ad;
                box-shadow: 0 4px 8px rgba(29, 87, 150, 0.3);
                cursor: pointer;
            }

            .button.proceed.link:active {
                background-color: #164178;
                border-color: #164178;
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            }

            .button.proceed.link:focus {
                box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.3);
            }

        .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;
}

/* Greens here match the dim dropdown status colours so the in-stock pill on
   the product page / modal feels like part of the same system, not like a
   button. .in-stock uses the strong InStock green (#2d8a2d); .avail-order
   uses the lighter AvailOrder green (#7bc47b). Text colours are darkened
   variants of the same hue for legibility (AA contrast on white). */
.in-stock {
    background: #e6f4e6;
    border: 1px solid #2d8a2d;
    color: #2d8a2d;
}

.avail-order {
    background: #f0f7f0;
    border: 1px solid #7bc47b;
    color: #3f7d3f;
}

/* Tighter padding for availability pills so longer express strings
   (e.g. "Order by 3:00 PM Tuesday for delivery on Wednesday") don't wrap.
   Includes the modal "Type Chosen" summary so its pill matches the detail page. */
.avail .alert-box,
.avail.alert-box,
.summary-availability .alert-box,
.summary-availability.alert-box {
    padding: 6px 12px;
    margin: 4px 0;
    font-size: 12px;
}

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

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

    .offermsg a {
        color: #fff;
    }

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

/* two-tier search autocomplete dropdown */
.tu-autocomplete-dropdown {
    background: #fff;
    border: 1px solid #1d5796;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    max-height: 75vh;
    overflow-y: auto;
    font-family: inherit;
    text-align: left; /* prevent inheritance from tablet body text-align:center */
}

.tu-ac-section-header {
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tu-ac-item {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    cursor: pointer;
    text-decoration: none;
    color: #333;
}

.tu-ac-item:hover,
.tu-ac-item.tu-ac-active {
    background: #f0f4fa;
}

.tu-ac-category-item {
    gap: 10px;
    justify-content: flex-start;
}

.tu-ac-chevron {
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.4;
}

.tu-ac-item:hover .tu-ac-chevron,
.tu-ac-item.tu-ac-active .tu-ac-chevron {
    opacity: 1;
    stroke: #1d5796;
}

.tu-ac-hidden {
    display: none !important;
}

.tu-ac-more-item {
    gap: 10px;
    color: #1d5796;
    font-size: 13px;
    font-weight: 600;
}

.tu-ac-more-item:hover {
    background: #e8eef6;
}

.tu-ac-search-icon {
    flex-shrink: 0;
}

.tu-ac-cat-text {
    font-size: 15px; /* +10% from 14px */
    line-height: 1.3;
}

.tu-ac-in {
    color: #999;
    font-weight: 400;
}

.tu-ac-divider {
    height: 1px;
    background: #eee;
    margin: 4px 14px;
}

.tu-ac-product-item {
    gap: 10px;
    padding: 5px 14px;
}

.tu-ac-thumb {
    width: 66px; /* +10% from 60px */
    height: 66px;
    object-fit: contain;
    border-radius: 0;
    border: 1px solid #1d5796;
    padding: 1px;
    flex-shrink: 0;
    background: #fff;
}

.tu-ac-product-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.tu-ac-product-name {
    font-size: 14px; /* +10% from 13px */
    line-height: 1.2;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tu-ac-product-price {
    font-size: 14px; /* +10% from 13px */
    font-weight: 700;
    color: #1d5796;
    margin-top: 2px;
}

.tu-ac-product-price span {
    font-weight: 400;
    color: #666;
    font-size: 12px;
}

@media (max-width: 767px) {
    .tu-autocomplete-dropdown {
        border-radius: 0 0 6px 6px;
    }
    .tu-ac-thumb {
        width: 48px;
        height: 48px;
    }
    .tu-ac-product-name {
        font-size: 12px;
    }
}

.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;
    }

    .dropdown_menu .column .item a:hover,
    .dropdown_menu .column-double .item a:hover,
    .dropdown_menu .doubleitem a:hover {
        color: #f30;
    }


/* 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 a:hover {
        color: #f30;
        text-decoration: none;
    }

    #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: 48px; /* 3 lines at 16px line-height (was 32px = 2 lines) */
        }

    #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;
    }

    /* H2 section headings - styled to match previous H3 appearance */
    #product h2 {
        font-size: 1.17em;
        border-top: 1px solid #ccc;
        padding-top: 15px;
        margin-top: 15px;
    }

    /* H3 sub-section headings - no border, smaller text */
    #product h3 {
        font-size: 1em;
        border: none;
    }

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

    /* Product section labels (Share, Follow Us, Click & Collect, Returns) */
    #product .product-section-label {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin: 10px 0;
    }

#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;
}

.del_box .product-section-label {
    margin-bottom: 5px;
}

#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: 26%;
    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 - Reset button defaults for accessibility */
button.qty-spinner {
    padding: 0;
    margin: 0;
    font-family: inherit;
    line-height: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.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;
    }

/* ---------- Custom dimension dropdown widget (variation selector) ---------- */
/* Replaces native <select> on the product detail page so we can right-align
   price + stock-status indicator on each option. Status colours reuse the
   existing stock-status palette from .instock / .avail / .outstock / .comingsoon.
   Status numeric mapping matches ProductModel.StockStatus:
     1 = InStock       (strong green tick)
     2 = OutStock      (red cross)
     3 = AvailOrder    (lighter green tick)
     4 = ComingSoon    (blue tick) */
.dim-select {
    position: relative;
    width: 100%;
    margin-bottom: 4px;
    font-family: inherit;
}

.dim-select-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 2px;
    font: inherit;
    font-size: 14px;
    color: #333;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.dim-select-button:hover,
.dim-select-button:focus {
    border-color: #090;
    box-shadow: 0 0 0 1px #090;
    outline: none;
}

/* Active dropdown awaiting selection — light green to invite action (matches live) */
.dim-select.empty:not(.disabled) .dim-select-button {
    background-color: #f0f9f0;
    border-color: #90c695;
}

.dim-select.disabled .dim-select-button {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    border-color: #ddd;
}

.dim-select-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dim-select-caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-left: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #239043;
    transition: transform 0.15s ease;
}

.dim-select.open .dim-select-caret {
    transform: rotate(180deg);
}

.dim-select.empty .dim-select-label {
    color: #888;
}

.dim-select-list {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 340px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #999;
    border-radius: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.dim-select.open .dim-select-list,
.dim-select.open .dim-select-panel,
.dim-select.open .dim-info-row {
    display: block;
}

.dim-select-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #333;
}

.dim-select-list li:last-child {
    border-bottom: none;
}

/* Hover is gated behind (hover: hover) so it only applies to devices with a
   real pointer (mouse/stylus).  On touch devices :hover would stick after the
   first tap until the user taps somewhere else, which feels like a stuck state.
   :active provides the brief press highlight for touch instead. */
@media (hover: hover) and (pointer: fine) {
    .dim-select-list li:hover,
    .dim-select-list li:focus {
        background: #e4efe4;
    }
}

.dim-select-list li:active {
    background: #d6e6d6;
}

.dim-select-list li .dim-name {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 12px;
}

/* Dimension head prefix (e.g. "Size:") shown in smaller muted text, since
   the prefix is contextual - the value (e.g. "17mm") is what the user is
   actually choosing.  Applied both inside list items and in the closed
   button's selected-value display. */
.dim-head {
    font-size: 10px;
    color: #666;
    font-weight: normal;
    margin-right: 4px;
}

.dim-value {
    color: inherit;
}

.dim-select-list li .dim-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
    white-space: nowrap;
}

.dim-price {
    font-weight: 600;
    color: #e31b23; /* matches .buy_box .price - the site's standard price colour */
}

.dim-price-old {
    text-decoration: line-through;
    color: #888;
    font-size: 12px;
    font-weight: normal;
}

/* Stock status icon - one shared box, coloured via mask-image + background-color.
   Using mask-image lets the same SVG asset be tinted to any colour without
   needing additional image files. */
.dim-status-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* 1 = InStock - strong green tick */
.dim-status-1 .dim-status-icon {
    mask-image: url(/Content/images/icon_tick.svg);
    -webkit-mask-image: url(/Content/images/icon_tick.svg);
    background-color: #2d8a2d;
}

/* 3 = AvailOrder - lighter green tick */
.dim-status-3 .dim-status-icon {
    mask-image: url(/Content/images/icon_tick.svg);
    -webkit-mask-image: url(/Content/images/icon_tick.svg);
    background-color: #7bc47b;
}

/* 2 = OutStock - red cross */
.dim-status-2 .dim-status-icon {
    mask-image: url(/Content/images/icon_cross.svg);
    -webkit-mask-image: url(/Content/images/icon_cross.svg);
    background-color: #d32f2f;
}

/* 4 = ComingSoon - blue tick */
.dim-status-4 .dim-status-icon {
    mask-image: url(/Content/images/icon_coming_soon.svg);
    -webkit-mask-image: url(/Content/images/icon_coming_soon.svg);
    background-color: #1976d2;
}

/* OutStock rows: explicit muted text + strikethrough price.  Previously used
   opacity: 0.7 on the whole row, but that washed out the dark green price into
   a lighter green which was visually confusing - the row read as "available but
   faded" rather than "unavailable".  Explicit grey + strikethrough reads as
   unambiguously unavailable. */
.dim-select-list li.dim-status-2 .dim-name,
.dim-select-list li.dim-status-2 .dim-head,
.dim-select-list li.dim-status-2 .dim-value {
    color: #999;
}

.dim-select-list li.dim-status-2 .dim-price {
    color: #999;
}
/* Stock status text label — replaces the coloured circle icon on all devices.
   Clearer than abstract icons since the words communicate meaning directly. */
.dim-status-label {
    display: inline;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* Hide the circle icon — the text label replaces it everywhere */
.dim-status-icon {
    display: none;
}

/* Status label colours match the icon colours */
.dim-status-1 .dim-status-label { color: #2d8a2d; }
.dim-status-3 .dim-status-label { color: #7bc47b; }
.dim-status-2 .dim-status-label { color: #d32f2f; }
.dim-status-4 .dim-status-label { color: #1976d2; }

/* Dropdown panel — wraps the optional info row + the option list.
   Takes the absolute positioning that .dim-select-list previously had. */
.dim-select-panel {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #999;
    border-radius: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* When the panel exists, the list inside it no longer needs its own positioning/border */
.dim-select-panel .dim-select-list {
    position: static;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Dimension info row — compact explanation of the dimension options.
   Content comes from tblDimHeadingGroup.Description via prcProductPage. */
/* Dimension info row — always inside a .dim-select-panel (both product page and modal).
   The panel provides absolute positioning; info row and list are normal flow inside it. */
.dim-info-row {
    padding: 10px 12px 12px;
    background: #fffde7;
    border-bottom: 1px solid #ddd;
    font-size: 11px;
    line-height: 1.5;
    color: #555;
}

/* Inside panel (product page), info row doesn't need its own outer border — panel provides it */
.dim-select-panel .dim-info-row {
    position: static;
}

/* Static info row (modal) — always visible above the dropdown, not inside it */
.dim-info-static {
    position: static;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
}

.dim-info-icon {
    color: #1976d2;
    font-size: 13px;
    margin-right: 6px;
    vertical-align: middle;
}

.dim-info-text {
    vertical-align: middle;
}

/* --------- End custom dimension dropdown widget --------- */

.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 - left alignment for desktop */
tfoot td[align="left"],
.basket tfoot td[align="left"],
#basket-content table tfoot td[align="left"] {
    text-align: left !important;
    white-space: nowrap; /* Prevent buttons from wrapping */
}

/* Legacy support for right-aligned buttons (in case other pages use it) */
tfoot td[align="right"],
.basket tfoot td[align="right"],
#basket-content table tfoot td[align="right"] {
    text-align: right !important;
    white-space: nowrap;
}

/* 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: 190px;
    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: 190px;
    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%;
        min-height: 420px;
        max-height: 90vh;
        /* overflow visible so the custom dropdown lists (position: absolute)
           extend over the footer/summary instead of being clipped */
        overflow: visible;
        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);
    }

    .basket_summary .contents,
    .basket_summary .contents a {
        color: white;
    }

/* 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;
}

/* Override focus-visible for search - form wrapper already has yellow focus style */
#search .keywords:focus-visible {
    outline: none !important;
}

#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;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.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;
    pointer-events: none;
}

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

.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;
}

/* ==========================================================================
   REDUCED MOTION - Accessibility (WCAG 2.3.3)
   Respects user's OS preference for reduced motion.
   Users with vestibular disorders may experience nausea from animations.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable specific animations */
    .skip-link {
        transition: none;
    }

    /* Disable button hover transforms */
    .button:hover,
    .button.proceed:hover,
    .button.util:hover,
    .button.basket:hover {
        transform: none !important;
    }

    /* Disable Slick carousel autoplay transitions */
    .slick-slide {
        transition: none !important;
    }

    /* Disable any smooth scrolling */
    html {
        scroll-behavior: auto;
    }
}

/* Delisted Product Redirect Styles */
.delisted-redirect-container {
    text-align: center;
    padding: 20px;
    background: #fff8e6;
    border: 1px solid #f5d67a;
    border-radius: 8px;
    margin: 10px 0;
}

.delisted-redirect-container .alert-box {
    margin-bottom: 15px;
}

.delisted-search-message {
    font-size: 16px;
    color: #333;
    margin: 10px 0;
}

.delisted-search-message #countdown {
    font-weight: bold;
    color: #1d5796;
    font-size: 18px;
}

.delisted-search-terms {
    font-size: 14px;
    color: #666;
    margin: 10px 0 20px 0;
}

.delisted-buttons,
.delisted-buttons-cancelled {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.delisted-buttons .btn,
.delisted-buttons-cancelled .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.delisted-buttons .btn-primary,
.delisted-buttons-cancelled .btn-primary {
    background-color: #1d5796;
    color: #fff;
}

.delisted-buttons .btn-primary:hover,
.delisted-buttons-cancelled .btn-primary:hover {
    background-color: #164578;
}

.delisted-buttons .btn-secondary,
.delisted-buttons-cancelled .btn-secondary {
    background-color: #6c757d;
    color: #fff;
}

.delisted-buttons .btn-secondary:hover,
.delisted-buttons-cancelled .btn-secondary:hover {
    background-color: #5a6268;
}


/********* 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 a:hover {
            color: #f30;
        }

        #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;
        }

    #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 a:hover {
        color: #f30;
    }

    #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 link buttons - maintain blue theme, not green */
        .button.proceed.link {
            border: 1px solid #1d5796 !important;
            background-color: #1d5796;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        }

            .button.proceed.link:hover {
                background-color: #2365ad !important;
                border-color: #2365ad !important;
                box-shadow: 0 4px 8px rgba(29, 87, 150, 0.3) !important;
            }

            .button.proceed.link:active {
                background-color: #164178 !important;
                border-color: #164178 !important;
                box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
            }

            .button.proceed.link:focus {
                box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.3) !important;
            }

            /* 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: 190px !important;
            height: 40px !important;
            font-size: 14px !important;
        }

        /* Tablet Collect in Store button styling */
        .collect-store-btn {
            width: 190px !important;
            height: 40px !important;
            font-size: 14px !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;
    }

    /* ==========================================================================
       iOS ZOOM PREVENTION - Form inputs minimum 16px font size
       iOS Safari auto-zooms when focusing inputs with font-size < 16px.
       ========================================================================== */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Search input - no orange outline, uses yellow form wrapper focus */
    #search .keywords:focus-visible,
    #search .keywords:focus,
    .mobile_search .keywords:focus-visible,
    .mobile_search .keywords:focus {
        outline: none !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%;
    }

    /* Search filter sidebar exception: .col-1-4 is overridden globally to 33% so product tiles
       render 3-up on tablet portrait, but the Search filter sidebar (.col-1-4.full.filter-container)
       must stay at 25% to pair correctly with .col-3-4 (75%) — otherwise 33% + 75% = 108% and the
       products container wraps below the filter, pushing the grid below the fold.
       Category pages use .col-1-5f / .col-4-5g and aren't affected. */
    .col-1-4.full.filter-container {
        width: 25%;
    }

    .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%;
    }

}

@media only screen and (min-width: 768px) and (max-width: 1023px) and (min-height: 500px), (width: 768px) and (height: 1024px) {

    /* 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 link buttons - maintain blue theme, not green */
    .button.proceed.link {
        border: 1px solid #1d5796 !important;
        background-color: #1d5796;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

        .button.proceed.link:hover {
            background-color: #2365ad !important;
            border-color: #2365ad !important;
            box-shadow: 0 4px 8px rgba(29, 87, 150, 0.3) !important;
        }

        .button.proceed.link:active {
            background-color: #164178 !important;
            border-color: #164178 !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
        }

        .button.proceed.link:focus {
            box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.3) !important;
        }

        /* 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: 190px !important;
        height: 40px !important;
        font-size: 14px !important;
    }

    /* Tablet Portrait Collect in Store button styling */
    .collect-store-btn {
        width: 190px !important;
        height: 40px !important;
        font-size: 14px !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;
    }

    /* ==========================================================================
       MOBILE DOUBLE-TAP FIX: Disable hover transforms on touch devices
       These hover transforms cause first-tap to activate hover state,
       requiring second tap to actually click the button.
       ========================================================================== */

    /* Primary action buttons - basket and proceed */
    .button.basket:hover,
    .button.proceed:hover,
    .button.proceedcontact:hover {
        transform: none !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    /* Active states still provide feedback on actual tap */
    .button.basket:active,
    .button.proceed:active,
    .button.proceedcontact:active {
        transform: none !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    }

    /* Grid buttons on product listings */
    .button.basket.grid:hover,
    .featprod .button.util.grid:hover,
    .button.util.grid:hover {
        transform: none !important;
    }

    /* Buy box quantity controls */
    .buy_box .qty:hover:not(:disabled),
    .buy_box:hover .qty-spinner,
    .buy_box .qty-spinner:hover {
        transform: none !important;
    }

    /* Basket page buttons */
    .basket-clear:hover,
    .basket-continue:hover {
        transform: none !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    /* Checkout/payment buttons */
    .collect-store-btn:hover,
    .buy-with-card-btn:hover,
    .continue-payment-btn:hover,
    .proceed-payment-btn:hover,
    .change-btn:hover {
        transform: none !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    /* Back to top button */
    .back-to-top:hover {
        transform: none !important;
    }

    /* Floating basket link */
    .floating-basket-link:hover {
        transform: none !important;
    }

    /* Social and share icons */
    .social-icon:hover,
    .share-icon:hover {
        transform: none !important;
    }

    /* Search button */
    #search button:hover {
        transform: none !important;
    }

    /* Modal basket button */
    .modal-overlay .button.basket:hover,
    .modal-overlay .button.util:hover {
        transform: none !important;
    }

    /* Variant dropdown selects */
    .variant-group select:hover:not(:disabled),
    .buy_box .dim:hover:not(:disabled),
    select.dim:hover:not(:disabled) {
        transform: none !important;
    }

    /* Global touch-action for better tap response (removes 300ms delay) */
    a, button, input[type="submit"], input[type="button"],
    .button, .filt a, .btn, [role="button"],
    .qty-spinner, .remove, .updateBasket {
        touch-action: manipulation;
    }

    /* 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;
    }

    /* Full-screen mobile filters when expanded */
    body.mobile-filters-open {
        overflow: hidden !important;
    }

    body.mobile-filters-open #mobileFilterPanel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-height: none !important;
        height: 100vh !important;
        width: 100vw !important;
        z-index: 9999 !important;
        background: #fff !important;
        /* Bottom padding reserves room for the persistent filter bar so panel content scrolls behind it cleanly. */
        padding: 15px 15px calc(70px + env(safe-area-inset-bottom, 0px)) 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-filters-open .mobile-filter-toggle {
        /* Stay at bottom in open state — same anchor as closed.
           Works because toggleMobileFilters() sets position:fixed on body when opening,
           which keeps iOS toolbar stable (iOS only toggles its toolbar on document scroll). */
        z-index: 10000 !important;
        bottom: 0 !important;
        top: auto !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 - 50% smaller */
    .basket-clear, .basket-continue {
        font-size: 8px !important; /* 50% smaller text */
        min-height: 22px !important; /* 50% smaller touch target */
        padding: 6px 8px !important; /* 50% smaller padding */
        margin: 2px !important; /* 50% smaller spacing */
        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: 3px !important; /* 50% smaller */
        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;
        }

        /* Override focus-visible for search - form wrapper already has yellow focus style */
        .mobile_search .keywords:focus-visible,
        .mobile_search .keywords:focus {
            outline: none !important;
        }

            .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;
        scroll-margin-top: 12px;
    }

        #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);
            min-height: 300px;
            max-height: 85vh;
            border-radius: 12px !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
            /* overflow visible so custom dropdown lists are not clipped */
            overflow: visible !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 */
        }

    /* Compact info row on mobile */
    .dim-info-row {
        padding: 6px 10px;
        font-size: 11px;
    }
    .dim-info-icon {
        font-size: 12px;
    }

    /* 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;
    }

    /* Reserve space for main image container to prevent CLS */
    #product .thumb .img-gallery > div:first-child {
        width: 100%;
        aspect-ratio: 1/1;
    }

    /* 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 */
    }

    /* Mobile link buttons - maintain blue theme, not green */
    .button.proceed.link {
        border: 1px solid #1d5796 !important;
        background-color: #1d5796;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

        .button.proceed.link:hover {
            background-color: #2365ad !important;
            border-color: #2365ad !important;
            box-shadow: 0 4px 8px rgba(29, 87, 150, 0.3) !important;
        }

        .button.proceed.link:active {
            background-color: #164178 !important;
            border-color: #164178 !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
        }

        .button.proceed.link:focus {
            box-shadow: 0 0 0 3px rgba(29, 87, 150, 0.3) !important;
        }

    /* 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;
    }

    /* Mobile Filter Toggle - bottom-fixed bar (Amazon mobile pattern, added 2026-04-28).
       Brand-coloured (TooledUp blue) for prominence — bold default state so users can't miss it.
       Always visible while scrolling on filter pages. has-filters state inverts to white-with-blue
       to signal "filters are applied" without losing the brand-colour identity. */
    .mobile-filter-toggle {
        background-color: #1d5796 !important;
        border: 0 !important;
        border-top: 2px solid #134172 !important;
        border-radius: 0 !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) 16px !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18) !important;
        /* Narrow transition: don't animate layout properties (fixes iOS jank) */
        transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        z-index: 1000 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }


        .mobile-filter-toggle:active {
            background-color: #134172 !important;
            transform: translateY(0) !important;
        }

        .mobile-filter-toggle .filter-icon {
            font-size: 16px;
            color: inherit;
            flex-shrink: 0;
        }

        .mobile-filter-toggle .filter-count {
            background: rgba(255, 255, 255, 0.25);
            color: #fff;
            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: #fff !important;
            border-top-color: #1d5796 !important;
            color: #1d5796 !important;
        }


            .mobile-filter-toggle.has-filters .filter-icon {
                color: #1d5796;
            }

            .mobile-filter-toggle.has-filters .filter-count {
                background: #1d5796;
                color: #fff;
            }

    .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;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

        .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;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }


    .floating-basket-details {
        margin-left: 55px;
        padding: 1px 0;
        pointer-events: none;
    }

        .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;
            pointer-events: none;
        }

    .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;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }


        .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;
        pointer-events: none;
    }

        .mobile-basket-details p {
            margin: 0;
            line-height: 1.1;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
            pointer-events: none;
        }

    /*.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;
    }

    /* ==========================================================================
       iOS ZOOM PREVENTION - Form inputs minimum 16px font size
       iOS Safari auto-zooms when focusing inputs with font-size < 16px.
       This creates a disorienting UX for mobile users.
       ========================================================================== */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Search input specifically */
    #Keywords,
    .keywords {
        font-size: 16px !important;
    }

    /* Checkout and login form inputs */
    .checkout-wrapper input,
    .checkout-wrapper select,
    .checkout-wrapper textarea,
    .login input,
    .login select,
    .login-left input,
    .login-left select {
        font-size: 16px !important;
    }

    /* Product variant dropdowns */
    .variant-group select,
    .buy_box .dim,
    select.dim {
        font-size: 16px !important;
    }

    /* Contact form inputs */
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        font-size: 16px !important;
    }
}

/* Delisted Product Redirect - Mobile Overlay */
.delisted-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
}

.delisted-overlay-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px 20px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.delisted-overlay-card .alert-box {
    margin: 0 0 15px 0;
}

.delisted-overlay-card .delisted-search-message {
    font-size: 15px;
    color: #333;
    margin: 10px 0;
}

.delisted-overlay-card .delisted-search-message #countdown {
    font-weight: bold;
    color: #1d5796;
    font-size: 18px;
}

.delisted-overlay-card .delisted-search-terms {
    font-size: 13px;
    color: #666;
    margin: 10px 0 20px 0;
    word-break: break-word;
}

.delisted-overlay-card .delisted-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.delisted-overlay-card .delisted-buttons .btn {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.delisted-overlay-card .delisted-buttons .btn-primary {
    background-color: #1d5796;
    color: #fff;
}

.delisted-overlay-card .delisted-buttons .btn-secondary {
    background-color: #6c757d;
    color: #fff;
}

/* Delisted inline container (shown after cancel) - Mobile */
.delisted-redirect-container {
    padding: 15px;
}

.delisted-redirect-container .delisted-buttons {
    flex-direction: column;
    gap: 8px;
}

.delisted-redirect-container .delisted-buttons .btn {
    width: 100%;
    padding: 12px 20px;
}

/* === MOBILE FILTER BAR PRESENT (added 2026-04-28) === */
/* When the bottom-fixed .mobile-filter-toggle bar is in the DOM, body class is added by inline script.
   These rules reserve room at the bottom and lift other floating elements above the bar so they don't overlap.
   Filter bar height is approximately 50px + safe-area-inset-bottom. */
body.has-mobile-filter-bar {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

body.has-mobile-filter-bar .mobile-floating-basket {
    bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
}

body.has-mobile-filter-bar .back-to-top {
    bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
}
/* === END MOBILE FILTER BAR PRESENT === */

@media print {

    body {
        color: #000;
    }

    #header {
        display: none;
    }

    #footer {
        display: none;
    }

    #scroller {
        display: none;
    }

    #filters {
        display: none;
    }

    .pagingwrapper {
        display: none;
    }
}