/* ========================================================================= THEME CSS ========================================================================= */ /** * CONTENTS * * COLOURS * * GENERIC * Normalize.css * Reset * Shared * * ELEMENTS * Page * Links * Forms * SVG * Placeholder * Paragraphs * Headings * Tables * Selection * * OBJECTS * Accordion * Block * Box * Bullseye * Grid * List-bare * List-inline * Media * Ratio * Wrapper * * COMPONENTS * Banner * Breadcrumb * Buttons * Cards * Card logos * Cart * Category description * Category header * Category products * Contact details * Copyright * Drawer * Filters * Headings * Home page promos * Icons * Login * Loyalty points * Message bar * Multi-currency * Newsletter * Overlay * Page content * Pagination * Primary navigation * Product add to cart * Product attributes * Product back-in-stock * Product code * Product container * Product description * Product image viewer * Product lists * Product options * Product prices * Product reviews * Product section * Product short description * Product stock message * Products * Promos * Review stars * Search form * Site footer * Site header * Site logo * Social plugins * Sortby * Toolbar * Top bar * Webpages * Welcome * * PAGES * Approve review * Contact * Customer review * Customer secure area * Password protect * Reset password * Search results * * OVERRIDES * Exit modal * Filters price widget * Fonts * Product options * Promo stickers * Softcart * Edit Buttons * * UTILITIES * Clearfix * Spacing * Visual * * VENDOR * Flickity * * FEATUREs * Quick View */ /* ========================================================================= $COLOURS ========================================================================= */ /* [ekm:colour] colour_reference='color_primary_buttons'; colour_name='Primary Buttons'; colour_description='This is the background colour of add to cart and checkout buttons. They should stand out more than any other element on the page.'; default_colour='#5cb85c'; [/ekm:colour] [ekm:colour] colour_reference='color_secondary_buttons'; colour_name='Secondary Buttons'; colour_description='This is the background colour of buttons not relating to buying a product. This colour should not stand out more than the Primary Button colour.'; default_colour='#0095d6'; [/ekm:colour] [ekm:colour] colour_reference='color_text_links'; colour_name='Text Links'; colour_description='This is the colour of text users can click to take them to a different page. This colour should stand out from the colour of body text so your users know what text they can click or tap.'; default_colour='#0095d6'; [/ekm:colour] [ekm:colour] colour_reference='color_searchbox'; colour_name='Searchbox'; colour_description='This colour is used to style the searchbox. It is used as a background colour on smaller screens and a border colour on larger screens.'; default_colour='#e40330'; [/ekm:colour] [ekm:colour] colour_reference='color_menu'; colour_name='Category Menu'; colour_description='This is the background colour of the category menu bar. The category menu's white text colour should stand out when compared with this colour.'; default_colour='#e71d45'; [/ekm:colour] [ekm:colour] colour_reference='color_menu_dropdown'; colour_name='Category Menu Dropdown'; colour_description='This is the background colour of the category menu dropdown. The dropdown is shown when a user clicks on a category that has sub-categories.'; default_colour='#e40330'; [/ekm:colour] [ekm:colour] colour_reference='color_prices'; colour_name='Product Prices'; colour_description='This is the colour of product prices; it used in product lists and on product pages. If prices are important for selling your products this colour should stand out.'; default_colour='#e40330'; [/ekm:colour] [ekm:colour] colour_reference='color_review_stars'; colour_name='Product Review Stars'; colour_description='This is the colour of product review stars in product lists and on product pages. Review stars are usually a bright yellow or orange colour.'; default_colour='#f7cf2c'; [/ekm:colour] [ekm:colour] colour_reference='color_footer'; colour_name='Footer Content'; colour_description='This is the background colour of the footer's main content area. It is used to break up the various sections of the footer.'; default_colour='#e8294f'; [/ekm:colour] [ekm:colour] colour_reference='footer_text_colour'; colour_name='Footer Text Colour'; colour_description='This is the colour of the text in the footer's main content area.'; default_colour='#fff'; [/ekm:colour] [ekm:colour] colour_reference='navigation_link_colour'; colour_name='Navigation Link Colour'; colour_description='This is the colour of the links in the navigation.'; default_colour='#fff'; [/ekm:colour] [ekm:colour] colour_reference='color_footer_bottom'; colour_name='Footer Bottom'; colour_description='This is the background colour of the bottom section of the footer which contains the site copyright notices. This colour can either compement the Footer Content colour or contrast with it.'; default_colour='#e40330'; [/ekm:colour] [ekm:colour] colour_reference='color_newsletter'; colour_name='Newsletter'; colour_description='This is the background colour of the Newsletter area. This area is displayed just before the footer and only if you have installed the Email Marketing feature.'; default_colour='#e71d45'; [/ekm:colour] [ekm:colour] colour_reference='add_to_cart_bg'; colour_name='Add to cart Background color'; colour_description='This is the the background colour of the add to cart buttons mainly found in the quickview feature.'; default_colour='#0363CD'; [/ekm:colour] [ekm:colour] colour_reference='add_to_cart_text'; colour_name='Add to cart Background text color'; colour_description='This is the the text colour of the add to cart buttons mainly found in the quickview feature.'; default_colour='#FFFFFF'; [/ekm:colour] [ekm:colour] colour_reference='review-header-footer'; colour_name='Review header and footer colour'; colour_description='This is the colour of the header and footer blocks surrounding the product reviews section'; default_colour='#ECECEC'; [/ekm:colour] [ekm:colour] colour_reference='success_colour_text'; colour_name='Success Colour Text'; colour_description='This is the default colour text in areas displaying a positive message, such as a product being in stock'; default_colour='#013800'; [/ekm:colour] [ekm:colour] colour_reference='success_colour_background'; colour_name='Success Colour Background'; colour_description='This is the default background colour for areas displaying a positive message, such as a product being in stock.'; default_colour='#bffdbf'; [/ekm:colour] [ekm:colour] colour_reference='caution_colour_text'; colour_name='Caution Colour Text'; colour_description='This is the default colour text in areas displaying something to be careful or aware of, such as a product running low on stock.'; default_colour='#6d4100'; [/ekm:colour] [ekm:colour] colour_reference='caution_colour_background'; colour_name='Caution Colour Background'; colour_description='This is the default background colour for areas displaying something to be careful or aware of, such as a product running low on stock.'; default_colour='#fddebf'; [/ekm:colour] [ekm:colour] colour_reference='warning_colour_text'; colour_name='Warning Colour Text'; colour_description='This is the default colour text in areas displaying something that might disrupt what your customer wants to do, such as a product being out of stock.'; default_colour='#6d0a00'; [/ekm:colour] [ekm:colour] colour_reference='warning_colour_background'; colour_name='Warning Colour Background'; colour_description='This is the default background colour for areas displaying something might disrupt what your customer wants to do, such as a product being out of stock.'; default_colour='#fdbfbf'; [/ekm:colour] [ekm:colour] colour_reference='inverse_colour_text'; colour_name='Inverse Colour Text'; colour_description='This is the the text colour that should be used in an area where the background is inverted to the default colour. Where the main text colour would be black, this should be white and vice-verse'; default_colour='#ffffff'; [/ekm:colour] [ekm:colour] colour_reference='inverse_colour_background'; colour_name='Inverse Colour Background'; colour_description='This is the the background colour that should be used in an area where the text is inverted to the default colour. Where the main background colour would be white, this should be black and vice-verse'; default_colour='#000000'; [/ekm:colour] */ /* ========================================================================= $GENERIC ========================================================================= */ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ :root { --ekm-success-colour-text: [ekm:colour]colour_reference='success_colour_text';[/ekm:colour]; --ekm-success-colour-background: [ekm:colour]colour_reference='success_colour_background';[/ekm:colour]; --ekm-caution-colour-text: [ekm:colour]colour_reference='caution_colour_text';[/ekm:colour]; --ekm-caution-colour-background: [ekm:colour]colour_reference='caution_colour_background';[/ekm:colour]; --ekm-warning-colour-text: [ekm:colour]colour_reference='warning_colour_text';[/ekm:colour]; --ekm-warning-colour-background: [ekm:colour]colour_reference='warning_colour_background';[/ekm:colour]; --ekm-inverse-colour-text: [ekm:colour]colour_reference='inverse_colour_text';[/ekm:colour]; --ekm-inverse-colour-background: [ekm:colour]colour_reference='inverse_colour_background';[/ekm:colour]; --ekm-atc-background-colour:[ekm:colour]colour_reference='add_to_cart_bg';[/ekm:colour]; --ekm-atc-text-colour:[ekm:colour]colour_reference='add_to_cart_text';[/ekm:colour]; --ekm-review-blocks: [ekm:colour]colour_reference='review-header-footer';[/ekm:colour]; } html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* ========================================================================== #RESET ========================================================================== */ /** * More sensible default box-sizing: * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /** * Disable auto-enlargement of small text in mobile Safari. */ body, input, textarea, button, select { -webkit-text-size-adjust: 100%; } /** * Remove margins and paddings from all the things. */ body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, hr, fieldset, legend { margin: 0; padding: 0; } a:focus { color: inherit; } /** * 1. Offset alt text. * 2. Ensure responsive images and override system heights. * 3. Remove whitespace caused by inline images. */ img { font-style: italic; /* [1] */ height: auto !important; /* [2] */ max-width: 100%; /* [2] */ vertical-align: middle; /* [3] */ } /** * Remove trailing margins from nested lists. */ li > ol, li > ul { margin-bottom: 0; } /** * Form element resets. */ form { margin: 0; } textarea, select { font-size: 1rem; } @media screen and (min-width: 46.875em) { textarea, select { font-size: inherit; } } button, input[type="submit"], label[for] { cursor: pointer; } optgroup { font-weight: 400; } option { color: #333; background-color: #fff; } [tabindex='-1']:focus { outline: none; } /** * Remove default table spacing. */ table { border-collapse: collapse; border-spacing: 0; } /** * Reset iOS touchstart higlighting. */ input, textarea, button, select, a { -webkit-tap-highlight-color: transparent; } /** * Enable no-delay taps on supporting browsers. */ a, button, [role="button"], input, label, select, textarea { touch-action: manipulation; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { font-size: 16px; } /* mobile zoom input fix */ /* ========================================================================== #SHARED ========================================================================== */ /** * Shared declarations for certain elements. */ /** * Always declare margins in the same direction: * csswizardry.com/2012/06/single-direction-margin-declarations */ address, h1, h2, h3, h4, h5, h6, blockquote, p, pre, dl, ol, ul, figure, hr, table, fieldset { margin-bottom: 1.71428571rem; } /** * Consistent indentation for lists. */ dd, ol, ul { margin-left: 1.71428571rem; } /* ========================================================================= $ELEMENTS ========================================================================= */ /* ========================================================================= #PAGE ========================================================================= */ html { font-size: 0.875em; height: 100%; line-height: 1.71428571; overflow-y: scroll; } body { background-color: #fff; color: #333; display: flex; flex-direction: column; font-family: "Poppins", sans-serif; font-weight: 400; height: 100%; margin-left: auto; margin-right: auto; max-width: 1920px; min-height: 100%; } /* ========================================================================= #LINKS ========================================================================= */ a { color: [ekm:colour] colour_reference='color_text_links'; default_colour='#0095d6'; [/ekm:colour]; text-decoration: underline; transition: opacity 0.25s ease-in-out; /** * Text link styles for CMS content */ } a:hover { opacity: 0.75; } /* ========================================================================= #FORMS ========================================================================= */ textarea, input, button, select { color: inherit; font-family: inherit; } /** * Inputs, textareas and selects. */ input, textarea, select { background-color: #fff; border: 2px solid #f3f3f3; border-radius: 10px; box-shadow: none; line-height: 2; max-width: 100%; padding: 0.71428571rem; transition: all 0.25s ease-in-out; } input:focus, textarea:focus, select:focus { color: #333; outline: 0; border-color: [ekm:colour] colour_reference='color_secondary_buttons'; default_colour='#0095d6'; [/ekm:colour]; } textarea { border-radius: 10px; min-height: 100px; } .c-product-description.s-cms { text-align: initial; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 1.14285714rem center; background-color: #fff; cursor: pointer; padding-right: 1.71428571rem; text-indent: .01px; } /** * Labels */ label { display: block; font-weight: 700; margin-bottom: 0.28571429rem; } /* ========================================================================= #SVG ========================================================================= */ svg g, svg polygon, svg circle { fill: inherit; } /* ========================================================================= #PLACEHOLDER ========================================================================= */ ::-webkit-input-placeholder { color: #aaa; } :-ms-input-placeholder { color: #aaa; } ::-ms-input-placeholder { color: #aaa; } ::placeholder { color: #aaa; } /* ========================================================================= #PARAGRAPHS ========================================================================= */ p:last-child { margin-bottom: 0; } /* ========================================================================= #HEADINGS ========================================================================= */ h1 { font-family: "Baloo Thambi", cursive; font-size: 1.71428571rem; line-height: 1; font-weight: 400; } h2 { font-family: "Baloo Thambi", cursive; font-size: 1.57142857rem; line-height: 1.09090909; font-weight: 400; } h3 { font-family: "Baloo Thambi", cursive; font-size: 1.28571429rem; line-height: 1.33333333; font-weight: 400; } h4 { font-family: "Baloo Thambi", cursive; font-size: 1.14285714rem; line-height: 1.5; font-weight: 400; } h5 { font-family: "Baloo Thambi", cursive; font-size: 1rem; line-height: 1.71428571; font-weight: 400; } h6 { font-family: "Baloo Thambi", cursive; font-size: 0.85714286rem; line-height: 2; font-weight: 400; } /* ========================================================================= #SELECTION ========================================================================= */ ::-moz-selection { background: [ekm:colour] colour_reference='color_secondary_buttons'; default_colour='#0095d6'; [/ekm:colour]; color: #fff; } ::selection { background: [ekm:colour] colour_reference='color_secondary_buttons'; default_colour='#0095d6'; [/ekm:colour]; color: #fff; } /* ========================================================================= #TABLES ========================================================================= */ table { width: 100%; } /* ========================================================================= $OBJECTS ========================================================================= */ /* ========================================================================= #ACCORDION ========================================================================= */ .o-accordion { border-bottom: 1px solid #f3f3f3; } .o-accordion__header, .o-accordion__panel { border-top: 1px solid #f3f3f3; } .o-accordion__button { background: none; border: 0; display: block; padding: 1.5rem; position: relative; text-align: left; width: 100%; } .o-accordion__button:after { content: ""; border: solid black; border-width: 0 2px 2px 0; height: .5rem; pointer-events: none; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%) rotate(45deg); width: .5rem; } .o-accordion__button.is-active:after { transform: translateY(-50%) rotate(-135deg); } .o-accordion__panel { padding: 1.5rem; } .o-accordion__panel.is-hidden { display: none; } /* ========================================================================= #BLOCK ========================================================================= */ /** * Stack images above text; handy for product or category grids etc. */ .o-block { display: block; text-align: center; } .o-block__image { margin-bottom: 1.71428571rem; /* Size variants. ======================================================================== */ } .o-block--flush .o-block__image { margin-bottom: 0; } .o-block--tiny .o-block__image { margin-bottom: 0.57142857rem; } .o-block--small .o-block__image { margin-bottom: 1.14285714rem; } .o-block--large .o-block__image { margin-bottom: 3.42857143rem; } .o-block--huge .o-block__image { margin-bottom: 6.85714286rem; } .o-block__body { display: block; } /* Alignment variants. ============================================================================ */ .o-block--right { text-align: right; } .o-block--left { text-align: left; } /* ========================================================================= #BOX ========================================================================= */ /** * Box off content. */ .o-box { display: block; padding: 1.71428571rem; } .o-box > :last-child { margin-bottom: 0; } /* Size variants. ============================================================================ */ .o-box--tiny { padding: 0.57142857rem; } .o-box--small { padding: 1.14285714rem; } .o-box--large { padding: 3.42857143rem; } .o-box--huge { padding: 6.85714286rem; } /* ========================================================================= #BULLSEYE ========================================================================= */ /** * Center content within its container. * * 1. Center content horizontally. * 2. Make sure the element always takes up all the space it can. * 3. Center content vertically. */ .o-bullseye { align-items: center; /* [1] */ display: flex; height: 100%; /* [2] */ justify-content: center; /* [3] */ width: 100%; /* [2] */ } /* Stack content vertically. ============================================================================ */ .o-bullseye--stacked { flex-direction: column; } /* ========================================================================= #GRID ========================================================================= */ .o-grid { align-items: flex-start; display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; margin-left: -1.71428571rem; } .o-grid__item { box-sizing: border-box; padding-left: 1.71428571rem; width: 100%; } /* Gutter variants. ============================================================================ */ .o-grid--flush { margin-left: 0; } .o-grid--flush > .o-grid__item { padding-left: 0; } .o-grid--tiny { margin-left: -0.57142857rem; } .o-grid--tiny > .o-grid__item { padding-left: 0.57142857rem; } .o-grid--small { margin-left: -1.14285714rem; } .o-grid--small > .o-grid__item { padding-left: 1.14285714rem; } .o-grid--large { margin-left: -3.42857143rem; } .o-grid--large > .o-grid__item { padding-left: 3.42857143rem; } .o-grid--huge { margin-left: -6.85714286rem; } .o-grid--huge > .o-grid__item { padding-left: 6.85714286rem; } /* Responsive gutter variants. ============================================================================ */ @media screen and (min-width: 36.25em) { .o-grid--tiny\@small { margin-left: -0.57142857rem; } .o-grid--tiny\@small > .o-grid__item { padding-left: 0.57142857rem; } .o-grid--small\@small { margin-left: -1.14285714rem; } .o-grid--small\@small > .o-grid__item { padding-left: 1.14285714rem; } .o-grid--medium\@small { margin-left: -1.71428571rem; } .o-grid--medium\@small > .o-grid__item { padding-left: 1.71428571rem; } .o-grid--large\@small { margin-left: -3.42857143rem; } .o-grid--large\@small > .o-grid__item { padding-left: 3.42857143rem; } .o-grid--huge\@small { margin-left: -6.85714286rem; } .o-grid--huge\@small > .o-grid__item { padding-left: 6.85714286rem; } } @media screen and (min-width: 46.875em) { .o-grid--tiny\@small { margin-left: -0.57142857rem; } .o-grid--tiny\@small > .o-grid__item { padding-left: 0.57142857rem; } .o-grid--small\@medium { margin-left: -1.14285714rem; } .o-grid--small\@medium > .o-grid__item { padding-left: 1.14285714rem; } .o-grid--medium\@medium { margin-left: -1.71428571rem; } .o-grid--medium\@medium > .o-grid__item { padding-left: 1.71428571rem; } .o-grid--large\@medium { margin-left: -3.42857143rem; } .o-grid--large\@medium > .o-grid__item { padding-left: 3.42857143rem; } .o-grid--huge\@medium { margin-left: -6.85714286rem; } .o-grid--huge\@medium > .o-grid__item { padding-left: 6.85714286rem; } } @media screen and (min-width: 61.875em) { .o-grid--tiny\@large { margin-left: -0.57142857rem; } .o-grid--tiny\@large > .o-grid__item { padding-left: 0.57142857rem; } .o-grid--small\@large { margin-left: -1.14285714rem; } .o-grid--small\@large > .o-grid__item { padding-left: 1.14285714rem; } .o-grid--medium\@large { margin-left: -1.71428571rem; } .o-grid--medium\@large > .o-grid__item { padding-left: 1.71428571rem; } .o-grid--large\@large { margin-left: -3.42857143rem; } .o-grid--large\@large > .o-grid__item { padding-left: 3.42857143rem; } .o-grid--huge\@large { margin-left: -6.85714286rem; } .o-grid--huge\@large > .o-grid__item { padding-left: 6.85714286rem; } } @media screen and (min-width: 87.5em) { .o-grid--tiny\@huge { margin-left: -0.57142857rem; } .o-grid--tiny\@huge > .o-grid__item { padding-left: 0.57142857rem; } .o-grid--small\@huge { margin-left: -1.14285714rem; } .o-grid--small\@huge > .o-grid__item { padding-left: 1.14285714rem; } .o-grid--medium\@huge { margin-left: -1.71428571rem; } .o-grid--medium\@huge > .o-grid__item { padding-left: 1.71428571rem; } .o-grid--large\@huge { margin-left: -3.42857143rem; } .o-grid--large\@huge > .o-grid__item { padding-left: 3.42857143rem; } .o-grid--huge\@huge { margin-left: -6.85714286rem; } .o-grid--huge\@huge > .o-grid__item { padding-left: 6.85714286rem; } } /* Vertical alignment modifiers. ============================================================================ */ .o-grid--middle { align-items: center; } .o-grid--bottom { align-items: baseline; } /* Horizontal alignment modifiers. ============================================================================ */ .o-grid--center { justify-content: center; } .o-grid--right { justify-content: flex-end; } .o-grid--between { justify-content: space-between; } .o-grid--around { justify-content: space-around; } /* Inline grid item modifiers. ============================================================================ */ .o-grid--inline { display: inline-flex; } .o-grid--inline > .o-grid__item { width: auto; } /* Equal width item modifiers. ============================================================================ */ .o-grid--equal > .o-grid__item { flex: 1; } /* Make an item stretch to take up all available space. ============================================================================ */ .o-grid--stretch > .o-grid__item--stretch { flex: 1; } /* Negate grid items' bottom spacing. ============================================================================ */ /** * 1. The negative top margin on the parent grid element is equal to the top * padding of the child grid items. */ .o-grid--vertical { margin-top: -1.71428571rem; /* [1] */ /* Use vertical grids with our gutter variants. ======================================================================== */ } .o-grid--vertical > .o-grid__item { padding-top: 1.71428571rem; /* [1] */ } .o-grid--vertical.o-grid--tiny { margin-top: -0.57142857rem; } .o-grid--vertical.o-grid--tiny > .o-grid__item { padding-top: 0.57142857rem; } .o-grid--vertical.o-grid--small { margin-top: -1.14285714rem; } .o-grid--vertical.o-grid--small > .o-grid__item { padding-top: 1.14285714rem; } .o-grid--vertical.o-grid--large { margin-top: -3.42857143rem; } .o-grid--vertical.o-grid--large > .o-grid__item { padding-top: 3.42857143rem; } .o-grid--vertical.o-grid--huge { margin-top: -6.85714286rem; } .o-grid--vertical.o-grid--huge > .o-grid__item { padding-top: 6.85714286rem; } /* ========================================================================= #LIST-BARE ========================================================================= */ /** * Strip bullet points and indentation from lists. */ .o-list-bare { list-style: none; margin-left: 0; } .o-list-bare__item { margin-left: 0; } /* ========================================================================= #LIST-INLINE ========================================================================= */ /** * Strip bullet points and indentation from lists. */ .o-list-inline { display: inline-flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .o-list-inline > li, .o-list-inline__item { margin-left: 0.85714286rem; width: auto; } .o-list-inline > li:first-child, .o-list-inline__item:first-child { margin-left: 0; } /* ========================================================================= #MEDIA ========================================================================= */ .o-media { display: flex; align-items: flex-start; } .o-media__img { margin-right: 1.71428571rem; } .o-media__body { flex: 1; } .o-media__body, .o-media__body > :last-child { margin-bottom: 0; } /* Alignment variants. ============================================================================ */ .o-media--middle { align-items: center; } /* Size variants. ============================================================================ */ .o-media--small > .o-media__img { margin-right: 1.14285714rem; } .o-media--small.o-media--reverse > .o-media__img { margin-left: 1.14285714rem; margin-right: 0; } .o-media--large > .o-media__img { margin-right: 3.42857143rem; } .o-media--large.o-media--reverse > .o-media__img { margin-left: 3.42857143rem; margin-right: 0; } /* Reverse direction. ============================================================================ */ .o-media--reverse > .o-media__img { margin-right: 0; margin-left: 1.71428571rem; order: 1; } /* Gutterless media object. ============================================================================ */ .o-media--flush > .o-media__img { margin-right: 0; margin-left: 0; } /* ========================================================================= #RATIO ========================================================================= */ /** * Keep content (e.g. images, videos) in a pre-defined aspect ratio. * * 1. The default raio is 1:1 (i.e. a square). */ .o-ratio { position: relative; display: block; } .o-ratio:before { content: ""; display: block; padding-bottom: 100%; /* [1] */ width: 100%; } .o-ratio__content { position: absolute; top: 50%; left: 50%; max-height: 100%; transform: translate(-50%, -50%); width: auto; } /* Ratio variants. ========================================================================= */ .o-ratio--2\:1:before { padding-bottom: 200%; } .o-ratio--4\:3:before { padding-bottom: 133.33333333%; } /* ========================================================================= #WRAPPER ========================================================================= */ /** * Constrain page content. */ .o-wrapper { margin-right: auto; margin-left: auto; max-width: 1200px; padding-right: 0.85714286rem; padding-left: 0.85714286rem; } /* Size variants. ============================================================================ */ .o-wrapper--tiny { padding-right: 0.57142857rem; padding-left: 0.57142857rem; } .o-wrapper--small { padding-right: 1.14285714rem; padding-left: 1.14285714rem; } .o-wrapper--large { padding-right: 3.42857143rem; padding-left: 3.42857143rem; } .o-wrapper--huge { padding-right: 6.85714286rem; padding-left: 6.85714286rem; } .o-wrapper--flush { padding-right: 0; padding-left: 0; } /* Width variant. ============================================================================ */ .o-wrapper--full { max-width: none; } .o-wrapper--measure { max-width: 40.9285714em; } /* ========================================================================= $COMPONENTS ========================================================================= */ /* ========================================================================= #BANNER ========================================================================= */ /* ========================================================================= #BREADCRUMB ========================================================================= */ /** * 1. Make the current page link un-clickable. */ .c-breadcrumb { color: #a8a9a8; margin-bottom: 3.42857143rem; font-size: 0.85714286rem; line-height: 1.5; } .c-breadcrumb__crumb { font-weight: 700; text-decoration: none; } .c-breadcrumb__crumb.current { color: #a8a9a8; font-weight: normal; pointer-events: none; /* [1] */ } /* ========================================================================= #BUTTONS ========================================================================= */ .c-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 2px solid transparent; border-radius: 1000px; display: inline-block; font-size: 1rem; line-height: 1.71428571; font-weight: 700; letter-spacing: normal; padding: 0.42857143rem 1rem; text-align: center; text-decoration: none; text-transform: none; transition: all 0.25s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; } .c-button, .c-button:hover, .c-button:focus { color: #fff; } .c-button:hover { text-decoration: none; } .c-button.c-button--ghost { background-color: transparent; } /* Type modifiers. ============================================================================ */ .c-button--primary { background-color: [ekm:colour] colour_reference='color_primary_buttons'; default_colour='#5cb85c'; [/ekm:colour]; border-color: [ekm:colour] colour_reference='color_primary_buttons'; default_colour='#5cb85c'; [/ekm:colour]; font-size: 1.14285714rem; line-height: 1.5; padding-top: 0.71428571rem; padding-bottom: 0.71428571rem; } .c-button--primary.c-button--ghost, .c-button--primary.c-button--ghost:focus { color: [ekm:colour] colour_reference='color_primary_buttons'; default_colour='#5cb85c'; [/ekm:colour]; } .c-button--primary.c-button--ghost:hover { color: #fff; background-color: [ekm:colour] colour_reference='color_primary_buttons'; default_colour='#5cb85c'; [/ekm:colour]; } .c-button--secondary { background-color: [ekm:colour] colour_reference='color_secondary_buttons'; default_colour='#0095d6'; [/ekm:colour]; border-color: [ekm:colour] colour_reference='color_secondary_buttons'; default_colour='#0095d6'; [/ekm:colour]; } .c-button--secondary.c-button--ghost, .c-button--secondary.c-button--ghost:focus { color: [ekm:colour] colour_reference='color_secondary_buttons'; default_colour='#0095d6'; [/ekm:colour]; } .c-button--secondary.c-button--ghost:hover { color: #fff; background-color: [ekm:colour] colour_reference='color_secondary_buttons'; default_colour='#0095d6'; [/ekm:colour]; } /* Size modifiers. ============================================================================ */ .c-button--full { display: block; width: 100%; } /* ========================================================================= #CARD ========================================================================= */ .c-card { background-color: #fff; border-radius: 10px; box-shadow: 0 8px 14px 0 #d8dde6; padding: 1.14285714rem 0.85714286rem; } /* Card variants. ============================================================================ */ .c-card--flush { padding: 0; } /* ========================================================================= #CARD-LOGOS ========================================================================= */ .c-card-logos .o-list-inline { justify-content: center; margin-top: -1.14285714rem; } @media screen and (min-width: 61.875em) { .c-card-logos .o-list-inline { justify-content: flex-start; } } .c-card-logos .o-list-inline__item { margin-top: 1.14285714rem; } /* ========================================================================= #CART ========================================================================= */ .c-cart { margin-right: 0.85714286rem; text-decoration: none; } .c-cart:active, .c-cart:visited { color: [ekm:colour] colour_reference='color_text_links'; default_colour='#0095d6'; [/ekm:colour]; } @media screen and (min-width: 46.875em) { .c-cart { margin-right: 0; } } .c-cart__number { font-weight: 500; /** * 1. Hide the cart number if the cart is empty. */ } @media screen and (min-width: 46.875em) { .c-cart__number { font-size: 1.14285714rem; line-height: 1.5; } } .c-cart__number.is-empty { display: none; /* [1] */ } .ekmpscart-estimate-delivery .ekmpscart-estimate-delivery-content .ekmpscart-estimate-delivery-row input[type=text], .ekmpscart-estimate-delivery .ekmpscart-estimate-delivery-content .ekmpscart-estimate-delivery-row select{ min-width: 200px; } /* ========================================================================= #CATEGORY-DESCRIPTION ========================================================================= */ .c-category-description { margin-bottom: 0; margin-top: 1.71428571rem; text-align: center; } /* ========================================================================= #CATEGORY-HEADER ========================================================================= */ .c-category-header { margin-top: 2.85714286rem; margin-bottom: 2.85714286rem; } /* ========================================================================= #CATEGORY-PRODUCTS ========================================================================= */ .c-product-list--categories + .c-category-products { margin-top: 2.85714286rem; } .c-category-products__meta { color: #a8a9a8; font-size: 0.85714286rem; line-height: 1.5; margin-bottom: 0.85714286rem; text-align: center; } @media screen and (min-width: 61.875em) { .c-category-products__meta { margin-bottom: 1.71428571rem; } } .ekm-product-image-badge-wrapper img{ z-index: 3; } /* ========================================================================= #CONTACT-DETAILS ========================================================================= */ .c-contact-details a { font-weight: 500; text-decoration: underline; } .c-contact-details__detail { margin-bottom: 0.57142857rem; } /* ========================================================================= #CONTACT-DETAILS ========================================================================= */ .c-contact-details a { font-weight: 500; text-decoration: underline; } .c-contact-details__detail { margin-bottom: 0.57142857rem; } /* ========================================================================= #COPYRIGHT ========================================================================= */ .c-copyright a { text-decoration: none; } /* ========================================================================= #DRAWER ========================================================================= */ .c-drawer { background-color: #fff; height: 100vh; position: fixed; top: 0; left: 0; overflow-y: auto; transition: transform 0.195s cubic-bezier(0.7, 0, 0.3, 1); transform: translateX(-100%); width: calc(100% - 4rem); will-change: transform; z-index: 10001; } .c-drawer.is-showing { transition: transform 0.225s cubic-bezier(0.7, 0, 0.3, 1); transform: translateX(0); } @media screen and (min-width: 46.875em) { .c-drawer { width: 376px; } } /* ========================================================================= #FILTERS ========================================================================= */ .c-filters__filter-heading { margin-bottom: 0.57142857rem; } .c-filters__item { margin-top: 1.71428571rem; } .c-filter { align-items: center; display: flex; font-size: 0.85714286rem; line-height: 1.5; } .ekm-filter-count { color: #a8a9a8; } /** * The custom checkboxes have a set width and height of `16px` which seems to * work well with the most common sizes of body text. * * Danger! Changing this could break out custom checkbox ticks which are made * using `box-shadow`. */ .c-filter__checkbox { opacity: 0; position: absolute; } .c-filter__checkbox:checked + .c-filter__label:after { content: ""; position: absolute; left: 3px; top: 7px; background: #333; width: 2px; height: 2px; box-shadow: 2px 0 0 #333, 4px 0 0 #333, 4px -2px 0 #333, 4px -4px 0 #333, 4px -6px 0 #333, 4px -8px 0 #333; transform: rotate(45deg); } .c-filter__label { color: [ekm:colour] colour_reference='color_text_links'; default_colour='#0095d6'; [/ekm:colour]; margin-right: 0.28571429rem; position: relative; } .c-filter__label:hover { opacity: 0.75; } .c-filter__label:before { border: 2px solid #f3f3f3; content: ""; display: inline-block; height: 1.14285714rem; margin-right: 0.57142857rem; vertical-align: text-top; width: 1.14285714rem; } /* ========================================================================= #HEADINGS ========================================================================= */ /** * Purpose-driven cosmetic styles for our h1-h6 elements. */ .c-heading-page { font-family: "Baloo Thambi", cursive; font-size: 1.71428571rem; line-height: 1; font-weight: 400; text-align: center; } .c-heading-section { font-family: "Baloo Thambi", cursive; font-size: 1.57142857rem; line-height: 1.09090909; font-weight: 400; } .c-heading-title { font-family: "Baloo Thambi", cursive; font-size: 1.28571429rem; line-height: 1.33333333; font-weight: 400; } .c-heading-footer { font-family: "Baloo Thambi", cursive; font-size: 1.14285714rem; line-height: 1.5; font-weight: 400; margin-bottom: 1.14285714rem; } /* Heading variant. ============================================================================ */ .c-heading-page--category { margin-bottom: 0; } /* ========================================================================= #HOME-PROMOS ========================================================================= */ .c-home-promos .o-grid { justify-content: center; } .c-home-promos .o-grid__item:first-child { margin-top: 3.42857143rem; margin-bottom: 3.42857143rem; } .c-home-promos .o-grid__item:first-child + .o-grid__item, .c-home-promos .o-grid__item:first-child + .o-grid__item + .o-grid__item { margin-top: 1.71428571rem; margin-bottom: 3.42857143rem; } @media screen and (min-width: 46.875em) { .c-home-promos .o-grid__item:first-child + .o-grid__item, .c-home-promos .o-grid__item:first-child + .o-grid__item + .o-grid__item { margin-top: 3.42857143rem; margin-bottom: 3.42857143rem; } } @media screen and (min-width: 46.875em) { .c-home-promos--quarters .o-grid__item { width: 25%; } } @media screen and (min-width: 46.875em) { .c-home-promos--thirds .o-grid__item { width: 33.333333%; } } @media screen and (min-width: 46.875em) { .c-home-promos--halves .o-grid__item { width: 50%; } } /* ========================================================================= #ICONS ========================================================================= */ /** * Reset