/* Theme Name: Artisan Stucco 2023 Theme URI: http://www.webinzicht.nl/ Description: The theme for the Artisan Stucco webshop and website (2023). To function correctly this Client Child Template needs the parent theme 'WP WIZ Theme 22' to be installed. Please do not remove this theme or its parent theme. Updates are not necessary for the client child template. Author: Web Inzicht - (digital) design & communication Author URI: https://webinzicht.nl Template: wpwebinzicht22 Version: 1.0.009977 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: custom template, responsive-layout, accessibility-ready Text Domain: wpwebinzicht22-child */ /* -----------------------------------------------------*/ /* --- LOCAL FONTS ------------------------- */ /* -----------------------------------------------------*/ /* font-family: 'Lora-VariableFont_wght'; font-family: 'Lora-Italic-VariableFont_wght'; font-family: 'Roboto-Thin'; */ @font-face { font-family: 'Lora-VariableFont_wght'; src: url('assets/fonts/Lora-VariableFont_wght.woff2') format('woff2'), url('assets/fonts/Lora-VariableFont_wght.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Lora-Italic-VariableFont_wght'; src: url('assets/fonts/Lora-Italic-VariableFont_wght.woff2') format('woff2'), url('assets/fonts/Lora-Italic-VariableFont_wght.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Roboto-Thin'; font-weight: 100; src: url('assets/fonts/Roboto-Thin.woff2') format('woff2'), url('assets/fonts/Roboto-Thin.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Roboto-Light'; font-weight: 300; src: url('assets/fonts/Roboto-Light.woff2') format('woff2'), url('assets/fonts/Roboto-Light.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Roboto-Regular'; font-weight: 400; src: url('assets/fonts/Roboto-Regular.woff2') format('woff2'), url('assets/fonts/Roboto-Regular.woff') format('woff'); font-display: swap; } /* @font-face { font-family: 'Roboto-Black'; font-weight: 900; src: url('assets/fonts/Roboto-Black.woff2') format('woff2'), url('assets/fonts/Roboto-Black.woff') format('woff'); font-display: swap; } */ /* TODO Convert Roboto Light & Robot Regular !! */ /* -------------------------------------------------------------------*/ /* -- Variables ----------------------------------------------------- */ /* -------------------------------------------------------------------*/ :root { /* -- FONT TYPE -- */ --global-font-primary: 'Lora-VariableFont_wght', serif; --global-font-primary-italic: 'Lora-Italic-VariableFont_wght', serif; --global-font-secondary-thin: 'Roboto-Thin', sans-serif; --global-font-secondary-light: 'Roboto-Light', sans-serif; --global-font-secondary-regular: 'Roboto-regular', sans-serif; --global-font-headthin: var(--global-font-secondary-thin); --global-font-headlight: var(--global-font-secondary-light); --global-font-headregular: var(--global-font-secondary-regular); /* CORRECTION FOR THE MOTHER TEMPLATE (using wrong var!) */ --global--font-primary: var(--global-font-primary); /* FONT SIZE */ --global-font-basesize: 16px; /* sets the base size (HTML) */ /* TUNING FONT SIZE */ /* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */ /* based on max 1200 width(maxwidth-margins) to 320(iphone SE) (minsize 1 rem, maxsize from design) */ --global-font-regular: clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem); /* basic all (BODY) */ --global-font-maintext: clamp(1rem, 0.8727rem + 0.6364vw, 1.35rem); /* main text on page (a bit bigger) */ --global-font-small: clamp(0.875rem, 0.8295rem + 0.2273vw, 1rem); /* min 14px */ --global-font-xsmall: clamp(0.75rem, 0.7045rem + 0.2273vw, 0.875rem); /* min 12px */ --global-font-xxsmall: clamp(0.625rem, 0.5795rem + 0.2273vw, 0.75rem); /* min 10px */ /* -- NEW FONT SIZE (Lora) -- */ --global-font-regular: 1rem; --global-font-maintext: 1.125rem; /* headers */ --global-font-h1-bgimg: clamp(1.35rem, 0.0890rem + 6.3051vw, 6rem); /* !! based on 1500 */ --global-font-h3-bgimg: calc(var(--global-font-h1-bgimg) * 0.45); /* --global-font-h1: clamp(1.2rem, 0.2727rem + 4.6364vw, 3.75rem); max 60px */ --global-font-h1: clamp(1.35rem, 1.1059rem + 1.2203vw, 2.25rem); /* max 30px */ --global-font-h2: clamp(1.2rem, 0.9545rem + 1.2273vw, 1.875rem); /* max 30px */ --global-font-h3: clamp(1.2rem, 0.9545rem + 1.2273vw, 1.875rem); /* max 30px */ /* top (mega) menu */ --global-font-headermnu-big: clamp(1.2rem, 0.7179rem + 2.4107vw, 1.875rem); /* max 30px */ --global-font-headermnu-normal: clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem); /* old basic all */ /* Woo things */ --global-font-singleprice: clamp(1.2rem, 1.1455rem + 0.2727vw, 1.35rem); --global-font-size-varselect: clamp(1rem, 0.8727rem + 0.6364vw, 1.35rem); --global-biginput: var(--global-font-regular); --global-font-listprice: var(--global-font-regular); /* LINE HEIGHT */ --global-font-line-h1-bgimg: calc(var(--global-font-h1-bgimg)); --global-font-line-h3-bgimg: calc(var(--global-font-h3-bgimg)); --global-font-line-h1: calc(var(--global-font-h1) + var(--global-micropadding)); --global-font-line-h2: calc(var(--global-font-h2) + var(--global-micropadding)); --global-font-line-h3: calc(var(--global-font-h3) + var(--global-micropadding)); --global-font-line: 125%; --global-lineheight-maintext: 135%; --global-font-line-big: 165%; /* head mnu li's*/ --global-lineheight-shorttext: clamp(100%, var(--global-lineheight-maintext), 150%); /* shorts of li (cats & news*/ /* FONT WEIGHT */ --global-fontweight-prim-regu: 400; /* regular Lora */ --global-fontweight-prim-medi: 500; /* medium Lora */ --global-fontweight-prim-semi: 600; /* semibold Lora */ --global-fontweight-prim-bold: 700; /* bold Lora */ --global-fontweight-sec-thin: 100; --global-fontweight-sec-light: 300; /* thin Roboto */ --global-fontweight-sec-regu: 400; /* regular Roboto */ --global-fontweight-sec-bold: 700; /* bold Roboto */ --global-fontweight-sec-verybold: 900; /* -- COLORS -- */ --color-realwhite: #ffffff; --color-realblack: #000000; --color-baroquewhite: #D6C9C1; --color-oxideyellow: #BE874E; --color-asmlogo: #8C5B20; --color-darkchocolate: #35302C; --color-warmdarkgray: #3F3934; --color-warmmidgray: #645D55; --color-oxidepurple: #B5A6A8; --color-warmdarkgray-rgb: rgba(63, 57, 52, 0.25); /* bg in leadingcontentbg-home */ --color-realwhite-rgb: rgba(255, 255, 255, 0.25); --color-realwhite-rgb2: rgba(255, 255, 255, 0.65); --color-realwhite-rgb3: rgba(255, 255, 255, 0.80); /* -- COLOR DEFS -- */ --global-color-body: var(--color-darkchocolate); --global-color-pagediv: var(--color-darkchocolate); --global-color-content: var(--color-warmdarkgray); --global-color-contentinv: var(--color-realwhite); --global-color-txt: var(--color-baroquewhite); --global-color-txtinv: var(--color-warmmidgray); --global-color-h1: var(--color-realwhite); --global-color-h2: var(--color-realwhite); --global-color-h3: var(--color-baroquewhite); --global-color-h5: var(--color-baroquewhite); --global-color-hinv: var(--color-warmdarkgray); --global-color-link: var(--color-oxideyellow); --global-color-hovlink: var(--color-baroquewhite); --global-color-vislink: var(--color-oxideyellow); /* header menu buttons */ --header-color-buttonbg: var(--color-warmdarkgray); --header-color-buttonbghov: var(--color-warmmidgray); --header-color-butborder: var(--color-warmmidgray); --header-color-buttxt: var(--color-baroquewhite); --header-color-buttxthov: var(--color-realwhite); --header-color-buttxtactive: var(--color-oxideyellow); /* content buttons */ --global-color-buttonbg: var(--color-warmdarkgray); --global-color-butborder: var(--color-warmmidgray); --global-color-buttxt: var(--color-baroquewhite); --global-color-buttonbghov: var(--color-darkchocolate); --global-color-butborderhov: var(--color-oxideyellow); --global-color-buttxthov: var(--color-oxideyellow); --global-buttonfontfam: var(--global-font-headregular); --global-buttonfontweight: var(--global-fontweight-sec-regu); --global-buttonminwidth: 8rem; --global-buttonpadding: 2rem; --global-bordersize: 1px; --global-buttonradius: 5px; --global-buttonheight: 2.8rem; /* 55px 3.438rem*/ --global-buttonheightmini: 1.8rem; /* cart etc.*/ --global-productlistbutheight: 2.5rem; --global-woo-notice-bg: var(--color-baroquewhite); --global-woo-notice-msg-bg: var(--color-realwhite); /* -- TEXT DECORATIONS, VARIANTS, ANIMATIONS (transition: var(xyz)-- */ --global-txt-shadow: #D6C9C1 1px 0 5px; --global-anim-link: color 1.2s, text-shadow 0.8s; --global-anim-hovlink: color 0.2s, text-shadow 0.8s; --global-anim-fill: fill 1.2s, text-shadow 0.8s; --global-anim-hovfill: fill 0.2s, text-shadow 0.8s; --global-anim-button: background-color 1.2s, color 1.2s, border 1.2s; --global-anim-buttonhov: background-color 0.8s, color 0.2s, border 0.2s; --global-menufadein: opacity 0.3s ease-out, max-height 0.2s linear; --global-menufadeout: opacity 0.2s ease-in, max-height 0.3s linear; --global-menuopen: max-height 0.5s ease-out; --global-menuclose: max-height 0.5s ease-out; --global-colorslidein: max-height 0.5s ease-out; --global-colorslideout: max-height 0.5s ease-out; /* -- MEASURES -- */ --global-width-max: 100vw; --global-width-100: 100%; /* -- scrollbarbug -- */ --global-height-max: 100vh; --global-height-100: 100%; /* -- 100% to body -- */ --global-maxw1: 100%; /* -- non-margined elements are full width -- */ --global-maxw2: 93.75rem; /* -- (max 1500px) non-margined elements are limited width -- */ --global-width-pagediv: calc(var(--global-maxw1)); /* -- maxw2 > subtract any site wide margin -- */ --global-blockmargin: clamp(2rem, 13.33%, 12.5rem); /* max 200px (100px for both sides) */ --global-width-content: calc(var(--global-maxw2)); /* -- maxw2 > subtract any site wide margin -- - var(--global-blockmargin))*/ --global-max-textwidth: clamp(16rem, 90vw, 70rem); /* limiting width of paragraphs */ --global-blockpadding: calc(var(--global-blockmargin) / 2); /* -- distributing gloabl block margin to left/right */ --global-headerheight: calc(90px + 1rem); /* 90px + bumperheight */ --global-logoblockheight: 2.25rem; /* 35px */ --global-bumperheight: 1rem; --global-rowheight: 3.438rem; /* 55px (buttons, td's, etc) */ --global-borderradius: 5px; --global-h1bgimgpadbot: clamp(2rem, 10vh, 8.125rem); /* 130px - 8.125rem; */ /* COLOUR DOTS */ /* - set max dots on a row (depends on max width */ --global-colordot-items: 15; --global-colordot-items-select: calc(var(--global-colordot-items) / 2); /* - calculate available space (and set dot margin) */ --global-colordot-margin: clamp(0.5rem, 1%, 1rem); --global-colordot-totmargin: calc(var(--global-colordot-margin) * var(--global-colordot-items)); --setcolordotspace: 100%; --global-colordot-space: calc(var(--setcolordotspace) - var(--global-colordot-totmargin)); /* - set dot sizes */ --global-colourdot-size: calc(var(--global-colordot-space) / var(--global-colordot-items)); --global-colourdot-size-select: calc(var(--global-colordot-space) / var(--global-colordot-items-select)); --global-colourdot-minsize: 35px; --global-colourdot-maxsize: 75px; --global-colourdot-maxsize-select: 50px; /* sub blocks (product single page) */ --global-width-50: calc(50% - calc(var(--global-blockmargin) / 2)); --global-maxwidth-50: 550px; --global-width-30: calc(40% - calc(var(--global-blockmargin) / 2)); --global-maxwidth-30: 400px; --global-width-70: calc(50% - calc(var(--global-blockmargin) / 2)); --global-maxwidth-70: 750px; /* -- COLS FOR PRODUCTS, FOOTER -- */ --global-cols-maxblock1: calc(var(--global-width-content) - var(--global-blockmargin)); /* the space available for the row */ --global-cols-maxblock2: clamp(300px, 500px, 1500px); --global-cols-number: 4; --global-cols-gutters: calc(var(--global-cols-number) - 1); --global-cols-gutter: calc(3rem / var(--global-cols-gutters)); --global-cols-gutter-v: 2.75rem; /* original settings */ --global-cols-minwidth: 200px; --global-cols-maxwidth: calc((var(--global-cols-maxblock1) / var(--global-cols-number)) - var(--global-cols-gutter)); /* -- BORDERS ETC -- */ --global-border-button: 1px solid var(--global-color-buthov); --global-bumperborder: var(--global-bumperheight) solid var(--color-warmmidgray); /* -- basic bumper */ --global-border-block: 1px solid var(--color-darkchocolate); /* -- VERTICAL SPACING -- */ --global-topmainmargin: clamp(2rem, 8vh, 8rem); --global-blockmarg-top: clamp(2rem, 5vh, 6.25rem); /* max 100px */ --global-blockmarg-bot: clamp(1.80rem, 3vh, 5.625rem); /* max 90px */ --global-blockmarg-mid: clamp(1.65rem, 2vh, 3.75rem); /* max 60px */ --global-vpadding: clamp(1rem, 1vh, 2rem); /* -- HORIZONTAL SPACING -- */ --global-hpadding: 2rem; --global-minimumpadding: 1rem; --global-halfpadding: 0.5rem; --global-micropadding: 0.2rem; /* SLICK SLIDER */ --slick-totalheight: clamp(75px, 35vh, 400px); --slick-imageheight: calc(var(--slick-totalheight) - 5rem); /* BG IMAGES */ --global_bgimg_productfam: url('assets/images/artisan_stucco_product_families_02.png'); --global_bgimg_droplets: url('assets/images/home_bg_dropletsartisan_stucco_waterproof_lime_stucco_bathroom.webp'); --global_bgimg_lime: url('assets/images/home_bg_limeputty_artisan_stucco.jpg'); --global_bgimg_lime_faded: url('assets/images/home_bg_limeputty_artisan_stucco_nearwhite.jpg'); /* -- DEV OPTIONS -- */ --dev-border-01: 0px solid red; --dev-border-02: 0px solid blue; --dev-border-03: 0px solid green; --dev-border-04: 0px solid gold; --dev-border-05: 0px solid purple; --dev-bg-01: red; --dev-bg-02: blue; --dev-bg-03: green; --dev-bg-04: gold; --dev-bg-05: lightgrey; } /* !!! For Overflow Testing */ * { /* outline: 1px solid red; */ /* outline-offset: -1px; */ } /* -------------------------------------------------------------------*/ /* -- RESET --------------------------------------------------------- */ /* -------------------------------------------------------------------*/ /* resets in main template */ body, div, header, main, article, figure, section, ul, li, h1, h2, h3, h4, h5, h6 { box-sizing: border-box; } /* -------------------------------------------------------------------*/ /* -- BASIC BLOCKS -------------------------------------------------- */ /* -------------------------------------------------------------------*/ html { font-size: var(--global-font-basesize); font-family: var(--global-font-primary); } body { width: var(--global-width-max); max-width: var(--global-width-100); height: var(--global-height-100); font-family: var(--global-font-primary); font-size: var(--global-font-regular); line-height: var(--global-font-line); background-color: var(--global-color-body); } div.pagediv { width: var(--global-width-pagediv); max-width: var(--global-width-pagediv); margin: auto; background-color: var(--global-color-pagediv); } header.mainheader { /* TOP MENU - make main header sticky (fixed) */ box-sizing: border-box; position: fixed; top: 0px; left: 0px; width: 100vw; z-index: 250; height: var(--global-headerheight); padding-top: 2rem; padding-bottom: 2rem; background-color: var(--global-color-content); border-bottom: var(--global-bumperborder); transition: transform 0.5s ease-in-out; } .mainheader.hide-navigation { transition: transform 0.5s ease-in-out; } /* margined width */ div.headercontainer { max-width: var(--global-width-content); margin: auto; padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--global-hpadding); border: var(--dev-border-01); } /* full width */ div.bigimage { position: relative; width: var(--global-width-100); } /* margined width */ main.site-main { max-width: var(--global-width-content); margin: auto; background-color: var(--global-color-content); border: var(--dev-border-05); } main article.thearticle { padding-left: 0; padding-right: 0; } /* margined width */ div.footerblock { max-width: var(--global-width-content); margin: auto; background-color: var(--global-color-content); border: var(--dev-border-05); border-top: var(--global-bumperborder); } /* --- NESTED ( pagediv > main ) BASIC BLOCKS -------------------------*/ main header.page-header, main header.woocommerce-products-header { padding-top: var(--global-blockmarg-top); padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); border: var(--dev-border-05); } main article.thearticle { /* no padding */ /* padding-left: var(--global-blockpadding); */ /* padding-right: var(--global-blockpadding); */ } /* --- NESTED ( pagediv > main > article ) BASIC BLOCKS ---------------*/ main article > article.post-list-block { border: var(--dev-border-05); } main article section { display: flex; flex-direction: row; flex-wrap: wrap; border: var(--dev-border-05); } main article section article.post-list-block { width: 100%; border: var(--dev-border-05); } main article section article.post-list-block.product { width: calc(100% / 4 - 4rem); border: var(--dev-border-05); } main article section article.post-list-block.product li.product { width: 100%; } .hasbumper { /* border-top: var(--global-bumperborder); */ } /* -------------------------------------------------------------------*/ /* -- Header & Menu ------------------------------------------------- */ /* -------------------------------------------------------------------*/ /* --- NAV SVG ELEMENTS ----------------------------------------------*/ svg.mnubutton, svg.srvbutton { width: 32px; height: 32px; margin-left: var(--global-minimumpadding); background-color: var(--header-color-buttonbg); border-radius: 5px; cursor: pointer; } svg.mnubutton, svg.srvbutton { fill: var(--header-color-buttxt); } .cartfull, .loggedin { position: relative; } .cartfull svg.mnubutton, .cartfull svg.srvbutton, .loggedin svg.mnubutton, .loggedin svg.srvbutton { fill: var(--header-color-buttxtactive); } .cartfull::after, .loggedin::after { content: ''; position: absolute; width: 8px; height: 8px; background-color: var(--header-color-buttxtactive); border-radius: 50%; top: 2px; right: 0px; } svg.mnubutton:hover, svg.mnubutton:focus, svg.srvbutton:hover, svg.srvbutton:focus { fill: var(--header-color-buttxthov); background-color: var(--header-color-buttonbghov); } svg.mnubutton { margin-left: 2rem; } /* --- NAV MENU ELEMENTS ---------------------------------------------*/ div.logoblock { height: var(--global-logoblockheight); width: auto; background-repeat: no-repeat; background-size: contain; border: var(--dev-border-05); } div.navblock { position: relative; display: flex; justify-content: right; height: var(--global-logoblockheight); width: auto; padding-top: 0; padding-right: 0; border: 0px solid green; } /* FOLD OUT MAIN MENU */ nav.primary-navigation { position: fixed; z-index: 125; top: var(--global-headerheight); left: 0px; height: calc(100vh - var(--global-headerheight) - 0px); width: calc(100vw - 0px); background-color: var(--color-warmmidgray); border: var(--dev-border-05); /* !! SIZE CHECK, TAKE AWAY */ /* SHOWHIDE EFFECT */ opacity: 0; transition: var(--global-menufadeout); } nav.primary-navigation.show { max-height: 4000px; opacity: 1; transition: var(--global-menufadein); } /* THE PRIMARY NAVIGATION BLOCK - MARGINED LIKE TOP BLOCKS */ /* --- MEGA MENU --- */ .primary-menu-container { max-width: var(--global-width-content); margin: auto; padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); text-align: left; font-family: var(--global-font-secondary-regular); font-size: var(--global-font-headermnu-normal); border: var(--dev-border-01); } div.navblock .primary-menu-container ul.menu-wrapper { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; /* max-height: 1rem; */ margin: 0px; padding: 0px; margin-top: 4rem; border: var(--dev-border-03); } /* all li's */ div.navblock .primary-menu-container ul.menu-wrapper li { margin: 0px; padding: 0px; margin-right: var(--global-minimumpadding); font-weight: var(--global-fontweight-sec-thin); /* text-transform: uppercase; */ } /* top li's */ div.navblock .primary-menu-container ul.menu-wrapper > li { font-weight: var(--global-fontweight-sec-bold); border: var(--dev-border-04); } div.navblock .primary-menu-container ul.menu-wrapper > li:nth-child(3) { margin-right: clamp(2rem, 5vw, 8rem); } div.navblock .primary-menu-container ul.menu-wrapper > li.menu-item-has-children { text-transform: uppercase; } /* Reset text-transform for sub-menu items */ div.navblock .primary-menu-container ul.menu-wrapper > li.menu-item-has-children ul.sub-menu li { text-transform: none; } div.navblock .primary-menu-container ul.menu-wrapper > li.menu-item-has-children > a:after { content: "\25BE"; margin-left: var(--global-micropadding); color: var(--color-realwhite); } div.navblock .primary-menu-container ul.menu-wrapper > li.top-li-open.menu-item-has-children > a { color: var(--color-oxideyellow); } div.navblock .primary-menu-container ul.menu-wrapper > li.top-li-open.menu-item-has-children > a:after { content: "\25BE"; margin-left: var(--global-micropadding); color: var(--color-oxideyellow); } /* links in the ul */ div.navblock .primary-menu-container ul.menu-wrapper li a { color: var(--global-color-txt); text-shadow: none; } div.navblock .primary-menu-container ul.menu-wrapper li.current-menu-item > a, div.navblock .primary-menu-container ul.menu-wrapper li.current-menu-ancestor > a { color: var(--color-darkchocolate); } div.navblock .primary-menu-container ul.menu-wrapper li a:hover { color: var(--color-realwhite); } /* specific li's */ div.mega-menu-content li { line-height: var(--global-font-line-big); } div.mega-menu-content > ul > li.menu-item-has-children > a:after { /* content: " +"; */ margin-left: var(--global-micropadding); color: var(--color-realwhite); } /* hooditem van submenu */ div.navblock .primary-menu-container ul.menu-wrapper li div.mega-menu-content > ul > li { margin-top: var(--global-vpadding); } div.navblock .primary-menu-container ul.menu-wrapper li div.mega-menu-content > ul > li > a { font-family: var(--global-font-secondary-regular); font-weight: var(--global-fontweight-sec-bold); color: var(--color-realwhite); } div.navblock .primary-menu-container ul.menu-wrapper li div.mega-menu-content > ul > li > a:hover { color: var(--color-darkchocolate); } div.navblock .primary-menu-container ul.menu-wrapper li div.mega-menu-content > ul > li.current-menu-item > a, div.navblock .primary-menu-container ul.menu-wrapper li div.mega-menu-content > ul > li.current-menu-ancestor > a { color: var(--color-darkchocolate); } div.navblock .primary-menu-container ul.menu-wrapper li div.mega-menu-content > ul > li.current-menu-item > a:hover, div.navblock .primary-menu-container ul.menu-wrapper li div.mega-menu-content > ul > li.current-menu-ancestor > a:hover { color: var(--color-realwhite); } /* verdere van submenu */ div.mega-menu-content > ul ul li a { font-family: var(--global-font-secondary-light); font-weight: var(--global-fontweight-sec-light); line-height: var(--global-font-line-big); } div.mega-menu-content > ul ul li.current-menu-item a { font-weight: var(--global-fontweight-sec-bold); } /* MEGA MENU CONTENT - block items */ div.mega-menu-content { position: absolute; left: 0; width: 100%; /* reset for transitions */ overflow: hidden; max-height: 0; transition: var(--global-menuclose); border: var(--dev-border-05); } div.mega-menu-content.mega-open { max-height: 500px; transition: var(--global-menuopen); } div.mega-menu-content a h4 { display: inline-block; width: auto; margin-top: var(--global-blockmarg-bot); margin-bottom: var(--global-vpadding); font-family: var(--global-font-secondary-thin); font-size: var(--global-font-headermnu-big)!important; color: var(--global-color-txt); text-transform: uppercase; } div.mega-menu-content a:hover h4 { color: var(--color-realwhite); } div.mega-menu-content > ul { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; column-gap: 2.0vw; } div.mega-menu-content > ul ul { position: relative; margin-left: var(--global-halfpadding); margin-top: var(--global-halfpadding); } /* SERVICE MENU IN TOP (inside the nav.primary-navigation) */ div.secondary-menu-container { max-width: var(--global-width-content); margin: auto; padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); } /* LANGUAGE MENU */ nav.primary-navigation div.secondary-menu-container ul#secondary-menu-list li.lang-item a { font-family: var(--global-font-secondary-regular); font-weight: var(--global-fontweight-sec-light); font-size: var(--global-font-small); color: var(--global-color-txt); text-transform: uppercase; } nav.primary-navigation div.secondary-menu-container ul#secondary-menu-list li.lang-item.current-lang a { color: var(--color-darkchocolate); } nav.primary-navigation div.secondary-menu-container ul#secondary-menu-list li a:hover, nav.primary-navigation div.secondary-menu-container ul#secondary-menu-list li.lang-item.current-lang a:hover { color: var(--color-realwhite); } /* ------------------------------------------------------------------ */ /* -- NAV SWITCH Mobile / Desktop EXAMPLE --------------------------- */ /* -- No media query in main template for ease of use --------------- */ /* -- DISABLED - All platforms get mobile menu ---------------------- */ /* ------------------------------------------------------------------ */ /* --- MOBILE ------------------------------*/ @media screen and (max-width: 1023px) { nav.primary-navigation { /* display: none; */ /* alternative with element present */ max-height: 0px; overflow: hidden; } nav.primary-navigation.show { /* display: block; */ } div.mobileswitch { display: none; } div.mobileswitch.show { display: block; } } /* --- DESKTOP ------------------------------*/ @media screen and (min-width: 1023px) { nav.primary-navigation { /* display: none; */ /* alternative with element present */ max-height: 0px; overflow: hidden; } nav.primary-navigation.show { /* display: block; */ } div.mobileswitch { display: none; } div.mobileswitch.show { display: block; } } /* ------------------------------------------------------------------- */ /* -- HTML Basics --------------------------------------------------- */ /* ------------------------------------------------------------------- */ h1 { /* padding-top: var(--global-blockmarg-top); */ padding-bottom: var(--global-blockmarg-top); font-family: var(--global-font-headthin); font-weight: var(--global-fontweight-sec-thin); font-size: var(--global-font-h1); line-height: var(--global-font-line-h1); text-transform: uppercase; color: var(--global-color-h1); } .maintext h1 { text-transform: none; text-transform: uppercase; } h2 { padding-top: var(--global-blockmarg-top); padding-bottom: var(--global-blockmarg-mid); font-family: var(--global-font-headthin); font-weight: var(--global-fontweight-sec-thin); font-size: var(--global-font-h2); line-height: var(--global-font-line-h2); text-transform: uppercase; color: var(--global-color-h2); } h3 { font-family: var(--global-font-headthin); font-weight: var(--global-fontweight-sec-thin); font-size: var(--global-font-h3); line-height: var(--global-font-line-h3); text-transform: uppercase; color: var(--global-color-h3); } h5 { font-family: var(--global-font-headlight); font-weight: var(--global-fontweight-sec-thin); font-size: var(--global-font-maintext); line-height: var(--global-lineheight-maintext); text-transform: uppercase; color: var(--global-color-h5); margin-top: var(--global-blockmarg-top); margin-bottom: var(--global-minimumpadding); } p { color: var(--global-color-txt); margin-block-start: 0; margin-block-end: 0; margin-bottom: var(--global-minimumpadding); max-width: var(--global-max-textwidth); } strong { color: var(--color-realwhite); font-weight: var(--global-fontweight-prim-semi); } a { color: var(--global-color-link); text-decoration: none; transition: var(--global-anim-link); } a:visited { color: var(--global-color-vislink); transition: var(--global-anim-link); } a:hover, a:active { color: var(--global-color-hovlink); transition: var(--global-anim-hovlink); text-shadow: var(--global-txt-shadow); } /* SPECIAL LINKS */ a[href$=".pdf"]:before { content: " " url(assets/images/pdf-ico-white.svg) " " ; display: inline-block; width: var(--global-font-regular); height: var(--global-font-regular); margin-right: calc(var(--global-font-regular) / 2); border: var(--dev-border-01); } /* -------------------------------------------------------------------*/ /* -- Image Basics ------------------------------------------------- */ /* -------------------------------------------------------------------*/ div.bigimage div.titleblock { position: absolute; z-index: 70; left: 0px; bottom: var(--global-bumperheight); min-height: 40dvh; width: var(--global-width-100); display: flex; flex-direction: column; justify-content: flex-end; background-image: linear-gradient(to bottom, rgba(53,48,44,0), rgba(53,48,44,0.60)); } div.bigimage div.titleblock h3, div.bigimage div.titleblock h1 { width: var(--global-width-content); max-width: var(--global-width-100); margin: auto; margin-top: 0px; margin-bottom: 0px; padding-top: 0; padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); color: var(--color-realwhite); margin-block-start: 0em; margin-block-end: 0em; } div.bigimage div.titleblock h3 { margin-bottom: 0; font-size: var(--global-font-h3-bgimg); line-height: var(--global-font-line-h3-bgimg); } div.bigimage div.titleblock h3 a { color: var(--color-realwhite); transition: var(--global-anim-link); } div.bigimage div.titleblock h3:hover a { color: var(--color-realwhite); transition: var(--global-anim-hovlink); text-decoration: underline; } div.bigimage div.titleblock h1 { padding-top: var(--global-micropadding); padding-bottom: var(--global-h1bgimgpadbot); font-size: var(--global-font-h1-bgimg); line-height: var(--global-font-line-h1-bgimg); } .wpt22featimage { width: var(--global-width-100); height: 100vh; background-repeat: no-repeat; background-size: contain; background-color: var(--dev-bg-05); border: var(--global-color-h1); border-bottom: var(--global-bumperborder); } .wpt22featimage img.bigimage { height: 100%; width: 100%; object-fit: cover; object-position: center center; background-color: var(--dev-bg-05); } /* HOME PRODUCT FAMILY IMAGE IN HEADER */ div.home-productimage { /* lives in the flex box */ display: none; position: relative; width: 100%; margin: auto; margin-bottom: var(--global-font-h1-bgimg); /* bottom: calc(var(--global-font-h1-bgimg) + var(--global-font-h3-bgimg) + var(--global-h1bgimgpadbot) + var(--global-font-h1-bgimg)); */ /* left: 0px; */ /* height: 100%; */ min-height: 25vh; max-width: calc(var(--global-width-content) - var(--global-blockmargin)); /* z-index: 200; */ background-image: var(--global_bgimg_productfam); background-repeat: no-repeat; background-size: clamp(250px, 75%, 700px); background-position: center bottom; border: 0px solid red; } /* modifications for WOO cart & account pages */ div.nobigimage div.titleblock { width: var(--global-width-pagediv); max-width: var(--global-width-content); margin: auto; margin-top: calc(var(--global-headerheight) * 1); /* move out from under header */ padding-top: var(--global-blockmarg-top); padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); background: var(--global-color-content); border: var(--dev-border-01); } div.nobigimage div.titleblock h1 { margin: 0px; padding: 0px; } /* -- ALL SLICK SLIDER ELEMENTS - General styling -- */ /* -- INIT FLIPPING SIZE ISSUE -- */ /* Hide uninitialized Slick sliders */ /* .wp-block-gallery.slick-loading { visibility: hidden; } */ .wp-block-gallery.has-nested-images { visibility: hidden; opacity: 0; transition: opacity 0.3s ease; } .wp-block-gallery.has-nested-images.slick-is-loaded { visibility: visible; opacity: 1; } /* Regular stuff */ .slick-slider { margin: 0; margin-top: var(--global-blockmarg-top)!important; margin-bottom: var(--global-blockmarg-bot)!important; height: var(--slick-totalheight); width: 100%; margin: auto; } .slick-slider { /* margin-top: 0px!important; */ } .slick-slider div.slick-list { height: inherit !important; } .slick-slider div.slick-list div.slick-track { height: inherit !important; } .slick-slider div.slick-list div.slick-track .slick-slide { height: inherit !important; /* insist margins in firefox */ margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 10px; margin-inline-end: 10px; } .slick-slider div.slick-list div.slick-track .slick-slide img { height: 100%; height: var(--slick-imageheight); width: auto!important; } .slick-slider div.slick-list div.slick-track .slick-slide p, .slick-slider div.slick-list div.slick-track .slick-slide figcaption { padding: var(--global-halfpadding); text-align: center; color: var(--color-baroquewhite); border: 0px solid red; } .slick-slider ul.slick-dots li button::before { color: var(--color-realwhite); } .slick-slider ul.slick-dots li.slick-active button::before { color: var(--color-realwhite); } /* SLICK SLIDER INTERFACE MODS */ .slick-prev:before, .slick-next:before { font-size: 40px; color: var(--color-darkchocolate); } .slick-prev, .slick-next { top: 45%; height: 40px; z-index: 200; } .slick-prev { left: -50px; left: var(--global-halfpadding); } .slick-next { right: -30px; right: 2rem; } /* -- Media and Text block on regular pages & posts ------------------ */ div.maintext div.wp-block-media-text.is-stacked-on-mobile { display: flex; flex-direction: row; flex-wrap: wrap; max-width: var(--global-max-textwidth); padding: 0; margin-top: var(--global-blockmarg-top); margin-bottom: var(--global-blockmarg-bot); background-color: var(--color-darkchocolate); } div.maintext div.wp-block-media-text.is-stacked-on-mobile figure.wp-block-media-text__media { width: 50%; margin: 0; padding: var(--global-minimumpadding); } div.maintext div.wp-block-media-text.is-stacked-on-mobile figure.wp-block-media-text__media a { margin: 0; padding: 0; height: 0px; } div.maintext div.wp-block-media-text.is-stacked-on-mobile figure.wp-block-media-text__media img { max-width: 100%; height: auto; } div.maintext div.wp-block-media-text.is-stacked-on-mobile div.wp-block-media-text__content { display: flex; flex-direction: column; justify-content: flex-start; width: 50%; margin: 0; padding: var(--global-hpadding); /* padding-top: 0; */ /* padding: 1rem clamp(0.5rem, 4vw, 4rem) 1rem clamp(0.5rem, 3vw, 3rem); */ } /* ------------------------------------------------------------------- */ /* -- REGULAR PAGES & POSTS ------------------------------------------ */ /* ------------------------------------------------------------------- */ div.leadingcontent { padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); } /* div.maintext is also used in woo (through wiz plug-in) */ div.maintext { padding-top: var(--global-topmainmargin); /* max-width: 90%; */ } article.thearticle.single.post p, div.maintext p { max-width: var(--global-max-textwidth); font-size: var(--global-font-maintext); line-height: var(--global-lineheight-maintext); } main header.page-header, main header.woocommerce-products-header { font-size: var(--global-font-maintext); line-height: var(--global-lineheight-maintext); } /* --- BIBLIOGRAPHY & NOTES (regular pages) --- */ div.maintext p.notes { font-size: var(--global-font-small); } /* --------------------------------------------- */ /* --- HOMEPAGE --- */ /* --------------------------------------------- */ body.home div.leadingcontent { padding: 0; background-image: var(--global_bgimg_droplets); background-repeat: none; background-position: bottom; background-size: cover; } body.home div.leadingcontent h1 { /* color: var(--global-color-txtinv); */ } body.home div.leadingcontent p { max-width: 90%!important; /* color: var(--global-color-txtinv); */ } body.home div.leadingcontentbg { padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-topmainmargin); background-color: var(--color-warmdarkgray-rgb); /* background-color: var(--color-realwhite-rgb); */ } /* --------------------------------------------- */ /* --- HOME PRODUCT CATEGORIES (2024/09 -mvl) -- */ /* --------------------------------------------- */ /* Ensure no margin or padding for the category list */ body.home .category-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex-wrap: wrap; } body.home .category { position: relative; width: 100%; /* Full width, you can adjust as needed */ border-top: var(--global-bumperborder); } body.home .category-link { display: block; text-decoration: none; color: inherit; } body.home .category-overlay { position: relative; display: flex; justify-content: flex-start; align-items: flex-start; text-align: left; background-size: cover; background-position: center; background-repeat: no-repeat; border: 0px solid green; } body.home .category-content { position: relative; z-index: 2; /* Ensures the text and products appear on top of the background */ width: 100%; height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; border: 0px solid red; } body.home .category-info { /* margin-left: calc(0px - var(--global-blockpadding) - 14px); */ margin-top: var(--global-topmainmargin); width: calc(90% - var(--global-blockpadding) - var(--global-blockpadding)); max-width: 1024px; min-width: 90%; padding: var(--global-blockmarg-mid); padding-left: calc(var(--global-blockpadding) + 14px); font-size: var(--global-font-regular); color: var(--global-color-hinv); background-color: var(--color-realwhite-rgb3); border-radius: 0 0 20px 0; border: 1px solid var(--color-baroquewhite); } body.home .category-title { width: 100%; margin: 0; padding: 0; margin-bottom: var(--global-vpadding); font-size: var(--global-font-h3-bgimg); color: var(--global-color-hinv); /* color: var(--global-color-h1); */ } body.home .category-description { color: var(--global-color-txtinv); } body.home .see-all-products { display: inline-block; margin-top: var(--global-vpadding); margin-bottom: var(--global-vpadding); padding: var(--global-halfpadding); padding-left: var(--global-hpadding); padding-right: var(--global-hpadding); color: var(--global-color-txtinv); font-weight: 700; cursor: pointer; background-color: var(--global-color-buttxt); border-radius: var(--global-buttonradius); /* border: var(--global-bordersize) solid var(--global-color-butborder); */ transition: var(--global-anim-button); } body.home .see-all-products:hover { background-color: var(--color-oxidepurple); color: var(--color-realwhite); transition: var(--global-anim-buttonhov); } /* -- The Product list -- */ body.home .category-products { margin-top: var(--global-blockmarg-top); margin-bottom: var(--global-blockmarg-bot); /* border-radius: 0 0 20px 0; background-color: var(--color-realwhite-rgb); */ /* margin-left: calc(0px - var(--global-blockpadding) - 24px); */ border: 0px solid red; } body.home .category-products ul.products { list-style: none; padding: 0; margin: 0; padding-left: var(--global-blockpadding); display: flex; flex-wrap: wrap; gap: var(--global-cols-gutter) !important; justify-content: flex-start; } body.home .category-products ul.products::before { display: none; } body.home .category-products ul.products li { width: calc(20% - 1rem) !important; min-width: 250px; /* NOTHING WORKS? Because cascading - defs are at 4000 using important */ margin: 0 !important; padding: 1rem !important; background-color: var(--color-realwhite-rgb3); background-color: var(--color-realwhite); border-radius: 5px; } body.home .category-products .products li a.woocommerce-loop-product__link { background-color: var(--color-realwhite); } /* --------------------------------------------- */ /* --- FEATURED PRODUCTS --- */ /* --------------------------------------------- */ section.featured.products { margin: 0!important; padding: 0!important; } div.featured-product { box-sizing: content-box; display: grid; position: relative; width: 100%; aspect-ratio: 16 / 9; border-bottom: var(--global-bumperborder); } div.featured-product:last-child { border: 0px; } div.featured-product > div { position: absolute; /* top: 0; */ /* left: 0; */ grid-row: 1; grid-column: 1; /* overflow: hidden; */ width: 100%; aspect-ratio: 16 / 9; /* height: 100%; */ } div.featured-product > div.button { display: none; } div.featured-product > div.image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } div.featured-product > div.info { box-sizing: border-box; display: flex; margin-left: var(--global-blockpadding); margin-right: 0px; margin-top: var(--global-blockpadding); margin-bottom: var(--global-blockpadding); /* padding-left: 0px; padding-right: var(--global-blockpadding); */ width: calc(100% - var(--global-blockpadding) - var(--global-blockpadding)); max-width: 750px; aspect-ratio: 4 / 1; justify-self: end; align-self: end; background-color: var(--color-darkchocolate); background-color: var(--global-color-contentinv); background-color: var(--color-realwhite-rgb2); clip-path: inset(0% 0% 0% 0% round 0% 0% 0% 20px); } div.featured-product:nth-child(even) > div.info { flex-direction: row-reverse; justify-self: start; align-self: end; margin-left: 0px; margin-right: var(--global-blockpadding); /* padding-left: var(--global-blockpadding); padding-right: 0px; */ clip-path: inset(0% 0% 0% 0% round 0% 0% 20px 0%); } div.featured-product > div.info div.productimage { width: 25%; border: 0px solid red; } div.featured-product > div.info div.productimage img { width: 100%; height: 100%; opacity: 1; aspect-ratio: 1/1; object-fit: cover; object-position: center center; clip-path: inset(0% 0% 0% 0% round 0% 20% 0% 20px); } div.featured-product:nth-child(even) > div.info div.productimage img { clip-path: inset(0% 0% 0% 0% round 20% 0% 20px 0%); } div.featured-product > div.info div.productinfo { display: flex; flex-direction: column; justify-content: center; width: 75%; padding: 1rem; padding-left: clamp(0.5rem, 3vw, 3rem); padding-right: clamp(0.5rem, 4vw, 4rem); border: 0px solid gold; } div.featured-product > div.info div.productinfo div.title h2 { padding: 0; margin: 0; margin-top: 0.5rem; font-family: var(--global-font-headlight); font-weight: var(--global-fontweight-sec-thin); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } div.featured-product > div.info div.productinfo div.text p { display: inline; padding: 0; margin: 0; margin-top: 0.5rem; /* display: -webkit-box; */ -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: var(--global-lineheight-shorttext); color: black; } div.featured-product > div.info div.productinfo div.text p.price { font-weight: var(--global-fontweight-prim-bold); } div.featured-product > div.info div.productinfo div.text p.price::before { content: ' '; } div.featured-product > div.info div.productinfo div.text p.price .woocommerce-price-suffix { display: none; } div.featured-product > div.info div.productinfo div.button.add_to_cart_button { /* display: none; */ margin-top: 0.5rem; padding: 0.5rem; padding-left: 1rem; padding-right: 1rem; background-color: var(--header-color-buttxthov); width: max-content; border-radius: var(--global-borderradius); } div.featured-product > div.info div.productinfo div.button.add_to_cart_button a { display: block; width: 100%; height: 100%; } /* --------------------------------------------- */ /* --- MAIL SUBSCRIBE BLOCK (alll pages) --- */ /* --------------------------------------------- */ section.mailsubscribe { border-top: var(--global-bumperborder); width: 100%; padding-top: var(--global-blockmarg-top); padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); display: flex; flex-wrap: wrap; /* border: 0px solid green; */ } section.mailsubscribe .container.left { width: 60%; min-width: var(--global-cols-minwidth); padding-right: var(--global-hpadding); border: 0px solid blue; } section.mailsubscribe .container.right { width: 40%; min-width: var(--global-cols-minwidth); padding-top: var(--global-blockmarg-top); padding-left: var(--global-hpadding); border: 0px solid red; } section.mailsubscribe .formcontainer { width: 100%; /* height: auto; */ /* max-width: 300px; */ border-radius: var(--global-borderradius); background-color: var(--global-color-body); padding: var(--global-minimumpadding); display: table; border: 0px solid green; } .cr-web-form { width: 100%; margin-bottom: 1rem; } .cr-web-form input, .cr-web-form button { width: 100%; padding: 0.75em; /* font-size: 1em; */ border: 1px solid #ddd; border-radius: var(--global-buttonradius); box-sizing: border-box; } .cr-web-form button { background-color: var(--color-baroquewhite); color: var(--color-darkchocolate); font-weight:var(--global-fontweight-sec-bold); border: none; cursor: pointer; transition: var(--global-anim-buttonhov); } .cr-web-form button:hover { background-color: var(--color-oxideyellow); color: white; transition: var(--global-anim-buttonhov); } /* --------------------------------------------- */ /* --- NEWS ON HOME & NEWS --- */ /* --------------------------------------------- */ section.latestnews { border-top: var(--global-bumperborder) } article.thearticle.list, section.latestnews { padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); } section.latestnews ul { margin: 0; padding: 0; list-style-type: none; } article.thearticle.list article.post-list-block.post, article.latestnews div.post { box-sizing: border-box; display: flex; width: 100%; aspect-ratio: 4 / 1; margin-bottom: var(--global-blockmarg-mid); background-color: var(--color-darkchocolate); clip-path: inset(0% 0% 0% 0% round 0% 0% 0% 20px); } article.thearticle.list article.post-list-block.post div.image, article.latestnews div.post div.image { width: 25%; border: 0px solid gold; } article.thearticle.list article.post-list-block.post div.image img, article.latestnews div.post div.image img { width: 100%; height: 100%; opacity: 1; aspect-ratio: 1/1; object-fit: cover; object-position: center center; clip-path: inset(0% 0% 0% 0% round 0% 20% 0% 20px); } article.thearticle.list article.post-list-block.post div.content, article.latestnews div.post div.content { display: flex; flex-direction: column; justify-content: center; width: 75%; padding: 1rem; padding-left: clamp(0.5rem, 3vw, 3rem); padding-right: clamp(0.5rem, 4vw, 4rem); border: 0px solid gold; } /* adjust links; take the hover text shadow aways, give color */ article.thearticle.list article.post-list-block.post div.content a:hover, article.latestnews div.post div.content a:hover { /* text-shadow: none; */ } article.thearticle.list article.post-list-block.post div.content a h2, article.latestnews div.post div.content a h2 { margin-bottom: 1rem; /* border:1px solid red; */ } article.thearticle.list article.post-list-block.post div.content a h2, article.latestnews div.post div.content a h2, article.thearticle.list article.post-list-block.post div.content a p, article.latestnews div.post div.content a p:not(.readmore) { text-shadow: none; transition: var(--global-anim-link); } article.thearticle.list article.post-list-block.post div.content a:hover h2, article.latestnews div.post div.content a:hover h2, article.thearticle.list article.post-list-block.post div.content a:hover p, article.latestnews div.post div.content a:hover p:not(.readmore) { color: var(--color-realwhite); transition: var(--global-anim-hovlink); } article.thearticle.list article.post-list-block.post div.content p, article.latestnews div.post div.content p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: var(--global-lineheight-shorttext); } article.thearticle.list article.post-list-block.post div.content h2, article.latestnews div.post div.content h2 { padding: 0; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.5rem; } article.thearticle.list article.post-list-block.post div.content p.readmore, article.latestnews div.post div.content p.readmore { margin-bottom: 0; } /* --------------------------------------------- */ /* --- CATEGORY DISPLAY ON HOME & SHOP PAGE --- */ /* --------------------------------------------- */ body.woocommerce-shop article.thearticle.shop ul.products:has(~ li.product-category) { background-color: var(--global-color-content); } article.thearticle.shop ul.products li.product-category { width: 100%!important; aspect-ratio: 4 / 1; display: block; /* THIS WAS ESSENTIAL! */ margin-bottom: var(--global-blockmarg-mid)!important; border: 0px solid red; } article.thearticle.shop ul.products li.product-category a { display: grid; grid-template-columns: 25% 75%; grid-template-rows: auto auto; /* Each row takes an equal fraction of the available space */ grid-template-areas: "firstCol secondCol" "firstCol secondColRow2"; justify-content: center; background-color: var(--color-darkchocolate); clip-path: inset(0% 0% 0% 0% round 0% 0% 0% 20px); } article.thearticle.shop ul.products li.product-category a:hover { /* background-color: var(--color-warmmidgray); */ } article.thearticle.shop ul.products li.product-category a img { grid-area: firstCol; aspect-ratio: 1 / 1; object-fit: cover; object-position: center center; border: 0px; clip-path: inset(0% 0% 0% 0% round 0% 20% 0% 20px); } article.thearticle.shop ul.products li.product-category a h2 { grid-area: secondCol; align-self: end; height: auto; padding: 0rem!important; padding-left: clamp(0.5rem, 3vw, 3rem)!important; padding-right: clamp(0.5rem, 4vw, 4rem)!important; font-family: var(--global-font-headthin); font-weight: var(--global-fontweight-sec-thin); font-size: var(--global-font-h2); color: var(--global-color-h2); text-shadow: none; transition: var(--global-anim-link); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 1rem!important; /* border: 1px solid red; */ } article.thearticle.shop ul.products li.product-category a:hover h2 { color: var(--color-realwhite); transition: var(--global-anim-hovlink); } article.thearticle.shop ul.products li.product-category a div { grid-area: secondColRow2; padding-left: clamp(0.5rem, 3vw, 3rem); padding-right: clamp(0.5rem, 4vw, 4rem); display: block; } article.thearticle.shop ul.products li.product-category a div p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: var(--global-lineheight-shorttext); color: var(--global-color-txt); text-shadow: none; transition: var(--global-anim-link); } article.thearticle.shop ul.products li.product-category a:hover div p { color: var(--color-realwhite); transition: var(--global-anim-hovlink); } article.thearticle.shop ul.products li.product-category a div p.readmore { color: var(--color-oxideyellow); } article.thearticle.shop ul.products li.product-category a:hover div p.readmore { color: var(--color-realwhite); } /* --------------------------------------------- */ /* --- SHOP PAGE - PRODUCT DISPLAY VERSION --- */ /* --------------------------------------------- */ /* body.woocommerce-shop article.thearticle.shop ul.products { */ article.thearticle.shop ul.products.columns-4:not(:has(~ li.product-category)) { background-color: var(--global-color-contentinv); } /* --------------------------------------------- */ /* --- NEWS - SINGLE POST --- */ /* --------------------------------------------- */ body.single-post header.page-header { padding-top: var(--global-blockmarg-top); padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-mid); } body.single-post header.page-header .postdetails { width: max-content; padding: var(--global-halfpadding); padding-left: var(--global-hpadding); padding-right: var(--global-hpadding); font-size: var(--global-font-regular); color: var(--global-color-txt); background-color: var(--color-darkchocolate); border-radius: var(--global-buttonradius); } body.single-post header.page-header span.post_updated, body.single-post header.page-header h1.page-title { display: none; } article.thearticle.single.post { padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); } article.thearticle.single.post p { max-width: var(--global-max-textwidth); } /* --- NEWS - SINGLE POST - back to news button --- */ /* ALSO HOME MORE NEWS BUTTON */ section.latestnews ul.post_category, article.thearticle.single.post ul.post_category { margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } section.latestnews ul.post_category li, article.thearticle.single.post ul.post_category li { box-sizing: border-box; margin: 0; width: auto; /* max-width: 200px; */ height: var(--global-productlistbutheight); text-align: center; /* white-space: nowrap; */ color: var(--color-darkchocolate); background-color: var(--color-darkchocolate); border: var(--dev-border-03); border-radius: var(--global-buttonradius); padding: var(--global-halfpadding); padding-left: var(--global-hpadding); padding-right: var(--global-hpadding); margin-right: var(--global-minimumpadding); } /* --- NEWS - SINGLE POST & PAGES - slick slider > see general image stuff (top) --- */ /* ------------------------------------------------------------------- */ /* -- NEWS CAT & NEWS MAIN ------------------------------------------ */ /* ------------------------------------------------------------------- */ /* ------------------------------------------------------------------- */ /* -- PAGES (recurring elements) ---------------------------------- */ /* ------------------------------------------------------------------- */ article.thearticle.single.page div.maintext h2 { /* padding-top: var(--global-hpadding); */ /* padding-bottom: var(--global-hpadding); */ } /* --- inline lists (aplications pages) --- */ article.thearticle.single.page div.maintext ul { margin-block-start: 0em; margin-block-end: 0em; margin-bottom: var(--global-minimumpadding); padding-left: 0px; list-style-position: inside; font-size: var(--global-font-maintext); line-height: var(--global-lineheight-maintext); color: var(--global-color-txt); } /* --- inline colour images table (aplications pages) --- */ article.thearticle.single.page div.maintext figure.colorlist { overflow-x: auto; /* makes the table somewhat responsive */ width: 100%; margin: 0px; margin-bottom: var(--global-minimumpadding); } article.thearticle.single.page div.maintext figure.colorlist table { /* display: flex; */ /* flex-wrap: wrap; */ max-width: 100%; } article.thearticle.single.page div.maintext figure.colorlist table td { padding: 0; padding-right: var(--global-colordot-margin); } article.thearticle.single.page div.maintext figure.colorlist img { min-width: var(--global-colourdot-minsize)!important; max-width: var(--global-colourdot-maxsize)!important; width: clamp(var(--global-colourdot-minsize), 5vw, var(--global-colourdot-maxsize))!important; height: clamp(var(--global-colourdot-minsize), 5vw, var(--global-colourdot-maxsize))!important; aspect-ratio: 1 / 1; /* does nothing because wordpress gutenberg blocks inline css */ } article.thearticle.single.page p.small { font-size: var(--global-font-regular); } /* ------------------------------------------------------------------- */ /* -- PAGES - APPLICATIONS ---------------------------------- */ /* ------------------------------------------------------------------- */ article.thearticle.single.page .technical { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: var(--global-blockmarg-mid); margin-bottom: var(--global-blockmarg-bot); border: 0px solid red; } article.thearticle.single.page .technical summary { cursor: pointer; } article.thearticle.single.page .technical > div { width: var(--global-width-50); } article.thearticle.single.page .technical > div h2 { margin: 0px; padding: 1rem; font-family: var(--global-font-primary); font-size: var(--global-font-regular); text-transform: none; background-color: var(--global-color-body); } /* Detail / Summary thing in 'what you need' */ article.thearticle.single.page .technical > details, article.thearticle.single.page .technical > div details { color: var(--global-color-txt); border: 1px solid var(--global-color-body); border-top: 0px; } article.thearticle.single.page .technical > details summary, article.thearticle.single.page .technical > div details summary { margin-top: 1rem; padding: 1rem; background-color: var(--global-color-body); } article.thearticle.single.page .technical > div h2:not(h2:first-of-type) { margin-top: 2rem; } article.thearticle.single.page .technical p { font-size: var(--global-font-regular); } article.thearticle.single.page .technical > div.documentation p { margin: 0; padding: 1rem; border: 1px solid var(--global-color-body); border-top: 0px; } article.thearticle.single.page .technical > div.documentation p:last-of-type { font-size: var(--global-font-small); } article.thearticle.single.page .technical > div.whatdoyouneed p { position: relative; margin: 0; padding: 1rem; text-align: center; border: 3px solid var(--global-color-body); /* border-top: 1px solid var(--global-color-body); */ } article.thearticle.single.page .technical > div.whatdoyouneed p::first-line { line-height: 3rem; font-size: var(--global-font-maintext); /* text-decoration: underline; */ } article.thearticle.single.page .technical > div.whatdoyouneed p:not(:first-of-type) { margin-top: 2.2rem; } article.thearticle.single.page .technical > div.whatdoyouneed p:not(:last-of-type):after { content: "+"; font-size: 2rem; font-weight: bold; position: absolute; bottom: -2rem; left: 50%; } /* --------------------------------------------- */ /* --- PAGE - ABOUT US - INLINE IMAGE --- */ /* --------------------------------------------- */ article.thearticle.single.page div.maintext div.wp-block-media-text.ownersblock:first-of-type { margin-top: var(--global-blockmarg-top); } article.thearticle.single.page div.maintext div.wp-block-media-text.ownersblock { max-width: 90%; /* margin: 0 !important; padding: 0 !important; */ padding: var(--global-hpadding) !important; display: flex; justify-content: flex-start; gap: var(--global-hpadding); border-radius: var(--global-buttonradius); background-color: var(--color-darkchocolate); } article.thearticle.single.page div.maintext div.wp-block-media-text.ownersblock figure { width: 300px; max-height: 300px; margin: 0 !important; padding: 0 !important; /* border-radius: 5px; */ border: 0px solid red; } article.thearticle.single.page div.maintext div.wp-block-media-text.ownersblock img { width: 100%; height: 100%; object-fit: cover; } article.thearticle.single.page div.maintext div.wp-block-media-text.ownersblock h2 { padding-top: 0px !important; } article.thearticle.single.page div.maintext div.wp-block-media-text.ownersblock p { font-size: var(--global-font-regular); } /* ------------------------------------------------------------------- */ /* -- FAQ Page (basic design of faq block in single product) -------- */ /* ------------------------------------------------------------------- */ article.thearticle.single.page div.maintext div.qae-faqs-container { margin-top: var(--global-blockmarg-mid); margin-bottom: var(--global-blockmarg-mid); } article.thearticle.single.page div.maintext div.qae-faqs-container h3 { margin-top: var(--global-hpadding); margin-bottom: var(--global-minimumpadding); } /* ------------------------------------------------------------------- */ /* -- GENERAL CONDITIONS PAGE -------- */ /* ------------------------------------------------------------------- */ ol { display: block; list-style-type: decimal; padding-inline-start: 1rem; font-size: var(--global-font-maintext); color: var(--global-color-txt); line-height: var(--global-font-line); } ol > li { margin-bottom: 1rem; } article.thearticle.single.page div.maintext ol ul { list-style-position: outside; margin-top: 1rem; padding-inline-start: 2rem; max-width: 1000px; } /* ------------------------------------------------------------------- */ /* -- RETURNS & REFUNDS PAGE -------- */ /* ------------------------------------------------------------------- */ /* toggle block returns form */ details.product_return_form { max-width: var(--global-max-textwidth); margin-top: 2rem; margin-bottom: 2rem; border: 1px solid var(--color-darkchocolate); border: 1px solid var(--color-oxideyellow) } details.product_return_form summary { padding: 1rem; cursor: pointer; list-style: none; color: var(--global-color-txt); background-color: var(--color-darkchocolate); } details.product_return_form div.details-content { padding: 1rem; } /* ------------------------------------------------------------------- */ /* -- PRIVACY PAGE -------- */ /* ------------------------------------------------------------------- */ p#matomo_opted_in_intro + form { max-width: var(--global-max-textwidth); margin-top: 2rem; margin-bottom: 2rem; padding: 1rem; color: var(--global-color-txt); background-color: var(--color-darkchocolate); border: 1px solid var(--color-darkchocolate); } /* ------------------------------------------------------------------- */ /* -- RECAPTCHA ---------------------------------------- */ /* ------------------------------------------------------------------- */ div.recaptcha-notice { font-size: var(--global-font-xsmall); } /* ------------------------------------------------------------------- */ /* -- WOOCOMMERCE UI ELEMENTS ---------------------------------------- */ /* ------------------------------------------------------------------- */ /* WOO NOTICE WRAPPER STUFF */ div.woocommerce-notices-wrapper { position: absolute; top: var(--global-headerheight); z-index: 110; width: var(--global-width-max); max-width: var(--global-width-100); /* background: var(--global-woo-notice-bg); */ border: var(--dev-border-03); border-bottom: var(--dev-border-01); } div.woocommerce-message, div.woocommerce-info { margin: auto; width: var(--global-width-100); max-width: var(--global-width-content); padding-left: calc(var(--global-blockpadding)); padding-right: var(--global-blockpadding); color: var(--color-darkchocolate); background-color: var(--global-woo-notice-msg-bg); border-bottom: 1px solid var(--color-warmmidgray); } /* CHECKOUT - FORM ERRORS FORMATTING */ article.thearticle.single.page div.maintext ul.woocommerce-error { padding-left: calc(var(--global-blockpadding)); padding-right: 0; text-align: left; } article.thearticle.single.page div.maintext ul.woocommerce-error strong, article.thearticle.single.page div.maintext ul.woocommerce-error a { color: var(--color-darkchocolate); } .woocommerce form .form-row.woocommerce-invalid label { color: var(--color-oxideyellow); } .woocommerce form .form-row .required { color: var(--color-oxideyellow); } /* .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--color-oxideyellow); } */ .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--color-baroquewhite); } .woocommerce-checkout .checkout .checkout-inline-error-message { color: var(--color-baroquewhite); } /* WOO ERROR FORM AFTER ORDER */ form#order_review table.shop_table { background-color: var(--color-darkchocolate); margin-bottom: var(--global-vpadding); } form#order_review th, form#order_review td { color: var(--global-color-txt); } /* NO ITEMS IN CART (inline in cart page) */ div.maintext div.cart-empty.woocommerce-info { margin: 0px; padding: 0px; font-size: var(--global-font-maintext); color: var(--global-color-txt); background-color: var(--global-color-content); border: 0px; } div.maintext div.cart-empty.woocommerce-info::before { content: ""; } div.maintext p.return-to-shop { margin-top: var(--global-blockmarg-top); margin-bottom: var(--global-topmainmargin); } div.maintext p.return-to-shop a.button.wc-backward { font-weight: 400; font-size: var(--global-font-regular); color: var(--global-color-link); background-color: var(--color-darkchocolate); } div.maintext p.return-to-shop a.button.wc-backward::before { content: "\00AB"; } div.maintext p.return-to-shop a.button.wc-backward:hover { color: var(--global-color-hovlink); background-color: var(--color-warmmidgray); } /* --------------------- */ /* ---- PAGINATION ----- */ /* WORKS FOR SHOP & NEWS!! */ /* --------------------- */ nav.navigation.pagination, nav.woocommerce-pagination { margin-top: var(--global-vpadding); } nav.navigation.pagination div.nav-links, nav.woocommerce-pagination ul.page-numbers { border: none; text-align: center; } nav.navigation.pagination div.nav-links span, nav.navigation.pagination div.nav-links a { display: inline-block; padding: .5em; min-width: 1em; margin-right: 0.5rem; font-size: 1em; font-weight: 400; line-height: 1; text-align: center; } nav.navigation.pagination div.nav-links a, nav.woocommerce-pagination ul.page-numbers li { color: var(--color-realwhite); background-color: var(--color-warmmidgray); margin-right: 0.5rem; } nav.navigation.pagination div.nav-links a:hover, nav.navigation.pagination div.nav-links span.page-numbers.current, nav.woocommerce-pagination ul.page-numbers li a:hover, nav.woocommerce-pagination ul.page-numbers li span.current { color: var(--color-realwhite); background-color: var(--color-oxideyellow); } nav.navigation.pagination div.nav-links span.page-numbers a, nav.woocommerce-pagination ul.page-numbers li a { color: var(--color-baroquewhite); } /* BUTTONS */ input.submit, button.button { height: var(--global-buttonheight)!important; min-width: var(--global-buttonminwidth)!important; padding: 0!important; padding-left: var(--global-buttonpadding)!important; padding-right: var(--global-buttonpadding)!important; font-family: var(--global-buttonfontfam)!important; font-size: var(--global-font-regular)!important; font-weight: var(--global-buttonfontweight)!important; text-transform: uppercase; color: var(--global-color-buttxt)!important; background-color: var(--global-color-buttonbg)!important; border: var(--global-bordersize) solid var(--global-color-butborder)!important; border-radius: var(--global-buttonradius)!important; transition: var(--global-anim-button); } input.submit:hover, button.button:hover { color: var(--global-color-buttxthov)!important; background-color: var(--global-color-buttonbghov)!important; border: var(--global-bordersize) solid var(--global-color-butborderhov)!important; transition: var(--global-anim-buttonhov); } /* BUTTONS - Exceptions */ /* !! product list item button: see below - product list item */ /* ------------------------------------------------------------------- */ /* -- WOOCOMMERCE LIST BLOCKS ---------------------------------------- */ /* ------------------------------------------------------------------- */ /* the product blocks in single product & woo archive page */ div.cross-sells.woocommerce, body.home section.products, body.page section.products, body.archive section.products, article.thearticle.shop section.products { padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); color: var(--global-color-txtinv); border-top: var(--global-bumperborder); background-color: var(--global-color-contentinv); } div.cross-sells.woocommerce h2, body.home section.products h2, body.page section.products h2, body.archive section.products h2, article.thearticle.shop section.products h2 { color: var(--global-color-hinv); } /* correction for recently viewed block & cross sells */ body.home section.products.viewed, body.archive section.products.viewed, article.thearticle.shop section.products.viewed { display: flex; flex-direction: column; } div.cross-sells.woocommerce > div, body.home section.products.viewed > div, body.archive section.products.viewed > div, article.thearticle.shop section.products.viewed > div { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; border: var(--dev-border-01); } body.home ul.products, body.archive ul.products, article.thearticle.shop ul.products { /* WOO uses floats - do nothing */ justify-content: space-between; /* works for the flex, not with woo*/ margin: 0px; padding: 0px; border: var(--dev-border-01); } /* --- ARCHIVES --- */ article.thearticle.shop > ul.products { margin: 0px; padding-top: var(--global-blockmarg-top); padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); background-color: var(--global-color-contentinv); /* for achives */ } div.woocommerce.columns-4, ul.products { width: 100%; } ul.products::before, ul.products::after { /* LEAVE THE AFTER FOR CLEARING FLOATS ETC (woo) */ /* display: none!important; */ } /* ------------------------------------------------------------------- */ /* -- WOOCOMMERCE LIST ITEMS- QUICK SALE BLOCK ----------------------- */ /* ------------------------------------------------------------------- */ .quick-sale { padding-top: var(--global-blockmarg-top); padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); background-color: var(--global-color-contentinv); /* for achives */ border-top: var(--global-bumperborder); } /* ------------------------------------------------------------------- */ /* -- WOOCOMMERCE LIST ITEMS ---------------------------------------- */ /* ------------------------------------------------------------------- */ ul.products li.product { /* ABOUT ALIGNING THE LI ELEMENTS ON A ROW */ /* WOO + W2C schools + Wiz solution */ /* -- solution causes height problem in top part of the grid below */ float: left; width: calc(25% - 1rem)!important; min-width: 165px!important; margin: 0px!important; margin-right: 1.32rem!important; margin-bottom: 2.75rem!important; /* ABOUT WHAT's IN THE ELEMENT */ display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: "listitem-top" "listitem-bottom"; gap: 0px 0px; border: var(--dev-border-03); } /* BOF product list item (content of UL grid) */ ul.products li.product a.woocommerce-loop-product__link, ul.products li.product a.woocommerce-LoopProduct-link { grid-area: listitem-top; height: 100%!important; width: 100%!important; margin: 0!important; display: grid!important; /* img | h2 | rating | description | price */ /* grid-template-rows: [row1] 1fr [row2] 2rem [row3] 1.5rem [row4] 4rem [row5] 2.5rem; */ grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; grid-template-areas: "listitem-img" "listitem-title" "listitem-rating" "listitem-description" "listitem-price"; justify-content: space-between; align-items: center; border: var(--dev-border-03); text-shadow: none; } ul.products li.product a.woocommerce-LoopProduct-link:hover span, ul.products li.product a.woocommerce-LoopProduct-link:hover div { text-shadow: none; } /* product list buttons */ li.product a.button { box-sizing: border-box; margin: 0!important; width: 100%; max-width: 100%; grid-area: listitem-bottom; /* grid-area: 2 / 1 / 3 / 2; */ height: var(--global-productlistbutheight); text-align: center; color: var(--color-darkchocolate); background-color: var(--color-baroquewhite)!important; border: var(--dev-border-03); border-radius: var(--global-buttonradius); } li.product a.button:hover { color: var(--color-realwhite); background-color: var(--color-oxidepurple)!important; } ul.products li.product:nth-child(4n) { margin-right: 0rem!important; } /* BOF product list item (content of A grid) */ ul.products li.product a img { /* grid-row: row1 / span 1; */ grid-area: listitem-img; box-sizing: border-box; margin: 0!important; height: 100%!important; /* aspect-ratio: 1 / 1; */ width: 100%!important; max-width: 100%!important; min-width: 100%!important; object-fit: cover; object-position: center center; border: 1px solid var(--global-color-txt); } ul.products li.product a:hover img { border: 1px solid var(--global-color-txtinv); } ul.products li.product a h2 { grid-area: listitem-title; margin: 0!important; padding: 0!important; padding-top: var(--global-halfpadding)!important; padding-left: var(--global-micropadding)!important; display: inline-block; box-sizing: border-box; width: 100%; height: 100%; border: var(--dev-border-01); overflow: hidden; place-self: center stretch; font-family: var(--global-font-headregular); font-size: var(--global-font-h3); color: var(--global-color-txtinv); } ul.products li.product a div.rating-and-review-count-wrapper { grid-area: listitem-rating; } ul.products li.product a div.rating-and-review-count-wrapper div.product-review-count { display: flex; flex-direction: row; padding-left: var(--global-micropadding); align-items: center; justify-content: flex-start; color: var(--color-baroquewhite); } ul.products li.product a div.rating-and-review-count-wrapper div.product-review-count.gotreviews { color: var(--color-baroquewhite); } ul.products li.product a div.rating-and-review-count-wrapper div.star-rating { display: none; } ul.products li.product a div.rating-and-review-count-wrapper div.star-rating.wiz { margin: 0!important; display: inline-block; box-sizing: border-box; } ul.products li.product a div.rating-and-review-count-wrapper div.ratingtext { margin-left: var(--global-micropadding); } ul.products li.product a div.woocommerce-short-product-description { grid-area: listitem-description; box-sizing: border-box; width: 90%; height: 3.2rem; padding-top: var(--global-halfpadding); padding-bottom: var(--global-halfpadding); padding-left: var(--global-micropadding); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: var(--global-font-line); color: var(--global-color-txtinv); } ul.products li.product a span.price { grid-area: listitem-price; margin: 0!important; padding: 1rem; padding-left: var(--global-micropadding); display: inline-block; box-sizing: border-box; width: 100%; height: 100%; place-self: center stretch; color: var(--global-color-txtinv)!important; font-family: var(--global-font-secondary-regular)!important; font-size: var(--global-font-listprice)!important; font-weight: var(--global-fontweight-sec-bold)!important; } ul.products li.product a span.price span.woocommerce-Price-currencySymbol { display: inline-block; margin-right: 0.25rem; } ul.products li.product a span.price small.woocommerce-price-suffix { display: none; } ul.products li.product.sale span.onsale { padding: 1rem!important; font-family: var(--global-font-secondary-regular); font-size: 1.5rem; text-transform: uppercase; background-color: var(--color-oxidepurple); margin: -0.64em -0.64em 0 0; } /* EOF product list item */ /* ------------------------------------------------------------------- */ /* -- SINGLE PRODUCTS - the summary --------------------------------- */ /* ------------------------------------------------------------------- */ article.thearticle.shop div.product { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-top: var(--global-blockmarg-top); padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); color: var(--global-color-hinv); background-color: var(--global-color-contentinv); border-top: var(--global-bumperborder); } .woocommerce div.product div.images { margin-bottom: var(--global-vpadding); } article.thearticle.shop > div.product > div.summary.entry-summary { width: var(--global-width-50); max-width: var(--global-maxwidth-50); } /* elements of the single products summary */ div.product > span.onsale { padding: 1rem!important; font-family: var(--global-font-secondary-regular); font-size: 1.5rem; text-transform: uppercase; background-color: var(--color-oxidepurple); /* top / right / bottom / left */ margin: calc(var(--global-blockmarg-bot) - 1.5rem - 0.5rem) 0 0 calc(var(--global-blockpadding) + 1.5rem); } div.summary.entry-summary h1.product_title { font-family: var(--global-font-headregular); font-size: var(--global-font-h2); line-height: var(--global-font-line-h3); color: var(--color-warmmidgray); } /* ratings (also in lists) */ .woocommerce .star-rating span { color: var(--color-baroquewhite); } a.woocommerce-review-link { color: var(--color-baroquewhite); text-shadow: none; } a.woocommerce-review-link:hover { color: var(--color-warmmidgray); } div.summary.entry-summary .woocommerce-product-rating { margin-bottom: var(--global-vpadding); } /* price at the top */ .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price, div.summary.entry-summary p.price { font-family: var(--global-font-headlight); font-weight: var(--global-fontweight-sec-regu); font-size: var(--global-font-singleprice); color: var(--global-color-txtinv); text-transform: uppercase; } div.summary.entry-summary p.price span.woocommerce-Price-currencySymbol { display: inline-block; margin-right: var(--global-micropadding); } div.summary.entry-summary p.price span.woocommerce-Price-amount.amount { color: var(--global-color-txtinv); } div.summary.entry-summary p.price ins span.woocommerce-Price-amount.amount, div.summary.entry-summary p.price del span.woocommerce-Price-amount.amount { font-weight: var(--global-fontweight-sec-regu)!important; color: var(--color-darkchocolate); } div.summary.entry-summary p.price ins { text-decoration: none!important; } /* prince ex vat (at the top) */ div.summary.entry-summary p.price .woocommerce-price-suffix { display: none; font-size: var(--global-font-regular); color: var(--global-color-txtinv); } /* short & variation descriptions */ div.productdescription { /* padding-top: var(--global-blockmarg-top); */ padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); } div.summary.entry-summary div.woocommerce-product-details__short-description p { color: var(--global-color-txtinv); } div.summary.entry-summary div.single_variation_wrap div.woocommerce-short-product-description { margin-bottom: 1rem; font-weight: var(--global-fontweight-prim-medi); } div.summary.entry-summary div.woocommerce-variation-description p { margin-block-start: 0; margin-block-end: 0; color: var(--global-color-txtinv); } /* stock mesage */ div.woocommerce-variation-availability { margin-top: 0; } p.stock.in-stock { margin-top: var(--global-blockmarg-mid); font-size: var(--global-font-regular)!important; color: var(--global-color-txt)!important; } p.stock.available-on-backorder { margin-top: var(--global-blockmarg-mid); color: var(--global-color-txtinv)!important; } p.stock.out-of-stock { margin-top: var(--global-blockmarg-mid); color: var(--color-oxideyellow)!important; } /* Total Price (subtotal) -- ALL PRODUCTS*/ div.woocommerce-variation-add-to-cart.variations_button { margin-top: var(--global-minimumpadding); } div.summary.entry-summary div#total_price_placeholder { margin-bottom: var(--global-halfpadding); font-family: var(--global-font-headlight); font-weight: var(--global-fontweight-sec-regu); font-size: var(--global-font-regular); color: var(--global-color-txtinv); text-transform: uppercase; } div.summary.entry-summary div#total_price_placeholder span.total-price-value span.woocommerce-Price-currencySymbol { display: inline-block; margin-right: var(--global-micropadding); } /* price ex btw */ div.summary.entry-summary div#total_price_placeholder span.total-price-value span.woocommerce-price-suffix { display: inline-block; margin-left: var(--global-halfpadding); font-size: var(--global-font-xsmall); color: var(--global-color-txtinv); } /* Add To Cart button & Quantity selector */ div.quantity { display: flex; flex-direction: row; } div.quantity input[type="number"] { appearance: textfield!important; -webkit-appearance: textfield!important; -webkit-appearance: textfield!important; box-sizing: border-box; height: var(--global-buttonheight); width: var(--global-buttonheight); font-size: var(--global-biginput); border: 1px solid var(--global-color-content); } div.quantity button.minus, div.quantity button.plus { appearance: textfield; -webkit-appearance: textfield; -moz-appearance: textfield; box-sizing: border-box; margin: 0px; padding-inline: 0px; height: var(--global-buttonheight); width: var(--global-buttonheight); font-size: var(--global-biginput); background-color: var(--global-color-contentinv); border: 1px solid var(--global-color-content); cursor: pointer; } div.quantity button.minus { border-right: 0px; } div.quantity button.plus { border-left: 0px; } div.quantity button.minus:hover, div.quantity button.plus:hover { background-color: var(--color-baroquewhite); } div.summary.entry-summary button.single_add_to_cart_button.button { margin-left: var(--global-micropadding); font-family: var(--global-font-secondary-thin)!important; border-radius: 0px!important; /* color: var(--color-darkchocolate)!important; background-color: var(--color-oxideyellow)!important; */ } div.summary.entry-summary div.product_meta > span { display: block; text-transform: none; color: var(--global-color-txtinv); } /* ------------------------------------------------------------------- */ /* -- SINGLE PRODUCTS (all) - BELOW THE SUMMARY --------------------- */ /* ------------------------------------------------------------------- */ div.wiz-mod-product-info-block { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); /* border: 1px solid green; */ border-top: var(--global-bumperborder); } div.wiz-mod-product-info-block > div { width: var(--global-width-50); max-width: var(--global-maxwidth-50); margin-bottom: var(--global-vpadding); } div.wiz-mod-product-info-block-container { display: flex; flex-direction: column; flex-wrap: wrap; } div.wiz-mod-product-info-block-container > h2 { border: var(--dev-border-01); } div.wiz-mod-product-info-block-container div { border: var(--dev-border-01); } div.wiz-mod-product-info-block-container div > h2 { margin: 0; padding: 1rem; height: var(--global-rowheight); font-family: var(--global-font-primary); font-size: var(--global-font-basesize); font-weight: var(--global-fontweight-prim-bold); text-transform: none; background-color: var(--global-color-body); } /* -------------------------------- */ /* DOCUMENTS */ /* -------------------------------- */ div.product-documents.container ul { list-style-type: none; padding: 0; margin: 0; margin-bottom: var(--global-vpadding); } div.product-documents.container li { padding: 1rem; height: var(--global-rowheight); color: var(--global-color-txt); border: 1px solid var(--global-color-body); } div.product-documents.container li span.pdf-size { color: var(--global-color-txtinv); } /* -------------------------------- */ /* SPECIFICATIONS (additional tab) */ /* -------------------------------- */ div.wiz-mod-product-additional-data-block > h2 { display: none; } div.wiz-mod-product-additional-data-block table.shop_attributes { border-collapse: collapse; margin-bottom: 0; border: 1px solid var(--global-color-body); } div.wiz-mod-product-additional-data-block table.shop_attributes td, div.wiz-mod-product-additional-data-block table.shop_attributes th { border: 1px solid var(--global-color-body); text-align: left; padding-left: var(--global-minimumpadding); font-weight: var(--global-fontweight-prim-regu); color: var(--global-color-txt); } div.wiz-mod-product-additional-data-block table tr { height: var(--global-rowheight); } /* -------------------------- */ /* FAQ BOX */ /* -------------------------- */ div.product-faq-box { /* border: 1px solid blue; */ } div.product-faq-box p.faqsubtext { margin: 0px; padding: 0px; } div.product-faq-box p.faqsubtext span.nofaq { display: block; box-sizing: border-box; min-height: var(--global-rowheight); margin: 0; margin-bottom: 1rem; padding: 1rem; font-family: var(--global-font-primary); font-size: var(--global-font-basesize); font-weight: var(--global-fontweight-prim-bold); text-transform: none; background-color: var(--global-color-body); } div.product-faq-box ul.qe-faqs-filters-container { display: none; } div.product-faq-box .test { display: none; } div.product-faq-box div.qe-faq-toggle { margin-bottom: var(--global-minimumpadding); } div.product-faq-box div.qe-toggle-title { min-height: var(--global-rowheight); } div.product-faq-box div.qe-faq-toggle:last-child { margin-bottom: var(--global-vpadding); } /* inline CSS taken from the plugin */ .qe-faq-toggle .qe-toggle-title h4, .qe-faq-list .qe-list-title h4{ color:#d6c9c1; } .qe-faq-toggle .qe-toggle-title:hover h4, .qe-faq-list .qe-list-title:hover h4{ color:#d6c9c1; } .qe-faq-toggle .qe-toggle-title{ background-color:#35302c; } .qe-faq-toggle .qe-toggle-title:hover{ background-color:#645d55; } .qe-faq-toggle .qe-toggle-content, .qe-faq-list .qe-list-content{ color:#d6c9c1; } .qe-faq-toggle .qe-toggle-content, .qe-faq-list .qe-list-content{ background-color:#3f3934; } .qe-faq-toggle .qe-toggle-content, .qe-faq-toggle .qe-toggle-title{ border-color:#35302c; } .qe-faq-toggle.active .qe-toggle-title { background-color: #35302c; } .qe-faq-toggle.active .qe-toggle-title:hover { background-color: #645d55; } .qe-faq-toggle .qe-toggle-title h4 .fa { display: none; } /* -------------------------- */ /* REVIEWS */ /* -------------------------- */ div.wiz-mod-product-reviews-block { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-bot); background-color: var(--global-color-pagediv); border-left: 1px solid var(--global-color-content); border-right: 1px solid var(--global-color-content); border-top: var(--global-bumperborder); } /* Block title */ div.wiz-mod-product-reviews-block h2 { width: 100%; padding-bottom: var(--global-vpadding); border: var(--dev-border-02); } /* -------------------------- reviews plugin wiz-addons - the blocks -------------------------- */ div.productreviews.container.first { font-size: var(--global-font-regular); min-width: var(--global-width-30); max-width: var(--global-width-30); border: var(--dev-border-03); } div.productreviews.container.second { font-size: var(--global-font-regular); min-width: var(--global-width-70); max-width: var(--global-width-70); border: var(--dev-border-04); } /* Summary container (stars) */ .reviews-summary { font-family: var(--global-font-primary); font-size: var(--global-font-small); color: var(--global-color-txt); margin-bottom: var(--global-blockmarg-mid); max-width: 400px; border: var(--dev-border-04); } /* -------------------------- reviews plugin wiz-addons - the elements ----------------------- */ /* --------------------------- */ /* REVIEWS BLOCK TITLE */ /* (top of the block) */ /* --------------------------- */ div.totalratingandreview { display: flex; direction: row; align-items: baseline; margin-bottom: var(--global-vpadding); border: var(--dev-border-04); } div.totalratingandreview div.star-rating { margin-right: 0.5rem; } div.totalratingandreview div.text { color: var(--global-color-txt); } div.productreviews.container .star-rating { float: none; } div.productreviews.container .star-rating span { color: var(--color-oxideyellow); } div.productreviews.container .star-rating::before { color: var(--color-oxideyellow); } /* --------------------------- */ /* REVIEWS SUMMARY */ /* (star bars block) */ /* --------------------------- */ /* Individual star rating line */ .stars-rating { box-sizing: border-box; display: flex; align-items: center; border: var(--dev-border-01); } /* The label showing the number of stars */ .stars-rating-label { width: 60px; padding-right: 0.5rem; text-align: right; white-space: nowrap; border: var(--dev-border-02); } /* container of the rating bar */ .stars-rating-bar-block { flex-grow: 1; border: var(--dev-border-01); } /* bar bg */ .stars-rating-bar-base { position: relative; z-index: 9; height: 6px; /* Height of the bar */ width: 100%; background-color: var(--color-warmmidgray); border-radius: 3px; } /* bar actual percentage */ .stars-rating-bar { position: relative; z-index: 10; height: 6px; /* Height of the bar */ background-color: var(--color-oxideyellow); /* Gold color, similar to the stars */ opacity: 1; border-radius: 3px; transition: width 0.3s ease; /* Smooth transition for the bar widths */ } /* Text showing the number of reviews */ .stars-rating-count { width: 100px; padding-left: 0.5rem; text-align: left; white-space: nowrap; border: var(--dev-border-03); } /* ---------------------- */ /* The comment form */ /* */ /* ---------------------- */ div.review-form-container { margin-bottom: var(--global-blockmarg-mid); border: var(--dev-border-02); } /* ---- comment form title ---- */ div.productreviews.container.first details > summary::before { box-sizing: border-box; content: "\25B8"; position: absolute; margin-left: -2.5rem; width: 26px; height: 26px; font-size: var(--global-font-h3); color: var(--global-color-h2); text-align: center; padding-left: 2px; padding-bottom: 4px; border: 1px solid var(--global-color-h2); border-radius: 50%; transform: rotate(0deg); transition: transform 0.5s; } div.productreviews.container.first details[open] > summary::before { transform: rotate(90deg); transition: transform 0.5s; } div.productreviews.container.first details > summary { margin-left: 2.5rem; list-style-type: none; cursor: pointer; } div.productreviews.container.first details > summary h2 { display: inline; margin: 0; padding: 0; } /* -- 'not logged in' BOF -- */ div.productreviews.container.first details > summary.notallowed h2 { color: var(--color-warmmidgray); } div.productreviews.container.first details > summary.notallowed::before, div.productreviews.container.first details[open] > summary.notallowed::before { color: var(--color-warmmidgray); border: 1px solid var(--color-warmmidgray); } div.productreviews.container.first details.notallowed { /* display: none; */ } /* -- 'not logged in' EOF -- */ /* ---- comment form form ---- */ #review_form div.review-instructions { margin-top: 2rem; padding: 1rem; font-size: var(--global-font-small); border: 1px solid var(--color-warmmidgray); border-radius: var(--global-borderradius); } #review_form span.comment-reply-title { display: block; margin-top: 2rem; font-family: var(--global-font-headregular); font-size: var(--global-font-regular); color: var(--global-color-txt); text-transform: uppercase; } #review_form p.must-log-in { display: none; } #review_form form.comment-form { color: var(--global-color-txt); } #review_form form.comment-form span.required { color: var(--color-oxideyellow); } #review_form form.comment-form label { display: block; width: 100%; margin-top: 1rem; margin-bottom: 0.5rem; } #review_form form.comment-form input:not(.submit) { box-sizing: border-box; display: block; width: 100%; max-width: 100%; height: 2.3rem; background-color: var(--global-color-txt); border-radius: 5px; } #review_form form.comment-form textarea { resize: none; width: 100%; max-width: 100%; background-color: var(--global-color-txt); border-radius: 5px; } #review_form form.comment-form input::placeholder, #review_form form.comment-form textarea::placeholder { font-family: var(--global-font-primary); font-size: var(--global-font-small); color: var(--color-warmmidgray); } details > .details-content { overflow: hidden; max-height: 0; transition: max-height 0.4s ease-in-out; } /* ---------------------- */ /* The comment list */ /* (divs) */ /* ---------------------- */ div.commentlist.container div.single-review.block { display: flex; flex-direction: column; margin-top: 1rem; padding: 1rem; color: var(--global-color-txt); border: 1px solid var(--color-warmmidgray); } div.commentlist.container div.single-review.block.itsyourreview { border: 1px solid var(--color-oxideyellow); } div.commentlist.container div.single-review.block.reply { display: none; /* REPLIES ARE DISABLED FOR NOW */ border: 1px solid var(--color-oxidepurple); border-top: 0px; } div.commentlist.container div.single-review.block:first-child, div.commentlist.container div.single-review.block.reply { margin-top: 0; } div.commentlist.container div.single-review.header, div.commentlist.container div.single-review.footer { display: flex; flex-direction: row; justify-content: space-between; } div.commentlist.container div.single-review.header { margin-bottom: 2rem; } div.commentlist.container div.single-review.footer { margin-top: 1rem; justify-content: flex-start; } div.commentlist.container div.single-review.title { font-size: var(--global-font-regular); font-weight: var(--global-fontweight-prim-bold); } div.commentlist.container div.single-review.review div.longtxt { display: -webkit-box; height: 4.5rem; line-height: var(--global-font-line); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: height 0.4s ease-in-out; /* Smooth transition for max-height */ } div.commentlist.container div.single-review.review div.longtxt p { margin-bottom: 0rem; } div.commentlist.container div.single-review.review div.longtxt.open { -webkit-line-clamp: none; } div.commentlist.container div.single-review.review .readmoreless { display: inline-block; padding-top: 1rem; cursor: pointer; color: var(--color-oxideyellow); text-decoration: none; } div.commentlist.container div.single-review.review .readmoreless:hover { color: var(--color-baroquewhite); } div.commentlist.container div.single-review.review .readmoreless::before { content: "\2C7\00a0"; font-weight: var(--global-fontweight-prim-bold); text-decoration: none; } div.commentlist.container div.single-review.review .readmoreless.open::before { content: "\2C6\00a0"; font-weight: var(--global-fontweight-prim-bold); text-decoration: none; } div.commentlist.container div.single-review.author { color: var(--color-warmmidgray); } div.commentlist.container div.single-review.author::first-letter { text-transform: uppercase } div.commentlist.container div.single-review.author .verified-owner { display: none; color: var(--color-baroquewhite); } div.commentlist.container div.single-review.date { color: var(--color-warmmidgray); } div.commentlist.container div.single-review.date::before { content: '-\00a0'; } /* ------------------------------------------------------------------- */ /* -- SINGLE PRODUCTS VARIABLE --------------------------- */ /* ------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- */ /* AVAILABLE COULOURS INFO - Variable Products & Application Pages (!!) */ /* ---------------------------------------------------------------------- */ div.colour-description-text { padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); } div.colour-description-text h2 { padding-top: 0; } div.available-colours-img-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-bottom: var(--global-blockmarg-mid); width: var(--setcolordotspace); } div.available-colours-img { width: var(--global-colourdot-size); min-width: var(--global-colourdot-minsize); max-width: var(--global-colourdot-maxsize); margin-right: var(--global-colordot-margin); cursor: pointer; border-radius: 50%; } div.available-colours-img img { /* height: 100%; */ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 1px solid var(--color-darkchocolate); box-shadow: 0px 3px 15px rgba(0,0,0,0.5); } div.available-colours-img:hover img { border: 1px solid var(--color-darkchocolate); box-shadow: 0px 3px 15px rgba(0,0,0,0.2); } div.available-colours-name { display: none; } /* The colour info box container */ div.colour-post-container { position: relative; margin-bottom: var(--global-blockmarg-bot); /* show-hide */ max-height: 0px; overflow: hidden; transition: var(--global-colorslideout); } div.colour-post-container.opencolourinfo { border-top: 1px solid var(--color-warmmidgray); height: auto; /* show-hide */ max-height: 1000px; overflow: visible; transition: var(--global-colorslidein); } /* The colour info box itself */ div.colour-post { max-height: 0px; overflow: hidden; transition: var(--global-colorslideout); border: var(--dev-border-01); } div.colour-post.showcolourinfo { max-height: 1000px; overflow: visible; transition: var(--global-colorslidein); } div.colour-post-content { padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-top: var(--global-vpadding); padding-bottom: var(--global-vpadding); } div.colour-post-title-bar { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin-top: var(--global-blockmarg-mid); margin-bottom: var(--global-vpadding); } div.colour-post-title { font-family: var(--global-font-secondary-thin); font-size: var(--global-font-h3); text-transform: uppercase; color: var(--color-realwhite); } div.closecolourinfo { width: 1.65rem; height: 1.65rem; font-family: var(--global-font-secondary-regular); font-size: var(--global-font-basesize); text-align: center; color: var(--color-darkchocolate); border-radius: 50%; background-color: var(--color-baroquewhite); cursor: pointer; } div.colour-post .custom-post-content { margin-bottom: var(--global-blockmarg-mid); } div.colour-post .custom-post-content p { /* display: inline-block; */ max-width: var(--global-max-textwidth); border: var(--dev-border-01); } /* ADJUSTMENTS FOR COLOUR INFO ON PAGES ( - applications ) */ article.thearticle.single.page div.colour-post-content, article.thearticle.single.page div.available-colours-img-list, article.thearticle.single.page div.colour-description-text { padding-left: 0; padding-right: 0; } article.thearticle.single.page div.colour-description-text h2 { padding-top: var(--global-blockmarg-top); } /* -- > COLOUR POSTS - slick slider > see general image stuff (top) -- */ /* -------------------------------------- */ /* SINGLE PRODUCT VARIABLE - THE PRODUCT */ /* -------------------------------------- */ /* -------------------------- */ /* VARIABLE SELECT - CONTENT */ /* -------------------------- */ .woocommerce div.product form.cart .variations { margin-bottom: 0; text-align: left; font-family: var(--global-font-headlight); font-size: var(--global-font-size-varselect); font-weight: var(--global-fontweight-sec-bold); text-transform: uppercase; color: var(--global-color-txtinv); border-collapse: collapse; border: var(--dev-border-01); } .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { padding-bottom: var(--global-halfpadding); color: var(--global-color-txt); line-height: 1rem; vertical-align: bottom; vertical-align: middle; border-bottom: var(--dev-border-01); } .woocommerce div.product form.cart .variations select { box-sizing: border-box; padding: 0.3rem; /* width: 100%; */ /* height: var(--global-font-size-varselect); */ margin: 0; font-family: var(--global-font-secondary-16); font-size: var(--global-font-regular); color: var(--global-color-txtinv); background-color: var(--global-color-contentinv); border: 0; border: 1px solid var(--color-baroquewhite); /* border-radius: var(--global-buttonradius); */ } .woocommerce div.product form.cart .variations a.reset_variations { display: none!important; } /* -------------------------- */ /* VARIABLE SELECT - COLOURS */ /* -------------------------- */ div.variable-colours-images { display: flex; flex-direction: column; /* min-height: 200px; */ margin-bottom: var(--global-vpadding); } /* CHOSEN COLOR TEXT */ div.variable-colours-images div.variable-colours-images-text { width: 100%; /* margin-bottom: var(--global-hpadding); */ font-family: var(--global-font-headlight); font-size: var(--global-font-size-varselect); font-weight: var(--global-fontweight-sec-bold); text-transform: uppercase; cursor: default; } div.variable-colours-images div.variable-colours-images-text p { margin-top: 0; } div.variable-colours-images div.variable-colours-images-text span { display: inline-block; border: var(--dev-border-01); } div.variable-colours-images div.variable-colours-images-text span.chosen-colour-label { /* width: calc(40% - var(--global-halfpadding)); */ margin-right: var(--global-halfpadding); } div.variable-colours-images div.variable-colours-images-text span.chosen-colour { color: var(--color-warmmidgray); } /* THE COLOR SELECTOR */ div.variable-colours-images-imagescontainer { display: flex; flex-direction: row; flex-wrap: wrap; border: var(--dev-border-01); } div.variable-colours-images-imagescontainer > div { width: var(--global-colourdot-size-select); min-width: var(--global-colourdot-minsize); max-width: var(--global-colourdot-maxsize-select); margin-right: var(--global-colordot-margin); cursor: pointer; border: var(--dev-border-02); } div.variable-colours-images-imagescontainer div img { cursor: pointer; border: 2px solid white; border-radius: 50%; } div.variable-colours-images-imagescontainer div.selected img, div.variable-colours-images-imagescontainer div img:hover{ border: 2px solid var(--color-baroquewhite); } div.variable-colours-images-imagescontainer div div.attribute-name { display: none; width: 100%; margin-bottom: var(--global-halfpadding); font-family: var(--global-font-secondary-light); font-size: var(--global-font-xxsmall); letter-spacing: -0.50px; line-height: var(--global-font-xxsmall); text-transform: uppercase; color: var(--color-warmmidgray); text-align: center; } /* DISABLE COLOUR VARIATION */ table.variations tr.hidevariationselect { display: none; } div.summary.entry-summary div.single_variation_wrap { margin-top: var(--global-minimumpadding); margin-top: var(--global-vpadding); } /* ------------------------------------------------------------------- */ /* -- CART & CHECKOUT ------------------------------------------------ */ /* ------------------------------------------------------------------- */ /* ---------------- */ /* --- CART --- */ /* ---------------- */ /* Free Shipping Nag Bar ------ */ div.wpcfb-wrap { color: var(--global-color-txt); margin-bottom: var(--global-minimumpadding); } /* CART TABLE ------ */ table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents { background-color: var(--color-darkchocolate); color: var(--global-color-txt); } .woocommerce table.shop_table td { border-top: 1px solid var(--color-warmmidgray); } td.product-quantity div.quantity input[type="number"], td.product-quantity div.quantity button.minus, td.product-quantity div.quantity button.plus { height: var(--global-buttonheightmini); width: var(--global-buttonheightmini); } .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img { width: 75px; } /* CART TOTAL ------ */ div.cart_totals table { background-color: var(--color-darkchocolate); color: var(--global-color-txt); } div.cart_totals table tr th, div.cart_totals table tr td { border-top: 1px solid var(--color-warmmidgray) !important; } div.cart_totals table tr:first-child th, div.cart_totals table tr:first-child td { border-top: 0px !important; } section.shipping-calculator-form p.form-row.form-row-wide { display: block; width: 100%; clear: both; margin-bottom: var(--global-minimumpadding); font-size: var(--global-font-xsmall)!important; } section.shipping-calculator-form p.form-row.form-row-wide input { padding: 0.3rem; } section.shipping-calculator-form button.button { height: var(--global-buttonheightmini) !important; font-size: var(--global-font-small) !important; } div.cart_totals p.woocommerce-shipping-destination, article.thearticle.single.page div.maintext div.cart_totals ul { font-size: var(--global-font-small) !important; font-weight: 400 !important; } div.cart_totals p.woocommerce-shipping-destination strong { font-weight: 400 !important; } div.wc-proceed-to-checkout a.button.alt { background-color: var(--color-oxideyellow); color: var(--global-color-txt); } div.wc-proceed-to-checkout a.button.alt:hover { background-color: var(--color-oxidepurple); color: var(--color-darkchocolate); } /* CROSS SELLS ------ */ .woocommerce ul.products li.first, .woocommerce-page ul.products li.first { clear: none; /* no idea, but it works */ } /* ---------------- */ /* --- CHECKOUT --- */ /* ---------------- */ .woocommerce-checkout input.input-checkbox { accent-color: var(--color-oxideyellow); } /* 1000 inputs (also addresses & passwords in my accounts) */ form.checkout.woocommerce-checkout h3 { padding-top: var(--global-blockmarg-top); padding-bottom: var(--global-blockmarg-bot); font-size: var(--global-font-line-h2); } .woocommerce form .show-password-input, .woocommerce-page form .show-password-input { /* top: .0em; */ background-image: none; } .woocommerce form .show-password-input::after, .woocommerce-page form .show-password-input::after{ color: var(--color-oxideyellow); } form.edit-account div.shipping_address, div.woocommerce-additional-fields, div.woocommerce-address-fields__field-wrapper, div.woocommerce-billing-fields__field-wrapper { padding: var(--global-minimumpadding); background-color: var(--color-darkchocolate); border-radius: var(--global-buttonradius); } div.shipping_address { margin-bottom: var(--global-vpadding); } form.edit-account input, div.shipping_address input, div.woocommerce-additional-fields textarea, div.woocommerce-address-fields__field-wrapper input, div.woocommerce-billing-fields__field-wrapper input { padding: var(--global-micropadding); border: 3px solid white; border-radius: var(--global-buttonradius); } form.edit-account input:focus-within, div.shipping_address input:focus-within, div.woocommerce-additional-fields textarea:focus-within, div.woocommerce-address-fields__field-wrapper input:focus-within, div.woocommerce-billing-fields__field-wrapper input:focus-within { border-color: var(--color-oxideyellow); } /* FINAL ORDER TABLE */ h3#order_review_heading { clear: both; } table.shop_table.woocommerce-checkout-review-order-table { position: relative; border-collapse: collapse; color: var(--global-color-txt); background-color: var(--color-darkchocolate); } .woocommerce table.shop_table.woocommerce-checkout-review-order-table tbody th, .woocommerce table.shop_table.woocommerce-checkout-review-order-table tbody td, .woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot td, .woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot th { padding: var(--global-minimumpadding); border-color: var(--color-warmmidgray); } .woocommerce table.shop_table.woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods label { font-size: var(--global-font-small) !important; } .woocommerce table.shop_table.woocommerce-checkout-review-order-table ul.woocommerce-shipping-methods img { margin-right: var(--global-minimumpadding); } /* PAYMENT BLOCK */ .woocommerce-checkout #payment { background-color: var(--color-darkchocolate); } #add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box { color: var(--global-color-txt); background-color: var(--color-warmmidgray); } #add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--color-warmmidgray); } /* MOLLY form */ .mollie-components > div > div:not(mollie-component) { color: var(--color-oxideyellow); } .mollie-components .mollie-component { padding-left: var(--global-halfpadding); box-shadow: none !important; } .woocommerce-checkout input.input-radio { accent-color: var(--color-oxideyellow); } .mollie-components .mollie-component.has-focus { border-color: var(--color-oxideyellow) !important; } .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--color-warmmidgray); } .woocommerce-checkout div.place-order button { color: var(--color-darkchocolate) !important; border: 0px!important; background-color: var(--color-oxideyellow) !important; } .woocommerce-checkout div.place-order button:hover { border: 0px!important; background-color: var(--color-oxidepurple) !important; } /* --- VAT VALIDATION --- */ span.billing_vat_number-description { display: inline!important; } /* The Modal (background) */ #vatValidationModal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1000; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .vat-modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button */ .vat-modal-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .vat-modal-close:hover, .vat-modal-close:focus { color: black; text-decoration: none; cursor: pointer; } /* --- reCAPTCHA message --- */ .recaptcha-notice p { font-size: var(--global-font-xsmall) !important; } .grecaptcha-badge { visibility: hidden !important; } /* --- CHECKOUT GENERAL CONDITIONS--- */ body.woocommerce-checkout div.woocommerce-terms-and-conditions p:first-of-type { Display: none; } body.woocommerce-checkout div.woocommerce-terms-and-conditions h2:first-of-type { padding-top: 0; } body.woocommerce-checkout div.woocommerce-terms-and-conditions h2 { padding-top: 1rem; padding-bottom: 0rem; font-size: var(--global-font-maintext); } body.woocommerce-checkout div.woocommerce-terms-and-conditions p, body.woocommerce-checkout div.woocommerce-terms-and-conditions li { font-size: var(--global-font-regular); color: var(--global-color-txt); } body.woocommerce-checkout div.woocommerce-terms-and-conditions li { margin-bottom: 0.5rem; } /* --------------------------- */ /* --- CHECKOUT SUCCES/FAIL--- */ /* --------------------------- */ /* Thanks */ p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received { margin-bottom: var(--global-blockmarg-bot); } /* Order key data */ .woocommerce ul.order_details li { margin-bottom: var(--global-minimumpadding); } .woocommerce ul.order_details li strong { font-size: var(--global-font-regular) !important; font-weight: var(--global-fontweight-prim-semi); } /* -- Mollie Notices -- */ div.woocommerce-order section.woocommerce-order-details.woocommerce-info.mollie-instructions::before { content: ''; } div.woocommerce-order section.woocommerce-order-details.woocommerce-info.mollie-instructions { margin-top: var(--global-blockmarg-mid); padding-left: var(--global-minimumpadding); border-radius: var(--global-borderradius); background-color: var(--color-darkchocolate); border: 0px; } /* -- -- -- */ /* Order table */ table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details { border-collapse: collapse; color: var(--global-color-txt); background-color: var(--color-darkchocolate) } .woocommerce table.shop_table.woocommerce-table--order-details.shop_table.order_details tbody th, .woocommerce table.shop_table.woocommerce-table--order-details.shop_table.order_details tbody td, .woocommerce table.shop_table.woocommerce-table--order-details.shop_table.order_details tfoot td, .woocommerce table.shop_table.woocommerce-table--order-details.shop_table.order_details tfoot th { padding: var(--global-minimumpadding); border-color: var(--color-warmmidgray); } .woocommerce table.shop_table.woocommerce-table--order-details.shop_table.order_details ul.wc-item-meta strong, .woocommerce table.shop_table.woocommerce-table--order-details.shop_table.order_details ul.wc-item-meta p, .woocommerce table.shop_table.woocommerce-table--order-details.shop_table.order_details ul.wc-item-meta { font-size: var(--global-font-small) !important; font-weight: var(--global-fontweight-prim-regu); } /* Adresses */ div.woocommerce-order section.woocommerce-customer-details { font-size: var(--global-font-small) !important; font-weight: var(--global-fontweight-prim-regu); color: var(--global-color-txt); } div.woocommerce-order section.woocommerce-customer-details section.woocommerce-columns { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .woocommerce-page .col2-set::before, .woocommerce-page .col2-set::after { content: ''; display: none; } div.woocommerce-order section.woocommerce-customer-details div.woocommerce-column { float: none; max-width: 100%; min-width: 45%; } div.woocommerce-order section.woocommerce-customer-details div.woocommerce-column address { box-sizing: border-box; padding-left: 0; width: 100%; border: 0px; } p.woocommerce-customer-details--phone { margin-top: 1rem; } p.woocommerce-customer-details--email, p.woocommerce-customer-details--phone { font-size: var(--global-font-small) !important; } /* ------------------------------------------------------------------- */ /* -- ACCOUNTS / My Account ------------------------------------------ */ /* ------------------------------------------------------------------- */ /* ACCOUNTS - ORDERS */ .woocommerce table.my_account_orders { font-size: var(--global-font-small); color: var(--global-color-txt); } .woocommerce-orders-table__cell-order-actions { display: flex; } .woocommerce-orders-table__cell-order-actions a { width: 50px; margin-right: var(--global-halfpadding)!important; } .woocommerce-orders-table__cell-order-actions a.pay { background-color: #a9a5d7; } .woocommerce-orders-table__cell-order-actions a.cancel { background-color: #d7a5a5; } .woocommerce-orders-table__cell-order-actions a.view, .woocommerce-orders-table__cell-order-actions a.invoice { color: var(--global-color-link); background-color: var(--color-darkchocolate); } .woocommerce-orders-table__cell-order-actions a:hover { background-color: var(--color-oxidepurple)!important; } .woocommerce-orders-table__cell-order-actions a.cancel:hover { color: var(--color-baroquewhite); background-color: red!important; } /* ACCOUNTS - ORDER DETAILS */ .addreviewlink a { margin-top: var(--global-halfpadding); padding: var(--global-micropadding); padding-left: var(--global-halfpadding); padding-right: var(--global-halfpadding); font-family: var(--global-font-secondary-regular); font-size: var(--global-font-xsmall); color: var(--color-darkchocolate); background-color: var(--color-oxidepurple); border-radius: var(--global-buttonradius); } .addreviewlink a:hover { background-color: var(--color-baroquewhite); } div.woocommerce-MyAccount-content section.woocommerce-customer-details address { color: var(--color-baroquewhite); border: 0px; } div.woocommerce-MyAccount-content p.order-again a { background-color: var(--color-oxideyellow); } div.woocommerce-MyAccount-content section.mollie-instructions { width: 100%; background-color: var(--color-darkchocolate); } /* ACCOUNTS - ADDRESSES */ /* NB! address & password forms are done together with the order cycle above */ div.woocommerce-MyAccount-content .woocommerce-Addresses address { margin-top: 1rem; color: var(--color-baroquewhite); } div.woocommerce-MyAccount-content div.woocommerce-address-fields { margin-top: 2rem; } div.woocommerce-MyAccount-content div.woocommerce-address-fields button.button { margin-top: 2rem; } div.woocommerce-MyAccount-content form.woocommerce-EditAccountForm.edit-account fieldset { margin-top: 2rem; margin-bottom: 2rem; padding: 1rem; background-color: var(--color-darkchocolate); border: 1px solid var(--color-warmmidgray); border-radius: var(--global-borderradius)!important; } .woocommerce-MyAccount-content legend { color: var(--color-baroquewhite); border: 0px solid red; padding: 0.2rem; padding-left: 1rem; padding-right: 1rem; background-color: var(--color-darkchocolate); border-radius: var(--global-borderradius)!important; } /* ------------------------------------------------------------------- */ /* -- FOOTER --------------------------------------------------------- */ /* ------------------------------------------------------------------- */ nav.footermenublock { padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); } nav.footermenublock a, nav.footermenublock a:visited { color: var(--global-color-txt); } nav.footermenublock a:hover { color: var(--global-color-link); } #footer-menu-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-top: var(--global-blockmarg-top); padding-bottom: var(--global-blockmarg-mid); } #footer-menu-list li { line-height: var(--global-font-line-big); } div.footerblock #footer-menu-list li:not(:last-of-type):after { content: "|"; color: var(--global-color-butborder); margin-left: var(--global-minimumpadding); margin-right: var(--global-minimumpadding); } /* STATIC SECONDARY MENU - Moved from header */ div.footerblock #secondary-menu-list { display: flex; display: none; flex-direction: row; flex-wrap: wrap; padding-top: 0px; padding-bottom: var(--global-blockmarg-mid); } div.footerblock #secondary-menu-list li { margin-right: 1rem; } /* DYNAMIC WIDGETS BLOCKS */ div.widgetsblock { padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); border-top: var(--global-border-block); } div.widgetsblock aside.widget-area { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-top: var(--global-blockmarg-mid); padding-bottom: var(--global-blockmarg-bot); } div.widgetsblock section { min-width: var(--global-cols-minwidth); max-width: var(--global-cols-maxwidth); margin-bottom: var(--global-vpadding); font-size: var(--global-font-small); line-height: var(--global-font-line-big); } div.widgetsblock section h3 { font-family: var(--global-font-secondary-light); font-size: var(--global-font-regular); padding: 0px; margin-bottom: var(--global-halfpadding); } div.widgetsblock section p { padding-left: var(--global-micropadding); } /* -- SOCIAL BUTTONS -- */ div.widgetsblock section.socials { display: flex; flex-direction: row; justify-content: flex-end; gap: var(--global-halfpadding); width: 100%; height: 40px; /* margin-bottom: var(--global-hpadding); */ border: var(--dev-border-01); } div.widgetsblock section.socials svg { width: 32px; height: 32px; fill: var(--global-color-txt); transition: var(--global-anim-fill); border: 0px solid red; } div.widgetsblock section.socials svg.facebook { width: 34px; height: 34px; margin-right: -2px; } div.widgetsblock section.socials svg:hover, div.widgetsblock section.socials svg:focus { fill: var(--global-color-link); transition: var(--global-anim-hovfill); } div.twitter { display: none; } div.widgetsblock section.socials div.whatsapp { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; height: 34px; width: 150px; font-family: var(--global-font-secondary-light); text-transform: uppercase; font-size: 10px; background-color: var(--color-darkchocolate); border: 1px solid var(--color-warmmidgray); border-radius: 10px; } div.widgetsblock section.socials div.whatsapp:hover { border: 1px solid var(--color-realwhite); } div.widgetsblock section.socials svg.whatsapp { width: 20px; height: 20px; margin-left: 8px; } /* STATIC: REVIEWS, PAYMENT LOGOS, FREE SHIPPING */ div.footerlogoblock { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; /* height: var(--global-blockmarg-mid); */ padding: var(--global-minimumpadding); padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); text-align: center; border-top: var(--global-border-block); } div.footerlogoblock > div { flex-grow: 1; max-width: 100%; } div.footerlogoblock div.companyreviews { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .trustpilot-widget { max-width: 260px; margin-left: -1rem; border: var(--dev-border-01); } div.footerlogoblock div.paymethods { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } div.footerlogoblock div.paymethods div { height: 1rem; aspect-ratio: 3 / 2; margin-right: 0.3rem; background-repeat: no-repeat; background-size: cover; background-position: center center; border: var(--global-border-block); } .ideal { background-image: url('assets/images/payment_icons/ideal.svg'); } .visa { background-image: url('assets/images/payment_icons/visa.svg'); } .master { background-image: url('assets/images/payment_icons/mastercard.svg'); } .amex { background-image: url('assets/images/payment_icons/amex.svg'); } .diners { background-image: url('assets/images/payment_icons/diners.svg'); } .bancontact { background-image: url('assets/images/payment_icons/bancontact.svg'); } .eps { background-image: url('assets/images/payment_icons/eps.svg'); } .giropay { background-image: url('assets/images/payment_icons/giropay.svg'); } .sofort { background-image: url('assets/images/payment_icons/sofort.svg'); } .p24 { display: none; background-image: url('assets/images/payment_icons/przelewy24.svg'); } .apple { display: none; background-image: url('assets/images/payment_icons/apple-pay.svg'); } .google { display: none; background-image: url('assets/images/payment_icons/google-pay.svg'); } div.footerlogoblock div.freeshipping { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; font-family: var(--global-font-secondary-thin); font-size: var(--global-font-small); text-transform: uppercase; color: var(--global-color-txt); } div.footerlogoblock div.freeshipping a { color: var(--global-color-txt); } div.footerlogoblock div.freeshipping svg { width: 20px; height: 20px; margin-left: 0.5rem; fill: var(--global-color-link); } /* STATIC COPY */ div.footercopyblock { padding-left: var(--global-blockpadding); padding-right: var(--global-blockpadding); padding-top: var(--global-blockmarg-bot); padding-bottom: var(--global-blockmarg-bot); text-align: center; font-size: var(--global-font-xsmall); color: var(--color-warmmidgray); border-top: var(--global-border-block); } /* ------------------------------------------------------------------- */ /* -- MOBILE --------------------------------------------------------- */ /* ------------------------------------------------------------------- */ @media (max-width: 1500px) { :root { /* nothing */ } div.devinfo { display: none; } div.woocommerce-message, ul.woocommerce-error, div.woocommerce-info { padding-left: calc(var(--global-blockpadding) + 2rem); } } @media (max-width: 1024px) { :root { /* nothing */ } div.footerlogoblock { height:12rem; padding-top: 2rem; padding-bottom: 2rem; } div.footerlogoblock > div { min-width: 100%; margin-bottom: 2rem; justify-content: flex-start!important; } } @media (max-width: 768px) { :root { /* SWITCH TO SINGLE COLUMN */ /* sub blocks */ --global-width-50: 100%; --global-maxwidth-50: 100%; --global-width-30: 100%; --global-maxwidth-30: 100%; --global-width-70: 100%; --global-maxwidth-70: 100%; } /* MAIN MENU */ .mainheader.hide-navigation { transform: translateY(-100%); } div.primary-menu-container { height: 100%; overflow-y: auto; padding-bottom: 6rem; /* background-color: green; */ } div.navblock .primary-menu-container ul.menu-wrapper { flex-direction: column; margin-top: 1rem; } div.navblock .primary-menu-container ul.menu-wrapper > li:not(:first-child) { margin-top: var(--global-halfpadding); } div.navblock .primary-menu-container ul.menu-wrapper > li:nth-child(3) { margin-bottom: 1rem; } div.mega-menu-content { position: relative; /* overflow-y: auto; */ } div.mega-menu-content.mega-open { max-height: none; } div.mega-menu-content a h4 { /* display: none; */ font-family: var(--global-font-secondary-regular); font-size: var(--global-font-regular)!important; margin-bottom: 0rem; text-transform: none; } div.mega-menu-content > ul { max-height: none; /* Allow the height to depend on content */ overflow-y: visible; /* Ensure content is fully visible */ margin-top: 1rem; margin-bottom: 1rem; padding-left: var(--global-micropadding); padding-bottom: var(--global-minimumpadding); border-top: 1px solid var(--global-color-content); border-bottom: 1px solid var(--global-color-content); } div.mega-menu-content > ul > li:not(.menu-item-has-children) { margin-top: 0rem!important; margin-bottom: 0rem!important; } div.mega-menu-content > ul > li:not(.menu-item-has-children):first-of-type { margin-top: 1rem!important; } div.mega-menu-content > ul li { width: 100%; } /* FEATURED PRODUCT ITEMS */ div.featured-product > div.info div.productinfo div.text p:not(.price), div.featured-product > div.info div.productinfo div.button.add_to_cart_button { display: none; } /* NEWS LIST ITEMS & HOME FEATURED PRODUCTS TXTBLOCK*/ div.featured-product > div.info div.productinfo div.title h2, article.thearticle.shop ul.products li.product-category a h2, article.thearticle.list article.post-list-block.post div.content h2, article.latestnews div.post div.content h2 { font-size: var(--global-font-regular); margin-bottom: var(--global-micropadding)!important; } article.thearticle.shop ul.products li.product-category a div p, article.thearticle.list article.post-list-block.post div.content p, article.latestnews div.post div.content p { -webkit-line-clamp: 2; margin-bottom: 0; } article.thearticle.shop ul.products li.product-category a div p.readmore, article.thearticle.list article.post-list-block.post div.content p.readmore, article.latestnews div.post div.content p.readmore { display: none; } /* COLOR DOTS */ div.variable-colours-images-imagescontainer > div { margin-right: var(--global-micropadding); } .stars-rating-bar-block { width: 50%; } /* LIST ITEMS */ ul.products li.product { width: calc(50% - 1rem)!important; margin-right: 1rem!important; } ul.products li.product:nth-child(n) { margin-right: 1rem!important; } ul.products li.product:nth-child(even) { margin-right: 0rem!important; } ul.products li.product.sale span.onsale { padding: 0.5rem!important; font-size: 1.3rem; margin: -0.64em -0.64em 0 0; } div.wiz-mod-product-info-block > div { margin-bottom: 0; } /* pages - application */ article.thearticle.single.page .technical > div.whatdoyouneed { margin-top: var(--global-hpadding); } /* FOOTER */ div.widgetsblock section.socials { justify-content: flex-start; } div.footerlogoblock div.freeshipping { font-size: var(--global-font-xsmall); } div.footerlogoblock div.freeshipping svg { width: 16px; height: 16px; margin-left: 0.2rem; fill: var(--global-color-link); } /* CART & CHECKOUT */ td.product-quantity div.quantity { justify-content: flex-end; } } @media (max-width: 480px) { /* OR 376px for iphone */ :root { --global-buttonheight: 2rem; --global-buttonpadding: 1rem; } div.headercontainer { column-gap: var(--global-minimumpadding); } svg.mnubutton, svg.srvbutton { margin-left: var(--global-halfpadding); } .cartfull::after { right: calc(var(--global-halfpadding) + 50px); } /* NEWS LIST ITEMS */ div.featured-product > div.info div.productinfo div.text p:not(.price) { display: none; } /* NEWS LIST ITEMS & HOME FEATURED PRODUCT TEXTBLOCKS*/ div.featured-product > div.info div.productinfo div.title h2, article.thearticle.shop ul.products li.product-category a h2, article.thearticle.list article.post-list-block.post div.content h2, article.latestnews div.post div.content h2 { font-size: 1rem; line-height: 1rem; } article.thearticle.shop ul.products li.product-category a div p, article.thearticle.list article.post-list-block.post div.content p, article.latestnews div.post div.content p { display: none; font-size: 1rem; line-height: 1rem; background-color: green; } /* LIST ITEMS */ ul.products li.product { width: 100%!important; margin-right: 0rem!important; } ul.products li.product:nth-child(3n) { margin-right: 0rem!important; } /* FOOTER */ div.footercopyblock { text-align: left; } } /* override styles when printing */ @media print { @page { margin: 10mm; } body.woocommerce-order-received { margin: 0; color: #000; background-color: #fff; font-size: 10pt; line-height: 12pt; } body.woocommerce-order-received div.nobigimage, body.woocommerce-order-received div.footerblock, body.woocommerce-order-received header.mainheader { display: none; } p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received { margin-bottom: 12pt; } ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details { font-size: 10pt; line-height: 12pt; } body.woocommerce-order-received h2 { padding-top: 0pt; font-size: 10pt; line-height: 12pt; } .woocommerce table.shop_table tbody th, .woocommerce table.shop_table tbody td, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { padding: 0; border: 0px; font-size: 10pt; line-height: 12pt; } }