/* Theme Name: Liva Theme URI: http://www.liva.be Author: Alexis Facca Version: 2026.04 */ /* ============================================================ HOW @LAYER WORKS * ============================================================ * The declaration below is the single source of truth for * cascade priority across the entire stylesheet. * Layer ORDER beats selector SPECIFICITY — always. * * A low-specificity rule in a later layer will always win * over a highly specific rule in an earlier layer. * * Styles declared OUTSIDE any @layer win over everything. * * PRIORITY ORDER (lowest → highest) : * reset → tokens → base → components → layout → pages → woo → overrides * * ============================================================ */ @layer reset, tokens, base, components, layout, pages, woo, overrides; /* ============================================================ * LAYER : reset * ============================================================ */ @layer reset { *,::after,::before{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin-block-end:0}ol[role=list],ul[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}button,h1,h2,h3,h4,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}button,input,select,textarea{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex} } /* ============================================================ * LAYER : tokens * ============================================================ * Design tokens — the single source of truth for all named * values that define the visual identity of the project. * Colors, spacing, radii, timing functions, etc. * Change a value here and it propagates everywhere. * * RULES : * - Custom properties on :root only * - No selectors, no styles applied * - This layer is purely declarative — it "names", not "styles" * ============================================================ */ @layer tokens { :root { --white: #fff; --ultralightgrey: #f6f7f5; --verylightgrey: #eeeeed; --lightgrey: #dddedd; --imagegrey : #ecedeb; --verylightgreytext: #c0c1bf; --lightgreytext: #9a9b99; --middlegreytext: #767676; --darkgreytext: #5c5e5d; --blackmaintext:#121212; --darkgrey:#3a3c3b; --verydarkgrey:#2a2c2b; --ultradarkgrey:#1a1c1b; --black: #000; --border: 1px solid var(--lightgrey); --lightgreen: #A2A277; --darkgreen: #5C5D3B; --yellow: #ffd100; --yellowpromo: #dfff54 /* #ffe800*/; --orange: #f0932b; --red: #de303c; --darkred: #c0392b; --leica-red: #e2001a; --blue: #287cb3; --green: #1d864b; --purple: #9263a6; --transition-linear: 0.2s linear; --transition-ease: 0.33s ease; --spacing-xs: 0.25rem; /* 3.5px */ --spacing-sm: 0.5rem; /* 7px */ --spacing-md: 0.75rem; /* 10.5px */ --spacing-lg: 1rem; /* 14px */ --spacing-xl: 1.5rem; /* 21px */ --spacing-2xl: 2rem; /* 28px */ --spacing-3xl: 3rem; /* 42px */ --spacing-vw: clamp(1.5rem, 3vw, 3rem); --overlay : rgba(0,0,0,0.6); --b-radius: 0.25rem; --minHeightPage: 65vh; } } /* ============================================================ * LAYER : base * ============================================================ * Default appearance of raw HTML elements — no classes. * This is what your site looks like before a single class * is applied to any element. Think of it as "opinionated reset" * — the reset removes browser defaults, base sets yours. * * RULES : * - Element selectors only (a, body, h1, img, input...) * - Allowed exceptions : @font-face, ::selection, * universal pseudo-classes (::before, ::after on bare elements) * - No layout, no component-specific rules * ============================================================ */ @layer base { @font-face {font-family: 'Alcyone'; src: url(fonts/Alcyone-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal;font-display: swap;} @font-face {font-family: 'Alcyone'; src: url(fonts/Alcyone-RegularItalic.woff2) format('woff2'); font-weight: 400; font-style: italic;font-display: swap;} @font-face {font-family: 'Alcyone'; src: url(fonts/Alcyone-Medium.woff2) format('woff2'); font-weight: 500; font-style: normal;font-display: swap;} @font-face {font-family: 'Alcyone'; src: url(fonts/Alcyone-MediumItalic.woff2) format('woff2'); font-weight: 500; font-style: italic;font-display: swap;} @font-face {font-family: 'Alcyone'; src: url(fonts/Alcyone-SemiBold.woff2) format('woff2'); font-weight: 600; font-style: normal;font-display: swap;} @font-face {font-family: 'Alcyone'; src: url(fonts/Alcyone-SemiBoldItalic.woff2) format('woff2'); font-weight: 600; font-style: italic; font-display: swap;} @font-face {font-family: 'Alcyone'; src: url(fonts/Alcyone-Bold.woff2) format('woff2'); font-weight: 700; font-style: normal;font-display: swap;} @font-face {font-family: 'Alcyone'; src: url(fonts/Alcyone-BoldItalic.woff2) format('woff2'); font-weight: 700; font-style: italic;font-display: swap;} @font-face {font-family: 'Alcyone'; src: url(fonts/Alcyone-Black.woff2) format('woff2'); font-weight: 900; font-style: normal;font-display: swap;} @font-face {font-family: 'Alcyone'; src: url(fonts/Alcyone-BlackItalic.woff2) format('woff2'); font-weight: 900; font-style: italic;font-display: swap;} html {font-size:14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; hanging-punctuation: first last; interpolate-size: allow-keywords;} body {font-family: "Alcyone", "Helvetica", Arial, sans-serif; color: var(--ultradarkgrey); background: var(--white); margin: 0; letter-spacing:-.015rem;} ::selection { background: var(--black) 000; color: var(--white); text-shadow: none; } a {transition:color var(--transition-linear), background-color var(--transition-linear); color:var(--blackmaintext);text-decoration:none;} a:hover { color: var(--middlegreytext); } b, strong{font-weight:600;} h1, h2, h3, h4, h5, h6 { font-weight:400; font-size:100%; padding:0; margin:0; text-wrap:initial; line-height:1.5;} ul, ul li{margin:0; padding:0; list-style:none;} .screen-reader-text{display:none;} ins{text-decoration:none;} .greyTitle{border-bottom:var(--border); background:var(--ultralightgrey); padding:var(--spacing-lg); font-size:1.75rem; text-align:center;} /* TEXT WRAP */ .text_wrap {/*font-size:1.125rem;*/} .text_wrap p {margin-top:0; margin-bottom:1.5em;} .text_wrap b, .text_wrap strong { font-weight: 600; } .text_wrap big { font-size: 125%; } .text_wrap dfn, .text_wrap cite, .text_wrap em, .text_wrap i { font-style: italic; } .text_wrap a { color: var(--blackmaintext); text-decoration: underline; transition: all 0.2s linear; } .text_wrap a:hover { color: var(--middlegreytext); } .text_wrap ul { list-style: outside disc; margin: var(--spacing-lg); margin-left: var(--spacing-3xl); } @media (width <= 600px) { .text_wrap ul { margin-left: var(--spacing-xl); } } .text_wrap li { position: relative; margin-bottom: 0.5rem; line-height: 1.4em; } .text_wrap ul li { list-style-type: none; } .text_wrap ul li::before { position: absolute; left: -0.7em; top: 0.55em; content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lightgreen); } .text_wrap ol { list-style: outside decimal; margin: 1em 1em 1em 4em; } .text_wrap h1, .text_wrap h2, .text_wrap h3, .text_wrap h4, .text_wrap h5, .text_wrap h6 { clear: both; margin: 0 0 0.5em; } .text_wrap h2 { color: var(--darkgreen); font-size:1.75rem;} .text_wrap h3 { font-size: 1.5rem;} .text_wrap table { border: var(--border); border-spacing: 0; } .text_wrap table tr:first-child td { text-transform: uppercase; font-weight: 600; border-bottom: var(--border); padding: 1rem; vertical-align: middle; background: var(--ultralightgrey); } .text_wrap table td { position: relative; border-bottom: var(--border); padding: 0.5rem; vertical-align: middle; border-right: var(--border); } .text_wrap table tr td:last-child { border-right: 0; } .text_wrap table tr:last-child th, .text_wrap table tr:last-child td { border-bottom: 0 !important; } .text_wrap .alignleft { position: relative; display: block; float: left; margin: 0 1em 0 0; text-align: left; } .text_wrap .alignright { position: relative; display: block; float: right; margin: 0 0 0 1em; text-align: right; } .text_wrap .aligncenter { position: relative; display: block; clear: both; margin: 1em auto; text-align: center; } .text_wrap .tips { position: relative; background: var(--ultralightgrey); border-radius: var(--b-radius); padding: var(--spacing-lg); padding-left:calc(3 * var(--spacing-lg)); } .text_wrap .tips::before { content: "👌🏼"; position: absolute; font-size: 1.5rem; left: 0.55rem; } .page-title{font-size:1.75rem;} /* .single .page-title{position:relative; width: 100%; max-width: 940px; margin: 0px auto; padding:var(--spacing-vw); padding-bottom:0;}*/ .post-edit-link { position: absolute; right:var(--spacing-vw); font-size: 0.8rem; background: var(--red); border-radius: 3px; padding: 0.3rem 1rem; font-family: sans-serif !important; color: var(--white) !important; } .sectionTitle {font-size:1.25rem; color: var(--black); text-transform: uppercase; font-weight:500; display: block; } /* CALL TO ACTION */ .myCta, .button, .wc-block-components-checkout-place-order-button { appearance: none; display: inline-block; padding:var(--spacing-md) var(--spacing-xl); text-align: center; text-transform: uppercase; z-index: 9; font-size: 1rem; font-family: "Alcyone", "Helvetica", arial, sans-serif; background: var(--black); color: var(--white); transition: all var(--transition-ease); border-radius: 999px; border: 0; outline: 0; cursor: pointer; margin-bottom: var(--spacing-lg); overflow: hidden; text-decoration: none; } .myCta:hover, .button:hover, .wc-block-components-checkout-place-order-button:hover { background: var(--darkgrey); color: var(--white); box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; } .myCtaGrey { background: var(--lightgrey); color: var(--black); } .myCtaGrey:hover { color: var(--white); } .myCtaGreen { background: var(--darkgreen); color: var(--white); } .myCtaGreen:hover { background: var(--lightgreen); } .myCtaWide, .wc-block-components-checkout-place-order-button{width:100%;} /*.myCtaContainer { padding: 0 1rem; max-width: 300px; margin: 0 auto; } */ /* INPUT AND FORM */ input, select, textarea { font-family: "Alcyone", "Helvetica", arial, sans-serif; font-size: 1rem; } :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, .fakeSelect, textarea) { position: relative; display: inline-block; width: 100%; padding:0.85rem 0.66rem; margin-bottom: var(--spacing-lg); border: var(--border); border-radius:var(--b-radius); background: transparent; text-align: left; text-decoration: none; outline: none; appearance: none; transition: var(--transition-ease); } :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea)::placeholder { color: var(--darkgrey); } :is(input:focus, select:focus, .fakeSelect:hover, textarea:focus) { border-color: var(--darkgrey); } select:not(.woocommerce-ordering select), .fakeSelect { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%222%22%20version%3D%221.1%22%20viewBox%3D%220%200%2019%2011%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22matrix%286.1232e-17%2C1%2C-1%2C6.1232e-17%2C18.3%2C-8.8818e-16%29%22%3E%3Cpath%20d%3D%22M1.4%2C18.3L0%2C16.8L7.7%2C9.1L0%2C1.4L1.4%2C0L10.5%2C9.1L1.4%2C18.3Z%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important; background-position: right 1em center !important; background-repeat: no-repeat!important; background-size: auto 7px !important; } fieldset{border:0; margin:0; padding:0;} fieldset legend { font-size: 1.25rem; font-weight: 400; } /* IOS PREVENT ZOOM */ @supports (-webkit-touch-callout: none) and (max-width: 768px) { input, textarea, select { font-size: 16px;} } /* FAKE SELECT */ .fakeSelect-option { position: absolute; transform: translateY(-2px); width: 100%; max-height: 150px; overflow-y: auto; padding: 0; margin: 0; list-style: none; background: var(--white); border: var(--border); border-bottom-left-radius:var(--b-radius); border-bottom-right-radius: var(--b-radius); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); z-index: 10000; } .fakeSelect-item { padding: 0.75rem; cursor: pointer; } .fakeSelect-item:is(:hover, .selected) { background-color: var(--ultralightgrey); } /* FORM */ .woocomerce-form { position: relative; } .form-row { position: relative; margin-bottom: inherit; } .form-row-first, .form-row-last { position: relative; display: inline-block; width: calc(50% - 0.5em); } .form-row-first { margin-right: .7em !important; } :is(.form-row > label, .form-row .fakeLabel, .wc-block-components-text-input > label, .wc-blocks-components-select label) { position: absolute; top: -0.45em; left: 0.6em; z-index: 2; background: var(--white); display: inline-block; text-transform: uppercase; font-size: 0.875rem; padding: 0 0.4em 0 0.5em; line-height: 1em; transition: all var(--transition-linear); outline: none; appearance: none; border-radius: 0; } :is(.form-row .required, .form-row-checkbox .required, .form-row label abbr) { color: var(--red); border-bottom: 0 !important; cursor: default !important; text-decoration: none !important; } .form-row span em { font-size: 0.875em; color: var(--darkgrey); position: relative; top: -1em; left: 0.25em; } .form-row-checkbox { position: relative; height: 2em; } .form-row-checkbox label { top: 0; left: 0; padding: 0; cursor: pointer; } .form-row-checkbox span { position: relative; top: -0.25em; } .form-row-radio { position: relative; height: 3em; border: var(--lightgrey); border-radius: var(--b-radius); margin-bottom: var(--spacing-lg) padding: 0 0.5em; } .form-row-radio > label { top: -0.5em; z-index: 2; } :is(.form-row-radio span input, .form-row-radio span label) { position: relative; margin-top: var(--spacing-lg); padding-right: 1.5em; display: inline-block; cursor: pointer; } .form-row-radio span label { top: -0.1em; left: 0.25em; } .input-date { position: relative; display: block; width: 100%; height: 3em; margin-bottom: var(--spacing-lg); padding: 0 0.75em; border: var(--lightgrey); border-radius: 0; background: transparent; font-size: 0.9em; } .lost_password { position: absolute; bottom: -0.25em; right: 0; color: var(--red); text-transform: uppercase; font-size: 0.75em; } .lost_password a { color: var(--red); } } /* ============================================================ * LAYER : components * ============================================================ * Self-contained, reusable UI pieces. * A component can be placed anywhere in the page and always looks the same — it has no knowledge of its context. * Each component owns its own responsive rules. * * QUALIFICATION TEST : * "Could this look identical on 3 different pages?" * Yes → components. No → pages. * * RULES : * - Class-based selectors * - @media queries live here, right next to the component * they belong to — never in a separate block elsewhere * - No page-context selectors (.single-product .btn is pages, * not components) * * TYPICAL CONTENTS : * buttons, modals/popups, forms, cards, badges, skeleton * loaders, tooltips, dropdowns, sliders, accordions, * notification banners, animations * ============================================================ */ @layer components { /* SKELETON */ .skel { position: relative; overflow: hidden; display: inline-block; vertical-align: middle; background: rgba(0, 0, 0, 0.08); border-radius: var(--b-radius); } .skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%); animation: skel-shimmer 1.1s infinite; } #topNav .skel::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%); animation: skel-shimmer 1.1s infinite; } @keyframes skel-shimmer { 100% { transform: translateX(100%); } } /* Sizes helpers */ .skel--w-1_15 { width: 1.15rem; } .skel--w-4 { width: 4rem; } .skel--w-6 { width: 6rem; } .skel--w-8 { width: 8rem; } .skel--w-10 { width: 10rem; } .skel--w-12 { width: 12rem; } .skel--w-14 { width: 14rem; } .skel--h-0_8 { height: 0.8rem; } .skel--h-1 { height: 1rem; } .skel--h-1_15 { height: 1.15rem; } .skel--h-1_25 { height: 1.25rem; } .skel--h-1_5 { height: 1.5rem; } .skel--h-1_75 { height: 1.75rem; } /* ANIMATIONS */ .tadaaam.fadeIn { opacity: 0; } @keyframes fadeIn {from { opacity: 0; } to { opacity: 1; } } .tadaaam-active.fadeIn { animation: fadeIn 0.5s forwards; } .tadaaam.fadeInUp { opacity: 0; transform: translate3d(0, 10%, 0); } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 10%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); }} .tadaaam-active.fadeInUp { animation: fadeInUp 0.5s forwards; } .tadaaam.slideInLeft { transform: translate3d(10%, 0, 0); } @keyframes slideInLeft {from { transform: translate3d(10%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .tadaaam-active.slideInLeft { animation: slideInLeft 0.75s forwards 0.3s; animation-timing-function: ease-in; } .tadaaamWord, .tadaaamLetter { opacity: 0; } .tadaaamWord.tadaaam-active, .tadaaamLetter.tadaaam-active { opacity: 1; } .tadaaamWord .tdmtxt, .tadaaamLetter .tdmtxt { position: relative; top: 0.1em; display: inline-block; overflow: hidden; padding-bottom: 0.1em !important; max-width: inherit !important; } .tadaaamWord .tdmtxt span { position: relative; display: inline-block; opacity: 0; transform: translateY(100%); transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); } .tadaaamLetter .tdmtxt span { position: relative; display: inline-block; opacity: 0; transform: translateY(15%); transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.25s cubic-bezier(0.165, 0.84, 0.44, 1); } .tadaaamWord.tadaaam-active .tdmtxt span, .tadaaamLetter.tadaaam-active .tdmtxt span { opacity: 1; transform: translateY(0%); } /* LOOP */ section#product-loop { /*display: grid; grid-template-columns: 16rem 1fr;*/ border-top:var(--border);} /* LOOP - Products */ ul.products { display: grid; grid-template-columns: repeat(5, 1fr); } ul.products li.product { position: relative; border-right:var(--border); border-bottom:var(--border); } ul.products li.type-product { display: grid; grid-template-rows: auto 1fr; } #product-loop ul.products li.product:nth-child(5n) { border-right: 0; } @media (width <= 1000px) { ul.products { grid-template-columns: repeat(3, 1fr); } #product-loop ul.products li.product:nth-child(5n) { border-right: var(--border); } #product-loop ul.products li.product:nth-child(3n) { border-right: 0; } } @media (width <= 600px) { ul.products { grid-template-columns: repeat(2, 50vw); } #product-loop ul.products li.product:nth-child(3n) { border-right: var(--border); } #product-loop ul.products li.product:nth-child(2n) { border-right: 0; } } li.product header { position: relative; overflow: hidden; } li.product header a { position: relative; display: block; } li.product header a.woocommerce-loop-product__link { width: 100%; height: 100%; } li.product header a img {width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1;} li.type-product a img:first-child { transition: transform var(--transition-linear); transform: scale(1); } @media (hover: hover) and (pointer: fine) { li.type-product:not(:has(.product_image_lifestyle)):hover a img:first-child { transform: scale(1.04); } } li.product header a .product_image_lifestyle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 0; } @media (hover: hover) and (pointer: fine) { li.product:hover header a .product_image_lifestyle { opacity: 1; transform: scale(1); z-index: 2; } } li.product header .ajax_add_to_cart { position: absolute; display: block; width: calc(100% - 2 * var(--spacing-lg)) !important; bottom: var(--spacing-lg); left: var(--spacing-lg); z-index: 9; transform: translateY(50%); opacity: 0; margin-bottom: 0 !important; } li.product:hover .ajax_add_to_cart { opacity: 1; transform: translateY(0%); } li.product article{padding:var(--spacing-lg); position:relative;} li.product article .woocommerce-loop-product__titlegroup{display:grid; grid-template-areas:"brand price" "title title"; grid-template-columns:1fr auto; align-items:baseline; gap:0.25rem 0.5rem;} li.product article .loop-brand-link{grid-area:brand; color:var(--middlegreytext); font-weight:400;} li.product article .woocommerce-loop-product__titlegroup .price{grid-area:price;} li.product article .woocommerce-loop-product__title{grid-area:title; font-weight:600; line-height:1.5; text-wrap:pretty; min-height:var(--spacing-3xl);} .data-dyn-stock{display:inline-block; margin-top:var(--spacing-lg);} li.product article .stock svg{display:none;} /* LOOP FILTERS - Tiroir latéral */ aside#product-filter { position: fixed; top: var(--filter-top, 0px); left: 0; height: calc(100% - var(--filter-top, 0px)); width: 22rem; max-width: 90vw; background: var(--white); border-right: var(--border); z-index: 15; transform: translateX(-100%); transition: transform var(--transition-ease); overflow-y: auto; } aside#product-filter.productFilterOpen { transform: translateX(0); } #product-filter-overlay { position: fixed; inset: 0; top: var(--filter-top, 0px); background: var(--overlay); z-index: 14; opacity: 0; pointer-events: none; transition: opacity var(--transition-ease); } #product-filter-overlay.active { opacity: 1; pointer-events: auto; } .widget { list-style: none; } #product-filter .filters-container { overflow: hidden; } #product-filter .yith-wcan-filter { border-bottom:var(--border); } #product-filter .filter-title { position: relative; font-size: 1.125rem; text-transform: uppercase; cursor: pointer !important; padding:var(--spacing-lg); width: 100%; text-align: left; outline: none; transition:var(--transition-linear); } #product-filter .filter-title:not(.opened):hover { background: var(--ultralightgrey); } #product-filter .filter-tax[data-taxonomy="product_cat"] .filter-title:hover { background: inherit; cursor: inherit; } #product-filter .filter-title::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; width: 1.125rem; height: 1px; background: var(--black); } #product-filter .filter-title::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; width: 1.125rem; height: 1px; background: var(--black); transform: rotate(-90deg); transition: all 0.2s linear; opacity: 1; } #product-filter .filter-title.opened::after { transform: rotate(0); opacity: 0; } #product-filter .filter-content { padding: 0.5rem 1rem 1rem 1rem; } #product-filter .filter-content label { position: relative; top: -0.25rem; } #product-filter .filter-content label a {display: block; padding: .3rem 0 .3rem 1.5rem; } #product-filter .filter-content label .item-count { position: relative; margin-left: 0.125rem; font-size: 90%; color: var(--middlegreytext); } #product-filter .filter-content label .checkboxbutton { position: absolute; top: -0.175em; left: 0; } #product-filter .filter-content .filter-item.active > ul.filter-items { display: block !important; } #product-filter .filter-tax[data-taxonomy="product_cat"] ul { padding-left: 0.5rem; } #product-filter .filter-tax[data-taxonomy="product_cat"] ul:first-child { padding-left: 0; } .tax-product_brand #product-filter .filter-tax[data-taxonomy="product_cat"] .filter-content ul { display: block !important; } .tax-product_brand #product-filter .filter-tax[data-taxonomy="product_brand"] { display: none !important; } .blockOverlay { position: fixed !important; top: 0 !important; height: 100% !important; } .search-results #product-filter .filter-checkbox input { display: none !important; } .search-results #product-filter .filter-content label a { padding-left: 0; } .checkboxbutton input { position: relative; top: 0.325rem; left: -0.125rem; border: 1px solid var(--black); height: 1rem; width: 1rem; border-radius: 0 !important; -webkit-appearance: none; appearance: none; cursor: pointer; transition: all 0.2s linear; } .checkboxbutton input:checked::after { content: ""; position: absolute; top: -1px; left: -1px; width: 1rem; height: 1rem; background: url(img/check.svg) center center; background-size: 80% 80%; } .filter-color { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 0.75rem; } .filter-color .color { text-align: center; font-size: 0.8rem; } .filter-color .color-swatch { width: 36px; height: 36px; display: inline-block; } .filter-color .color:nth-child(4n + 1) .color-swatch { clip-path: polygon(22% 6%, 62% 10%, 88% 36%, 72% 78%, 36% 92%, 10% 58%); } .filter-color .color:nth-child(4n + 2) .color-swatch { clip-path: polygon(14% 18%, 54% 6%, 90% 28%, 82% 66%, 48% 92%, 8% 64%); } .filter-color .color:nth-child(4n + 3) .color-swatch { clip-path: polygon(26% 4%, 68% 16%, 92% 42%, 64% 84%, 30% 94%, 6% 56%); } .filter-color .color:nth-child(4n) .color-swatch { clip-path: polygon(18% 10%, 60% 4%, 94% 34%, 76% 72%, 40% 96%, 12% 66%); } .filter-color .color .term-label { display: block; padding-top: 0.1rem; } .filter-color .color .item-count {color: var(--darkgrey); } .irs { position: relative; display: block; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 12px; font-family: Arial, sans-serif; } .irs--round { height: 50px; margin: 0 0.5rem; } .irs--round.irs-with-grid { height: 65px; } .irs--round .irs-line { position: relative; display: block; overflow: hidden; outline: none !important; top: 36px; height: 4px; background-color: var(--lightgrey); border-radius: 4px; } .irs--round .irs-bar { position: absolute; display: block; left: 0; width: 0; top: 36px; height: 4px; background-color: var(--black); } .irs--round .irs-handle { position: absolute; display: block; box-sizing: border-box; cursor: default; z-index: 1; top: 1.9rem; width: 1rem; height: 1rem; background-color: var(--black); border-radius: 1rem; cursor: grab; } .irs--round .irs-min, .irs--round .irs-max { display: none; } .irs-min, .irs-max { position: absolute; display: block; cursor: default; } .irs-min { left: 0; } .irs-max { right: 0; } .irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single { position: absolute; display: block; top: 0; left: 0; cursor: default; white-space: nowrap; font-size: 12px; line-height: 1; text-shadow: none; padding: 3px 5px; background-color: var(--black); color: white; } .irs--round .irs-from:before, .irs--round .irs-to:before, .irs--round .irs-single:before { position: absolute; display: block; content: ""; bottom: -6px; left: 50%; width: 0; height: 0; margin-left: -3px; overflow: hidden; border: 3px solid transparent; border-top-color: var(--black); } .irs--round .irs-grid { position: absolute; display: none; bottom: 0; left: 0; width: 100%; height: 20px; display: block; height: 25px; } .irs--round .irs-grid-pol { position: absolute; top: 0; left: 0; width: 1px; height: 8px; background-color: #dedede; } .irs--round .irs-grid-text { position: absolute; bottom: 0; left: 0; white-space: nowrap; text-align: center; font-size: 9px; line-height: 9px; padding: 0 3px; color: #000; color: silver; font-size: 13px; } .irs-disable-mask { position: absolute; display: block; top: 0; left: -1%; width: 102%; height: 100%; cursor: default; background: rgba(0, 0, 0, 0); z-index: 2; } .lt-ie9 .irs-disable-mask { background: #000; filter: alpha(opacity=0); cursor: not-allowed; } .irs-disabled { opacity: 0.4; } .irs-hidden-input { position: absolute !important; display: block !important; top: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden; outline: none !important; z-index: -9999 !important; background: none !important; border-style: solid !important; border-color: transparent !important; } .yith-wcan-reset-filters { all: unset; position: relative; display: block; -webkit-appearance: none; appearance: none; font-size: 1.25rem; text-transform: uppercase; cursor: pointer; padding: 1rem; width: 100%; text-align: left; transition: all 0.2s linear; color: var(--red); border-bottom: 1px solid var(--black); } .yith-wcan-reset-filters:hover { color: var(--black); } #main > .yith-wcan-reset-filters { display: none; } /* PROMO FLAGS */ .flag-zone { position: absolute; top: var(--spacing-lg); left: var(--spacing-lg); z-index: 5; display: flex; flex-direction: column; align-items: flex-start; align-items: flex-start; } .discount-zone { display: flex; flex-direction: column; align-items: flex-start; } .discount-zone .discount-flag, .second_hand-flag, .new-product-flag { position: relative; margin-bottom: 0.25rem; text-transform: uppercase; padding:0 var(--spacing-xs); line-height:1.25rem; font-weight:500; border-radius:calc(var(--b-radius) / 2);} .new-product-flag{color:var(--white); background:var(--darkgreen);} .discount-flag { background: var(--yellowpromo);} .second_hand-flag { background: var(--green); color: var(--white); } .second_hand-flag svg { position: relative; top: 0.15rem; height: 1rem; width: 1rem; display: inline-block; padding-left: 0.1rem; } /* PRICES */ li.product .price .price-suggested{display:none;} .price del{color:var(--middlegreytext); padding-right:var(--spacing-xs); } /* STOCK COLOR */ .stock { display: flex; align-items: center; gap:var(--spacing-xs);} .stock svg {height: 1.1em; width: 1.1em; display: block; } .stock.in-stock { color: var(--green); border-color: var(--green);} .stock.onOrder, .stock.preOrder, .stock.waitinglist, .stock.soon { color: var(--blue); border-color: var(--blue); } .stock.available-on-backorder { color: var(--orange); border-color: var(--orange); } .stock.outofstock, .stock.discontinued { color: var(--darkred); border-color: var(--darkred); } .stock.pro-exclusive { color: var(--middlegreytext); border-color: var(--middlegreytext); } /* PAGINATION */ .woocommerce-pagination {padding:calc( var(--spacing-vw) / 2); } .woocommerce-pagination .page-numbers { display: flex; justify-content: center; gap:var(--spacing-lg); font-size: 2rem; } .woocommerce-pagination .page-numbers li { position: relative; min-width: 4vw; text-align: center; color: var(--lightgreytext); padding-bottom: 0.5rem; } .woocommerce-pagination .page-numbers li a { color: var(--lightgreytext); transition: all 0.2s linear; } .woocommerce-pagination .page-numbers li a:hover { color: var(--blackmaintext); } .woocommerce-pagination .page-numbers li span.current { color: var(--blackmaintext); } .woocommerce-pagination .page-numbers li .prev, .woocommerce-pagination .page-numbers li .next { height: 100%; display: flex; align-items: center; } .woocommerce-pagination .page-numbers li .prev { padding-left: 1rem; } .woocommerce-pagination .page-numbers li .next { padding-right: 1rem; } .woocommerce-pagination .page-numbers li .prev:after, .woocommerce-pagination .page-numbers li .next:after { display: none !important; } .woocommerce-pagination .page-numbers li .prev, .woocommerce-pagination .page-numbers li .next { opacity: 0.5; transition: all 0.2s linear; } .woocommerce-pagination .page-numbers li .prev:hover, .woocommerce-pagination .page-numbers li .next:hover { opacity: 1;} .woocommerce-pagination .products-count { text-align: center; color: var(--lightgreytext); margin-top:0;} /* CUSTOMER SERVICE STATUT */ .customerService {display: inline-block; color: var(--darkgrey); } .customerService .open, .customerService .close { font-weight: 600; display: inline-block; } .customerService .open:before, .customerService .close:before { content: "•"; position: relative; font-size: 1.2rem; top: 0.07em; left: -2px; animation: blink 0.8s infinite alternate; padding:0 .125rem;} @keyframes blink {to { opacity: 0.1; }} .customerService .open { color: var(--green); } .customerService .close { color: var(--red); } /* POP UP */ .popUp { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99; background-color: var(--overlay); display: none; } .popUp .closePopUp { position: absolute; top: 0.5rem; right: 0.5rem; height: 28px; width: 28px; cursor: pointer; transition: all 0.2s linear; transform: scale(1); border-radius: 50%; z-index: 999; background: var(--white); } .popUp .closePopUp svg {position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 70%; } .popUp .closePopUp:hover { transform: scale(1.2); } .popUp .popUpContainer { position: absolute; width: 90vw; max-width: 910px; max-height: 90vh; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--white); overflow: hidden; display: flex; flex-direction: column; } .popUp .popUpBody { overflow-y: auto; flex: 1; min-height: 0; } body.popup-open { overflow: hidden; } /* COUNTRY LANGUAGE SELECTION */ .flag { border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; } .countryLang-switcher {display: inline-block; } .countryLang-switcher a { display: flex; align-items: center; gap: 0.25rem; color: var(--white); } .countryLang-switcher img { width: 16px; height: 16px; border-radius:20px; } #topNav .countryLang-switcher img { border: 1px solid var(--darkgreytext); } /* COUNTRY SELECTION */ #popUp-CountryLanguage .popUpContainer { max-width: 500px; padding: var(--spacing-vw); overflow: inherit; } #popUp-CountryLanguage .popUpContainer .fakeSelect { margin-bottom: 0; } #popUp-CountryLanguage .popUpContainer .loggedChangeCountry { display: block; margin-bottom: var(--spacing-lg); } #popUp-CountryLanguage .popUpContainer .loggedChangeCountry > div { position: relative; padding: 0.85rem 0.66rem; margin-bottom: 0.5rem; border:var(--border); border-radius:var(--b-radius); width: 100%; text-decoration: none; line-height: 1rem; background: transparent; text-align: left; outline: none; appearance: none !important; transition:var(--transition-ease); display:flex; align-items: center;} #popUp-CountryLanguage #headline { font-size:1.75rem; } #popUp-CountryLanguage p { color: var(--darkgreytext); display: inline-block; margin-bottom: var(--spacing-2xl);margin-top:0; } #popUp-CountryLanguage img { width: 20px !important; height: 20px !important; border-radius:20px; } #popUp-CountryLanguage .fakeSelect, #popUp-CountryLanguage .fakeSelect-item, #popUp-CountryLanguage .loggedChangeCountry > div { display: flex; gap: 0.5rem;} #popUp-CountryLanguage .myCta { margin-bottom: 0; } #nav-mobile .nav-block#nav-fourthBlock .countryLang-switcher { padding: 1rem 0 1rem 0.5rem; } #nav-mobile .nav-block#nav-fourthBlock .countryLang-switcher a { color: var(--black); } /* INFO BANNER TICKER */ #infoBanner {width: 100%; background: var(--red); color: var(--white); } #infoBanner .marquee { --gap: 1rem; display: flex; overflow: hidden; user-select: none; gap: var(--gap); } #infoBanner .marquee .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; min-width: 100%; gap: var(--gap); font-size: 0.875em; padding: 0.3em 0; animation: scroll 30s linear infinite; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } #infoBanner .marquee li { display: flex; text-transform: uppercase; align-items: center; gap: 1rem; padding-right: 1rem; } /* READ MORE */ .readmemore > div { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; text-wrap: pretty;} .readmemore.expanded { max-height: none; } .readmemore-btn { position: relative; top: 0; cursor: pointer; font-weight:500; display: none; text-decoration:underline;} /* BREADCRUMB*/ .archive .woocommerce-breadcrumb { position: relative; padding: var(--spacing-xs) var(--spacing-lg); border-bottom:var(--border); margin:0; font-size:.875em;} .single-tips-and-reviews .woocommerce-breadcrumb { width: 100%; max-width: 940px !important; margin: 0 auto; padding:var(--spacing-lg) var(--spacing-vw); font-size:.875em;} .woocommerce-breadcrumb ol{padding:0; margin:0;} .woocommerce-breadcrumb li { display: inline-block; } .woocommerce-breadcrumb li a { position: relative; display: inline-block; z-index: 2; color: var(--middlegreytext); } .woocommerce-breadcrumb .delimiter, .breadcrumbCheckoutSteps .delimiter { position: relative; display: inline-block; top: 1px; width: 10px; height: 8px; background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns:xlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2019.2%2013.2%22%20style%3D%22enable-background%3Anew%200%200%2019.2%2013.2%3B%22%20xml:space%3D%22preserve%22%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%2219.2%2C6.6%2018%2C5.4%2018%2C5.4%2012.6%2C0%2011.4%2C1.2%2016%2C5.8%200%2C5.8%200%2C7.4%2016%2C7.4%2011.4%2C12%2012.6%2C13.2%2018%2C7.8%2018%2C7.8%2019.2%2C6.6%2019.2%2C6.6%22%20fill%3D%22%23767676%22%2F%3E%3C%2Fsvg%3E") left top no-repeat; background-size: 100% auto; margin: 0 0.5em; } .single-tips-and-reviews .woocommerce-breadcrumb ol li:nth-of-type(-n + 1), .single-tips-and-reviews .woocommerce-breadcrumb ol li:nth-last-of-type(-n + 1), .single-tips-and-reviews .woocommerce-breadcrumb ol span.delimiter:nth-of-type(-n + 1), .single-tips-and-reviews .woocommerce-breadcrumb ol span.delimiter:nth-last-of-type(-n + 1) { display: none; } /* FLEXIBLE MAIN */ .flexibleContentSection { position: relative; padding-bottom:var(--spacing-vw); } .flexibleContentBlock { position: relative; padding: var(--spacing-vw);} .flexibleContentBlock .headline { font-size: 1.75rem; } .flexibleContentBlock-title { position: relative; font-size: 1.75rem; display: inline-block; } .flexibleContentBlock-title .blinkingDot { position: relative; top: 0; left: 0.25rem; display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--middlegreytext); animation: blink-animation 1.5s infinite; } @keyframes blink-animation { 1%, 35%, 65% { opacity: 1; } 50%, 100% { opacity: 0; } } .flexibleContentBlock-title.addMarginbottom { margin-bottom: 0.75rem; } .flexibleContentSection .blockCounter { position: absolute; top: var(--spacing-vw); left: 0; transform: translateX(-100%); background: var(--ultralightgrey); border-radius:var(--b-radius); padding: 0.25rem 0.5rem; font-size: 0.75rem; } .flexibleContentBlock > header, .flexibleContentBlock > .fc_content > header, .flexibleContentBlock > section > header { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); padding:0 calc(var(--spacing-vw) / 2);} @media (width <= 1000px) { .flexibleContentBlock > header, .flexibleContentBlock > .fc_content > header, .flexibleContentBlock > section > header {margin-bottom:0; padding:0 var(--spacing-vw);} } .flexibleContentBlock header .see-more { position: relative; transition: all 0.2s linear; padding-right: 1.5rem; padding-bottom: 0.1rem; } .flexibleContentBlock header .see-more::after { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 1.25em; background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns:xlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2019.2%2013.2%22%20style%3D%22enable-background%3Anew%200%200%2019.2%2013.2%3B%22%20xml:space%3D%22preserve%22%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%2219.2%2C6.6%2018%2C5.4%2018%2C5.4%2012.6%2C0%2011.4%2C1.2%2016%2C5.8%200%2C5.8%200%2C7.4%2016%2C7.4%2011.4%2C12%2012.6%2C13.2%2018%2C7.8%2018%2C7.8%2019.2%2C6.6%2019.2%2C6.6%22%20fill%3D%22%23767676%22%2F%3E%3C%2Fsvg%3E") right 47% no-repeat; background-size: auto 44%; transition: var(--transition-ease); } .flexibleContentBlock header .see-more:hover:after { right: -0.5em; } @media (width <= 600px) { .flexibleContentBlock header .see-more{display:none;} } .flexibleContentBlock .featured_text { position: absolute; top:50%; transform:translateY(-50%); left: 0; right: 0; padding: var(--spacing-vw); z-index: 2; text-wrap: pretty; } .flexibleContentBlock .featured_text h2 { font-size: 1.25rem; color: var(--ultradarkgrey); background:var(--white); margin:0; display:inline-block; padding:0 var(--spacing-xs);} .flexibleContentBlock .featured_text .link { position: relative; font-size: 1rem; background: var(--black); color: var(--white); padding: 0 var(--spacing-xs); text-transform: uppercase; display: inline-flex; align-items: center; gap: 0; } .flexibleContentBlock .featured_text .linkArrow { display: flex; align-items: center; flex-shrink: 0; max-width: 0; overflow: hidden; transition:var(--transition-ease); } .flexibleContentBlock .featured_text .linkArrow svg { width: 1.4em; height: 1.4em; } /* FLEXIBLE FEATURED BLOCK */ .fc_featured-blocks { padding-left: 0; padding-right: 0;} .flexibleContentSection > .fc_featured-blocks:first-of-type{padding-top:0; } .fc_featured-blocks header{padding:0 var(--spacing-vw);} .flexibleContentSection > .fc_featured-blocks:first-of-type header{display: none;} .fc_featured-blocks .swiper-slide{ border-bottom:var(--border); border-right:var(--border);} .fc_featured-blocks .featured_block { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; overflow: hidden; } .fc_featured-blocks .featured_block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0000 60%, #00000059 95%); z-index: 1; pointer-events: none; } .fc_featured-blocks img {display: block; width: 100%; height: 100%; object-fit: cover;} .fc_featured-blocks .featured_block:hover .linkArrow { max-width: 1.4em; margin-right: 0.2em; } .fc_featured-blocks .swiper-scrollbar{display:none;} @media (width <= 1000px) { .fc_featured-blocks .swiper-scrollbar{display:block; left:50% !important; width:50% !important; transform:translateX(-50%) !important;} .fc_featured-blocks .swiper {padding-bottom:var(--spacing-vw) !important;} } @media (width > 1000px) { .fc_featured-blocks .swiper { overflow: hidden; } .fc_featured-blocks .swiper-wrapper { display: flex !important; transform: none !important; flex-wrap: nowrap; align-items: stretch; } .fc_featured-blocks .swiper-slide { flex: 0 0 calc(100% / 3); width: calc(100% / 3) !important; height: auto !important; } .fc_featured-blocks .featured_block { aspect-ratio: 2/3; height: auto; } .fc_featured-blocks .swiper-button-prev, .fc_featured-blocks .swiper-button-next { display: none !important; } } /* FLEXIBLE SHOWCASE SLIDER */ .flexibleContentBlock.fc_product-showcase-slider{padding-left:0; padding-right:0;} .fc_product-showcase-slider .swiper-wrapper .swiper-slide{border-top:var(--border);} .related-brand-swiper .swiper-wrapper{align-items:stretch;} .related-brand-swiper .swiper-slide{height:auto !important;} .related-brand-swiper li.product{height:100%;} .fc_product-showcase-slider .swiper-scrollbar, .fc_product-showcase-block .swiper-scrollbar, .fc_page-showcase-slider .swiper-scrollbar{display:none;} @media (width <= 1000px) { .fc_product-showcase-slider .swiper-scrollbar, .fc_product-showcase-block .swiper-scrollbar, .fc_page-showcase-slider .swiper-scrollbar{display:block; left:50% !important; width:50% !important; transform:translateX(-50%) !important;} .fc_product-showcase-slider .swiper, .fc_product-showcase-block .swiper, .fc_page-showcase-slider .swiper {padding-bottom:var(--spacing-vw) !important;} } /* showcase block in article */ .fc_product-showcase-block { max-width: 940px; margin: 0 auto;} .fc_product-showcase-block .product-list ul li.product { border:var(--border); border-radius: var(--b-radius); overflow: hidden; } .fc_product-showcase-block.onePerLine .product-list ul{grid-template-columns: 1fr; max-width:750px; width: 75%;} .fc_product-showcase-block.onePerLine .product-list ul li.type-product{grid-template-columns: 1.5fr 4fr;} .fc_product-showcase-block.onePerLine li.product article .button{max-width:250px;} .fc_product-showcase-block.twoPerLine .product-list ul { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--spacing-vw) / 2); } .fc_product-showcase-block .product-list ul li.type-product {display: grid !important; grid-template-rows: inherit; grid-template-columns: 1.5fr 2fr; } .fc_product-showcase-block li.product article{display: flex; flex-direction: column; justify-content: space-between;} .fc_product-showcase-block li.product article .button{margin-bottom:0; border:var(--border); background-color:var(--white); color:var(--middlegreytext)} .fc_product-showcase-block li.product article .button:hover{background:var(--black); color:var(--white); border-color:transparent} .fc_product-showcase-block .product-list ul li.product .woocommerce-loop-product__meta, .fc_product-showcase-block .product-list ul li.product .adminShort{display:none;} @media (width <= 800px) { .fc_product-showcase-block.twoPerLine .product-list ul{grid-template-columns:1fr;} .fc_product-showcase-block .product-list ul li.type-product{grid-template-columns: 1fr 2fr;} .fc_product-showcase-block li.product article .button{max-width:250px;} } /* showcase recently view home */ .fc_product-showcase-block.recentlyViewHome { max-width: inherit; padding: 0; padding-bottom: var(--spacing-vw); } .fc_product-showcase-block.recentlyViewHome .product-list > header { padding: 0 var(--spacing-vw); } .fc_product-showcase-block.recentlyViewHome .product-list ul {display: flex; grid-template-columns: inherit; padding-left: var(--spacing-vw); } .fc_product-showcase-block.recentlyViewHome .product-list ul li.type-product{grid-template-columns: 90px 1fr; border-radius:inherit;} .fc_product-showcase-block.recentlyViewHome .product-list ul .woocommerce-loop-product__meta .skel, .fc_product-showcase-block.recentlyViewHome .product-list ul .woocommerce-loop-product__meta .stock, .fc_product-showcase-block.recentlyViewHome .product-list .flag-zone { display: none; } .fc_product-showcase-block.recentlyViewHome .product-list .rvp-remove { position: absolute; top: 0.75rem; right: 0.75rem; display: none; z-index: 20; } .fc_product-showcase-block.recentlyViewHome .product-list li:hover .rvp-remove { display: block; } @media (width <= 1000px) { .fc_product-showcase-block.recentlyViewHome {padding-top: var(--spacing-vw); } } /* FC PAGE SHOWCASE */ .fc_page-showcase-slider { padding-left: 0; padding-right: 0; } .fc_page-showcase-slider .swiper-wrapper { align-items: stretch; } .fc_page-showcase-slider .swiper-slide { height: auto !important; } .fc_page-showcase-slider .page-showcase-grid > li { border: var(--border); border-left: 0; } .fc_page-showcase-slider .page-item { height: 100%; } .fc_page-showcase-slider .page-item > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .fc_page-showcase-slider .page-item header { position: relative; overflow: hidden; } .fc_page-showcase-slider .page-item header img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; display: block; transition: transform 0.4s ease; } .fc_page-showcase-slider .page-item:hover header img { transform: scale(1.03); } .fc_page-showcase-slider .page-item article { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: var(--spacing-lg); } .fc_page-showcase-slider .page-item .page-item-title{font-weight: 600; line-height: 1.5; text-wrap: pretty;} .fc_page-showcase-slider .page-item .page-item-description{display: block; color: var(--middlegreytext); margin-top: .5rem; text-wrap: pretty;} .fc_page-showcase-slider .page-item .page-item-link { display: flex; align-items: center; gap:var(--spacing-sm); color: var(--middlegreytext); margin-top: var(--spacing-lg);} .fc_page-showcase-slider .page-item .page-item-link svg { flex-shrink: 0; stroke: var(--lightgreytext); } .fc_page-showcase-slider .page-item:hover .page-item-link { margin-left:var(--spacing-sm); } .fc_page-showcase-slider li.product { height: 100%; } .fc_page-showcase-slider li.product article { display: flex; flex-direction: column; justify-content: space-between; } .fc_page-showcase-slider li.product .woocommerce-loop-product__meta, .fc_page-showcase-slider li.product .adminShort { display: none; } /* FLEXIBLE CATEGORY */ .fc_categories-blocks { padding-left:0; padding-right:0; } .fc_categories-blocks .cat-item { border: var(--border); border-left: 0; } .fc_categories-blocks .cat-item figure { position: relative; overflow: hidden; margin: 0; background: var(--ultralightgrey); } .fc_categories-blocks.ratio-11 .cat-item figure { aspect-ratio: 1; } .fc_categories-blocks.ratio-45 .cat-item figure { aspect-ratio: 4 / 5; } .fc_categories-blocks .cat-item figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-linear); transform: scale(1); } @media (hover: hover) and (pointer: fine) { .fc_categories-blocks .cat-item a:hover img{transform: scale(1.04);} } .fc_categories-blocks .cat-item .catInfos { padding: var(--spacing-lg); } .fc_categories-blocks .cat-item .catCount { display: block; color: var(--lightgreytext); font-weight: 400; margin-bottom: .25rem; } .fc_categories-blocks-brands .cat-item .catCount { display: none; } .fc_categories-blocks .cat-item .catInfos h3 { min-height: var(--spacing-3xl); font-weight: 600; } .fc_categories-blocks-brands .cat-item .catInfos h3 { min-height: inherit; } .fc_categories-blocks .cat-item .catInfos p { display: none; } .fc_categories-blocks-brands .cat-item .catInfos p { display: block; color: var(--middlegreytext); margin-top: .5rem; text-wrap: pretty;} .fc_categories-blocks .swiper-scrollbar { display: none; } /* Equal-height slides */ .fc_categories-blocks .swiper-slide.cat-item { height: auto !important; display: flex; flex-direction: column; } .fc_categories-blocks .cat-item a { flex: 1; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .fc_categories-blocks .cat-item figure { flex-shrink: 0; } /* Multi-image gallery stacking */ .fc_categories-blocks .cat-item figure.has-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; transition: none; } .fc_categories-blocks-brands .cat-item figure.has-gallery img { object-fit: contain; padding: 12%; } @media (width <= 1000px) { .fc_categories-blocks .swiper ul{padding-bottom:var(--spacing-vw);} .fc_categories-blocks .swiper-scrollbar {display:block; left:50% !important; width:50% !important; transform:translateX(-50%) !important;} } /* FLEXIBLE FEATURED WIDE */ .fc_featured-wide { padding:0;} .fc_featured-wide .fc_content { position: relative; width: 100%; height: 70vh; max-height: 400px; } .fc_featured-wide .fc_content .featured_media{width:100%; height:100%; display: block;} .fc_featured-wide .fc_content img{width:100%; height:100%; display: block; object-fit: cover; } .fc_featured-wide .fc_content .featured_media::after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(at bottom, #0000 60%, #00000080 100%), linear-gradient(#0000 43.18%, #00000080 100%);} .fc_featured-wide .featured_text{position:absolute; bottom:0; left:0; color:var(--white); padding:var(--spacing-vw); text-wrap:pretty;} .fc_featured-wide .featured_text h1{font-size:1.75rem; margin-bottom:var(--spacing-md); text-wrap:pretty;} /* FLEXIBLE TEXT */ .flexibleContentBlock.fc_text { margin: 0 auto; width: 100%; max-width: 940px; } .flexibleContentBlock.fc_text .fc_content { width: 75%; max-width: 705px; } .flexibleContentBlock.fc_text .fc_content img { max-width: 100%; height: auto; } .flexibleContentBlock.fc_text .fc_content p:last-child { margin-bottom: 0; } @media (width <= 800px) { .flexibleContentBlock.fc_text .fc_content { width: 100%; max-width: inherit; } } /* FLEXIBLE HEADLINE */ .flexibleContentBlock.fc_headline {margin-left: auto; margin-right: auto; width: 100%; max-width: 940px; font-size: 2rem; color: var(--darkgreen); padding-bottom:0;} .flexibleContentBlock.fc_headline h2, .flexibleContentBlock.fc_headline h3 { display: inline; } .product .flexibleContentBlock.fc_headline { padding-left:var(--spacing-vw); } @media (width <= 600px) { .flexibleContentBlock.fc_headline { font-size: 1.75rem;} } /* FLEXIBLE SLIDER */ .fc_image_slider { width: 100%; width: 100%; overflow: hidden; padding:0;} .fc_image_slider .swiper-fc_images { position: relative; width: 100%; max-height: 100vh; display: flex; padding-left: 0; overflow: hidden; padding-bottom:var(--spacing-2xl) !important;} .fc_image_slider .swiper-fc_images .swiper-wrapper { display: flex; align-items: center; width: 100%; height: 100%; } .fc_image_slider .swiper-fc_images .swiper-wrapper .swiper-slide { transition: transform 0.35s ease, margin-left 0.35s ease; margin: 0; } .fc_image_slider .swiper-fc_images .swiper-wrapper .swiper-slide img { height: auto; max-height: 90vh; width: auto; max-width: 100%; display: block; transition: transform 0.35s ease; transform: scale(0.7); } .fc_image_slider .swiper-fc_images .swiper-slide.swiper-slide-active { margin-left: 10vw; } .fc_image_slider .swiper-fc_images .swiper-slide.swiper-slide-active img { transform: scale(1); } .fc_image_slider .swiper-fc_images.swiper .swiper-button-prev, .fc_image_slider .swiper-fc_images.swiper .swiper-button-next { width: 25%; } @media (width <= 520px) { .fc_image_slider .swiper-fc_images .swiper-slide.swiper-slide-active { margin-left: 0; } .fc_image_slider .swiper-fc_images .swiper-wrapper .swiper-slide img { transform: scale(1); width: 100%; } .fc_image_slider .swiper-fc_images.swiper .swiper-button-prev, .fc_image_slider .swiper-fc_images.swiper .swiper-button-next { display: none; } } /* FLEXIBLE IMAGES */ .flexibleContentBlock.fc_image { display: grid; column-gap:calc(2 * var(--spacing-vw)); padding:0;} .flexibleContentBlock.fc_image.fc_image_small_padding { padding-bottom: 0; } .editorial-content .flexibleContentBlock.fc_image { position: relative; display: grid; column-gap: var(--spacing-vw); margin: 0 auto; width: 100%; max-width: 940px; padding-left: var(--spacing-vw); padding-right: var(--spacing-vw); } .flexibleContentBlock.fc_image.first_left .fc_image_right { position: relative; margin-top: calc(2 * var(--spacing-vw)); } .flexibleContentBlock.fc_image.first_right .fc_image_left { position: relative; margin-top: calc(2 * var(--spacing-vw)); } .flexibleContentBlock.fc_image.image_ratio_oneThirdTwoThird { grid-template-columns: 1fr 2fr; } .flexibleContentBlock.fc_image.image_ratio_half { grid-template-columns: 1fr 1fr; } .flexibleContentBlock.fc_image.image_ratio_twoThirdOneThird { grid-template-columns: 2fr 1fr; } .editorial-content .flexibleContentBlock.fc_image.image_ratio_fullWidth { padding: 0; } .flexibleContentBlock.fc_image figure { position: relative; display: block; margin:0;} .flexibleContentBlock.fc_image figure img { width: 100%; height: auto; } .flexibleContentBlock.fc_image .image-caption { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(5px); padding: 0.75rem 2.5rem 0.65rem 0.75rem; font-size: 0.9rem; color: var(--white); opacity: 0; transition: all 0.2s linear; } .flexibleContentBlock.fc_image figure:hover .image-caption { opacity: 1; } @media (width <= 600px) { .flexibleContentBlock .fc_image_right, .flexibleContentBlock .fc_image_left { margin-top: 0 !important; width: 75vw; } .flexibleContentBlock .fc_image_right { position: relative; left: 25vw; } .flexibleContentBlock.first_right .fc_image_right, .flexibleContentBlock.first_left .fc_image_left { order: 1; } .flexibleContentBlock.first_right .fc_image_left, .flexibleContentBlock.first_left .fc_image_right { order: 2; } .flexibleContentBlock.fc_image.image_ratio_oneThirdTwoThird, .flexibleContentBlock.fc_image.image_ratio_half, .flexibleContentBlock.fc_image.image_ratio_twoThirdOneThird { grid-template-columns: 1fr; gap: 7.5vw; } .flexibleContentBlock.fc_image.image_ratio_fullWidth .fc_image_right, .flexibleContentBlock.fc_image.image_ratio_fullWidth .fc_image_left { width: 100vw; } .flexibleContentBlock.fc_image, .editorial-content .flexibleContentBlock.fc_image{padding-left:0; padding-right:0;} } /* FLEXIBLE KEY FEATURES */ .flexibleContentBlock.fc_key-features .fc_content {display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-vw); } .editorial-content .flexibleContentBlock.fc_key-features .fc_content { margin: 0 auto; max-width: 940px; } .flexibleContentBlock.fc_key-features .fc_content figure, .flexibleContentBlock.fc_key-features .fc_content .videoContainer { position: relative; width: 100%; height: auto; border: var(--border); padding:0; margin:0; aspect-ratio: 3 / 2;} .flexibleContentBlock.fc_key-features .fc_content figure img, .flexibleContentBlock.fc_key-features .fc_content .videoContainer video { position: relative; width: 100%; height: 100%; object-fit: cover; } .flexibleContentBlock.fc_key-features .fc_content .text_wrap { margin-top: 1rem; } @media (width <= 700px) { .flexibleContentBlock.fc_key-features .fc_content{grid-template-columns:1fr;} } /* FLEXIBLE ACCORDION */ .flexibleContentBlock.fc_accordion { position: relative; margin-left: auto; margin-right: auto; width: 100%; max-width: 940px; } .flexibleContentBlock.fc_accordion .fc_content { width: 75%; max-width: 705px; } .fc_accordion .accordion-group { border-top: var(--border); } .fc_accordion .accordion-group .accordion { position: relative; border-bottom:var(--border); transition: all 0.2s ease-out; } .fc_accordion .accordion-group .accordion-title { position: relative; font-size: 1.25rem; cursor: pointer; padding: var(--spacing-lg) 3rem var(--spacing-lg) 0; width: 100%; margin: 0 auto; text-align: left; outline: none; } .single-product .fc_accordion .accordion-group .accordion-title { max-width: 940px; padding-left:var(--spacing-vw); padding-right:var(--spacing-vw);} .fc_accordion .accordion-group .accordion-title::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; width: 1.125rem; height: 1px; background: var(--black); } .fc_accordion .accordion-group .accordion-title::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; width: 1.125rem; height: 1px; background: var(--black); transform: rotate(-90deg); transition: all 0.2s linear; opacity: 1; } .fc_accordion .accordion-group .accordion-title b { font-weight: 600; } .fc_accordion .accordion-group .active .accordion-title::after { transform: rotate(0); opacity: 0; } .fc_accordion .accordion-group .panel { overflow: hidden; max-height: 0; width: 100%; margin: 0 auto; } .single-product .fc_accordion .accordion-group .panel { max-width: 940px; padding-left:var(--spacing-vw); padding-right:var(--spacing-vw);} .fc_accordion .accordion-group .panel > div { padding-bottom: 1rem; } .fc_accordion .accordion-group .active .panel { max-height: 9000px; } .fc_accordion .accordion-group .active .panel p:last-child { margin-bottom: 0; } @media (width <= 700px) { .flexibleContentBlock.fc_accordion .fc_content{width:100%; max-width:100%;} .fc_accordion .accordion-group .accordion{padding-left:var(--spacing-vw);} } /* FLEXIBLE TABLE */ .flexibleContentBlock.fc_table {margin-left: auto; margin-right: auto; width: 100%; max-width: 940px; padding-right:0;} .flexibleContentBlock.fc_table .text_wrap table { width: 100%; } .flexibleContentBlock.fc_table .text_wrap table tr td:first-child { font-weight: 600; } .flexibleContentBlock.fc_table .text_wrap table td { min-width: 200px; } .flexibleContentBlock.fc_table .fc_content { display: flex; overscroll-behavior-x: contain; overflow-x: scroll !important; padding-right: var(--spacing-vw); padding-bottom: 0.5rem; } .flexibleContentBlock.fc_table .fc_content::-webkit-scrollbar { -webkit-appearance: none; height: 7px; } .flexibleContentBlock.fc_table .fc_content::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--ultralightgrey); } /* FLEXIBLE TABLE OF CONTENT */ .flexibleContentBlock.fc_table-of-content {margin: 0 auto; width: 100%; max-width: 940px;} .flexibleContentBlock.fc_table-of-content .fc_content { width: 75%; max-width: 705px; background: var(--ultralightgrey); border-radius: var(--b-radius); padding: var(--spacing-vw); color: var(--darkgreen); } .flexibleContentBlock.fc_table-of-content .fc_content ol { margin:0; } @media (width <= 800px) { .flexibleContentBlock.fc_table-of-content .fc_content { width: 100%; max-width: inherit; } } /* FLEXIBLE RELATED ARTICLE */ .fc_product-related-article { margin: 0 auto; max-width: calc(1600px + 2 * var(--spacing-vw));} .single-tips-and-reviews .fc_product-related-article { max-width: 940px; } .fc_product-related-article .related-article-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-vw); } .single-tips-and-reviews .fc_product-related-article .related-article-list { grid-template-columns: 1fr; gap:var(--spacing-vw); } @media (width <= 1000px) { .fc_product-related-article .related-article-list { grid-template-columns: 1fr 1fr; gap:var(--spacing-vw); } } @media (width <= 600px) { .fc_product-related-article .related-article-list { grid-template-columns: 1fr;} } /* FLEXIBLE SHOP REVIEW */ .fc_shop-reviews { padding: 0; margin: calc(2 * var(--spacing-vw)) 0; } .fc_shop-reviews .fc_content { position: relative; height:90vh; } .fc_shop-reviews .swiper { height: 100%; overflow: hidden;} .fc_shop-reviews .swiper .swiper-wrapper{background: var(--ultralightgrey); border-top:var(--border); border-bottom:var(--border);} .fc_shop-reviews .swiper-slide a{ display:block; width:100%; height: 100%;} .fc_shop-reviews .swiper-scrollbar { display: none; } @media (width <= 820px) { .fc_shop-reviews .fc_content { height: auto; } .fc_shop-reviews .swiper { height: 70vh; padding-bottom: var(--spacing-vw) !important; } .fc_shop-reviews .swiper-scrollbar { display: block; left: 50% !important; width: 50% !important; transform: translateX(-50%) !important; } } @media (width > 820px) { .fc_shop-reviews .swiper-wrapper { display: flex !important; transform: none !important; flex-wrap: nowrap; height: 100%; } .fc_shop-reviews .swiper-slide { flex: 0 0 calc(100% / 3); width: calc(100% / 3) !important; height: 100% !important; } .fc_shop-reviews .swiper-slide:nth-child(2) { border-left:var(--border); border-right:var(--border); } } .fc_shop-reviews .shop_section {position:relative; height: 100%;} .fc_shop-reviews .shop_section img {position: absolute; width: 100%; height: 100%; object-fit: cover;} .fc_shop-reviews .shop_section:hover .linkArrow, .fc_shop-reviews .map_section:hover .linkArrow { max-width: 1.4em; margin-right: 0.2em; } .fc_shop-reviews .reviews_section { position: relative; overflow: hidden; background-color:var(--lightgreen); height: 100%;} .fc_shop-reviews .reviews_section img {position: absolute; width: 100%; height: 100%; object-fit: cover; filter: blur(5px);} .fc_shop-reviews .review_slider { position: absolute; width: 100%; display: flex; flex-direction: column; animation: 30s linear infinite reviewScrollUp; } .fc_shop-reviews .review_set { display: flex; flex-direction: column; } .fc_shop-reviews .review {margin: 0 auto var(--spacing-vw) auto; width:calc(100% - (2 * var(--spacing-vw))); } @keyframes reviewScrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } .fc_shop-reviews .rvw_content {padding:var(--spacing-lg); background-color:var(--white); } .fc_shop-reviews .rvw_content p{margin:0; text-wrap: pretty;} .fc_shop-reviews .rvw_meta{display:flex; align-items: stretch; } .fc_shop-reviews .rvw_stars{display:flex; align-items: center; } .fc_shop-reviews .rvw_stars .stars {background:var(--black); padding:var(--spacing-sm); --percent: calc(var(--rating) / 5 * 100%); display: inline-block; font-size: 0.9em; font-family: Times; line-height: 1; &::before { content: "★★★★★"; background: linear-gradient( 90deg, #fc0 var(--percent), var(--lightgrey) var(--percent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }} .fc_shop-reviews .rvw_name{background-color:var(--darkgreen); color:var(--white); padding:0 var(--spacing-sm); display:flex; align-items: center;} .fc_shop-reviews .review .rvw_stars span{ display: none; } .fc_shop-reviews .map_section {position:relative; height: 100%;} .fc_shop-reviews .map_section img {position: absolute; width: 100%; height: 100%; object-fit: cover;} /* FLEXIBLE IMAGE COMPARE */ .flexibleContentBlock.fc_image-compare {margin: 0 auto; width: 100%; max-width: 940px; } .flexibleContentBlock.fc_image-compare .comparison-slider-wrapper { position: relative; width: 100%; } .flexibleContentBlock.fc_image-compare .comparison-slider {width: 100%; margin: 0; box-sizing: border-box; } .flexibleContentBlock.fc_image-compare .comparison-slider img { width: 100%; height: auto; display: block; } .flexibleContentBlock.fc_image-compare .overlay { position: absolute; width: auto; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(5px); padding: 0.5rem; box-sizing: border-box; color: var(--white); text-align: right; white-space: nowrap; border-top-left-radius: var(--b-radius); } .flexibleContentBlock.fc_image-compare .resize { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; } .flexibleContentBlock.fc_image-compare .resize .overlay { right: auto; left: 0; text-align: left; border-top-left-radius: inherit; border-top-right-radius: 0.1875rem; } .flexibleContentBlock.fc_image-compare .divider { position: absolute; width: 1px; height: 100%; background-color: var(--white); left: 50%; top: 0; bottom: 0; margin-left: -1px; cursor: col-resize; } .flexibleContentBlock.fc_image-compare .divider::before { content: ""; position: absolute; width: 20px; height: 20px; left: -9.5px; top: 50%; margin-top: -10px; background-color: var(--white); transform: rotate(45deg); } .flexibleContentBlock.fc_image-compare .divider::after { content: ""; position: absolute; width: 12px; height: 12px; left: -5px; top: 50%; margin-top: -6px; background-color: var(--white); transform: rotate(45deg); } .tadaaam.showSlider .resize { width: 50%; } .tadaaam.showSlider .divider { left: 50%; } @keyframes showSliderResize { 0%, 100% { width: 50%; } 25%, 40% { width: 60%; } 60%, 75% { width: 40%; } } @keyframes showSliderDivider { 0%, 100% { left: 50%; } 25%, 40% { left: 60%; } 60%, 75% { left: 40%; } } .tadaaam-active.showSlider .resize { animation: showSliderResize 2s; } .tadaaam-active.showSlider .divider { animation: showSliderDivider 2s; } /* FLEXIBLE VIDEO */ .flexibleContentBlock.fc_video {background: var(--lightgreen); padding: inherit; margin: var(--spacing-vw) 0; } .flexibleContentBlock.fc_video .fc_content { margin: 0 auto; width: 100%; max-width: 940px; padding: var(--spacing-2xl) var(--spacing-vw); } .flexibleContentBlock.fc_video .fc_content h2 { color: var(--darkgreen); font-size: 1.75rem; margin: 0 0 0.5rem; } /* FLEXIBLE PRO CONS */ .flexibleContentBlock.fc_pros-cons {margin-left: auto; margin-right: auto; width: 100%; max-width: 940px; } .flexibleContentBlock.fc_pros-cons .fc_content {display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-vw); } .flexibleContentBlock.fc_pros-cons .fc_content > div { overflow: hidden; padding: 1rem; background: var(--ultralightgrey); border-radius: var(--b-radius); } .flexibleContentBlock.fc_pros-cons .fc_content > div::after { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-top-left-radius: (--b-radius); border-bottom-left-radius: (--b-radius); background: var(--green); } .flexibleContentBlock.fc_pros-cons .fc_content > div:last-child::after { background: var(--red); } .flexibleContentBlock.fc_pros-cons .fc_content > div .text_wrap { padding: 0 1rem 0 0.25rem; } .flexibleContentBlock.fc_pros-cons .fc_content ul { margin-left: 2rem; } /* ADMIN SHORTCUTS */ .adminShort {position: absolute; transform: translateY(-156%); z-index: 9; margin: 0.5rem; padding:0 0.5rem; border-radius: var(--b-radius); background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(6.8px); border: 1px solid rgba(255, 255, 255, 0.3); display: flex; gap: 0.25rem; } .adminShort-Ids { top: 0; left: 0; display: none; } li.product:hover .adminShort-Ids { display: block; } .adminShort-Ids svg { position: relative; height: 0.75rem; width: auto; } .adminShort-Ids .copy-btn { color: var(--black); } .adminShort-Ids .copy-btn:hover { color: var(--middlegrey); } .adminShort-Ids .copy-btn:hover svg { fill: var(--middlegrey); } .adminShort-Ids .copy-btn.copied { animation: blinkGreen 1.6s ease-in-out 2; } .adminShort-Ids .copy-btn.copied svg { animation: blinkGreenFill 1.6s ease-in-out 2 !important; } @keyframes blinkGreen { 0%, 10%, 20% { color: var(--black); } 5%, 15%, 25%, 100% { color: #28a745; }} @keyframes blinkGreenFill { 0%, 10%, 20% { fill: inherit; } 5%, 15%, 25%, 100% { fill: #28a745; } } .adminShort-Stock { top: 0; right: 0; } .adminShort-Stock svg { position: relative; top: 0.3rem; height: 0.9rem; width: auto; } .adminShort-Stock .more { display: none; padding-left: 0.5rem; } .adminShort-Stock:hover .more { display: inline-block; } .adminShort-Stock .more b { font-weight: 500; } } /* ============================================================ * LAYER : layout * ============================================================ * Structural rules that position and size the major zones of the page. Layout doesn't care about what components look like — it only defines where they sit. * * METAPHOR : if components are furniture, layout is the floor plan — room sizes, how spaces connect. * * QUALIFICATION TEST : * "If I remove this, do components stay beautiful but float with no structure?" * Yes → layout. * * RULES : * - Structural selectors (#navBar, .page-wrapper, footer...) * - Grid and flex container definitions * - Max-widths, gutters, column structures * - @media queries live here too, next to their rule * * TYPICAL CONTENTS : * header, main nav, sidebar, product grid wrapper, * footer grid, page containers, section spacing * ============================================================ */ @layer layout { #header{position: relative; z-index: 20; width: 100vw;} /* TOP NOTICE BAR */ #topNav {background: var(--black); color: var(--white); font-size: 0.875rem; display: flex; justify-content: space-between; padding: 0.4rem 1rem;} #topNav a { color: var(--white); } #topNav .reinsuranceLeft, #topNav .data-dyn-reinsurance { display: flex; gap: 1.5rem; align-items: center; } #topNav .reinsurance { display: flex; gap: 0.3rem; align-items: center; } #topNav .reinsurance a:hover{ color: var(--white);} #topNav .reinsurance svg { height: auto; width: 1.2em; color: var(--green); } #topNavRight { display: flex; justify-content: flex-end; gap: 1rem; align-items: center; } @media (width <= 1200px) {#topNav iframe { display: none; }} @media (width <= 1000px) { #topNav{padding:0;} #topNav .countryLang-switcher{ display: none; } .reinsuranceLeft { display: flex; overflow: hidden; position: relative; width: 100vw; height:22px; } .reinsurance { flex: 0 0 100%; text-align: center; justify-content: center; opacity: 0; transform: translateX(100%); animation: slideFade 12s infinite; position: absolute; width: 100%; left: 0; top: 0; padding:2px 0;} .reinsurance:nth-child(1) { animation-delay: 0s; } .reinsurance:nth-child(2) { animation-delay: 4s; } .reinsurance:nth-child(3) { animation-delay: 8s; } @keyframes slideFade { 0% { opacity: 0; transform: translateX(100%); } 5% { opacity: 1; transform: translateX(0); } 30% { opacity: 1; transform: translateX(0); } 35% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 0; transform: translateX(-100%); } } } /* NAV BAR */ #navBar {display:flex; top:1px; background: var(--white); z-index: 40; border-bottom:var(--border); padding:.6rem var(--spacing-xl); min-height:48px;} #navBar nav{position:relative; display:flex; justify-content:space-between; /* display:grid; grid-template-columns:1fr auto 1fr; */ align-items: center; gap:var(--spacing-md); width:100%; font-weight:500;} #navBar #logo-liva{position:relative; top:-3px; display:block;} #navBar #logo-liva img{width: 100%; height: 100%; max-height:28px; } #navBar nav > div{display:flex; align-items: center; gap:var(--spacing-vw);} #navBar nav > div #primaryNav{position:relative; top:1px;} #navBar a, #navBar .fakeLink{position:relative;} #navBar #primaryNav a::after, #navBar #secondaryNav .fakeLink::after{content:""; position:absolute; left:0; bottom:-0.3rem; width:100%; height:1px; background:var(--verylightgreytext); transform:scaleX(0); transform-origin:left center; transition:transform 0.25s ease;} #navBar #primaryNav a:hover::after, #navBar #secondaryNav .fakeLink:hover::after{transform:scaleX(1);} #navBar a:hover{color:var(--middlegreytext);} #primaryNav ul, #primaryNav > div, #secondaryNav ul{display:inline-block; } #primaryNav ul li{display:inline-block; margin-right:1rem;} #primaryNav li#woocommerce-categories-desktop-submenu-trigger, #primaryNav li#woocommerce-brands-desktop-submenu-trigger {margin-right:.7rem;} #primaryNav li#woocommerce-categories-desktop-submenu-trigger a, #primaryNav li#woocommerce-brands-desktop-submenu-trigger a {position:relative; padding-right:1rem; cursor:pointer;} #primaryNav li#woocommerce-categories-desktop-submenu-trigger a::before, #primaryNav li#woocommerce-brands-desktop-submenu-trigger a::before { content: ""; position: absolute; right:0px; top: 53%; transform: translateY(-40%); width:11px; height:6px; background: url("data:image/svg+xml,%3Csvg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%222%22%20version%3D%221.1%22%20viewBox%3D%220%200%2019%2011%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22matrix%286.1232e-17%2C1%2C-1%2C6.1232e-17%2C18.3%2C-8.8818e-16%29%22%3E%3Cpath%20d%3D%22M1.4%2C18.3L0%2C16.8L7.7%2C9.1L0%2C1.4L1.4%2C0L10.5%2C9.1L1.4%2C18.3Z%22%20fill%3D%22%23a1a1a1%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center center no-repeat !important; background-size: auto 6px !important; } #primaryNav li#woocommerce-categories-desktop-submenu-trigger a::after, #primaryNav li#woocommerce-brands-desktop-submenu-trigger a::after { width: calc(100% - 1rem); } #primaryNav .menu-menu-left-en-container a{color:var(--darkgreytext);} #secondaryNav {position:relative; top:1px;} #secondaryNav ul{position:relative; display:flex; justify-content: flex-end; align-items: center;} #secondaryNav ul li{display:inline-block; margin-right:1rem;} #secondaryNav #menu-my-account a, #secondaryNav #menu-cart a{display:inline-block;} #secondaryNav svg {position:relative; top:1px; height: 24px; width: 24px; display: inline-block; } #secondaryNav svg.search-icon-mobile {top:1px; height: 22px; width: 22px; } #secondaryNav a svg{stroke:var(--ultradarkgrey);} #secondaryNav a:hover svg{stroke:var(--middlegreytext)!important;} #secondaryNav #menu-search span.fakeLink{color:var(--darkgreytext); cursor:pointer;} #secondaryNav #menu-search .search-icon-mobile{display:none;} #secondaryNav #menu-search svg{stroke:var(--ultradarkgrey); cursor:pointer;} #secondaryNav #menu-search:hover svg{stroke:var(--middlegreytext);} .nav-blink-cursor {position:relative; display:inline-block; top:-1px; width:4px; height:0.85em; background:currentColor; margin-left:3px; vertical-align:middle; animation:navCursorBlink 1s step-end infinite; } @keyframes navCursorBlink { 0%,100%{opacity:1} 50%{opacity:0} } #secondaryNav #menu-my-account {top:1px; margin:0 1rem 0 0; position:relative;} #secondaryNav #menu-contact-us:hover{cursor:pointer; color:var(--middlegreytext);} #secondaryNav #menu-cart{margin:0; position:relative;} #secondaryNav #menu-cart span { position: absolute; font-size: 0.7rem; top: 31%; left:50%; transform: translateX(-50%);} #secondaryNav .navMobileHamburger{margin:0; position:relative;} @media (width <= 1000px) { #navbar{padding:.6rem 1rem;} #navBar nav{display: flex; justify-content: space-between;} #navBar #logo-liva{top:-1px;} #primaryNav, #secondaryNav #menu-visitus, #secondaryNav #menu-contact-us { display: none; } #secondaryNav #menu-search span.fakeLink{display:none;} #secondaryNav #menu-search .search-icon-mobile{display:inline-block;} #secondaryNav #menu-cart{margin-right:1.25rem;} .mobile.navMobileHamburger{display:block; cursor:pointer} #bread {display: flex; flex-direction: column; gap: 5px; width: 24px;} #bread div {height: 2px; background: var(--black); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center;} #navMobileHamburger.navMobileHamburgerOpen #bread .tomatoes {transform: translateY(7px) rotate(45deg);} #navMobileHamburger.navMobileHamburgerOpen #bread .meat {opacity: 0; transform: scaleX(0);} #navMobileHamburger.navMobileHamburgerOpen #bread .salad {transform: translateY(-7px) rotate(-45deg);} #header nav#childLeicaNav { display: none; } } .nav-leica-separator { display: flex; align-items: center; padding: var(--spacing-sm) var(--spacing-vw); margin-top: var(--spacing-sm); border-top: var(--border); } .nav-leica-separator span { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--leica-red); } /* NAV CHILD */ #childLeicaNav { display: flex; justify-content: space-between; background: var(--leica-red); padding: .3rem var(--spacing-xl); color:var(--white);} #childLeicaNav ul{display: flex; } #childLeicaNav .childLeicaNav-left ul li{margin-right: 1rem;} #childLeicaNav .childLeicaNav-right ul li{margin-left: 1rem;} #childLeicaNav a{ color:var(--white);} .subMenuLeica .woocommerce-categories-childs { min-height: calc(128px + 3.25rem); } .subMenuLeica .woocommerce-categories-child ul { display: flex; gap:var(--spacing-xl); } .subMenuLeica .woocommerce-categories-child ul li figure { position: relative; width: 128px; height: 128px; overflow: hidden; margin:0; padding:0;} .subMenuLeica .woocommerce-categories-child ul li figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; transform: scale(1); } .subMenuLeica .woocommerce-categories-child ul li a:hover figure img { transform: scale(1.07); } .subMenuLeica .woocommerce-categories-child ul li .title-cat-child { position: relative; margin-top:var(--spacing-sm); font-weight:500} .subMenuLeica #woocommerce-categories-submenu-ctt .woocommerce-categories-childs .woocommerce-categories-child:first-child { display: flex; } .book-a-demo-parent a, .reservez-une-demo-parent a, .boek-een-demo-parent a { background: var(--leica-red); color: var(--white); } /* SEARCH PANEL */ #search-overlay { position: fixed; inset: 0; top: var(--search-top, 0px); background: var(--overlay); z-index: 97; opacity: 0; pointer-events: none; transition: opacity var(--transition-ease); } #search-overlay.active { opacity: 1; pointer-events: auto; } #searchPanel { position: fixed; top: var(--search-top, 0px); right: 0; width: 90vw; max-width: 440px; height: calc(100% - var(--search-top, 0px)); border-left: var(--border); background: var(--ultralightgrey); z-index: 98; padding: var(--spacing-lg); transform: translateX(100%); transition: transform var(--transition-ease); overflow-y: auto; } #searchPanel.searchPanelOpen { transform: translateX(0); } .search-panel-subtitle{ text-transform: uppercase; font-weight: 500; margin-bottom:var(--spacing-xs)} #searchPanel > div ul li{font-size: .875rem; margin-bottom:var(--spacing-xs)} .search-panel-recent ul .product-brand{color:var(--middlegreytext);} #searchPanel > div a:hover{padding-left: var(--spacing-xs);} .search-panel-popular{margin-bottom:var(--spacing-lg);} /* SUBMENUS */ .subMenu { position: absolute; top: 0; left: 0; display:none; z-index:50; width: 100%; background: var(--white); border-bottom:var(--border); } .subMenu::before { content: ""; width: 100%; height: 1px; position: absolute; top: -1px; left: 0; } /* SUBMENU CATEGORIES */ #woocommerce-categories-submenu-ctt { display: grid; grid-template-columns: 1fr 3fr;} .subMenu ul.woocommerce-categories-parents { border-right:var(--border); background:var(--ultralightgrey); } .subMenu ul.woocommerce-categories-parents li {position:relative; overflow: hidden; border-bottom:var(--border);} .subMenu ul.woocommerce-categories-parents li:last-child{border-bottom:0;} .subMenu ul.woocommerce-categories-parents li a {padding: var(--spacing-md) var(--spacing-xl); display: block; transition:var(--transition-ease); font-weight:400; text-transform:uppercase;} .subMenu ul.woocommerce-categories-parents li.active a { padding-left: 2.75rem; background: var(--verylightgrey); } .subMenu ul.woocommerce-categories-parents li a:hover { background: var(--verylightgrey); color:var(--blackmaintext);} .subMenu ul.woocommerce-categories-parents li svg { position: absolute; top: 0; left: -3rem; width: 1.25rem; height: 100%; opacity: 0; transition:var(--transition-ease); } .subMenu ul.woocommerce-categories-parents li.active svg { opacity: 0.5; left: 1rem; } .subMenu .woocommerce-categories-childs { position: relative; padding: 1rem; } .subMenu .woocommerce-categories-childs .woocommerce-categories-child { position: absolute; top: 0; left: 0; width: 100%; height: 100%; columns: 3; padding: var(--spacing-xl); display: none; gap: 3vw; } .subMenu .woocommerce-categories-child.photo-cat-child { display: flex; } .subMenu .woocommerce-categories-childs .title-cat-child { position: relative; display: inline-block; margin-bottom: 0.25rem; font-weight: 600; text-transform:uppercase; color:var(--darkgreytext);} .subMenu .woocommerce-categories-grand-child { position: relative; padding-bottom: 1.5rem; } .subMenu .woocommerce-categories-grand-child li { position: relative; margin-bottom: var(--spacing-xs); font-size:0.9286rem;} .subMenu .woocommerce-categories-grand-child a:hover{padding-left:var(--spacing-xs); color: var(--middlegreytext);} /* SUBMENU BRANDS */ #woocommerce-brands-submenu-ctt { display: grid; grid-template-columns:3fr 2fr; font-size:0.9286rem; min-height:250px;} #woocommerce-brands-editorial { display: grid; grid-template-columns: 500px 1fr 1fr; border-right: var(--border); } #woocommerce-brands-featured, #woocommerce-brands-latest { padding: var(--spacing-xl) var(--spacing-2xl); } #woocommerce-brands-submenu-ctt .woocommerce-brands-title{margin-bottom:var(--spacing-sm); font-weight: 600; text-transform: uppercase; color: var(--darkgreytext);} #woocommerce-brands-submenu-ctt ul li { position: relative; margin-bottom:var(--spacing-xs); font-size:0.9286rem;} #woocommerce-brands-submenu-ctt ul li a:hover{padding-left:var(--spacing-xs); color: var(--middlegreytext);} #woocommerce-brands-featured { border-right: var(--border); } #woocommerce-brands-featured ul { columns: 2; } .subMenu #woocommerce-brands-img { position: relative; background:var(--ultralightgrey);} .subMenu #woocommerce-brands-img-logo img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; max-width: 200px; max-height: 60%; display: none; z-index: 5; } .subMenu #woocommerce-brands-submenu-leica { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .subMenu img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition:var(--transition-ease); transform: scale(1); } .subMenu #woocommerce-brands-submenu-leica:hover img { transform: scale(1.05); } .subMenu #woocommerce-brands-submenu-leica::after { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: radial-gradient(100% 100% at 0 100%,rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.1) 100%); } .subMenu #leica-logo { position: absolute; top: var(--spacing-2xl); left: var(--spacing-2xl); width: 4rem; height: 4rem; z-index: 99; } .subMenu .submenu-leica-title { position: absolute; bottom: var(--spacing-2xl); left: var(--spacing-2xl); font-size: 1.75rem; z-index: 3; color: var(--white); } .allBrands { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; padding:var(--spacing-xl); border-top: var(--border); font-weight: 600; text-align:center; text-transform:uppercase; gap:var(--spacing-xs);} .allBrands svg{position:relative; width:18px; height:18px; } .allBrands:hover{background-color:var(--ultralightgrey); color:var(--blackmaintext);} .allBrands:hover svg{left:var(--spacing-xs)} /* CONTACT SUBMENU */ #woocommerce-contact-submenu {position:absolute; left:unset; right:0; background: var(--white); width: 300px; border:var(--border); border-top: 0; border-right: 0; padding: 1rem 1rem 0.5rem 1rem; display:none;} #woocommerce-contact-submenu div div { position: relative; padding:var(--spacing-md) 0;} #woocommerce-contact-submenu .myCta{margin-bottom:var(--spacing-sm);} #woocommerce-contact-submenu .customerService {position: relative; top: calc(-1 * var(--spacing-md)); left: 50%; transform: translateX(-55%);} #woocommerce-contact-submenu ul {padding: var(--spacing-sm) 0; } #woocommerce-contact-submenu ul a { text-decoration: underline; } #woocommerce-contact-submenu .learn-more { display: inline-block; color: var(--darkgrey); } #woocommerce-contact-submenu .learn-more svg { position: relative; top: 0.1em; height: 0.8em; width: auto; transition: all 0.2s linear; } #woocommerce-contact-submenu .learn-more:hover svg { margin-left: 0.5rem; } /* NAV MOBILE */ #navMobile { position: fixed; width: 100%; z-index: 8; background: var(--white); border-bottom: 1px solid var(--black); box-shadow: rgba(0, 0, 0, 0.247059) 0px 2px 10px 2px; } #navMobile ul { display: grid; grid-template-columns: 1fr 1fr; text-align: center;} #navMobile ul li { position: relative; border-right: 1px solid var(--black); border-bottom: 1px solid var(--black); } #navMobile ul li:nth-child(even) { border-right: 0; } #navMobile ul li a, #navMobile ul li div { display: block; padding: 2em; height: 100%; } #navMobile ul li a:hover, #navMobile ul li div:hover { color: inherit !important; cursor: pointer; } #navMobile .subMenuMobile { display: none; } #navMobile .subMenuMobileOpen { background: url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2018%2018%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns:xlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999/xlink%22%20xml:space%3D%22preserve%22%20xmlns:serif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%3Cg%20transform%3D%22matrix(0.707107%2C0.707107%2C-0.707107%2C0.707107%2C9%2C-3.72792)%22%3E%3Cpath%20d%3D%22M9.5%2C8.5L9.5%2C0L8.5%2C0L8.5%2C8.5L0%2C8.5L0%2C9.5L8.5%2C9.5L8.5%2C18L9.5%2C18L9.5%2C9.5L18%2C9.5L18%2C8.5L9.5%2C8.5Z%22%20style%3D%22fill-rule%3Anonzero%3B%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center center no-repeat; background-size: auto 40%; } #navMobile .subMenuMobileOpen span { display: none; } #nav-mobile { position: fixed; top: var(--nav-mobile-top, 0px); right: 0; background: var(--white); width: 100vw; height: calc(100vh - var(--nav-mobile-top, 0px)); z-index: 60; transition:var(--transition-ease); transform: translateX(100%); } .navMobileOpen #nav-mobile { transform: translateX(0%); } body.navMobileOpen { overflow: hidden; } #nav-mobile #nav-mobile-container-level-0 { position: relative; z-index: 1; overflow-y: scroll; } #nav-mobile .nav-block { padding: var(--spacing-vw) 0; border-bottom:var(--border); } #nav-mobile ul li a, #nav-mobile ul li > span { position: relative; font-size: 1.75rem; background: url("data:image/svg+xml,%3Csvg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%222%22%20version%3D%221.1%22%20viewBox%3D%220%200%2011%2019%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.4%2C18.3L0%2C16.8L7.7%2C9.1L0%2C1.4L1.4%2C0L10.5%2C9.1L1.4%2C18.3Z%22%20fill%3D%22%23757575%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E") center right no-repeat; background-size: auto 1rem; cursor: pointer; display: flex; } #nav-mobile .nav-mobile-cat-level-1 ul li a, #nav-mobile .nav-mobile-cat-level-1 ul li > span, #nav-mobile .nav-mobile-cat-level-2 ul li a, #nav-mobile .nav-mobile-cat-level-2 ul li > span { align-items: center; } #nav-mobile .nav-mobile-cat-level-1 ul li a img, #nav-mobile .nav-mobile-cat-level-1 ul li > span img, #nav-mobile .nav-mobile-cat-level-2 ul li a img, #nav-mobile .nav-mobile-cat-level-2 ul li > span img { position: relative; display: inline-block; border-radius: 50%; width: 2.5rem; height: auto; margin-right: 1rem; } #woocommerce-categories-mobile-submenu-trigger, #woocommerce-brands-mobile-submenu-trigger{ font-weight: 600; } #leica-boutique-trigger, #nav-mobile li[data-sub-category="book-a-demo"]{color:var(--leica-red); text-transform:capitalize;} #nav-mobile .nav-block#nav-secondBlock { position: relative; padding: 0; } #nav-mobile .nav-block#nav-secondBlock > div { position: relative; justify-content: normal; width: 100vw; overflow-x: scroll; padding: 0; } #nav-mobile .nav-block#nav-secondBlock ul { position: relative; display: grid; grid-template-columns: repeat(3, 45vw); } #nav-mobile .nav-block#nav-secondBlock ul li { border-right: var(--border); padding: 0 !important; } #nav-mobile .nav-block#nav-secondBlock ul li:last-child { border-right: 0; } #nav-mobile .nav-block#nav-secondBlock ul li a { position: relative; display: flex; font-size: 1rem; flex-direction: column; align-items: flex-start; background-size: auto 0.7rem; background-position: right calc(100% - 0.15rem); margin:var(--spacing-vw); } #nav-mobile .nav-block#nav-secondBlock ul li a img { height:100%; width:100%; object-fit: cover; margin: 0 0 0.5rem 0; padding: 0; aspect-ratio: 1 / 1;} #nav-mobile .nav-block#nav-thirdBlock { border-bottom: 0; } #nav-mobile .nav-block#nav-thirdBlock ul { display: grid; padding: 0 var(--spacing-vw); gap: var(--spacing-sm); } #nav-mobile .nav-block#nav-thirdBlock ul li { padding: 0; } #nav-mobile .nav-block#nav-thirdBlock ul li a { color: var(--middlegreytext); display: inline-block; padding-right: 1.15rem; background-size: auto 0.7rem; font-size: 1rem; } #nav-mobile .nav-block#nav-fourthBlock { position: fixed; padding: 0; padding-right: var(--spacing-vw); z-index: 1; background: var(--white); bottom: 0; width: 100vw; display: grid; grid-template-columns: 45vw auto 63px; gap: 0.3rem; border-top: var(--border); border-bottom: 0; } #nav-fourthBlock-placeholder { position: relative; height: 3.5rem; } #nav-mobile .nav-block#nav-fourthBlock .open-menu-contact-us, #nav-mobile .nav-block#nav-fourthBlock .open-menu-contact-us { background: var(--black); color: var(--white); text-transform: uppercase; font-weight: 600; display: flex; padding: 0 1rem; align-items: center; text-align: center; justify-content: center; } #nav-mobile ul li { padding:calc(var(--spacing-vw) / 2) var(--spacing-vw); } #nav-mobile .nav-mobile-cat-level-1, #nav-mobile .nav-mobile-cat-level-2, #nav-mobile .nav-mobile-cat-level-3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.3s cubic-bezier(0.7, 0.3, 0, 1); transform: translateX(100%); background: var(--white); } #nav-mobile .nav-mobile-cat-level-1 { z-index: 2; } #nav-mobile .nav-mobile-cat-level-2 { z-index: 3; } #nav-mobile .nav-mobile-cat-level-3 { z-index: 4; } #nav-mobile .sub-cat-visible { transform: translateX(0%) !important; } #nav-mobile li.nav-mobile-title { background: var(--ultralightgrey); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--black); margin-bottom: 0.6rem; padding: var(--spacing-vw) var(--spacing-vw) calc(var(--spacing-vw) * 0.9) var(--spacing-vw); } #nav-mobile li.nav-mobile-title span { font-size: 1.4rem; font-weight: 600; background: inherit; } #nav-mobile li.nav-mobile-title .nav-mobile-return { font-weight: normal; font-size: 1rem; color: var(--black); } #nav-mobile .leica-nav-panel li.nav-mobile-title{background:var(--leica-red); color:var(--white);} #nav-mobile .leica-nav-panel li.nav-mobile-title .nav-mobile-return{color:var(--white);} /* PAGE */ .page main { min-height: var(--minHeightPage); } .page main #container { position: relative; min-height: var(--minHeightPage); } .page main #container #content { position: relative; min-height: var(--minHeightPage); } /* PRE-FOOTER NEWSLETTER */ #footer-newsletter{background-color:var(--ultralightgrey); border-top:var(--border); border-bottom:var(--border); padding:var(--spacing-vw); display: grid; grid-template-columns:1fr 1fr; gap:var(--spacing-vw);} .newsletter-headline{font-size:1.75rem; margin-bottom:var(--spacing-lg);} @media (width <= 850px) { #footer-newsletter {grid-template-columns:1fr; padding:calc(2 * var(--spacing-vw)) var(--spacing-vw);} } .brevo-form__row { display: flex; } .brevo-form__email{background:var(--white); max-width:350px; border-top-right-radius:0; border-bottom-right-radius:0;} .brevo-form__submit.myCta{border-radius:0; overflow:inherit!important; border-radius:var(--b-radius); border-top-left-radius:0; border-bottom-left-radius:0;} .brevo-form__interests { display: flex; gap:var(--spacing-lg); flex-wrap: wrap; } .brevo-form__interest { display: flex; align-items: center; gap: 0.4rem; color: var(--blackmaintext); cursor: pointer; user-select: none; } .brevo-form__interest input[type="checkbox"] { position: relative; flex-shrink: 0; border: 1px solid var(--black); height: 1rem; width: 1rem; border-radius: 0 !important; -webkit-appearance: none; appearance: none; cursor: pointer; transition: all 0.2s linear; margin:0;} .brevo-form__interest input[type="checkbox"]:checked::after { content: ""; position: absolute; top: -1px; left: -1px; width: 1rem; height: 1rem; background: url(img/check.svg) center center; background-size: 80% 80%; } #popUp-Newsletter .popUpBody{ display: grid; grid-template-columns: 1fr 1fr; min-height:400px; } #popUp-Newsletter figure { position: relative; overflow: hidden; margin:0; padding:0;} #popUp-Newsletter figure img { width: 100%; height: 100%; object-fit: cover; display: block; } #popUp-Newsletter .popUpContent { padding: var(--spacing-vw); display: flex; flex-direction: column; justify-content: center; position: relative; justify-content: space-between; gap:calc(2 * var(--spacing-vw))} #popUp-Newsletter .label-rgpd{font-size:.875rem; color:var(--middlegreytext);} #popUp-Newsletter .brevo-form{margin-top:var(--spacing-vw)} @media (width <= 680px) { #popUp-Newsletter .popUpBody {grid-template-columns:1fr;} } /* PRE-FOOTER INSURANCE */ #footerInsurance{ display: grid; grid-template-columns: 1fr 1fr 1fr; background:var(--verydarkgrey); color: var(--lightgreytext); } #footerInsurance > div { border-right: 1px solid var(--darkgrey); padding: calc(var( --spacing-vw) / 2) var( --spacing-vw); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg);} #footerInsurance div:last-child { border-right: 0; } #footerInsurance img {height:calc(2 * var( --spacing-vw)); width:calc(2 * var( --spacing-vw)); } #footerInsurance .insuranceTitle { display: block; color:var(--white); font-size:1.5rem;} #footerInsurance span:not(.insuranceTitle){text-transform: lowercase;} @media (width <= 1100px) { #footerInsurance{ display: grid; grid-template-columns: 1fr;} #footerInsurance > div { border-right:inherit; border-bottom: 1px solid var(--darkgrey);} #footerInsurance div:last-child { border-bottom: 0; } } @media (width <= 800px) { #footerInsurance > div{padding:var( --spacing-vw); } } /* FOOTER */ footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background:var(--ultradarkgrey); border-top:1px solid var(--darkgrey); color: var(--verylightgreytext); } footer a{color:var(--verylightgreytext); transition: none;} footer section { border-right: 1px solid var(--darkgrey); padding: var( --spacing-vw);} footer section:last-child { border-right: 0; } footer a:hover{color:var(--white)} footer .accordion-title {text-transform: uppercase; font-weight:500; color:var(--white);} footer .fc_accordion { padding: 0; margin: 0; } footer .fc_accordion .fc_content { width: 100%; max-width: 100%; } footer .fc_accordion .accordion { margin-bottom: var(--spacing-md); } footer section#footerCustomerService > img {height: auto; width: 100%; max-width: 70px; margin-bottom: var( --spacing-vw); } footer section#footerCustomerService .customerServiceContact div{ font-size:.875rem;} footer section#footerCustomerService .customerServiceContact div div{display:inline-block;} footer section#footerCustomerService .customerServiceContact div:hover{color: var(--white); padding-left:var(--spacing-xs);} footer section#footerCustomerService b {position:relative; display:inline-block; font-weight:500; padding-right:var(--spacing-xs);} footer section#footerCustomerService .customerServiceContact b::before{position:absolute; content:" "; background:var(--middlegreytext); bottom:2px; width:92%; height:1px;} footer section#footerCustomerService .customerService{font-size:.875rem; color:var(--white); padding-top:var(--spacing-md);} footer section#footerCustomerService .openChat { cursor: pointer; } footer #footerLinks { display: grid; grid-template-columns: repeat(2, 1fr); column-gap:var(--spacing-vw); } footer #footerLinks ul, footer #footerLinks ul li{font-size:.875rem;} footer #footerLinks a:hover{padding-left:var(--spacing-xs);} footer section#footerReinssurance { position: relative; display: flex; justify-content: space-between; } footer .review-secure { text-align: center; } footer .review-secure iframe{border:0; margin-bottom:var(--spacing-xl);} footer .paymentSecure { width: 100%; height: auto; max-width: 300px; display: inline-block; } @media (width <= 1450px) { footer #footerLinks {grid-template-columns: repeat(2, 1fr);} } @media (width <= 1100px) { footer { grid-template-columns: 1fr 2fr; } footer #footerLinks {grid-template-columns: repeat(3, 1fr);} footer #footerLinks { border-right: 0; } footer section#footerReinssurance { display: flex; border-top: 1px solid var(--darkgrey); grid-column: span 2; flex-direction: inherit; align-items: inherit; } footer .review-secure{display:flex; width:100%; justify-content: center; gap : var(--spacing-xl);} footer .review-secure iframe{ margin-top:var(--spacing-xl); margin-bottom:0;} } @media (width <= 600px) { footer { grid-template-columns: 1fr; } footer > section { padding:0;} footer section#footerReinssurance{grid-column: inherit;} footer #footerLinks {grid-template-columns: 1fr;} footer section#footerCustomerService > img{margin: var( --spacing-vw) 0 0 var( --spacing-vw);} footer .fc_accordion .accordion-group{border:0;} footer .fc_accordion .accordion { margin: 0; border-bottom:0; border-top:1px solid var(--darkgrey);} footer #footerCustomerService .accordion{border-top:0;} footer .accordion-title::before, footer .accordion-title::after{background:var(--white); right:var( --spacing-vw);} footer .fc_accordion .panel {font-size: 18px; } footer .accordion-group .accordion-title {font-weight: inherit; font-size: 1.5rem; text-transform:lowercase;} footer .review-secure{padding:var( --spacing-vw); gap:0; flex-direction: column; align-items: center;} footer .review-secure iframe{margin:0;} } #legals { display: grid; grid-template-columns: 1fr 1fr 1fr; background:var(--ultradarkgrey); color: var(--verylightgreytext); } #legals > div { border-right: 1px solid var(--darkgrey); padding:0 var( --spacing-vw) var(--spacing-lg) var( --spacing-vw);} #legals div:last-child { border-right: 0; } #legals a{color:var(--verylightgreytext); transition: none;} #legals a:hover, #cookie:hover{color:var(--white)} #legals .countryLang-switcher{position:relative; top:-2.5rem;} #legals #privacyRight, #legals #legalsRight{font-size:.875rem; } #cookie { margin-left: 1rem; cursor: pointer; } #legals #legalsRight{display:flex; justify-content: flex-end; align-items: flex-end;} @media (width <= 1100px) { #legals { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--darkgrey);} #legals > div{border-right: 0;} #legals > div:first-child { padding-bottom:0; } #legals .countryLang-switcher{top:0; padding:var( --spacing-vw) 0; display: flex; justify-content: center;} #legals #privacyRight, #legals #legalsRight{text-align: center; justify-content: center;} } } /* ============================================================ * LAYER : pages * ============================================================ * Contextual exceptions — styles that modify a component * or layout ONLY because it lives on a specific page. * These rules are legitimate one-offs. * * QUALIFICATION TEST : * "Does this style only make sense on one specific page?" * Yes → pages. * * RULES : * - Selectors must start with a page-context identifier : * body class, post type, template class, page ID * (.single-product, .archive, .page-template-*, .home...) * - @media queries live here too, next to their rule * * TYPICAL CONTENTS : * single product page, category/archive page, cart, checkout, * account pages, static pages (about, contact, FAQ, store...), * blog post/article single view * ============================================================ */ @layer pages { /* PRODUCT PAGE */ .single-product #product-header { display: grid; grid-template-columns:66vw 34vw; border-bottom: var(--border); min-height: 75vh; } .single-product #product-images { position:relative; border-right: var(--border); height: 100%; width: 100%;} .single-product .woocommerce-product-images_wrapper {position:relative; height: 100%; width: 100%; display: grid; grid-template-columns: 1fr; } .single-product .woocommerce-product-images_wrapper_split { display: grid; grid-template-columns:33vw 33vw; } .single-product #woocommerce-product-img-lifestyle { position: relative; height: 100%; } .single-product #woocommerce-product-img-lifestyle img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .single-product #woocommerce-product-img-grey-thumbnail { background: var(--imagegrey); height: 100%; } .single-product #woocommerce-product-img-grey-thumbnail img { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; max-height: 60vh; object-fit: contain; } .single-product .woocommerce-product-images_wrapper .swiper-container{ position: relative; } .single-product .swiper-product-gallery { position:absolute; width: 100%; height: 100%; } .single-product .woocommerce-product-images_wrapper .swiper-slide { position: relative; width: 100%; height: 100%; } .single-product .woocommerce-product-images_wrapper .swiper-slide img { position: relative; width: 90%; height: 90%; object-fit: contain; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height:75vh;} .single-product .woocommerce-product-images_wrapper .swiper-zoom-container img { top: auto; left: auto; transform: none; width: 90%; height: 90%; cursor: zoom-in; } .single-product .woocommerce-product-images_wrapper .swiper-zoom-container img { cursor: move; } .single-product .woocommerce-product-images_wrapper .swiper-zoom-hint { position: absolute; bottom: 1rem; left: 50%; translate: -50% 0; z-index: 10; display: flex; align-items: center; gap: .4rem; padding: .35rem .75rem .35rem .55rem; background: rgba(0,0,0,.52); color: #fff; font-size:1rem; border-radius: 2rem; pointer-events: none; opacity: 1; transition: opacity .4s ease; white-space: nowrap; } .single-product .woocommerce-product-images_wrapper .swiper-zoom-hint svg { width: 1rem; height: 1rem; flex-shrink: 0; } .single-product .woocommerce-product-images_wrapper .swiper-zoom-hint--out { opacity: 0; } .single-product .woocommerce-product-images_wrapper .swiper-slide-featured { background: var(--imagegrey); } .single-product .woocommerce-product-images_wrapper .swiper-slide-lifestyle img { position: relative; width: 100%; height: 100%; object-fit: cover; } .woocommerce-product-images_wrapper .swiper-product-gallery { --swiper-pagination-bullet-horizontal-gap:10px; } .single-product .woocommerce-product-images_wrapper .swiper-scrollbar{display:none} .single-product .woocommerce-product-images_wrapper .swiper-product-nav { position:absolute; right:calc(var(--spacing-xl) - 0.8rem); bottom:calc(var(--spacing-xl) - 0.75rem); display:flex; gap:.5rem; z-index:10; } .single-product .woocommerce-product-images_wrapper .swiper-product-nav .swiper-product-next, .single-product .woocommerce-product-images_wrapper .swiper-product-nav .swiper-product-prev { position:relative; width: 2rem; height:2rem; padding:.5rem; display:block; transition:all 0.3s linear; border-radius:50%; outline:none; } .single-product .woocommerce-product-images_wrapper .swiper-product-nav .swiper-product-next { background-image:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2021%2037%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22matrix(2%2C0%2C0%2C2%2C0.722935%2C0.034172)%22%3E%3Cpath%20d%3D%22M1.081%2C17.912L-0.016%2C16.816L7.7%2C9.1L0%2C1.4L1.046%2C0.354L9.793%2C9.1L1.081%2C17.912Z%22%20fill%3D%22black%22/%3E%3C/g%3E%3C/svg%3E"); background-position:.5rem center; background-repeat: no-repeat; background-size: 1.2rem 1.2rem; cursor:pointer } .single-product .woocommerce-product-images_wrapper .swiper-product-nav .swiper-product-prev { background-image:url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2021%2037%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22matrix(-2%2C0%2C0%2C2%2C20.277065%2C0.034172)%22%3E%3Cpath%20d%3D%22M1.081%2C17.912L-0.016%2C16.816L7.7%2C9.1L0%2C1.4L1.046%2C0.354L9.793%2C9.1L1.081%2C17.912Z%22%20fill%3D%22black%22/%3E%3C/g%3E%3C/svg%3E"); background-position:.3rem center; background-repeat: no-repeat; background-size:1.2rem 1.2rem; cursor:pointer } .single-product .woocommerce-product-images_wrapper .swiper-product-nav div:hover { background-color:var(--middlegrey); } @media (width <= 800px) { .single-product .woocommerce-product-images_wrapper .swiper-horizontal>.swiper-scrollbar{display:block; left:50% !important; width:50% !important; transform:translateX(-50%) !important; bottom:var(--spacing-lg)!important;} .single-product .woocommerce-product-images_wrapper .swiper-product-nav, .single-product #product-images .swiper-pagination {display:none!important;} } /* SLIDER SECOND HAND */ .single-product .product_cat-second-hand #product-images .swiper, .single-product .product_cat-occasion #product-images .swiper, .single-product .product_cat-tweedehands #product-images .swiper{position:absolute !important; background-color: #222222; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='200'%3E%3Cg transform='rotate(0 50 50)'%3E%3Cg transform='matrix(1.36903,0,0,1.36903,-24.2075,-21.8298) scale(0.5) translate(18,10)'%3E%3Cpath d='M55.76,39.94C49.584,43.784 42.091,54.35 38.149,60.528C31.018,71.707 30.02,78.836 30.528,78.923C51.016,82.45 67.248,73.526 73.41,52.4C77.61,38.01 77.68,30.4 85.29,21.61C80.9,21.74 73.06,21.55 69.53,21.86C50.72,23.5 39.26,23.94 27.07,36.29C18.134,45.348 17.932,60.776 22.06,71.568C22.468,72.634 26.717,59.207 37.271,49.268C41.846,44.959 50.601,41.803 55.76,39.94Z' fill='white' fill-opacity='0.03' fill-rule='nonzero'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(50, 100)'%3E%3Cg transform='matrix(1.36903,0,0,1.36903,-24.2075,-21.8298) scale(0.5) translate(18,10)'%3E%3Cpath d='M55.76,39.94C49.584,43.784 42.091,54.35 38.149,60.528C31.018,71.707 30.02,78.836 30.528,78.923C51.016,82.45 67.248,73.526 73.41,52.4C77.61,38.01 77.68,30.4 85.29,21.61C80.9,21.74 73.06,21.55 69.53,21.86C50.72,23.5 39.26,23.94 27.07,36.29C18.134,45.348 17.932,60.776 22.06,71.568C22.468,72.634 26.717,59.207 37.271,49.268C41.846,44.959 50.601,41.803 55.76,39.94Z' fill='white' fill-opacity='0.03' fill-rule='nonzero'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; background-size: 100px 200px;} .single-product .product_cat-second-hand #product-images .swiper-product-gallery .swiper-slide-featured, .single-product .product_cat-occasion #product-images .swiper-product-gallery .swiper-slide-featured, .single-product .product_cat-tweedehands #product-images .swiper-product-gallery .swiper-slide-featured{background:inherit !important;} .single-product .product_cat-second-hand #product-images .swiper-product-gallery .swiper-slide img, .single-product .product_cat-occasion #product-images .swiper-product-gallery .swiper-slide img, .single-product .product_cat-tweedehands #product-images .swiper-product-gallery .swiper-slide img {width: 100%; height: 100%; } .single-product .product_cat-second-hand #product-images .swiper-product-nav .swiper-product-next, .single-product .product_cat-occasion #product-images .swiper-product-nav .swiper-product-next, .single-product .product_cat-tweedehands #product-images .swiper-product-nav .swiper-product-next { background-image:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2021%2037%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22matrix(2%2C0%2C0%2C2%2C0.722935%2C0.034172)%22%3E%3Cpath%20d%3D%22M1.081%2C17.912L-0.016%2C16.816L7.7%2C9.1L0%2C1.4L1.046%2C0.354L9.793%2C9.1L1.081%2C17.912Z%22%20fill%3D%22white%22/%3E%3C/g%3E%3C/svg%3E"); background-position:.5rem center; background-repeat: no-repeat; background-size: 1.2rem 1.2rem; cursor:pointer } .single-product .product_cat-second-hand #product-images .swiper-product-nav .swiper-product-prev, .single-product .product_cat-occasion #product-images .swiper-product-nav .swiper-product-prev, .single-product .product_cat-tweedehands #product-images .swiper-product-nav .swiper-product-prev { background-image:url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2021%2037%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22matrix(-2%2C0%2C0%2C2%2C20.277065%2C0.034172)%22%3E%3Cpath%20d%3D%22M1.081%2C17.912L-0.016%2C16.816L7.7%2C9.1L0%2C1.4L1.046%2C0.354L9.793%2C9.1L1.081%2C17.912Z%22%20fill%3D%22white%22/%3E%3C/g%3E%3C/svg%3E"); background-position:.3rem center; background-repeat: no-repeat; background-size:1.2rem 1.2rem; cursor:pointer } .single-product .product_cat-second-hand #product-images .swiper-product-nav div:hover, .single-product .product_cat-occasion #product-images .swiper-product-nav div:hover, .single-product .product_cat-tweedehands #product-images .swiper-product-nav div:hover { background-color:var(--darkgreytext); } .single-product .product_cat-second-hand #product-images .swiper-product-gallery .swiper-pagination .swiper-pagination-bullet, .single-product .product_cat-occasion #product-images .swiper-product-gallery .swiper-pagination .swiper-pagination-bullet, .single-product .product_cat-tweedehands #product-images .swiper-product-gallery .swiper-pagination .swiper-pagination-bullet {background: var(--middlegrey);} .single-product .product_cat-second-hand #product-images .swiper-product-gallery .swiper-pagination .swiper-pagination-bullet-active, .single-product .product_cat-occasion #product-images .swiper-product-gallery .swiper-pagination .swiper-pagination-bullet-active, .single-product .product_cat-tweedehands #product-images .swiper-product-gallery .swiper-pagination .swiper-pagination-bullet-active {background: var(--white);} .single-product .summary { padding:var(--spacing-xl); display: grid; align-content: space-between; } .single-product #mini-breadcrumb {margin-bottom: 0.5rem; } .single-product #mini-breadcrumb a { margin-right: 0.5rem; color: var(--middlegreytext); transition: var(--transition-linear); text-transform: uppercase; font-size: 0.8rem; } .single-product #product-header .summary #mini-breadcrumb a:hover { color: var(--blackmaintext); } .single-product #product-header .summary #mini-breadcrumb svg { position: relative; left: -0.3rem; top: 0; width: auto; height: 0.5rem; } .single-product .summary header { margin-bottom: 4rem; } .single-product .summary header h1{margin-bottom:var(--spacing-md);} .single-product .summary header h1 .product_title { font-size: 1.75rem; display: block; margin-bottom: 0.5rem; line-height:1.2;} .single-product .summary header h1 .product_brand { margin-top: 0.5rem; color: var(--middlegreytext); font-weight: 400;} .single-product .summary header h1 .product_brand a:hover { fill: var(--blackmaintext);} .single-product .summary .mainPrice{font-weight:600; font-size:1.25rem; display:flex; align-items:baseline; gap:.5rem;} .single-product .summary .mainPrice del{order:2; font-weight:400;} .single-product .summary .mainPrice .woocommerce-Price-currencySymbol{display:inline-block;} .single-product .summary .exclvat{font-size:.9rem; color:var(--middlegreytext); text-transform:lowercase;} .financing {cursor: pointer; transition: var(--transition-linear); margin: var(--spacing-xs) 0; } #financing-loader { position: fixed; inset: 0; background: var(--overlay); z-index: 9998; display: flex; align-items: center; justify-content: center; } #financing-loader .spinner { width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .financing span { color:var(--darkgreytext); padding-right: 0.4rem; line-height: 1.25em; } .financing span:hover{color:var(--blackmaintext);} .financing span img { position: relative; height: 1rem; width: auto; display: inline; padding: 0 2px; } #popUp-Financing .popUpContainer {padding: var(--spacing-vw); overflow-y: scroll; max-width: 1000px; } #popUp-Financing header {margin-bottom: var(--spacing-2xl);} #popUp-Financing header .popUpTitle { font-size:1.75rem; } #popUp-Financing header p {margin:0; color: var(--darkgreytext); } #popUp-Financing .fiSolutions { display: grid; gap: calc(var(--spacing-vw) / 2); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; justify-items: center; } #popUp-Financing .fiSolution { position: relative; display: block; border:var(--border); border-radius: var(--b-radius); padding:var(--spacing-xl); max-width: 420px; } #popUp-Financing .fiSolution .fiLogo { position: relative; width: 100%; display: flex; justify-content: center; margin-bottom: var(--spacing-lg); } #popUp-Financing .fiSolution .fiLogo img { width: 80%; max-width: 120px; height: auto; } #popUp-Financing .fiSolution .description { font-style: italic; color: var(--darkgreytext); margin-bottom:var(--spacing-lg);} #popUp-Financing .fiSolution ul { margin: var(--lightgreytext) 0; } #popUp-Financing .fiSolution b { font-weight: 600; display: inline-block; padding-right: var(--spacing-xs); } #popUp-Financing .fiSolution .widgetContainer { position: relative; max-width: 290px; } #popUp-Financing .financingWarning { text-transform: uppercase; font-size: 1.75em; letter-spacing: -3px; line-height: 1.05em; text-align: center; margin:var(--spacing-lg) 0 0 0;} .single-product .awdr_discount_bar { background: var(--yellowpromo) !important; color: var(--blackmaintext) !important; border-radius: var(--b-radius); padding:var(--spacing-md) var(--spacing-lg); margin-top:var(--spacing-lg);} .single-product .variations-container { position: relative; display: block; margin-top:var(--spacing-lg); } .single-product .variations-container .variations-label {font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.25rem; color: var(--darkgreytext); } .single-product .variations-current {position:relative; border-radius: var(--b-radius); border:var(--border); padding:var(--spacing-md) var(--spacing-lg); cursor: pointer; } .single-product .variations-current::after { content: " "; background: url("data:image/svg+xml,%3Csvg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%222%22%20version%3D%221.1%22%20viewBox%3D%220%200%2019%2011%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22matrix%286.1232e-17%2C1%2C-1%2C6.1232e-17%2C18.3%2C-8.8818e-16%29%22%3E%3Cpath%20d%3D%22M1.4%2C18.3L0%2C16.8L7.7%2C9.1L0%2C1.4L1.4%2C0L10.5%2C9.1L1.4%2C18.3Z%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center center no-repeat; background-size: 50% auto; position: absolute; top: 1px; right: 0; height: 100%; width: 1.75rem; transform: translateX(-20%); opacity: 0.6; } .single-product .variations-current:hover, .variations-open .variations-current { border: 1px solid var(--middlegreytext); } .single-product .variations-open .variations-current { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .single-product .variations-list { overflow: hidden; width: 100%; max-height: 0; background: var(--white); bottom: 2px; transform: translateY(100%); position: absolute; list-style: none; margin: 0; z-index: 10; transition:linear; } .single-product .variations-open .variations-list { max-height: 1000px; } .single-product .variations-list ul { border: 1px solid var(--middlegreytext); border-bottom-left-radius:var(--b-radius); border-bottom-right-radius: var(--b-radius); } .single-product .variations-open .variations-list ul { border: 1px solid var(--middlegreytext); } .single-product .variations-list li { position: relative; border-bottom: 1px solid var(--middlegreytext); } .single-product .variations-open .variations-list li { border-bottom: 1px solid var(--middlegreytext); } .single-product .variations-list li:last-child { border-bottom: 0; border-bottom-left-radius: var(--b-radius); border-bottom-right-radius: var(--b-radius); overflow: hidden; } .single-product .variations-list li a { padding-right:var(--spacing-sm); display: grid; grid-template-columns: 50px 1fr auto; column-gap: var(--spacing-md); } .single-product .variations-list li a img { width: 100%; height: auto; } @media (hover: hover) and (pointer: fine) { .single-product .variations-list li a:hover { color: var(--blackmaintext); background: var(--ultralightgrey); } } .single-product .variations-list li a > div { display: flex; align-items: center; } .single-product .summary .stock { gap: 0.35rem; } .single-product .summary .data-dyn-stock .skel { margin-top:0.1rem; } .single-product .delivery_notice {display: block;} .single-product .product.virtual .delivery_notice { display: none; } .single-product .delivery_notice svg { position: relative; height: auto; width: 1.1em; display: inline-block; vertical-align: middle; margin-right: 0.35rem; } .single-product .delivery_notice strong { font-weight: 600; } .single-product .delivery_notice_warning { color: var(--red);} .b2b-only-notice p { position: relative; font-style: italic; background: var(--ultralightgrey); color: var(--darkgreytext); padding:var(--spacing-lg); border-radius: var(--b-radius); margin:var(--spacing-md) 0; } form.cart { margin: 1.25rem 0; } form.cart .single_add_to_cart_button {position:relative; width: 100%; min-height: 3.125rem; margin-bottom: 0 !important; } .product_cat-second-hand .summary .single_add_to_cart_button, .product_cat-occasion .summary .single_add_to_cart_button, .product_cat-tweedehands .summary .single_add_to_cart_button { background: var(--green); color: var(--white); } .single_add_to_cart_button_inactive { position: relative; text-align: center; font-style: italic; background: var(--lightgrey); color: var(--darkgrey); text-transform: inherit; } .single_add_to_cart_button_inactive:hover { background: var(--lightgrey); color: var(--darkgrey); box-shadow: inherit; } .single-product .single_add_to_cart_button span { position: relative; z-index: 10; } .single-product .single_add_to_cart_button div { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: rgba(255, 255, 255, 0.3); transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1); z-index: 9; } .single-product .single_add_to_cart_button.adding div { width: 33%; transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1); } .single-product .single_add_to_cart_button.adding-continue div { width: 60%; transition: all 5s linear; } .single-product .single_add_to_cart_button.added div { width: 100%; transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1); } .singleReinsurance svg { position: relative; height: auto; width:1.1em; display: block; color: var(--green); } .singleReinsurance > div { position: relative; display: flex; align-items: center; gap: 0.4rem; margin-bottom: var(--spacing-xs); } .singleReinsurance > div:last-child{margin-bottom:0;} .singleReinsurance strong { font-weight: 600; } .singleReinsurance .reinsurance_talk_to_team { cursor: pointer; max-height: 0; overflow: hidden; opacity: 0; transition:max-height 0.35s ease, opacity 0.3s ease; margin-bottom: 0; } .singleReinsurance .reinsurance_talk_to_team.is-open { max-height: 5rem; opacity: 1; } #wc_bis_product_form { margin-top: 1rem; } #wc_bis_product_form .wc_bis_form_title { color: var(--darkgreytext); margin-bottom: 0.5rem; text-align: center; } #wc_bis_product_form .wc_bis_form { position: relative; display: flex; width: 100%; } #wc_bis_product_form .wc_bis_form input { width: inherit !important; border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; padding-left: 1.5rem; } #wc_bis_product_form .wc_bis_form button { min-width: 35%; margin-bottom: 1em; border-top-left-radius: 0; border-bottom-left-radius: 0; } #wc_bis_product_form .wc_bis_form button.wc_bis_form-CtaLogged { width: 100%; border-top-left-radius: 999px; border-bottom-left-radius: 999px; min-height: 3.125rem;} .single-product #product-description-crosssells { position: relative; display: grid; grid-template-columns:66vw 34vw; } .single-product #product-description-crosssells #product-description {display: grid; align-items: center; align-content: space-between; border-right:var(--border); padding:var(--spacing-xl);} #product-description .description{magin-bottom:var(--spacing-xl); text-wrap: pretty;} #product-description .description p{margin-top:0;} .single-product #description-relationship_posts { display: grid; grid-template-columns: 1fr 1fr; gap:var(--spacing-lg); margin:var(--spacing-lg) 0;} .single-product #description-relationship_posts a { position: relative; border-radius: var(--b-radius); border:var(--border); display: grid; color:var(--blackmaintext); grid-template-columns: auto 1fr; align-items: center; gap: 1rem; overflow: hidden; padding-right: 0.5rem; } .single-product #description-relationship_posts img { height: 100%; min-height: 80px; width: 80px; max-height: 80px; object-fit: cover; } #product-description-crosssells #description-brand-sku-ean { font-size: 1em; color: var(--middlegreytext); margin-top:var(--spacing-lg); } #product-description-crosssells #description-brand-sku-ean .separator_stripe { opacity:.4; padding: 0 0.3em; } #product-description-crosssells #description-brand-sku-ean a { color: var(--middlegreytext); } #product-secondhand-and-crosssells { padding:var(--spacing-xl);} #product-crosssells .flexibleContentBlock-title { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: var(--spacing-lg); } .single-product #product-crosssells .swiper { overflow-x: hidden; overflow-y: visible; } .single-product #product-crosssells .swiper-nav { position: absolute; top: 0; right: 0; display: flex; gap: 1rem; } .single-product #product-crosssells .swiper-nav svg { height: 14px; width: auto; cursor: pointer; transition: all 0.2s linear; } .single-product #product-crosssells .swiper-nav svg:hover { transform: scale(1.15); } .single-product .cross-sell-product {max-width: 100%; border-radius: var(--b-radius); border:var(--border); display: grid; grid-template-columns: auto 1fr; align-items: center; overflow: hidden; padding-right:var(--spacing-md)} .single-product .cross-sell-product:hover{background-color:var(--ultralightgrey);} .single-product .cross-sell-product:first-child { margin-bottom: var(--spacing-lg); } .single-product .cross-sell-product-img {height:100%; width: auto; display: block; } .single-product .cross-sell-product-img img { height:80px; width: 80px; } .single-product .cross-sell-product .cross-sell-product-infos { display: flex; justify-content: space-between; align-items: center; } .single-product .cross-sell-product .cross-sell-product-infos > div { position: relative; min-width: 50%; padding: var(--spacing-sm); display: flex; flex-direction: column; justify-content: center; } .single-product .cross-sell-product .cross-sell-product-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; width: 100%; color: var(--blackmaintext); } .single-product .cross-sell-product .cross-sell-product-infos > div:last-child { display: flex; align-items: center; justify-content: flex-end; padding: var(--spacing-sm); } .single-product .cross-sell-product .cross-sell-product-infos .button {margin-bottom: 0; } .single-product .cross-sell-product .cross-sell-product-price .price-suggested { display:none!important; } .single-product #product-crosssells.second-hand-crosssells { margin-bottom: var(--spacing-vw); } .single-product #product-crosssells.second-hand-crosssells .flexibleContentBlock-title { color: var(--green); justify-content: flex-start; align-items: baseline; gap: inherit; } .single-product #product-crosssells.second-hand-crosssells .flexibleContentBlock-title svg { position: relative; width: 1.3rem; height: 1.3rem; margin-right: 0.5rem; } @media (width <= 1150px) { .single-product #product-header{grid-template-columns: 50vw 50vw;} .single-product .woocommerce-product-images_wrapper_split{grid-template-columns:50vw;} .single-product #woocommerce-product-img-lifestyle{display:none;} .single-product #product-description-crosssells{grid-template-columns: 50vw 50vw;} .single-product #description-relationship_posts{grid-template-columns:1fr} } @media (width <= 800px) { .single-product #product-header{grid-template-columns: 100vw;} .single-product .woocommerce-product-images_wrapper_split{grid-template-columns:100vw;} .single-product #product-images{border-right:0; border-bottom:var(--border);} .single-product #product-description-crosssells{grid-template-columns:100vw;} .single-product #product-description-crosssells #product-description{border-right:0; border-bottom:var(--border);} } .single-product #product-accordion{} .single-product #product-accordion .accordion-title{font-size: 1.5rem;} .single-product #product-accordion .panel table { width: 100%; border: var(--border); border-bottom: 0; border-spacing: 0; margin-bottom: var(--spacing-2xl);} .single-product #product-accordion .panel th, .single-product #product-accordion .panel td { min-width: 25%; padding: 1rem; border-bottom:var(--border); } .single-product #product-accordion .panel tr:nth-child(even) th, .single-product #product-accordion .panel tr:nth-child(even) td { background: var(--ultralightgrey); } .single-product #product-accordion .panel th { font-weight: 600; text-align: left; border-right: var(--border); } .single-product #product-accordion .panel tr:nth-child(even) th { border-right:var(--border); } .single-product .about-product { position: relative; font-size: 1.5rem; width: 100%; text-align: left; padding:var(--spacing-lg) var(--spacing-vw); margin: 0 auto; outline: none; max-width: 940px; } @media (width <= 700px) { .single-product .about-product{ padding-left: var(--spacing-vw); } } .single-product .brand-responsible { font-style: italic; padding: var(--spacing-vw); color: var(--middlegreytext); font-size: 0.9rem; max-width: 940px; padding: var(--spacing-vw); margin: 0 auto; } .single-product .brand-responsible .br-title { font-weight: 600;} /* PRODUCT PAGE - Add to cart follow */ #add-to-cart-follow { position: fixed; bottom: 0rem; right: 6rem; background: var(--white); border-radius: var(--b-radius); box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; z-index: 11; transform: translateY(101%); transition: all 0.3s cubic-bezier(0.7, 0.3, 0, 1); display: grid; grid-template-columns: 4em auto 4em; align-items: center; overflow: hidden; max-width: 400px; } .single-product #add-to-cart-follow.active { transform: translateY(-1rem); } #add-to-cart-follow img { position: relative; height:100%; width: auto; } #add-to-cart-follow #add-to-cart-follow-details { position: relative; padding:var(--spacing-sm); min-width: 250px;} #add-to-cart-follow #add-to-cart-follow-title { font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} #add-to-cart-follow #add-to-cart-follow-line2 { display: flex; gap: 0.5rem; } #add-to-cart-follow #add-to-cart-follow-line2 .data-dyn-stock{margin-top:0;} #add-to-cart-follow #add-to-cart-follow-line2 .stock svg { display: none; } #add-to-cart-follow #add-to-cart-follow-price .price-suggested { display: none; } #add-to-cart-follow .single_add_to_cart_button { margin: 0; height:100%; width: 4em; padding:1em; border-radius: var(--b-radius); border-top-left-radius: 0; border-bottom-left-radius: 0; } #add-to-cart-follow .single_add_to_cart_button svg { width: 2em; height: auto; } #add-to-cart-follow .single_add_to_cart_button.adding svg #add, #add-to-cart-follow .single_add_to_cart_button.added svg #add, #add-to-cart-follow .single_add_to_cart_button svg #load .loaddot, #add-to-cart-follow .single_add_to_cart_button svg #added { opacity: 0; } #add-to-cart-follow .single_add_to_cart_button.adding svg #load #load_one { animation: dotOne 1s linear infinite; } @keyframes dotOne { 0%, 10% { opacity: 0; } 20%, 100% { opacity: 1; } } #add-to-cart-follow .single_add_to_cart_button.adding svg #load #load_two { animation: dotTwo 1s linear infinite; } @keyframes dotTwo { 0%, 30% { opacity: 0; } 40%, 100% { opacity: 1; }} #add-to-cart-follow .single_add_to_cart_button.adding svg #load #load_three { animation: dotThree 1s linear infinite; } @keyframes dotThree { 0%, 50% { opacity: 0; } 60%, 100% { opacity: 1; } } #add-to-cart-follow .single_add_to_cart_button.added svg #added { animation: fadeIn 0.2s linear forwards; } /* PRODUCT PAGE - Added to cart */ #added-to-cart { position: fixed; bottom: 0rem; right: 6rem; background: var(--white); border-radius: var(--b-radius); box-shadow:rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; z-index: 11; transform: translateY(101%); transition: all 0.3s cubic-bezier(0.7, 0.3, 0, 1); overflow: hidden; width: auto; min-width: 300px; max-width: 450px; z-index: 999; padding:var(--spacing-lg); } #added-to-cart.active { animation: elastic 0.75s forwards; } #added-to-cart #added-to-cart-close { position: absolute; top: 0.75rem; right: 0.5rem; width: 40px; height: 40px; cursor: pointer; transition: all 0.2s linear; transform: scale(1); border-radius: 50%; z-index: 999; } #added-to-cart #added-to-cart-close svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; } #added-to-cart #added-to-cart-close:hover { transform: scale(1.2); } #added-to-cart #added-content { display: grid; grid-template-columns: 1fr 3fr; gap: 1rem; margin: 0.5rem 0 1rem 0; align-items: center; } #added-to-cart img { position: relative; width: 100%; height: auto; object-fit: cover; border-radius: var(--b-radius); } #added-to-cart .product_title { font-size: 1.25rem;} #added-to-cart .product_brand { color: var(--middlegreytext); margin-top:var(--spacing-md); } #added-to-cart .myCta { margin-bottom: 0 !important; } #added-to-cart #added-action { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; } @keyframes elastic { 0% { transform: translateY(101%); } 20% { transform: translateY(-2rem); } 40% { transform: translateY(0.25rem); } 60% { transform: translateY(-1rem); } 100% { transform: translateY(-1rem); } } @media (width <= 800px) { #added-to-cart {right:var(--spacing-xl); width:calc(100% - (2 * var(--spacing-xl)))} #added-to-cart #added-action{ grid-template-columns: 1fr;} } /* PRODUCT PAGE - Stock drawer .inStore_trigger { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; transition: all 0.2s linear; margin-top: 0.5rem; } .inStore_trigger svg { position: relative; height: 0.9em; width: auto; display: block; } .inStore_trigger:hover { color: var(--darkgrey); } .inStore-backdrop { position: fixed; inset: 0; top: var(--instore-top, 0px); background: rgba(0,0,0,0.33); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity var(--transition-ease); } .inStore-backdrop.active { opacity: 1; pointer-events: auto; } .inStore-drawer { position: fixed; top: var(--instore-top, 0px); right: 0; height: calc(100% - var(--instore-top, 0px)); width: min(420px, 92vw); background: var(--white); border-left: var(--border); transform: translateX(100%); transition: transform var(--transition-ease); z-index: 9999; display: flex; flex-direction: column; } .inStore-drawer.inStoreOpen { transform: translateX(0); } .inStore-head { position: relative; border-bottom: 1px solid var(--black); display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .inStore-title { font-size: 1.375rem; text-transform: uppercase; cursor: pointer; padding: 1rem; } .inStore-close { position: absolute; top: 0; right: 0.1rem; height: 100%; width: 40px; cursor: pointer; transition: all 0.2s linear; transform: scale(1); border-radius: 50%; z-index: 999; } .inStore-close svg { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 70%; } .inStore-body { overflow: auto; } .inStore-card { padding: 1rem; border-bottom: 1px solid var(--black); } .inStore-card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; } .inStore-card-title { text-transform: uppercase; font-weight: 600; margin-bottom: 0.25rem; } .inStore-card .stock { font-size: 0.875rem; border-radius: 1rem; padding: 0.25rem 0.5rem; border: 0.0625rem solid; line-height: 1rem; } .inStore-card-details { position: relative; color: var(--darkgrey); margin-bottom: 1rem; line-height: 1.125rem; } .inStore-card-opening-today { display: flex; justify-content: space-between; gap: 1rem; } */ /* CART */ #cart-modern { position: relative; display: grid; grid-template-columns: auto 430px; gap:calc( 2 * var(--spacing-vw)); margin:var(--spacing-vw); margin-bottom:0; } .woocommerce-cart .shop_table { border: 0; } .woocommerce-cart .shop_table .cart_item { display: grid; grid-template-columns: 100px 5fr auto 1fr; gap:var(--spacing-lg); padding: var(--spacing-lg) 0; vertical-align: top; border-bottom:var(--border); } .woocommerce-cart .shop_table .cart_item:first-child { padding-top: 0; } .woocommerce-cart .shop_table .cart_item:last-child { border-bottom: 0; } .woocommerce-cart .shop_table .cart_item > div.product-thumbnail a { display: block; padding-right: var(--spacing-lg); } .woocommerce-cart .shop_table .cart_item > div.product-thumbnail img { display: block; max-width: 100px; height: auto; } .woocommerce-cart .shop_table .cart_item > div.product-name { display: flex; flex-direction: column; justify-content: space-between; } .woocommerce-cart .shop_table .cart_item > div.product-name a {display: inline-block; font-weight: 600; margin-bottom: var(--spacing-xs); } .woocommerce-cart .shop_table .cart_item > div.product-name .product-category { color: var(--middlegreytext); } .woocommerce-cart .shop_table .cart_item > div.product-name .product-stock { display: flex; gap: 0.25rem; } .woocommerce-cart .shop_table .cart_item > div.product-name div:last-child { margin-bottom: 0; } .woocommerce-cart .shop_table .cart_item > div.product-quantity input { width: 3.5rem; margin: 0; } .woocommerce-cart .shop_table .cart_item > div.product-quantity .remove { display: block; text-align: center; margin-top: 0.5rem; font-weight: normal; font-size: 0.75rem; text-transform: lowercase; color: var(--middlegreytext); } .woocommerce-cart .shop_table .cart_item > div.product-quantity .remove .remove-icon { display: none; } .woocommerce-cart .shop_table .cart_item > div.product-quantity .remove:hover { color: var(--red) !important; } .woocommerce-cart .shop_table .cart_item > div.product-subtotal { display: flex; flex-direction: column; font-weight: 600; justify-content: flex-start; font-size: 1.125rem; align-items: flex-end; } .woocommerce-cart .tax_label { text-align: right; font-weight: normal; color: var(--middlegreytext); display: block; } .woocommerce-cart .shop_table .actions { margin: 1rem 0; } .woocommerce-cart .shop_table .actions #coupon_code { max-width: 175px; } .woocommerce-cart .shop_table .actions input { display: inline-block; height: 42px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; padding-left: 1.5rem; } .woocommerce-cart .shop_table .actions button { position: relative; top: 1px; left: -0.25rem; height: 42px; display: inline-block; border-top-left-radius: 0; border-bottom-left-radius: 0; } .woocommerce-cart .shop_table_total { font-size: 1.125rem; } .woocommerce-cart .shop_table_total, .checkout-button { width: 100%; } .woocommerce-cart .shop_table_total th, .woocommerce-cart .shop_table_total td { border-top:var(--border); padding: var(--spacing-xl) 0; } .woocommerce-cart .shop_table_total .order-total-skinny th, .woocommerce-cart .shop_table_total .order-total-skinny td, .woocommerce-cart .shop_table_total .cart-myshipping th, .woocommerce-cart .shop_table_total .cart-myshipping td{ padding: var(--spacing-md) 0; font-weight: normal; } .woocommerce-cart .shop_table_total th { text-align: left; font-weight: 600; } .woocommerce-cart .shop_table_total td { text-align: right; } .woocommerce-cart .cart-you-save #saving { background: var(--yellowpromo); padding: 0 var(--spacing-xs); line-height: 1.25rem; font-weight: 500; border-radius: var(--b-radius); } .woocommerce-cart .cart-myshipping small { font-weight: normal; color: var(--middlegreytext); } .woocommerce-cart .cart-discount th, .woocommerce-cart .cart-discount td { color: var(--darkgrey); font-size: 0.8em; } .woocommerce-cart .cart-discount th b { text-transform: uppercase; font-weight: 600; } .woocommerce-cart .cart-discount td .woocommerce-remove-coupon { color: var(--red); } .woocommerce-cart .includes_tax { display: block; font-size: 1rem; color: var(--darkgrey); margin-top: 0.33rem; font-weight: normal; } .woocommerce-cart .shop_table_total .order-total strong { font-weight: 600; } .woocommerce-cart .cart_totals img { display: block; max-width: 100%; height: auto; margin: 0 auto; } .woocommerce-cart .fc_product-showcase-slider { padding-top: 0; } .woocommerce-cart .coupon-finance { display: flex; justify-content: space-between; } .woocommerce-cart .coupon-finance .coupon { min-width: 400px; } .woocommerce-cart .coupon-error-notice { color: var(--red); font-weight: 600; } .woocommerce-cart .alma-cart-eligibility { width: 180px; } .woocommerce-cart .alma-cart-eligibility > div { margin: 0 !important; } .woocommerce-cart .cart-empty { position: relative; text-align: center; margin: 1rem auto; max-width: 600px; padding: 1rem; } .woocommerce-cart .cart-empty img { max-width: 300px; margin: 2rem auto; } @media (width <= 1024px) { #cart-modern { grid-template-columns: 1fr; margin-bottom:calc(2 * var(--spacing-2xl))} .woocommerce-cart-form { width: 92vw; } .woocommerce-cart-form .shop_table .cart_item { grid-template-columns: 60px 1fr; } .woocommerce-cart-form .shop_table .cart_item > div.product-thumbnail img { max-width: 60px; } .woocommerce-cart .shop_table .cart_item > div.product-name a { display: block; } .woocommerce-cart .shop_table .cart_item > div.product-name .product-stock, .woocommerce-cart .shop_table .cart_item > div.product-name div:last-child{display:inline !important;} .woocommerce-cart .stock{margin:0 var(--spacing-md) 0 0; display:inline;} .woocommerce-cart-form .product-quantity { position: relative; left: calc(60px + var(--spacing-lg)); display: flex; align-items: center; gap: var(--spacing-md); } .woocommerce-cart-form .shop_table .cart_item .quantity input { padding: 0.3rem 0.66rem; text-align: center; } .woocommerce-cart-form .product-quantity .product-remove { margin-left: auto; } .woocommerce-cart .shop_table .cart_item > div.product-quantity .remove { display: flex; align-items: center; margin-top: 0; color: var(--middlegreytext); } .woocommerce-cart .shop_table .cart_item > div.product-quantity .remove .remove-label { display: none; } .woocommerce-cart .shop_table .cart_item > div.product-quantity .remove .remove-icon { display: block; } .woocommerce-cart-form .product-quantity .remove:hover { color: var(--red) !important; } .woocommerce-cart .shop_table .cart_item > div.product-subtotal{justify-content: flex-end;} /* .woocommerce-cart-form .product-stock { padding-right: var(--spacing-md); } */ .woocommerce-cart .coupon-finance { display: block; } .woocommerce-cart .shop_table .actions #coupon_code { max-width: 150px; } .woocommerce-cart .coupon-finance .coupon { min-width: 100%; } } /* LOGIN */ .guest.woocommerce-account.page main #container #content{display:flex; align-items: center;} .guest.woocommerce-account main#content .woocommerce{ grid-template-columns:1fr; max-width: 500px; gap:0;} /* MY ACCOUNT */ .woocommerce-account main#content .woocommerce { display: grid; grid-template-columns: 200px auto; margin: 0 auto; max-width: 1200px; padding: var(--spacing-vw); gap: calc(2 * var(--spacing-vw)); } .woocommerce-account h2:not(.flexibleContentBlock-title), .woocommerce-MyAccount-content h3 { font-size: 1.375rem; display: inline-block; margin-bottom:var(--spacing-md); } .woocommerce-account #main form { position: relative; max-width: 500px; } .woocommerce-MyAccount-navigation { position: sticky; top: var(--spacing-vw); } .woocommerce-MyAccount-navigation li { position: relative; font-size: 1.125rem; margin-bottom: var(--spacing-xs); } .woocommerce-MyAccount-navigation li a:hover{margin-left:var(--spacing-sm);} .woocommerce-MyAccount-navigation li.is-active { font-weight: 600; color: var(--green); } .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--dashboard, .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--vat-number, .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--newsletter, .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--contact { margin-bottom:var(--spacing-lg); } .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--red); } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info { margin-top: 0; } .woocommerce-account .woocommerce-MyAccount-content h2.flexibleContentBlock-title { margin-bottom:var(--spacing-md);} .myaccount-dahsboard .leave-review { border: var(--border); border-radius: var(--b-radius); padding:var(--spacing-lg); } .myaccount-dahsboard .leave-review .ctt { display: flex; justify-content: space-between; align-items: flex-start; } .myaccount-dahsboard > div { margin-bottom: var(--spacing-vw); } .myaccount-dahsboard > div.academy .fc_product-showcase-slider ul { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } .myaccount-dahsboard .trybeforeyoubuy { border:var(--border); border-radius: var(--b-radius); } .myaccount-dahsboard .trybeforeyoubuy a { display: grid; grid-template-columns: 1fr 3fr; gap: var(--spacing-lg); overflow: hidden; } .myaccount-dahsboard .trybeforeyoubuy a img { width: 100%; height: 100%; object-fit: cover; border-top-left-radius: var(--b-radius); border-bottom-left-radius: var(--b-radius); } .myaccount-dahsboard .trybeforeyoubuy a .ctt { padding: var(--spacing-lg); } .woocommerce-orders-table .button, .order-actions-button { margin-bottom: 0 !important; padding: 0.4em 1em; margin-right: 0.5rem; } .woocommerce-account .woocommerce-order-statut { position: relative; padding: 1rem 1rem 1.25rem 1rem; margin-bottom: 2rem; border: 1px solid var(--middlegrey); border-radius: 0.1875rem; text-align: center; overflow: hidden; } .woocommerce-account .woocommerce-order-statut::before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--middlegrey); opacity: 0.1; } .woocommerce-account .woocommerce-order-statut h2 { position: relative; text-transform: capitalize; } .woocommerce-account .woocommerce-order-statut div { position: relative; margin: 0 auto; max-width: 380px; } .woocommerce-account .woocommerce-order-statut div em { position: relative; display: inline-block; padding-top: 0.5em; } .woocommerce-account .woocommerce-order-statut div a { text-decoration: underline; } .woocommerce-order-infos { margin-bottom: 2rem; font-size: 1.125em; } .woocommerce-account .woocommerce-order-statut.is-processing { border: 1px solid var(--blue); } .woocommerce-account .woocommerce-order-statut.is-processing { color: var(--blue); } .woocommerce-account .woocommerce-order-statut.is-processing::before { background: var(--blue); } .woocommerce-account .woocommerce-order-statut.is-shipped, .woocommerce-account .woocommerce-order-statut.is-delivered { border: 1px solid var(--green); } .woocommerce-account .woocommerce-order-statut.is-shipped, .woocommerce-account .woocommerce-order-statut.is-shipped a, .woocommerce-account .woocommerce-order-statut.is-delivered { color: var(--green); } .woocommerce-account .woocommerce-order-statut.is-shipped::before, .woocommerce-account .woocommerce-order-statut.is-delivered::before { background: var(--green); } .woocommerce-account .woocommerce-order-statut.is-cancelled, .woocommerce-account .woocommerce-order-statut.is-failed, .woocommerce-account .woocommerce-order-statut.is-refunded { border: 1px solid var(--darkred); } .woocommerce-account .woocommerce-order-statut.is-cancelled, .woocommerce-account .woocommerce-order-statut.is-failed, .woocommerce-account .woocommerce-order-statut.is-refunded { color: var(--darkred); } .woocommerce-account .woocommerce-order-statut.is-cancelled::before, .woocommerce-account .woocommerce-order-statut.is-failed::before, .woocommerce-account .woocommerce-order-statut.is-refunded::before { background: var(--darkred); } .woocommerce-account .woocommerce-Address, .woocommerce-account .woocommerce-customer-details { position: relative; margin:var(--spacing-2xl) 0 0 0; border:var(--border); border-radius:var(--b-radius);} .woocommerce-account .woocommerce-Address-title, .woocommerce-account .woocommerce-columns--addresses > div h2 { padding: var(--spacing-lg); border-bottom:var(--border); background:var(--ultralightgrey); display:flex; justify-content: space-between; align-items: center;} .woocommerce-account .woocommerce-Address-title h2{margin:0;} .woocommerce-account .woocommerce-Address address, .woocommerce-account .woocommerce-columns--addresses > div address{padding: var(--spacing-lg);} .woocommerce-account .woocommerce-Address address:first-line, .woocommerce-account .woocommerce-columns--addresses > div address:first-line { font-size: 1.25em; font-weight: 600; } .woocommerce-account .woocommerce-column--shipping-address {border-top:var(--border);} .woocommerce-account .empty-gif { position: relative; display: block; width: 90%; height: auto; max-width: 300px; margin: 1rem auto 2rem auto; } .woocommerce-account .empty-gif img { width: 100%; height: auto; } .password-input input { margin-bottom: 0.75em !important; } .password-reset, .woocommerce-account .woocommerce-ResetPassword { width: auto; max-width: 800px; margin: 0 auto; } .lost_reset_password .form-row-first, .lost_reset_password .form-row-last { width: 100%; } .lost_reset_password .form-row-last { margin-top: 1rem; } .woocommerce-forms-password-reset button { display: none; } .woocommerce-password-strength { position: relative; text-transform: uppercase; font-size: 0.75em; margin-bottom: 0.5em; } .woocommerce-password-hint { position: relative; display: block; padding: 0.25em 0 1em 0; font-size: 0.75em; } .woocommerce-password-strength.short { color: #e6535d; } .woocommerce-password-strength.bad { color: #e67e22; } .woocommerce-password-strength.good { color: #f1c40f; } .woocommerce-password-strength.strong { color: #68d6bd; } .woocommerce-password-strength.woocommerce-password-hint { color: #757575; } #navMobileMyAccount { display: none; } @media (width <= 1000px) { /* Grid : passe en colonne unique */ .woocommerce-account main#content .woocommerce { grid-template-columns: 1fr; gap: 0; } /* Hamburger dans le greyTitle header */ .woocommerce-account .woocommerce-products-header { position: relative; } #navMobileMyAccount { display: flex; align-items: center; cursor: pointer; position: absolute; left: var(--spacing-lg); top: 50%; transform: translateY(-50%); width: 24px; } #navMobileMyAccount #bread { display: flex; flex-direction: column; gap: 5px; width: 24px; } #navMobileMyAccount #bread div { height: 2px; background: var(--black); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } #navMobileMyAccount.navMobileHamburgerOpen #bread .tomatoes { transform: translateY(7px) rotate(45deg); } #navMobileMyAccount.navMobileHamburgerOpen #bread .meat { opacity: 0; transform: scaleX(0); } #navMobileMyAccount.navMobileHamburgerOpen #bread .salad { transform: translateY(-7px) rotate(-45deg); } /* Tiroir */ .woocommerce-MyAccount-navigation { position: fixed; top: var(--myaccount-nav-top, 0px); left: 0; width: 280px; max-width: 85vw; height: calc(100% - var(--myaccount-nav-top, 0px)); background: var(--white); z-index: 200; padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-lg); transform: translateX(-100%); transition: transform var(--transition-ease); overflow-y: auto; border-right: var(--border); box-shadow: 4px 0 24px rgba(0,0,0,0.12); } body.navMobileMyAccountOpen .woocommerce-MyAccount-navigation { transform: translateX(0); } /* Overlay */ body.navMobileMyAccountOpen::after { content: ''; position: fixed; top: var(--myaccount-nav-top, 0px); left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 199; } .myaccount-dahsboard .leave-review .ctt{ flex-direction: column;} .woocommerce-orders-table { border-collapse: collapse; border: 0 !important; margin-bottom:0 !important;} .woocommerce-orders-table thead { display: none; } .woocommerce-orders-table tr { display: block; margin-bottom: 2rem; border-radius: var(--b-radius); border:var(--border);} .woocommerce-orders-table td { display: block; text-align: right;} .woocommerce-orders-table th, .woocommerce-orders-table td{ border-top:0 !important; border-bottom:var(--border)!important;} .woocommerce-orders-table td:last-child { border-bottom: 0 !important; } .woocommerce-orders-table td:before { content: attr(data-title); position: absolute; left: 0.75em; top: 50%; transform: translateY(-50%); font-weight: 600; text-transform: uppercase; } .woocommerce-orders-table tr:last-child > th, .woocommerce-orders-table tr:last-child > td{ } .myaccount-dahsboard .trybeforeyoubuy a {grid-template-columns:1fr;} .woocommerce-account .col2-set{grid-template-columns:1fr;} } /* SHOP TABLE */ .shop_table { position: relative; width: 100%; border:var(--border); border-radius: var(--b-radius); text-align: left; margin-bottom:var(--spacing-2xl); border-spacing: 0; } table.shop_table td, table.shop_table th { border-bottom:var(--border); padding: var(--spacing-lg) var(--spacing-md); } table.shop_table tr:last-child > th, table.shop_table tr:last-child > td { border-bottom: none; } table.shop_table tbody tr:first-child > th, table.shop_table tbody tr:first-child > td, table.shop_table tfoot tr:first-child > th, table.shop_table tfoot tr:first-child > td { border-top: var(--border); } table.shop_table th { text-transform: uppercase; font-weight: 600; vertical-align: middle; background: var(--ultralightgrey); } table.shop_table tfoot th { background: var(--ultralightgrey); } .shop_table td { position: relative; border-bottom: var(--border); padding: 0 0.75em; vertical-align: middle; } /* ARCHIVE CAT */ .woocommerce-products-header-details { display: grid; grid-template-columns: 3fr 4fr; min-height: 14rem; border-bottom:var(--border);} .woocommerce-products-header-details > div:first-child{background-color: var(--ultralightgrey); padding:var(--spacing-xl); padding-bottom:calc( 1.5 * var(--spacing-xl)); border-right:var(--border);} .woocommerce-products-header-details .page-title{padding-bottom:var(--spacing-lg); font-size:1.75rem; margin-bottom:0;} .woocommerce-products-header-details p { margin-top: 0; } .woocommerce-products-header-details b { font-weight: 600; } .woocommerce-products-header-details i { font-style: italic; } .woocommerce-products-header-details a { text-decoration: underline; } .woocommerce-products-header-details .readmemore-btn{background:var(--ultralightgrey);} .woocommerce-products-header-taxonomy { display: flex; align-items: flex-end; justify-content: flex-end; padding:var(--spacing-xl);} .tax-product_brand .woocommerce-products-header-taxonomy { align-items: center; justify-content: center; } .tax-product_brand .woocommerce-products-header-taxonomy img { width: 100%; height: auto; max-height: 180px; width: auto; max-width: 300px; padding: 1rem; } .tax-campaigns .woocommerce-products-header-taxonomy img { width: 100%; height: 100%; object-fit: cover; } .woocommerce-products-header-child-cat { display: flex; } .woocommerce-products-header-child-cat li {display: inline-block; width: 8rem; text-align: center; padding: 0 0.5rem; } .woocommerce-products-header-child-cat li a { display: block; font-size: .8rem; line-height:1rem; text-decoration: none;} .woocommerce-products-header-child-cat li a img { display: inline-block; width: 90%; max-width:7rem; height: auto; border-radius: 50%; border: var(--border); margin-bottom: 0.5rem; background: var(--ultralightgrey); } @media (width <= 1200px) { .woocommerce-products-header-child-cat li{width:7rem;} } @media (width <= 1000px) { .woocommerce-products-header-details { grid-template-columns: 1fr;} .woocommerce-products-header-taxonomy{display:none;} } .woocommerce-products-sorting-results { padding:var(--spacing-md) var(--spacing-xl); display: flex; align-items: center; gap: var(--spacing-md); position: relative;} .woocommerce-products-sorting-results .filter-trigger { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: none; padding: 0; cursor: pointer; font-size: inherit; font-family: inherit; color: var(--middlegreytext); } .woocommerce-products-sorting-results .filter-trigger svg { flex-shrink: 0; } .woocommerce-products-sorting-results .filter-trigger:hover{color:var(--blackmaintext);} .woocommerce-products-sorting-results .grid-view-toggle { display: none; } @media (width <= 600px) { .woocommerce-products-sorting-results .grid-view-toggle { display: inline-flex; align-items: center; gap: 0.5rem; position: absolute; left: 50%; transform: translateX(-50%); } .grid-view-btn { display: inline-flex; align-items: center; background: none; border: none; padding: 0; cursor: pointer; color: var(--middlegreytext); } .grid-view-btn:hover, .grid-view-btn.active { color: var(--blackmaintext); } #product-loop.grid-1col ul.products { grid-template-columns: 1fr; } #product-loop.grid-1col ul.products li.product { border-right: 0; } #product-loop.grid-1col ul.products li.product:nth-child(2n) { border-right: 0; } } .woocommerce-products-sorting-results .woocommerce-ordering { margin-left: auto; position: relative; } .orderby-trigger { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; padding: 0; cursor: pointer; font-size: inherit; font-family: inherit; color: var(--middlegreytext); } .orderby-trigger:hover, .orderby-trigger[aria-expanded="true"] { color: var(--blackmaintext); } .orderby-trigger svg { flex-shrink: 0; } .orderby-dropdown { position: absolute; right: calc(-1 * var(--spacing-xl)) ; top: calc(100% + 0.75rem); background: var(--white); border: var(--border); min-width: 220px; z-index: 50; list-style: none; margin: 0;} .orderby-dropdown li button { display: block; width: 100%; text-align: left; padding: 0.55rem 1rem; background: none; border: none; cursor: pointer; font-size: inherit; font-family: inherit; color: var(--blackmaintext); } .orderby-dropdown li button:hover { background: var(--ultralightgrey); } .orderby-dropdown li[aria-selected="true"] button { font-weight: 600; } .woocommerce-no-products-found { position: relative; min-height: 50vh; padding: 5rem 1rem 1rem 1rem; text-align: center; } .woocommerce-no-products-found .woocommerce-info { font-size: 1.25rem; color: var(--red); } /* SECOND HAND */ .term-second-hand #main .woocommerce-products-header-taxonomy, .term-occasion #main .woocommerce-products-header-taxonomy, .term-tweedehands #main .woocommerce-products-header-taxonomy { justify-content: center;} .second-hand-keyfeatures { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-vw); margin-bottom: var(--spacing-vw); } .archive .second-hand-keyfeatures { position: relative; display: flex; gap: var(--spacing-vw); } .second-hand-keyfeatures div { text-align: center; max-width: 240px; } .second-hand-keyfeatures svg { position: relative; max-width: 80px; height: auto; fill: var(--green); } .second-hand-keyfeatures h3 { position: relative; margin-top: var(--spacing-sm); text-transform: lowercase; font-weight: 600; } /* PROMOTION PAGE */ .promotion-head{padding:var(--spacing-vw) var(--spacing-xl); border-bottom:var(--border);} .promotion-head h2{margin-bottom:var(--spacing-lg);} .promotion-head .text_wrap p{margin-bottom:var(--spacing-xs)} /* NEW IN PAGE */ .page-template-new-in-temp .woocommerce-products-sorting-results{height:var(--spacing-2xl);} .page-template-new-in-temp .filter-trigger{display:none;} /* WORKSHOP PAGE */ .workshop_header {border-bottom:var(--border); display: grid; grid-template-columns: 1fr 1fr; } .workshop_header figure { border-right:var(--border); margin:0; } .workshop_header figure img {position: relative; width: 100%; height: 100%; object-fit: cover; max-height: 100%; max-width: 100%;} .workshop_intro {display: flex; align-items: flex-end; padding: var(--spacing-vw); } .workshop_intro .text_wrap p:last-child, .workshop_intro .myCta { margin-bottom: 0 !important; } @media (width <= 820px) { .workshop_header {grid-template-columns: 1fr;} } /* WORKSHOP SINGLE */ ul.products li.product.product_cat-photo-workshop article, ul.products li.product.product_cat-foto-workshop article { grid-template-rows: 1fr auto; } .product .workshop__meta{color:var(--middlegreytext);} .summary .workshop__meta{margin-top:var(--spacing-2xl)} .product .workshop__meta div svg {height: 0.8rem; width: auto; } .product .workshop__meta div span { padding-left: var(--spacing-sm); text-transform: capitalize; } .product.product_cat-photo-workshop #product-images .swiper-product-gallery .swiper-slide img, .product.product_cat-foto-workshop #product-images .swiper-product-gallery .swiper-slide img{ width: 100%; height: 100%; object-fit: cover; top: inherit; left: inherit; transform: inherit;} .product.product_cat-photo-workshop #mini-breadcrumb, .product.product_cat-foto-workshop #mini-breadcrumb, .product.product_cat-photo-workshop .singleReinsurance, .product.product_cat-foto-workshop .singleReinsurance, .product.product_cat-photo-workshop #product-description-crosssells, .product.product_cat-foto-workshop #product-description-crosssells, .product.product_cat-photo-workshop #product-accordion, .product.product_cat-foto-workshop #product-accordion, .product.product_cat-photo-workshop .about-product, .product.product_cat-foto-workshop .about-product{display:none;} .swiper .workshop__meta{padding-top:var(--spacing-md)} .swiper .workshop__meta .workshop_persons, .swiperRecentlyView .workshop__meta{display:none;} .page-template-page-academy-php .woocommerce-info { margin: var(--gapBetweenFlexible); } /* TIPS AND REVIEWS ARCHIVES */ .tip-and-review-description { padding: var(--spacing-vw); padding-bottom: 0; max-width: calc(1200px + 6vw); margin: 0 auto; } .tips-and-reviews-category { padding: var(--spacing-vw) !important; max-width: calc(1200px + 6vw); margin: 0 auto; } .tips-and-reviews-category .cat-description {margin-bottom:var(--spacing-lg); } .tips-and-reviews-category-articles { position: relative; display: grid; grid-template-columns: 1.5fr 2fr; gap: var(--spacing-vw); } .tips-and-reviews-featured article.article-card { height: 100%; } .tips-and-reviews-list { display: grid; gap: 1rem; } .tips-and-reviews-list-min article.article-card { grid-template-rows: 1fr; grid-template-columns: 1fr 3fr; max-height: 10rem; } .tips-and-reviews-list-min article.article-card .article-title { min-height: 3.5em; } .tips-and-reviews-list-min article.article-card .article-text { display: none; } .editorial-category-articles { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-vw);} @media (width <= 1000px) { .tips-and-reviews-featured > article { grid-template-rows: 40vw auto; } .tips-and-reviews-category-articles { grid-template-columns: 1fr; gap: var(--spacing-vw); } .tips-and-reviews-list { gap: var(--spacing-vw); } .editorial-category-articles { grid-template-columns: repeat(2, 1fr);} } @media (width <= 600px) { .editorial-category-articles { grid-template-columns: 1fr;} } /* ARTICLE CARD */ article.article-card { display: grid; border:var(--border); border-radius: var(--b-radius); overflow: hidden; } article.article-card header {overflow: hidden; } article.article-card header a {display: block; height: 100%; width: 100%; } article.article-card header a img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; transform: scale(1); aspect-ratio:3/2;} article.article-card:hover header a img { transform: scale(1.07); } article.article-card .article-ctt { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: var(--spacing-lg); } article.article-card .article-ctt .article-above-title { text-transform: uppercase; color: var(--lightgreen); margin-bottom: 0.5rem; } article.article-card .article-ctt .article-title { position: relative; display: block; font-size: 1.25rem; } article.article-card .article-ctt .article-title h3{line-height:1.5;} article.article-card .article-ctt .article-text {margin:var(--spacing-lg) 0; } article.article-card .article-ctt .article-footer { display: flex; align-items: center; justify-content: space-between; } article.article-card .article-ctt .article-footer .article-category a { position: relative; clear: left; display: inline-block; text-transform:lowercase; color:var(--middlegreytext); } article.article-card .article-ctt .article-footer .article-update { text-transform:lowercase; color: var(--middlegreytext); } /* EDITORIAL */ .editorial-header { width: 100%; max-width: 940px; margin: 0 auto; padding-left: var(--spacing-vw); padding-right: var(--spacing-vw); } .editorial-header h1 { position: relative; font-size: 1.75em; max-width: 705px; } .editorial-header .editorial-meta { position: relative; margin-top:var(--spacing-lg); color: var(--middlegreytext); } .editorial-header .editorial-meta > span { position: relative; display: inline-block; padding-right:var(--spacing-lg); } .editorial-header .editorial-meta > span:last-child::after { display: none; } .editorial-header .editorial-meta > span::after{ content: "•"; position: absolute; right: 0.1em; top: 0; opacity:.5;} .editorial-header .editorial-language { position: relative;} .editorial-header .editorial-language a { position: relative; display: inline-block; padding-right:var(--spacing-lg); color: var(--middlegreytext); } .editorial-header .editorial-language a:hover { color: var(--blackmaintext); } .editorial-header .editorial-language a::after { content: "•"; position: absolute; right: 0.25em; top: 0; opacity:.5;} .editorial-header .editorial-language a:last-child::after { display: none; } .lang-en .editorial-header .editorial-language #read-en, .lang-fr .editorial-header .editorial-language #read-fr, .lang-nl .editorial-header .editorial-language #read-nl { display: none; } /* BRANDS */ .page-template-page-brands h1{display:none;} .mosaic-brands {display: grid; grid-template-columns: repeat(7, 1fr); } .mosaic-brands > div { position: relative; border-left:var(--border); border-bottom: var(--border); overflow: hidden; } .mosaic-brands div:first-child { border-left: 0; } .mosaic-brands div > a {display: block; text-align: center; transition: background 0.2s linear; overflow: hidden; } .mosaic-brands div > a > div { display: block; height: calc(100vw / 7); background: var(--white); } .mosaic-brands div > a figure { display: block; width: 100%; height: 100%; margin:0;} .mosaic-brands div > a figure::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: scaleX(0); transform-origin: right; background-color: var(--ultralightgrey); } .mosaic-brands div > a:hover figure::before { transform-origin: left; transform: scaleX(1); } .mosaic-brands div > a img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; max-width: 70%; height: auto; max-height: 32%; display: block; } .mosaic-brands div:last-child{border-right:var(--border);} .mosaic-brands div h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; } .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7), .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7) ~ div { border-bottom: 0; } @media (width <= 1200px) { .mosaic-brands { grid-template-columns: repeat(6, 1fr); } .mosaic-brands div > a > div { height: calc(100vw / 6); } .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7), .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7) ~ div { border-bottom: var(--border); } .mosaic-brands > div:nth-child(6n+1):nth-last-child(-n+6), .mosaic-brands > div:nth-child(6n+1):nth-last-child(-n+6) ~ div { border-bottom: 0; } } @media (width <= 1000px) { .mosaic-brands { grid-template-columns: repeat(5, 1fr); } .mosaic-brands div > a > div { height: calc(100vw / 5); } .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7), .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7) ~ div, .mosaic-brands > div:nth-child(6n+1):nth-last-child(-n+6), .mosaic-brands > div:nth-child(6n+1):nth-last-child(-n+6) ~ div { border-bottom: var(--border); } .mosaic-brands > div:nth-child(5n+1):nth-last-child(-n+5), .mosaic-brands > div:nth-child(5n+1):nth-last-child(-n+5) ~ div { border-bottom: 0; } } @media (width <= 800px) { .mosaic-brands { grid-template-columns: repeat(4, 1fr); } .mosaic-brands div > a > div { height: calc(100vw / 4); } .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7), .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7) ~ div, .mosaic-brands > div:nth-child(6n+1):nth-last-child(-n+6), .mosaic-brands > div:nth-child(6n+1):nth-last-child(-n+6) ~ div, .mosaic-brands > div:nth-child(5n+1):nth-last-child(-n+5), .mosaic-brands > div:nth-child(5n+1):nth-last-child(-n+5) ~ div { border-bottom: var(--border); } .mosaic-brands > div:nth-child(4n+1):nth-last-child(-n+4), .mosaic-brands > div:nth-child(4n+1):nth-last-child(-n+4) ~ div { border-bottom: 0; } } @media (width <= 650px) { .mosaic-brands { grid-template-columns: repeat(3, 1fr); } .mosaic-brands div > a > div { height: calc(100vw / 3); } .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7), .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7) ~ div, .mosaic-brands > div:nth-child(6n+1):nth-last-child(-n+6), .mosaic-brands > div:nth-child(6n+1):nth-last-child(-n+6) ~ div, .mosaic-brands > div:nth-child(5n+1):nth-last-child(-n+5), .mosaic-brands > div:nth-child(5n+1):nth-last-child(-n+5) ~ div, .mosaic-brands > div:nth-child(4n+1):nth-last-child(-n+4), .mosaic-brands > div:nth-child(4n+1):nth-last-child(-n+4) ~ div { border-bottom: var(--border); } .mosaic-brands > div:nth-child(3n+1):nth-last-child(-n+3), .mosaic-brands > div:nth-child(3n+1):nth-last-child(-n+3) ~ div { border-bottom: 0; } } @media (width <= 500px) { .mosaic-brands { grid-template-columns: repeat(2, 1fr); } .mosaic-brands div > a > div { height: calc(100vw / 2); } .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7), .mosaic-brands > div:nth-child(7n+1):nth-last-child(-n+7) ~ div, .mosaic-brands > div:nth-child(6n+1):nth-last-child(-n+6), .mosaic-brands > div:nth-child(6n+1):nth-last-child(-n+6) ~ div, .mosaic-brands > div:nth-child(5n+1):nth-last-child(-n+5), .mosaic-brands > div:nth-child(5n+1):nth-last-child(-n+5) ~ div, .mosaic-brands > div:nth-child(4n+1):nth-last-child(-n+4), .mosaic-brands > div:nth-child(4n+1):nth-last-child(-n+4) ~ div, .mosaic-brands > div:nth-child(3n+1):nth-last-child(-n+3), .mosaic-brands > div:nth-child(3n+1):nth-last-child(-n+3) ~ div { border-bottom: var(--border); } .mosaic-brands > div:nth-child(2n+1):nth-last-child(-n+2), .mosaic-brands > div:nth-child(2n+1):nth-last-child(-n+2) ~ div { border-bottom: 0; } } /* FAQ SUPPORT */ .faq-content { min-height: var(--minHeightPage); } .faq-content .faq-sections { display: none; } .faq-sections-ctt { display: block; padding: 0; } .faq-sections-ctt .tab { display: grid; grid-template-columns: 2fr 6fr; padding:var(--spacing-vw) 0; } .faq-section-label { padding: 0 var(--spacing-vw); } .faq-section-label h2.flexibleContentBlock-title { font-size: 1.75rem; position: sticky; top: 6rem; padding-bottom: 0; } .faq-section-body { padding-right: var(--spacing-vw); } .faq-sections-ctt .fc_accordion { max-width: none; width: 100%; } .faq-sections-ctt .fc_accordion .accordion-group .accordion-title { text-transform: inherit; } @media (width <= 1000px) { .faq-sections-ctt .tab { grid-template-columns: 1fr;} .faq-section-body { padding-right:0; } .faq-section-label{margin-bottom:var(--spacing-vw);} .faq-content .fc_accordion .accordion-group .accordion{padding-left:var(--spacing-vw);} } /* SHIPPING RATES */ .shipping-card {max-width:500px; margin:var(--spacing-vw) 0;} .shipping-card .shipping-table-wrap { overflow-x: auto; overflow: hidden; } .shipping-card .shipping-table { width: 100%; border-collapse: collapse; border:var(--border)} .shipping-card .shipping-table thead tr { background:var(--darkgrey); color:var(--white); } .shipping-card .shipping-table th { text-align:left; padding:1rem; font-size:1rem; font-weight:600; } .shipping-card .shipping-table tbody tr { border-bottom: var(--border); } .shipping-card .shipping-table tbody tr:nth-child(even) { background-color: #f8f8f8; } .shipping-card .shipping-table tbody tr:nth-child(odd) { background-color: #ffffff; } .shipping-card .shipping-table td { padding:1rem; font-weight:inherit !important;} .shipping-free { color: #28a745; font-weight: 600; } /* Loader */ .shipping-loader { display: none; text-align: center; padding: 40px 20px; color: #6c757d; } .shipping-loader-text { font-size: 14px; } .shipping-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid #e9ecef; border-top-color: #4c6ef5; border-radius: 50%; animation: shipping-spin 0.7s linear infinite; margin-bottom: 12px; } @keyframes shipping-spin { to { transform: rotate(360deg); } } #shipping-table-container { transition: opacity 0.2s ease; } #shipping-table-container.loading { opacity: 0.4; pointer-events: none; } .shipping-empty-msg { color: #6c757d; padding: 20px 0; margin: 0; } /* ERROR */ .errorPage {padding: 3em 2em; min-height: 75vh; text-align: center; } .errorPage h2 { font-size: 1.75em; } .errorPage h3 {position: relative; margin-top: 0.5em; margin-bottom: 2em; } .errorPage img { display: block; margin: 0 auto; width: 100%; max-width: 400px; } /* POP UP FROM 508 */ #popUp-from508 .popUpBody { display: grid; grid-template-columns: 0.75fr 1fr; min-height: 50vh; } #popUp-from508 #newLogo{position:relative; height:100%; background-color:var(--lightgreen); display:flex; align-items: center; justify-content: center; flex-direction: column; gap:var(--spacing-xl);} #popUp-from508 #newLogo .arrow{position:relative; height:2rem;} #popUp-from508 #newLogo img{max-width:60%;} #popUp-from508 .popUpContent { padding: var(--spacing-vw); display: flex; flex-direction: column; justify-content: center; position: relative; } #popUp-from508 .popupHeadline { font-size: 1.75rem; margin-top:0;} #popUp-from508 .popupHeadline i {font-style:normal; color: var(--darkgreytext); } #popUp-from508 .popupCtt { margin: var(--spacing-xl) 0; } #popUp-from508 .popupCtt b { font-weight: 600 !important; } @media (width <= 680px) { #popUp-from508 .popUpBody {grid-template-columns:1fr;} #popUp-from508 #newLogo{flex-direction: row; padding:calc(3 * var(--spacing-vw)) calc(2 * var(--spacing-vw)); } #popUp-from508 #newLogo img{max-width:35%;} #popUp-from508 #newLogo .arrow{transform:rotate(-90deg); width:10%;} } /* POP UP LEICA SHOP ANTWERPEN */ #popUp-LeicaAntwerpen .popUpBody { display: grid; grid-template-columns: 0.75fr 1fr; min-height: 50vh; } #popUp-LeicaAntwerpen figure { position: relative; overflow: hidden; margin:0; padding:0;} #popUp-LeicaAntwerpen figure img { width: 100%; height: 100%; object-fit: cover; display: block; } #popUp-LeicaAntwerpen .popUpContent { padding: var(--spacing-vw); display: flex; flex-direction: column; justify-content: center; position: relative; } #popUp-LeicaAntwerpen .popupHeadline { font-size: 1.75rem; margin-top:0;} #popUp-LeicaAntwerpen .popupHeadline i {font-style:normal; color: var(--darkgreytext); } #popUp-LeicaAntwerpen .popupCtt { margin: var(--spacing-lg) 0; } #popUp-LeicaAntwerpen .popupCtt b { font-weight: 600 !important; } #popUp-LeicaAntwerpen .myCtaRed { background: var(--leica-red); } @media (width <= 680px) { #popUp-LeicaAntwerpen .popUpBody {grid-template-columns:1fr;} } } /* ============================================================ * LAYER : woo * ============================================================ * WooCommerce overrides only. * WooCommerce injects its own stylesheet with its own classes. * This layer isolates everything that "fixes" or "replaces" * native WooCommerce styles. * * WHY A DEDICATED LAYER ? * Without @layer, beating WooCommerce specificity required * long chained selectors. With this layer declared after * [pages], a simple class selector wins over WooCommerce * no matter what. * * RULES : * - Only selectors targeting native WC classes * (.woocommerce-*, .wc-block-*, form.cart, .variations, * .single_add_to_cart_button, .woocommerce-Price-amount...) * - Keep these isolated — never mix WC overrides into * [components] or [pages], or you lose track of what * is yours vs what is fighting the plugin * ============================================================ */ @layer woo { @font-face { font-family: WooCommerce; src: url(../../plugins/woocommerce/assets/fonts/WooCommerce.eot); src:url(../../plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix) format("embedded-opentype"), url(../../plugins/woocommerce/assets/fonts/WooCommerce.woff) format("woff"), url(../../plugins/woocommerce/assets/fonts/WooCommerce.ttf) format("truetype"), url(../../plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce) format("svg"); font-weight: 400; font-style: normal; font-display: swap; } .woocommerce-notices-wrapper { position: relative; margin: 0 auto; max-width: 94vw; } .woocommerce-error, .woocommerce-info, .woocommerce-message { padding: 1em 2em 1em 3.5em; margin: 1em 0; position: relative; background-color: var(--ultralightgrey); color: var(--black); border-top: 3px solid var(--darkgreen); list-style: none outside; width: auto; word-wrap: break-word; border-radius: 3px; } .woocommerce-error::after, .woocommerce-error::before, .woocommerce-info::after, .woocommerce-info::before, .woocommerce-message::after, .woocommerce-message::before { content: " "; display: table; } .woocommerce-error::after, .woocommerce-info::after, .woocommerce-message::after { clear: both; } .woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before { font-family: WooCommerce; content: "\e028"; display: inline-block; position: absolute; top: 1em; left: 1.5em; } .woocommerce-error .button, .woocommerce-info .button, .woocommerce-message .button { float: right; } .woocommerce-error li, .woocommerce-info li, .woocommerce-message li { list-style: none outside !important; padding-left: 0 !important; margin-left: 0 !important; } .rtl.woocommerce .price_label, .rtl.woocommerce .price_label span { direction: ltr; unicode-bidi: embed; } .woocommerce-message { border-top-color: #769252; } .woocommerce-message::before { content: "\e015"; color: #769252; } .woocommerce-info { border-top-color: var(--darkgrey); } .woocommerce-info::before { color: var(--darkgrey); } .woocommerce-error { border-top-color: var(--red); } .woocommerce-error::before { content: "\e016"; color: var(--red); } .wc-block-components-notice-banner { position: relative; margin: 1rem; padding: 1rem 1rem 1rem 4rem; border-radius: var(--b-radius); background: var(--lightgrey); } .wc-block-components-notice-banner.is-success { background: #defbeb; } .wc-block-components-notice-banner.is-error { background: #fbdede; } } /* ============================================================ * LAYER : overrides * ============================================================ * Last resort — this layer wins over everything else. * The place for documented exceptions, acknowledged hacks, * urgent hotfixes, and global utility helpers that must * always apply regardless of context. * * RULES : * - Every single rule here MUST have a comment explaining * why it lives here and not in another layer. * No comment = no business being here. * - !important should be essentially unnecessary if the * rest of your layers are well-structured. If you're * reaching for it here, something is misplaced upstream. * * GOAL : this layer should tend toward empty over time. * If it keeps growing, it's a signal that rules are * landing in the wrong layers elsewhere. * ============================================================ */ @layer overrides { /* LEICA OVERIDES */ .leica-boutique #main .myCtaGreen, ul.products li.product.brand_cat-leica header .new-product-flag { background: var(--leica-red); } .leica-boutique #main .myCtaGreen:hover { background: var(--darkgrey); } .leica-boutique .text_wrap h2, .leica-boutique.single-product #add-to-cart-follow #add-to-cart-follow-price { color: var(--darkgrey); } .leica-boutique .flexibleContentBlock.fc_headline { color: var(--black); } .leica-boutique .flexibleContentBlock.fc_video { background: var(--black); } } /* SWIPER NAV */ .single-product #product-images .swiper-pagination { position:absolute; left:var(--spacing-xl); bottom:var(--spacing-xl);} .single-product #product-images .swiper-pagination-bullet-active { background:var(--darkgrey); } .swiper-button-next, .swiper-button-prev{top: 0!important; width: 4vw!important; height: 100%!important; margin:0!important; color:var(--verydarkgrey)!important; outline:none!important; box-shadow:none!important; } .swiper-button-next:focus, .swiper-button-prev:focus, .swiper-button-next:focus-visible, .swiper-button-prev:focus-visible { outline:none!important; box-shadow:none!important; } .swiper-button-next { cursor: auto!important; cursor:url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.71%202.29l-1.42%201.42%209.3%209.29H0v2h24.59l-9.3%209.29%201.42%201.42L28.41%2014z%22%20fill%3D%22%23282828%22%2F%3E%3C%2Fsvg%3E") 28 28, auto !important; } .swiper-button-prev { cursor: auto; cursor:url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22matrix(-1%2C0%2C0%2C1%2C28.41%2C0)%22%3E%3Cpath%20d%3D%22M16.71%2C2.29L15.29%2C3.71L24.59%2C13L0%2C13L0%2C15L24.59%2C15L15.29%2C24.29L16.71%2C25.71L28.41%2C14L16.71%2C2.29Z%22%20fill%3D%22%23282828%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 28 28, auto !important; } .swiper-button-next:after, .swiper-button-prev:after{font-size:0 !important;} .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal{height:2px !important;} .swiper-button-prev{left:0!important;} .swiper-button-next{right:0!important;;} .fc_image_slider .swiper-fc_images .swiper-pagination { position: absolute; bottom:0 !important; left:50% !important; transform:translateX(-50%); width: auto !important; z-index: 9; } .fc_image_slider .swiper-fc_images .swiper-pagination-bullet { position: relative; display: inline-block; width: 1.25rem; height: 0.125rem; margin-right: 0.188rem; cursor: pointer; background-color: #282828; transition: opacity 0.2s ease; border-radius: 0 !important; }