@charset "UTF-8";

/* ==========================================================================
   1. FONTS & TYPOGRAPHY (Strictly Unified)
   ========================================================================== */
@font-face {
    font-family: Helvetica, Verdana, Geneva, Tahoma, sans-serif;
    src: url('../fonts/Foco_W_Blk.woff') format("woff"), url('Foco_W_Blk.eot');
}
@font-face {
    font-family: Helvetica, Verdana, Geneva, Tahoma, sans-serif;
    src: url('../fonts/Foco_W_Lt.woff') format("woff"), url('Foco_W_Lt.eot');
}
@font-face {
    font-family: Helvetica, Verdana, Geneva, Tahoma, sans-serif;
    src: url('../fonts/Foco_W_Rg.woff') format("woff"), url('Foco_W_Rg.eot');
}
@font-face {
    font-family: "Ionicons";
    src: url("../fonts/ionicons.eot?v=2.0.1");
    src: url("../fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), 
         url("../fonts/ionicons.ttf?v=2.0.1") format("truetype"), 
         url("../fonts/ionicons.woff?v=2.0.1") format("woff"), 
         url("../fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* Force ALL text elements to use the exact same font stack */
html, body, button, input, select, textarea, code, kbd, pre, samp,
.fontest1, .fontest2, .fontest3 {
    font-family: Helvetica, Verdana, Geneva, Tahoma, sans-serif !important;
}

.ion-android-menu:before, .ion-ios-plus-empty:before {
    display: inline-block;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ion-android-menu:before { content: "\f394" }
.ion-ios-plus-empty:before { content: "\f489" }

/* ==========================================================================
   2. RESET & GLOBAL STYLES
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
html {
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    color: #000;
    font-size: .85em;
    line-height: 1.4em;
    font-weight: normal;
    background-color: #000;
}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
audio, canvas, progress, video { display: inline-block; vertical-align: baseline }
audio:not([controls]) { display: none; height: 0 }
[hidden], template { display: none }
a, a:visited, a:active { color: #000000; text-decoration: none; background-color: transparent }
a:hover { text-decoration: underline; outline: 0; color: #363A3C }
abbr[title] { border-bottom: 1px dotted }
b, strong { font-weight: bold }
dfn { font-style: italic }
mark { background: #ff0; color: #000 }
small { font-size: 80% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sup { top: -.5em }
sub { bottom: -.25em }
img { border: 0; max-width: 100%; height: auto; width: auto\9; }
svg:not(:root) { overflow: hidden }
figure { margin: 1em 40px }
hr { box-sizing: content-box; height: 0 }
pre, textarea { overflow: auto }
button, input, optgroup, select, textarea { color: inherit; margin: 0 }
button { overflow: visible }
button, select { text-transform: none }
button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer }
button[disabled], html input[disabled] { cursor: default }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 }
input { line-height: normal }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0 }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto }
input[type="search"] { box-sizing: content-box }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em 0.625em 0.75em }
legend { border: 0; padding: 0 }
optgroup { font-weight: bold }
table { border-collapse: collapse; border-spacing: 0 }
td, th { padding: 0 }
dl, menu, ol, ul { margin: 1em 0 }
dd { margin: 0 0 0 40px }
menu, ol, ul { padding: 0 0 0 40px }
nav ul, nav ol { list-style: none; list-style-image: none; padding: 0; margin: 0 }
p { margin: 0 0 1.5em }

h1, h2, h3, h4, h5, h6 {
    font-size: 18px;
    font-weight: normal;
    line-height: 1.5em;
    margin: .15em 0 20px;
    padding: 0;
    color: #000;
}
h1 { font-size: 1.5em; margin: .67em 0 }
h2 { font-size: 1.25em; margin: .83em 0 }
h3 { font-size: 1.17em; margin: 1em 0 }
h4 { font-size: 1em; margin: 1.33em 0 }
h5 { font-size: .83em; margin: 1.67em 0 }
h6 { font-size: .67em; margin: 2.33em 0 }

/* ==========================================================================
   3. UNIVERSAL COPPER BUTTONS & CTAs (Mobile Fixed)
   ========================================================================== */
/* We target every possible button class to ensure 100% uniformity */
.buttonlink, .buttonlist, .buttongrn, .butdeepblue, .butred, .add-to-cart-btn, .buttonlinksearch,
.buttonlink a, .buttonlink:visited, .buttonlink:active,
.buttonlist a, .buttonlist:visited, .buttonlist:active,
.buttongrn a, .buttongrn:visited, .buttongrn:active {
    appearance: none;
    -webkit-appearance: none; /* Prevents iPhones from rendering buttons differently */
    background: #B87333 !important;
    color: #000000 !important;
    border: none !important;
    padding: 14px 30px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none !important;
    display: inline-block;
    margin: 2px;
    text-align: center;
    transition: all 0.3s ease;
}

/* Unified Hover State */
.buttonlink:hover, .buttonlist:hover, .buttongrn:hover, .butdeepblue:hover, .butred:hover, .add-to-cart-btn:hover, .buttonlinksearch:hover {
    background: #a06840 !important;
    color: #000000 !important;
    text-decoration: none !important;
}

/* Alternate Outline/Small Buttons */
.buttonlinkw, .buttonlinkw a, .buttonlinkw:visited, .buttonlinkw:active { 
    display: block; float: right; margin: 5px 10px 10px 0; padding: 10px; text-decoration: none; border: 1px solid #B87333; color: #B87333; 
}
.buttonlinkw:hover { color: #000; background: #B87333; text-decoration: none; }

.mini_button { 
    appearance: none; -webkit-appearance: none;
    margin: 0; padding: 5px 15px; outline: none; cursor: pointer; text-align: center; text-decoration: none; 
    color: #000; border: solid 1px #B87333; border-right: 0; background-color: #B87333; 
    border-top-right-radius: 5px; border-bottom-right-radius: 5px; transition: background 0.3s ease;
}
.mini_button:hover { background-color: #a06840; border-color: #a06840; }
.mini_button::-moz-focus-inner { border: 0 }

/* Old "Green Banner" converted entirely to Copper */
.hgrenban { background-color: #B87333; text-align: center; padding: 20px; color: #000; margin-bottom: 20px; font-size: 16px; font-weight: bold; }

/* ==========================================================================
   4. LAYOUT & GRID
   ========================================================================== */
.clearfix:before, .clearfix:after, .row:before, .row:after { content: " "; display: table }
.clearfix:after, .container:after, .row:after { clear: both }

.wrapper { width: 100%; margin: 0 auto }
.wrapper_internal { margin: 0 auto }

#content { margin: 10px 0; padding-top: 20px; font-size: 16px; }

#main_topheader_wrap { overflow: auto; clear: both; background-color: #000; color: #fff; }
#main_header_wrap { clear: both; background: #fff; overflow: hidden }
#main_banner_wrap { overflow: auto; clear: both; background-color: #fff; }
#main_body_wrap { clear: both; background: #fff }
#tickt_wrap { background-color: #fff }
#main_footer_wrap { overflow: auto; clear: both; color: #FFF }
#main_footertop_wrap { background: #9B9FA1; color: #FFF; padding: 0px }
#internal_header_wrap { padding-top: 20px }
#internal_banner_wrap { width: 90%; overflow: auto; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto }
#internal_body_wrap { min-height: 350px; background-color: #fff; padding-right: 5px; padding-left: 5px }
#internal_footer_wrap { overflow: auto; padding: 20px; background-color: #000; color: #FFf; font-size: 12px }

.navwrap, #main_otnav_wrap { background-color: #000; width: 100%; max-width: 1728px; margin: 0 auto; height: auto }
.navwrap { border-top: 1px solid #000; }

.cols_1, .cols_2, .cols_2_10, .cols_2_20, .cols_2_30, .cols_2_40, .cols_2_60, .cols_2_70, .cols_2_80, .cols_2_90, 
.cols_3_20, .cols_3, .cols_3_30, .cols_3_60, .cols_3_40, .cols_4, .cols_5, .cols_6 {
    margin-bottom: 5px; position: relative; min-height: 1px; padding-left: 5px; padding-right: 5px; box-sizing: border-box; transition: .5s;
}

/* ==========================================================================
   5. NAVIGATION & HEADER
   ========================================================================== */
.rightnav { display: flex; justify-content: flex-end; flex-direction: row; margin: 0; list-style: none; }
.rightnav li a { color: #fff; font-weight: bold; padding: 5px 15px; display: inline-block; text-decoration: none; }

.topbasket {
    background-color: #000; padding: 8px 15px; display: flex; flex-direction: row;
    align-items: center; margin-left: 10px; box-sizing: content-box; border-radius: 3px;
}
.topbasket a { color: #fff; font-weight: bold; }
.basketreddot { border-radius: 50%; background-color: #C10000; width: 10px; height: 10px; z-index: 1000; position: absolute; margin-left: 30px }

#topnavsub { width: 100%; display: inline-block; }
#menu-main-navigation-sub { display: block }

.top-menu-sub, .top-menu-sub * { margin: 0; padding: 0; list-style: none; background-color: black; }
.top-menu-sub ul { position: absolute; display: none }
.top-menu ul-sub li { width: 100% }
.top-menu-sub li { float: left; position: relative; margin-left: 1px }
.top-menu-sub a { display: block; position: relative; text-decoration: none }
.top-menu-sub li a { margin: 0; padding: 20px 20px; height: 100px; background: #9B9FA1; color: #fff; text-align: center; padding-top: 10px }
.top-menu-sub li img { margin-bottom: 10px }
.top-menu-sub li:hover > a { color: #fff; background-color: #363A3C }

.menu-container { margin: 0 auto; background: none; float: right }
.menu-mobile { display: none; padding: 20px; cursor: pointer }
.menu-mobile:after {
    content: "\f394"; font-family: "Ionicons"; font-size: 2.5rem; padding: 0; float: right;
    position: relative; top: 50%; transform: translateY(-25%);
}
.menu-dropdown-icon:before { content: "\f489"; font-family: "Ionicons"; display: none; cursor: pointer; float: right; padding: 1.5em 2em; background: #fff; color: #333 }
.menu > ul { margin: 0 auto; width: 100%; list-style: none; padding: 0; box-sizing: border-box }
.menu > ul:before, .menu > ul:after { content: ""; display: table }
.menu > ul:after { clear: both }
.menu > ul > li { float: left; padding: 0; margin: 0; }

.menubackground, .menubackground:hover, .menubackground-sub,
.menu-one, .menu-two, .menu-three, .menu-four, .menu-five, .menu-six,
.menu-one:hover, .menu-two:hover, .menu-three:hover, .menu-four:hover, .menu-five:hover, .menu-six:hover,
.menu-one-sub, .menu-two-sub, .menu-three-sub, .menu-four-sub, .menu-five-sub, .menu-six-sub {
    background-color: #000;
}

.menu > ul > li a { text-decoration: none; padding: 5px 5px; display: block; color: #fff }
.menu .ovalshape { padding: 5px 10px; color: #fff; }
.menu .ovalshape:hover { background-color: #FFFFFF; color: #000000; border-radius: 18px; }
.menu > ul > li > ul {
    display: none; width: 90%; color: #fff; padding: 20px; position: absolute; z-index: 99;
    left: 0; right: 0; margin: 0 auto; list-style: none; box-sizing: border-box; text-align: left; max-width: 1800px;
}
.menu > ul > li > ul:before, .menu > ul > li > ul:after { content: ""; display: table }
.menu > ul > li > ul:after { clear: both }
.menu > ul > li > ul > li { margin: 0; padding-bottom: 0; list-style: none; width: 16.66666%; background: none; float: left }
.menu > ul > li > ul > li a { color: #fff; padding: .2em 0; width: 95%; display: block; border-bottom: 1px solid #fff; font-weight: bold }
.menu > ul > li > ul > li > ul { display: block; padding: 0; margin: 10px 0 0; list-style: none; box-sizing: border-box }
.menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after { content: ""; display: table }
.menu > ul > li > ul > li > ul:after { clear: both }
.menu > ul > li > ul > li > ul > li { float: left; width: 100%; padding: 0 0; margin: 0 }
.menu > ul > li > ul > li > ul > li a:hover { color: #EEE }
.menu > ul > li > ul > li > ul > li a { border: 0; font-weight: normal; min-height: 0 }
.menu > ul > li > ul.normal-sub { width: 222px; left: auto; right: auto; padding: 10px 10px }
.menu > ul > li > ul.normal-sub > li { width: 100% }
.menu > ul > li > ul.normal-sub > li a { border: 0; padding: 1em 0 }

/* ==========================================================================
   6. FORMS & SEARCH
   ========================================================================== */
.minsrch { width: 180px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('../design-images/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; transition: width 0.4s ease-in-out; appearance: none; -webkit-appearance: none; }
.minsrch:focus { width: 100% }
.gosearch { background: url("../design-images/search.png") no-repeat; border: none; width: 30px; height: 30px; margin-left: 5px }
#min_search_wrp { text-align: center; margin-bottom: 15px }

.form_cell { padding: 2px; width: 100% }
.form_text, .form_text_cart { appearance: none; -webkit-appearance: none; width: 100%; padding: 12px 15px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; transition: all 0.3s ease; box-sizing: border-box; background: #fafafa; }
.form_text:focus, .form_text_cart:focus { border-color: #B87333; background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.15); }
.form_tick_box { margin-bottom: 5px; margin-top: 10px; padding: 5px 5px; border-radius: 5px; border: 1px solid #363A3C; color: #999 }
.form_textsign { appearance: none; -webkit-appearance: none; margin-bottom: 5px; margin-top: 5px; padding: 10px 10px; border-radius: 15px; border: 1px solid #7C7E79; color: #fff; float: left; background-color: #9B9FA1 }
.form_textsign::placeholder, .form_textsign:-ms-input-placeholder, .form_textsign::-ms-input-placeholder { color: #fff; opacity: 1 }

.stext { appearance: none; -webkit-appearance: none; margin: 0; padding: 5px 15px; border-right: 0 solid #3A3E2C; border-top-left-radius: 5px; border-bottom-left-radius: 5px; width: 60%; color: #999; border-top: 1px solid #3A3E2C; border-bottom: 1px solid #3A3E2C; border-left: 1px solid #3A3E2C }

/* ==========================================================================
   7. BRANDED ALERT BOXES
   ========================================================================== */
.alert_msg {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #B87333; 
    font-weight: 500;
    position: relative;
    opacity: 1;
    transition: opacity 0.6s;
}
.alert_msg.alert_success { background-color: #fffaf5; border-color: #B87333; color: #B87333; }
.alert_msg.alert_warning { background-color: #fff1f2; border-color: #fda4af; color: #9f1239; }
.closebtn_alrt { margin-left: 15px; color: currentColor; font-weight: bold; float: right; font-size: 20px; line-height: 20px; cursor: pointer; transition: .3s; }
.closebtn_alrt:hover { color: #000; }
.alert_msg.alert_success a { color: #B87333; text-decoration: underline; font-weight: bold; }

/* ==========================================================================
   8. MODERN FILTER SYSTEM (Copper Accents & Transparent Container)
   ========================================================================== */
:root {
    --filter-bg: transparent;       
    --filter-base-text: #000000;    
    --filter-btn-bg: #B87333;       
    --filter-btn-text: #000000;     
    --filter-btn-hover: #a06840;    
    --filter-accent: #000000;       
    --filter-radius: 8px;           
}

aside { margin: 20px 0 }
.asideleft .side_filter, 
.asideleft { background-color: var(--filter-bg); color: var(--filter-base-text); padding: 10px 0; border-radius: var(--filter-radius); box-sizing: border-box; }
.asideleft h2 { color: var(--filter-base-text); font-size: 1.2rem; margin-top: 0; margin-bottom: 20px; font-weight: 600; }

#secondary-navigation { margin-bottom: 20px }
#secondary-navigation ul { margin: 0; padding: 0 }
#secondary-navigation ul li a {
    display: block;
    background-color: var(--filter-btn-bg);
    color: var(--filter-btn-text);
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: var(--filter-radius);
    text-decoration: none;
    border: 3px solid transparent;
    transition: all 0.15s ease;
    width: 50%;
    box-sizing: border-box;
}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a {
    background-color: var(--filter-btn-hover);
    color: var(--filter-accent);
    border-color: var(--filter-accent);
}

.collapsible {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--filter-btn-bg);
    color: var(--filter-btn-text);
    cursor: pointer;
    padding: 12px 16px;
    width: 50%;
    box-sizing: border-box;
    text-align: left;
    outline: none;
    font-weight: normal; 
    border-radius: var(--filter-radius);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 3px solid transparent;
    transition: all 0.15s ease;
}
.collapsible:hover, 
.collapsible.active { background-color: var(--filter-btn-hover); color: var(--filter-accent); border-color: var(--filter-accent); }
.collapsible::after { content: '\002B'; color: inherit; font-weight: bold; font-size: 1.2rem; }
.collapsible.active::after { content: '\2212'; }

.filter_set { display: none; padding: 5px 15px 15px 15px; background-color: transparent; animation: fadein 0.3s ease-in-out; }
@keyframes fadein {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.filter_item { display: flex; align-items: center; cursor: pointer; margin-bottom: 12px; font-size: 0.95rem; transition: color 0.2s, font-weight 0.2s; color: var(--filter-base-text); }
.filter_item:hover { font-weight: bold; color: var(--filter-btn-bg); }
.filter_item input[type="checkbox"] { accent-color: var(--filter-btn-bg); width: 18px; height: 18px; margin-right: 12px; cursor: pointer; border: 1px solid #000000; }

.selected-group { margin-bottom: 15px; }
.selected-group strong { color: var(--filter-base-text) !important; }

.yselshow a {
    display: inline-flex;
    align-items: center;
    background-color: var(--filter-btn-bg);
    color: var(--filter-btn-text);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none;
    margin: 5px 5px 5px 0;
    transition: all 0.15s ease;
    border: 2px solid transparent;
}
.yselshow a:hover { background-color: var(--filter-btn-hover); color: var(--filter-accent); border-color: var(--filter-accent); }
.delxy { margin-left: 8px; font-weight: bold; font-size: 1.1rem; line-height: 1; }
.clearall a { display: block; text-align: center; color: var(--filter-base-text); text-decoration: underline; margin-bottom: 20px; font-weight: bold; transition: color 0.2s; }
.clearall a:hover { color: var(--filter-btn-bg); }

/* ==========================================================================
   9. CART PROGRESS STEPS
   ========================================================================== */
.cartheader { background: transparent; color: #333; text-align: center; padding: 10px; margin-bottom: 30px; }
.cartheaderwr { max-width: 450px; margin-right: auto; margin-left: auto; text-align: center }
.cbasew { text-align: center }



.circleBase {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 26px;
    font-weight: bold;
    background: #f8f8f8;
    border: 2px solid #e2e8f0;
    color: #94a3b8;
    
    /* Flexbox handles the perfect centering */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* REMOVED: padding-top */
    /* REMOVED: line-height */
}




.cbaseon { background: #B87333; color: #000; border: 2px solid #B87333; }
.circleBasett { font-weight: 600; color: #475569; margin-top: 5px; }

/* ==========================================================================
   10. PRODUCT & GENERAL UI COMPONENTS
   ========================================================================== */
.avstar { margin-top: 30px; max-width: 400px }
.avstartp { padding-top: 7px }
.hgrybox { background-color: #9B9FA1; padding: 10px; color: #000 }
.gryin { word-wrap: break-word }
.betcont { float: right; font-size: 24px; margin-right: 40px; margin-bottom: 40px }
.techbox { background-color: #7C7E79; color: #fff }
.techbox h2 { color: #fff }
.datagalthumb { border: 1px solid #ccc }
.prodmessage { padding: 10px; background-color: #F3F3F3; margin-top: 10px; margin-bottom: 10px; border: 1px dotted #666 }
.brdcrmm { padding: 10px; margin-bottom: 25px; font-size: 12px; }
.nrditem { margin-right: 5px }
.lprtspace { width: 100px; display: inline-block; font-weight: bold; }
.listwrp { padding: 10px; border: 1px solid #CCC; font-weight: bold; }
.listprott { min-height: 80px; padding: 10px; color: #000; margin-bottom: 10px; background-color: transparent !important; }
.seclistmin { min-height: 20px }
.listprott a, .listprott:visited, .listprott:active { color: #000; font-size: 16px; font-weight: bold; }
.listprott a:hover { color: #000; text-decoration: none }
.section-imagewrapper { background-color: #f3f3f3; width: 275px; height: 275px; padding: 10px; display: flex; align-content: center; justify-content: center; align-items: center; }
.lpr { font-weight: bold }

.votewwrap { margin-top: 15px; margin-bottom: 15px }
.votewhite { background: #fff; border: 1 solid #000; color: #000; text-decoration: none; margin-top: 5px; margin-right: 10px; margin-bottom: 10px; margin-left: 0; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px }
.votewhite:hover { color: #fff; background: #000; text-decoration: none }
.myminh620 { color: #fff }
.lstaddwrp { margin-top: 10px; float: left }
.lstaddwrpdetail { margin-top: 10px; float: left; background-color: rgb(243 244 246); border: solid 1px rgb(209 213 219); border-radius: 7px; margin-right: 10px; }
.qtywhite { color: #FFF }
.lstaddbtdetail { padding: 10px; color: #000; }
.lstaddbtldetail { padding: 10px; border: 0 solid; border-top-left-radius: 25px; border-bottom-left-radius: 25px }
.lstaddbtrdetail { padding: 10px; border: 0 solid; border-top-right-radius: 25px; border-bottom-right-radius: 25px }
.listblack { background-color: #000 }
.signupemail { padding: 10px; margin-right: 10px; border-radius: 15px }
.lstaddbt { padding: 10px; color: #FFF; border: 1px solid }
.lstaddbtr { padding: 10px; border: 0 solid; margin-right: 10px; border-top-right-radius: 25px; border-bottom-right-radius: 25px }
.lstaddbtl { padding: 10px; border: 0 solid; border-top-left-radius: 25px; border-bottom-left-radius: 25px }
.lstqty { padding: 9px; max-width: 100px; border: none; text-align: center; }
.lstbadd, .lstbadd a, .lstbadd:visited, .lstbadd:active, .lstbadd:hover { margin-top: 10px; border-radius: 7px; }
.lstspace { margin-top: 10px }
.main_table { border: 0; width: 100% }
.main_table td { padding: 5px }
.cell-align-left { text-align: left }
.cell-align-right { text-align: right }
.cell-align-center { text-align: center }

iframe, object, embed { max-width: 100% !important; min-height: 100px; border: 0 }
#logo_wrapper { text-align: center; max-width: 100%; padding-bottom: 20px }
#main_banner, #page-header { background: #f3f3f3; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; padding: 20px 0 }
#main_banner h1 { line-height: 1.2em; margin-top: 0; margin-bottom: 10px }
#internal_banner { width: 100%; padding-bottom: 29.1667%; background: #5E634C; background: url("../images/banner.jpg") no-repeat center center; background-size: cover; overflow: hidden }
#internal_banner .slogantext { margin-top: 3%; float: right; position: relative; width: 100%; text-align: right; color: #000; font-weight: lighter; font-size: .93em; padding: 3%; background: rgba(255, 255, 255, 0.6); z-index: 2 }

.img_box_frame { box-shadow: 0 0 10px #AAA; border: 10px solid #FFF; margin-bottom: 10px }
.img_box_frame:hover { box-shadow: 0 0 10px #333; border: 10px solid #FFF }
.img_box_round { padding: 3px; border: 1px solid #363A3C; border-radius: 10px; }
.img_box_square { padding: 3px; border: 1px solid #363A3C }

.align-left-top { text-align: left; vertical-align: top }
.align-right-top { text-align: right; vertical-align: top }
.align-vtop { vertical-align: top }
.align-vcenter { vertical-align: middle }
.table-cell-20 { width: 20% }
.table-cell-80 { width: 80% }
.right-float, .left-float { float: none; padding: 10px }

.addressconf { margin-top: 10px; margin-bottom: 10px; border-top: 1px solid #333; border-bottom: 1px solid #333; padding-top: 20px; padding-bottom: 20px }
.proddetgrybob { color: #fff; background-color: #9B9FA1; text-align: center; padding: 20px; min-height: 120px }
.prodfreed { font-size: 18px }
.flexslider { display: none }
.side_section { margin-top: 10px; margin-bottom: 10px }
.linkwhite, .linkwhite a, .linkwhite a:visited, .linkwhite a:active { color: #fff }
.variantrel { margin-top: 20px; max-width: 300px }
.resellersseplin { border-bottom: 1px solid #000; margin-bottom: 15px }

footer { clear: both; margin-bottom: 10px }
#footer-navigation ul, .footer-navigationmain ul { margin: 0; padding: 0 }
#footer-navigation li, .footer-navigationmain li { margin: 2px 5px 2px 0 }
#footer-navigation ul li a, .footer-navigationmain ul li a { display: block; padding: 5px 5px 5px 0 }
#footerlink { color: #fff; padding-bottom: 10px }
.navftlnk a, .navftlnk:link, .navftlnk:visited, .navftlnk:active, .navftlnk:hover { color: #FFF; font-size: 12px; text-decoration: none }
.navftlnk:hover { text-decoration: none; color: #A4A6AC }
#attribution { padding-top: 10px; color: #FFF; font-size: 11px }
#attribution a, #attribution:link, #attribution:visited, #attribution:active, #attribution:hover { color: #FFF; font-size: 11px }
#attribution:hover { text-decoration: none; color: #FFF }

.hidesmall { display: none }
.hidesmallother { visibility: hidden; display: none !important }
.footer_title { color: #fff; font-size: 14px; margin-bottom: 15px; margin-top: 15px }
#main_footer_wrap .cols_4 { padding-right: 20px }

/* Image Effects */
.img_effect_container { position: relative }
.img_effect_img { opacity: 1; display: block; height: auto; transition: .5s ease; backface-visibility: hidden; width: 100% }
.img_effect_overlay { backface-visibility: hidden; transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); word-wrap: break-word; text-align: center }
.img_effect_container:hover .img_effect_img { opacity: .3 }
.img_effect_container:hover .img_effect_overlay { opacity: 1 }
.img_effect_txt { backface-visibility: hidden; background-color: #000; color: #fff; padding: 10px }

#gototopbtn { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; border: none; outline: none; background-color: #520057; color: white; cursor: pointer; padding: 15px; border-radius: 50% }
#gototopbtn:hover { background-color: #555 }

.ham_container { display: inline-block; cursor: pointer }
#ham_wrap { float: left }
#ham_txt { margin-top: 0; margin-left: 30px; font-size: 16px }
.ham_bar1, .ham_bar2, .ham_bar3 { width: 25px; height: 3px; background-color: #fff; margin: 3px 0; transition: .4s }
.ham_change .ham_bar1 { transform: rotate(-45deg) translate(-2px, 6px) }
.ham_change .ham_bar2 { opacity: 0 }
.ham_change .ham_bar3 { transform: rotate(45deg) translate(-3px, -6px) }

a.kc-skip-main { left: -999px; position: absolute; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: -999 }
a.kc-skip-main:focus, a.kc-skip-main:active { color: #fff; background-color: #000; left: 0; top: auto; width: 32%; height: auto; overflow: auto; margin: 10px 35%; padding: 15px; border-radius: 15px; border: 2px solid yellow; text-align: center; z-index: 999 }

.social_wrap { padding-bottom: 10px }
.social_main_links { float: left; margin: 5px }
.sideimagegroup { padding-top: 10px }

.news-print-featured img { width: 100% }
.news-print-featured, .news-print-featured-small { width: 100%; margin-bottom: 20px }
.news-print-featured a, .news-print-featured-small a { position: relative; display: block; color: #fff }
.featured-posts-title { color: #fff }
.featured-posts-text-wrap { position: absolute; top: 20px; bottom: 20px; left: 20px; right: 20px; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center }
.featured-posts-text { background: rgba(0, 0, 0, 0.4); padding: 5px }
.news-print-featured-cols .featured-posts-by { text-align: center }
.news-print-featured-small img, .news-print-featured-cols img { width: 100%; display: block }
.news-print-featured h3, .news-print-featured-small h3, .news-print-featured-cols h3 { font-size: 16px }
.news-print-featured-cols h3 { color: #000; text-align: center }
.featured-posts-by { font-style: italic; font-size: 14px; margin-top: 10px; margin-bottom: 10px }
.news-print-featured-wrap { padding-left: 5px; padding-right: 5px; margin-bottom: 20px }

.alter-card-wrap { padding: 0; margin: 20px; vertical-align: middle }
.alter-card-img { width: 100% }
.alter-card-wrap:nth-of-type(even) { background: #fff }
.alter-card-wrap:nth-of-type(odd) { background: #ededed }
.alter-card-img img { width: 100% }
.alter-card-txt { padding: 30px }
.tartan-wrap:nth-of-type(even), .tartan-wrap:nth-of-type(odd) { background: none }

.contsubnavtitle { border-bottom: 1px solid #666; margin-bottom: 20px; padding-bottom: 10px; font-size: 120%; font-weight: bold; padding-top: 20px }
#sub_pages_navigation { margin-bottom: 20px }
#sub_pages_navigation ul { margin: 0; padding: 0 }
#sub_pages_navigation ul li a { display: block; margin: 2px 0; padding: 10px; text-decoration: none; color: #666; border-left: 5px solid #666 }
#sub_pages_navigation ul li a:hover, #sub_pages_navigation ul li.current a { color: #999; border-left: 5px solid #999 }

.nav-next:after { content: "\276F"; padding-left: 5px }
.nav-prev:before { content: "\276E"; padding-right: 5px }
.nav-prevnext { margin-top: 20px; margin-bottom: 50px }
.nav-next, .nav-prev { text-decoration: none; transition: .2s all ease-in-out; display: block; margin-top: 10px; margin-bottom: 10px }

.infoblack { background-color: #000; color: #fff }
.infoblack h2 { color: #fff }
.gray { background-color: rgb(243 244 246); }
.black, .gold, .green, .army, .dblue, .dpurp, .isWyellow { background-color: #000 }
.isred { background-color: #c00 }
.tabtitledown { color: #fff; font-size: 16px }
.toptabgroup { margin-bottom: 40px; margin-top: 40px }
.qty_black, .qty_gold, .qty_Wyellow, .qty_green, .qty_army, .qty_dblue, .qty_dpurp { border: 1px solid #000; }
.qty_isred { border: 1px solid #c00 }
.ordwrp { margin-top: 25px; margin-bottom: 10px; font-size: 12px }
.ordred { color: #900 }
.askwrp { margin-top: 30px; margin-bottom: 10px }

.faqaccbut { appearance: none; -webkit-appearance: none; color: #444; background: transparent; cursor: pointer; padding: 18px; border: none; text-align: left; outline: none; font-size: 15px; transition: .1s; margin-bottom: 5px; border-bottom: 1px solid #ccc }
.faqaccbut:after { content: '\002B'; color: #777; font-weight: bold; float: left; margin-right: 5px }
.faqaccact:after { content: "\2212" }
.faqaccpan { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.1s ease-out }
.faqaccpan p { margin-top: 1em; margin-bottom: 1em }

.revspace { margin-bottom: 10px; margin-top: 10px }
.tabdetailin { background-color: #000 }
.tabsubline { padding-left: 0; padding-right: 0; border-left: 1px solid #FFF }

.askmodin, .tellmodin, .reviewmodin { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0, 0, 0, 0.6) }
.tellmodin-content, .askmodin-content, .reviewmodin-content { background-color: #fefefe; margin: 5% auto; border: 1px solid #888; width: 80%; max-width: 500px }
.modclose { position: absolute; right: 35px; top: 15px; font-size: 40px; font-weight: bold; color: #f1f1f1 }
.modclose:hover, .modclose:focus { color: #fff; cursor: pointer }
.askmdi { padding: 10px }
#askmsg { background-color: #EAEAEA; margin: 5px; padding: 10px; width: 100% }

.tab { overflow: hidden; border-bottom: 1px solid #ccc }
.tab button { appearance: none; -webkit-appearance: none; background: transparent; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; color: #fff; width: 100%; transition: background 0.3s; }
.tab button:hover, .tab button.active { background-color: #363A3C }
.tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none }

.shwtable { display: block; text-align: center }
.bloglist-wrp { margin-bottom: 20px; padding-bottom: 30px; padding-top: 10px; border-bottom: 1px dotted #666 }
.blogtitle { margin: 5px 0 10px }
.blogdate, .blogdatedetail { margin: 0 0 10px }
.blogbread, .blog-d-image { margin-bottom: 10px }
.blogauthdetail { border-bottom: 1px solid #666; margin-bottom: 20px; margin-top: 20px; padding-bottom: 10px; font-size: 120%; font-weight: bold }
.blogtopicwrap { padding: 10px }
.blogtopictitle { border-bottom: 1px solid #666; margin-bottom: 20px; padding-bottom: 10px; font-size: 120%; font-weight: bold; padding-top: 20px }

#blogtopic-navigation { margin-bottom: 20px }
#blogtopic-navigation ul { margin: 0; padding: 0 }
#blogtopic-navigation ul li a { display: block; margin: 2px 0; padding: 10px; text-decoration: none; color: #666; border-left: 5px solid #666 }
#blogtopic-navigation ul li a:hover, #secondary-blogtopic ul li.current a { color: #999; border-left: 5px solid #999 }

.blogsn_wrap { text-align: left }
.blogsn_wrap a { text-decoration: none }
.blogsn_brand { text-align: center }
.blogsn_title { font-size: 18px; font-weight: bold; margin-bottom: 0 }
.blogsn_by { font-size: 16px; margin-bottom: 10px }
.blogsn_desc { margin-bottom: 20px }

.myartgall { display: none }
.artgallprev, .artgallnext { text-align: initial; cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: .6s ease; background-color: rgba(0, 0, 0, 0.1) }
.artgallnext { right: 0; border-radius: 3px 0 0 3px }
.artgallprev { border-radius: 0 3px 3px 0; }
.artgallprev:hover, .artgallnext:hover { background-color: rgba(0, 0, 0, 0.8); text-decoration: none }
.myartgallout { text-align: initial; max-width: 800px; position: relative; margin: auto; width: 100%; }

.wherebuyfilter { display: none }
.wherebuyshow { display: block }
.wherebuycontainer { margin-top: 20px; overflow: hidden }
.wherebuybtn { appearance: none; -webkit-appearance: none; border: none; outline: none; padding: 12px 16px; background-color: #f1f1f1; cursor: pointer }
.wherebuybtn:hover { background-color: #ddd }
.wherebuybtn.wuyactive { background-color: #B87333; color: #000; font-weight: bold; }

.exepricepad { padding-top: 10px }
.myacheader { background: #f1f1f1; color: #000; text-align: center; padding: 30px 10px; margin-bottom: 30px }
.cartouttitle { background: #000; color: #fff; border-radius: 15px; padding: 10px }
.cartaddress { padding: 10px }

.techtopgrp { max-width: 800px; margin-left: auto !important; margin-right: auto !important; border: 1px solid #999; padding: 15px !important; margin-bottom: 30px }
.techtitle { margin-top: 30px; font-size: 36px }
.myaccmaxgrp { max-width: 700px; margin-left: auto !important; margin-right: auto !important }
.myaccicon { background: #9B9FA1; color: #fff; padding: 10px; text-align: center }
.myaccicon a, .myaccicon a:visited, .myaccicon a:active { color: #fff }
.myaccicon img { margin-bottom: 10px }

.pgbar { padding: 5px; width: 100%; margin-top: 10px; text-align: right }
.pgbar a:link, .pgbar a:visited, .pgbar a:active, .pgbar a { color: #5E5F62; background-color: #ECECEC; padding: 5px 10px; margin: 5px 1px; text-decoration: none }
.pgbar a:hover { color: #fff; background-color: #444C4F }
.pgbaractive { color: #fff; background-color: #444C4F; margin: 5px 1px; padding: 5px 10px }

.autocomplete { position: relative; display: inline-block }
.autocomplete-items { position: absolute; border: 1px solid #d4d4d4; z-index: 99; top: 100%; width: 100%; right: 0; max-height: 200px; overflow: auto }
.autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4 }
.autocomplete-items div:hover { background-color: #e9e9e9 }
.autocomplete-active { background-color: #444C4F !important; color: #fff }

.fttopitem { padding: 5px; margin: 5px; word-wrap: break-word }
.fttopitem a, .fttopitem a:link, .fttopitem a:visited, .fttopitem a:active { color: #FFF }
.ftricon { float: left; margin-right: 5px }
.hereto { font-size: 14px; font-weight: bold; padding-top: 15px }

.techtom-box { border: 1px solid #999; padding: 30px !important; margin-bottom: 30px }
.techtom-boxbtn { appearance: none; -webkit-appearance: none; margin-right: 10px; border: none; outline: none; padding: 12px 16px; background-color: #f1f1f1; cursor: pointer; text-decoration: none; display: inline-block; margin-bottom: 10px }
.techtom-boxbtn:last-child a { margin-right: 0 }
.techtom-boxbtn:hover { background-color: #ddd; text-decoration: none }
.techtom-boxbtn.ttsactive { background-color: #B87333; color: #000; font-weight: bold; }
.techtom-box-btitle { background-color: #fff; border: 1px solid #999; padding: 10px; margin-top: -50px; margin-bottom: 20px; display: table }
.techtom_seclect { margin-bottom: 5px; margin-top: 5px; width: 100%; padding: 10px 20px; border-radius: 5px; border: 1px solid #999; color: #999 }

.mainfeedsec, .mainfeedsubsec { list-style: none; margin: 0; padding-left: 0 }
.mainfeedtitle { font-weight: bold }
.mainfeedsubsec { margin-top: 10px; margin-bottom: 10px; padding-left: 10px }
.mainfeedsec > li, .mainfeedsubsec > li { margin: 0; padding-bottom: 0; list-style: none; background: none }
.mainfeedsec > li { width: 95%; float: left }
.mainfeedsubsec > li { font-weight: normal }

.prodtitlewrp h1 { font-size: 24px; font-weight: bold; }
.shortdescription .label { font-weight: bold; }
.productdescription div { padding: 3px; }
.sectionadd { padding: 12.5px 40px; }

/* Reward Terms */
.reward-terms-action { margin: 20px 0; text-align: center; }
.reward-terms-action .terms-checkbox-label { cursor: pointer; display: inline-flex; align-items: flex-start; gap: 8px; font-size: 15px; margin-bottom: 20px; justify-content: center; }
.reward-terms-action .terms-checkbox-label input[type="checkbox"] { margin-top: 3px; cursor: pointer; }
.reward-terms-action .buttonlink:disabled { background-color: #ccc !important; color: #666 !important; cursor: not-allowed; box-shadow: none; pointer-events: none; }

/* Thumbnail slider */
.relatedthumbslider { position: relative; width: 100%; overflow: hidden; margin: 20px 0; }
.relatedthumbslider .slides { display: flex; transition: transform 0.3s ease; width: 100%; }
.relatedthumbslider .slide { flex: 0 0 250px; padding: 0 5px; box-sizing: border-box; color: #000; text-align: center; font-weight: bold; }
.relatedthumbslider .slide img { width: 250px; height: auto; display: block; border-radius: 4px; object-fit: cover; border: solid 1px #f3f3f3; padding: 0px; }
.relatedthumbslider .slide .relatedtitle { padding: 7px; }
.relatedthumbslider .slider-controls { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.relatedthumbslider:hover .slider-controls { opacity: 1; }
.relatedthumbslider .slider-controls button { appearance: none; -webkit-appearance: none; background: rgba(0, 0, 0, 0.7); color: white; border: none; padding: 10px 15px; cursor: pointer; border-radius: 50%; font-size: 18px; pointer-events: auto; transition: background 0.3s ease; z-index: 10; }
.relatedthumbslider .slider-controls button:hover { background: rgba(0, 0, 0, 0.9); }
.relatedthumbslider .slider-controls .prev { margin-left: 10px; }
.relatedthumbslider .slider-controls .next { margin-right: 10px; }
.relatedthumbslider[data-items="6"] .slider-controls, .relatedthumbslider[data-items="5"] .slider-controls, .relatedthumbslider[data-items="4"] .slider-controls, .relatedthumbslider[data-items="3"] .slider-controls, .relatedthumbslider[data-items="2"] .slider-controls, .relatedthumbslider[data-items="1"] .slider-controls { display: none; }
.dataimage-main { width: 625px; height: 625px; }


/* ==========================================================================
   11. STAR RATING COMPONENTS
   ========================================================================== */
.starability-result { position: relative; width: 150px; font-size: .1em; color: transparent }
.starability-result, .starability-result:after { height: 30px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII=") }
.starability-result:after { content: ' '; position: absolute; left: 0; background-position: 0 -30px }
.starability-result[data-rating="5"]:after { width: 150px }
.starability-result[data-rating="4"]:after { width: 120px }
.starability-result[data-rating="3"]:after { width: 90px }
.starability-result[data-rating="2"]:after { width: 60px }
.starability-result[data-rating="1"]:after { width: 30px }
.starability-basic { display: block; position: relative; width: 150px; min-height: 60px; padding: 0; border: none }
.starability-basic > input { position: absolute; margin-right: -100%; opacity: 0 }
.starability-basic > input:checked ~ label, .starability-basic > input:focus ~ label { background-position: 0 0 }
.starability-basic > input:checked + label, .starability-basic > input:focus + label { background-position: 0 -30px }
.starability-basic > input[disabled]:hover + label { cursor: default }
.starability-basic > input:not([disabled]):hover ~ label { background-position: 0 0 }
.starability-basic > input:not([disabled]):hover + label { background-position: 0 -30px; opacity: 1 }
.starability-basic > input:focus + label { outline: 1px dotted #999 }
.starability-basic .starability-focus-ring { position: absolute; left: 0; width: 100%; height: 30px; outline: 2px dotted #999; pointer-events: none; opacity: 0 }
.starability-basic > .input-no-rate:focus ~ .starability-focus-ring { opacity: 1 }
.starability-basic > label { position: relative; display: inline-block; float: left; width: 30px; font-size: .1em; color: transparent; cursor: pointer; background-repeat: no-repeat; background-position: 0 -30px; height: 30px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII=") }
.starability-basic > label:before { content: ''; position: absolute; display: block; background-position: 0 30px; pointer-events: none; opacity: 0; height: 30px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII=") }
.starability-basic > label:nth-of-type(5):before { width: 120px; left: -120px }
.starability-basic > label:nth-of-type(4):before { width: 90px; left: -90px }
.starability-basic > label:nth-of-type(3):before { width: 60px; left: -60px }
.starability-basic > label:nth-of-type(2):before { width: 30px; left: -30px }
.starability-basic > label:nth-of-type(1):before { width: 0; left: 0 }


/* ==========================================================================
   12. MEDIA QUERIES
   ========================================================================== */

@media only screen and (min-width: 481px) {
    .autocomplete-items { width: 100% }
    #logo_wrapper { float: left; text-align: left }
    .stext { width: 20% }
    .menu-toggle { margin-top: 10px; float: right }
    #internal_banner .slogantext { font-size: 1.4em }
    .footer_title { font-size: 18px }
    .downloadpadr { padding: 0 }
}

@media only screen and (max-width: 768px) {
    .relatedthumbslider .slide { flex: 0 0 150px; }
    .relatedthumbslider .slide img { width: 150px; }
}

@media only screen and (max-width: 480px) {
    .relatedthumbslider .slide { flex: 0 0 120px; }
    .relatedthumbslider .slide img { width: 120px; }
}

@media only screen and (min-width: 768px) {
    .myminh620 { min-height: 620px }
    .tabinmax { max-width: 800px }
    .listprott { border-top-left-radius: 25px; border-top-right-radius: 25px }
    .topaccount { width: 130px }
    .topreg { width: 100px }
    .fttopitem { width: 47% }
    .gryin, .fttopitem { float: left }
    .gryintxt { max-width: 200px }
    #min_search_wrp { display: flex; justify-content: flex-end; align-items: center; }
    .minsrch:focus { width: 400px }
    .topgroup { text-align: right; float: right }
    .nav-next { float: right; text-align: right }
    .nav-prev { float: left; text-align: left }
    .hidebig { display: none }
    #attribution { text-align: right }
    .hidesmall { display: block }
    .cols_2, .cols_4 { width: 50%; float: left; display: block }
    .cols_3, .cols_6 { width: 33.33333333%; float: left; display: block }
    .row { margin-left: 1px; margin-right: 1px; padding-top: 2px; padding-bottom: 2px; clear: both }
    .nogap_img_row { padding-top: 0; padding-bottom: 0 }
    .nogap_img_col { padding-left: 0; padding-right: 0; margin-bottom: 0 }
    h1, h2, h3, h4, h5, h6 { font-size: 24px }
    .listwrp { border: none }
    .myacheader { font-size: 18px }
    .mainfeedsec > li { width: 33% }
}

@media only screen and (max-width: 920px) {
    .menu-container { width: 100%; background: #e9e9e9 }
    .menu-mobile { display: block }
    .menu-dropdown-icon:before { display: block }
    .menu > ul { display: none }
    .menu > ul > li { width: 100%; padding-top: 0; display: block; margin: 0 }
    .menu > ul > li a { padding: 1.5em; display: block }
    .menu > ul > li > ul { position: relative; width: 100% }
    .menu > ul > li > ul.normal-sub { width: 100% }
    .menu > ul > li > ul > li { float: none; width: 100%; margin-top: 20px }
    .menu > ul > li > ul > li:first-child { margin: 0 }
    .menu > ul > li > ul > li > ul { position: relative }
    .menu > ul > li > ul > li > ul > li { float: none }
    .menu .show-on-mobile { display: block }
}

@media only screen and (min-width: 920px) {
    .mainfeedsec > li { width: 16.66% }
    .maxcartimg { max-width: 60px }
    .menutspace { padding-top: 18px; display: inline-block }
    .menu-icon-max { text-align: center }
    .hidesmallother { visibility: visible; display: block !important }
    .tab button { float: left; width: auto; border-top-right-radius: 10px; border-top-left-radius: 10px; margin-right: 5px; }
    .fttopitem { width: 22% }
    .gryintxt { font-size: 18px; line-height: normal; padding-top: 30px }
    .contsubnav { width: 25% }
    .contsubbody { width: 70% }
    .news-print-featured h3 { font-size: 8px }
    .news-print-featured-small h3, .news-print-featured-cols h3 { font-size: 16px }
    .news-print-featured { width: 65%; float: left; position: relative; margin-bottom: 0 }
    .featured-posts-text { padding: 20px }
    .featured-posts-by { font-size: 16px }
    .news-print-featured-small { width: 35%; float: right; padding: 0 0 5px 10px; position: relative; margin-bottom: 5px }
    .alter-card-wrap { margin: 0; position: relative }
    .alter-card-img { position: absolute; height: 100%; top: 0; overflow: hidden }
    .alter-card-img img { height: 100%; width: auto; display: block; max-width: none; object-fit: cover }
    .alternating-img-left { width: 45%; float: left }
    .alternating-txt-right { width: 55%; float: right; margin-bottom: 0 }
    .alternating-img-right { width: 44%; float: right; right: 0 }
    .alternating-img-right img { float: right }
    .alternating-txt-left { width: 55%; float: left; margin-bottom: 0 }
    .tartan-img img { width: 100% }
    .tartan-right-left { width: 50% }
    li.hide_nav_920 { display: none }
    .right-float { float: right; margin-left: 6px; margin-bottom: 6px }
    .left-float { float: left; margin-right: 6px; margin-bottom: 6px }
    #internal_banner_wrap { max-width: 1800px }
    #logo_wrapper { margin-bottom: 0; margin-left: 15px }
    .form_text { border-radius: 5px; position: relative }
    #content.left-content { float: left; width: 70% }
    #content.right-content { float: right; width: 70% }
    #content.wide-content { float: none; width: 100% }
    
    .flexslider { display: block; margin: 0 0 60px; background: #fff; width: 100%; padding: 0; border: 4px solid #fff; position: relative }
    .flexslider .slides img { max-width: 100%; display: block }
    .flexslider .slides li { display: none; position: relative }
    .flex-caption { width: 100%; padding: 2%; color: #FFF; position: absolute; left: 48px; bottom: 0; top: 0; font-size: 16px; line-height: 18px }
    .flexslider .flex-caption { margin: 20px 0 !important }
    .flex-direction-nav a { background-color: #520057 }
    .slidepurp { color: #520057; font-weight: bold }

    aside { width: 25% }
    .asideright { float: right }
    .asideleft { float: left }

    #menu-main-navigation { display: block }
    #topnavsub { width: auto }
    #topnavsub, .top-menu-sub { float: left; margin: 0 }
    .top-menu, .top-menu * { margin: 0; padding: 0; list-style: none }

    .cols_1 { width: 100% }
    .cols_2 { width: 50% }
    .cols_2_10 { width: 10% }
    .cols_2_20 { width: 20% }
    .cols_2_30 { width: 30% }
    .cols_2_40 { width: 40% }
    .cols_2_60 { width: 60% }
    .cols_3_20 { width: 20% }
    .cols_3 { width: 33.33333333% }
    .cols_3_30 { width: 30% }
    .cols_3_60 { width: 60% }
    .cols_3_40 { width: 40% }
    .cols_4 { width: 23%; margin: 1%; }
    .cols_5 { width: 20% }
    .cols_6 { width: 16.6% }
    .cols_2_70 { width: 70% }
    .cols_2_80 { width: 80% }
    .cols_2_90 { width: 90% }
    .cols_1, .cols_2, .cols_2_10, .cols_2_20, .cols_2_30, .cols_2_40, .cols_2_60, .cols_2_70, .cols_2_80, .cols_2_90, 
    .cols_3_20, .cols_3, .cols_3_30, .cols_3_60, .cols_3_40, .cols_4, .cols_5, .cols_6 { float: left; display: block }
    
    .rightfloat { float: right }
    #main_banner [class*="cols_"] { margin-bottom: -20px }
    .shwtable { margin: auto }
    .blogtopicwrap { width: 25% }
    .blogdetailwap { width: 70% }
}

@media (max-width: 1200px) {
    .relatedthumbslider .slide { flex: 0 0 180px; }
    .relatedthumbslider .slide img { width: 180px; }
}

/* Base64 Image Support Adjustments */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) {
    .starability-result, .starability-result:after { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAB4CAMAAACZ62E6AAABAlBMVEUAAACZmZmampr2vSObm5v/yiufn5+ampr1viP1viSZmZn2viOZmZmampqampr2viSampqampqcnJz5vyScnJz3wSf/wyn/xiujo6Oqqqr/0C/1vSOampr2viP2viOampr2viP2vST2viOampqampqampr1vyP3viSampr2vyT4vyX3viSbm5ubm5v5wCT8xSmgoKCampqampr3vyb2wiWenp72viOampqZmZmampr2viP2viP1viSampqbm5v2vyT3viObm5v4vyadnZ34wSSbm5v2viSZmZn2viP2vST2viP2viT1viOZmZn2viT2viX3viT3vyb2vyOZmZn1vSOZmZlNN+fKAAAAVHRSTlMA9uz4PQwS8O7r5+fTw4yMelw2MB0dFRELBgbS+/Hfu7uxqKWdg4N7ZmZMPi8pKRgPs0w7Nhb14drKw6Gck21tXkNDIyMZ1rDLycTBtaqVknlfV0sGP8ZwAAADW0lEQVRYw9zWvYqDQBSG4TPDoCAqKhYKQgoVLFaIgZCkiCBBUqVazv3fyu4aEXWdM85Uy779A+LP58AfTQgw73AwtxFiZIwbxMbUfuB3H4b49YNfZrbGodoI52+cm9hH9sbZwwAXOFbo2zjDsSzWxnecuuvaM8MpdtbEPs7y9azF5phZWrjERaWOPdpLbB81cICrgv3W4mvMLbU6RmFQeA5u5HhFEEbHLdWLsMxvHJXxW16Goh+ZqPyny1Az5j79SsCJoWHsBNAxQ9sNF26bWFuMC8v1LY+mmeTadjaqtaNnnXoxWBcde1nNWnzdb68xrOqvu22/MTzuPutujpJ122NvluSb8tTWk85CclDZQwLS0oa2TQpEKacsJy0kSJaQOKJxROKKxhWJ7zS+k9ijsUdim8Y2ZWNUFBP4pMKfOv8onX9WrsI5gd3VVLXtatxcuU0znGUHCUAS2DgrS6mT6hTzrXEjfIZj5Dk2xKkihqm4wKlQfQRqalhUP9UHo3FIPAG/Et44JVLsDDf0JHmB3OEByOwZES8hSAsviGjBdh3ylh6plmMnW4IyAUVJWcE/76vTell1EIaiMBwIAcWBA9GC0lIdKFXQQUsHVVCklN7ojf3+z3JOxYqK2TH555+K6CJJQtRbr9XtDmCnjH0AX9Va8J+liIMvDtRsCk2pEs6hKVexR2g7KuDihwt5a9MfprY0fkLXU9ZmFLpoJolN6GXKWWfZx0tHCocwKJSxC22ItYUEjmBUJHFjfYz1xQxlfaLiZsBExq2IPtbkNbLtOwwuGgjTLkH43mYtSzam7+1Bsr3nm5uExBQUozEh9V7N7uvmwZcqdpm0C6vJW63bZEuXtbrV2zpDzhrpYLBWMnY1mjV7JWFtMio7zbWniWFxvHnWm1yGxXmOPXP+L3YV2ysjnNhaZNeMcHPvuL27BMnVMaujljBAYyje4niH4g2ONyh+4PiB4gOODyjWcKxh1gZBNoJjEY4R/BLhF4IDEQ4QPBoEoyxH4+bxrUsHyxwxQlg0WHXqYifVLmo67cKY/UtaXFxBV26TLjuHrkp8BPJTMij1xQejdkgO24nf7dBOCRcbzQuNOR9Qs64GzzrfQa8It2oFAA6Zrga9xEeq1KHmLUHIiCAWInsg1x/MLqkMsItF8QAAAABJRU5ErkJggg=="); background-size: 30px auto }
    .starability-basic > label { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAB4CAMAAACZ62E6AAABAlBMVEUAAACZmZmampr2vSObm5v/yiufn5+ampr1viP1viSZmZn2viOZmZmampqampr2viSampqampqcnJz5vyScnJz3wSf/wyn/xiujo6Oqqqr/0C/1vSOampr2viP2viOampr2viP2vST2viOampqampqampr1vyP3viSampr2vyT4vyX3viSbm5ubm5v5wCT8xSmgoKCampqampr3vyb2wiWenp72viOampqZmZmampr2viP2viP1viSampqbm5v2vyT3viObm5v4vyadnZ34wSSbm5v2viSZmZn2viP2vST2viP2viT1viOZmZn2viT2viX3viT3vyb2vyOZmZn1vSOZmZlNN+fKAAAAVHRSTlMA9uz4PQwS8O7r5+fTw4yMelw2MB0dFRELBgbS+/Hfu7uxqKWdg4N7ZmZMPi8pKRgPs0w7Nhb14drKw6Gck21tXkNDIyMZ1rDLycTBtaqVknlfV0sGP8ZwAAADW0lEQVRYw9zWvYqDQBSG4TPDoCAqKhYKQgoVLFaIgZCkiCBBUqVazv3fyu4aEXWdM85Uy779A+LP58AfTQgw73AwtxFiZIwbxMbUfuB3H4b49YNfZrbGodoI52+cm9hH9sbZwwAXOFbo2zjDsSzWxnecuuvaM8MpdtbEPs7y9azF5phZWrjERaWOPdpLbB81cICrgv3W4mvMLbU6RmFQeA5u5HhFEEbHLdWLsMxvHJXxW16Goh+ZqPyny1Az5j79SsCJoWHsBNAxQ9sNF26bWFuMC8v1LY+mmeTadjaqtaNnnXoxWBcde1nNWnzdb68xrOqvu22/MTzuPutujpJ122NvluSb8tTWk85CclDZQwLS0oa2TQpEKacsJy0kSJaQOKJxROKKxhWJ7zS+k9ijsUdim8Y2ZWNUFBP4pMKfOv8onX9WrsI5gd3VVLXtatxcuU0znGUHCUAS2DgrS6mT6hTzrXEjfIZj5Dk2xKkihqm4wKlQfQRqalhUP9UHo3FIPAG/Et44JVLsDDf0JHmB3OEByOwZES8hSAsviGjBdh3ylh6plmMnW4IyAUVJWcE/76vTell1EIaiMBwIAcWBA9GC0lIdKFXQQUsHVVCklN7ojf3+z3JOxYqK2TH555+K6CJJQtRbr9XtDmCnjH0AX9Va8J+liIMvDtRsCk2pEs6hKVexR2g7KuDihwt5a9MfprY0fkLXU9ZmFLpoJolN6GXKWWfZx0tHCocwKJSxC22ItYUEjmBUJHFjfYz1xQxlfaLiZsBExq2IPtbkNbLtOwwuGgjTLkH43mYtSzam7+1Bsr3nm5uExBQUozEh9V7N7uvmwZcqdpm0C6vJW63bZEuXtbrV2zpDzhrpYLBWMnY1mjV7JWFtMio7zbWniWFxvHnWm1yGxXmOPXP+L3YV2ysjnNhaZNeMcHPvuL27BMnVMaujljBAYyje4niH4g2ONyh+4PiB4gOODyjWcKxh1gZBNoJjEY4R/BLhF4IDEQ4QPBoEoyxH4+bxrUsHyxwxQlg0WHXqYifVLmo67cKY/UtaXFxBV26TLjuHrkp8BPJTMij1xQejdkgO24nf7dBOCRcbzQuNOR9Qs64GzzrfQa8It2oFAA6Zrga9xEeq1KHmLUHIiCAWInsg1x/MLqkMsItF8QAAAABJRU5ErkJggg=="); background-size: 30px auto }
}

@media screen and (-ms-high-contrast: active) {
    .starability-basic { width: auto }
    .starability-basic > input { position: static; margin-right: 0; opacity: 1 }
    .starability-basic .input-no-rate { display: none }
    .starability-basic > label { display: inline; float: none; width: auto; height: auto; font-size: 1em; color: inherit; background: none }
    .starability-basic > label:after, .starability-basic > label:before { display: none }
}

@media print {
    * { background: transparent !important; color: #000 !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important }
    a, a:visited { text-decoration: none }
    a[href]:after { content: " (" attr(href) ")" }
    abbr[title]:after { content: " (" attr(title) ")" }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: "" }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid }
    thead { display: table-header-group }
    tr, img { page-break-inside: avoid }
    img { max-width: 100% !important }
    @page { margin: .5cm }
    p, h2, h3 { orphans: 3; widows: 3 }
    h2, h3 { page-break-after: avoid }
}
/* ==========================================================================
   FOOTER HEADERS OVERRIDE (Force Silver Text)
   ========================================================================== */
footer h24, 
.footer_title, 
#main_footer_wrap h4, 
#main_footer_wrap .footer_title {
    color: #A6A6A6 !important;
}



/* Delivery Options Radio Cards */
.delivery-options-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
    max-width: 450px;
    text-align: left;
}
.delivery-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    margin: 0;
}
.delivery-card:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}
/* Styles the card when the radio inside is selected */
.delivery-card:has(input:checked) {
    border-color: #b7713d; /* Matches your site's button color */
    background: #fefcfb;
}
.delivery-card input[type="radio"] {
    margin-right: 15px;
    transform: scale(1.3);
    accent-color: #b7713d;
    cursor: pointer;
}
.delivery-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.delivery-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 15px;
}
.delivery-subtext {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}
.delivery-price {
    font-weight: 700;
    font-size: 16px;
    color: #0f172a;
    margin-left: 15px;
}


.promo-banner-full { 
    position: relative; 
    height: 500px; 
    display: flex; 
    align-items: flex-end; 
    text-decoration: none;
    background: var(--primary-dark); 
    overflow: hidden; /* <-- Add this line */
}