@font-face { font-family: 'Neurial Grotesk Regular'; src: url('/fonts/NeurialGrotesk-Regular.woff') format('woff'), url('/fonts/NeurialGrotesk-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Neurial Grotesk Medium'; src: url('/fonts/NeurialGrotesk-Medium.woff') format('woff'), url('/fonts/NeurialGrotesk-Medium.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Neurial Grotesk Bold'; src: url('/fonts/NeurialGrotesk-Bold.woff') format('woff'), url('/fonts/NeurialGrotesk-Bold.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FlechaS'; src: url('/fonts/FlechaS-Regular.woff') format('woff'), url('/fonts/FlechaS-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } /* ------------------------------------------------------------------------------------ SCREEN - v6 swiffy 2023 Filename : swiffy.css Last Updated : 26. 01. 2026 ------------------------------------------------------------------------------------- */ .swiffy-slider { position: relative; display: block; width: 100%; --swiffy-slider-snap-align: center; --swiffy-slider-item-width: 100%; --swiffy-slider-item-gap: 1rem; --swiffy-slider-item-reveal: 0rem; --swiffy-slider-item-ratio: 1/1; --swiffy-slider-item-count: 1; --swiffy-slider-nav: var(--green); --swiffy-slider-nav-zoom: 1; --swiffy-slider-track-opacity: 0.1; --swiffy-slider-track-height: 0; --swiffy-slider-nav-outside-size: 3.5rem; --swiffy-slider-indicator-outside-size: 1.5rem; --swiffy-slider-animation-duration: .75s; --swiffy-slider-animation-delay: 0s; --swiffy-slider-animation-timing: ease-in-out; --swiffy-slider-item-color:var(--grey); --swiffy-slider-active-item-color:var(--green); } .swiffy-slider, .swiffy-slider::after, .swiffy-slider::before { box-sizing: border-box } .swiffy-slider ::-webkit-scrollbar { height: var(--swiffy-slider-track-height) } .swiffy-slider ::-webkit-scrollbar-track { background: rgba(0, 0, 0, var(--swiffy-slider-track-opacity)) } .swiffy-slider ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .4); border-radius: 1rem } .swiffy-slider ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .6) } .slider-container { --swiffy-slider-item-gap-totalwidth: calc(var(--swiffy-slider-item-gap) * (var(--swiffy-slider-item-count) - 1)); --swiffy-slider-item-width: calc((100% - var(--swiffy-slider-item-reveal) - var(--swiffy-slider-item-gap-totalwidth)) / var(--swiffy-slider-item-count)); overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; scroll-behavior: smooth; display: grid; align-items: center; height: 100%; grid: auto/auto-flow -webkit-max-content; grid: auto/auto-flow max-content; grid-auto-rows: 100%; grid-auto-columns: var(--swiffy-slider-item-width); grid-auto-flow: column; grid-gap: var(--swiffy-slider-item-gap); list-style: none; margin: 0; padding: 0; scrollbar-width: none; scrollbar-color: rgba(0, 0, 0, .4) rgba(0, 0, 0, var(--swiffy-slider-track-opacity)); background-clip: padding-box } .slider-container>* { scroll-snap-align: var(--swiffy-slider-snap-align); position: relative; width: 100%; height: 100% } .slider-item-helper .slider-container>* { background-size: cover; background-color: #e1e1e1; background-position: 50% 50%; display: flex; justify-content: center; align-items: center } .slider-item-helper:not(.slider-item-ratio) .slider-container>* { min-height: 20rem } .slider-item-ratio .slider-container>*>*{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .slider-item-ratio-contain .slider-container>*>*{ -o-object-fit: contain; object-fit: contain } .slider-item-ratio .slider-container>::after{ display: block; padding-top: calc(100% / var(--swiffy-slider-item-ratio) ); content: "" } .slider-indicators { display: flex; justify-content: center; padding: 0; margin: 1rem 0; list-style: none } .slider-nav-scrollbar .slider-indicators { margin-bottom: calc(1rem + var(--swiffy-slider-track-height)) } .slider-indicators>.active { opacity: 1; background-color: var(--swiffy-slider-active-item-color); } .slider-indicators>* { box-sizing: content-box; flex: 0 1 auto; width: 2rem; height: .2rem; padding: 0; border: .4rem solid transparent; cursor: pointer; background-color: var(--swiffy-slider-item-color); background-clip: padding-box; opacity: .5; transition: opacity .4s ease; width: .5rem; height: .5rem; border: .4rem solid transparent; border-radius: 50% } .slider-nav { position: absolute; top: 0; left: .5rem; bottom: 0; border: 0; background-color: transparent; cursor: pointer; padding: 0; visibility: hidden; opacity: .8; transition: visibility .1s, opacity .2s linear; margin-bottom: var(--swiffy-slider-track-height); display: flex; align-items: center; padding: 0 .5rem; -webkit-filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5)); filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5)); transform: scale(var(--swiffy-slider-nav-zoom)) } .slider-nav::before { position: absolute; content: ""; padding: .5rem; width: 3rem; height: 3rem; pointer-events:all; } .slider-nav::after { content: ""; -webkit-mask: url("data:image/svg+xml,"); mask: url("data:image/svg+xml,"); -webkit-mask-size: cover; mask-size: cover; background-color: var(--swiffy-slider-nav); background-origin: content-box; width: 3rem; height: 3rem } .slider-nav-arrow .slider-nav::after { -webkit-mask: url("data:image/svg+xml,"); mask: url("data:image/svg+xml,") } .slider-nav-chevron .slider-nav::after { -webkit-mask: url("data:image/svg+xml,"); mask: url("data:image/svg+xml,") } .slider-nav-caret .slider-nav::after { -webkit-mask: url("data:image/svg+xml,"); mask: url("data:image/svg+xml,") } .slider-nav-caretfill .slider-nav::after { -webkit-mask: url("data:image/svg+xml,"); mask: url("data:image/svg+xml,") } .swiffy-slider:hover .slider-nav { visibility: visible } .swiffy-slider.slider-nav-autohide.slider-item-first-visible .slider-nav:not(.slider-nav-next) { visibility: hidden } .swiffy-slider.slider-nav-autohide.slider-item-last-visible .slider-nav.slider-nav-next { visibility: hidden } .slider-nav-outside .slider-container { margin: 0 var(--swiffy-slider-nav-outside-size) } .slider-nav-outside .slider-nav { padding: 0 } .swiffy-slider .slider-nav:hover { opacity: 1 } .slider-nav-square .slider-nav { padding: 0 } .slider-nav-round .slider-nav::before { border-radius: 50% } .slider-nav-round .slider-nav::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'%3E%3C/path%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'%3E%3C/path%3E%3C/svg%3E") } .slider-nav-dark .slider-nav::after { background-color: var(--swiffy-slider-nav-dark) } .slider-nav-sm { --swiffy-slider-nav-zoom: .75; --swiffy-slider-nav-outside-size: 2.5rem } .slider-nav.slider-nav-next::after { transform: rotate(180deg) } .slider-nav.slider-nav-next { right: .5rem; left: unset } .slider-nav-visible .slider-nav { visibility: visible } .slider-nav-dark .slider-nav { opacity: .6 } .slider-nav-mousedrag .slider-container { cursor: -webkit-grab; cursor: grab } .slider-nav-mousedrag.dragging .slider-container { -ms-scroll-snap-type: unset; scroll-snap-type: unset; scroll-behavior: unset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .slider-nav-mousedrag.dragging .slider-nav { visibility: hidden } @media (hover:hover) { .slider-nav-mousedrag .slider-container::after { content: ""; position: absolute; width: 100%; height: 100% } } @media (prefers-reduced-motion:no-preference) { .slider-nav-animation.slider-nav-animation-fast { --swiffy-slider-animation-duration: .25s } .slider-nav-animation.slider-nav-animation-slow { --swiffy-slider-animation-duration: 1.25s } .slider-nav-animation .slider-container>*>* { transition: opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing), transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing); transition-delay: var(--swiffy-slider-animation-delay) } .slider-nav-animation .slider-container .slide-visible>* { transition: opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing), transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing); transition-delay: var(--swiffy-slider-animation-delay) } .slider-nav-animation.slider-nav-animation-fadein .slider-container>*>* { opacity: .5 } .slider-nav-animation.slider-nav-animation-scale .slider-container>*>* { transform: scale(.9) } .slider-nav-animation.slider-nav-animation-appear .slider-container>*>* { opacity: .3; transform: scale(.9) } .slider-nav-animation.slider-nav-animation-scaleup .slider-container>*>* { transform: scale(.25) } .slider-nav-animation.slider-nav-animation-zoomout .slider-container>* { overflow: hidden } .slider-nav-animation.slider-nav-animation-zoomout .slider-container>*>* { transform: scale(1.3) } .slider-nav-animation.slider-nav-animation-turn .slider-container>*>* { transform: rotateY(70deg) } .slider-nav-animation.slider-nav-animation-slideup .slider-container>*>* { transform: translateY(60%) scale(.99) } .slider-nav-animation.slider-nav-animation-slideup .slider-container { overflow-y: hidden } .slider-nav-animation .slider-container>.slide-visible>* { opacity: 1; transform: none } } @media (min-width:62rem) { .slider-item-show2:not(.slider-item-snapstart) .slider-container>*, .slider-item-show4:not(.slider-item-snapstart) .slider-container>*, .slider-item-show6:not(.slider-item-snapstart) .slider-container>* { scroll-snap-align: unset } .slider-item-show2:not(.slider-item-snapstart) .slider-container>::before, .slider-item-show4:not(.slider-item-snapstart) .slider-container>::before, .slider-item-show6:not(.slider-item-snapstart) .slider-container>::before { content: " "; display: block; position: absolute; left: calc((var(--swiffy-slider-item-gap)/2)*-1); top: 0; width: 1px; height: 1px; scroll-snap-align: var(--swiffy-slider-snap-align) } .slider-nav-outside-expand .slider-nav { margin-left: -4rem } .slider-nav-outside-expand .slider-nav.slider-nav-next { margin-right: -4rem } .slider-nav-sm.slider-nav-outside-expand .slider-nav { margin-left: -3.5rem } .slider-nav-sm.slider-nav-outside-expand .slider-nav.slider-nav-next { margin-right: -3.5rem } .slider-indicators-sm.slider-indicators { display: none } } @media (max-width:62rem) { .swiffy-slider { --swiffy-slider-track-height: 0rem; --swiffy-slider-item-reveal: 0rem; --swiffy-slider-item-count: 1; --swiffy-slider-nav-zoom: .875 } .swiffy-slider .slider-item-show2-sm { --swiffy-slider-item-count: 2 } .slider-item-reveal { --swiffy-slider-item-reveal: 4rem } .slider-item-snapstart.slider-item-reveal { --swiffy-slider-item-reveal: 2rem } .slider-item-show6 .slider-container { grid-auto-columns: calc(25% - (var(--swiffy-slider-item-gap)/ 4*3)) } .slider-item-show6.slider-item-reveal .slider-container { grid-auto-columns: calc(25% - (var(--swiffy-slider-item-gap)/ 4*3) - .5rem) } .slider-item-show6.slider-item-reveal .slider-container>* { scroll-snap-align: unset } .slider-item-show6.slider-item-reveal .slider-container>::before { content: " "; display: block; position: absolute; left: calc((var(--swiffy-slider-item-gap)/2)*-1); top: 0; width: 1px; height: 1px; scroll-snap-align: center } .slider-nav::after, .slider-nav::before { width: 2rem; height: 2rem; padding: .3rem } .slider-nav-round .slider-nav::after, .slider-nav-square .slider-nav::after { width: 1.75rem; height: 1.75rem; margin: .125rem } .slider-nav-outside .slider-container, .slider-nav-outside-expand .slider-container { margin: 0 2rem } .slider-nav-outside-expand .slider-container { margin: 0 var(--swiffy-slider-nav-outside-size) } .slider-nav-outside-expand .slider-nav { padding: 0 } .slider-indicators-round .slider-indicators>*, .slider-indicators-round.slider-indicators>*, .slider-indicators-square .slider-indicators>*, .slider-indicators-square.slider-indicators>* { width: .3rem; height: .3rem } .slider-indicators { margin-bottom: .5rem; /* display: none; */ } .slider-nav-scrollbar .slider-indicators { margin-bottom: 0 } .slider-indicators>* { /* width: 1rem; */ /* height: .125rem; */ /* border-width: .25rem; */ } .slider-indicators-sm .slider-indicators, .slider-indicators-sm.slider-indicators { display: flex } } @media (max-width:48rem) { .slider-item-show6 .slider-container { grid-auto-columns: calc(50% - (var(--swiffy-slider-item-gap)/ 2)) } .slider-item-show6.slider-item-reveal .slider-container { grid-auto-columns: calc(50% - (var(--swiffy-slider-item-gap)/ 2) - 1.5rem) } } @media (hover:none) { .swiffy-slider.slider-nav-touch .slider-nav { visibility: visible } .swiffy-slider:not(.slider-nav-touch).slider-nav-outside .slider-container, .swiffy-slider:not(.slider-nav-touch).slider-nav-outside-expand .slider-container { margin: 0 0 } .slider-item-nosnap-touch { --swiffy-slider-snap-align: unset } } /* ------------------------------------------------------------------------------------ SCREEN - v6 Doors and Fittings 2026 Filename : sitepanes.css Last Updated : 10. 06. 2026 Copyright :(c) 2026 Etail Systems Ltd Author : Etail Systems Ltd Table of Contents =Definitions =Reset =Normalise =Page =Typography =Grid Layout =SiteContainers =Top Bar #ptf =Top Panel #pt =Center Panel #pc =Main Panel #pmid =Footer Panel #pf =Bottom Panel #pb =Bottom Bar #pbf =Breadcrumb =Sitemap =Client Specific Stylings ------------------------------------------------------------------------------------- =Definitions ------------------------------------------------------------------------------------- */ :root { --menu-line-height:50px; --pt-height: 0px; --pt-height-min: 0px; --pt-transition: 0.25s ease; --spacer-width: calc((100% - var(--site-max-width)) / 2); --site-max-width: 1440px; --checkout-process-width:500px; --site-inner-width:1163px; --menu-max-width: calc(100vw - 2rem); --left-panel-width: calc(var(--site-max-width) / 5); --right-panel-width: calc(var(--site-max-width) / 5); --line-height: 1.25; --letter-spacing: normal; --outline-width: 3px; --spacing: 1rem; --half-spacing: .5rem; /* client color scheme */ --black:rgba(27,35,40,1); --black-alpha:rgb(27 35 41); --pure-black:rgba(0,0,0,1); --dark-grey:rgba(95,98,102,1); --grey:rgba(178,181,185,1); --light-grey:rgba(178,181,185,.5); --pure-white:rgba(255, 255, 255, 1); --white-alpha:rgba(255, 255, 255, .5); --blue:#49718A; --dark-blue:#1F3946; --light-blue:#5F879E; --green:#D0E2A2; --dark-green:#8FAE5D; --off-white:#F6F7F7; --off-white-alpha:var(--light-grey); /*standard colors */ --white: var(--pure-white); --featured-color:var(--black); --featured-alt-color:var(--black); --error-color: #F84033; --warn-color: rgb(230 167 27); --info-color: #5eb20a; --help-color: var(--black); /*Section colors */ --background-color: var(--white); --panel-color: var(--white); --dropdown-color: var(--white); --popout-color: var(--white); --form-color: var(--white); --typography-spacing-vertical: 1rem; --block-spacing-vertical: calc(var(--spacing) * 2); --block-spacing-horizontal: var(--spacing); --form-element-spacing-vertical: 0.5rem; --form-element-spacing-horizontal: .725rem; --form-label-font-weight: var(--text-font-weight); /* font-sizes */ --xlarge-heading-font-size:60px; --large-heading-font-size: 40px; --heading-font-size:24px; --sub-heading-font-size:18px; --statement-font-size:20px; --text-size:16px; --font-size: 16px; --small-font-size:14px; /* fonts */ --heading-font: "FlechaS", serif; --heading-font-weight: 500; --sub-heading-font: "FlechaS", serif; --sub-heading-font-weight: 400; --text-font: "Neurial Grotesk Regular", sans-serif; --text-font-weight: 400; --font-awesome: "Font Awesome 7 Pro"; --navbar-dropdown-text: "Neurial Grotesk Regular", sans-serif; --navbar-heading-font: "FlechaS", serif; --navbar-heading-font-size: 20px; --navbar-font-weight: 500; /*Text */ --heading-color:var(--dark-blue); --sub-heading-color:var(--light-blue); --color: var(--black); --text-color: var(--dark-blue); --text-color-light:var(--grey); --text-link-color: var(--black); --text-link-color-hover: var(--black); --text-link-color-focus: transparent; --text-decoration: none; --text-decoration-color: var(--black); /*Buttons */ --button-font: "Neurial Grotesk Bold", sans-serif; --button-font-weight: 400; --button-color: var(--blue); --button-border-color: var(--button-color); --button-text-color: var(--white); --button-alt-color:rgba(255,255,255,0.1); --button-alt-border-color: var(--button-alt-color); --button-alt-text-color: var(--white); --button-hover-text-color: var(--white); --button-hover-color: var(--button-alt-color); --button-hover-border-color: var(--button-alt-color); --button-padding:1rem 2rem; --checkout-button: var(--featured-alt-color); --checkout-button-text: var(--white); --info-button: var(--info-color); --info-button-text: var(--white); --icon-color: var(--error-color); /* grid info */ --grid-spacing-vertical: var(--spacing); --grid-spacing-horizontal: var(--spacing); /*nav */ --nav-element-spacing-vertical: 1rem; --nav-element-spacing-horizontal: 0.5rem; --nav-link-spacing-vertical: 0.5rem; --nav-link-spacing-horizontal: 0.5rem; --navbar-color: var(--featured-color); --navbar-heading-color: var(--black); --navbar-heading-weight: 400; --navbar-link-color: var(--black); --navbar-icon-color: var(--grey); /*hover/active */ --navbar-active-color: transparent; --navbar-active-text-color: var(--black); --navbar-hover-color: var(--off-white); --navbar-hover-text-color: var(--black); /*nav - dropdowns*/ --navbar-dropdown-width: 240px; --navbar-dropdown-item-height: 40px; --navbar-dropdown-color: var(--white); --navbar-dropdown-text-color: var(--black); --navbar-dropdown-text-size: .875rem; --navbar-sidebar-color: var(--off-white); --navbar-sidebar-text-color: var(--grey); --navbar-sidebar-hover-color: var(--off-white); --navbar-popout-color: var(--white); --navbar-menu-button-color:var(--black); /*Borders */ --border-color: var(--light-grey); --border-alt-color: var(--grey); --border-color-light: var(--light-grey); --border-radius: 0; --border-width: 1px; /* shadows */ --box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); --transition: 0.5s ease-in-out; /*swiffy nav options */ --swiffy-slider-nav: var(--featured-color); --swiffy-slider-item-color: var(--grey); --swiffy-slider-active-item-color: var(--featured-color); } /* ------------------------------------------------------------------------------------- =Reset ------------------------------------------------------------------------------------- */ 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,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup, tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead, tr,th,td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; -webkit-font-smoothing: antialiased; } /* To enable HTML5 elements in IE */ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section { display: block; } *, *::before, *::after { box-sizing: border-box; } input:focus,textarea:focus,select:focus { outline-offset: 0px; } /* ------------------------------------------------------------------------------------- =Normalise v8.0.1 | MIT License | github.com/necolas/normalize.css ------------------------------------------------------------------------------------- */ html { line-height: var(--line-height); -webkit-text-size-adjust: 100%; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b,strong { font-weight: var(--bold-font-weight, 600); } code,kbd,samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img,picture,video,canvas,svg { display: block; max-width: 100%; height: auto; /*margin: auto;*/ } .imgcont {} .imgcont img { display: block; } button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1; margin: 0; } button,input { overflow: visible; } button,select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--grey); opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--grey); } ::-ms-input-placeholder { /* Microsoft Edge */ color: var(--grey); } /* ------------------------------------------------------------------------------------- =Page ------------------------------------------------------------------------------------- */ html { -webkit-font-smoothing: antialiased } body { background-color: var(--background-color); font-family: var(--text-font); -webkit-font-smoothing: antialiased; font-size: 16px; } /* ------------------------------------------------------------------------------------- =Typography ------------------------------------------------------------------------------------- */ /* Defaults ------------------------------------------------------- */ p { font-family: var(--text-font); font-size:var(--font-size, 1em); color:var(--text-color, --black); } li{ font-size:var(--font-size, 1em); } sub,sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } a,[role=link] { --background-color: transparent; outline: none; background-color: var(--background-color); color: var(--text-link-color, inherit); text-decoration: var(--text-decoration); text-decoration-color: var(--text-decoration-color); } a:is([aria-current], :hover, :active, :focus),[role=link]:is([aria-current], :hover, :active, :focus) { --color: var(--text-link-color-hover); --text-decoration: underline; } a:focus,[role=link]:focus { --background-color: var(--text-link-color-focus); } h1,h2,h3,h4,h5,h6 { font-family: var(--heading-font); font-size: 1em; overflow-wrap: break-word; color:var(--heading-color, #000); letter-spacing:-1%; text-wrap:pretty; } h1 em,h2 em,h3 em,h4 em,h5 em,h6 em { font-weight:600; color:var(--dark-green); } h1 { --font-size:var(--large-heading-font-size); --typography-spacing-vertical: 1rem; font-size: var(--font-size, 2.5em); font-weight:var(--heading-font-weight, 400); } h2 { --font-size:var(--large-heading-font-size); --typography-spacing-vertical: 1rem; font-size: var(--font-size, 2em); font-weight:var(--heading-font-weight, 400); } h3 { --font-size:var(--heading-font-size); --typography-spacing-vertical: 1rem; font-size: var(--font-size, 1.5em); } h4 { --font-size:var(--sub-heading-font-size); --typography-spacing-vertical: 1rem; font-family:var(--sub-heading-font); font-size: var(--font-size, 1.25em); } h5 { --font-size:var(--sub-heading-font-size); --typography-spacing-vertical: 1rem; font-family:var(--sub-heading-font); font-size: var(--font-size, 1.125em); } em { font-style: italic; } blockquote{ color:var(--black); border-left:2px solid var(--grey); padding:2em; margin:2em 0; margin-left:2em; background-color:var(--grey) } blockquote footer:before{ content:"—"; margin-right:.5em; } blockquote footer{ font-family:var(--sub-heading-font); color:var(--black) } [type=checkbox], [type=radio] { --border-width: 2px; } [type=checkbox][role=switch] { --border-width: 3px; } pre, code, kbd, samp { --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } kbd { --text-font-weight: 400; } /* custom dropdown - same on all things... */ select, textarea { padding: var(--half-spacing); -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 1px solid var(--border-color); } select { background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48dGl0bGU+YXJyb3dzPC90aXRsZT48cG9seWdvbiBmaWxsPSIjNDQ0IiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGZpbGw9IiM0NDQiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) var(--white) no-repeat right .5em center; padding-right: 1em; padding-left: 1em; /* display: inline; */ max-width: 100%; border: 1px solid var(--border-color); border-radius: 100vw; border:1px solid var(--blue); background-color:var(--off-white); color: var(--text-color); height: 50px; font-size: 16px; /* font-family: var(--heading-font); */ cursor: pointer; } select:focus-visible, select:focus-within{ outline-color:var(--blue); } .fa-duotone { --fa-primary-color: var(--green); --fa-secondary-color: var(--dark-blue); --fa-primary-opacity: 1; --fa-secondary-opacity: 0.4; } /* Styled Articles ------------------------------------------------------- */ .styled h1, .styled h2, .styled h3, .styled h4, .styled h5, .styled h6 { /* --heading-color:var(--blue); */ margin-top: 0; margin-block-start: var(--typography-spacing-vertical); margin-block-end: var(--typography-spacing-vertical); } .styled p{ margin-block-end: var(--typography-spacing-vertical); } .styled a:not(.btn){ color:var(--dark-green); } .styled a:hover{ text-decoration:underline; text-decoration-color:var(--blue); } .styled .artp ul:not(.inline){ margin:2em; margin-block-start: var(--typography-spacing-vertical); margin-block-end: var(--typography-spacing-vertical); } .styled .artp ul li{ color:var(--text-color); } .styled .artp ul li::marker{ color:var(--dark-green) } .styled .artp ol { list-style-type: decimal; margin:2em; margin-block-start: var(--typography-spacing-vertical); margin-block-end: var(--typography-spacing-vertical); } .styled .artp ol li{ color:var(--text-color); } .styled .artp ol li::marker{ color:var(--dark-green); } /* Articles - may require many unsets for other things ------------------------------------------------------- */ li::marker { color: var(--black); } .artp ul.nobullets { list-style-type: none; margin: .5em 0; } .artp ol li {} .artp ol ol, .artp ol ol ol { margin-block-start: 0em; margin-block-end: 0em; } .artp a:hover { text-decoration: underline; text-decoration-color: var(--text-decoration-color); } /* Buttons ------------------------------------------------------- */ .submit, .btn { --button-border-color:var(--button-color); --font-weight:400; display: inline-block; vertical-align: middle; font-size: 1em; font-weight: var(--font-weight); text-align: center; cursor: pointer; font-family: var(--button-font); text-transform: capitalize; background-color: var(--button-color); color: var(--button-text-color); border: 2px solid var(--button-border-color); border-radius: 100vh; outline: none; padding: 1em 2.5em; } /* used on typography page for showing button layout */ #a142606367 ul { column-count: 2; } #a142606367 li { margin: 1em; text-align: center; list-style: none; } .btn.alt, .btn.light{ --heading-color:var(--black); --button-text-color:var(--black); --button-color:var(--light-grey); --button-border-color:var(--button-color); background-color: var(--button-color); color: var(--button-text-color); border: 2px solid var(--button-border-color); } .btn.link{ --heading-color:var(--black); --button-text-color:var(--black); --button-color:var(--light-grey); --button-border-color:var(--button-color); background-color: transparent; color: var(--button-text-color); border: none; text-decoration:underline; } .btn.dark{ --heading-color:var(--grey); --button-text-color:var(--white); --button-color:var(--blue); --button-border-color:var(--button-color); background-color: var(--button-color); color: var(--button-text-color); border: 2px solid var(--button-border-color); } .btn.white{ --heading-color:var(--black); --button-text-color:var(--black); --button-color:var(--white); --button-border-color:var(--black); background-color: var(--button-color); color: var(--button-text-color); border: 2px solid var(--button-border-color); } .btn.black{ --heading-color:var(--white); --button-text-color:var(--white); --button-color:var(--black); --button-border-color:var(--button-color); background-color: var(--button-color); color: var(--button-text-color); border: 2px solid var(--button-border-color); } .btn.transparent{ --button-text-color:var(--black); --button-color:transparent; --button-border-color:var(--black); background-color: var(--button-color); color: var(--button-text-color); border: 2px solid var(--button-border-color); } .btn.grey{ --heading-color:var(--grey); --button-text-color:var(--white); --button-color:var(--grey); --button-border-color:var(--button-color); background-color: var(--button-color); color: var(--button-text-color); border: 2px solid var(--button-border-color); } .submit:hover, .btn:hover { text-decoration: underline; opacity:.8; } /* iphone specific overrides */ textarea, input.text, input.inputtext, input.inputtext_short, .ui-widget select, input[type="text"], input[type="email"], input[type="button"], input[type="submit"], input[type="image"], input#searchbox, .input-checkbox { font-size: 16px; font-weight: 400; width: auto; border-width: 1px; border-style: solid; } td a.btn { display: block; } input::placeholder{ color:var(--grey); } /* Tables ------------------------------------------------------- */ /* Headings ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =MyAccount ------------------------------------------------------------------------------------- */ /* is this the sign in page form */ .form.myaccount#psign {} .page_useraccount{} /*HACK - until DH stops them from being shown!*/ .acctmsg{ display:none; } /* Account sign in page ------------------------------------------------------- */ .page_signin #pm{ margin-bottom:4em; } .page_signin form{ background-color:var(--off-white); margin:auto; max-width:700px; padding:2em; border-radius:2em; } .exstcust{ } .exstcust .exstremtext{ text-align:center; display:block; font-size:var(--sub-heading-font-size); color:var(--blue); font-family:var(--heading-font); } .exstnotme{ --text-link-color:var(--blue); text-decoration:underline; text-decoration-color:var(--blue); font-size:var(--small-font-size); padding-bottom:.5em; margin-bottom:1em; border-bottom:1px dashed var(--grey); } .page_signin ul{ list-style:none; } .page_signin li.info{ color: var(--info-color); list-style: none; } .page_signin .inputtext{ width:calc(100% - 1em); margin:0; padding:0 1em; margin-bottom:.5em; border:1px solid var(--blue); background-color:var(--white); height: 50px; text-align: left; border-radius:100vw; } .page_signin .submit{ width:calc(100% - 1em); background-color:var(--green); border-color:var(--green); color:var(--blue); } .exstfgtpwd{ --text-link-color:var(--blue); text-decoration:underline; text-decoration-color:var(--blue); font-size:var(--small-font-size); font-family:var(--text-font); margin:1em 0; } .exstreglnk, .exstfgtpwd {} .exstreglnk h5, .exstfgtpwd h5{ --text-link-color:var(--blue); text-decoration:underline; text-decoration-color:var(--blue); font-size:var(--small-font-size); font-family:var(--text-font); margin-bottom:0; } /* Forgotten passwordr ------------------------------------------------------- */ .page_passwordrequest #pm{ margin-bottom:4em; } .page_passwordrequest .bt h3{ --font-size:var(--large-heading-font-size); text-align:center; margin-bottom:1rem; color:var(--blue); } .page_passwordrequest ul{ list-style:none; } .page_passwordrequest .info{} .page_passwordrequest .info.req{ color: var(--info-color); } .page_passwordrequest form{ background-color:var(--off-white); margin:auto; max-width:700px; padding:2em; border-radius:2em; } .page_passwordrequest .inputtext{ width:calc(100% - 1em); margin:0; padding:0 1em; margin-bottom:.5em; border:1px solid var(--blue); background-color:var(--white); height: 50px; text-align: left; border-radius:100vw; } .page_passwordrequest .submit{ width:calc(100% - 1em); background-color:var(--green); border-color:var(--green); color:var(--blue); } .page_passwordrequest h5{ --text-link-color:var(--blue); text-decoration:underline; text-decoration-color:var(--blue); font-size:var(--small-font-size); font-family:var(--text-font); margin:.5em 0; } /* Account register ------------------------------------------------------- */ .page_register #pm{ margin-bottom:4em; } .page_register h3.header{ display:none; } .page_register form{ background-color:var(--off-white); border-radius:2em; margin:auto; max-width:700px; padding:2em; } .page_register ul{ list-style:none; } .page_register li.info{ color: var(--info-color); list-style: none; } .page_register .inputtext{ width:calc(100% - 1em); margin:0; padding:0 1em; margin-bottom:.5em; border:1px solid var(--blue); background-color:var(--white); height: 50px; text-align: left; border-radius:100vw; } .page_register .submit{ width:calc(100% - 1em); background-color:var(--green); border-color:var(--green); color:var(--blue); margin:1em 0; } /* Account icons (on main account page) ------------------------------------------------------- */ .page_useraccount .pmfull li.icon{ display:inline-block; margin-right:1em; max-width: calc(25% - 0.8em); } .page_useraccount .pmfull li.icon:last-child{ margin-right:0; } .page_useraccount .pmfull li.icon a.img{ display:block; text-align:center; border:1px solid var(--border-colour); border-radius:1em; overflow:hidden; } .page_useraccount .pmfull li.icon a.lnk{ display:block; text-align:center; margin:.5em auto; } .page_useraccount .pmfull li.icon a.img img{ display:block; margin:auto; } .page_useraccount .pmfull ul.orders, .page_useraccount .pmfull ul.contact, .page_useraccount .pmfull ul.details{ /* display:grid; */ /* grid-template-columns:repeat(5, 1fr); */ text-align:left; } .page_useraccount .pmfull ul.orders, .page_useraccount .pmfull ul.contact, .page_useraccount .pmfull ul.details li{ list-style:none; } .page_useraccount .pmfull ul.orders img, .page_useraccount .pmfull ul.contact img, .page_useraccount .pmfull ul.details img{ max-width:100%; height:auto; } /* Account headings ------------------------------------------------------- */ .page_useraccount h4 { font-family:var(--heading-font); text-align:center; margin: 2rem 0; color:var(--blue); } .page_useraccount .pmfull h4 { font-size:40px; } /* Account messages ------------------------------------------------------- */ .acctmsg h3{ /*for select only as the title of some of the messages is not user friendly and more internal */ display:none; } /* account menu panel ------------------------------------------------------- */ #pmam + .pmfull{ width: calc(var(--site-max-width) - 2rem); } /* this shows on other account pages - is no longer needed with the menu button*/ a.myacct{ /* display:none; */ } /* show/hide menu button */ #mamtrigbtn { vertical-align: middle; text-align: center; padding: var(--half-spacing) var(--spacing); border: 1px solid var(--border-color); border-radius: var(--border-radius); cursor: pointer; font-size: .825rem; font-family: var(--text-font); font-weight: var(--text-font-weight); display:inline-block; } #mamtrigbtn span{ display:block; } #mamtrigbtn span:before { content: "\f7f3"; font-family: var(--font-awesome); display: inline-block; font-size: 1em; margin-right: .5rem; } #pmam .myacctmenu{ height: 100%; width: 50%; /* 0 width - change this with JavaScript */ max-width:300px; position: fixed; z-index: 10001; top: 0; left: 0; background-color: var(--popout-color); overflow-x: hidden; /* Disable horizontal scroll */ transition: var(--transition); box-shadow: var(--box-shadow); padding:1rem; display:none; } #pmam .myacctmenu.showmyacctmenu{ display:block; } #pmam li{ list-style:none; margin-bottom:.5rem; } /*how many times am I going to add this back in... */ /*we don't want the icons here! */ #pmam li a.img{ display:none; } .fsclsdiv .fsclsspn{ display:inline-block; } /* close member panel button */ .mamclsdiv { text-align:right; } .mamclsdiv .mamclsspn{ display:inline-block; border:1px solid var(--off-white); color:var(--grey); background-color:var(--off-white); border-radius:50%; font-family:monospace; padding:.125rem; margin:0rem; width:1rem; height:1rem; line-height:1; text-align:center; cursor:pointer; display:inline-block; } /* account recent items ------------------------------------------------------- */ /* account articles ------------------------------------------------------- */ .page_useraccount .arts{ grid-area:memberarts; } /* account ------------------------------------------------------- */ .page_useraccount .carousel.prod{ grid-area:memberarts; } /* My Orders ------------------------------------------------------- */ .member-order{ display:grid; grid-template-areas: "orderinfo orderinfo" "invoice delivery" "orderdetails orderdetails" "actions actions"; grid-gap:1em; } .member-order .invoice-address{ grid-area:invoice; } .member-order .delivery-address{ grid-area:delivery; } .member-order .invoice-address li, .member-order .delivery-address li{ list-style:none; } .member-order .order-details{ grid-area:orderdetails; } .member-order .account-actions{ grid-area:actions; } .member-order .account-actions a{ margin:1em; } .member-order .account-actions a.print{ } .member-order .account-actions a.print img{ display:inline-block; vertical-align:middle; } .member-order .account-actions a.print:before{ content:"print order"; margin-right:1em; display:inline-block; } /* My Orders ------------------------------------------------------- */ .orders-ext{} .past_order_header{ background-color:var(--blue); color:var(--white); font-family:var(--heading-font); display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .past_order_header div{ padding:1em; } .past_order{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .past_order:nth-child(2n){ background-color:var(--off-white); } .past_order div{ padding:1em; } /* My Orders - specific order ------------------------------------------------------- */ .ordinfo{} .ordinfo .customerDetails { display:grid; grid-template-areas:"orderinfo orderinfo" "invoice delivery"; grid-gap:1em; } .ordinfo .customerDetails .header{ font-family:var(--heading-font); background-color:var(--blue); color:var(--white); padding:1em; } .ordinfo .customerDetails .orderDetails:before{ content:"Order Details"; font-family:var(--heading-font); color:var(--white); background-color:var(--blue); display:block; padding:1em; } .ordinfo .customerDetails .orderDetails{ grid-area:orderinfo; } .ordinfo .customerDetails .orderDetails div{ padding:0 1rem; } .ordinfo .customerDetails .orderDetails .label{ font-family:var(--heading-font); font-weight:bold; } .ordinfo .addressDetails{} .ordinfo .addressDetails .names, .ordinfo .addressDetails .addressBlock{ padding:1em; } .ordinfo .addressDetails .label{ font-weight:bold; } .ordinfo .order .header{ background-color:var(--blue); color:var(--white); font-family:var(--heading-font); display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding:1em; } .ordinfo .order .data{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding:1em; } .ordinfo .order .data:nth-child(2n){ background-color:var(--off-white); } .ordinfo .order + .totals{ text-align:right; padding:1em; font-weight:bold; } /* buttons? ------------------------------------------------------- */ .action button { -webkit-appearance: none; background-color:var(--off-white); color:var(--dark-grey); font-size: 16px; padding: var(--half-spacing) var(--half-spacing); width: 2em; border:1px var(--off-white) solid; cursor:pointer; display:inline-block; vertical-align:middle; } .action input.inputtext { font-size:1rem; border-color:var(--dark-grey); text-align: center; width:2em; padding:.5em 0; display:inline-block; vertical-align:middle; } /* page_orderinfo ------------------------------------------------------- */ /* member orders view ------------------------------------------------------- */ /* Wishlists ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =Forms ------------------------------------------------------------------------------------- */ /* Defaults ------------------------------------------------------- */ .form { background-color: var(--form-color); grid-column:1/-1; margin:auto; } /*bit of a hack - really don't want to be using an img as a way of identifying a required field */ form img[alt="Required"]{ width:8px; display:inline; vertical-align:top; margin-left:3px; } .form li{ list-style: none; display:block; } .form label { display:block } form select, form textarea, form input {} /* DON'T try grid layout here - its too restrictive*/ form li.reqmsg { color: var(--error-color); } form li.header { margin-bottom: 1.5em; } form label img { display: inline-block; } form li.help, form li.info { font-size: .825em; margin-bottom:1em; } form li.info img{ display:inline; } form form .submit { display: block; } form .g-recaptcha { text-align: right; display: block; margin-left: auto; } /* fix for checklists*/ form ul.check input { margin-right: var(--half-spacing); } /* fix for radio buttons */ form ul.radio input { margin-right: var(--half-spacing); } /* fix for subscribe checkbox */ form li.subscribe input { margin-right: var(--half-spacing); width:auto; } form li.subscribe label { display: inline !important; font-weight: normal; } /* ------------------------------------------------------------------------------------- =Grid Layout ------------------------------------------------------------------------------------- */ #pm .pmind { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-gap:1em; grid-column-gap: 2em; grid-auto-flow: dense; /*don't put margin here*/ } .page_dept #pm .pmind{ grid-gap:0; } /*this would be avoided if we just wrote the content out in blocks would be also better if we could add our own "blocks" for things to be in you currently can't have a banner and an article side by side because of this */ #pm .pmind .pbnr { grid-column: 1/-1; } #pm .pmind .pbnr { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: var(--spacing); grid-auto-flow: dense; } /*set the default for any non grid class article #pm is needed as the css class is set higher than the immediate parent container */ .art, .prdlst, .carousel, .brnd, #depts { grid-column: 1/-1; } .fullWidth img, .halfWidth img, .thirdWidth img, .quarterWidth img, .twoThirdWidth img, .fullWidth picture, .thirdWidth picture, .quarterWidth picture, .twoThirdWidth picture { display: block; width: 100%; height: auto; } /* layout base classes ------------------------------------------------------- */ .fullWidth { grid-column: 1/-1; } .halfWidth { grid-column: auto / span 6; } .quarterWidth { grid-column: auto / span 3; } .threeQtrWidth { grid-column: auto / span 9; } .thirdWidth{ grid-column: auto / span 4; } .twoThirdWidth { grid-column: auto / span 8; } .fullWidth, .halfWidth, .quarterWidth, .threeQuarter, .thirdWidth, .twoThirdWidth { position: relative; } .fullWidth img, .halfWidth img, .quarterWidth img, .threeQuarter img, .thirdWidth img, .twoThirdWidth img{ width:100%; } .textImage{ display:grid; grid-template-areas: "text image"; grid-template-columns:1fr minmax(auto,1fr); grid-gap:2em; align-items:center; } .textImage h3{ /* --font-size:var(--xlarge-heading-font-size); */ grid-area:title; } #a143032321 h3{ --font-size:var(--xlarge-heading-font-size); } .textImage .imgcont{ grid-area:image } .textImage .artp{ grid-area:text; text-align:left; margin:2em; } .imageText{ display:grid; grid-template-areas: "title title" "image text"; grid-template-columns:minmax(auto,1fr) 1fr ; align-items:center; } .imageText .imgcont{ background-color:var(--grey); } .imageText .artp{ grid-area:text; text-align:left; margin:2em; } /* responsive iframe - used in articles*/ iframe{ max-width:100%; } .responsive-iframe { width: calc(100% - 2em); margin: 1em; display: inline-block; vertical-align: top; } .responsive-iframe .artp, .responsive-iframe { position: relative; overflow: hidden; padding-top: 56.25%; } .responsive-iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* client specific css classes for standardisation*/ ul.inline{ margin:1em 0; } ul.inline .btn{ margin-right:1em; } .inline li{ list-style:none; display:inline-block; /* margin: 0px 0.6em; */ } .dblheight{ grid-row:auto/span 2; } /* headers */ .pHeader{ text-align:center; } .pHeader h4{ --font-size:var(--sub-heading-font-size); text-transform:uppercase; } .pHeader h3{ --font-size:var(--large-heading-font-size); } /* headers ---------------------------*/ .plainHeader{ display: flex; align-items: center; /* vertical centering */ justify-content: center; /* horizontal centering */ margin-bottom: 1rem; } .deptHeader{ display: flex; align-items: center; /* vertical centering */ justify-content: center; /* horizontal centering */ /* margin-bottom: 1rem; */ background-color:var(--off-white); padding:1em; } /*ensures a clean space between block elements */ .deptHeader .artp > * + * { margin-top: 1rem; text-wrap:balance; text-align:center; } .plainHeader h2, .deptHeader h2{ --font-size:var(--xlarge-heading-font-size); text-align:center; } .plainHeader h3, .deptHeader h3{ --font-size:var(--xlarge-heading-font-size); text-align:center; } .plainHeader h4, .deptHeader h4{ --font-size:var(--sub-heading-font-size); text-align:center; margin-bottom:1rem; } .deptHeader .artp{ text-align:left; /* max-width: 100%; */ line-height:1.5 } .deptHeader ul{ list-style-position: inside; margin-block-end:1em; } /* banners */ .bnrLink{ text-align:center; } .bnrLink h3{ --font-size:var(--heading-font-size); max-width:80%; margin:.5rem auto; padding-bottom:.5rem; border-bottom:1px var(--light-grey) solid; } /*layout */ .rounded{ border-radius:1em; } .inset{ margin:auto; padding:4em 4em; text-align:center; grid-column:1/-1; } .paddedContent{ padding:1em 1.5em; } .center{ text-align:center; } /* themes */ .light{ background-color:var(--light-grey); } .dark{ background-color:var(--blue); --text-color:var(--grey); --heading-color:var(--grey) } .white{ background-color:var(--white); --text-color:var(--text-color); --heading-color:var(--heading-color) } .black{ background-color:var(--black); --text-color:var(--white); --heading-color:var(--white) } .transparent{ background-color:transparent; } .blue{ background-color:var(--blue); color:var(--white); --text-color:var(--white); --heading-color:var(--white); } .darkBlue{ background-color:var(--dark-blue); color:var(--white); --text-color:var(--white); --heading-color:var(--white); } .lightBlue{ background-color:var(--light-blue); color:var(--white); --text-color:var(--white); --heading-color:var(--white); } .grey{ background-color:var(--grey); --text-color:var(--white); --heading-color:var(--white) } .green{ background-color:var(--green); --text-color:var(--dark-blue); --heading-color:var(--dark-blue); border-color:var(--green); color:var(--dark-blue); } /* elements */ .feat{} .feat .imgcont{ position:relative; } .feat .imgcont div{ position:absolute; bottom:2em; background-color:white; padding:.5em 1em; border-top-right-radius:.5em; border-bottom-right-radius:.5em; } /* Category Links ------------------------------------------------------- */ .categoryLink{ grid-column:auto/span 6; /* padding: 2em; */ /* padding-bottom:1.5em; */ display:grid; grid-template-areas: "title image" "text image"; grid-template-columns:calc(60% - 3em) 40%; grid-column-gap:3em; align-items:center; } .categoryLinkLrg{ grid-column:auto/span 4; padding: 2em; padding-bottom: 0em; display:grid; grid-template-areas: "image" "title" "text"; } .categoryLink ul, .categoryLinkLrg ul{ display:inline-block; /* margin-bottom:1em; */ } .categoryLink li, .categoryLinkLrg li{ display:inline-block; } .categoryLink h2, .categoryLinkLrg h2{ grid-area:title; align-self:center; margin:0; margin:.5rem 0; font-size:var(--large-heading-font-size); /* color:inherit; */ } .categoryLink .artp, .categoryLinkLrg .artp{ grid-area:text; align-self:start; text-align:left; color:var(--off-white-alpha) } .categoryLink small, .categoryLinkLrg small{ display:block; padding-top:.5em; border-top: 1px var(--off-white-alpha) dashed; margin:1em 0; } .categoryLink .imgcont, .categoryLinkLrg .imgcont{ grid-area:image; align-self:center; } .categoryLink .imgcont img, .categoryLinkLrg .imgcont img{ width:100%; } .deptLink{ grid-column: auto / span 4; text-align:center; /* padding:1em; */ border-top-right-radius:2em; border-top-left-radius:2em; overflow:hidden; margin-bottom:2em; background-color:var(--off-white); } .deptLink h4{ font-size:var(--large-heading-font-size); margin-top:.5em; color:var(--black) } .deptLink a.btn{ color:var(--blue); font-family:var(--text-font); } .deptLink img{ margin:auto; width:100%; } /* Swiffy Sliders ------------------------------------------------------- */ /*dept sliders */ .slider-product{ --swiffy-slider-item-count: 5; } /*dept sliders */ .slider-dept{ --swiffy-slider-item-count: 5; --swiffy-slider-nav-light: #fff; } .slider-dept-alt{ --swiffy-slider-item-count: 10; } /*Featured sliders */ .slider-featured{ --swiffy-slider-item-count: 5; } /*cta slider */ .slider-cta{ --swiffy-slider-item-count: 3; } .slider-cta .slider-container{ --swiffy-slider-item-gap: 0px; } .slider-instagram{ --swiffy-slider-item-count: 5; } .slider-trustedby{ --swiffy-slider-item-count: 6; } .slider-cta li{ margin:0; } /* product sliders - code needs some tweaking */ /* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */ .carousel.prod > h2{ font-family:var(--heading-font); font-size:40px; text-align:center; margin: 2rem 0; color:var(--blue); } .carousel.prod .swiffy-slider{ --swiffy-slider-item-count: 5; margin-bottom:1rem; padding-bottom:1rem; } /* department sliders - code needs some tweaking */ /* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */ .carousel.dept .swiffy-slider{ --swiffy-slider-item-count: 5; margin-bottom:1rem; padding-bottom:1rem; } /* ------------------------------------------------------------------------------------- =SiteContainers ------------------------------------------------------------------------------------- */ #cont { margin: auto; display:flex; flex-direction:column; min-height:100vh; } #site { background-color: var(--background-color); flex:1; display:flex; flex-direction:column; } /* ------------------------------------------------------------------------------------- =Top Bar #ptf ------------------------------------------------------------------------------------- */ #ptf { --heading-color: var(--white); --text-link-color: var(--white); position: relative; /* explicit normal flow positioning */ width: 100%; background-color: var(--blue); color: var(--white); text-align: center; min-height: 30px; align-content: center; } #ptf p, #ptf h1, #ptf h2, #ptf h3, #ptf h4, #ptf h5, #ptf h6{ margin:0; padding:.5em; font-size:14px; color:var(--white); } /* ------------------------------------------------------------------------------------- =Top Panel #pt ------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =Top Panel #pt ------------------------------------------------------------------------------------- */ #pt { width: 100%; margin: auto; background-color: var(--white); position: relative; width: 100%; transition: padding var(--pt-transition), min-height var(--pt-transition), background-color var(--pt-transition), box-shadow var(--pt-transition), transform var(--pt-transition); } /*see media queries for other layouts layout */ #pt .ext { --logo-width: minmax(200px, 400px); --outer: var(--spacer-width); --search: 320px; --trade: 70px; --icons: 172px; --basket: 70px; /* Derived fixed totals (no JS) */ --leftFixed: calc(var(--outer) + var(--search)); --rightFixed: calc(var(--trade) + var(--icons) + var(--basket) + var(--outer)); /* The auto-calculated inner spacers */ --innerLeft: max(0px, calc((var(--rightFixed) - var(--leftFixed)) / 2)); --innerRight: max(0px, calc((var(--leftFixed) - var(--rightFixed)) / 2)); width:100%; max-width:100%; margin: 0 auto; position: relative; display: grid; grid-column-gap: 0rem; grid-template-columns: var(--outer) /* outer spacer left */ var(--search) /* search */ var(--innerLeft) /* inner spacer left (computed) */ auto /* logo */ var(--innerRight) /* inner spacer right (computed) */ var(--icons) /* icons */ var(--trade) /* trade */ var(--basket) /* basket */ var(--outer); /* outer spacer right */ grid-template-areas: "outerL search innerL logo innerR icons trade basket outerR" "nav nav nav nav nav nav nav nav nav"; align-items: center; position:relative; padding-top:1em; } #pt .ext>* { min-width: 0; } /* defaults */ li.pipe{ display:none; } @media only screen and (max-width: 1440px) { #pt .ext { padding:1em; } } @media only screen and (max-width: 1200px) { #pt .ext { padding:1em; } } /* logo ------------------------------------------------------- */ #a142999552{ grid-area:logo; } #a142999552 svg{ margin:auto; max-width:500px; } /* search toggle ------------------------------------------------------- */ #a142999554, .art.fst{ display:none; } /* search ------------------------------------------------------- */ #pt .search { display:grid; align-content:center; grid-area: search; text-align: left; font-size:16px; border:1px solid var(--blue); border-radius:100vh; background-color:var(--off-white); padding: 0 16px; height:50px; margin-right:auto; width: 320px; anchor-name:--search-anchor; } #pt .search form { width:100%; display:grid; grid-template-areas: " button search"; grid-template-columns: 24px 1fr; } #pt .search input { display: block; } #pt .search input#searchbox { grid-area:search; margin: auto; background-color:transparent; color:var(--black); font-size: 14px; padding: 0; border:none; width:calc(100% - 1em); /* outline:1px red solid; */ height: 26px; font-family:var(--heading-font); /* margin-left:1em; */ } #pt .search input#searchbox:focus-visible{ outline:none; } #pt .search:focus-within{ outline: 2px solid var(--blue); outline-offset: -8px; } #pt .search input#searchbox::placeholder{ color:var(--black-alpha); font-family:var(--monospace); } /*could do with some way of nicely seeing font awesome icons in coms */ #pt .search input#search { margin: 0; padding:0; border:none; border-radius:0; background-color:transparent; color:var(--blue); font-family:var(--font-awesome); height:16px; align-self:center } /* icons ------------------------------------------------------- */ #p54820864, #p54820864{ grid-area:icons; margin-right:1em; } #p54820864 img, #p54820864 img{ width:35px; margin:auto } #p54820864 ul, #p54820864 ul{ display:grid; grid-template-columns: 70px 70px; align-items:center; grid-gap:1em; list-style:none; text-align:center; align-items:center; } #p54820864 li a.img{ grid-area:icon; } #p54820864 li a.lnk{ font-family:var(--heading-font); grid-area:link; align-content:center; font-size:12px; line-height:1.1em; height:calc(1.1em * 2); } #p54820864 li.wish{} #p54820864 li.lnk{ display:grid; grid-template-areas: "icon" "link"; margin:auto; } #p54820864 li.reg, #p54820864 li.sout{ display:none; } /* trade signup ------------------------------------------------------- */ .art#a143163394{ grid-area:trade; text-align:center; display:grid; grid-template-areas: "icon" "link"; grid-template-columns:1fr; margin:auto; } .art#a143163394 .imgcont{ grid-area:icon; } .art#a143163394 .artp{ grid-area:link; align-content:center; } .art#a143163394 img{ margin:auto; width:35px; margin:auto } .art#a143163394 p{ font-family:var(--heading-font); align-content:center; font-size:12px; line-height:1.1em; height:calc(1.1em * 2); } /* basket ------------------------------------------------------- */ #pt .bskt { grid-area: basket; position:relative; display:block; margin-left:auto; align-content:start; anchor-name: --basket-anchor; } #pt .bskt:hover{ cursor:pointer; } /*items in basket */ #pt .bskt p, #pt .bskt a.mybsktlnk{ } /* new checkout changes the way the basket works... ------------------------------------------------------- */ #mybskt{ grid-area: basket; position:relative; display:grid; grid-template-areas: "icon" "link"; margin:auto; background-color:var(--white); /* border-radius:2em; */ /* padding:1em; */ } #mybskt .bsktitems{} #mybskt h4{ display:none; } #mybskt .bsktvalue{ display:none; } #mybskt .bsktitems{ display:block; position:absolute; top:-.5em; right:-.5em; background-color:var(--green); border-radius:2em; padding:.125em; z-index:1; } #mybskt .bsktitems p{ font-size:.725em; margin:0; font-family:monospace; width:1rem; height:1rem; align-content:center; text-align:center; color:var(--white); background-color:var(--green); border-radius:100vw; } #mybskt .bsktitems span{ display:none; } #mybskt a.btn{ position:relative; display:block; margin:auto; padding: 0; border:none; background:none; color:var(--text-color); } #mybskt:after{ content:"Basket"; grid-area:link; align-content:center; display:block; font-family:var(--heading-font); font-size:12px; text-align:center; font-size:12px; line-height:1.1em; height:calc(1.1em * 2); } #mybskt img{ --button-color:transparent; --button-text-color:transparent; --button-border-color:transparent; grid-area:icon; font-size: 1em; text-align: center; cursor: pointer; border: none; border-radius: var(--border-radius); outline: none; padding: 0; width: 35px; } #mybskt img:hover, #mybskt a.btn:hover{ border:none; background-color:transparent; } #mybskt a.btn img:hover{ --button-hover-color:transparent; } /* Nav Settings ------------------------------------------------------- */ #pt .nav-wrapper{ /* margin-top: 1em; */ } .nav-wrapper .nav{ border-top:1px solid rgba(155, 168, 174, 0.25); border-bottom:1px solid rgba(155, 168, 174, 0.25) } /* for fixed header on scroll ------------------------------------------------------- */ #pt img, #pt svg, #pt a, #pt input, #pt .menu, #pt .nav, #pt .logo{ transition: height var(--pt-transition), width var(--pt-transition), padding var(--pt-transition), margin var(--pt-transition), font-size var(--pt-transition), line-height var(--pt-transition), transform var(--pt-transition); } :root body.scrolled{ --menu-line-height:40px; } body.scrolled #pt{ position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 9999; box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 ); border-top:4px solid var(--blue); } body.scrolled #pt .ext { padding-top:.5em; } /* stop the page jumping when #pt becomes fixed */ body.scrolled #pc{ padding-top: var(--pt-height); } body.scrolled #a142999552 svg{ --logo-width: 300px; margin:auto; max-width:var(--logo-width); } body.scrolled #pt .nav-wrapper{ margin-top:0em; } /* search ------------------------------------------------------- */ body.scrolled #pt .search { height: 39px; width: 320px; } /* Links ------------------------------------------------------- */ /* reduce size of images */ body.scrolled .art#a143163394 img, body.scrolled #p54820864 img, body.scrolled #mybskt img{ margin:auto; width:35px; } /* ------------------------------------------------------------------------------------- =Center Panel #pc ------------------------------------------------------------------------------------- */ #pc { display: grid; grid-template-columns:minmax(0,1fr); text-align: center; background-color:var(--off-white); background-color:#F6F8F9; margin-bottom:2em; grid-template-areas: "content" "bdcb" "trustsignals"; } .buy #pc { display: grid; text-align: center; background-color:var(--off-white); background-color:#F6F8F9; margin-bottom:0em; grid-template-areas: "content" "trustsignals" "bdcb"; ; } #pc .arts{ grid-area:content; max-width:var(--site-max-width); margin:auto; } /*top ctas ------------------------------------------------------- */ .art#a143032320{ grid-area:trustsignals; /* z-index:999; */ /* width:100%; */ background-color:var(--blue); } .art#a143032320 .fa-duotone { --fa-primary-color: var(--green); --fa-secondary-color: var(--dark-blue); --fa-primary-opacity: 1; --fa-secondary-opacity: 0.4; font-weight:200; font-size: 30px; } .art#a143032320 p{ color:var(--white); padding:10px; } .art#a143032320 .artp{ max-width:var(--site-max-width); margin:auto; padding: 8px 0px; } .art#a143032320 .slidecont{ text-align:center; align-items:center; display:block; color:var(--white); padding:.2em; } .art#a143032320 i, .art#a143032320 p{ display:inline-block; vertical-align:middle; } .art#a143032320 li{ border-right:1px solid var(--white-alpha); margin:0em; margin-block-start: 0em; margin-block-end: 0em; } .art#a143032320 li:last-child{ border-right:none; } .art#a143032320 button, .art#a143032320 .slider-indicators{ display:none; } .art#a143032320 p{ font-family:var(--heading-font); color:var(--white); padding: 0 10px; line-height:1; } /* ------------------------------------------------------------------------------------- =Main Panel #pmid ------------------------------------------------------------------------------------- */ #pmid { flex:1; z-index:2; width:100%; max-width:var(--site-max-width); margin-inline:auto; display:grid; grid-template-columns:minmax(220px, 300px) minmax(0, 1fr); column-gap:2rem; align-items:start; } #pmid.page_buy { max-width:100%; } #pmid:has(.pmfull){ grid-template-columns:1fr; } #pmid:has(.pmfull) #pm{ grid-column:1; } /* filter search results? ------------------------------------------------------- */ #fs { display: none; } /* full width panel ------------------------------------------------------- */ .pmfull { margin: 0 auto; position: relative; /*padding should be put in media queries */ width: var(--site-max-width); max-width:100%; z-index:2; } /* left panel - when filter is in use ------------------------------------------------------- */ #pl { grid-column:1; } /* Right panel ------------------------------------------------------- */ #pr { width: var(--right-panel-width); margin: 0; margin-right: auto; margin-left: 1rem; vertical-align: top; } /* wide panel (used if left or right panels exist) ------------------------------------------------------- */ .pmwide {} .pmstd { width: var(--site-max-width); } /* ------------------------------------------------------------------------------------- =Footer Panel #pf ------------------------------------------------------------------------------------- */ #pf { width: 100%; margin: auto; z-index:1; background-color:var(--off-white); padding:2em; margin-top:2em; } #pf .ext { margin: 0 auto; position: relative; /*padding should be put in media queries */ max-width: var(--site-max-width); width: 100%; padding: 0; display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-gap:1em; grid-column-gap: 2em; } #pf .ext .arts{ display:grid; grid-column:1/-1; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-gap:1em; grid-column-gap: 2em; } /* ------------------------------------------------------------------------------------- =Bottom Panel #pb ------------------------------------------------------------------------------------- */ #pb { --text-link-color:var(--grey); --heading-color:var(--grey); --text-color:var(--grey); width: 100%; margin: auto; padding-top:2em; background-color:var(--off-white); } #pb .ext { --gap:50px; z-index:1; background-color: var(--dark-blue); border-top-right-radius:2em; border-top-left-radius:2em; margin: 0 auto; padding: 75px 0; position: relative; display: grid; grid-template-areas: ". logo logo logo logo . . " ". customerservices product contact cards . ."; grid-template-columns: var(--spacer-width) minmax(auto, 300px) minmax(auto, 300px) minmax(auto, 300px) auto 1fr var(--spacer-width) } #pb a:hover{ text-decoration:underline; color:var(--green); text-decoration-color:var(--light-blue); } #pb #a142999552{ grid-area:logo; } #pb #a142999552 svg{ margin:0; max-width:300px; margin-bottom:2em; } #p54788102{ grid-area:customerservices; } #p54788103{ grid-area:product; } #a142999555{ grid-area:contact; /* margin-top:2em; */ } #a142999555 h2 { --font-size:1.5em; text-transform: capitalize; margin-bottom:1em; } #a142999555 p{ line-height:1.5; } #a142999555 ul{ margin-top:1em; } #a142999555 li{ margin-top:.5em; } /* Info defaults ------------------------------------------------------- */ /* hide icons if present on info links */ #pb .info li.icon img { display: none; } #pb .info h3 { --font-size:1.5em; text-transform: capitalize; margin-bottom:1em; } #pb .info ul { padding: 0; } #pb .info li { list-style: none; font-size: 1em; padding: 0; line-height:1.75; } /* Article defaults ------------------------------------------------------- */ /* hide icons if present on info links */ #pb .art li.icon img { display: none; } #pb li{ list-style:none; } /* ------------------------------------------------------------------------------------- =Bottom bar #pbf ------------------------------------------------------------------------------------- */ #pbf { background-color: var(--dark-blue); --font-size: 11px; --text-link-color:var(--grey); font-size:small; padding: 0; } #pbf .ext { --text-color:var(--off-white); margin: 0 2em; position: relative; display: grid; text-align: center; color: var(--white); grid-template-areas:". paymenticons terms copyright ."; align-items:center; grid-template-columns: var(--spacer-width) 1fr auto 1fr var(--spacer-width); } .etailcopy{ grid-area:copyright; text-align:right; } .etailcopy p{ display:inline-block; margin-left:.5em; } #pbf .etail, #pbf .etail a, #pbf .etailcopy p{ } #p54788099{ grid-area:terms; } #p54788099 li{ display:inline-block; margin:.5em; } #a142639116{ --font-size:16px; grid-area:paymenticons; text-align:left; } #a142639116 li{ display:inline-block; margin:.5em; } #a142639116 i { font-size:20px; } /* ------------------------------------------------------------------------------------- =Breadcrumb ------------------------------------------------------------------------------------- */ .bdcb { grid-area:bdcb; width:100%; text-align: center; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; /* Firefox */ scrollbar-width:none; /* IE/old Edge */ -ms-overflow-style:none; /* padding: 0 1em .5em; */ } .bdcb::-webkit-scrollbar{ display:none; } .buy .bdcb{ background-color:var(--white); } .bdcb .crumb{ margin:auto; text-align: left; display:flex; flex-wrap:nowrap; width:max-content; min-width:var(--site-max-width); list-style:none; padding:.5rem; } .bdcb .crumb li{ flex:0 0 auto; white-space:nowrap; } .home .bdcb { display: none; } .crumb { display: block; max-width:var(--site-max-width); margin:auto; text-align: left; /* margin: 0 var(--half-spacing); */ } .bdcb ul li { list-style: none; display: inline-block; margin: 0; } .bdcb li a, .bdcb li h1{ font-family: var(--monospace); color:var(--text-color-light); font-size: 12px; font-weight: normal; padding: 0; margin: 0; display: inline-block; vertical-align:middle; letter-spacing:normal; } /*active page */ .bdcb li h1 { font-size: 12px; margin:0; color:var(--text-color); } /*for the break between the crumb*/ .bdcb li:after { display:inline-block; font-family: var(--text-font); color:var(--text-color-light); font-size: .825rem; font-weight: normal; content:">"; margin: .25rem; } .bdcb li:last-child:after { content: ""; margin: 0; display: none; } .bdcb span { display: inline-block; margin: 0; } .bdcb h1 {} /* ------------------------------------------------------------------------------------- =Sitemap ------------------------------------------------------------------------------------- */ #pm .smap ul { list-style-position: inside; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); } #pm .smap ul li {} /* First Level */ #pm .smap ul li {} #pm .smap ul li a { font-weight: var(--heading-font-weight); font-size: 1.2em; } /* Second Level */ #pm .smap ul li ul { grid-template-columns: 1fr; } #pm .smap ul li ul li { width: 100%; } #pm .smap ul li ul li a { font-weight: normal; font-size: 1em; } /* Third Level */ #pm .smap ul li ul li ul li a { font-weight: normal; } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- =DEPARTMENT PAGES -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =FilterSearch ------------------------------------------------------------------------------------- */ .filter{ height: 100%; background-color: var(--off-white); overflow-x: hidden; /* Disable horizontal scroll */ padding:1rem; } /* Filter Toggle ------------------------------------------------------- */ #fstrigbtn{ display:none; } .fstrigspn{ display:block; vertical-align:middle; text-align:center; padding:8px 32px; border: 1px solid var(--border-color); border-radius: 100vw; border:1px solid var(--blue); background-color:var(--off-white); color: var(--text-color); height: 50px; font-size: 16px; font-family: var(--heading-font); align-content:center; cursor:pointer; } .fstrigspn:before{ content:"\f1de"; font-family:var(--font-awesome); display:inline-block; font-size:1em; margin-right:.5rem; } .filter.showfilter{ display:block; } /* the close button */ .fsclsdiv { text-align:right; } .fsclsdiv .fsclsspn{ border:1px solid var(--black); color:var(--black); /* background-color:var(--green); */ border-radius:100vw; font-family:monospace; padding:0rem; margin:0rem; line-height:1; text-align:center; cursor:pointer; align-content:center; height:24px; width:24px; display:none; } /* filter heading if used ------------------------------------------------------- */ .filter .bt {} .filter .bt h3 {} /* price slider ------------------------------------------------------- */ /* Container */ [sectiontype="priceslider"]{ padding:1rem 0; display:none; } /* Heading */ [sectiontype="priceslider"] h5{ margin:0 0 .75rem; font-size:var(--small-heading-font-size); } /* Price display */ #divPriceRangeDisplay{ margin-bottom:.75rem; font-weight:600; text-align:center; } /* Slider track */ #sldiv{ position:relative; height:.5rem; border-radius:999px; background:var(--light-grey); margin:1rem .5rem; } /* Selected range */ #sldiv .ui-slider-range{ position:absolute; height:100%; background:var(--purple); border-radius:999px; } /* Handles */ #sldiv .ui-slider-handle{ position:absolute; top:50%; transform:translate(-50%,-50%); width:1.25rem; height:1.25rem; border-radius:50%; background:var(--pure-white); border:2px solid var(--purple); cursor:pointer; box-shadow:var(--box-shadow); } @media (pointer:coarse){ #sldiv .ui-slider-handle{ width:1.75rem; height:1.75rem; } } /* Keyboard focus */ #sldiv .ui-slider-handle:focus{ outline:none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 25%, transparent), var(--box-shadow); } /* filter sections slider ------------------------------------------------------- */ .attrsection {} .filter .HeaderContent { padding: var(--spacing) 0; position: relative; cursor: pointer; display: grid; align-items: center; grid-template-columns: 1fr 1rem; border-bottom:1px solid var(--border-color) } .attrsection:last-of-type .HeaderContent{ border-bottom:0; } .HeaderContent:after { content: '\f106'; font-family: var(--font-awesome); font-size: 1rem; } .HeaderContent.collapsed:after { content: '\f107'; } .HeaderContent h5 { margin: 0; font-size: 1rem; padding: 0; position: relative; cursor: pointer; } .attrsection .items { } .longattrsection .items { overflow-x: hidden; -ms-overflow-x: scroll; margin-bottom: 1rem; } .HeaderContent h5 { --heading-color:var(--text-color); font-weight:500; font-size: 20px; } .collapsed h5 {} .collapsed h5:hover {} /* individual options */ .attrsection .citem { padding: var(--spacing) 0; font-family: var(--text-font); font-size:1em; font-weight:200; color:var(--text-color); margin: 0; cursor: pointer; text-align: left; } .attrsection .citem::before, .attrsection .citemselected::before { font-family: var(--font-awesome); margin-right: .5rem; font-size: 1.25rem; display: inline-block; vertical-align:middle; } .attrsection .citem::before { content: '\f0c8'; } .attrsection .citemselected::before { content: '\f14a'; color:var(--green); font-weight:600 } /* filter buttons ------------------------------------------------------- */ .resetfs { text-decoration:underline; cursor:pointer; display:inline-block; margin:0 .25em; } .fltrattrbtn{ cursor:pointer; display:inline-block; margin:0 .25em; } .filter .resetfs{ display:none; margin:0; } /*as we currently write out TWO clear filter buttons*/ .resetfs + .resetfs, .fltrattrbtn + .resetfs{ display:none; } .fltrattrtxt, .resetfs h5 { font-size:.825rem; font-family:var(--text-font); font-weight:var(--text-font-weight); margin: 0; } .fltrattrtxt:after{ content:"\e12e"; font-family:var(--font-awesome); color:var(--text-color-light); display:inline-block; font-size:.8em; margin-left:.25rem; } /* ------------------------------------------------------------------------------------- =SearchHeader / SearchFooter ------------------------------------------------------------------------------------- */ .deptwrap {} .searchheader { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "items filter sort-by"; /* grid-gap: 1em; */ align-items: center; padding: 1em .5em; background-color: var(--main-panel-color); } .searchheader .search { /* for unknown reasons we re-write out the searchbox in the search header*/ display: none !important; } .searchheader label{ font-family:var(--text-font); font-weight:normal; font-size:.825rem; margin:0; margin-right:.5rem; display:none; } .searchheader .paging{ /*important needed as something shoves an inline style there!*/ display:none !important; } .searchheader { } /* results found */ .searchheader h5#rescou { grid-area:items; font-family:var(--text-font); font-weight:normal; font-size:.825rem; margin:0; } /* sort by */ .searchheader #sorpan, .searchheader form[name="dispord"]{ grid-area:sort-by; margin: 0; } /* results per page */ .searchheader #rpppan, .searchheader .rpp { margin: 0; } /*filter options if applicable */ .fltrbtnholder{ grid-area:filter; } /* paging ------------------------------------------------------- */ .paging { grid-area:paging; text-align: center; } /*writing out "page" is a little daft */ .paging label { display: none; } .paging .currpg { font-size: 1em; display: inline-block; margin-right: .5em; border-radius:50%; background-color:var(--black); color:var(--white); width:55px; height:55px; align-content:center; } .paging a { font-size: 1em; display: inline-block; margin-right: .5em; border-radius:50%; background-color:var(--off-white); width:55px; height:55px; align-content:center; } .paging a:last-child { margin-right: 0; width:unset; height:unset; background-color:transparent; border-radius:0; text-decoration:underline; } .searchfooter { padding: .5em; text-align: center; margin: 1em 0; } #sr { display: grid; grid-template-columns:repeat(3, 1fr); grid-gap: 2rem; grid-row-gap: 4rem; position: relative; } .pmfull #sr{ grid-template-columns:repeat(4, 1fr); } /* ------------------------------------------------------------------------------------- =Subdepartment tree ------------------------------------------------------------------------------------- */ .depttree{ grid-column:1/-1; } .depttree > .bt h3{ display:none; } .depttree{ display:block !important; margin-bottom:2rem; } .depttree h4.tagline{} .depttree ul{ display:grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; } .depttree li{ position:relative; margin:0; overflow:hidden; align-items:center; background-color:var(--grey); /* display:grid; */ /* grid-template-columns:1fr; */ } .depttree li a.img{ /*cos iphones? */ display:block; padding:0; grid-column:1; grid-row:1; } .depttree li a.img img{ margin:0 !important; } .depttree li a.img img{ min-width: 100%; aspect-ratio: 1/1; object-fit: cover; margin: auto; } .depttree li a.txt{ display:block; font-family: var(--heading-font); font-size:var(--heading-font-size); margin:0; padding:.5em; color:var(--black) /* grid-column:1; */ /* grid-row:1; */ padding:.5rem; align-self:center; text-align:center; } /* ------------------------------------------------------------------------------------- =FeaturedProducts ------------------------------------------------------------------------------------- */ /* Base settings ------------------------------------------------------- */ #deptlist .fprdcont, #searchlist .fprdcont {} /* lets use grid layouts cos they are awesome! */ .fprd { position: relative; overflow:hidden; display: grid; grid-template-columns: minmax(150px, auto) 1fr; grid-template-areas: "image image" "strapline strapline" "title title" "selling-price prev-price" "fprdinfo fprdinfo"; grid-template-rows:auto auto auto auto 1fr auto ; } /* reset margins and paddings */ .fprd p, .fprd h3, .fprd h4, .fprd h5 { margin: 0; padding: 0; } .fprd h5.type{ display:none !important; } /* image ------------------------------------------------------- */ .fprd .fprdimg { grid-area: image; anchor-name: --fprdimg-anchor; } .fprd .fprdimg a { display: block; text-align: center; } .fprd .fprdimg a.swap{ position:absolute; position-anchor: --fprdimg-anchor; bottom:anchor(--fprdimg-anchor bottom); right:anchor(--fprdimg-anchor right); padding:1em; } .fprd .fprdimg img { margin: 0 !important; object-fit:cover; width:100%; } .fprd .fprdimg a.swap img{ width:120px; } .fprd .fprdimg img:hover {} /* title ------------------------------------------------------- */ .fprd .fprdtitle, .fprd a.title{ grid-area: title; font-family:var(--heading-font); font-size: 22px; /* line-height: 1.4em; */ height: calc(1.4em * 2); /* forces 2-line height */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom:1rem; } .fprd .fprdtitle a.lnk, .fprd a.title { color:var(--black); } /*strapline */ .fprd .strap { grid-area: title; font-family:var(--heading-font); font-size: 22px; /* line-height: 1.4em; */ /* height: calc(1.4em * 2); */ /* forces 2-line height */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin:.5rem 0; } .fprd .strap p{ --font-size:14px; font-family:monospace; } /* title ------------------------------------------------------- */ .fprd .fprddescr{ grid-area:description; display:none; } /* saving ribbon ------------------------------------------------------- */ .fprd .saving { --featured-color: var(--featured-alt-color); /*funky ribbon effect courtesy of freecodecamp */ --f: .5em;/* control the folded part*/ --r: .5em;/* control the ribbon shape */ --t: .5em;/* the top offset */ --featured-color:var(--green); position: absolute; top:var(--t); left: calc(-1*var(--f)); padding: 0 10px var(--f) calc(10px + var(--r)); clip-path: polygon(0 0,0 calc(100% - var(--f)),var(--f) 100%, var(--f) calc(100% - var(--f)),100% calc(100% - var(--f)), calc(100% - var(--r)) calc(50% - var(--f)/2),100% 0); background: var(--featured-color); } .fprd .saving label { color:var(--blue); margin:0; } .fprd .saving h6 { color:var(--blue); margin:0; } /* pricing structure ------------------------------------------------------- */ .fprd h6 { margin: 0; padding: 0; margin-top:.5rem; display:inline; } .fprd h6 span { font-size: small; display: block; } .fprd label { margin: 0; padding: 0; font-size: small; --text-color:var(--light-blue); color:var(--light-blue); } .fprd label + h6 { margin-left:.5em; } .fprd .prevprice { grid-area:prev-price; display:none; } .fprd .prevprice label {} .fprd .prevprice h6 { text-decoration: line-through; } .fprd .price { grid-area: selling-price; color:var(--black); align-self:end; margin-bottom:1em; } /* hack for ready made products :( */ .fprd.readymade .price h6:before{ content:"From"; margin: 0; padding: 0; font-size: small; --text-color:var(--light-blue); color:var(--light-blue); font-family:var(--text-font); margin-right:1em; } .fprd.sample .price { display:none; } .fprd .price label { /* display:none; */ } .fprd .trade { grid-area: selling-price; text-align: center; } .fprd .offer:not(.flag) { grid-area: selling-price; /* margin-left:1rem; */ } /* pricebreaks ------------------------------------------------------- */ .pricebreak {} /* Unit specifics ------------------------------------------------------- */ .fprd .unit { grid-area: unit-price; } .fprd .packsize { grid-area: packsize; text-align: left; } .fprd .unit h6 span { display: block; font-size: small; font-weight: normal; font-family: var(--text-font); } .fprd .qty { grid-area: carton; text-align: center; } .fprd .qty h6 span { display: block; font-size: small; font-weight: normal; font-family: var(--text-font); } /* clientref/model code ------------------------------------------------------- */ .fprd .clientref span {} .fprd .model, .fprd .clientref { margin: 0; font-size: small } .fprd .model span, .fprd .clientref span { font-size: small; display: block; } .fprd .clientref { grid-area: client-ref; font-size: .725em; text-align: left; } .fprd .model { grid-area: model-number } /* flags ------------------------------------------------------- */ /*flags may exist either within the image or as a separate element, position accordingly */ .fprdimg .piflags { position: absolute; top: 0rem; pointer-events:none; } .fprdimg .piflags .f18022400{ display:none; } .fprd .piflags ul { margin: 0; padding: 0; } .piflags ul li { list-style: none; margin: 0; } .fprd .piflags img { width: auto; border-radius:0; } /* flag could be any auto sys flag like no stock, offer etc */ .fprd .flag { position:absolute; display:block; } .fprd .flag img { display:block; margin:0; } /* quantity in basket - CAUTION not shown everywhere... ------------------------------------------------------- */ .qtyInBskt { display: none; } /* more info and quickview button ------------------------------------------------------- */ .fprdinfo{ grid-area:fprdinfo; /* margin:1rem 0; */ /* margin-top:1rem; */ align-content:center; } .fprdinfo a.btn{ display:block; padding:var(--half-spacing); height:50px; align-content:center; padding:var(--half-spacing); background-color:var(--green); border-color:var(--green); color:var(--dark-blue); } /* Buy form ------------------------------------------------------- */ .fprd form { grid-area: buy-pane; text-align: center; margin: 0; } .fprd form.smplreqform{ grid-area:fprdinfo; /* display:none; */ align-self:center; /* margin-left:1rem; */ /* outline:1px red solid; */ display:none; } .fprd.sample .fprdinfo{ display:none; } .fprd.sample form.smplreqform{ display:block; } .fprd form.smplreqform input.submit { display:block; padding:var(--half-spacing); background-color:var(--light-blue); border-color:var(--light-blue); color:var(--white); align-self:center; align-content:center; width:100%; /* margin-top:1rem; */ height:50px; } .fprd form select {} .fprd form label { /*seems daft to display a label for an input that is obvious*/ display: none; } .fprd button { display:inline-block; vertical-align:middle; font-weight:600; padding: .5em .75em; } /* Wishlist/Savefor later on fprd ------------------------------------------------------- */ .sfl{ grid-area:unset; position:absolute; top:.5em; right:.5em; z-index:1; } .sfl .submit { border:0; padding:0.125em; width:2em; line-height:1; background-color:transparent; } /* Email when in stock ------------------------------------------------------- */ .fprd .ewis { grid-area: buy-pane; margin: 0; padding: 0 .5rem; } /* fprd adverts ------------------------------------------------------- */ .fprd.add{ display:block; position:relative; } .fprd.add .bnr{ width: 100%; height:100%; object-fit: cover; color:var(--white); } .fprd.add .bnr picture, .fprd.add .bnr img{ width: 100%; height:100%; object-fit: cover; border-radius:1em; } .fprd.add .toi{ position:absolute; top:1em; padding:2em; } .fprd.add h3{ --heading-color:var(--white); font-size:40px; position:relative; z-index:1; margin-bottom:2rem; } /* ------------------------------------------------------------------------------------- =Client Specific Stylings ------------------------------------------------------------------------------------- */ .msgpnl ul{ list-style:none; background-color:var(--off-white); padding:1rem; } /* home page banner styling */ #a143032321 h3{ --font-size:var(--xlarge-heading-font-size); } #a145063937, #a145063939{ display:grid; grid-template-areas: "image content"; grid-template-columns: 60% 1fr; grid-column-gap:3rem; margin:2rem 0; align-items:center; } #a145063938{ display:grid; grid-template-areas: " content image"; grid-template-columns: 1fr 60%; grid-column-gap:3rem; margin:2rem 0; } #a145063937 .imgcont, #a145063938 .imgcont, #a145063939 .imgcont{ grid-area:image; } #a145063937 img, #a145063938 img, #a145063939 img{ border-radius:2rem; } #a145063937 .artp, #a145063938 .artp, #a145063939 .artp{ grid-area:content; text-align:center; } #a145063937 p, #a145063938 p, #a145063939 p{ margin-bottom:2rem; } #a145063937 h3, #a145063938 h3, #a145063939 h3{ --font-size:var(--large-heading-font-size); margin-bottom:1rem; } /* contact us */ #prom-1652359162 .form{ grid-column: auto / span 6; margin:0; background-color:var(--off-white); padding:2em; grid-row:auto; border-radius:2em; } #prom-1652359162 .form h3.header{ display:none; } #prom-1652359162 .form .inputtext{ border:1px solid var(--blue); background-color:var(--white); margin:0; height: 50px; width:100%; text-align: center; border-radius:100vw; /* font-family:var(--heading-font); */ /* max-width:14ch; */ margin:auto; } .formsubmit .submit{ background-color:var(--green); border-color:var(--green); color:var(--dark-blue) } #prom-1652359162 .form label { font-size:18px; margin:1rem .5rem; } #prom-1652359162 .art#a145391617{ grid-column: auto / span 6; margin:0; grid-row:auto / span 2; } #prom-1652359162 .art#a145391617 .artp{ display:grid; grid-template-columns:repeat(12, 1fr) } #prom-1652359162 .art#a145391617 .artp p, #prom-1652359162 .art#a145391617 .artp h2, #prom-1652359162 .art#a145391617 .artp h3{ grid-column:1/-1; } /* ------------------------------------------------------------------------------------ SCREEN - v6 nav 2026 Filename : nav.css Last Updated : 01. 03. 2026 Copyright :(c) 2026 Etail Systems Ltd Author : Etail Systems Ltd ------------------------------------------------------------------------------------- */ picture, picture img{ display:block; } /* menu toggle - hidden by default, shows on mobile/smaller viewport ------------------------------------------------------- */ .home-hamburger { grid-area: nav-start; display: none; z-index: 1000; border-radius:2em; align-content:center; } .home-hamburger .visible-xs { visibility: hidden; } /*wrapper ------------------------------------------------------- */ .nav-wrapper *, .nav-wrapper *:before, .nav-wrapper *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .nav-wrapper { grid-area:nav; position: relative; width: 100%; min-height: var(--navbar-height); margin: 0 auto; text-align:center; } .nav-wrapper ul, .nav-wrapper li{ margin:0; padding:0; list-style: none; } /* ------------------------------------------------------------------------------------- =Top Nav ------------------------------------------------------------------------------------- */ .nav-wrapper .nav { margin: 0 auto; padding: 0; list-style: none; position: relative; /*used to stop the gaps with inline block stuff font-size:0;*/ width: 100%; max-width: var(--menu-max-width); text-align:center; color:var(--navbar-dropdown-text-color); } ul.nav>li { display:inline-block; } /* top nav links ------------------------------------------------------- */ ul.nav .l0>a, ul.nav .l1>a{ display: block; line-height:var(--menu-line-height); /* if drop down icon is being used padding: 0 calc(1em + 6px) 0 0.5em;*/ padding: 0 3em 0 3em; color: var(--navbar-heading-color); font-family:var(--navbar-heading-font); font-size:var(--navbar-heading-font-size); font-weight:var(--navbar-font-weight); text-decoration: none; border-bottom:4px solid transparent; } ul.nav>li>a:only-child {} @media(min-width:922px) { ul.nav>li>a:hover, ul.nav>li:hover>a { background: var(--navbar-active-color); color:var(--navbar-active-text-color); border-bottom:4px solid var(--green); /*don't change the font weight on hover unless you want elements to shift left/right as the size changes */ } } ul.nav>li.active-menu-item>a, ul.nav>li.first-menu-item>a { background: var(--navbar-active-color); /* color:var(--navbar-active-text-color); */ border-bottom:4px solid var(--green); } ul.nav>li>a .fa { position: relative; width: 24px; } ul.nav>li>a>img { max-width: 16px; display: block; } /* Classic Dropdown -------------------------------------------------------------------------------------------------------------- */ /* dropdown icons ------------------------------------------------------- */ .nav .deptlink{ display:grid; } .nav .classic .deptlink{ display:grid; grid-template-areas:"link popout"; grid-template-columns:1fr 2em; align-items:center; } .nav .classic .deptlink a.img{ grid-area:image; padding:.5em; } .nav .classic .deptlink a.txt{ grid-area:link; display:block; padding:1em; font-family:var(--text-font); font-weight:600; font-size:var(--navbar-heading-font-size); /* color:var(--navbar-dropdown-text-color); */ } /* css arrows if has child item */ .deptlink:after{ font-family: var(--font-awesome); text-decoration: none; font-size: 16px; padding: 0; content: '\f105'; grid-area:popout; margin:auto; text-align:center; /* outline:1px red solid; */ } .deptlink:only-child:after, .l3 .deptlink:after{ content: ""; } ul.nav>li.classic { display:inline-block; position:relative; } /* 2nd Level ------------------------------------------------------- */ ul.nav>li>ul.l2 a{ display:block; padding:1em; } ul.nav>li>ul.l2, ul.nav>li>.menu-drop-down{ position: absolute; width: var(--navbar-dropdown-width); z-index:1001; text-align:left; background: var(--navbar-dropdown-color); -webkit-box-shadow: var(--box-shadow); -moz-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); } ul.nav>li>ul.l2 li:hover { background: var(--navbar-active-color); color:var(--navbar-active-text-color); } /* 3rd Level ------------------------------------------------------- */ ul.nav>li>ul>li>ul.l3{ position: absolute; width: var(--navbar-dropdown-width); z-index:1001; text-align:left; background: var(--navbar-dropdown-color); -webkit-box-shadow: var(--box-shadow); -moz-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); color:var(--navbar-dropdown-text-color); left: var(--navbar-dropdown-width); top: 0; } /* 4th Level ------------------------------------------------------- */ ul.nav>li>ul>li>ul>li>ul.l4, ul.nav>li>ul>li>ul>li>ul.l5{ display:none; } /* this class should only be applied to top level menu items if their sub menu flows outside of the viewport, used for dropdowns that are close to the right edge - this change should align the right edge of the dropdown to the right edge of the screen removing horizontal scroll */ .over .l2{ /* outline:1px red solid; */ right:0; } ul.nav>li.over>ul>li>ul.l3, ul.nav>li.popl>ul>li>ul.l3{ left: auto; right: var(--navbar-dropdown-width); -webkit-box-shadow: var(--box-shadow-alt); -moz-box-shadow: var(--box-shadow-alt); box-shadow: var(--box-shadow-alt); } /* ------------------------------------------------------------------------------------- =Mega-menu / Mega-menu-classic ------------------------------------------------------------------------------------- */ /* CONTENT GRID ------------------------------------------------------- */ div.menu-grid, div.menu-grid-lined { position: relative; width: 100%; padding: 0; margin: 0; } div.menu-grid>div.menu-row { position: relative; padding:var(--half-spacing); height:auto; } /* Content Related */ ul.nav>li.mega-menu-classic>div ul{ margin: 0; } /* don't show l2;s */ .mega-menu-classic .l2 .menu-grid-lined{ display:none; } /* Mega Menus ------------------------------------------------------- */ ul.nav>li.mega-menu-classic>div, ul.nav>li.mega-menu>div { position: absolute; z-index:1001; width: var(--menu-max-width); height: auto; top: var(--navbar-height); left: 0; background: var(--navbar-dropdown-color); overflow: hidden; -webkit-box-shadow: var(--box-shadow); -moz-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); } /* Mega Menu - Clasic ------------------------------------------------------- */ .mega-menu-classic{} .mega-menu-classic .menu-grid > .menu-row ul.l2{ display:grid; grid-template-columns:repeat(5,1fr); grid-gap:1rem; margin-bottom:1rem; } .mega-menu-classic .menu-grid > .menu-row ul.l2 a.txt{ font-family:var(--heading-font); font-weight:var(--heading-font-weight); } .mega-menu-classic .menu-grid > .menu-row ul.l3{ text-align:left; } .mega-menu-classic .menu-grid > .menu-row ul.l3 a.txt{ font-family:var(--text-font); font-weight:var(--text-font-weight); } .nav .mega-menu-classic .deptlink{ display:grid; grid-template-areas: "image"; grid-template-columns:1fr; align-items:end; } .nav .mega-menu-classic .deptlink a.img{ grid-area:image; } .nav .mega-menu-classic .deptlink a.img img{ width:100%; } .nav .mega-menu-classic .deptlink a.txt{ grid-area:image; background-color:rgba(255, 255, 255, 50%); padding:1rem 1rem; font-family:var(--heading-font); font-weight:var(--heading-font-weight); font-size:1.125em; min-height:5em; align-content:center; text-align:center; } .mega-menu-classic .deptlink:after{ content: ""; display:none; } /* Mega Menu - Clasic with article ------------------------------------------------------- */ .mega-menu-classic.witharticle{} .mega-menu-classic:has(.deptarticle){} .mega-menu-classic:has(.deptarticle) div.menu-grid .menu-row, .mega-menu-classic:has(.deptarticle) div.menu-grid-lined .menu-row { display:grid; padding:1em; grid-template-columns:auto 1fr; grid-gap:4rem; margin-bottom: 0rem; } .mega-menu-classic:has(.deptarticle) .menu-grid > .menu-row ul.l2{ display:block; margin:0; } .mega-menu-classic:has(.deptarticle) .menu-grid > .menu-row ul.l2 a.txt{ font-family:var(--text-font); font-weight:700; } .mega-menu-classic:has(.deptarticle) .depts ul{ column-count:1; padding:.5em; } .mega-menu-classic:has(.deptarticle) .deptlink{ display:block; } .mega-menu-classic:has(.deptarticle) .deptlink a.img{ display:none; } .mega-menu-classic:has(.deptarticle) .deptlink a.img img{ width:100%; } .mega-menu-classic:has(.deptarticle) .deptlink a.txt{ display:block; background:none; padding:.25em; font-size:18px; min-height:auto; align-content:center; text-align:left; } .mega-menu-classic:has(.deptarticle) .deptlink:after{ content: ""; display:none; } .mega-menu-classic .deptarticle{ text-align:left; } .mega-menu-classic .deptarticle img{ width:unset; margin:0; margin-right:auto; } .mega-menu-classic .deptarticle p{ margin:0; color:var(--black); text-transform:capitalize; font-weight:700; } .mega-menu-classic .deptarticle img{ border-radius:1em; margin-bottom:1rem; } /* Mega Menu ------------------------------------------------------- */ .mega-menu .menu-grid > .menu-row ul{ display:grid; grid-template-columns: repeat(5,1fr); grid-gap:1rem; } .nav .mega-menu .deptlink{ display:grid; grid-template-areas: "image" "link"; grid-template-columns:1fr; align-items:center; text-align:center; } .nav .mega-menu .deptlink a.img{ grid-area:image; } .nav .mega-menu .deptlink a.img img{ width:100%; } .nav .mega-menu .deptlink a.txt{ grid-area:link; display:block; padding:.5em; } ul.nav>li.mega-menu>div>ul.mega-menu-nav { position: relative; width: var(--navbar-dropdown-width); height: 100%; margin:0; /* height: 500px; if you don't want javascript to define height, use manual height */ left: 0; top: 0; background: var(--navbar-sidebar-color); color:var(--navbar-sidebar-text-color); } /*side bar items */ ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink{ display:grid; grid-template-areas: "image title popout"; grid-template-columns:3em 1fr 1em; align-items:center; text-align:left; min-height:var(--navbar-dropdown-item-height); padding:.5em; } ul.nav > li.mega-menu > div > ul.mega-menu-nav > li:hover > .deptlink{ background-color:var(--navbar-active-color); color:var(--white); } ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink a.img{ display:block; grid-area:image; padding:.5em; } ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink a.txt{ display:block; grid-area:title; font-family:var(--heading-font); } ul.nav > li.mega-menu > div > ul.mega-menu-nav > li:hover > .deptlink a.txt{ text-decoration:none; } /*sort out icons - none in side bar */ .mega-menu-nav .l2 .deptlink .img{ display:none; } ul.nav > li.mega-menu > div > ul.mega-menu-nav > li.active-menu-item > .deptlink ul.nav > li.mega-menu > div > ul.mega-menu-nav > li.first-menu-item > .deptlink { background: var(--navbar-sidebar-hover-color); } ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a { display: block; line-height: 40px; padding: 0 15px; text-decoration: none; } ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a, ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a { background: #e6e6e6; } ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.menu-grid { position: absolute; width: calc(var(--menu-max-width) - var(--navbar-dropdown-width)); height: auto; max-height:100%; min-height: 100%; left: var(--navbar-dropdown-width); top: 0; background: var(--navbar-popout-color); } .mega-menu-nav .l3 .deptlink .img{ display:block; } ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a { background: #ddd; } .mega-menu-nav .l4 { display:none; } .nav-wrapper .visible-xs { visibility: hidden; position: absolute; } /* DEVICES EXCEPT MOBILE/tablet */ @media(min-width:991px) { /* CLASSIC 2ND, 3RD, 4TH LEVEL --> HIDE ON NON-MOBILE */ ul.nav>li>ul, ul.nav>li>ul>li>ul, ul.nav>li>ul>li>ul>li>ul { /* hide */ visibility: hidden; opacity: 0; } /* CLASSIC 2ND, 3RD, 4TH LEVEL --> SHOW ON NON-MOBILE WHEN HOVERED TO PARENT */ ul.nav>li:hover>ul, ul.nav>li>ul>li:hover>ul, ul.nav>li>ul>li>ul>li:hover>ul { /* show */ visibility: visible; opacity: 1; } /* MEGA, MEGA BLOG, MEGA SHOP --> HIDE ON NON-MOBILE */ ul.nav>li.mega-menu-classic>div, ul.nav>li.mega-menu>div { /* hide */ visibility: hidden; opacity: 0; z-index:-1001; } /* MEGA, MEGA BLOG, MEGA SHOP --> SHOW ON NON-MOBILE */ ul.nav>li.mega-menu-classic:hover>div, ul.nav>li.mega-menu:hover>div { visibility: visible; opacity: 1; z-index:1001; background: var(--navbar-dropdown-color); background-color:var(--white); border-radius:1em; border:1px rgba(155, 168, 174, 0.25) solid; } /* MEGA BLOG */ ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div:not(.deptlink) { /* hide */ visibility: hidden; opacity: 0; } ul.nav>li.mega-menu:hover>div>ul.mega-menu-nav>li.active-menu-item>div, ul.nav>li.mega-menu:hover>div>ul.mega-menu-nav>li.first-menu-item>div { visibility: visible; opacity: 1; } ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>div { visibility: visible; opacity: 1; z-index: 101; } ul.nav>li.l1>a:not(:only-child):after { /* css down-arrows if has child item font-family: var(--font-awesome); text-decoration: none; content: '\f107'; font-size:1rem; position: absolute; margin-left: 5px;*/ } ul.nav>li:hover>a:after { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a:after, ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a:after, ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a:after { content: ""; position: absolute; right: 0; margin-top: 13px; width: 0; height: 0; border-style: solid; border-width: 6px 8px 6px 0; border-color: transparent #fff transparent transparent; } } /* ################## RESPONSIVE STYLES ###################### */ @media(max-width:992px) { /*start showing the menu toggle icon */ .home-hamburger{ display:block; z-index: 1000; } .home-hamburger .visible-xs { visibility: visible; } div.nav-wrapper .hidden-xs { visibility: hidden; display: none; } div.nav-wrapper { z-index:1001; background:var(--navbar-color); } .nav-wrapper .visible-xs { visibility: visible; position: absolute; left: 0; top: 0; } /* MENU DROPDOWN TOGGLE - MOBILE */ span.dropdown-toggle { grid-area:toggle; align-self:center; margin:auto; z-index: 1000000; cursor: pointer; } span.dropdown-toggle:after { /* css down-arrows if has child item */ font-family: var(--font-awesome); text-decoration: none; content: '\f107'; color: var(--black); font-size: 25px; right: 0; } span.dropdown-toggle.dropdown-toggle-rotate { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .mega-menu-nav > li > .deptlink{ grid-template-areas: "image link"; grid-template-columns:3em 1fr; } /* no need for css arrows if has child item as we are now doing a vertical menu*/ .mega-menu-nav .deptlink:after{ content: ''; } .nav .deptlink{ display:grid; grid-template-areas: "image link"; grid-template-columns:3em 1fr; align-items:center; /* min-height:var(--menu-line-height); */ } .nav .deptlink a.img{ grid-area:image; padding:.5em; } .nav .deptlink a.txt{ grid-area:link; padding:.5em; color:var(--black); text-align:left; } /* ------------------------------------------------------------------------------------- =Top Nav ------------------------------------------------------------------------------------- */ div.nav-wrapper>ul.nav { position: absolute; /* top: 50px; */ width: 100%; background-color:var(--white); text-align:left; /* padding-bottom:1em; */ /* margin-top:1em; */ /* border-bottom-left-radius:1rem; */ /* border-bottom-right-radius:1rem; */ box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.25); } ul.nav>li, ul.nav>li.classic { float: none; display:grid; grid-template-areas:"toggle title" "dropdown dropdown"; grid-template-columns:3em 1fr; text-align:left; } ul.nav>li>ul.l2, ul.nav>li>.menu-drop-down{ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } ul.nav>li>ul>li>ul.l3{ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* home icon added on mobile */ ul.nav>li.l0>a:before{ content: '\e3af'; text-align:center; font-family:var(--font-awesome); font-weight:600; font-size:25px; width: 50px; height: 50px; color:var(--navbar-heading-color); position: absolute; left: 0; top: 0; } /*side bar items */ .l1 .deptlink, .l2 .deptlink, .l3 .deptlink{ grid-area:title; } ul.nav>li.active-menu-item>a, ul.nav>li.first-menu-item>a { background: transparent; /* color:var(--navbar-active-text-color); */ font-weight:400; } /* classic */ .classic{} .classic li.l2{ float: none; display:grid; grid-template-areas:"toggle title" ". dropdown"; grid-template-columns:50px 1fr; } ul.nav>li>ul.l2 li:hover { background: var(--off-white); color:var(--navbar-active-text-color); } .nav .classic .deptlink:after{ display:none; content: ""; } /* mega menu / mega menu classic */ .mega-menu li.l0, .mega-menu li.l1, .mega-menu li.l2, .mega-menu-classic li.l2{ float: none; display:block; display:grid; grid-template-areas:"toggle title" "dropdown dropdown"; grid-template-columns:50px 1fr; margin-left:1em; } .mega-menu-classic .menu-grid > .menu-row ul.l2{ display:grid; grid-template-columns:repeat(2,1fr); grid-gap:1rem; margin-bottom:1rem; } .mega-menu-classic li.l2{ float: none; display:block; display:grid; grid-template-areas:"title" "dropdown"; grid-template-columns:1fr; margin:0; } ul.nav>li>a, ul.nav .l1>a{ grid-area:title; color:var(--black) } ul.nav>li>a:only-child { padding: 0 1em; } /* MENU MEGA */ ul.nav>li.mega-menu-classic, ul.nav>li.mega-menu { position: relative; } ul.nav>li.mega-menu-classic>div, ul.nav>li.mega-menu>div { position: relative; top: auto; left: auto; border-top: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } ul.nav > li.mega-menu > div > ul.mega-menu-nav > li:hover > .deptlink{ background-color:unset; } /* MENU MEGA */ ul.nav>li.mega-menu>div>ul.mega-menu-nav { width: 100%; height: auto; left: auto; top: auto; } ul.nav>li.mega-menu>div>ul.mega-menu-nav>li { position: relative; } ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a, ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>.deptlink{ /*no... you can't remove the !important */ grid-area:title !important; line-height: 50px; padding: 0; } ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div { position: relative; width: 100%; min-height: auto; left: auto; top: auto; z-index: auto; } /* MENU HIDE/SHOW SUBMENUS - MOBILE */ ul.nav>li>ul>li>ul>li>ul, ul.nav>li>ul>li>ul, ul.nav>li>ul, ul.nav, ul.nav>li.mega-menu-classic>div, ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div:not(.deptlink), ul.nav>li.mega-menu>div:not(.deptlink){ max-height: 0; transform: scaleY(0); overflow: hidden; } ul.nav>li>ul.mobile-sublevel-show, ul.nav>li>ul>li>ul.mobile-sublevel-show, ul.nav>li>ul>li>ul>li>ul.mobile-sublevel-show, ul.nav.mobile-sublevel-show, ul.nav>li.mega-menu-classic>div.mobile-sublevel-show, ul.nav>li.mega-menu>div.mobile-sublevel-show, ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.mobile-sublevel-show { max-height: 20000px; transform: scaleY(1); position:initial; width:100%; height:auto !important; /* added possible due to chris playing with images, mobile dropdown stopped working */ grid-area:dropdown; } ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.menu-grid{ position:initial; width:100%; } div.menu-grid>div.menu-row { position: relative; padding:0; height:auto; } div.menu-grid > div.menu-row ul.l3{ display:block; background: var(--navbar-popout-color); margin-bottom:0; } div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.img{ max-width: 50px; background-color:transparent; } /* Hamburger icon - mobile */ .c-hamburger { display: block; position: relative; overflow: hidden; margin: auto; padding: 0; width: 44px; height: 47px; font-size: 0; text-indent: -9999px; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; border-radius: 0; border: none; cursor: pointer; -webkit-transition: background 0.3s; transition: background 0.3s; } .c-hamburger:focus { outline: none; } /*middle bit of the x */ .c-hamburger span { display: block; position: absolute; top: 50%; margin:auto; left: var(--half-spacing); right: var(--half-spacing); height: 4px; background:var(--black); width: 60%; } /* top and bottom bits of the x */ .c-hamburger span::before, .c-hamburger span::after { position: absolute; display: block; left: 0; width: 100%; height: 4px; background-color: var(--black); content: ""; } .c-hamburger span::before { top: -10px; } .c-hamburger span::after { bottom: -11px; } /** * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide * down to center and transform into an "x". */ .c-hamburger--htx { background-color:transparent; } .c-hamburger--htx span { -webkit-transition: background 0s 0.3s; transition: background 0s 0.3s; } .c-hamburger--htx span::before, .c-hamburger--htx span::after { -webkit-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-delay: 0.3s, 0s; transition-delay: 0.3s, 0s; } .c-hamburger--htx span::before { -webkit-transition-property: top, -webkit-transform; transition-property: top, transform; } .c-hamburger--htx span::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, transform; } /* active state, i.e. menu open */ .c-hamburger--htx.is-active { background-color: transparent; } .c-hamburger--htx.is-active span { background: none; } .c-hamburger--htx.is-active span::before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .c-hamburger--htx.is-active span::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after { -webkit-transition-delay: 0s, 0.3s; transition-delay: 0s, 0.3s; } } /* MEDIA QUERY --> SMALL DEVICES */ @media(min-width:768px) and (max-width:991px) { .nav-wrapper .hidden-md { visibility: hidden; display: none; } div.nav-wrapper {} ul.nav>li.mega-menu>div>ul.mega-menu-nav {} ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div {} div.menu-grid.menu-grid-lined>div.menu-row:after { background: none; } } /* TRANSITION EFFECTS */ @media(min-width:767px) { /* Arrows */ ul.nav>li>a:after { transition: all 0.3s ease; } ul.nav>li>ul>li>a:after, ul.nav>li>ul>li>ul>li>a:after, ul.nav>li>ul>li>ul>li>ul>li>a:after { transition: all 0.3s ease; } /* 1st level move-up effect */ ul.nav>li>ul, ul.nav>li>div { /*transform: translateY(25px);*/ transition: all 0.3s ease; } ul.nav>li:hover>ul, ul.nav>li:hover>div { transform: translateY(0); } /* 2nd 3rd 4th level move-left/right effect */ ul.nav>li>ul>li>ul, ul.nav>li>ul>li>ul>li>ul, ul.nav>li>ul>li>ul>li>ul>li>ul { /*transform: translateX(25px);*/ transition: all 0.3s ease; } ul.nav>li>ul>li:hover>ul, ul.nav>li>ul>li>ul>li:hover>ul, ul.nav>li>ul>li>ul>li>ul>li:hover>ul { transform: translateX(0); } } /* ------------------------------------------------------------------------------------ SCREEN - Product Filename : product.css Last Updated : 19. 02. 2026 Copyright :(c) 2026 Etail Systems Ltd Author : Etail Systems Ltd ------------------------------------------------------------------------------------- */ #pmid.page_buy {} #pmid.page_buy #pm.pmfull { width:100%; } /* Product Panels ------------------------------------------------------- */ #pi { margin: 0; padding: 0; } #pi .main{ margin: 0 auto; position: relative; display: grid; grid-template-columns: var(--spacer-width) minmax(0, 1fr) minmax(0, 1fr) var(--spacer-width); grid-template-areas: ". top top ." ". left right ." "bottom bottom bottom bottom"; grid-column-gap: 2rem; align-items: start; } /* Top ------------------------------------------------------- */ #pi .main .top{ grid-area:top; position:relative; } /* Left ------------------------------------------------------- */ #pi .main .left{ grid-area: left; align-self: start; } #pi .main .left .dynprice{ display:none; } /* Right --------------------------------------------- ---------- */ #pi .main .right{ grid-area: right; display: grid; grid-template-areas: "title title" "strapline strapline" "buy-pane buy-pane" "dynamicprice dynamicprice" "additional-description additional-description" "message message" "product-leadtime product-leadtime" "product-bullets product-bullets" ". ."; grid-template-rows: auto auto auto auto auto auto auto 1fr; margin: 0 auto; width: 540px; align-self: start; } /*Bottom ------------------------------------------------------- */ #pi .main .bottom{ grid-area: bottom; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-gap: var(--spacing); grid-row-gap:0; grid-auto-flow: dense; background-color:var(--off-white); margin-top:2em; /* margin-bottom:2em; */ padding-bottom:2em; } #pi .main .bottom > div{ max-width:var(--site-max-width); margin:auto; } #pi .main .bottom .art > h2{ --heading-color:var(--blue); font-family:var(--heading-font); font-size:var(--large-heading-font-size); text-align:center; margin: 4rem 0; } /*same class used for a div outside of the main section */ #pi .main + .bottom{ /* margin-top:1rem; */ } .maxWidth{ max-width:var(--site-max-width); margin:auto; } .productArticles.textImage{ grid-template-areas: "title title" "text image"; grid-template-columns:2fr minmax(auto,1fr); } .productArticles.imageText{ grid-template-areas: "title title" "image text"; grid-template-columns:minmax(auto,1fr) 2fr ; } .productArticles h2{ grid-area:title; font-family:var(--heading-font); font-size:var(--large-heading-font-size); text-align:center; margin: 4rem 0; /* color:var(--blue); */ } /*model ------------------------------------------------------- */ #pi .main .left .brandmanu.model{ display:none; } .brandmanu.model{ grid-area:model; } .brandmanu.model h5, .brandmanu.model h6{ font-family:var(--monospace); font-size:12px; font-weight:500; margin:0; display:inline; letter-spacing:normal; } .brandmanu.model h5{ margin-right:.5em; } /* Product Title ------------------------------------------------------- */ #pi .main .left .pititle{ display:none; } #pi .pititle { --font-size:1em; grid-area: title; } #pi .right .pititle{ border-top-right-radius:1em; border-top-left-radius:1em; background-color:var(--off-white); padding:2em; padding-bottom:.5em; } #pi .pititle h2{ margin:0; text-align:left; line-height:110%; } /* Strapline ------------------------------------------------------- */ #pi .main .left h4.strap{ display:none; } h4.strap { grid-area: strapline; font-family:var(--text-font); font-size: 14px; color:var(--text-color-light); padding:0 2rem; background-color:var(--off-white); } /* Gallery ------------------------------------------------------- */ .piimg{ } /*temporary hack due to old images */ .piimg img{ margin:0 !important; } .piimg p{ display:none; } #pi .gallery { grid-area: gallery; grid-gap:1em; /* margin-top:1em; */ } #pi .gallery .slider-main{ --swiffy-slider-item-count: 1; --swiffy-slider-item-ratio:3/4; margin-bottom:1rem; } #pi .gallery .slider-thumb{ --swiffy-slider-item-count: 1; --swiffy-slider-item-ratio:3/4; margin-bottom:1rem; } #pi #mainimages .slider-nav { pointer-events:none; } #pi .gallery .slider-main .slider-indicators{ display:none; } #pi .gallery #galleryimages{ --swiffy-slider-item-count: 2; margin-top:1em; margin-bottom:2em; } #pi .gallery #galleryimages .slider-indicators{ display:none; } /*main gallery videos */ .youtubeplayercontainer >* { min-height: 20rem } .youtubeplayercontainer >*{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .youtubeplayercontainer>*{ -o-object-fit: contain; object-fit: contain } #pi .gallery img{ width: 100%; object-fit: cover; margin:0 !important; background-color:var(--off-white); /* border-radius:1em; */ } #pi .gallery #galleryimages .video{ background-color:var(--off-white); height:100%; } #pi .gallery #galleryimages .video:after{ font-family:var(--font-awesome); color:var(--off-white); content:"\f144"; position:absolute; top:0; left:0; width:100%; height:100%; margin:auto; text-align:center; align-content:center; font-size:4em; font-weight:100; pointer-events:none; } #pi .gallery h4 { display: none; } /* separate youtube element ------------------------------------------------------- */ #pi .youtube { margin:0; grid-area: product-video; align-content:center; align-items:center; border-radius:1em; } #pi .youtube .responsive-iframe { margin:0; width:100%; } #pi .youtube .title{ display:none; } #pi .youtube li{ display:block; } #pi .youtube iframe{ border-radius:1em; } /*we don't want product flags showing here - should be controlled by a field in coms, we want the normal product flags like free shipping */ #pi .gallery .piflags{ display:none } #pi .top .flags{ position:absolute; top:0rem; left:0; width:100% } #pi .top .flags .prdel{ position:absolute; left:0; top:1rem; } #pi .top .flags .freedel{ position:absolute; right:0; top:0rem; } #pi .top .flags .prdel img{ max-width:150px; } #pi .top .flags .offer{ position:absolute; right:1rem; top:0rem; } #pi .top .flags .offer img{ max-width:120px; } /* pricecomp ------------------------------------------------------- */ #pi .main .left .pricecomp{ display:none; } .pricecomp{ grid-area:price; margin-bottom: 20px; /* padding:.5em 0; */ } .pricecomp .price h6{ font-family:var(--text-font2); font-size:16px; margin:0; } .pricecomp .price label{ display:none; } /*offer price */ .pricecomp .offer { display:inline-block; } .pricecomp .offer h6 { font-size:1.5rem; font-weight:var(--heading-font-weight); color:var(--red); } /*previous price (goes with offer) */ .pricecomp .prevprice { display:inline-block; grid-area: prev-price; margin-right:1em; } .pricecomp .prevprice h6 { text-decoration: line-through; } /* piflags ------------------------------------------------------- */ #pi .piflags{ grid-area:stock; align-self:center; margin-left:auto; } #pi .piflags .f18022400 img{ max-width:71px; } #pi .piflags .f18022401{ display:none; } /* Buy Panel ------------------------------------------------------- */ #pi .pibuy { grid-area: buy-pane; /* margin:1em 0; */ background-color:var(--off-white); padding:0 2em; padding-top:1em; } /* for some reasone we always show "price in..." */ .pibuy .title { display: none; } #pi .pibuy h6 { display:inline-block; padding:0; margin:0; } /*normal price */ #pi .pibuy .price { display:none; grid-area: sellingprice; } #pi .pibuy .price label{ display:block; color:var(--light-blue) } #pi .pibuy .price h6 { font-size:1.25rem; font-weight:var(--heading-font-weight); } /*offer price */ #pi .pibuy .offer { display:none; grid-area: sellingprice; } #pi .pibuy .offer h6 { font-size:1.5rem; font-weight:var(--heading-font-weight); color:var(--red); } /*previous price (goes with offer) */ #pi .pibuy .prevprice { display:none; grid-area: prev-price; } #pi .pibuy .prevprice h6 { text-decoration: line-through; } /* Messages */ #pi .pibuy p {} #pi .pibuy p#bspresponse { grid-area: bspresponse; } #pi .pibuy h4 {} #pi .pibuy h5 {} #pi .pibuy p.p_stock {} #pi .pibuy .qty { display: none; } /* stock */ #pi .pibuy .stock { /*being written out when not actually in use! */ display:none; } /*order cutoff timer? */ #pi .pibuy p.cutoff { color: var(--info-color); } #pi .pibuy p.cutoff::before {} /* quantity in basket info */ #pi .pibuy .qtyInBskt { display: none; } /*dynamic price */ .dynprice { grid-area:price; text-align:right; display:none; } .jaqshadow{ display:none !important; } /* Buy Form -------------------------------------------------------*/ #buy_form { grid-area: buypane; } /* sku attributes and options -----------------------------*/ .attr{} .attr .attrlabel{ font-family:var(--button-font); color:var(--heading-color); font-size:20px; margin-bottom:.5rem; } .options{ margin-bottom: 1em; } .multiselect{ margin-bottom:1em; } .multiselect select, .options select{ width:100%; background-color:var(--white) } .attrqty{ /* margin:1em 0; */ display:grid; grid-template-areas: "price price" "qty buy" "sample sample" "response response"; grid-gap:1em; grid-template-columns:minmax(0, auto) minmax(0, 1fr); align-items:center; } .attrqty .qtyinput{ grid-area:qty; } .attrqty .qtyinput label{ display:none; } .attrqty .qtyinput button{ width:40px; height:50px; border:1px solid var(--blue); background-color:var(--white); outline:none; vertical-align:middle; padding:0; } .attrqty .qtyinput #skuqtyadd{ border-radius:0 100vw 100vw 0; border-left:0; } .attrqty .qtyinput #skuqtysub{ border-radius:100vw 0 0 100vw; border-right:0; } .attrqty .qtyinput #skuqty{ height:50px; border:1px solid var(--blue); border-left:0; border-right:0; background-color:var(--white); align-content:center; text-align:center; vertical-align:middle; } .qtyinput input.inputtext:focus-visible, .qtyinput input.inputtext_light:focus-visible{ outline:none; } .attrqty .submit{ background-color:var(--green); border-color:var(--green); color:var(--dark-blue); } .attrqty .submit#smplreq{ grid-area:sample; background-color:var(--light-blue); border-color:var(--light-blue); color:var(--white); } .attrqty .dynprice{ /* display:none; */ display:block; text-align:left; } .attrqty .dynprice p{ font-size:2em; font-family:var(--heading-font) } /* message if no option selected*/ .pibuy label#selectResponse { grid-area:response; color: var(--error-color); display:block; background-color:var(--off-white); padding:1em; border:1px var(--error-color) solid; } /* Descriptions -------------------------------------------------------*/ .bottom .pidesc:before{ content:"Description"; letter-spacing:-.05em; display:block; font-family:var(--heading-font); font-size:var(--large-heading-font-size); text-align:center; padding: 4rem 0; color:var(--blue) } .pidesc{ grid-area:additional-description ; background-color:var(--off-white); padding:0 2em ; padding-bottom:2em; border-bottom-left-radius:2em; border-bottom-right-radius:2em; } .bottom .pidesc { grid-area:unset; grid-column:1/-1; } .pidesc p{ margin-block-end:1em; } .pidesc ul{ margin-block-start:1em; margin-block-end:1em; margin-inline-start:3em; color:var(--text-color); } /*duplicated product title auto written out in the description */ .pidesc h2[itemprop="name"], .pidesc h4[itemprop="description"]{ display: none; } .pidescx{ grid-column:1/-1; text-wrap:pretty; /* border-top:1px solid var(--light-blue); */ /* border-bottom:1px solid var(--light-blue); */ } .pidescx > h3{ --heading-color:var(--blue); font-family:var(--heading-font); font-size:var(--large-heading-font-size); text-align:center; padding: 4rem 0; } .pidescx p{ margin-block-end:1em; } .pidescx ul{ margin-block-start:1em; margin-block-end:1em; margin-inline-start:3em; color:var(--text-color); } /* Product leadtime -------------------------------------------------------*/ #pi .pidesc.desp { grid-area: product-leadtime; background-color:var(--off-white); padding:0 2em; border-bottom-left-radius:1em; border-bottom-right-radius:1em; } #pi .pidesc.desp h5{ display:none; } #pi .pidesc.desp p{} /* Product specific delivery info -------------------------------------------------------*/ #pi .delivery { grid-area: product-delivery; } /* Bullets -------------------------------------------------------*/ #pi .bullets { grid-area: product-bullets; list-style: none; /* remove default bullets */ padding-left: 0; background-color:var(--white); padding:2em; margin:2em 0;; border:1px solid var(--blue); border-radius:1em; } #pi .bullets li { position: relative; padding-left: 25px; margin-bottom:1em; } #pi .bullets li::before { content: "\f00c"; /* Font Awesome check icon */ font-family: var(--font-awesome); font-weight: 900; /* required for solid icons */ position: absolute; left: 0; top: 0; color: var(--green); } /* Links -------------------------------------------------------*/ #pi .pilinks { grid-area: product-links; } #pi .pilinks li {} #pi .pilinks ul li.query a.lnk { cursor: pointer; display: inline-block; vertical-align: middle; } #pi .pilinks ul li.query a.lnk:before { font-family: var(--font-awesome); font-weight: var(--heading-font-weight); margin-right: .5em; font-size: 1em; display: inline-block; content: '\f059'; } /* Flags (site flags like offer) -------------------------------------------------------*/ #pi .flags { grid-area: product-flags; } #pi .flags .packsize img { display: inline-block; padding-right: .5rem; vertical-align: middle; } #pi .flags .packsize p { display: inline-block; padding: 0; margin: 0; vertical-align: middle; color: var(--text-heading-color); } /* Product flags -------------------------------------------------------*/ #pi .left .piflags { grid-area: product-piflags; margin-top:1em; } #pi .left .piflags li {} #pi .left .piflags li img{ grid-area:icon; } #pi .left .piflags li span{ grid-area:text; } #pi .f18022400{ display:none; } /* Next Day Delivery Countdown -------------------------------------------------------*/ #pi #ordercutofftime {} #pi #ordercutofftime img{} #pi #ordercutofftime .countdown{} #pi #ordercutofftime .countdown span{} /* Product Files -------------------------------------------------------*/ #pi .pifile { grid-area: product-file; } /* Product Departments -------------------------------------------------------*/ #pi .alldepts { grid-area: product-departments; } #pi .alldepts a { display: inline-block; padding: var(--spacing); } /* Product PDL Article - could do with a class -------------------------------------------------------*/ /* Tabbed Descriptions -------------------------------------------------------*/ #pi .pi_tab, #pi #pi_wrapper { grid-column:1/-1; z-index:2; width:926px; margin:4em auto; } #pi ul.pi_tabs { cursor: pointer; margin: 0; padding: 0; } #pi ul.pi_tabs li { list-style: none; margin: 0; padding: 1em; text-align: center; display:inline-block; background-color:var(--light-grey); border-top-right-radius:.5em; border-top-left-radius:.5em; margin-right:1em; border:1px solid var(--light-grey); z-index:2; } #pi ul.pi_tabs li.selected { font-weight:600; border:1px solid var(--dark-grey); border-bottom:2px solid var(--white); background-color:var(--white); } #pi ul.pi_tabs li:last-child {} #pi .pi_tab_content { margin:auto; padding:3rem 2rem; max-height:400px; overflow-y:auto; border:1px solid var(--dark-grey); position:relative; top:-1px; z-index:-1; width:100%; } #pi .pi_tab_content br{ display:none; } #pi .pi_tab_content ul{ margin:0 2em; line-height:1.5; } /* Recent Items -------------------------------------------------------*/ .ritm{ max-width:var(--site-max-width); margin:auto; } .ritm h3{ font-family:var(--heading-font); font-size:var(--large-heading-font-size); text-align:center; padding: 4rem 0; /* color:var(--blue); */ } .ritm .recent_item{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); grid-gap:1em } .ritm .recent_item .price, .ritm .recent_item .prevprice, .ritm .recent_item .offer, .ritm .recent_item .saving{ display:none; } .ritm li{ display:grid; grid-template-areas: "image" "title" "price"; grid-template-rows:auto auto 1fr; } .ritm img{ width:100%; margin:0 !important; } .ritm a.txt{ font-family:var(--heading-font); color:var(--dark-blue); font-weight:600; margin:.5rem 0; font-size:21px; } .ritm .price{ align-self:end; } .ritm .price label{ display:none; } .ritm .price h6 { font-family:var(--text-font); margin:0; } /* Associated Products -------------------------------------------------------*/ #pi .pass { grid-column: 1/-1; margin-top: 1rem; } #pi .pass h3 { font-size:var(--large-heading-font-size); text-align:center; margin: 4rem 0; --heading-color:var(--blue); } #pi .pass .price, #pi .pass .prevprice{ display:none; } /* ------------------------------------------------------------------------------------- =Super Attributes ------------------------------------------------------------------------------------- */ .cls_superattrribute.hideAttr:not(.attributeTypeDimensions){ visibility:hidden; display:block; height:0; opacity:0; padding:0 !important; transform: translateY(0); transition: all .1s ease; } .sacontainerpanel{} /* Defaults ------------------------------------------------------- */ .sacontainerpanel li{ display:block; } .sa_name{} .sa_validator { color:var(--error-color); } .sa_error{ color:var(--error-color); grid-area:error; font-weight:600; font-size:18px; } .helplink{ font-style:italic; } .helplink:hover{ cursor:pointer; } #sa_pnl_product_not_found{ display:none; } /* attributeTypeVolume_Surface_Calculator ------------------------------------------------------- */ .attributeTypeVolume_Surface_Calculator{ position:relative; margin:1em 0; display:grid; grid-template-areas: "title title" "attXlabel attX" "attYlabel attY" "getprice getprice" "validation validation"; grid-column-gap:1em; grid-template-columns: 1fr 125px; align-items:center; /* padding:1em 0; */ } .attributeTypeVolume_Surface_Calculator .info.sa_name{ anchor-name: --help-anchor; grid-area:title; font-family:var(--heading-font); font-size:20px; margin-bottom:.5rem; color:var(--blue); } /*awful structure but tis what it is */ .attributeTypeVolume_Surface_Calculator .volcalcvalue{ grid-area:attXlabel; color:var(--blue); font-family:var(--sub-heading-font); text-align: right; margin-left:1em; margin-bottom:1rem; } .attributeTypeVolume_Surface_Calculator .volcalcvalue:before{ content:'*'; font-family:var(--heading-font); color:var(--error-color); margin-right:.25em; } .attributeTypeVolume_Surface_Calculator .volcalcvalue + .volcalcinput{ grid-area:attX } .attributeTypeVolume_Surface_Calculator .volcalcvalue + .volcalcinput + .volcalcvalue{ grid-area:attYlabel; color:var(--blue); font-family:var(--sub-heading-font); text-align: right; margin-left:1em; } .attributeTypeVolume_Surface_Calculator .volcalcvalue + .volcalcinput + .volcalcvalue + .volcalcinput{ grid-area:attY } .attributeTypeVolume_Surface_Calculator .volcalcvalue + .volcalcinput + .volcalcvalue + .volcalcinput + li { grid-area:validation; font-size:small; color:var(--dark-grey); } .attributeTypeVolume_Surface_Calculator .volcalcinput .inputtext_short{ border:1px solid var(--blue); background-color:var(--white); margin:0; height: 50px; text-align: center; border-radius:100vw; width:125px; font-family:var(--heading-font); margin-bottom:1em; } .attributeTypeVolume_Surface_Calculator .volcalcinput .inputtext_short::placeholder{ font-size:12px; } /* attributeTypePrice_Matrix_Calculator ------------------------------------------------------- */ .attributeTypePrice_Matrix_Calculator { position:relative; } .attributeTypePrice_Matrix_Calculator .att_container{ display:grid; grid-template-areas: "title title" "attY attX" "getprice getprice" "validation validation"; grid-column-gap:1em; grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* padding:1em 0; */ } .attributeTypePrice_Matrix_Calculator .att_header{ grid-area:title; font-family:var(--heading-font); font-size:20px; margin-bottom:.5rem; /* border-bottom:1px solid var(--black-alpha); */ } .attributeTypePrice_Matrix_Calculator .att_header .sa_name{ anchor-name: --help-anchor; font-family:var(--button-font); color:var(--heading-color); padding-left:1.5em; } /*using position-anchor to place the help icon where we want it */ .attributeTypePrice_Matrix_Calculator .helpicon{ position:absolute; position-anchor:--help-anchor; top:anchor(--help-anchor top); left: anchor(--help-anchor left); } .attributeTypePrice_Matrix_Calculator .att_X{ grid-area:attX; anchor-name:--width-anchor; } .attributeTypePrice_Matrix_Calculator .att_Y{ grid-area:attY; anchor-name:--height-anchor; } .attributeTypePrice_Matrix_Calculator .sa_error{ grid-area:validation; color:var(--error-color); grid-area:error; font-weight:600; font-size:18px; text-align:right; /*hack as I don't want it */ display:none !important; } .attributeTypePrice_Matrix_Calculator .att_X, .attributeTypePrice_Matrix_Calculator .att_Y{ position: relative; display:grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "input"; align-items: center; margin-bottom:1em; } .attributeTypePrice_Matrix_Calculator .att_X label, .attributeTypePrice_Matrix_Calculator .att_Y label{ grid-area:label; /* color:var(--blue); */ font-family:var(--button-font); /* font-weight:600; */ font-size:20px; margin-bottom:.5rem; text-align: center; display:block; } .attributeTypePrice_Matrix_Calculator .att_X input, .attributeTypePrice_Matrix_Calculator .att_Y input{ grid-area:input; border:1px solid var(--blue); background-color:var(--white); margin:0; height: 50px; width:100%; text-align: center; border-radius:100vw; /* font-family:var(--heading-font); */ /* max-width:14ch; */ margin:auto; } .attributeTypePrice_Matrix_Calculator .att_X input::-webkit-outer-spin-button, .attributeTypePrice_Matrix_Calculator .att_X input::-webkit-inner-spin-button, .attributeTypePrice_Matrix_Calculator .att_Y input::-webkit-outer-spin-button, .attributeTypePrice_Matrix_Calculator .att_Y input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .attributeTypePrice_Matrix_Calculator .att_X input[type=number], .attributeTypePrice_Matrix_Calculator .att_Y input[type=number]{ -moz-appearance:textfield; } .attributeTypePrice_Matrix_Calculator .calc_price{ text-align:right; grid-area:getprice } .attributeTypePrice_Matrix_Calculator .calc_price input{ background-color:var(--dark-blue); border-color:var(--dark-blue); color:var(--white); display:block; margin:0; width:100%; } /*this element needs a class/identifier */ .attributeTypePrice_Matrix_Calculator .calc_price + li{ grid-area:validation; } .attributeTypePrice_Matrix_Calculator .volmsg{ /*impossible to add styling here as it is written out with no content hopefully fixable by adding a display none to the span when we add/remove the content in it? */ display:block; background-color:var(--off-white); padding:1em; /* margin:1em; */ /* border:1px var(--error-color) solid; */ font-size:small; color:var(--dark-grey) } /* attributeTypeDynamic_Drop_Down_List ***************************************************************/ .attributeTypeDynamic_Drop_Down_List { position:relative; } .attributeTypeDynamic_Drop_Down_List .sa_name{ font-family:var(--heading-font); font-size:20px; margin-bottom:.5rem; color:var(--blue); display:none; } .attributeTypeDynamic_Drop_Down_List select{ width:100%; background-color:var(--white); margin-bottom:1em; } /* attributeTypeRadio_button ***************************************************************/ .attributeTypeRadio_button { display:grid; grid-template-areas:"title options" } .attributeTypeRadio_button .sa_name{ anchor-name:--help-anchor; /* grid-area:title; */ font-family:var(--heading-font); font-size:20px; margin-bottom:.5rem; color:var(--blue); } .attributeTypeRadio_button .radiobuttondatali{ text-align:right; } .attributeTypeRadio_button .radioholder{ margin-bottom:1em; } .attributeTypeRadio_button .radioholder input{ grid-area:select; margin:0; } .attributeTypeRadio_button .radioholder label{ grid-area:label; font-family:var(--heading-font); font-weight:600; color:var(--dark-blue); font-size:20px; text-align:right; margin-left:1em; } .attributeTypeRadio_button .radioholder { display: inline-flex; /* gap: 8px; */ } /* Hide native radio */ .attributeTypeRadio_button .radioholder input[type="radio"] { display: none; } /* Pill style */ .attributeTypeRadio_button .radioholder label { padding: 8px 18px; border-radius: 999px; /* full pill */ border: 1px solid var(--blue); cursor: pointer; font-weight: 500; transition: all 0.2s ease; background:var(--white); } /* Hover */ .attributeTypeRadio_button .radioholder label:hover { background: var(--green); border-color: var(--green); } /* Selected state */ .attributeTypeRadio_button .radioholder input[type="radio"]:checked + label { background:var(--green); color: var(--dark-blue); border-color: var(--green); } /* attributeTypeText_Box_Free_Text_Entry ***************************************************************/ .attributeTypeText_Box_Free_Text_Entry {} /*attributeTypeDrop_down_list ***************************************************************/ .attributeTypeDrop_down_list { /* margin-bottom:1em; */ } .attributeTypeDrop_down_list .sa_name{ /* font-family:var(--heading-font); */ font-size:20px; margin-bottom:.5rem; /* color:var(--blue); */ position:relative; padding-left:1.5em; } .attributeTypeDrop_down_list select{ width:100%; background-color:var(--white); margin-bottom:1em; } /* Tooltips -------------------------------------- */ .helpicon { display:inline-block; font-size:.825rem; /* margin-left:.5rem; */ position:absolute; left:0; top:0; cursor:pointer; } .helpicon img{ max-width:25px; } .helpicon h3 { margin:var(--half-spacing) 0; } .helpicon .lefttooltip { display:none; position:absolute; top:calc(-100% - .5em); right:10%; width:max-content; min-width:100px; max-width: 300px; transform:translate(0, -50%); padding:var(--half-spacing); color:var(--text-color); background-color:var(--light-grey); z-index:1000; box-sizing:border-box; border:1px solid var(--border-color); border-radius:1em; } .helpicon .lefttooltip span{ display:block; line-height:1.25 } .helpicon:hover .lefttooltip { display:block; line-height:1; } .helpicon .lefttooltip i { position:absolute; top:50%; left:100%; margin-top:-12px; width:12px; height:24px; overflow:hidden; } .helpicon .lefttooltip i::after { content:''; position:absolute; width:12px; height:12px; left:0; top:50%; transform:translate(-50%,-50%) rotate(-45deg); background-color:#FFFFE0; border:1px solid #DCA; } /* mobile -------------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 768px) { #pmid.page_buy #pm.pmfull { width: calc(var(--site-max-width) - 2rem); } /* Product Panels ------------------------------------------------------- */ #pi .main{ grid-template-columns:minmax(0, 1fr); grid-template-areas: "top" "left " "right" "bottom"; } #pi .main .left{ grid-area:left; } /* Right ------------------------------------------------------- */ #pi .main .right{ grid-area: right; width: 100%; } #pi .main .bottom{ margin:0 -1em; padding:0 1em; } /* Product Title ------------------------------------------------------- */ .pititle{ display:none; } #pi .main .left .pititle{ display:block; } /* Strapline ------------------------------------------------------- */ h4.strap{ display:none; } /*model ------------------------------------------------------- */ .brandmanu.model{ display:none; } #pi .main .left .brandmanu.model{ display:block; } /* Reviews IO Widget ------------------------------------------------------- */ .reviewssmallsummary{ display:none; } #pi .main .left .reviewssmallsummary{ display:block; } /* pricecomp ------------------------------------------------------- */ .pricecomp{ display:none; } #pi .main .left .pricecomp{ display:block; } /* Buy Panel ------------------------------------------------------- */ #pi .pibuy { grid-area: buy-pane; /* margin:1em 0; */ background-color:var(--off-white); padding:1em; } /* Recent Items -------------------------------------------------------*/ .ritm .recent_item{ grid-template-columns: repeat(2, 1fr); } /* Gallery - now Swiffy ------------------------------------------------------- */ #pi .gallery #galleryimages{ --swiffy-slider-item-count: 4; margin-top:1em; margin-bottom:2em; } #pi .gallery #galleryimages .video:after{ font-size:3em; } /* Save For Later component -------------------------------------------------------*/ #pi .main .left .sfl{ grid-area:gallery; } /* Tabbed Descriptions -------------------------------------------------------*/ #pi .pi_tab, #pi #pi_wrapper { grid-column:1/-1; z-index:2; width:100%; margin:2em auto; } #pi ul.pi_tabs li { list-style: none; margin: 0; padding: .5em 1em; text-align: center; display:inline-block; background-color:var(--light-grey); border-top-right-radius:.5em; border-top-left-radius:.5em; margin-right:.5em; border:1px solid var(--light-grey); z-index:2; } #pi .pi_tab_content { margin:auto; padding:1rem 1rem; max-height:400px; overflow-y:auto; border:1px solid var(--dark-grey); position:relative; top:-1px; z-index:-1; width:calc(100% - 2em); } .productArticles h2{ margin:1.5rem; } .productArticles.textImage, .productArticles.imageText{ grid-template-areas: "title" " image" "text"; grid-template-columns:minmax(auto,1fr); } .productArticles.textImage .artp, .productArticles.imageText .artp{ margin:0; } /* ------------------------------------------------------------------------------------- =Super Attributes ------------------------------------------------------------------------------------- */ } /* ------------------------------------------------------------------------------------ SCREEN - Basket/Checkout Filename : basket.css Last Updated : 01. 03. 2026 Copyright :(c) 2026 Etail Systems Ltd Author : Etail Systems Ltd ------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =HoverBasket ------------------------------------------------------------------------------------- */ .hoverbskt { border-radius: var(--border-radius); width:250px; padding:8px; z-index: 99999; text-align: center; -webkit-box-shadow: var(--box-shadow); -moz-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); background-color: var(--white); position-anchor:--basket-anchor; top: calc(anchor(--basket-anchor bottom) + 10px) !important; left: calc(anchor(--basket-anchor right) - 250px) !important; block-start: anchor(--my-anchor, 100px); } .hoverbskt h3 { display: none; } .hoverbskt a, .hoverbsktadd a, .hoverbskt p, .hoverbsktadd p { font-size: 0.825em; margin: 0; } .hoverbsktadd p.descr { display: none; } .hoverbskt .lines { max-height:unset; overflow-y:hidden; } .hoverbskt .lines .item { display: grid; grid-template-columns: 2em .5rem 1fr 7ch; grid-template-areas: "image . title title" "image . sample sample" "image . quantity price"; margin-bottom:.5rem; } .hoverbskt .lines .item a.title, .hoverbskt .lines .item p.sample { font-weight: var(--heading-font-weight); text-align: left; grid-area: title; } .hoverbskt .lines .item picture{ grid-area:image; align-self:start; margin:0; } .hoverbskt .lines .item img { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; grid-area: image; margin: 0 !important; } .hoverbskt .lines .item p.price { grid-area: price; text-align:right; color:var(--blue); } .hoverbskt .lines .item p.descr { grid-area: description; display: none; } .hoverbskt .lines .item p.qty { grid-area: quantity; text-align: right; } .hoverbskt .lines .item p.sample { grid-area: sample; font-weight:normal; font-size:.725em; text-align: left; } .hoverbskt h4.count{ display:none; } .hoverbskt h4.total { padding: .25em; margin: 0; text-align: right; display: block; text-transform: capitalize; color:var(--blue); } .hoverbskt a.btn { display: block; padding: .5em 1em; background-color:var(--green); border-color:var(--green); color:var(--dark-blue); } /* ------------------------------------------------------------------------------------- =Basket - Checkout v5 ------------------------------------------------------------------------------------- */ /*needs #pm as .bskt is used in the header */ #pm .bskt { display: grid; grid-template-columns: 6fr 3fr; grid-gap:0; grid-column-gap: 2em; grid-template-areas:"header header" "contents sidebar" "promcontents promcontents"; align-items:start; margin-bottom:4rem; } /*no idea why this is being written out! */ #pm .bskt + h1{ display:none; } /* if basket is empty and user is in it */ .bskt .empty{} .bskt .empty .header{} .bskt .empty .total{} /*these are the t's and c's - to show only on the checkout pages */ .chkflow #a138313730{ display:none; } .chkflow #p53346304, .chkflow #p53641216{ grid-area:links; margin-left:auto; display:block; align-content:center; } /* Basket header ------------------------------------------------------- */ .bskt .header{ grid-area:header; /* display:none; */ } .bskt .header .icon{ display:none; } .bskt .header .title{ display:block; font-family:var(--text-font); font-size:1.5rem; margin-bottom:1rem; } .bskt .header .title span{ font-size:1rem; font-weight:normal; color:var(--dark-grey); } /* Basket Contents -------------------------------------------------------------------------------------------------------------- */ #pm .bskt .contents{ grid-area:contents; display:grid; grid-template-areas: "freedelivery" "lines" "subtotal"; } /* Basket Sup Charge ------------------------------------------------------- */ .suppchg{ grid-area:suppchg; text-align:left; } .suppchg >div{ display:grid; grid-template-areas:"header header" "checkbox text"; align-items:start; } .suppchg h3{ font-weight:400; font-size:1rem; padding:var(--spacing); grid-area:header; margin-bottom:1rem } .suppchg h3:before{ content:'\f545'; font-family:var(--font-awesome); color:var(--green); font-size:1rem; display:inline-block; vertical-align:middle; margin-right:var(--half-spacing) } .suppchg input{ grid-area:checkbox; margin:0 1rem; } .suppchg .article{ grid-area:text; font-size:.825rem; } .suppchg .article p{ font-size:.725rem; } .suppchg .article p:last-child{ font-size:.725rem; padding:.5rem 1rem; } /* Basket Lines ------------------------------------------------------- */ #pm .bskt .alllines{ grid-area:lines; } /*custom scrollbar */ #pm .bskt .alllines::-webkit-scrollbar { width: 10px; } #pm .bskt .alllines::-webkit-scrollbar-track { background: var(--off-white); } #pm .bskt .alllines::-webkit-scrollbar-thumb { background: var(--grey); } #pm .bskt .alllines::-webkit-scrollbar-thumb:hover { background: var(--dark-grey); cursor:grab; } #pm .bskt .alllines::-webkit-scrollbar-thumb:active { cursor:grabbing; } #pm .bskt .line{ padding-bottom: var(--spacing); margin-bottom: var(--spacing); align-items: start; display: grid; --image-width:4rem; --description-width:1fr; --qty-width:auto; --rem-width:auto; --total-width:8ch; grid-template-columns: var(--image-width) var(--description-width) var(--qty-width) var(--total-width) var(--rem-width); grid-template-areas: "icon desc qty price rem" ". desc . . ." ". skuselect . . ."; /* border-bottom:1px solid var(--border-color); */ grid-column-gap:1rem; } #pm .bskt .line:last-of-type{ border-bottom:none; } /* Image */ #pm .bskt .line .prodimg{ grid-area: icon; } #pm .bskt .line .prodimg img{ margin:0 !important; } /* Product Info - in list form */ #pm .bskt .line .prodinfo{ grid-area:desc; margin:0; padding:0; } #pm .bskt .line .prodinfo .surcharge{ font-weight:600; } #pm .bskt .line .prodinfo li{ list-style:none; font-size:.725rem; color:var(--text-color-light); --text-link-color:var(--text-color-light); } #pm .bskt .line .prodinfo li.disc{ color:red; } #pm .bskt .line .prodinfo li img{ margin:0; max-width:250px } #pm .bskt .line .prodinfo li.descr, #pm .bskt .line .prodinfo li.sample{ margin-left:0; font-size:18px; font-family:var(--heading-font); font-weight:var(--heading-font-weight); align-content:center; color:var(--dark-blue); --text-link-color:var(--darkblue); } #pm .bskt .line .prodinfo li.lead{ color:var(--info-color); font-weight:bolder; } #pm .bskt .line .prodinfo li.lead{ color:var(--text-color); font-style:italic; font-weight:normal; margin:.5rem 0; } #pm .bskt .line .prodinfo li.lead span{ display:inline-block; color:var(--green); font-style:normal; border:1px var(--green) solid; padding:.25rem; border-radius:.25rem; margin-right:.5rem; } #pm .bskt .line .prodinfo li.lead span:before{ font-family:var(--font-awesome); content: "\f00c"; display: inline-block; font-size:1em; margin-right: 1em; } /*product quantity */ #pm .bskt .lines .line .qty{ grid-area:qty; /* align-self:center; */ } #pm .bskt .lines .line .qty form{ line-height:1; } #pm .bskt .lines .line .qty label{ display:none; } #pm .bskt .lines .line .qty button{ width:40px; height:50px; border:1px solid var(--blue); background-color:var(--off-white); outline:none; vertical-align:middle; padding:0; } #pm .bskt .lines .line .qty button.skuqtybsktsub { border-radius:100vw 0 0 100vw; border-right:0; } #pm .bskt .lines .line .qty button.skuqtybsktadd { border-radius:0 100vw 100vw 0; border-left:0; } #pm .bskt .lines .line .qty input.inputtext{ height:50px; border:1px solid var(--blue); border-left:0; border-right:0; background-color:var(--off-white); align-content:center; text-align:center; vertical-align:middle; } /* remove item */ #pm .bskt .line .rem{ grid-area:rem; text-align:center; /* align-self:center; */ } #pm .bskt .line .rem input{ font-family:var(--font-awesome); color:var(--text-color-light); background-color:transparent; border:none; font-weight:400; padding:0 .5em; margin:0; } /* if product is multi sku then show this in the same area as the quantity update */ #pm .bskt .lines .line .skuselect{ grid-area: skuselect; align-self: end; } #pm .bskt .lines .line .skuselect select{ margin:0; font-size:small; width:auto; } /* remove item */ #pm .bskt .line .price{ grid-area:price; text-align:center; font-family:var(--text-font2); font-weight:var(--heading-font-weight); /* align-self:center; */ } /* out of stock messages */ .oos{ color:var(--error-color); } /* Basket Sample Lines ------------------------------------------------------- */ #pm .bskt .lines.sample{ grid-area:samples; } /* Basket Subtotal ------------------------------------------------------- */ .prodsubtotal{ grid-area:subtotal; display:grid; grid-template-columns:1fr 10ch; font-size:1.25em; margin-bottom:var(--spacing); /*why display this... we have this info in the totals area... */ display:none; } .prodsubtotal label{ text-align:left; } .prodsubtotal span{ text-align:right; } /* Basket Prom ------------------------------------------------------- */ #pm .bskt .art{ grid-area:promcontents; } #pm .bskt .art#a142245899{ --font-size:30px; grid-area:unset; text-align:center; } #pm .bskt .art#a142245899 i{ padding:1rem; } /* Basket Sidebar -------------------------------------------------------------------------------------------------------------- */ #pm .bskt .sidebar{ grid-area:sidebar; background-color:var(--off-white); } /* Basket Totals ------------------------------------------------------- */ .bskttotals{ grid-area:totals; text-align:center; display:grid; padding:1rem; } /*added title */ .bskttotals:before{ content:"Basket Summary"; display:block; line-height:1; font-family:var(--text-font); font-size:1.5em; text-align:center; margin-bottom:.5rem; } .bskttotals .subtotal{ display:grid; grid-template-areas:"label total"; margin-bottom:.25rem; } .bskttotals .subtotal label{ display:block; grid-area:label; text-align:left; } .bskttotals .subtotal span{ display:block; grid-area:total; text-align:right; font-family:var(--text-font2); } .bskttotals .total{ display:grid; grid-template-areas:"label total"; font-size:1.5rem; } .bskttotals .total label{ grid-area:label; text-align:left; } .bskttotals .total span{ grid-area:total; text-align:right; font-family:var(--text-font2); } /* Vouchers ------------------------------------------------------- */ .vouchentryaccord{ grid-area:voucher; text-align:center; padding:0 1rem; cursor:pointer; } .vouchentryaccord ul, .vouchentry ul{ list-style:none; } .vouchentryaccord li, .vouchentry li{ list-style:none; } .vouchentryaccord li.pane{ display:none; } #pm .bskt .vouchentryaccord .header{ font-size:1rem; border:none; border:0; padding:0; font-size:.825rem; text-decoration:underline; grid-template-columns:1fr; grid-template-areas: "question"; margin:0; margin-bottom:1rem; } .vouchentryaccord .header img{ display:none !important; } #pm .ul.accordion .vouchentryaccord .pane, #pm .bskt ul.accordion .pane { padding:0; display:none; background:none; } .vouchentry ul.vouch{ margin:0; padding:0; display:grid; grid-row-gap:.5em; grid-template-columns:1fr auto; grid-template-areas: "title title" "code submit"; margin-bottom:1em; align-items:center; } .vouchentry .appliedpromovoucher{ color:var(--light-blue); text-align:left; font-size:14px; } .remove input{ width:100%; display:block; } .vouchentry ul li{ list-style:none; margin:0; padding:0; } .vouchentry ul li.info{ grid-area:title; /*due to duplicate title when voucher applied */ display:none; } .vouchentry ul li.vouchentry{ grid-area:code; } .vouchentry ul li.vouchentry input{ width:100%; border-radius:1em; font-size:14px; padding:0 1em; height:30px; color:var(--dark-blue); border-color:var(--border-color); background-color:var(--white); } .vouchentry .submit{ grid-area:submit; background-color:var(--light-blue); border-color:var(--light-blue); margin-left:.5rem; font-size:14px; padding:.5em 1.5em } .vouchentry .remove a{ width:100%; border-radius:1em; font-size:14px; padding:0 1em; height:30px; color:var(--dark-blue); border-color:var(--border-color); background-color:var(--white); align-content:center; font-family:var(--text-font) } /* Special Instructions ------------------------------------------------------- */ #bsktid .specinst{ grid-area:specinst; text-align: left; padding:0 1rem; } #bsktid .specinst li{ display:block; } #bsktid .specinst label{ /* display:none; */ font-family:var(--text-font); font-weight:var(--heading-font-weight); font-size:14px; } #bsktid .specinst textarea{ width:100%; padding:1em; min-height:11ch; border-radius:1em; font-size:14px; color:var(--dark-blue) } #bsktid .specinst textarea:focus-visible{ outline:none; } #bsktid .specinst textarea:focus-within{ outline: 2px solid var(--blue); outline-offset: -8px; } #bsktid .specinst .chars{ font-size:xx-small; } /* Shipping ------------------------------------------------------- */ #bsktid .shipping { grid-area:shipping; text-align: left; padding:1rem; } #bsktid .shipping .header span.title{ text-align:center; line-height:1; font-family:var(--text-font); font-size:1.5em; } #bsktid .shipping .header span.icon{ display:none; } #bsktid .shipping .delivery h4{ /*duplicate title ?*/ display:none; } #bsktid .shipping .deliveryto p{ display:grid; grid-template-columns: 1fr 8ch; } #bsktid .shipping .deliveryto p span{ grid-area:unset; text-align:right; font-family:var(--text-font2) } #bsktid .shipping li, #bsktid .shipping span{ display:block; grid-area:label; } /* Basket Payment Buttons ------------------------------------------------------- */ .bsktbuttons{ grid-area:buttons; text-align:center; } .bsktbuttons .startcheckout{ grid-area:pay; margin-bottom:1rem; } .bsktbuttons .startcheckout a:before{ content:"\f023"; font-family:var(--font-awesome); margin-right:1rem; } .bsktbuttons .startcheckoutcollect{ grid-area:collect; margin-bottom:.5em; } .bsktbuttons .startcheckout a.btn{ --button-color:var(--green); --button-text-color:var(--dark-blue); display:block; margin:0 1rem; background-color:var(--button-color); align-content:center; } .bsktbuttons .clear{ grid-area:empty; } .bsktbuttons .clear a.btn{ display:block; margin-top:1em; } .bsktbuttons .cont{ grid-area:continue; display:none; } .bsktbuttons .cont a.btn{ display:block; font-size:.825rem; border:2px var(--button-color) solid; background-color:transparent; color:var(--button-color); } /* basket confidence points - payment icons */ .bsktbuttons .art{ grid-area:logos; background-color:var(--navy); border-radius:var(--border-radius); border-top-left-radius:0; border-top-right-radius:0; } .bsktbuttons .art .imgcont{ display:inline-block; margin:.5rem; } .bsktbuttons .art .imgcont img{ max-width:64px; } .bsktbuttons .art .imgcont img[alt="PayPal Pay in 3"]{ max-width:100%; } .bsktbuttons .paymentIconsFA { text-align:center; } /* Delivery info ------------------------------------------------------- */ /* for free delivery messages */ #pm .bskt .header.freedel{ grid-area:freedelivery; font-weight:400; text-transform:none; font-size:1em; padding:0; text-align:center; } #pm .bskt .header.freedel span{ font-size:inherit; } #pm .bskt .header.freedel .money{ color:inherit; } /* ?????? ------------------------------------------------------- */ .stddelinfo{ grid-area:standarddelivery; } .priordelinfo{ grid-area:prioritydelivery; } .priordelinfo, .stddelinfo{ display:grid; border-radius:var(--border-radius); background-color:var(--off-white); padding:var(--spacing); margin-bottom:1rem; grid-template-areas:"icon message price" "icon details ."; grid-template-columns:4rem 1fr 5rem; grid-column-gap:2rem; } .priordelinfo img, .stddelinfo img{ grid-area:icon; } .priordelinfo h4, .stddelinfo h4{ grid-area:message; margin:0; } .priordelinfo h5, .stddelinfo h5{ grid-area:details; margin:0; font-family:var(--text-font); font-weight:400; font-size:.825rem } .priordelinfo p, .stddelinfo p{ grid-area:price; margin:0; font-weight:600; } .ordertimer { font-size:.825rem; } #pm .bskt .art .returns{ display:grid; grid-template-areas:"icon message ." "icon details . "; grid-template-columns:4rem 1fr auto; grid-column-gap:2rem; align-items:center; } #pm .bskt .art .returns img{ grid-area:icon; } #pm .bskt .art .returns h4{ grid-area:message; margin:0; } #pm .bskt .art .returns h5{ grid-area:details; margin:0; font-family:var(--text-font); font-weight:400; font-size:.825rem } /* ------------------------------------------------------------------------------------- =New 2025 Checkout Process ------------------------------------------------------------------------------------- */ h1.checkout{ display:none; } #pt.checkouttop .ext { --logowidth:200px; --spacer-width: calc((100% - var(--site-max-width)) / 2); width:calc(100% - 2em); padding:1em; grid-template-columns:var(--spacer-width) var(--logowidth) 1fr afr var(--spacer-width); grid-template-areas:". logo secure ."; } @media only screen and (max-width: 768px) { #pt.checkouttop .ext { --logowidth:150px; } } #pt.checkouttop #a143163400{ grid-area:secure; text-align:right; align-content:cneter; } #pt.checkouttop #a143163400 h3{ display:inline-block; vertical-align:middle; margin:0; margin-right:.5em; font-size:1.2em } #pt.checkouttop #a143163400 i{ display:inline-block; vertical-align:middle; font-size:1.2em; } @media only screen and (max-width: 768px) { #pt.checkouttop #a143163400 h3, #pt.checkouttop #a143163400 i{ font-size:1em; } } .chkflow #pmid{ background-color:var(--white); padding:1em 0; display:flex; } .chkflow .pmfull{ width:calc(var(--site-max-width) - 2em); max-width:var(--checkout-process-width); background:none; margin:auto; } /* summary info */ .chkflow .suminfo{ background-color:var(--off-white); padding:1em; margin-bottom:2em; } .chkflow .suminfo .title{ display:none; } .chkflow .suminfo li{ display:block; } .chkflow .zone{ display:none; } .chkflow .suminfo li.info:before{ content:''; margin:0; } .chkflow .suminfo li.info{ padding:0; margin:0; color:var(--text-color); font-size:var(--small-font-size); } .chkflow .suminfo .title{ font-family:var(--heading-font); font-weight:var(--heading-font-weight); margin-bottom:1em; } .chkflow .suminfo .header{} .chkflow .suminfo label, .chkflow .suminfo span{ display:block; } .chkflow .suminfo span, .chkflow .suminfo .address{ margin-bottom:1rem; font-family:var(--text-font); margin-left:1em; } .chkflow .suminfo label{ font-size:1rem; } .chkflow .suminfo .address{ --font-size:var(--small-font-size); font-family:var(--text-font); margin-left:1em; margin-bottom:1rem; } .chkflow .suminfo + .bt{ text-align:center; background-color:var(--off-white); padding:1em; } .chkflow .payoptsform{ background-color:var(--off-white); padding:1em; } .chkflow .inputtext{ width:calc(100% - 1em); margin:0; padding:0 1em; margin-bottom:.5em; grid-area:input; border:1px solid var(--blue); background-color:var(--white); height: 50px; text-align: left; border-radius:100vw; } .chkflow .chkbox label{ display:inline; font-size:.825rem } .chkflow .chkbox input{ display:inline; margin:0; margin-right:.5rem; } .chkflow .remove{ font-size:.825em; margin-bottom:1rem; } /* Signin/guest pane ------------------------------------------------------- */ .chkflow .signin{ background-color:var(--off-white); padding:1em; margin-bottom:2em; } .chkflow .signin li{ display:block; margin-bottom:.5rem; } .chkflow .psign .bt, .chkflow .pguest .bt{ border:2px solid var(--light-blue); padding:1rem .5rem; display:grid; grid-template-areas: "radio info" "radio message"; grid-column-gap:.5em; grid-template-columns:2em 1fr; /* margin-bottom:1rem; */ align-items:center; } .chkflow .psign .bt input, .chkflow .pguest .bt input{ grid-area:radio; } .chkflow .psign .bt h3, .chkflow .pguest .bt h3{ grid-area:info; margin:0; } .chkflow .psign .bt p.info, .chkflow .pguest .bt p.info{ grid-area:message; margin:0; font-size:.8em; } /* Existing Customer fields ---------------------------*/ .chkflow .psign{ margin-bottom:1em; } .chkflow .psign .exstcust{ padding:0 1em; } .chkflow .psign label{} .chkflow .psign img, .chkflow .psign .exstcust .exstreqfield{ display:none; } .chkflow .psign .inputtext, .chkflow .psign .submit{ width:100%; } .chkflow .psign li.info{} .chkflow .psign li.info:before{ content:''; margin:0; } .chkflow .psign .subscribe{ font-size:.8em; margin:.5rem 0; } .chkflow .psign .subscribe input{} .chkflow .psign .subscribe label{ display:inline; margin-left:.5rem; } .exstfgtpwd{ text-decoration:underline; font-size:.825em; } /* guest checkout fields ---------------------------*/ .chkflow .pguest{} .chkflow .pguest .signinguest{ padding:0 1em; margin-top:1em; } .chkflow .pguest label{} .chkflow .pguest label img{ /* display:none; */ display:inline; } .chkflow .pguest .inputtext{ border:1px solid var(--blue); background-color:var(--off-white); margin:0; height: 50px; text-align: left; border-radius:100vw; font-family:var(--heading-font); width:100%; padding:1em; } .chkflow .pguest .submit{ width:100%; } .chkflow .pguest li.info{ color:var(--text-color); font-size:.725em; margin:.5rem 0; } .chkflow .pguest li.info:before{ content:''; margin:0; } .chkflow .pguest .subscribe{ font-size:.8em; margin:.5rem 0; } .chkflow .pguest .subscribe input{} .chkflow .pguest .subscribe label{ display:inline; margin-left:.5rem; } /* Basket Summary ------------------------------------------------------- */ .chkflow .bsktsummary{ background-color:var(--off-white); padding:1em; margin-bottom:2em; display:grid; grid-template-areas:"items expand" "total expand"; grid-template-columns:1fr 2em; } .chkflow .bsktsummary #bsktitems, .chkflow .bsktsummary #bsktvalue{ margin:0; font-size:small; } .chkflow .bsktsummary #bsktitems span, .chkflow .bsktsummary #bsktvalue span{ font-weight:bold; margin-right:.5rem; width:5ch; } .chkflow .bsktsummary img{ grid-area:expand; } .chkflow .bsktsummary img.btn{ display:none; } .chkflow .bsktsummary .showhide{ display:none; cursor:pointer; } .chkflow .bsktsummary .showshow{ cursor:pointer; } /* ------------------------------------------------------------------------------------- =HoverBasket ------------------------------------------------------------------------------------- */ .hoverbskt { /* border: 2px solid var(--red); */ border-radius: var(--border-radius); width: calc(250px - 1em); padding: var(--spacing); z-index: 999999; text-align: center; -webkit-box-shadow: var(--box-shadow); -moz-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); background-color: var(--white); } .hoverbskt h3 { display: none; } .hoverbskt .lines .item:last-child {} .hoverbskt .formupdate {} .hoverbskt .formupdate input {} .hoverbskt .formupdate input.submitQtyChange {} .hoverbskt a, .hoverbsktadd a, .hoverbskt p, .hoverbsktadd p { font-size: 0.825em; margin: 0; } .hoverbsktadd p.descr { display: none; } .hoverbskt .lines {} .hoverbskt .lines .item { display: grid; grid-template-columns: 2em .5rem 1fr 7ch; grid-template-areas: "image . title title" "image . sample sample" "image . quantity price"; margin-bottom:.5rem; } .hoverbskt .lines .item a.title, .hoverbskt .lines .item p.sample { font-weight: var(--heading-font-weight); text-align: left; grid-area: title; } .hoverbskt .lines .item picture{ grid-area:image; align-self:start; margin:0; } .hoverbskt .lines .item img { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; grid-area: image; margin: 0 !important; } .hoverbskt .lines .item p.price { grid-area: price; text-align:right; } .hoverbskt .lines .item p.descr { grid-area: description; display: none; } .hoverbskt .lines .item p.qty { grid-area: quantity; text-align: right; } .hoverbskt .lines .item p.sample { grid-area: sample; font-weight:normal; font-size:.725em; text-align: left; } .hoverbskt h4.count, .hoverbskt h4.total { padding: 0; margin: 0; font-size: 0.825em; text-align: left; display: block; width: 50%; text-transform: capitalize; color: var(--text-color); font-weight: var(--heading-font-weight); } .hoverbskt a.btn { display: inline-block; padding: var(--spacing) var(--spacing); background-color: var(--red); border: 1px var(--red) solid; position: absolute; right: 1em; bottom: 1em; } .chkflow .hoverbskt { border-radius:0; padding: var(--spacing); width: calc(100% - 0em); max-height:125px; overflow-y:auto; z-index: 999999; text-align: center; -webkit-box-shadow:none; -moz-box-shadow: none; box-shadow: none; background-color: var(--white); position:absolute; margin-top:-2em; left:5%; border:16px solid var(--off-white); border-top:0; } /* delivery Address pane ------------------------------------------------------- */ .chkflow #pdelivery{ padding:1em; background-color:var(--off-white); } /* Invoice Address pane ------------------------------------------------------- */ .chkflow #pchkout{ padding:1em; background-color:var(--off-white) } /* Postcode Lookup ------------------------------------------------------- */ .pclup, .pclupdel{ display:grid; grid-template-columns: auto auto 1fr; grid-column-gap:1em; grid-template-areas: "title title title" "postcode locate ." "manual manual manual" "address address addres"; align-items:center; } .pclup label, .pclupdel label{ grid-area:title; } #pclupManualAddressDel, #pclupManualAddress{ grid-area:manual; text-decoration:underline; cursor:pointer; } #txtPostCodeLookup{ grid-area:postcode; } #btnPostCodeLookup{ grid-area:locate; } span.or{ grid-area:change; text-align:right; display:none; } #pnlMultiAddressOption, #pnlMultiAddressOptionDel{ grid-area:address; } #ddlMultiAddress, #ddlMultiAddressDel{ background-image:none; padding:.5em; width:100%; } .pclup input, .pclupdel input{ width: auto; display: block; margin:0; margin-bottom:0; } /* delivery service options ------------------------------------------------------- */ .chkflow .service{ background-color:var(--white); padding:1em; /* margin-bottom:2em; */ } .serviceoption{ border:2px solid var(--border-color); padding:1em; display:grid; grid-template-areas: "radio info price" "radio desc price"; grid-column-gap:.5em; grid-template-columns:2em 1fr auto; margin-bottom:1rem; align-items:center; } .serviceoption:last-of-type{ margin-bottom:0; } .serviceoption input{ grid-area:radio } .serviceoption label{ grid-area:info; font-family:var(--heading-font); font-weight:var(--heading-font-weight); font-size:1.25em; } .serviceoption h3{ grid-area:price; margin:0; } .serviceoption p{ grid-area:desc; font-size:.825em; margin:0; } .chkflow .service +form, .delinst{ background-color:var(--white); padding:1em; } .chkflow .service +form li, .delinst li{ display:block; } .chkflow .service +form li label, .delinst li label{ display:block; } .chkflow .service +form li textarea, .delinst li textarea{ width:100%; height:8em; } .delinst li.chars{ font-size:small; } .shippinginfo, .deliveryinfo{ background-color:var(--white); padding:1em; } /* Payment ------------------------------------------------------- */ .page_payment{} .page_payment #pm { display:grid; } .page_payment #pm .bdcb{ display:none; } .termsagreemsg{ margin-bottom:1em; text-align:center; } .termsart{ margin-bottom:1em; text-align:center; } .termsmsgcontainer{ } .payopts{ display:grid; grid-gap:1em; } .payopts .sagepay, .payopts .sagepay .btn{ border-radius:.5em; padding: 0px; margin:0; display:block; } .payopts .sagepay .btn{ padding: 6px; } /* dna payments */ .pt_debitcreditcard {} .pt_debitcreditcard a{ display:block; border-radius:0; /* color:var(--black); */ /* font-weight:600; */ height: 46px; padding:0; align-content:center; border:0; border-radius:4px; } .pt_debitcreditcard a:hover{ border:none; } .pt_debitcreditcard a:before{ content:'\f09d'; font-family:var(--font-awesome); margin-right:.5em; } /* google pay */ .pt_googlepay { } #googlepaybtncontainer { height: 46px; border-radius:4px; } /* apple pay */ .pt_applepay { } #applepaybtncontainer { height: 46px; } /* paypal */ .payopts .paypal{ background:none; padding:0; border:0; border-radius:0; max-height:42px; overflow:hidden; align-content:center; align-items:center; display:grid; } .payopts .paypal.btn:hover{ border:0; } .pp_button { height: 46px; background-color:#f0c74b; align-content:center; border-radius:4px; } .pp_button .btn { border-radius:0; border:0; padding:0; } .dnapayments.payoptentry { background-color:var(--off-white); padding:1em; /* margin-bottom: 1em; */ grid-row: 4; } #submitpaymentpanel{ display:inline-block; width:100%; margin:0; background-color:var(--green); border-color:var(--green); color:var(--dark-blue); } .hostedfield { width:100%; margin:0; padding:0 1em; margin-bottom:.5em; grid-area:input; border:1px solid var(--blue); background-color:var(--white); height: 50px; text-align: left; border-radius:100vw; } .hostedfieldlabel{ display:none; } .dna-payments-hosted-field-focused { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .dna-payments-hosted-field-valid { border-color: #28a745; } .dna-payments-hosted-field-valid.dna-payments-hosted-field-focused { box-shadow: 0 0 0 0.2rem rgb(40, 167, 69, 0.25); } .dna-payments-hosted-field-invalid { border-color: #dc3545; } .dna-payments-hosted-field-invalid.dna-payments-hosted-field-focused { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } #threedsecurecontainer{ min-width: 515px; } /* Continue Checkout Process ------------------------------------------------------- */ .page_delivery .contbtn, .page_checkout .contbtn{} .forinvoice{} .page_delivery .forinvoice .chkbox label{} .page_delivery .contbtn input, .page_checkout .contbtn input{ margin-top:2em; width:100%; } /* ------------------------------------------------------------------------------------- =ConfirmationPage ------------------------------------------------------------------------------------- */ .page_confirmation{} .page_confirmation li { list-style: none; } .page_confirmation .header{ font-size:1.5em; } .page_confirmation .subhead{ font-size:1.25em; margin-bottom:1rem; } .page_confirmation .header{ display:block; font-family:var(--heading-font); font-weight:var(--heading-font-weight); position: relative; z-index: 1; overflow: hidden; text-align: left; margin-bottom:2rem; } .page_confirmation .subhead{ display:block; font-family:var(--heading-font); font-weight:var(--heading-font-weight); position: relative; z-index: 1; overflow: hidden; text-align: left; margin-bottom:2rem; } .page_confirmation .info { text-align:left; } .page_confirmation .info li{ margin-bottom:1rem; } .page_confirmation .info li.subhead:before, .page_confirmation .info li.subhead:after{ content:''; display:none; } /* Basket Line items ------------------------------------------------------- */ .page_confirmation .conf .order {} .page_confirmation .conf .order .line { display: grid; grid-gap: .5em; grid-template-columns: 64px 1fr auto 100px; grid-template-areas: "icon desc qty price"; padding: 1em; align-self: center; align-items: start; } /* Image */ .page_confirmation .conf .order .line a.img {} /* Product title*/ .page_confirmation .conf .order .line .descr { align-self: start; font-size: 1rem; font-family:var(--heading-font); font-weight: var(--heading-font-weight); } .page_confirmation .conf .order .line .price { text-align: right; font-family:var(--heading-font); font-weight: var(--heading-font-weight); align-self: start; } /* Basket Subtotal ------------------------------------------------------- */ .page_confirmation .conf .order .subtotal { padding: 1em; border-top: 1px var(--border-color) solid; text-align: right; } .page_confirmation .conf .order .subtotal label { margin-right: 1em; } .page_confirmation .conf .order .subtotal span { font-size: 1.2em; font-family:var(--heading-font); font-weight: var(--heading-font-weight); } .page_confirmation .conf .order .address { text-align: left; margin-bottom:4rem; } /* Post order customer registration panel ------------------------------------------------------- */ .page_confirmation .conf .ordreg { background-color: #ffffff; padding: 1em; margin: 1em 0; } #registrationform{ background-color:var(--grey); border-radius:1em; padding:2em 4em } #registrationform label { display:block; } #registrationform label img{ display:inline; } .page_confirmation .conf .ordreg input { margin: .5em 0; } .page_confirmation .conf .ordreg .info { margin: .5em 0; text-align:left; } .page_confirmation .conf .ordreg .help { font-size: .725em; padding: 1em 0 } .success .form li {} /* ------------------------------------------------------------------------------------ SCREEN - tablet (landscape tablets, 768px and up) Last Updated : 01. 03. 2026 Copyright :(c) 2025 Etail Systems Ltd Author : Etail Systems Ltd ------------------------------------------------------------------------------------- */ @media only screen and (min-width: 768px) and (max-width: 992px) { /* ------------------------------------------------------------------------------------- =Definitions ------------------------------------------------------------------------------------- */ :root{ --site-max-width:100%; --site-inner-width:calc(100% - 6em); /* font-sizes */ --heading-spacing:0; --sub-heading-spacing:0; --text-size:16px; } /* ------------------------------------------------------------------------------------- =Typography ------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =Grid Layout ------------------------------------------------------------------------------------- */ .fullWidth { grid-column: 1/-1; } .titleArticle{ grid-column:1/-1; text-align:center; } .halfWidth{ grid-column: 1/-1; } .halfWidthDbl { grid-column: 1/-1; grid-row: span 1; grid-column: 1/-1 } .quarterWidth { grid-column: 1/-1; } .threeQtrWidth { grid-column: 1/-1; } .thirdWidth { grid-column: 1/-1 } .twoThirdWidth { grid-column: 1/-1; } .textImage{ display:grid; grid-template-areas:"text" "image"; grid-template-columns:minmax(0,1fr); grid-gap:0em; align-items:center; } /* Swiffy Sliders ------------------------------------------------------- */ /*dept sliders */ .slider-product{ --swiffy-slider-item-count: 5; } /*dept sliders */ .slider-dept{ --swiffy-slider-item-count: 5; --swiffy-slider-nav-light: #fff; } .slider-dept-alt{ --swiffy-slider-item-count: 10; } /*Featured sliders */ .slider-featured{ --swiffy-slider-item-count: 5; } /*cta slider */ .slider-cta{ --swiffy-slider-item-count: 1; } .slider-trustedby{ --swiffy-slider-item-count: 4; } /* product sliders - code needs some tweaking */ /* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */ .carousel.prod .swiffy-slider{ --swiffy-slider-item-count: 2; margin-bottom:1rem; padding-bottom:1rem; } /* department sliders - code needs some tweaking */ /* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */ .carousel.dept .swiffy-slider{ --swiffy-slider-item-count: 2; margin-bottom:1rem; padding-bottom:1rem; } /* ------------------------------------------------------------------------------------- =SiteContainers ------------------------------------------------------------------------------------- */ #cont { margin: auto; } #site {} /* ------------------------------------------------------------------------------------- =FIXEDTop Panel #ptf ------------------------------------------------------------------------------------- */ #ptf { --heading-color:var(--white); --text-link-color:var(--white); top: 0px; width: 100%; background-color: var(--top-bar-color); color: var(--white); text-align: center; align-content:center; margin-bottom:.5em } #ptf p, #ptf h1, #ptf h2, #ptf h3, #ptf h4, #ptf h5, #ptf h6{ font-family:var(--text-font); margin:0; padding:.5em; font-size:12px; color:var(--white) } /* ------------------------------------------------------------------------------------- =Top Panel #pt ------------------------------------------------------------------------------------- */ #pt{ border-bottom-right-radius:.5em; border-bottom-left-radius:.5em; } #pt .ext { --logo-width: minmax(200px, 400px); width:100%; max-width:100%; background-color: var(--top-panel-color); margin: 0 auto; position: relative; display: grid; grid-column-gap: 0rem; grid-template-columns:repeat(5, minmax(auto, 1fr)); grid-template-areas:"logo logo logo logo logo" "nav-start searchtoggle trade icons basket" "search search search search search" "nav nav nav nav nav" ; align-items: center; position:relative; padding-top:1em; padding-bottom:1em; } /* logo ------------------------------------------------------- */ /* search ------------------------------------------------------- */ #pt .icon.srch{ grid-area:searchtoggle; } /* mikes hack of a search toggle */ #a142999554{ display:block; grid-area:searchtoggle; text-align:center; } #a142999554 button{ background-color:transparent; border:0; outline:0; font-size: 17px; } #pt .search.toggleSearch { grid-area: search; visibility:visible; height:auto; margin-bottom:.5em; } #pt .search { grid-area: search; margin-bottom:5px; text-align: center; font-size: 13px; padding: 2px 4px; margin: 0; visibility:hidden; height:0; width:auto; } /* basket ------------------------------------------------------- */ #mybskt{} /* Nav Settings ------------------------------------------------------- */ #pt .nav-wrapper{ margin-top:0; } /* ------------------------------------------------------------------------------------- =Center Panel #pc ------------------------------------------------------------------------------------- */ #pc{ background-color:white; } /* ------------------------------------------------------------------------------------- =Left Panel #pl ------------------------------------------------------------------------------------- */ #pl { width: calc(var(--site-max-width) - 2rem); margin:0 1rem; } /* ------------------------------------------------------------------------------------- =Right Panel #pr ------------------------------------------------------------------------------------- */ #pr { width: calc(var(--site-max-width) - 2rem); margin:0 1rem; } /* ------------------------------------------------------------------------------------- =Main Panel #pmid ------------------------------------------------------------------------------------- */ #pmid{} #sr { grid-template-columns: repeat(2, minmax(0,1fr)); grid-row-gap:2rem; padding:0 1em; } .pmwide #sr { grid-template-columns: repeat(2, minmax(0,1fr)); } /* ------------------------------------------------------------------------------------- =Subdepartment tree ------------------------------------------------------------------------------------- */ .depttree ul{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-gap: 1rem; } /* ------------------------------------------------------------------------------------- =FeaturedProducts ------------------------------------------------------------------------------------- */ /* title ------------------------------------------------------- */ .fprd .fprdtitle, .fprd a.title{ } /* flags ------------------------------------------------------- */ /* Wishlist/Savefor later on fprd ------------------------------------------------------- */ .sfl{ grid-area:unset; position:absolute; top:.5em; right:.5em; z-index:1; } .sfl .submit { border:0; padding:0.5em; width:2em; line-height:1; background-color:var(--white); } /* fprd adverts ------------------------------------------------------- */ .fprd.add{ display:block; position:relative; } /* ------------------------------------------------------------------------------------- =Footer Panel #pf ------------------------------------------------------------------------------------- */ #pf{} #pf .ext {} /* ------------------------------------------------------------------------------------- =Bottom Panel #pb ------------------------------------------------------------------------------------- */ #pb{} #pb .ext { --spacer-width:1rem; } #pb .ext img{ margin:0; } /* ------------------------------------------------------------------------------------- =FIXEDBottom Panel ------------------------------------------------------------------------------------- */ #pbf .ext { } .etailcopy{ grid-area:copyright; text-align:left; padding-top:1em; margin-top:1em; border-top:1px solid var(--light-blue); } .etailcopy p{ display:block; margin:0; } /* ------------------------------------------------------------------------------------- =Sitemap ------------------------------------------------------------------------------------- */ #pm .smap ul { list-style-position: inside; list-style: none; display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); } /* ------------------------------------------------------------------------------------- =Client Specific Stylings ------------------------------------------------------------------------------------- */ /* home page ------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =Basket - Checkout v5 ------------------------------------------------------------------------------------- */ /*needs #pm as .bskt is used in the header */ #pm .bskt { display: grid; grid-template-columns: minmax(0,1fr); grid-gap:0; grid-column-gap: 2em; grid-template-areas:"header" "contents" "sidebar" " promcontents"; align-items:start; margin-bottom:4rem; } #pm .bskt .line{ padding-bottom: var(--spacing); margin-bottom: var(--spacing); align-items: start; display: grid; --image-width:3rem; --description-width:minmax(0,1fr); --qty-width:auto; --rem-width:auto; --total-width:8ch; grid-template-columns: var(--image-width) var(--description-width) var(--rem-width) ; grid-template-areas:"icon desc desc desc" ". skuselect skuselect skuselect " ". qty price rem" ; border-bottom:1px solid var(--border-color); grid-column-gap:1rem; } /*product quantity */ #pm .bskt .lines .line .qty{ grid-area:qty; align-self:end; } #pm .bskt .line .price{ grid-area:price; text-align:center; font-family:var(--heading-font); font-weight:var(--heading-font-weight); align-self:center; } /* remove item */ #pm .bskt .line .rem{ grid-area:rem; text-align:center; align-self:center; } /* Sign In - these conflict with new checkout forms, need to revisit /* also DH has broken the structure of this page with the new checkout code! /* hence all the .form, form stuff in the defaults ------------------------------------------------------- */ .page_signin .form, .page_signin form{ margin: auto; max-width:95% !important; } /* Forgotten Password ------------------------------------------------------- */ .page_passwordrequest .form#pwrem { width:95% !important; margin: auto; } /* Register/update details - need to add classes to all the input fields ------------------------------------------------------- */ .page_register .form { margin: auto; max-width:95% !important;; } } /* ------------------------------------------------------------------------------------ SCREEN - mobile (phones, 768px and down) Last Updated : 01. 03. 2026 Copyright :(c) 2025 Etail Systems Ltd Author : Etail Systems Ltd ------------------------------------------------------------------------------------- */ @media only screen and (max-width: 768px) { /* ------------------------------------------------------------------------------------- =Definitions ------------------------------------------------------------------------------------- */ :root{ --site-max-width:100%; --site-inner-width:calc(100% - 6em); /* font-sizes */ --xlarge-heading-font-size:40px; --large-heading-font-size: 28px; --heading-font-size:24px; --sub-heading-font-size:18px; --statement-font-size:20px; --text-size:16px; --font-size: 16px; --small-font-size:14px; } /* ------------------------------------------------------------------------------------- =Typography ------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =Grid Layout ------------------------------------------------------------------------------------- */ /* full width panel ------------------------------------------------------- */ .pmfull { margin:0 1em; } #pm .pmind { grid-gap:0rem; } .fullWidth { grid-column: 1/-1; } .titleArticle{ grid-column:1/-1; text-align:center; } .halfWidth{ grid-column: 1/-1; } .halfWidthDbl { grid-column: 1/-1; grid-row: span 1; grid-column: 1/-1 } .quarterWidth { grid-column: 1/-1; } .threeQtrWidth { grid-column: 1/-1; } .thirdWidth { grid-column: 1/-1 } .twoThirdWidth { grid-column: 1/-1; } .textImage{ display:grid; grid-template-areas:"text" "image"; grid-template-columns:minmax(0,1fr); grid-gap:0em; align-items:center; } /* Category Links ------------------------------------------------------- */ .categoryLink{ grid-column:1/-1; display:grid; grid-template-areas: "title" "image" "text"; grid-template-columns:minmax(0,1fr); grid-column-gap:0; align-items:center; } .categoryLinkLrg{ grid-column:1/-1; padding: 2rem; padding-bottom: 0em; display:grid; grid-template-areas: "image" "title" "text"; } .categoryLink ul, .categoryLinkLrg ul{ display:inline-block; /* margin-bottom:1em; */ } .categoryLink li, .categoryLinkLrg li{ display:inline-block; } .categoryLink h2, .categoryLinkLrg h2{ grid-area:title; align-self:center; margin:0; margin:.5rem 0; font-size:var(--large-heading-font-size); /* color:inherit; */ } .categoryLink .artp, .categoryLinkLrg .artp{ grid-area:text; align-self:start; text-align:left; color:var(--off-white-alpha) } .categoryLink small, .categoryLinkLrg small{ display:block; padding-top:.5em; border-top: 1px var(--off-white-alpha) dashed; margin:1em 0; } .categoryLink .imgcont, .categoryLinkLrg .imgcont{ grid-area:image; align-self:center; } .categoryLink .imgcont img, .categoryLinkLrg .imgcont img{ width:100%; } .deptLink{ grid-column: 1 / -1; text-align:center; /* padding:1em; */ border-top-right-radius:2rem; border-top-left-radius:2rem; overflow:hidden; margin-bottom:2rem; background-color:var(--off-white); } .deptLink h4{ font-size:var(--heading-font-size); margin-top:.5em; color:var(--black) } .deptLink a.btn{ color:var(--blue); font-family:var(--text-font); } .deptLink img{ margin:auto; width:100%; } /* headers ---------------------------*/ .deptHeader .artp{ text-align:left; max-width:100%; line-height:initial; } /* Swiffy Sliders ------------------------------------------------------- */ /*dept sliders */ .slider-product{ --swiffy-slider-item-count: 5; } /*dept sliders */ .slider-dept{ --swiffy-slider-item-count: 5; --swiffy-slider-nav-light: #fff; } .slider-dept-alt{ --swiffy-slider-item-count: 10; } /*Featured sliders */ .slider-featured{ --swiffy-slider-item-count: 5; } /*cta slider */ .slider-cta{ --swiffy-slider-item-count: 1; } .slider-trustedby{ --swiffy-slider-item-count: 4; } /* product sliders - code needs some tweaking */ /* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */ .carousel.prod .swiffy-slider{ --swiffy-slider-item-count: 2; margin-bottom:1rem; padding-bottom:1rem; } /* department sliders - code needs some tweaking */ /* doesn't write out the product list css value, still has remenants of .carousel, displays products that aren't live */ .carousel.dept .swiffy-slider{ --swiffy-slider-item-count: 2; margin-bottom:1rem; padding-bottom:1rem; } /* ------------------------------------------------------------------------------------- =SiteContainers ------------------------------------------------------------------------------------- */ #cont { margin: auto; } #site {} /* ------------------------------------------------------------------------------------- =FIXEDTop Panel #ptf ------------------------------------------------------------------------------------- */ #ptf {} /* ------------------------------------------------------------------------------------- =Top Panel #pt ------------------------------------------------------------------------------------- */ body.scrolled #pt{ position: initial; top: 0; left: 0; right: 0; width: 100%; z-index: 9999; box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 ); border-top:4px solid var(--blue); } body.scrolled #pt .ext { padding-top:0em; } /* stop the page jumping when #pt becomes fixed */ body.scrolled #pc{ padding-top: 0; } #pt .ext { width:100%; max-width:100%; margin: 0 auto; position: relative; display: grid; padding:0; grid-column-gap: 0rem; grid-template-columns:1fr 1fr 2fr 1fr 1fr; grid-template-areas: "logo logo logo logo logo" "nav-start searchtoggle icons trade basket" "search search search search search" "nav nav nav nav nav"; align-items: center; position:relative; } /* logo ------------------------------------------------------- */ #a142999552{ grid-area:logo; } #a142999552 svg{ margin:auto; max-width:80%; } /* search ------------------------------------------------------- */ #pt .icon.srch{ grid-area:searchtoggle; } /* mikes hack of a search toggle */ #a142999554{ display:block; grid-area:searchtoggle; text-align:center; } #a142999554 button{ background-color:transparent; border:0; outline:0; font-size: 26px; line-height:1; } #pt .search.toggleSearch { grid-area: search; visibility:visible; height:auto; margin-bottom:.5em; } #pt .search, body.scrolled #pt .search{ grid-area: search; text-align: center; font-size: 13px; padding: 2px 4px; margin: 0; visibility:hidden; height:0; width:auto; } /* icons ------------------------------------------------------- */ /* reduced size of images not needed on mobile*/ body.scrolled .art#a143163394 img, body.scrolled #p54820864 img, body.scrolled #mybskt img{ width:36px; margin:auto } #p54820864 img, #p54820864 img{ width: 36px; margin:auto } #p54820864 ul, #p54820864 ul{ grid-template-columns: 1fr 1fr; } #p54820864 li a.lnk{ display:none; } #p54820864 li.wish{} #p54820864 li.lnk{ display:grid; grid-template-areas: "icon" "link"; margin:auto; } #p54820864 li.reg, #p54820864 li.sout{ display:none; } /* trade signup ------------------------------------------------------- */ .art#a143163394{ grid-area:trade; } .art#a143163394 p{ display:none; } .art#a143163394 img{ width: 36px; margin:auto } /* basket ------------------------------------------------------- */ #pt .bskt { grid-area: basket; } #mybskt{ grid-area: basket; grid-template-areas: "icon"; } #mybskt:after{ content:""; display:none; } #mybskt img{ width: 36px; } /* ------------------------------------------------------------------------------------- =Center Panel #pc ------------------------------------------------------------------------------------- */ #pc{ /* background-color:white; */ } /* Homepage banner ------------------------------------------------------- */ .mainBanner { --text-color: white; --heading-color: white; position: relative; overflow: hidden; } .mainBanner:before{ content: ''; position: absolute; inset: 0; background: var(--dark-green-alpha); pointer-events: none; z-index: 1; } .mainBanner > picture.bnr > img { width: 100%; display: block; aspect-ratio:1/1; object-fit: cover; object-position: center center; /* critical line */ } /* left panel ------------------------------------------------------- */ #pl { width:0; transition: var(--transition); } #pl .filter{ height: 100%; width: 0%; /* 0 width - change this with JavaScript */ position: fixed; z-index: 10001; top: 0; left: 0; background-color: var(--popout-color); overflow-x: hidden; /* Disable horizontal scroll */ transition: var(--transition); box-shadow: var(--box-shadow); padding:1rem; display:none; } #pl .filter.showfilter{ display:block; width: calc(90% - 2rem); margin-top:0; } #fstrigbtn{ display:block; margin-bottom:1rem; } .fsclsdiv .fsclsspn{ display:inline-block; } .searchheader { grid-template-areas: "items sort-by" "filter filter"; anchor-name:--filter-anchor; } /* ------------------------------------------------------------------------------------- =Right Panel #pr ------------------------------------------------------------------------------------- */ #pr { width: calc(var(--site-max-width) - 2rem); margin:0 1rem; } /* ------------------------------------------------------------------------------------- =Main Panel #pmid ------------------------------------------------------------------------------------- */ #pmid{ grid-template-columns: 1fr; } .pmfull, .pmstd{ width: calc(var(--site-max-width) - 2rem); /* margin:0 1rem; */ } .pmwide{ width: calc(var(--site-max-width) - 2rem); margin:0 1rem; } .pmfull #sr { grid-template-columns: repeat(1, minmax(0,1fr)); grid-row-gap:2rem; } .pmwide #sr { grid-template-columns: repeat(1, minmax(0,1fr)); } /* ------------------------------------------------------------------------------------- =Subdepartment tree ------------------------------------------------------------------------------------- */ .depttree ul{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-gap: 1rem; } /* ------------------------------------------------------------------------------------- =FeaturedProducts ------------------------------------------------------------------------------------- */ /* title ------------------------------------------------------- */ .fprd .fprdtitle, .fprd a.title{ } /* flags ------------------------------------------------------- */ /* Wishlist/Savefor later on fprd ------------------------------------------------------- */ .sfl{ grid-area:unset; position:absolute; top:.5em; right:.5em; z-index:1; } .sfl .submit { border:0; padding:0.5em; width:2em; line-height:1; background-color:var(--white); } /* fprd adverts ------------------------------------------------------- */ .fprd.add{ display:block; position:relative; } /* ------------------------------------------------------------------------------------- =Footer Panel #pf ------------------------------------------------------------------------------------- */ #pf{ padding: 1em; margin-top:0; } #pf .ext { grid-template-columns: minmax(0,1fr); } /* ------------------------------------------------------------------------------------- =Bottom Panel #pb ------------------------------------------------------------------------------------- */ #pb{} #pb .ext { --spacer-width:1rem; grid-template-columns:minmax(0,1fr); grid-template-areas: "logo" "customerservices" "product" "contact"; padding: 10%; grid-row-gap:2em; } #pb .ext img{ margin:0; } /* ------------------------------------------------------------------------------------- =FIXEDBottom Panel ------------------------------------------------------------------------------------- */ #pbf .ext { grid-template-areas:"paymenticons" "terms" "copyright"; align-items:center; grid-template-columns:minmax(0,1fr) ; } .etailcopy{ grid-area:copyright; text-align: center; /* padding-top:1em; */ margin: .5em; /* border-top:1px solid var(--light-blue); */ } .etailcopy p{ display:block; margin:0; } #a142639116{ text-align:center; } /* ------------------------------------------------------------------------------------- =Sitemap ------------------------------------------------------------------------------------- */ #pm .smap ul { list-style-position: inside; list-style: none; display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); } /* ------------------------------------------------------------------------------------- =Basket - Checkout v5 ------------------------------------------------------------------------------------- */ /*needs #pm as .bskt is used in the header */ #pm .bskt { display: grid; grid-template-columns: minmax(0,1fr); grid-gap:0; grid-column-gap: 2em; grid-template-areas:"header" "contents" "sidebar" " promcontents"; align-items:start; margin-bottom:4rem; } #pm .bskt .line{ padding-bottom: var(--spacing); margin-bottom: var(--spacing); align-items: start; display: grid; --image-width:3rem; --description-width:minmax(0,1fr); --qty-width:auto; --rem-width:auto; --total-width:8ch; grid-template-columns: var(--image-width) var(--description-width) var(--rem-width) ; grid-template-areas:"icon desc desc desc" ". skuselect skuselect skuselect " ". qty price rem" ; border-bottom:1px solid var(--border-color); grid-column-gap:1rem; } /*product quantity */ #pm .bskt .lines .line .qty{ grid-area:qty; align-self:end; } #pm .bskt .line .price{ grid-area:price; text-align:center; font-family:var(--heading-font); font-weight:var(--heading-font-weight); align-self:center; } /* remove item */ #pm .bskt .line .rem{ grid-area:rem; text-align:center; align-self:center; } /* Sign In - these conflict with new checkout forms, need to revisit /* also DH has broken the structure of this page with the new checkout code! /* hence all the .form, form stuff in the defaults ------------------------------------------------------- */ .page_signin .form, .page_signin form{ margin: auto; max-width:95% !important; } /* Forgotten Password ------------------------------------------------------- */ .page_passwordrequest .form#pwrem { width:95% !important; margin: auto; } /* Register/update details - need to add classes to all the input fields ------------------------------------------------------- */ .page_register .form { margin: auto; max-width:95% !important;; } /* ------------------------------------------------------------------------------------- =Client Specific Stylings ------------------------------------------------------------------------------------- */ /* home page ------------------------------------------------------- */ /* Home page hero */ #a143032321.textImage{ grid-template-areas:"stack"; grid-template-columns:1fr; grid-gap:0; position:relative; } #a143032321.textImage .imgcont, #a143032321.textImage .artp{ grid-area:stack; } #a143032321.textImage .imgcont{ height:100%; min-height:100%; overflow:hidden; } #a143032321.textImage .imgcont picture, #a143032321.textImage .imgcont img{ display:block; width:100%; height:100%; } #a143032321.textImage .imgcont img{ object-fit:cover; } #a143032321.textImage .artp{ position:relative; z-index:1; margin:0; padding:2em; background:rgba(255,255,255,.75); } #a143032321 .inline li{ display:block; margin:0; padding:0; } #a143032321 .inline li .btn{ display:block; margin:0; margin-bottom:1em; } #a145063937, #a145063939, #a145063938 { grid-template-areas: "image" "content"; grid-template-columns: 1fr; margin:1rem 0; } #a145063937 h2, #a145063938 h2, #a145063939 h2{ margin-top:1rem; } /* contact us */ #prom-1652359162 .form{ grid-column:1/-1; } #prom-1652359162 .art#a145391617{ grid-column:1/-1; } } /* ------------------------------------------------------------------------------------ SCREEN - v6 basecomponents 2025 Last Updated : 18. 08. 2025 Copyright :(c) 2025 Etail Systems Ltd Author : Etail Systems Ltd ------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- =Autocomplete ------------------------------------------------------------------------------------- */ .ui-helper-hidden-accessible { display: none; } .ui-widget.ui-widget-content.ui-autocomplete { width: 275px !important; margin: auto; padding: 0; z-index: 999999 !important; border-radius: 0; max-height: 332px; overflow-x: hidden; overflow-y: scroll; border: 1px solid var(--border-color); z-index: 2000; background-color: var(--white) } .ui-autocomplete li.ui-menu-item { cursor: pointer; margin: 0; display: block; } .ui-menu-item a { display: grid; grid-template-columns: 32px 1fr; padding: var(--half-spacing); grid-template-areas: "image title"; grid-gap: var(--spacing); } .foundProduct { grid-area: image; } .foundProduct img {} .foundProductTitle { grid-area: title; } .foundProductRef { display: none; } .foundProductDesc { display: none; } .ui-autocomplete li { list-style: none; } .ui-autocomplete li:hover {} .ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { margin: 0; border-radius: 0; border: none; outline: none; } .ui-menu-item a.ui-state-active {} .ui-autocomplete mark {} /* ------------------------------------------------------------------------------------- =Email when back in stock EWIS ------------------------------------------------------------------------------------- */ /* take care as the html markup that writes this thing out is a bit borked! */ #ewis h3 { font-weight: var(--heading-font-weight); } #ewis label { color: var(--text-heading-color); } a.lnk.ewisopen, a.lnk.ewis { display: block; height: auto; text-transform: capitalize; font-size:.625em; } .lnk.ewisopen:hover { text-decoration: underline; text-decoration-color:var(--orange); } /* ------------------------------------------------------------------------------------- =PopupDialog ------------------------------------------------------------------------------------- */ #popupdialog { position: fixed; top: 50%; left: 50%; width: calc(var(--site-max-width) / 3); transform: translate(-50%, -50%); padding: var(--spacing); z-index: 2000; z-index: 2000; border: 1px solid var(--border-color); background-color: var(--popout-color); display: none; text-align: center; -webkit-box-shadow: var(--box-shadow); -moz-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); } #popupdialog .item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-gap: .5em; margin-bottom: var(--spacing) } #popupdialog .item img { grid-column: 1/-1; grid-row: 1; align-self: center; margin: auto; } #popupdialog h3 { font-size: 1em; margin-bottom: 1em; } #popupdialog a { --border-color: var(--button-border-color); display: inline-block; vertical-align: middle; font-size: 1em; font-weight: var(--button-font-weight); text-align: center; cursor: pointer; font-family: var(--button-font); text-transform: capitalize; background-color: var(--button-color); color: var(--button-text-color); border: 1px solid var(--button-border-color); border-radius: var(--border-radius); outline: none; padding: var(--half-spacing) var(--spacing) } #popupdialog .item .title { font-family: var(--heading-font); font-weight: var(--heading-font-weight); color: var(--text-heading-color); background-color:transparent; border:none; font-size: 1.2em; grid-column: 1/-1; grid-row: 2; text-align: center; } #popupdialog .item p.qty { grid-column: 1; grid-row: 3; text-align: right; } #popupdialog .item p.price { grid-column: 2; grid-row: 3; text-align: left; } /* ------------------------------------------------------------------------------------- =HoverBsket ------------------------------------------------------------------------------------- */ .hoverbskt { background-color: var(--off-white); border:none; width: calc(var(--basket-width) - 1em); border-top:none; padding:.5em; z-index:999999; text-align:center; } .hoverbskt h3 { display:none; } .hoverbskt .lines .item:last-child {} .hoverbskt .formupdate {} .hoverbskt .formupdate input {} .hoverbskt .formupdate input.submitQtyChange {} .hoverbskt a, .hoverbsktadd a, .hoverbskt p, .hoverbsktadd p { font-size: 0.825em; } .hoverbsktadd p.descr{ display:none; } .hoverbskt .lines { max-height:260px; overflow-y:scroll; } .hoverbskt .lines .item { display:grid; grid-template-columns:64px 1fr; grid-gap:.5em; padding-right:.5em; } .hoverbskt .lines .item a.title, .hoverbskt .lines .item p.sample { color:var(--textSubHeadingColor); font-weight:bolder; text-align:left; } .hoverbskt .lines .item img { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; } .hoverbskt .lines .item p.descr { display:none; } .hoverbskt .lines .item p.price { grid-column:2; text-align:right; } .hoverbskt h4.count { padding:.5em 0; margin-top:.5em; text-align: right; font-size: 0.825em; border-top: 1px var(--border-color) solid; } .hoverbskt h4.total { text-align: right; font-size: 0.825em; font-weight:bolder; padding-bottom:.5em; margin-bottom:1em; border-bottom: 1px var(--border-color) solid; } .hoverbskt a.btn { display:block; background-color:var(--checkout-button); border:1px var(--checkout-button) solid; } /* ------------------------------------------------------------------------------------- =Out of Stock, Direct Despatch ------------------------------------------------------------------------------------- */ .ui-dialog.outofstockdialog, .ui-dialog.directdespatchdialog { width: 500px !important; max-width: 80vw; text-align: center; } .ui-dialog.outofstockdialog .outofstockpopup, .ui-dialog.directdespatchdialog .directdespatchpopup-pane { border: none; } .ui-dialog.outofstockdialog .outofstockpopup .oosheader, .ui-dialog.directdespatchdialog .ui-widget-header { padding: 0 0 1em 0; } .ui-dialog.directdespatchdialog .ui-widget-header { display: none; } .ui-dialog.directdespatchdialog .ui-widget-header .ui-dialog-titlebar-close { display: none; } .ui-dialog.outofstockdialog .outofstockpopup .oosmessage .oosdate {} .ui-dialog.outofstockdialog .ui-dialog-titlebar { display: none; } .ui-dialog.outofstockdialog .ui-widget-content, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane { background: transparent; border: none; margin-top: 0; text-align: center; padding: 0; } .ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; } .ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button { --border-color: var(--button-border-color); display: inline-block; vertical-align: middle; font-size: 1em; font-weight: var(--button-font-weight); text-align: center; cursor: pointer; font-family: var(--button-font); text-transform: capitalize; border: 1px solid var(--button-border-color); border-radius: var(--border-radius); outline: none; padding: var(--half-spacing) var(--spacing); background-color: var(--white); color: var(--orange); border: 1px solid var(--button-border-color); border-radius: var(--border-radius); outline: none; } /*better use of classes would be nice! ;) */ .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child { --border-color: var(--button-border-color); background-color: var(--button-color); color: var(--button-text-color); border: 1px solid var(--button-border-color); } .directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {} #directdespatchpopup-pane span.ddproduct { font-size: 1.5em; display: block; margin-bottom: 1em; } .ddmessage {} .ddmessage span.dddatemessage {} .ddmessage span.dddate { display: block; margin-top: 1em; font-size: 1.2em; } /* ------------------------------------------------------------------------------------- =Accordion ------------------------------------------------------------------------------------- */ ul.accordion { grid-column: 1/-1; list-style: none; } /* Header including hide/show icons ------------------------------------------------------- */ .accordion .header { display: grid; grid-template-areas:"expand question "; grid-gap: 1rem; grid-template-columns: 1rem 1fr; font-family:var(--text-font); font-size: 1em; cursor: pointer; padding: 1rem 0; transition: var(--transition); text-transform:capitalize; border-top:1px solid var(--grey) } .accordion .header img { grid-area: expand; cursor: pointer; } .accordion .header .showminus { display: none; } .accordion .header.current .showplus { display: none; } .accordion .header.current .showminus { display: block; } li.subhead {} /* Panes ------------------------------------------------------- */ ul.accordion li.pane.first {} ul.accordion li.pane { display: none; } ul.accordion li.pane p { font-size:1em; } ul.accordion li.pane ul { list-style-type: disc; margin-left: 1em; font-size:1em; } /* ------------------------------------------------------------------------------------- =Copyright and Managed by ------------------------------------------------------------------------------------- */ .etailcopy { grid-area:copyright; display: grid; grid-template-columns:auto auto 1fr; grid-gap:1rem; padding:.5em; grid-template-areas:"etail copy" } p.etail { grid-area:etail; text-align:left; margin:0; } p.copy { grid-area:copy; text-align:left; margin:0; } p.copy span {} @media only screen and (max-width: 600px) { .etailcopy { grid-area:copyright; display: grid; grid-template-columns:1fr; ; grid-gap:0rem; padding:.5em; grid-template-areas:"copy" "etail"; } p.copy { grid-area:copy; text-align:left; margin:0; } } /* vat switch ------------------------------------------------------- */ .vatsw{ grid-area:vat; text-align: left; font-size:12px; } [type=checkbox][role=switch] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1.25em; height: 1.25em; margin-top: -0.125em; margin-right: 0.375em; margin-left: 0; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0.375em; margin-inline-end: 0.375em; border-width: 1px; font-size: inherit; vertical-align: middle; cursor: pointer; width: 2.25em; height: 1.25em; border-radius: 1.25em; line-height: 1.25em; } [type=checkbox][role=switch] { --background-color: var(--featured-alt-color); --border-color: var(--featured-alt-color); --border-width:2px; width: 2.25em; height: 1.25em; border: var(--border-width) solid var(--border-color); border-radius: 1.25em; background-color: var(--background-color); line-height: 1.25em; margin:0 .5em; } [type=checkbox][role=switch]:focus {} [type=checkbox][role=switch]:checked { --background-color: var(--red); --border-color: var(--red); } [type=checkbox][role=switch]:before { display: block; width: calc(1.25em - (var(--border-width) * 2)); height: 100%; border-radius: 50%; background-color: var(--white); content: ""; transition: margin 0.1s ease-in-out; } [type=checkbox][role=switch]:checked:before { background-color: var(--white); } [type=checkbox][role=switch]:checked { background-image: none; } [type=checkbox][role=switch]:checked::before { margin-left: calc(1.125em - var(--border-width)); -webkit-margin-start: calc(1.125em - var(--border-width)); margin-inline-start: calc(1.125em - var(--border-width)); } /*readmore stuff ------------------------------------------------------- */ .more{ margin:1em 0; } .more.noexpand{ display:none; transition: var(--transition); } .showmorecss, .showlesscss, .showmore, .showless{ display:inline-block; vertical-align:middle; font-family:var(--buttonFont); font-size:.825em; border: none; text-align: center; border-color:inherit; cursor:pointer; color:var(--orange); text-transform:capitalize; transition: var(--transition); } /* Messages ------------------------------------------------------- */ #mess { padding: 1em; margin: 1em 0; } li.info:not(.sa_name) { color: var(--info-color); list-style: none; margin-bottom:1rem; } li.info.req{ color:var(--error-color); font-size:12px; } li.info.acct{ color:var(--error-color); font-size:2em; } li.info.acct a{ margin-left:.5em; text-decoration:underline; } li.info img{ display:inline-block; } li.info:not(.sa_name)::before { font-family: var(--font-awesome); content: '\f05a'; margin-right: var(--half-spacing) } .warn { color: var(--error-color); } .reqmsg { color: var(--error-color); font-size: smaller; } .oos { color: var(--error-color); } /* Sign In - these conflict with new checkout forms, need to revisit /* also DH has broken the structure of this page with the new checkout code! /* hence all the .form, form stuff in the defaults ------------------------------------------------------- */ .page_signin .form, .page_signin form{ margin: auto; max-width:50%; } .page_signin form input{ width:100%; } .page_signin form ul li { list-style:none; } .page_signin .art{ margin: auto; max-width:50%; } .page_signin .form label { display: block; } .page_signin .form input { width: calc(100% - 2em); } .page_signin .form input + img{ display:inline-block; vertical-align:top; } /* Register/update details - need to add classes to all the input fields ------------------------------------------------------- */ .page_register .form { margin: auto; max-width:50%; } .page_register .form label { display: block; } .page_register form input, .page_register form select { width: calc(100% - 2em); background-color:var(--grey); border-color:var(--grey) } .page_register input.submit{ background-color:var(--blue); } .page_register form img{ display:inline-block; vertical-align:top; } /* Forgotten Password ------------------------------------------------------- */ .page_passwordrequest .form#pwrem { width: 50%; margin: auto; } .page_passwordrequest form input, .page_register form select { width: calc(100% - 2em); } .page_passwordrequest form img{ display:inline-block; vertical-align:top; } .page_passwordrequest form h5 { font-family: var(--text-font); font-weight: normal; font-size: .825em; } /* ------------------------------------------------------------------------------------- =Jquery Base Overrides ------------------------------------------------------------------------------------- */ .ui-dialog, .ui-widget.ui-widget-content { z-index: 1002; border: 1px solid var(--border-color); } .ui-widget { font-size: 1em; font-family: var(--text-font) } .ui-widget-header { background: none; border: none; font-family:var(--heading-font); font-weight:var(--heading-font-weight); color: var(--heading-color); font-size: 1em; } .ui-dialog input { width: 100%; } .ui-dialog input#subscribe { width: auto; } .ui-dialog input.submit { margin: var(--spacing) 0; text-align: center; } .ui-widget input[type="text"] .ui-widget input[type="email"], .ui-widget select, .ui-widget textarea, .ui-widget button { padding: 0 var(--spacing); padding: .25em 0.5em; padding: var(--spacing); border: none; outline: 1px var(--border-color) solid; } .validateTips { font-size: .688em; } /* Interaction states ----------------------------------*/ .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid var(--border-color); font-weight: normal; } .ui-icon-background, .ui-state-active .ui-icon-background { border: var(--border-color); } /* the ask for email address popup? */ .ui-dialog.ewisdialog { width: 400px !important; text-align: center; } /* ask a question popup on product pages */ .ui-dialog.techquesdialog {} .techquesdialog label {} /* saartdialog*/ .ui-dialog.saartdialog { width: 80vw !important; max-width: 640px; display: none; } /* ------------------------------------------------------------------------------------- =PopupDialog / Popup Add to Basket / Direct Despatch ------------------------------------------------------------------------------------- */ .hoverbsktadd, #popupdialog { position: fixed; top: 50%; left: 50%; width: calc(var(--site-max-width) / 3); transform: translate(-50%, -50%); padding: var(--spacing); z-index: 2000; z-index: 2000; border: 1px solid var(--border-color); background-color: var(--popout-color); /* display: none; */ text-align: center; -webkit-box-shadow: var(--box-shadow); -moz-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); } @media only screen and (max-width: 768px) { .hoverbsktadd, #popupdialog { width: calc(var(--site-max-width) - 4em); } } .hoverbsktadd .item, #popupdialog .item { display: grid; grid-template-areas:"image" "title" "qty" "price"; ; grid-gap: .5em; margin-bottom: var(--spacing) } .hoverbsktadd .item img, #popupdialog .item img { grid-area:image; align-self: center; margin: 0 auto !important; } .hoverbsktadd h3, #popupdialog h3 { font-size: 1em; /* margin-bottom: 1em; */ } .hoverbsktadd a, #popupdialog a { --border-color: var(--button-border-color); display: inline-block; vertical-align: middle; font-size: 1em; font-weight: var(--button-font-weight); text-align: center; cursor: pointer; font-family: var(--button-font); text-transform: capitalize; background-color: var(--button-color); color: var(--button-text-color); border: 1px solid var(--button-border-color); border-radius: var(--border-radius); outline: none; padding: var(--half-spacing) var(--spacing) } .hoverbsktadd .item a.title, #popupdialog .item .title { grid-area:title; font-family: var(--heading-font); font-weight: var(--heading-font-weight); color: var(--dark-blue); background-color:transparent; border:none; font-size: 1.2em; text-align: center; } .hoverbsktadd .item p.qty, #popupdialog .item p.qty { grid-area:qty; display:none; } .hoverbsktadd .item p.price, #popupdialog .item p.price { grid-area:price; color:var(--text-heading-color); font-size:1.5em; } /* this element needs a class */ .hoverbsktadd a[title="Checkout"], .hoverbsktadd .item+a { font-size: 1.25em; padding: .5rem 2rem; text-align: center; cursor: pointer; font-family: var(--button-font); text-transform: capitalize; background-color: var(--checkout-button); color: var(--white); border: 1px var(--checkout-button) solid; outline: none; display: inline-block; vertical-align: middle; transition: var(--transition); border-radius: var(--border-radius); } .hoverbsktadd a[title="Checkout"]:hover {} #popupdialog .useraccount {} #popupdialog .useraccount input {} #popupdialog .useraccount a {} /* cookie popup ------------------------------------------------------- */ #pbf .cookie { position: fixed; bottom: 0%; left: 0%; width: 100%; z-index: 1000; background: #0d0d0d; text-align: center } #pbf .cookie p { /* width: 1200px; */ margin: 0 auto; float: none; color: #fff; /* font-size: .75em; */ padding: .5em 0; } #pbf .cookie p a { float: none; color: #fff; text-decoration: underline; padding: 0 .25em; } #pbf .cookie img { float: none; display: inline-block; vertical-align: middle; margin-left: 10px } #pbf .cookie img:hover { cursor: pointer } /* popout stuff? - used for terms and conditions in checkout process not sure where else it may be used ... */ #pp { width: 100%; margin: auto; background-color: var(--main-panel-color); /*used to ensure left panel displays correctly, unsure why though... */ display: flex; justify-content: flex-start; min-height: 85vh; } #pp .bc { margin: 0 auto; position: relative; /*padding should be put in media queries */ width: var(--site-max-width); background-color: var(--main-panel-color); } #pp .artp ul { list-style-type: disc; padding-inline-start: 2em; margin-block-start: 1em; margin-block-end: 1em; font-size:1.2em; } #pp .artp ul ul, #pp .artp ul ul ul { margin-block-start: 0em; margin-block-end: 0em; } #pp .artp ul li {} #pp .artp ul.nobullets { list-style-type: none; margin: .5em 0; } #pp .artp ol { font-size:1.2em; list-style-type: decimal; padding-inline-start: 2em; margin-block-start: 1em; margin-block-end: 1em; } #pp .artp ol li{ } #pp .artp ol ol, #pp .artp ol ol ol { margin-block-start: 0em; margin-block-end: 0em; } #pp .artp a { font-weight: 500; color:var(--featured-color); text-decoration:underline; } #pp .artp a:hover { text-decoration: underline; text-decoration-color: var(--featured-alt-color); } /* scroll to top */ .scrolltotopicon { position:fixed; top:calc(50% - 6em); right:2em; background-color:var(--blue); padding:1.5em 1.5em; border-radius:50%; cursor:pointer; z-index:10001; opacity:.9; } .scrolltotopicon p{ margin:0; } .scrolltotopicon img{ width:2em; } .scrolltotopicon.hidden{ display:none; }