html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
body { margin: 0px; padding: 0px; font-family: "Roboto", sans-serif; font-size: 0.85em; min-height: 100%; overflow: auto; background: var(--page-bg); }
#PageWrapper { margin: 0 auto; text-align: left; overflow: hidden; position: relative; }
#header,#FooterContainer, #Footer #subfootercontainer, .subcats, .menu ul, #cookiecrumb, .productlist, .homeboxes, .bodycopy, .articleshome, .catdescgrid { max-width:var(--pagewidth); }
#header { margin: 0 auto; color: var(--black); border: 0; min-height: 10em; z-index: 10; position: relative; background-size: cover; padding: 0 1em; }
#headcontact { float: right; white-space: nowrap; padding-top:1.7em; }
#content .white70 { background-color: var(--blue-tint); padding-bottom: 1em; padding-left: max(var(--gutter), calc(50% - var(--pagewidth) / 2)); padding-right: max(var(--gutter), calc(50% - var(--pagewidth) / 2)); margin: 0; border-top: 1px solid var(--blue-tint); }
#content .white50 { background-color: var(--white-veil); }
.infopage { max-width: 60em; margin: 0 auto; }
.headbtn, #content .productlist .plitem, .plitem2, #content .subcats a, #content .subcats div, #content .homeboxes, #content .contentbox, #content .homeboxes a.col, .sf-menu a, #content .productinfo #productbuy, #mainimagebox, #cookiecrumb a, #cookiecrumb span, div.smallerimage, div.opt, .accountactions a, #accountcol, .addressbloc.backbutton, input[type=text], input[type=password], select, textarea, input[type=email], button, .formblock, .col, .discountbanner, #productinbasketcount a, .carttotals, .buttons, textarea, .radiogroup label, .navbar-toggle, #account-toggle, #cart-toggle, .waiting, .cartitemblock, #articlelist a, #articlemain, .categorydescription, .addressblock, .messagebox, .loginbox, .formblock, .waiting, .outofstock, .confirmbox, .IncreaseLink, .DecreaseLink, .qty, .cartitemblock, .carttotals, .confirmflex div, .productreviews, #account a, #headerbasket a, .swiper.home-swiper { border-radius: 4px; overflow: hidden; }
nav.menu, .nosmall, a.nosmall,.d1000 { display: none; }
.floatright { float: right; }
.floatleft{float:left;}
a:disabled { background-color: var(--grey-66); }
.text-nowrap { white-space: nowrap; }
.icon { width: 1em; height: 1.1em; fill: var(--white); display: inline-block; line-height: 100%; vertical-align: text-top; }
.icon-1-5x { width: 1.5em; height: 1.5em; fill: var(--white); }
.icon-2x { width: 2em; height: 2em; fill: var(--white); }
.icon-666 { fill: var(--grey-66); }
#lengthicon.icon,
#confirmicon.icon { fill: var(--hdred); }
.rating svg { fill: var(--gold); }
.clearme:after { content: ""; display: table; clear: both; }
.hidden { display: none; visibility: hidden; }
.d-none { display: none; }
#gtmf { display: none; visibility: hidden }
#Logo { float: left; }
#Logo a { display: block; width: 130px; height: 80px; }
#Logo a svg { width: 130px; height: 80px; }
.notext { line-height: 0; font-size: 0; color: transparent; position: absolute; }
label.notext { margin: 0; display: block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#phone { display: none; }
.text-box, input[type="text"], input[type="password"], textarea, input[type="search"], select { width: auto; border: solid 1px var(--grey-cc); font-family: "Roboto",sans-serif; font-size: 1.2em; padding: 0.4em 0.7em; }
.navbar-toggle { cursor: pointer; }
.trolley{ position:relative;}
#cartqty { border-radius: 50%; width: 1.2em; height: 1.2em; padding: 0.2em; background: var(--hdred); color:var(--white); text-align: center; position:absolute; top:-0.5em; left:-0.5em; font-size:0.8em; }
.input-wrapper { position: absolute; right: 2.5em; left: 0px; top: 0px; bottom: 0px; }
.form-wrapper { position: relative; height: 2em; font-size: 1.5em; margin: 0.5em 0em 0.2em; }
.form-wrapper input[type="text"] { height: 2em; width: 100%; float: left; color: var(--grey-33); border: 1px solid var(--brightblue); background: var(--panel-bg); box-sizing: border-box; font-size: inherit; }
.form-wrapper input[type="text"]:focus { background: var(--panel-bg); outline: none; }
.form-wrapper button { position: absolute; right: 0px; top: 0px; overflow: visible; border: 0; padding: 0.5em; cursor: pointer; height: 2em; width: 2.5em; color: var(--white); background: var(--brightblue); font-size: inherit; line-height: 1em; }
.form-wrapper button::-moz-focus-inner { border: 0; padding: 0; }
.menu { background-color: var(--panel-bg); margin: 0 auto; width: 100%; max-width:var(--pagewidth); }
#header,
.menu {
max-width: none;
width: auto;
padding-left: max(var(--gutter), calc(50% - var(--pagewidth) / 2));
padding-right: max(var(--gutter), calc(50% - var(--pagewidth) / 2));
box-sizing: border-box;
}
.menu ul { padding: 0; list-style-type: none; z-index: 9999; }
.menu ul li{margin-right:0.5em;}
.menu a { color: var(--black); padding: 0em 0.8em; display: block; height: 2.16em; line-height: 2.2em; font-size: 1.2em; text-decoration: none; border-bottom: solid 2px var(--panel-bg); }
.menu a:hover, .menu a.selected { border-bottom: solid 2px var(--brightblue); text-decoration: none; color: var(--black); }
#account, #headerbasket, #nbt { font-size: 1.4em; }
#account a, #headerbasket a, #nbt { cursor: pointer; background-color: var(--brightblue); padding: 0.45em 0.6em; display:block; overflow:visible; }
#account, #headerbasket, #nbt { float: right; margin: 0 0 0 0.7em; }
#nbt { border: 0; color: var(--white); font-family: inherit; line-height: inherit; }
#account a:hover, #headerbasket a:hover { background-color: var(--brightblue); }
input[type=text].searchbox { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
button.searchbutton { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }
#header .Search { clear: both; width: auto; }
#header { position: sticky; top: 0; z-index: 100; background: var(--panel-bg); }
.checkoutchrome #header { position: relative; }
html.headercompact #header { display: flow-root; min-height: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.18); }
html.headercompact #Logo a, html.headercompact #Logo a svg { height: 44px; width: 110px; }
html.headercompact #headcontact { padding-top: 2px; }
html.headercompact #header .Search { padding-top: 0; }
@media screen and (min-width: 576px) {
html.headercompact #header .Search { padding-top: 2px; }
html.headercompact #header .form-wrapper { margin: 0; font-size: 1.3em; height: 40px; }
}
@media screen and (max-width: 575px) {
html.headercompact #header .Search { padding-top: 8px; }
html.headercompact #header .form-wrapper { margin: 0; }
}
html.headercompact #nbt { display: block; }
html.headercompact.menuopen #header { box-shadow: none; }
html.headercompact.menuopen nav.menu {
display: block !important;
position: fixed; top: var(--headerh, 56px); left: 0; right: 0; z-index: 99;
max-height: calc(100vh - var(--headerh, 56px)); overflow-y: auto;
box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 799px) {
html.headercompact.menuopen nav.menu > ul > li { display: block; float: none; }
}
.nbtlabel { display: none; }
@media screen and (min-width: 800px) {
html.headercompact #nbt svg.icon { display: none; }
html.headercompact #nbt .nbtlabel { display: inline; font-size: 1em; vertical-align: baseline; color: var(--white); }
html.headercompact #nbt .nbtlabel::after { content: ""; display: inline-block; width: 0.3em; height: 0.3em; margin: 0 0.15em 0 0.45em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-0.2em) rotate(45deg); transition: transform 0.15s; }
html.headercompact.menuopen #nbt .nbtlabel::after { transform: translateY(0.05em) rotate(-135deg); }
html.headercompact #nbt { color: var(--white); }
}
#header .SearchInner { position: relative; height: auto !important; }
#SearchResults {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 995;
width: 100%; box-sizing: border-box;
max-height: calc(100vh - var(--headerh, 120px) - 1rem); overflow-y: auto; overscroll-behavior: contain;
background-color: var(--panel-bg); border: 1px solid var(--grey-dd); border-radius: 4px;
box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.22);
text-align: left; font-size: 1rem;
}
#SearchResults[hidden] { display: none; }
@media screen and (min-width: 576px) {
#SearchResults { width: max(100%, min(30rem, calc(100vw - 2rem))); }
}
#SearchResults .searchlist { list-style: none; margin: 0; padding: 0.35rem 0; }
#SearchResults .searchlist li { list-style: none; margin: 0; }
.searchitem {
display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-areas: "img name" "img meta";
align-items: center; gap: 0.15rem 0.8rem; padding: 0.5rem 0.9rem;
text-decoration: none; color: var(--black); line-height: 1.3;
}
.searchitem:hover, .searchitem[aria-selected="true"] { background-color: var(--blue-tint); text-decoration: none; color: var(--black); }
.searchimage { grid-area: img; width: 3.5rem; height: 3.5rem; background-color: #fff; border-radius: 3px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.searchname { grid-area: name; align-self: end; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.searchname mark { background: none; color: inherit; font-weight: bold; }
.searchmeta { grid-area: meta; align-self: start; display: flex; flex-wrap: wrap; gap: 0 0.8rem; font-size: 0.9em; }
.searchprice { font-weight: bold; color: var(--black); }
.searchfrom { font-weight: normal; color: var(--text-faint); }
.searchstock.in { color: var(--instock-bright); }
.searchstock.out { color: var(--text-faint); }
.searchall { position: sticky; bottom: 0; background-color: var(--panel-bg); display: block; padding: 0.75rem 0.9rem; border-top: 1px solid var(--grey-dd); font-weight: bold; text-decoration: none; color: var(--brightblue); }
.searchall:hover { text-decoration: underline; }
.searchnone { margin: 0; padding: 0.9rem; color: var(--text-faint); }
.searchhead { margin: 0; padding: 0.6rem 0.9rem 0.1rem; font-size: 0.8em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.searchhead + .searchlist { padding-top: 0.1rem; }
.searchcatlist + .searchhead { border-top: 1px solid var(--grey-dd); }
.searchitem.searchcatitem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; padding: 0.45rem 0.9rem; }
.searchparent { font-size: 0.9em; color: var(--text-faint); }
.searchbox { width: 250px; font-size: 1.1em; border: none; }
.bodycopy { margin: 0 auto; padding: 1em 1em 0; }
.white70 > .bodycopy { padding-left: 0; padding-right: 0; }
#content p, #content td { line-height: 140%; color: var(--grey-33); }
#content p { margin: 3px 0px 10px; }
#content li { color: var(--grey-33); }
a { color: var(--darkblue); text-decoration: none; }
a:hover { color: var(--hdred); text-decoration: underline; }
#content { padding: 0px; margin: 0px; clear: both; }
.clear { clear: both; }
.bigclear { clear: both; height: 3em; }
.medclear { clear: both; height: 1.5em; }
span.clear { display: block; }
#content h1 { margin-top: 0em; color: var(--hdred); font-size: 1.6em; margin-bottom: 0.3em; padding: 0px; line-height: 130%; }
#content .redder { color: var(--hdred); margin-left: -4px; }
#content h2 { margin-top: 0.7em; margin-bottom: .3em; font-size: 1.3em; clear: both; line-height: 130%; font-weight:normal; }
#content h3 { margin-bottom: 0.3em; font-size: 1.3em; clear: both; color: var(--hdred); }
#content p { padding-top: 2px; padding-bottom: 10px; }
#content .mini { font-size: x-small; }
#content a { text-decoration: none; }
#content a:hover { text-decoration: underline; }
ul.nb { margin-top: 0.5em; clear: both; }
ul.nb li, p.nb, span.nb { font-size: 0.9em; color: var(--grey-66); }
p.nb ul.nb { padding-top: 0em; }
.validity { background-color: var(--panel-bg); }
#content .bestsellers h2, #content .discounts h2, #content .suggestions h2, #content .relatedcategories h2, #content .productreviews h2 { color: var(--white); margin: 0; padding: 0 0 0; font-size: 1.5em; }
#content .bestsellers p, #content .discounts p, #content .suggestions p, #content .relatedcategories p { color: var(--white); font-size: 1em; line-height: 150%; }
#homevideo { width: 100%; cursor: pointer; }
.homeboxes { padding: 1em 1em 0em; margin: 0 auto; }
.homeboxes .homeboximg { float: right; width: 36%; height: 30vw; max-height: 140px; max-width: 150px; margin: 0 0 0 1em; background-size: contain; background-position: right top; background-repeat: no-repeat; display: block; }
#content .homeboxes .col { background: var(--panel-bg); padding: 1em;}
#content .homeboxes .col h2 { font-size: 1.5em; margin-top: 0; }
#content .homeboxes a.col { display: block; }
#content .homeboxes .colvideo { background-size: cover; height: auto; background-position: center center; min-height: 8em; padding: 0 !important; }
#content .homeboxes p, #content .homeboxes h2, #content .hd_red p { color: var(--white); }
#content .homeboxes .col h2, #content .homeboxes .col h1 { margin: 0; font-size: 1.5em; line-height: 130%; }
#content .homeboxes .light_blue, #content .light_blue { background-color: var(--hdred); }
#content .homeboxes .dark_blue, #content .dark_blue { background-color: var(--brightblue); }
#content .homeboxes .hd_red, #content .hd_red { background-color: var(--hdred); color: var(--white); }
#content .homeboxes .econatural, #content .econatural { background-color: var(--sand) !important; }
#content .homeboxes .sale_red, #content .sale_red { background-color: var(--salecolor); }
#content .homeboxes .white, #content .white { background-color: var(--panel-bg); }
#content .homeboxes .black, #content .black { background-color: var(--black); }
#content .homeboxes .white p, #content .homeboxes .white h2, #content .white p, #content .white h2 { color: var(--black); }
#content .homeboxes a.col { text-decoration: none; }
#content .homeboxes a.col:hover { text-decoration: none; }
#videocontainer { position: relative; width: auto; height: 0; padding-bottom: 56.25%; cursor: pointer; }
#videocontainer iframe, #videocontainer img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#content .homeboxes a.hidemobile { display: none; }
.dummy{display:none;}
.paddymcpadding { padding: 1em 1em 0; max-width:var(--pagewidth); margin:0 auto; }
.swiper.home-swiper { width: auto; height: 300px;}
.home-swiper .swiper-slide { text-align: center; font-size: 18px; background: var(--grey-44); display: flex; justify-content: center; align-items: center; }
.home-swiper .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.form-container{ max-width:400px; margin:0 auto;}
.formflex { display: grid; grid-gap: 1em; }
.formblock { min-height: 30em; background-color: var(--panel-bg); padding: 1em; }
.formblock.formblockblank { background-color: transparent; }
.buttonlink { background: none; border: none; color: var(--hdred); cursor: pointer; display: inline; }
.formblock h2 { clear: both; }
.formblock h3 { font-size: 1.2em; font-weight: bold; }
.formblock ul, .formblock ol { margin-left: 1.5em; margin-top: 0.5em; }
.formblock li { margin-bottom: 0.5em; }
.read-only-box { width: auto; border: solid 0px var(--grey-dd);font-size: 1.2em; margin: 0em; padding: 0.3em 0.7em; }
.text-box, input[type="text"], input[type="email"], input[type="password"], textarea, input[type="search"], select { width: auto; border: solid 1px var(--grey-cc); font-family: "Roboto",sans-serif; font-size: 1.2em; padding: 0.4em 0.7em; }
textarea { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.text-box.multi-line { height: 6.5em; }
.tri-state { width: 6em; }
#content input[type=submit].buttons, button[type=submit].buttons, a.buttons, p.buttons, span.buttons, button[type=button].buttons { font-size: 1.5em; color: var(--white); cursor: pointer; text-decoration: none; display: block; border-collapse: collapse; margin: 0px; padding: 0.4em 0.4em; line-height: normal; line-height: 1.3em; overflow: visible; background-color: var(--brightblue); border: none; text-align: center; white-space:nowrap; user-select: none; }
#content .buybox input[type=submit].buttons { font-size: 1.5em; }
#content input[type=submit].bigbutton, button[type=submit].bigbutton { width: 100%; font-size: 150%; line-height: 150%; }
.widebutton { width: 100%; }
a.secondarybutton, button[type=submit].secondarybutton, input[type=submit].secondarybutton { border: none; }
#content .smallbutton, a.smallbutton, #content input[type=submit].smallbutton { font-size: 1.1em; }
.uppercase { text-transform: uppercase; }
.placeorder { font-size: 2em; }
button[type=submit].inlinebutton, input[type=submit].inlinebutton, a.inlinebutton { font-size: 1.2em; padding: 0.4em 0.7em; line-height: 1.1em; margin-top: 0px; }
.forwardbutton, #content .forwardbutton { float: right; margin-left: 0.5em; }
.backbutton, a.backbutton { float: left; margin-right: 0.5em; }
#content input[type=submit].buttons:hover, button[type=submit].buttons:hover, button[type=button].buttons:hover, a.buttons:hover, p.buttons:hover { background-color: var(--hdred); border: 0px solid var(--hdred); color: var(--white); text-decoration: none; background-image: none; }
#content a.buttons, #content a.buttons:hover { text-decoration: none; }
#content .buttons:disabled, #content input[type=submit].buttons:disabled, button[type=submit].buttons:disabled { background-color: var(--disabled-bg); }
.error { color: var(--hdred); }
.success { color: var(--instock); }
.dateboxes { width: 70px; }
.messagebox { display: block; margin: 0 0 1em; text-decoration: none; }
#content .messagebox {
position: relative;
padding: 0.6em 0.8em 0.6em 2.5em;
background: var(--blue-tint-cold);
border-left: 3px solid var(--hdred);
color: var(--text);
line-height: 1.4;
}
#content .messagebox::before {
content: "";
position: absolute;
left: 0.8em;
top: 0.7em;
width: 1.2em;
height: 1.2em;
background-color: var(--hdred);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#content .messagebox.ok, #content .messagebox.messagesuccess { border-left-color: var(--agri); }
#content .messagebox.ok::before, #content .messagebox.messagesuccess::before {
background-color: var(--agri);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
}
#content .messagebox.info { border-left-color: var(--brightblue); }
#content .messagebox.info::before {
background-color: var(--brightblue);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'/%3E%3C/svg%3E");
}
#content .messagebox.qtynote { margin: 0.6em 0 0; font-size: 0.9em; text-align: left; }
#content .cartline .qtynote { grid-column: 1 / -1; margin: 0; }
#content .productlist .plitem .qtynote { position: absolute; left: 0.5em; right: 0.5em; bottom: 3.8em; z-index: 2; margin: 0; }
#content .messagebox p { padding: 0; margin: 0 0 0.4em; }
#content .messagebox p:last-child { margin-bottom: 0; }
.messagebox.d-none { display: none; }
#content .messagebox .buttons { margin-top: 0.6em; }
.waiting { padding: 0.5em 1em; border: 0px solid var(--grey-bb); color: var(--white); background: var(--grey-99); clear: both; float: none; display: block; }
.waiting i { font-size: 1.3em; }
input:focus,
select:focus,
textarea:focus,
button:focus { outline: none; }
div.impersonating { text-align: center; background-color: var(--hdred); z-index: 20; text-align:center; color:white; padding:0.5em; display:block; width:auto; }
.impersonating a { display: inline; color:var(--grey-cc); }
div.impersonating.staffsignin { background-color: var(--text); color: var(--page-bg); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5em 1em; }
div.impersonating.staffsignin strong { color: inherit; }
.staffsigninform { display: inline; margin: 0; }
.staffsigninform .buttons { margin: 0; font-size: 0.9rem; padding: 0.3em 0.9em; }
div.impersonating.staffsignin span { overflow-wrap: anywhere; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
.field-validation-error { clear: both; padding: 0em 0.5em 0.3em; display: block; color: var(--hdred); font-size: 0.8em !important; line-height: 1em; }
.field-validation-valid { display: none; }
.input-validation-error { border-color: var(--hdred) !important; }
.buybox .input-validation-error, .buyremove .input-validation-error { border: none !important; background-color: var(--pink-wash) !important; }
.productddls .field-validation-error { display: none; }
#content .buyremove .buybuttonprimary { font-size: 1.4em; }
#content .buyremove.buyremovedisabled { display: none; }
.validation-summary-errors { color: var(--hdred); }
.validation-summary-valid { display: none; }
.text-success { font-size: 1.5em; background-color: var(--instock-pale); padding: 0.5em; }
.validationhelper{padding:0.3em 0 0.4em;}
.display-label, .editor-label { margin: 0 0 0 0; clear: both; display: block; width: 148px; padding: 5px 0px; line-height: 1.1em; }
.display-field, .editor-field { margin: 0 0 0.4em 0; position: relative; }
.form-group { position: relative; clear: both; }
.form-group label { clear: both; display: block; padding: 0.5em 2% 0.2em 0; font-size: 0.9em; color: var(--text-faint); font-weight:bold; }
.form-group div { margin-bottom: 1em; line-height: 150%; }
.form-group div span { display: block; font-size: 1.1em; padding: 0.3em 2% 0.5em 0; }
.form-group div div { float: none; width: auto; }
.form-group div input[type='text'], .form-group div input[type='password'], .form-group div select, .form-group textarea, .form-group div input[type='email'] { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; }
.form-group div select.width100, .form-group div input[type='text'].width100 { width: 100px; }
.form-group-required label { color: var(--black); }
.form-group-required input, .form-group-required div input[type='text'], .form-group-required textarea { }
.form-group input:focus, .form-group div input[type='text']:focus, .form-group textarea:focus { border-color: var(--grey-99); }
.form-group button { width: auto; }
.form-other { display: none; }
#content .radiogroup input[type="radio"] { display: none; }
#content .form-group label.radio { width: 95%; background-color: var(--grey-ee); text-align: left; padding: 0.3em 0.6em; display: block; border: none; cursor: pointer; margin-bottom: 0.7em; }
#content input[type="radio"]:checked + label.radio { background-color: var(--brightblue); color: white; }
#content .radiogroup i { font-size: 1.5em; }
input[type="radio"] + label.radio svg.radioselected { display: none; }
input[type="radio"]:checked + label.radio svg.radiounselected { display: none; }
input[type="radio"] + label.radio svg.radiounselected { display: inline; }
input[type="radio"]:checked + label.radio svg.radioselected { display: inline; }
svg.radiounselected { fill: var(--grey-99); }
#content #deliverypanel { background: var(--grey-f7); padding: 0.8em; margin-bottom: 0.7em; border-radius: 4px; }
#content #deliverypanel .deliveryaddresslist { max-height: 22em; overflow-y: auto; }
#content #deliverypanel .deliverypanelbuttons { margin-top: 0.5em; }
#content #deliverypanel .deliverypanelbuttons .buttons { margin-right: 0.5em; }
#content #deliveryaddresssearch { margin-bottom: 0.7em; }
.form-group .checkbox label, .form-group .checkbox input { float: none; width: auto; display: inline; }
.checkbox input[type="checkbox"] { opacity: 0; position: absolute; }
.checkbox label { position: relative; display: inline-block; padding-left: 22px !important; padding-top: 3px !important; cursor: pointer; }
.checkbox label::before,
.checkbox label::after { position: absolute; content: ""; display: inline-block; }
.checkbox label::before { height: 16px; width: 16px; border: 1px solid var(--grey-cc); background-color: var(--panel-bg); left: 0px; top: 3px; }
.checkbox label::after { height: 5px; width: 9px; border-left: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg); left: 4px; top: 7px; }
.checkbox input[type="checkbox"] ~ label::after { content: none; }
.checkbox input[type="checkbox"]:checked ~ label::after { content: ""; }
.checkbox input[type="checkbox"]:focus ~ label::before { }
.StandardTable { border: 0px; width: 100%; border-collapse: collapse; padding: 2px; margin: 0px 0px 10px 0px; }
.StandardTable TD { border-bottom: solid 0px var(--grey-dd); border-top: solid 0px var(--grey-dd); border-width: 0px; padding: 0.5em 0.7em 0.5em; background: var(--panel-bg); }
.StandardTable TR.lines TD { border-top: solid 2px var(--grey-dd); }
.StandardTable TD { vertical-align: top; border-top: solid 1px var(--grey-dd); }
.StandardTable td.notop { border-top: solid 1px var(--grey-dd); }
.StandardTable TD TD { border: 0px var(--grey-dd) solid; padding: 0px; vertical-align: middle; }
.StandardTable .Titles { font-size: 1.1em; color: var(--hdred); }
.StandardTable .Titles TH { padding: 0.5em 0.5em 0.5em 0; font-size: 1.1em; }
.StandardTable td.money, .StandardTable th.money { text-align: right; }
.StandardTable td.quantitycol, .StandardTable th.quantitycol { text-align: center; }
.StandardTable th.leftalign { text-align: left; }
.StandardTable .Titles a { color: var(--white); }
.StandardTable .Titles a:hover { color: var(--black); }
.StandardTable .larger { font-size: 1.2em; }
.startable { break-inside: avoid-column; -webkit-column-break-inside: avoid; }
.startable tr th { background-color: var(--panel-bg); padding-left: 1em; }
.startable tr.Titles th { text-align: center; width: 20%; background-color: transparent; }
.startable th { vertical-align: middle !important; }
.startable tr td { text-align: center; color: var(--hdred); font-size: 1.2em; }
.startable .Titles a { color: var(--hdred); }
.startable tr td, .startable tr th { border-bottom: solid 1px var(--grey-cc); font-weight: normal; }
.ListTable tr.clickable:hover { cursor: pointer; }
.ListTable { border-width: 0px; border-color: var(--grey-bb); border-style: solid; border-collapse: collapse; padding: 2px; margin: 0px; width: 100%; }
.ListTable TD { border: 1px var(--grey-ee) solid; padding: 0.7em; border-style: solid; background-color: var(--panel-bg); border-left: 0px; border-right: 0px; }
.ListTable TR.Titles a { color: var(--grey-ee); text-decoration: underline; }
.ListTable TR.Titles a:hover { color: var(--white); }
.ListTable TD TD { border: 0px var(--grey-dd) solid; padding: 1px; }
.ListTable TR.Titles { color: var(--white); color: var(--plum); font-size: 1.1em; }
.ListTable TR.Titles th, .ListTable TR.Titles td { padding: 0.5em 0.7em 0.5em 0.5em; font-size: 1.2em; color: var(--hdred); font-weight: normal; background-color: white; border-bottom: 2px solid var(--grey-ee); }
.ListTable TR.Titles th { text-align: inherit; }
.ListTable td.money, .ListTable TR.Titles th.money { text-align: right; }
.ListTable TR:hover td { background-color: var(--grey-f0); }
.ListTable TR.PagerRow TD, .ListTable TR.PagerRow:hover TD { background-color: var(--panel-bg); }
.ListTable TR.boldrow TD { font-weight: bold !important; }
.ListTable td.tdbtn { text-align: center; padding: 0; }
#content .ListTable td.tdbtn a { color: var(--hdred); font-size: 1.2em; display: block; padding: 0.7em; white-space: nowrap; }
#content .ListTable td.tdbtn a svg { fill: var(--hdred); }
#content .ListTable tr:hover td.tdbtn a:hover { background-color: var(--hdred); color: var(--white); text-decoration: none; }
#content .ListTable tr:hover td.tdbtn a:hover svg { fill: var(--white); }
#content .ListTable td.tdactions { display: flex; gap: 0.2em; justify-content: flex-end; align-items: center; }
#content .ListTable td.tdactions a { display: inline-flex; align-items: center; gap: 0.3em; }
#content .ListTable td.tdactions a.tdaction--danger { color: var(--grey-66); }
#content .ListTable td.tdactions a.tdaction--danger svg { fill: var(--grey-66); }
#content .ListTable tr:hover td.tdactions a.tdaction--danger:hover { background-color: var(--hdred); color: var(--white); }
#content .ListTable tr:hover td.tdactions a.tdaction--danger:hover svg { fill: var(--white); }
td.text-right, th.text-right { text-align: right; }
td.text-centre, th.text-centre { text-align: center; }
tr.boldrow td { font-weight: bold; }
.paging_full_numbers a.paginate_button:hover { color: var(--black); background-color: var(--grey-cc); }
.paging_full_numbers a.paginate_active { background-color: var(--plum); color: var(--white); text-decoration: none; }
.paging_full_numbers a.paginate_button:hover { color: var(--black); background-color: var(--grey-cc); }
.paging_full_numbers a.paginate_active { background-color: var(--plum); color: var(--white); text-decoration: none; }
.dataTables_filter { float: left !important; padding: 0.5em 0em !important; border-bottom: solid 0 var(--grey-bb); }
.dataTables_length { float: right; padding: 10px 0 10px 10px; height: 20px; }
.dataTable { clear: both; }
.dataTables_info { clear: both; padding: 10px 10px 10px 0; }
.dataTable thead th { cursor: pointer; }
.dataTables_filter input { margin-left: 1em; }
.datatablesearch{ padding-bottom:1em;}
.datatablesearch input {background: var(--panel-bg) !important;}
table.dataTable thead td, table.dataTable tfoot td, table.dataTable.no-footer { border: none; }
.locked { color: var(--hdred); font-weight: bold; }
.unlockinfo { color: var(--grey-99); }
.overflowx { overflow-x: auto; }
.discounttab { position: absolute; background: var(--salecolor); text-align: center; margin: 0.5em auto; color: var(--white); font-size: 1.2em; padding: 0.3em 0.5em; }
.discountbanner { background-color: var(--salecolor); padding: 0.5em 1em; text-align: center; width: auto; font-size: 1.2em; color: var(--white); margin-bottom: 1em; }
#content .plitem.link { cursor: pointer; }
#content .productlist .plitem.bestsellers:hover, #content .productlist .plitem.discounts:hover, #content .productlist .plitem.suggestions:hover { border: none; }
#content .paleblue { background-color: var(--dustyblue-pale) !important; background-color: var(--dustyblue-overlay); }
#content .brightblue { background: var(--hdred) !important; background-color: var(--sky-overlay); }
#content .relatedcategories { background-color: var(--slate-overlay-soft); }
#content .plitem .plitemblock { color: var(--white); font-size: 1.4em; padding: 1em; text-align: left; line-height: 1.5em; }
#content h1.pagetitle { max-width: var(--pagewidth); margin: 0 auto; display: block; padding: 1em 0 0; }
#content h2.listtitle { padding: var(--sectiongap) 0 var(--headinggap); font-weight: bold; max-width: var(--pagewidth); margin: 0 auto; display: block; box-sizing: border-box; }
#content .productlist { position: relative; padding: 1em 0 0; margin: 0em auto 0; }
#content .plitem .qty {text-align: center; }
#content .plimage { margin: 1em; text-align: center; background-repeat: no-repeat; background-size: contain; background-position: center center; height: 8em; display: block; transition: opacity 0.2s ease, transform 0.2s ease; opacity:0.9;}
#content .plimage:hover { transform: scale(1.03); opacity: 1; }
#content .plitem .qty:disabled { background-color: var(--panel-bg); color: var(--grey-99); }
#content .pldetails { padding:0 1em 1em; text-align: center; }
#content .plheading { padding: 1em 1em 0; color: var(--grey-33); font-size: 1.1em; text-align:center; }
#content .plitem select, #content .productbuy select { border: solid 1px var(--grey-cc); width: 100%; border-collapse: collapse; margin: 4px auto; }
#content .productlist .plitem { padding-bottom:1em; background: var(--panel-bg); width: auto; position: relative; border: 1px solid var(--panel-bg); }
#content .productlist .plitem:hover { border-color: var(--brightblue); }
#content .productlist .plitem.plitemloggedin { padding-bottom: 5.5em; }
#content .productlist .plitem .favourite { display:none; }
#content .productlist .plitem .codeandstock { }
#content .productlist .plitem .plprice { position: absolute; bottom: 3em; left:1em; right:1em; font-size:1.2em;}
#content .plitem .DecreaseLink{ background-color:var(--grey-99); border-color:var(--grey-99);}
#content .plitem.plitemadded .DecreaseLink { border: 1px solid var(--brightblue); background: var(--brightblue); }
#content .bestsellers h2, #content .discounts h2, #content .suggestions h2, #content .relatedcategories h2, #content .productreviews h2 { color: var(--white); margin: 0; padding: 0 0 0; font-weight: bold; font-size: 1.8em; }
#content .bestsellers p, #content .discounts p, #content .suggestions p, #content .relatedcategories p { color: var(--white); font-size: 1em; line-height: 150%; }
#content .productlist { position: relative; display: grid; grid-template-columns: repeat(auto-fill,minmax(13em, 1fr)); grid-gap: 1em; }
#content .productlist .plitem.bestsellers,
#content .productlist .plitem.discounts,
#content .productlist .plitem.suggestions { padding-bottom: 0em; }
#content .productlist .plitem.bestsellers { background-color: var(--brightblue); border: none; }
#content .productlist .plitem.suggestions { background-color: var(--hdred); border: none; }
#content .productlist .plitem.discounts { background-color: var(--salecolor); border: none; } 
.discounttab { position: absolute; background: var(--salecolor); text-align: center; margin: 0.5em auto; color: var(--white); font-size: 1.2em; padding: 0.3em 0.5em; z-index: 2; }
.discountbanner { background-color: var(--salecolor); padding: 0.5em 1em; text-align: center; width: auto; font-size: 1.2em; color: var(--white); margin-bottom: 1em; }
#content .plitem.link { cursor: pointer; }
#content .productlist .plitem.bestsellers:hover, #content .productlist .plitem.discounts:hover, #content .productlist .plitem.suggestions:hover { border: none; }
#content .paleblue { background-color: var(--dustyblue-pale) !important; background-color: var(--dustyblue-overlay); }
#content .brightblue { background: var(--hdred) !important; background-color: var(--sky-overlay); }
#content .relatedcategories { background-color: var(--slate-overlay-soft); }
#content .plitem .plitemblock { color: var(--white); font-size: 1.4em; padding: 1em; text-align: left; line-height: 1.5em; }
#content .productlist .plitem { padding: 0px; background: var(--panel-bg); width: auto; position: relative; }
#content .productlist plitem:hover { border-color: var(--brightblue); }
#content .productlist { position: relative; padding: 1em 0 0; margin: 0em auto 0; }
#content .sortbar { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; max-width: var(--pagewidth); margin: 0 auto; padding: 1em 0 0; }
#content .sortbar .sortcount { margin: 0; color: var(--text-faint); }
#content .sortbar .sortby { display: flex; align-items: center; gap: 0.5em; white-space: nowrap; }
#content .sortbar .sortby span { color: var(--text-faint); }
#content .sortbar select { font-size: 1rem; height: 2.5rem; padding: 0 0.6em; margin: 0; width: auto; background: var(--panel-bg); color: inherit; border: 0; border-radius: 4px; cursor: pointer; }
#content .sortbar select:hover { background: var(--grey-ee); }
#content .sortbar select:focus-visible { outline: 2px solid var(--brightblue); outline-offset: 1px; }
#content .sortbar-left { display: flex; align-items: center; gap: 1em; }
#content .filterbtn { display: inline-flex; align-items: center; gap: 0.5em; font-size: 1rem; box-sizing: border-box; height: 2.5rem; padding: 0 0.9em; margin: 0; background: var(--panel-bg); color: inherit; border: 0; border-radius: 4px; cursor: pointer; font-weight: bold; }
#content .filterbtn:hover { background: var(--grey-ee); }
#content .filterbtn:focus-visible, #content .filterpanel button:focus-visible, #content .filterpanel input:focus-visible, #content .filterchips a:focus-visible { outline: 2px solid var(--brightblue); outline-offset: 1px; }
#content .filtericon { width: 1em; height: 1em; }
#content .filterchips { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; max-width: var(--pagewidth); margin: 0.7em auto 0; padding: 0; }
#content .filterchips li { list-style: none; margin: 0; padding: 0; }
#content .filterchips a { display: inline-flex; align-items: center; box-sizing: border-box; height: 2.5rem; padding: 0 0.8em; background: var(--panel-bg); border: 0; border-radius: 4px; color: inherit; text-decoration: none; }
#content .filterchips a span { margin-left: 0.3em; color: var(--brightblue); }
#content .filterchips a:hover { background: var(--brightblue); color: var(--white); }
#content .filterchips a:hover span { color: var(--white); }
#content .filterchips a.filterclear, #content .filterpanel a.filterclear { border: 0; background: none; text-decoration: underline; color: var(--brightblue); padding-left: 0.3em; }
#content .filterchips a.filterclear:hover { background: none; color: var(--brightblue); }
#content .filterpanel { position: fixed; inset: 0 auto 0 0; width: min(22rem, 100%); height: 100%; max-width: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--panel-bg); color: inherit; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3); }
#content .filterpanel::backdrop { background: rgba(0, 0, 0, 0.45); }
#content .filterpanel[open] { display: flex; }
#content .filterform { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; }
#content .filterpanel-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--rail); border-bottom: 1px solid var(--grey-cc); }
#content .filterpanel-head h2 { margin: 0; font-size: 1.4em; }
#content .filterclose { font-size: 1.3rem; line-height: 1; padding: 0.3em 0.5em; margin: 0; background: none; border: 0; color: inherit; cursor: pointer; }
#content .filterpanel-body { flex: 1; overflow-y: auto; padding: 0.5rem var(--rail) 1rem; }
#content .filterpanel fieldset { border: 0; margin: 0; padding: 1rem 0 0.5rem; border-bottom: 1px solid var(--grey-cc); }
#content .filterpanel fieldset:last-child { border-bottom: 0; }
#content .filterpanel legend { font-weight: bold; padding: 0 0 0.5em; font-size: 1.05em; }
#content .filteropt { display: flex; align-items: center; gap: 0.7em; padding: 0.55em 0; cursor: pointer; }
#content .filteropt input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--brightblue); flex: none; }
#content .filteropt .filtercount { margin-left: auto; color: var(--text-faint); }
#content .filterpanel-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1rem var(--rail); border-top: 1px solid var(--grey-cc); }
#content .filterapply { font-size: 1rem; font-weight: bold; padding: 0.7em 1.4em; margin: 0; background: var(--brightblue); border: 1px solid var(--brightblue); color: var(--white); cursor: pointer; }
@media screen and (max-width: 575px) {
#content .sortbar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6em 0.6em; }
#content .sortbar-left { display: contents; }
#content .sortbar .filterbtn { grid-column: 1; grid-row: 1; }
#content .sortbar .sortby { grid-column: 2; grid-row: 1; justify-self: end; max-width: 100%; }
#content .sortbar .sortby span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#content .sortbar select { max-width: 100%; }
#content .sortbar .sortcount { grid-column: 1 / -1; grid-row: 2; }
#content .filterpanel { width: 100%; }
}
#content .filtertoggles { display: none; }
@media screen and (min-width: 1000px) {
#content .sortbar .filterbtn, #content .filterchips { display: none; }
#content .filtertoggles { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; }
#content .filtertoggle, #content .filterprice summary { display: inline-flex; align-items: center; gap: 0.5em; box-sizing: border-box; height: 2.5rem; padding: 0 0.8em; background: var(--panel-bg); border: 0; border-radius: 4px; color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
#content .filtertoggle:hover, #content .filterprice summary:hover { background: var(--grey-ee); text-decoration: none; }
#content .filtertoggle.on, #content .filterprice.on summary, #content .filtertoggle.on:hover, #content .filterprice.on summary:hover { background: var(--brightblue); color: var(--white); }
#content .filtertoggle:focus-visible, #content .filterprice summary:focus-visible, #content .filterprice a:focus-visible, #content .filtertoggles .filterclear:focus-visible { outline: 2px solid var(--brightblue); outline-offset: 1px; }
#content .filtertick { width: 0.9em; height: 0.9em; border: 1px solid currentColor; flex: none; position: relative; }
#content .filtertoggle.on .filtertick::after { content: ""; position: absolute; left: 0.25em; top: 0.02em; width: 0.25em; height: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#content .filtertoggles .filterclear { color: var(--brightblue); text-decoration: underline; margin-left: 0.3em; }
#content .filterprice { position: relative; }
#content .filterprice summary { list-style: none; }
#content .filterprice summary::-webkit-details-marker { display: none; }
#content .filterprice summary::after { content: ""; width: 0.4em; height: 0.4em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-0.15em) rotate(45deg); margin-left: 0.2em; }
#content .filterprice ul { position: absolute; z-index: 20; top: calc(100% + 0.3em); left: 0; min-width: 14em; list-style: none; margin: 0; padding: 0.3em 0; background: var(--panel-bg); border: 0; border-radius: 4px; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2); }
#content .filterprice li { list-style: none; margin: 0; }
#content .filterprice a { display: flex; gap: 1em; padding: 0.55em 1em; color: inherit; text-decoration: none; white-space: nowrap; }
#content .filterprice a:hover { background: var(--blue-tint); }
#content .filterprice a[aria-current] { font-weight: bold; color: var(--brightblue); }
#content .filterprice .filtercount { margin-left: auto; color: var(--text-faint); font-weight: normal; }
#content .sortbar { justify-content: flex-start; gap: 0.5em; }
#content .sortbar-left, #content .filtertoggles { display: contents; }
#content .filtertoggle, #content .filterprice { order: 1; }
#content .sortbar .sortby { order: 2; box-sizing: border-box; height: 2.5rem; padding-left: 0.8em; background: var(--panel-bg); border-radius: 4px; gap: 0; cursor: pointer; }
#content .sortbar .sortby:hover, #content .sortbar .sortby:hover select { background: var(--grey-ee); }
#content .sortbar .sortby select { background: transparent; }
#content .filtertoggles .filterclear { order: 3; }
#content .sortbar .sortcount { order: 4; margin-left: auto; }
}
#content .catdescmore { margin: 0.5em 0 0; padding: 0; background: none; border: 0; color: var(--brightblue); text-decoration: underline; font-size: 1rem; cursor: pointer; }
#content .catdescmore:focus-visible { outline: 2px solid var(--brightblue); outline-offset: 2px; }
@media screen and (max-width: 575px) {
#content .catdesctext.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
#content .catdesctext.clamp > * { display: inline; margin: 0; }
#content .catdesctext.clamp > * + *::before { content: " "; }
}
@media screen and (min-width: 576px) {
#content .catdescmore { display: none; }
}
@media screen and (max-width: 799px) {
#content .proddescription.clamp { max-height: 9.5em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
#content .proddescmore { display: inline-block; margin-bottom: 1em; }
}
#content .filterempty { max-width: var(--pagewidth); margin: 1em auto 0; padding: 2em var(--rail); background: var(--panel-bg); text-align: center; }
@media screen and (max-width: 575px) {
#content .productlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#content .productlist .pldetails { padding-left: 0.5em; padding-right: 0.5em; }
}
@media screen and (max-width: 359px) {
#content .productlist .cartitemquantity { grid-gap: 0.25em; }
}
#content .productlist .plitem2 { background: var(--panel-bg); padding: 1em; grid-column-start: 1; grid-column-end: 3; }
#content .plitemblock svg { float: right; font-size: 70%; }
#content .plitem .buyremove.buyremovedisabled { visibility: hidden; }
#content .plitem .buyremove{ visibility:visible;}
#content .productlist .plitem .plcode { display: none; }
#content .stockerror { color: var(--hdred); font-weight: 500; }
#content [hidden] { display: none !important; }
#content .lowstock { color: var(--hdred); font-weight: bold; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--panel-bg); color: var(--black); box-shadow: 0 -0.2rem 0.8rem rgba(0, 0, 0, 0.18); }
.buybar[hidden], .buybar [hidden] { display: none !important; }
html.buybarshown body { padding-bottom: 4.5rem; }
.buybarprice { font-size: 1.3rem; font-weight: bold; }
.buybarstep { display: inline-flex; align-items: center; gap: 0.6rem; }
.buybarbtn { width: 2.6rem; height: 2.6rem; font-size: 1.4rem; line-height: 1; border: 0; border-radius: 4px; background: var(--brightblue); color: var(--white); cursor: pointer; }
.buybarbtn[data-buybar=minus] { background: var(--grey-99); }
.buybarbtn:disabled { background: var(--grey-99); opacity: 0.6; cursor: not-allowed; }
.buybarqty { min-width: 2.2rem; text-align: center; font-size: 1.2rem; font-weight: bold; }
.buybarchoose { font-size: 1rem; padding: 0.6rem 1rem; border: 0; border-radius: 4px; background: var(--brightblue); color: var(--white); cursor: pointer; }
.buybaroos { color: var(--hdred); font-weight: bold; } 
.buybar button:focus-visible { outline: 2px solid var(--brightblue); outline-offset: 2px; }
#content .opt:focus-visible, #content .IncreaseLink:focus-visible, #content .DecreaseLink:focus-visible { outline: 2px solid var(--brightblue); outline-offset: 2px; }
#content .IncreaseLink.atmax { background-color: var(--grey-99); border-color: var(--grey-99); cursor: not-allowed; }
#headerbasket.updating #cart-status { opacity: 0.45; transition: opacity 0.15s; }
#content .plstockerror { color: var(--hdred); text-align: center; clear: both; line-height: 150%; display: block;}
#content .plstockerror:empty { display: none !important; }
#content .plitem .plprice { padding: 0 0 0.5em 0; font-size: 1.1em; display: block; text-align: center; font-weight: bold; }
#content .plitem .pricevat, #content .plfromvat { font-size: 0.5em; color: var(--grey-66); display: block; font-weight:normal; }
#content .plitem .wasprice { font-size: 0.8em; text-decoration: line-through; color: var(--salecolor-text); margin-right: 1em; }
#content .plfrom { color: var(--grey-66); font-weight:normal; }
#content .incvat { color: var(--grey-66); font-size: 0.8em; }
#content .plitem .plprice .incvat { font-weight: normal; }
#content .plitem .plfromprice, #content .plitem .plrealprice { color: var(--black); font-weight: bold; font-size: 1.1em; }
#content .unitarea { clear: both; }
#content .unitvalue { font-size: 1.1em; text-align: center; padding: 0.5em 0; }
#content .plfromvat .plfrom{font-size: 0.8em;}
#content .subcats { padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; grid-gap: 1em; align-content: start; }
@media screen and (min-width: 576px) {
#content .subcats { display: flex; flex-wrap: wrap; gap: 0.6em; }
#content .subcats .subcat { padding: 0.6em 1em; white-space: nowrap; }
}
#content .subcats .subcat { display: flex; align-items: center; padding: 0.8em 1em; background: var(--panel-bg); box-sizing: border-box; margin: 0; text-align: left; line-height: 1.3; }
#content .subcats .subcat span.catname { padding: 0; }
#content .searchcatstitle { font-size: 1.1em; margin: 1em 0 0.6em; }
#content .searchcats { margin: 0 0 0.5em; }
@media screen and (max-width: 575px) {
#content .searchcats { display: flex; flex-wrap: nowrap; gap: 0.6em; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; }
#content .searchcats::-webkit-scrollbar { display: none; }
#content .searchcats .subcat { flex: none; white-space: nowrap; padding: 0.6em 1em; }
}
a.subcat span.catname { }
#content .subcats a:hover { text-decoration: none; color:var(--white); background:var(--brightblue); }
.readmore { display: none; }
.readmorebutton .fa { display: inline; }
.readmorebutton { cursor: pointer; white-space: nowrap; }
#content .readmoreup { display: none; }
.catdesc { padding: 1em; background-color: var(--panel-bg); border-radius:4px; max-width:var(--pagewidth); margin:1em 0; }
.categoryproducts { width: 67%; float: right; }
.subcategorydescription { width: 48%; float: left; box-sizing: border-box; background-color: var(--panel-bg); }
.description { border: 0px; line-height: 1.3em; }
.description p, .description ul { line-height: 150%; }
#content ul { padding: 2px 0px 5px 30px; }
#content ul li { list-style: disc; margin: 2px 0px 5px 0px; }
#content .OutOfStock { color: var(--hdred); font-weight: 500; }
#productratingtop { cursor: pointer; height: 2.5em; line-height: 1.5em; }
#prodflex .col { padding: 1em; box-sizing: border-box; background-color: var(--panel-bg); }
.product-description-container{ }
#content .messagebox.maxqty { margin: 1em 0; }
#productbuy, #productinfo, #productimages { float: none; width: auto; margin: 1em 0 0em; padding: 0; }
#productimages .responsive-container { display:none; }
#content #price { font-size: 1.7em; }
#content #productbuy .productddls select { width: 100%; margin: 0.3em 0; padding: 0.3em 0.3em; }
#productbuy .plpricearea { }
#productbuy .productcodestock { min-height: 4em; float: left; }
#content #productbuy.plitem .plcode { float: left; width: auto; text-align: right; margin-bottom: 0; }
#content #productbuy.plitem .plcode span { font-weight: bold; color:var(--black); }
#content #productbuy.plitem .plstock { float: left; width: auto; text-align: right; clear: left; margin-bottom: 0; }
#content #productbuy .plrealprice { display: block; }
#content #productbuy .wasprice { display: block; }
#content .stockerror { color: var(--hdred); font-weight: 500; }
#productbuy .productcodestock div, #productbuy .unitarea { padding: 0.3em 0 0; display: block; }
#content #productbuy.plitem .buyremove { clear: both; }
#productbuy .productcodestock div { margin-bottom: 0.5em; }
#content .ProductImageSingle { border: solid 1px var(--grey-66); }
#content .ProductFiles { clear: both; padding-top: 10px; float: left; margin-bottom: 30px; }
#content #productbuy.plitemadded input[type="submit"] { display: none; }
#productbuy input[type="text"].quantity { width: 2em; border: none; height: 1.5em; text-align: center; padding: 0.3em 0.5em; background-color: var(--panel-bg); outline: none; }
#socialshare { padding: 1em 0px 1em; }
#socialshare a { font-size: 1.7em; color: var(--white); display: block; width: 1.2em; height: 1.2em; line-height: 1.3em; text-align: center; font-weight: normal; float: right; margin-right: 0.2em; }
#socialshare a.facebook svg { fill: var(--facebook); }
#socialshare a.twitter svg { fill: var(--twitter); }
#socialshare a.googleplus { background-color: var(--hdred); }
#socialshare a.facebook:hover svg { fill: var(--hdred); }
#socialshare a.twitter:hover svg { fill: var(--hdred); }
#socialshare .share { font-size: 1.7em; height: 1.2em; line-height: 1.25em; padding: 0 0.5em; float: left; background-color: var(--grey-99); color: white; margin-right: 0.2em; }
.fb-like.fb_iframe_widget span { top: -1px; }
#content #productinfo .favourite { cursor: pointer; padding-left: 0em; float: left; display: block; line-height: 2em; padding-right: 2em; }
#content #productinfo .favourite span:hover { color: var(--hdred); }
#content #productinfo .favourite svg { font-size: 1.4em; fill: var(--hdred); float: left; padding: 0.2em 0 0 0; }
#content #productinfo .favourite span { font-size: 1.1em; display: block; float: left; padding: 0.1em 0 0 0.5em; }
#content ul.productdownloads { margin: 0px; padding: 0px; }
#content ul li.filetypepdf { list-style: none; background: url(https://cdn.hygienedepot.co.uk/hd/pdf.gif) no-repeat top left; padding: 1px 0px 10px 24px; margin: 0px 0px 10px 0px; }
#productinfo h3 { margin-top: 40px; }
#content #productinfo h2 { margin: 0 0 0.8em; line-height: 140%; }
.reviewgrid{display:grid; grid-template-columns:180px auto;}
#content .review { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 1em; padding: 0.8em 0; border-top: 1px solid var(--grey-dd); }
#content .review:first-child { border-top: 0; }
#content .review:focus { outline: none; }
@media screen and (max-width: 575px) {
#content .review { grid-template-columns: minmax(0, 1fr); }
}
#content .reviewbars { list-style: none; margin: 0 0 1em; padding: 0; max-width: 26em; }
#content .reviewbars li { display: grid; grid-template-columns: 4em 1fr 2.5em; align-items: center; gap: 0.6em; margin: 0.25em 0; list-style: none; }
#content .reviewbar { height: 0.6em; background: var(--grey-dd); border-radius: 4px; overflow: hidden; }
#content .reviewbar span { display: block; height: 100%; background: var(--gold); }
#content .reviewbarcount { text-align: right; color: var(--text-faint); }
#content .reviewmore { margin: 0.5em 0 1em; padding: 0.6em 1.2em; font-size: 1rem; background: var(--panel-bg); color: inherit; border: 1px solid var(--grey-cc); cursor: pointer; }
#content .reviewmore:hover { border-color: var(--brightblue); }
#content .reviewmore:focus-visible { outline: 2px solid var(--brightblue); outline-offset: 1px; }
.reviewdate{ color:var(--grey-99);}
#content div.reviewreplies {display: none; color: var(--black); }
#content p.reviewrating{margin:0; padding: 0;}
.showreplies { font-weight: bold; cursor: pointer; }
.showreplies .hidebtn { display: none; }
.subheadrating{ font-size:0.8em;}
*.unselectable { -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
#content #productinbasketcount { margin: 1em 0 1em; text-align: center; }
#content #productinbasketcount a { background: var(--darkblue); color: var(--white); padding: 0.5em; margin: 1em auto; text-decoration: none; display: inline-block; }
#content p.subtitle { font-size: 1.2em; color: var(--hdred); margin: 0.5em 0 0; margin: 0; }
#content .productinfo .plitem { width: auto; }
#content .productinfo .copyblock { margin-right: 0.5em; }
#content .productinfo #productbuy { background-color: var(--panel-bg); padding: 1em; margin-bottom: 1em; }
#content .productinfo #productdescription { background-color: var(--panel-bg); padding-top: 2em; }
#mainimagebox { width: auto; padding: 40%; max-height: 30em; text-align: center; border: 1px solid var(--blue-tint-cool); background-position: center center; background-repeat: no-repeat; background-size: contain; background-color: var(--panel-bg); margin-bottom: 1em; }
.swiper {
--swiper-theme-color: var(--brightblue);
--swiper-pagination-bullet-inactive-color: var(--text-strong);
}
.main-swiper { width: 100%; max-width: 600px; margin: 0 auto; max-height: 400px; height: 350px; position: relative; padding-bottom:2em; }
@media screen and (max-width: 799px) {
.main-swiper { height: min(350px, 64vw); }
}
#content .proddelivery { border-top: 1px solid var(--grey-dd); margin-top: 1em; padding-top: 0.5em; }
.main-swiper .swiper-wrapper { height: 100%; }
.main-swiper .swiper-slide { display: flex; justify-content: center; align-items: center; height: 100%; }
.main-swiper picture { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.main-swiper img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.main-swiper img.main-photo { width: 100%; height: 100%; }
.main-swiper .swiper-pagination { margin: 1em auto; display:block; bottom:-1em; }
.thumbs-grid { margin: 15px auto 0; display: none; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.thumbs-grid picture { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.thumbs-grid img { max-width: 90%; max-height: 90%; width: auto; height: auto; object-fit: contain; border-radius: 5px; opacity: 0.7; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
.thumbs-grid div { background: var(--panel-bg); border: 1px solid var(--grey-dd); border-radius: 5px; aspect-ratio: 4 / 3; display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; position: relative; }
.thumbs-grid div:hover img, .thumbs-grid div.active img { opacity: 1; transform: scale(1.03); }
.thumbs-grid div.active { border-color: var(--grey-99); }
@media (min-width: 768px) {
.thumbs-grid { display: grid; }
}
.video-slide { flex-direction: column; }
.video-tile { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; padding: 0; border: 0; background: var(--panel-bg); cursor: pointer; display: flex; justify-content: center; align-items: center; }
.video-tile:focus-visible { outline: 3px solid var(--brightblue); outline-offset: -3px; }
.video-title { position: absolute; left: 0; right: 0; bottom: 0.75em; padding: 0 0.5em; text-align: center; font-weight: bold; color: var(--text-strong); }
.video-frame { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; }
.video-note { margin: 0.25em 0 0; font-size: 0.85em; text-align: center; }
.lightbox .video-note { color: var(--white); }
.video-play { position: absolute; width: 3.5em; height: 3.5em; border-radius: 50%; background: rgba(0, 0, 0, 0.65); pointer-events: none; }
.video-play::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 0.7em 0 0.7em 1.1em; border-color: transparent transparent transparent var(--white); }
.thumbs-grid .video-play { width: 2em; height: 2em; }
.thumbs-grid .video-title { font-size: 0.7em; }
.thumbs-grid div:hover .video-play { background: rgba(0, 0, 0, 0.8); }
.lightbox { display: none; position: fixed; inset: 0; background: var(--shadow-heavy); z-index: 9999; justify-content: center; align-items: center; flex-direction: column; }
.lightbox.active { display: flex; }
.lightbox .swiper { width: 90%; height: 80%; }
.lightbox img { width: 100%; height: 100%; object-fit: contain; }
.lightbox .close-btn { position: absolute; top: 20px; right: 30px; color: var(--white); font-size: 2rem; cursor: pointer; z-index: 10000; }
.swiper-button-next,
.swiper-button-prev { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; top: 50%; }
.swiper-button-prev { left: 10px; }
.swiper-button-next { right: 10px; }
.swiper-button-next svg,
.swiper-button-prev svg { width: 3em; height: 3em; }
#content .swiper-button-next svg.icon, #content .swiper-button-prev svg.icon { fill: var(--grey-aa); opacity:0.5; }
.swiper-button-next::after,
.swiper-button-prev::after { content: none; }
*/
#content #productbuy.plitem .plcode { float: left; width: auto; text-align: right; margin-bottom: 0; }
#content #productbuy.plitem .plstock { float: left; width: auto; text-align: right; clear: left; margin-bottom: 0; }
#productbuy .productcodestock { line-height: 150%; font-size: 1.1em; margin-bottom: 1em; }
#content #productbuy #price { font-size: 2em; padding-bottom: 0.5em; float:right; }
#content #productbuy .plrealprice { display: block; }
#content #productbuy .wasprice { display: block; }
#content #productbuy .plfromprice, #content #productbuy .plrealprice, #content #productbuy .plfromvat, #content #productbuy .pricevat, #content #productbuy .plfromvat { clear: both; }
#content #productbuy .plpricearea { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 0.4em; line-height: 1.15; }
#content #productbuy .wasprice { order: -1; margin-right: 0; font-size: 0.55em; color: var(--text-soft); text-decoration: line-through; }
#content #productbuy .wasprice:empty { display: none; }
#content #productbuy .pricevat, #content #productbuy .plfromvat { flex-basis: 100%; text-align: right; margin-top: 0.3em; }
#content .plitem select option:disabled, #content .productbuy select option:disabled { background-color: var(--grey-dd); }
#content .outofstock { padding: 0.7em 0.5em; background-color: var(--grey-99); color: var(--white); font-size: 1.1em; text-align: center; position: absolute; bottom: 1em; left: 1em; right: 1em; line-height: 1em; }
#content .plitem .plrating { text-align: center; min-height: 1rem; }
.notext { line-height: 0; font-size: 0; color: transparent; position: absolute; }
label.notext { margin: 0; display: block; }
#productbuy .ddltitle {margin:0; padding:0em 0 0.2em; }
#productbuy .productddls {text-align:center; clear: both;}
#productbuy .productddls .optgroup { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7em; margin: 0 0 1.4em; }
#productbuy .productddls .unitarea { margin-bottom: 1em; }
#productbuy .productddls div.opt { display: inline-flex; align-items: center; justify-content: center; padding: 0.6em 1em; background-color: var(--panel-bg); border: 1px solid var(--grey-cc); color: var(--grey-33); margin: 0; text-decoration: none; user-select: none; cursor: pointer; }
@media screen and (max-width: 575px) {
#productbuy .productddls div.opt { flex: 1 1 auto; padding: 0.8em 1em; }
}
#productbuy .productddls div.opt.enabled { cursor: pointer; }
#productbuy .productddls div.opt.disabled { background: var(--grey-cc); color: var(--grey-66); border-color: var(--grey-cc); }
#productbuy .productddls div.opt.disabledselected { background: var(--grey-66); color: var(--grey-dd); border-color: var(--grey-66); }
#productbuy .productddls div.opt.selected { background-color: var(--brightblue); border-color: var(--brightblue); color: var(--white); text-decoration: none; cursor: pointer; }
#productbuy .productddls .choosefirst { display: flex; align-items: center; justify-content: center; min-height: 2em; margin: 0; color: var(--grey-66); font-style: italic; }
#productbuy .productddls .choosefirst[hidden] { display: none; }
#content .proddescription ul li, #content .plitem2 ul li { line-height: 140%; margin-bottom: 0.8em; padding-left: 0.5em; }
#content .proddescription ul li::marker, #content .plitem2 ul li::marker { content: "⚫ "; font-size: 9px; }
#content .proddescription ul li, #content .plitem2 ul li { line-height: 140%; margin-bottom: 0.8em; padding-left: 0.5em; }
#content .proddescription ul li::marker, #content .plitem2 ul li::marker { content: "⚫ "; font-size: 9px; }
#content ul.keyfacts { list-style: none; margin: 0; padding: 0.4em 0 0.6em; border-bottom: 1px solid var(--grey-dd); }
#content ul.keyfacts li { list-style: none; position: relative; margin: 0.5em 0; padding-left: 1.7em; line-height: 1.4; color: var(--text); }
#content ul.keyfacts li strong { font-weight: bold; color: var(--text-strong); }
#content ul.keyfacts li::before {
content: "";
position: absolute;
left: 0.1em;
top: 0.2em;
width: 1em;
height: 1em;
background-color: var(--instock-bright);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prodsection { max-height: 0; overflow: hidden; transition: max-height 0.6s ease; border-bottom: 1px solid var(--grey-dd); }
.prodsection.open { max-height: 1000px; }
.prodsectionhead .arrow { transition: transform 0.4s ease; }
.prodsectionhead.active .arrow { transform: rotate(180deg); }
.prodsection.reviewgrid{ border-bottom:none;}
#content h2.prodsectionhead { cursor: pointer; user-select: none; padding:1em 0; margin:0; }
#content h2.prodsectionhead svg.arrow{ fill:var(--grey-cc);}
#content h2.prodsectionhead.active svg.arrow { transform: rotate(180deg); }
.prodsectionhead::after { transition: transform 0.6s ease; }
.prodsectionhead.active::after { transform: rotate(-180deg); }
.proddescription.expanded::after { display: none; }
#content #cookiecrumb { margin: 0 auto 0; position: relative; text-align: left; padding: 1em 0 0; color: var(--grey-99); }
#content #cookiecrumb a { color: var(--grey-66); white-space: nowrap; display: block; background-color: var(--panel-bg); float: left; padding: 1em; margin-right: 0; }
#content #cookiecrumb a.d1000 { display: none; }
#content #cookiecrumb a:hover { background-color: var(--hdred); text-decoration: none; color: var(--white); }
#content #cookiecrumb a:hover svg { fill: var(--white); }
.startable { break-inside: avoid-column; -webkit-column-break-inside: avoid; }
.startable tr th { background-color: var(--panel-bg); padding-left: 1em; }
.startable tr.Titles th { text-align: center; width: 20%; background-color: transparent; }
.startable th { vertical-align: middle !important; }
.startable tr td { text-align: center; color: var(--hdred); font-size: 1.2em; }
.startable .Titles a { color: var(--hdred); }
.startable tr td, .startable tr th { border-bottom: solid 1px var(--grey-cc); font-weight: normal; }
.startable svg { fill: var(--hdred); }
.cartgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(12em, 1fr)); grid-gap: 1em; margin-bottom: 2em; }
.cartitemblock { padding: 1em; background-color: var(--panel-bg); min-width: 10em; max-width: 25em; position: relative; padding-bottom:7em; }
.cartitemimage { display:block; width: auto; height: auto; padding: 30%; background-position: center center; background-repeat: no-repeat; background-size: contain; border: 0px solid var(--grey-dd); background-color: var(--panel-bg); }
.cartiteminfo { display:block; text-align:center; font-size:1.1em; line-height:150%; padding-top:1em; }
.cartitemdelete { position:absolute; top:1em; right:1em; }
.cartitemdelete svg{ fill:var(--hdred); color:var(--hdred); cursor:pointer; font-size:1.2em;}
#productbuy .cartitemquantity { display: grid; grid-template-columns: 8fr 1fr 1fr 1fr 8fr; grid-gap: 1em; }
.cartgrid .cartitemquantity, .productlist .cartitemquantity, .specialprices .cartitemquantity { position: absolute; bottom: 1em; left: 0; right: 0; display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 3fr; grid-gap: 0.5em; }
#content .plitem .cartitemquantity .qty { border: 1px solid var(--brightblue) !important; text-align: center; font-size: 1.2em; width: 2em; height: 1em; padding: 0.5em; }
.cartitemquantity .DecreaseLink, .cartitemquantity .IncreaseLink { display: block; background: var(--brightblue); font-size: 1.2em; width: 1em; height: 1em; padding: 0.5em; border: 1px solid var(--brightblue); cursor: pointer; }
.cartitemprice{ text-align:center; font-size:1.3em; font-weight:bold; position:absolute; bottom:3.5em; width:auto; display:block; left:0; right:0;}
.carttotals { background-color: var(--panel-bg); padding: 1em; margin-bottom: 1em;}
.carttotal { display:block; clear:both; height:2em; }
.carttotallabel { float: left; font-size: 1.2em; line-height:2em; color:var(--grey-66);}
.carttotalvalue { float: right; font-size: 1.2em; line-height: 2em; }
.cartbold{ font-weight:bold;}
#content .cartlayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: start; }
#content .cartlines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
#content .cartline {
list-style: none; margin: 0;
display: grid; align-items: center; gap: 0.6rem 0.9rem;
grid-template-columns: 4.5rem minmax(0, 1fr) auto;
grid-template-areas:
"img info info"
"each each total"
"qty qty remove";
padding: 0.9rem; background: var(--panel-bg); border-radius: 4px;
}
#content .cartlineimg { grid-area: img; display: block; width: 4.5rem; height: 4.5rem; background-size: contain; background-repeat: no-repeat; background-position: center; }
#content .cartlineinfo { grid-area: info; min-width: 0; }
#content .cartlinename { display: block; font-weight: bold; line-height: 1.35; text-decoration: none; }
#content .cartlinename:hover { text-decoration: underline; }
#content .cartlinemeta { display: block; margin-top: 0.25em; color: var(--text-faint); font-size: 0.95em; }
#content .cartlineeach { grid-area: each; color: var(--text-faint); }
#content .cartlineoffer { display: block; font-size: 0.9em; color: var(--hdred); font-weight: 600; }
#content .cartlineoffer s { color: var(--text-faint); font-weight: normal; margin-right: 0.3em; }
#content .cartlinetotal { grid-area: total; font-weight: bold; font-size: 1.2em; text-align: right; white-space: nowrap; }
#content .cartline .cartitemquantity { grid-area: qty; position: static; display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; }
#content .cartline .cartitemqtyinput { display: block; }
#content .cartlineremove { grid-area: remove; justify-self: end; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.5em 0.2em; margin: 0; background: none; border: 0; color: var(--text-faint); font-size: 1rem; cursor: pointer; }
#content .cartlineremove .icon { width: 0.9em; height: 0.9em; fill: currentColor; }
#content .cartlineremove:hover { color: var(--hdred); }
#content .cartlineremove:focus-visible { outline: 2px solid var(--brightblue); outline-offset: 2px; }
#content .cartsummary { background: var(--panel-bg); padding: 1rem; border-radius: 4px; }
#content .cartsummary h2 { margin: 0 0 0.5rem; font-size: 1.3em; }
#content .cartsummary .carttotals { padding: 0; margin-bottom: 1rem; }
#content .cartsummary .checkoutbtn { margin-bottom: 1rem; }
#content .cartdelivery { border-top: 1px solid var(--grey-dd); padding-top: 0.5rem; }
#content .cartempty { background: var(--panel-bg); padding: 1.5rem; border-radius: 4px; }
#content .cartemptylinks { display: flex; flex-wrap: wrap; gap: 0.8rem; }
#content .cartemptylinks .buttons { display: inline-block; font-size: 1.1em; padding: 0.6em 1em; }
@media screen and (min-width: 800px) {
#content .cartlayout { grid-template-columns: minmax(0, 1fr) 22rem; }
#content .cartsummary { position: sticky; top: calc(var(--headerh, 0px) + 1rem); }
}
@media screen and (min-width: 1280px) {
#content .cartline {
grid-template-columns: 5rem minmax(0, 1fr) 6.5rem auto 6.5rem 2.5rem;
grid-template-areas: "img info each qty total remove";
gap: 1rem;
}
#content .cartlineimg { width: 5rem; height: 5rem; }
#content .cartlineeach { text-align: right; }
#content .cartlineremove span { display: none; }
}
@media screen and (max-width: 799px) {
#content .cartcheckoutwrap { display: none; }
body:has(#checkoutbar) { padding-bottom: 4.5rem; }
}
@media screen and (min-width: 800px) {
.checkoutbar { display: none !important; }
}
.checkoutbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--panel-bg); color: var(--black); box-shadow: 0 -0.2rem 0.8rem rgba(0, 0, 0, 0.18); }
.checkoutbartotal { font-size: 1.2rem; font-weight: bold; }
.checkoutbarlabel { font-weight: normal; color: var(--text-faint); font-size: 0.9rem; }
#content .checkoutbar .checkoutbtn { font-size: 1.15rem; padding: 0.6em 1em; display: inline-block; margin: 0; }
#confirm2 .form-group div { margin-bottom: 1em; }
#confirm2 .form-group label { color: var(--grey-33); }
#confirm2 { background-color: var(--panel-bg); padding: 1em; margin-bottom: 1em; clear: both; }
#confirm1 { margin-bottom: 1em; }
#confirm2 .form-group div { margin-bottom: 1em; }
#confirm2 .form-group label { color: var(--grey-33); }
#confirm2 { background-color: var(--panel-bg); padding: 1em; margin-bottom: 1em; clear: both; }
#confirm1 { margin-bottom: 1em; }
.confirmblock.confirmtitles { display: none; }
.confirmblock { display: block; background-color: var(--panel-bg); padding: 1em; margin-bottom: 2px; }
.confirmcode { width: 15%; float: left; }
.confirmtitle { width: 80%; float: right; padding-bottom: 0.5em; }
.confirmquantity { float: left; margin-left: 20%; padding-bottom: 0.3em; }
.confirmquantity::before { content: "Quantity: "; width: 80px; display: inline-block; }
.confirmunitprice { display: block; clear: both; float: left; margin-left: 20%; padding-bottom: 0.3em; }
.confirmunitprice::before { content: "Unit price: "; width: 80px; display: inline-block; }
.confirmunits { display: block; clear: both; width: 100%; margin-left: 20%; padding-bottom: 0.3em; }
.confirmunits::before { content: "Units: "; width: 80px; display: inline-block; }
.confirmlineprice { float: right; text-align: right; font-weight: bold; }
.confirmblock:after { content: ""; display: table; clear: both; }
.confirmcode { font-weight: bold; }
.confirmtotalblock .confirmtitle { float: left; width: auto; padding-bottom: 0; }
.confirmtotalblock .confirmlineprice { float: right; text-align: right; font-weight: bold; }
#content .addressblocks { position: relative; display: grid; grid-template-columns: repeat(auto-fill,minmax(17em, 1fr)); grid-gap: 1em; margin-bottom: 2em; grid-auto-rows: 1fr; }
#content .addressblock { padding: 1em 3em 3em 1em; background: var(--panel-bg); width: auto; min-width: 14em; max-width: 25em; position: relative; line-height: 150%; border: 1px solid var(--panel-bg); }
#content .addressblock:hover { text-decoration: none; border: 1px solid var(--brightblue); }
#content .addressblock.addressselect{ padding:1em;}
#content .addressblock.addressselect svg { position: absolute; bottom: 1em; right: 1em; fill: var(--lightgrey); }
#content .addressblock.addressselect:hover svg.icon { fill: var(--brightblue); }
#content .addressblock .addressdelete { }
#content .addressblock .addressedit{ }
#content .addressblock.addressadd { border: dashed 1px var(--brightblue); text-align:center; }
#content .addressblock.addressadd span{ font-size:2em; padding:2em 0 0; display:block;}
#content .addressblock .addressbtns { position: absolute; bottom: 1em; left: 1em; }
#content .addressblock .addressdelete svg.icon { cursor: pointer; }
#content .addressdeleteform { display: inline; margin: 0; padding: 0; }
#content button.linkbutton { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--darkblue); cursor: pointer; text-decoration: none; }
#content button.linkbutton:hover { color: var(--black); text-decoration: underline; }
#content #addressselectbuttons a { text-align: center; max-width: 20em; }
.acctnav { background: var(--panel-bg); border-radius: var(--rounded, 5px); padding: 0.6rem 0; }
#accountdropdown .acctnav { padding: 0; }
#content .acctnav ul.accountactions, #accountdropdown .acctnav ul.accountactions { margin: 0; padding: 0; }
#content .acctnav ul.accountactions li, #accountdropdown .acctnav ul.accountactions li { list-style: none; margin: 0; padding: 0; }
.acctnav ul.accountactions li a, #accountdropdown .acctnav ul.accountactions li a {
display: flex; align-items: center; gap: 0.7rem; width: auto; min-width: 0; margin: 0;
padding: 0.5rem 1rem; border-radius: 0; background: none; border-left: 3px solid transparent;
color: var(--black); font-size: 1rem; line-height: 1.3; text-decoration: none;
}
.acctnav ul.accountactions li a .icon { flex: none; width: 1.05em; height: 1.05em; fill: var(--text-faint); }
.acctnav ul.accountactions li a:hover { color: var(--brightblue); text-decoration: none; }
.acctnav ul.accountactions li a:hover .icon { fill: var(--brightblue); }
.acctnav ul.accountactions li.selected a { color: var(--brightblue); font-weight: bold; border-left-color: var(--brightblue); }
.acctnav ul.accountactions li.selected a .icon { fill: var(--brightblue); }
.acctnav ul.accountactions li a:focus-visible { outline: 2px solid var(--brightblue); outline-offset: -2px; }
.acctnavgroup { margin: 1.1rem 1rem 0.2rem calc(1rem + 3px); font-size: 0.75rem; font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
#content p.acctnavgroup, #accountdropdown p.acctnavgroup { color: var(--text-faint); margin: 1.1rem 1rem 0.2rem calc(1rem + 3px); }
.acctnav ul.acctnavlogout { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--grey-dd); }
#content .acctnav ul.acctnavlogout, #accountdropdown .acctnav ul.acctnavlogout { margin-top: 0.8rem; padding-top: 0.8rem; }
.opt.selected svg.iconselected { display: block; }
.opt.selected svg.iconunselected { display: none; }
.opt.enabled svg.iconselected { display: none; }
.opt.enabled svg.iconunselected { display: block; fill: var(--darkblue); }
.opt svg { float: left; margin-right: 0.5em; }
#FooterContainer { margin: 0px auto; }
#Footer { padding: 1em; clear: both; color: var(--footer-text); background-color: var(--footer-bg); }
#Footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }
#Footer a, #Footer p { color: var(--footer-link); }
#Footer .col p.foottitle { font-size: 1.3em; padding: 10px 0px 2px; color: var(--white); }
#Footer #payment { visibility: hidden; display: none; }
#Footer .col ul { margin: 0px; padding: 0px; padding-bottom: 1em; }
#Footer .col ul li { list-style: none; padding: 0.3em 0; color: var(--white); }
#Footer .col ul li a { white-space: nowrap; text-decoration: none; }
#Footer p.footertitle { font-weight: normal; margin: 0px; font-size: 1.3em; color: var(--white); }
#Footer p { margin: 0px; padding: 5px 0px 8px; line-height: 150%; }
#Footer a:hover { text-decoration: none; color: var(--white); }
#Footer svg { fill: var(--footer-link); padding-right: 0.5em; }
#Footer a:hover svg { fill: var(--white); }
#Footer .footertheme {
display: inline;
text-align: left;
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
color: var(--footer-link);
white-space: nowrap;
cursor: pointer;
}
#Footer .footertheme .icon { fill: currentColor; }
#Footer .footertheme:hover { color: var(--white); }
#Footer .footertheme:hover svg { fill: var(--white); }
#articlelist { display: grid; margin: 0 auto; grid-template-columns: repeat(auto-fill,minmax(18em, 1fr)); grid-gap: 1em; }
#articlelist.articleshome { padding: 0; }
#content #articlelist.articleshome {
display: flex;
flex-wrap: nowrap;
gap: 1em;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0 0 1.2em;
}
#content #articlelist.articleshome::-webkit-scrollbar { display: none; }
#content #articlelist.articleshome > a {
flex: 1 0 18em;
}
@media screen and (max-width: 699px) {
#content #articlelist.articleshome > a { flex: 0 0 76%; }
}
#articlelist a { background-color: var(--panel-bg); padding-bottom: 2.5em; position: relative; }
#articlelist a span.articletitle { display: block; font-size: 1.2em; padding: 0.6em 0.6em 0.6em; line-height: 150%; }
#articlelist a span.articledate { display: block; color: var(--text-faint); position: absolute; bottom: 1em; left: 1em; }
#articlemain ol { margin: 0 0 1em 2em; }
#articlemain ol li { padding: 0 0 0.5em 0.5em; }
#articlemain img { max-width: 100%; height: auto; }
#articlemain img.note-float-left { margin: 0.25em 1rem 0.5rem 0; }
#articlemain img.note-float-right { margin: 0.25em 0 0.5rem 1rem; }
#articlemain img.note-align-center { margin-bottom: 1em; }
#articlemain img[width="100%"]:not(.note-float-left):not(.note-float-right) { width: 100% !important; max-width: 500px; }
#articlemain::after { content: ""; display: block; clear: both; }
@media screen and (max-width: 699px) {
#articlemain img.note-float-left, #articlemain img.note-float-right,
#articlemain img[style*="float: left"], #articlemain img[style*="float:left"],
#articlemain img[style*="float: right"], #articlemain img[style*="float:right"] {
float: none !important; width: 100% !important; margin: 0 0 1em !important;
}
}
#articlemain p.articledate { color: var(--text-faint); padding: 0.5em 0 1em; }
#articlemain { background-color: var(--panel-bg); padding: 1em; margin-bottom: 2em; }
ol.noindent { margin: 0 0 1em; padding: 0; }
#articleothers { }
.signinregister { max-width: 450px; margin: auto; }
.tabs { display: flex; width: 100%; margin-bottom:1em; }
.tab { flex: 1; background:none; text-align: center; padding: 12px 0; cursor: pointer; font-size: 1.2rem; border: none; border-bottom: 2px solid var(--lightgrey); transition: border-color 0.2s, color 0.2s; border-radius: 0; color:var(--midgrey); }
.tab.active { border-color: var(--brightblue); color: var(--brightblue); font-weight: bold; }
.tab:hover { background-color: var(--grey-f1); }
@media screen and (min-width:400px) {
#content .plitem.link { grid-column-start: 1; grid-column-end: 3; }
#content .productlist .plitem2 { grid-column-start: 1; grid-column-end: 3; }
}
@media screen and (min-width:625px) {
#content .productlist { position: relative; display: grid; grid-template-columns: repeat(auto-fill,minmax(14em, 1fr)); grid-gap: 1em; padding: 1em 0 0; }
#content .plitem.link { grid-column-start: auto; grid-column-end: auto; }
#content .plitem .plitemblock { font-size: 1.6em; }
#content .plitem .plitemblock svg { display: block; margin-top: 2em; clear: both; float: none; }
#content .plitem.link svg { transform: rotate(-90deg); }
}
@media screen and (min-width:576px) {
#header .Search { clear: none; margin: 0em auto; padding: 1.7em 1em 0; width: auto; max-width: 18em; display: flow-root; z-index: 990; }
#header .SearchInner { height: 2em; }
#header .form-wrapper { margin: 0; height: 40px; }
#header .form-wrapper input[type="text"],
#header .form-wrapper button { height: 40px; }
#header { min-height: 6em; background: var(--panel-bg); }
#content .productlist { position: relative; display: grid; grid-template-columns: repeat(auto-fill,minmax(15em, 1fr)); grid-gap: 1em; padding: 1em 0 0; }
#content .homeboxes a.hidemobile { display: block; }
#content .homeboxes .col h2, #content .homeboxes .col h1 { font-size: 3vw; }
#Footer .col { float: left; width: 20%; margin: 0px 20px; }
}
@media screen and (min-width:800px) {
#Logo a svg { width: 170px; height: 80px; }
nav.menu { display: block; }
.menu > ul > li { display: inline-block; float: left; }
.menu ul li.floatright { float: right; display: block; }
.menu a.offers { color: var(--salecolor-text); }
.menu a.offers:hover { border-bottom: 2px solid var(--salecolor-text); }
.menu a.eco { color: var(--instock-brighter); border-bottom: 2px solid var(--instock-brighter); }
.menu a.eco:hover { color: var(--instock-bright); border-bottom: 2px solid var(--instock-bright); }
#account a { cursor: pointer; }
#account ul { display: none; position: absolute; background-color: var(--hdred); padding: 0em; width: 16em; top: 2.6em; margin: 0; top: 2.6em; }
#account ul li a { float: none; padding: 0.2em 0.5em; }
#account ul li a:hover { background-color: var(--brightblue); }
.nosmall, a.nosmall, #account, #headerbasket, #phone { display: inline-block; }
#headerbasket svg, #account svg { padding: 0 0.4em 0 0; }
td.nosmall { display: table-cell; }
th.nosmall { display: table-cell; }
.navbar-toggle, #nbt, #search-toggle, #cart-toggle, #account-toggle { display: none; }
#account a span, #headerbasket a span { }
#phone a { padding: 0.3em 0.5em 0.3em 0.5em; }
#phone a:hover { background-color: var(--hdred); }
#phone { padding: 0.3em 0.5em; font-size: 1.4em; line-height: 1.15em; height: 1.15em; float: right; margin: 0 0 0 1em; cursor: pointer; }
#content .bodycopynopadding { padding: 1em 1em 0em; }
#headerbasket a, #account a, #social a, #phone a { color: var(--white); text-decoration: none; }
#headerbasket a:hover { color: var(--white); }
#headerbasket, #account { color: var(--white); float: right; }
#headerbasket a:hover, #account a:hover{ text-decoration: none; background-color: var(--hdred); }
#header .Search { max-width: 24em; }
#prodflex { display: grid; overflow: clip; grid-template-columns: auto 50%; grid-gap:1em; margin-bottom:1em; align-items: start; }
#prodflex .col { }
#prodflex .col { padding: 1em; box-sizing: border-box; background-color: var(--panel-bg); }
#prodflex > .col:nth-child(1) { grid-column: 1; grid-row: 1; }
#prodflex > .col:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--headerh, 0px) + 1rem); }
#prodflex > .col:nth-child(3) { grid-column: 1; grid-row: 2; }
#productimages .responsive-container { display:block; position: relative; width: 100%; border: 0px solid var(--grey-cc); margin-bottom: 10px; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: zoom-in; }
#productimages .dummy { padding-top: 80%; }
#productimages .img-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; font: 0/0 a; background-color: var(--panel-bg); }
#productimages .img-container .centerer { display: inline-block; vertical-align: middle; height: 100%; }
#productimages .img-container img { vertical-align: middle; display: inline-block; max-height: 100%; height: auto; max-width: 100%; }
#accountflex { display: flex; }
#content #actionlistcol { flex: 0 0 15rem; padding-right: 1.25rem; order: 1; }
#content #accountcol { margin-bottom: 0; order:2; flex: 1 1 auto; min-width: 0; }
.homeboxes { display: grid; grid-gap: 0.5em 1em; grid-template-columns: 1fr 1fr 1fr; }
#content .homeboxes a.col { display: block; }
#content .homeboxes .col { margin-top: 0; }
#content .homeboxes .col h2, #content .homeboxes .col h1 { font-size: 2vw; }
.catdescgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 1em; padding: 1em 0 0; margin: 0 auto; max-width: var(--pagewidth); }
.catdesc{ margin:0em; }
#content .subcats{margin:0;}
}
@media screen and (min-width:1000px) {
#articleflex { display: flex; }
#articlemain { flex: 0 0 50%; }
#articleothers { padding: 0 0 1em 2em; }
#account a span, #headerbasket a span, .d1000 { display: inline-block; }
.h1000, .nobig { display: none; }
.menu a { padding: 0em 1em; }
.formflex { display: flex; }
.formblock { width: 100%; }
#content #cookiecrumb span.current { color: var(--black); white-space: nowrap; display: block; background-color: var(--panel-bg); float: left; padding: 1em; margin-right: 0; }
#content #cookiecrumb a.d1000 { display: block; }
#cookiecrumb .cookiespace { display: block; padding: 0.5em 1em 0.5em 1em; float: left; }
#cookiecrumb .cookiespace svg.icon { fill: var(--panel-bg); }
#content .homeboxes .col { padding: 1.4em; }
#content .homeboxes .col h2, #content .homeboxes .col h1 { margin: 0; font-size: 2.3em; font-size: 2vw; line-height: 130%; }
.confirmflex { display: flex; }
#confirm1 { flex: 0 1 50%; }
#confirm2 { flex: 0 1 50%; margin-left: 1em; }
#prodflex { grid-template-columns: auto 40%; }
}
@media screen and (min-width: 1200px) {
.cartflex { display: flex; flex-direction: row-reverse; }
.shoppingcart { padding-right: 1em; box-sizing: border-box; flex: 1 1 auto; }
.checkoutblock { text-align: center; flex: 0 0 20em; }
.nobig { display: none; }
}
@media screen and (min-width:1400px) {
#content .homeboxes .col h2, #content .homeboxes .col h1 { font-size: 2.3em; }
.confirmlist { display: grid; grid-gap: 1em; grid-template-columns: repeat(4, auto); padding: 1em; background-color: var(--panel-bg); }
.confirmcode { width: 100%; }
.confirmblock.confirmtitles, .confirmblock { display: contents; }
.confirmquantity::before { content: none; }
.confirmblock:after { content: none; display: none; }
.confirmunits { color: var(--black); }
.confirmquantity { text-align: center; }
.confirmunitprice { display: none; text-align: right; padding: 0; }
.confirmlineprice { text-align: right; }
.confirmtotal { font-weight: bold; }
.confirmtitles { font-weight: bold; }
.confirmunits { display: none; }
.confirmtotal { grid-column: 2/4; }
.confirmunitprice { padding-bottom: 0; }
.confirmunitprice::before { content: none; }
.confirmunits { padding-bottom: 0em; }
.confirmunits::before { content: none; }
.confirmlist { display: grid; grid-gap: 1em; grid-template-columns: repeat(6, auto); padding: 1em; }
.confirmunits, .confirmunitprice, .confirmlineprice { display: block; }
.confirmtotal { grid-column: 2 / 6; }
}
.checkoutchrome #header { min-height: 0; padding-bottom: 0.5em; }
.checkoutchrome #header:after { content: ""; display: table; clear: both; }
#checkoutsecure, #checkoutphone { float: right; margin: 1.7em 0 0 1.2em; font-size: 1.1em; color: var(--grey-55); }
#checkoutphone a { color: var(--darkblue); white-space: nowrap; }
#checkoutphone svg.icon { padding-right: 0.3em; }
#checkoutfooter { max-width: var(--pagewidth); margin: 0 auto; padding: 1.5em 1em 2.5em; text-align: center; font-size: 0.95em; }
#checkoutfooter a { color: var(--darkblue); margin: 0 0.8em; line-height: 2em; }
#checkoutfooter span { display: block; margin-top: 0.6em; color: var(--text-faint); }
.checkoutchrome #PageWrapper { overflow: visible; }
#PageWrapper:has(#prodflex) { overflow: clip; }
#PageWrapper:has(.cartlayout) { overflow: clip; }
.confirmflex > div { overflow: visible; }
#confirm2, #confirm1 { background: none; padding: 0; margin-bottom: 1em; display: flex; flex-direction: column; gap: 1em; }
.cobox { background-color: var(--panel-bg); border-radius: var(--rounded); padding: 1em; }
.cobox > h2:first-child { margin-top: 0; }
.cobox > *:last-child { margin-bottom: 0; }
.checkoutchrome #content h1 { font-size: 1.5em; margin-bottom: 0.6em; }
.checkoutchrome #content .bodycopy { max-width: 66em; }
.cobox h2 { margin: 0 0 0.8em; font-size: 1.15em; }
.smallprint { color: var(--grey-77); font-size: 0.85em; }
.osline { display: grid; grid-template-columns: 1fr auto; gap: 0.3em 1em; align-items: center; padding: 0.7em 0; border-top: 1px solid var(--grey-ee); }
.osline:first-of-type { border-top: none; padding-top: 0; }
.oshead { display: none; }
.osdesc { color: var(--grey-33); }
.oscode { display: block; font-size: 0.85em; color: var(--text-faint); }
.osunit { display: none; }
.osprice { font-weight: bold; text-align: right; white-space: nowrap; }
.osqtycell { display: flex; align-items: center; gap: 0.3em; grid-column: 1; }
.osqtybtn { background: var(--brightblue); color: var(--white); border: none; border-radius: 4px; cursor: pointer; width: 2em; height: 2em; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; }
.osqtybtn:hover { background: var(--darkblue); }
.osqtybtn svg.icon { width: 0.9em; height: 0.9em; fill: currentColor; }
input[type=text].osqty { width: 3.5em; text-align: center; padding: 0.3em; font-size: 1em; }
#orderlines.updating { opacity: 0.55; pointer-events: none; }
@media screen and (min-width: 700px) {
.osline { grid-template-columns: 1fr 9em 7em 7em; gap: 0 1em; }
.oshead { display: grid; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); border: none; padding-bottom: 0.4em; }
.oshead .osqtycell, .oshead .osunit, .oshead .osprice { display: block; text-align: right; }
.oshead .osqtycell { text-align: left; }
.osqtycell { grid-column: auto; }
.osunit { display: block; text-align: right; color: var(--grey-66); white-space: nowrap; }
}
.ostotals { border-top: 2px solid var(--grey-ee); margin-top: 0.5em; padding-top: 0.7em; }
.ostotal { display: block; }
.ostotal:after { content: ""; display: table; clear: both; }
.ostotal span { float: left; color: var(--grey-66); line-height: 1.9em; }
.ostotal strong { float: right; line-height: 1.9em; }
.osgrand { border-top: 1px solid var(--grey-ee); margin-top: 0.4em; padding-top: 0.4em; font-size: 1.2em; }
.osgrand span, .osgrand strong { color: var(--black); font-weight: bold; }
.osactions { padding: 0.2em 0 1em; }
.osactions a, .textaction { color: var(--darkblue); text-decoration: underline; background: none; border: none; padding: 0; font-size: 1em; cursor: pointer; font-family: inherit; }
.osactions a:hover, .textaction:hover { text-decoration: none; }
#confirm2 .textaction { display: inline-block; margin-left: 0.6em; }
.deliverypanelbuttons .textaction, .extras > .textaction { margin-left: 0; }
.extras #extrasfields { padding-top: 0.3em; }
.billingsummary, .addressoneline { display: inline; }
#confirm2 .billingsummary + .textaction { margin-top: 0; margin-left: 0.6em; }
.discountmessage { clear: both; color: var(--hdred); margin: 0.4em 0 0; font-size: 0.9em; }
#deliverychanging { margin: 0.5em 0; }
#deliverychanging .deliverychangingto { font-weight: bold; }
.waiting.hidden { display: none; }
#confirm2 .form-group input[type=text], #confirm2 .form-group input[type=email],
#confirm2 .form-group textarea, #confirm2 .radiogroup, #opayo-inline > div { max-width: 34em; }
#opayo-card-container { max-width: 34em; }
#confirm1 .paymentbuttons { margin-bottom: 0.6em; }
#confirm1 .paymentbuttons label { display: none; }
#confirm1 .form-group div { margin-bottom: 0.5em; }
.paymentmethods .methodnote { display: block; font-size: 0.85em; color: var(--grey-66); padding-left: 1.9em; }
#content .paymentmethods label.radio { padding: 0.5em 0.6em; }
#confirm1 .paymentblocked { margin: 0 0 0.8em; color: var(--grey-55); font-size: 0.95em; }
#confirm1 .paymenterror { display: block; color: var(--hdred); }
#confirm1 .paymenterror:empty { display: none; }
@media screen and (min-width:1000px) {
.confirmflex { display: flex; align-items: flex-start; gap: 1em; }
#confirm2 { flex: 1 1 auto; min-width: 0; margin-left: 0; }
#confirm1 { flex: 0 0 24em; margin-left: 0; position: sticky; top: 1em; }
#confirm1 .ordersummary { max-height: calc(100vh - 22em); overflow-y: auto; }
}
.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.costeps { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media screen and (min-width: 900px) {
.checkout { grid-template-columns: minmax(0, 1fr) 22rem; grid-template-areas: "steps summary"; gap: 1.5rem; }
.costeps { grid-area: steps; }
.cosummary { grid-area: summary; position: sticky; top: 1rem; }
#content .coitems { max-height: calc(100vh - 24rem); min-height: 7rem; overflow-y: auto; overscroll-behavior: contain; }
}
.costep { background: var(--panel-bg); border-radius: var(--rounded, 5px); padding: 1.25rem; }
#content .costep > h2 { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1rem; font-size: 1.3em; }
.costepnum { display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--brightblue); color: var(--white); font-size: 0.8em; font-weight: bold; }
.cofaint, #content p.cofaint { color: var(--text-faint); }
#content .colead { margin: 0 0 0.6rem; font-weight: bold; }
#content .cosublead { margin-top: 1.2rem; }
.colabel { display: block; margin-bottom: 0.3rem; font-weight: bold; font-size: 0.92em; }
.cochoices { display: grid; gap: 0.5rem; }
#content label.cochoice {
display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; padding: 0.8rem 1rem;
border: 1px solid var(--grey-dd); border-radius: 6px; background: var(--panel-bg);
cursor: pointer; font-weight: normal; text-align: left;
}
#content label.cochoice:hover { border-color: var(--brightblue); }
#content label.cochoice:has(input:checked) { border-color: var(--brightblue); box-shadow: inset 0 0 0 1px var(--brightblue); background: var(--blue-tint); }
#content label.cochoice:has(input:focus-visible) { outline: 2px solid var(--brightblue); outline-offset: 2px; }
#content label.cochoice.hidden { display: none; }
#content .cochoice input[type="radio"] { display: block; flex: none; width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--brightblue); }
.cochoicetext { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cochoicenote { color: var(--text-faint); font-size: 0.92em; }
#content .cosearch { display: block; width: 100%; box-sizing: border-box; margin: 0 0 0.6rem; }
.codeliverysummary { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.codeliverysummary > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.codeliverysummary > button { flex: none; }
.codeliveryactions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 0.9rem; }
.coextras { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--grey-dd); }
.coextralinks { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.coextralinks:not(:has(button:not([hidden]))) { display: none; }
.coextralinks + div:not([hidden]) { margin-top: 0.8rem; }
.copo { margin: 0 0 1.1rem; }
.copo .pl-input { max-width: 18rem; }
.coscope { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.7rem; margin-top: 0.4rem; }
#content .coscope label { margin: 0; font-weight: normal; }
#content .coscope select { width: auto; margin: 0; }
.copanel { margin-top: 0.75rem; padding: 1rem; border: 1px solid var(--grey-dd); border-radius: 6px; }
.cobilling { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.cobilling .colabel { display: inline; margin: 0; }
.cobilling .textaction { margin-left: 0.4rem; }
.copanel .billingmessage { margin-top: 0.75rem; }
#newcardfields:not(.hidden) { margin-top: 1rem; }
#content #opayo-inline { margin: 0; }
#content #opayo-inline > label { display: block; float: none; width: auto; padding: 0; margin: 0 0 0.4rem; font-weight: bold; font-size: 0.92em; text-align: left; }
#content #opayo-inline > div { float: none; width: auto; padding: 0; }
.cosavecard { margin-top: 0.6rem; }
#paymentactions { margin-top: 1.25rem; }
#content button.copay { display: flex; align-items: center; justify-content: center; gap: 0.45em; width: 100%; margin: 0; padding: 0.8em 1em; font-size: 1.25em; }
#content button.copay[disabled] { opacity: 0.5; cursor: not-allowed; }
.copaytotal { font-weight: bold; }
#content .copayblocked { margin: 0.6rem 0 0; text-align: center; color: var(--text-faint); font-size: 0.95em; }
#paymentactions .paymenterror { display: block; margin-bottom: 0.6rem; color: var(--hdred); }
#paymentactions .paymenterror:empty { display: none; }
#paypalsuccess { margin-top: 0.6rem; }
#content .cosecure { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0.9rem 0 0; color: var(--text-faint); font-size: 0.9em; text-align: center; }
.cosecure .icon { fill: currentColor; flex: none; }
#content .cosmallprint { margin: 0.4rem 0 0; font-size: 0.85em; text-align: center; }
.cosummarytoggle {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
padding: 0.9rem 1rem; background: var(--panel-bg); border-radius: var(--rounded, 5px);
cursor: pointer; list-style: none; color: var(--brightblue);
}
.cosummarytoggle::-webkit-details-marker { display: none; }
.cosummarytoggle strong { color: var(--black); font-size: 1.1em; }
.cosummarytoggletext { display: flex; align-items: center; gap: 0.5rem; }
.cosummarytoggletext .icon { fill: currentColor; }
.cosummarytoggletext::after { content: ""; width: 0.45em; height: 0.45em; margin-left: 0.15em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-0.15em) rotate(45deg); transition: transform 0.15s; }
details[open] > .cosummarytoggle .cosummarytoggletext::after { transform: translateY(0.1em) rotate(-135deg); }
details[open] > .cosummarytoggle .cosummaryshow, details:not([open]) > .cosummarytoggle .cosummaryhide { display: none; }
details[open] > .cosummarytoggle { border-radius: var(--rounded, 5px) var(--rounded, 5px) 0 0; border-bottom: 1px solid var(--grey-dd); }
.cosummarybody { background: var(--panel-bg); padding: 1.25rem; border-radius: 0 0 var(--rounded, 5px) var(--rounded, 5px); }
@media screen and (min-width: 900px) {
.cosummarytoggle { display: none; }
.cosummarybody { border-radius: var(--rounded, 5px); }
}
.cosummaryhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
#content .cosummaryhead h2 { margin: 0; font-size: 1.15em; }
.cocount { font-weight: normal; color: var(--text-faint); font-size: 0.85em; }
#content .coitems { list-style: none; margin: 0; padding: 0.7rem 0.3rem 0 0; display: grid; gap: 0.9rem; }
#content .coitem { list-style: none; margin: 0; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; }
.coitemimg { position: relative; width: 3.5rem; height: 3.5rem; box-sizing: border-box; border: 1px solid var(--grey-dd); border-radius: 6px; background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center; }
.coitemqty { position: absolute; top: -0.55rem; right: -0.55rem; display: grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; box-sizing: border-box; border-radius: 1rem; background: #555; color: #fff; font-size: 0.75rem; font-weight: bold; }
.coitemname { font-size: 0.95em; line-height: 1.3; min-width: 0; }
.coitemmeta { display: block; margin-top: 0.15rem; color: var(--text-faint); font-size: 0.88em; }
.coitemprice { font-weight: bold; white-space: nowrap; }
.codiscount { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--grey-dd); }
.coinputgroup { display: flex; }
#content .coinputgroup input { flex: 1; min-width: 0; height: 2.6rem; margin: 0; box-sizing: border-box; border-radius: 4px 0 0 4px; font-size: 1rem; }
#content .coinputgroup button { flex: none; height: 2.6rem; margin: 0; padding: 0 1.1rem; border: 0; border-radius: 0 4px 4px 0; background: var(--brightblue); color: var(--white); font-size: 1rem; font-weight: bold; cursor: pointer; }
#content .coinputgroup button:hover { filter: brightness(1.08); }
#content .coinputgroup button[disabled] { opacity: 0.6; }
#content .codiscountmessage { margin: 0.4rem 0 0; color: var(--hdred); font-size: 0.9em; }
#content .codiscountmessage.ok { color: var(--instock-bright); }
.cototals { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--grey-dd); }
.cototals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
.cototals dt { color: var(--text-faint); }
.cototals dd { margin: 0; }
.cototals .cograndtotal { margin-top: 0.5rem; padding-top: 0.7rem; border-top: 1px solid var(--grey-dd); font-size: 1.25em; font-weight: bold; }
.cototals .cograndtotal dt { color: inherit; }
.cosuccesshead { display: flex; align-items: flex-start; gap: 0.9rem; margin: 0 0 1.25rem; }
.cosuccesshead > .icon { flex: none; width: 2.6rem; height: 2.6rem; fill: var(--agri); }
#content .cosuccesshead h1 { margin: 0 0 0.3rem; }
#content .cosuccesshead p { margin: 0; }
.cosuccess .cosummary { position: static; }
#content .cosuccess .coitems { max-height: none; overflow: visible; }
.cofacts { margin: 0; }
.cofacts > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--grey-dd); }
.cofacts > div:last-child { border-bottom: 0; }
.cofacts dt { color: var(--text); }
.cofacts dd { margin: 0; font-weight: bold; text-align: right; }
#content .cosmall { margin: 0.7rem 0 0; font-size: 0.9em; }
#content .coaddress { margin: 0; line-height: 1.5; }
@media screen and (min-width: 900px) {
.cosuccess .checkout { grid-template-areas: "steps summary" "foot summary"; grid-template-rows: auto 1fr; }
.cosuccessfoot { grid-area: foot; }
}
.cosuccessactions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; }
#content .cosuccessactions .bigbutton { margin: 0; }
.offertab { position: absolute; z-index: 2; margin: 0.5em auto; padding: 0.3em 0.5em; background: var(--darkblue); color: var(--white); font-size: 1.05em; font-weight: bold; text-decoration: none; }
.offertab:hover, .offertab:focus-visible { text-decoration: underline; color: var(--white); }
.offertab-second { margin-top: 2.8em; }
.offerbanner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 1em; padding: 0.7em 1em; background: var(--blue-tint-pale); border-left: 4px solid var(--darkblue); }
.offerbannerbadge { display: inline-block; padding: 0.25em 0.55em; background: var(--darkblue); color: var(--white); font-weight: bold; white-space: nowrap; }
.offerbannertext { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.offerbannermeta { color: var(--text-faint, var(--grey-99)); font-size: 0.92em; }
#content .cartline-free { border-left: 4px solid var(--darkblue); }
#content .cartlinefreebadge { display: flex; align-items: center; justify-content: center; background: var(--darkblue); color: var(--white); font-weight: bold; letter-spacing: 0.05em; border-radius: 4px; }
#content .cartline-free .cartitemquantity { padding-left: 0.4rem; font-weight: bold; }
#content .cartline-freegone { display: block; padding: 0; background: none; }
#content .cartline-freegone .messagebox { margin: 0; }
.cartoffers { display: block; font-weight: normal; }
.offerprompt { margin: 0.9rem 0 0; padding: 0.6em 0.8em; background: var(--blue-tint-pale); border-left: 4px solid var(--darkblue); font-weight: bold; }
.offerprompt[hidden] { display: none; }
.coitem-free .coitemprice { color: var(--darkblue); font-weight: bold; }
.cofreebadge { background: var(--darkblue); }
.offerlist { padding: 1rem 0; }
.offerlist h1 { margin-top: 0; }
.offerlistintro { margin-bottom: 1.25rem; }
.offercard { margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--grey-dd); scroll-margin-top: calc(var(--headerh, 0px) + 1rem); }
.offercardhead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.offercardhead h2 { margin: 0; }