:root{ /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT PRODUCTS ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT PRODUCTS ULTRA CONTAINER WIDTH ------------------------------------------- */ --Products-Ultra-Container-Width: calc(100vw - 80px); /* ROOT PRODUCTS ULTRA CONTAINER TOP ------------------------------------------ */ --Product-Ultra-Container-Top: var(--Scroll-Gap-Short); /* ROOT PRODUCTS GLOBAL CONTAINER WIDTH ------------------------------------------ */ --Products-Global-Container-Width-1: 1840px; --Products-Global-Container-Width-2: 2180px; --Products-Global-Container-Width: var(--Products-Global-Container-Width-1); /* ROOT PRODUCTS PRINCIPAL CONTAINERS GAP LIST ------------------------------------------ */ --Product-Principal-Container-Gap-1: 30px; --Product-Principal-Container-Gap-2: 58px; --Product-Principal-Container-Gap-3: 12px; --Product-Principal-Container-Gap-4: 35px; --Product-Principal-Container-Gap-5: 100px; /* ROOT PRODUCT PRINCIPAL CONTAINER WIDTH ------------------------------------------ */ --Product-Principal-Container-Width-1: 445px; --Product-Principal-Container-Width-2: 530px; --Product-Principal-Container-Width: var(--Product-Principal-Container-Width-1); /* ROOT VIEW WIDTH ------------------------------------------ */ --View-Width: var(--Product-Principal-Container-Width); /* ROOT VIEW MAIN CONTAINER WIDTH ------------------------------------------ */ --View-Main-Container-Width: calc(3 *(var(--Product-Principal-Container-Width))); /* --View-Main-Container-Width: 1590px; */ /* ROOT PRODUCT CONTROLS GOLD CONTAINER HEIGHT --------------------------------------- */ --Controls-Gold-Container-Height: 27px; /* ROOT PRODUCT CONTROLS FULL CONTAINER HEIGHT --------------------------------------- */ --Controls-Full-Container-Height: 153px; /* ROOT PRODUCT CONTROLS FULL CONTAINER TOP ------------------------------------------ */ --Controls-Full-Container-Top: calc(445px + (var(--Product-Principal-Container-Gap-1))); /* ROOT CONTROLS GOLD CONTAINER WIDTH ------------------------------------------ */ --Controls-Gold-Container-Width-1: 390px; --Controls-Gold-Container-Width-2: 396px; --Controls-Gold-Container-Width: var(--Controls-Gold-Container-Width-1); /* ROOT CONTROLS LINE WIDTH ------------------------------------------ */ --Controls-Line-Width: var(--Controls-Gold-Container-Width); /* ROOT CONTROLS LINE TOP ------------------------------------------ */ --Controls-Line-Top: calc(27px + (var(--Controls-Gold-Container-Height))); /* ROOT CONTROLS PIERRE MAIN CONTAINER WIDTH ------------------------------------------ */ /* --Controls-Pierre-Main-Container-Width: var(--Controls-Gold-Container-Width); */ /* ROOT CONTROLS PIERRE CONTAINER WIDTH ------------------------------------------ */ /* --Controls-Pierre-Container-Width: var(--Controls-Pierre-Main-Container-Width); */ /* ROOT CONTROLS PIERRE CONTAINER HEIGHT ------------------------------------------ */ --Controls-Pierre-Container-Height: var(--Controls-Gold-Container-Height); /* ROOT CONTROLS PIERRE MAIN CONTAINER HEIGHT ------------------------------------------ */ --Controls-Pierre-Main-Container-Height: calc(17px + (2 * (var(--Controls-Pierre-Container-Height)))); /* ROOT CONTROLS INSIDE GAP ------------------------------------------ */ --Controls-Inside-Gap: 55px; /* ROOT CONTROLS PIERRE MAIN CONTAINER TOP ------------------------------------------ */ --Controls-Pierre-Main-Container-Top: calc((var(--Controls-Gold-Container-Height)) + (var(--Controls-Inside-Gap))); /* ROOT PRODUCT TITLE COLLECTION HEIGHT ------------------------------------------ */ --Product-Title-Collection-Height: 62px; /* ROOT PRODUCT PRICE COLLECTION HEIGHT ------------------------------------------ */ --Product-Price-Collection-Height: 44px; /* ROOT PRODUCT PRICE COLLECTION TOP ------------------------------------------ */ --Product-Price-Collection-Top: calc((var(--Product-Title-Collection-Height)) + (var(--Product-Principal-Container-Gap-3)));; /* ROOT PRODUCT DESCRIPTION COLLECTION TOP ------------------------------------------ */ --Product-Description-Collection-Top: calc((var(--Product-Price-Collection-Top)) + (var(--Product-Price-Collection-Height)) + (var(--Product-Principal-Container-Gap-4)));; /* ROOT PRODUCT DESCRIPTION COLLECTION LINE HEIGHT ------------------------------------------ */ --Product-Description-Collection-Line-Height: 36px; /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT COVER SECTION ----------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT COVER COLLECTION CONTAINER TOP ------------------------------------------ */ --Cover-Collection-Container-Top-1: 166px; --Cover-Collection-Container-Top: var(--Cover-Collection-Container-Top-1); /* ROOT COVER TITLE TOP --------------------------------------------------------- */ --Cover-Title-Top-1: 404px; --Cover-Title-Top-1: 384px; --Cover-Title-Top-2: 255px; --Cover-Title-Top: var(--Cover-Title-Top-1); /* ---------- ------------------------------------------------------------------- */ /* ---------- ------------------------------------------------------------------- */ /* ROOT INTRO ------------------------------------------------------------------- */ /* ---------- ------------------------------------------------------------------- */ /* ---------- ------------------------------------------------------------------- */ /* ROOT COLLECTION INTRO MAIN CONTAINER TOP ------------------------------------- */ --Collection-Intro-Main-Container-Top: 0px; /* --Collection-Intro-Main-Container-Top: calc((var(--Cover-Collection-Container-Top)) + 422px + (var(--Cover-Container-Height))); */ /* ROOT COLLECTION INTRO CONTAINER TOP ------------------------------------------ */ --Collection-Intro-Container-Top-1: var(--Scroll-Gap-Large); --Collection-Intro-Container-Top-2: var(--Scroll-Gap-Short); --Collection-Intro-Container-Top: var(--Collection-Intro-Container-Top-1); /* ROOT COLLECTION INTRO CONTAINER LEFT ----------------------------------------- */ --Collection-Intro-Container-Left-1: calc((var(--Site-Margins)) + (2 * ((var(--Column-Site-Width)) + (var(--Column-Gap))))); /* XTRA - 1801 */ --Collection-Intro-Container-Left-2: calc((var(--Site-Margins)) + (5 * ((var(--Column-Site-Width)) + (var(--Column-Gap))))); /* 1800 - 1701 */ --Collection-Intro-Container-Left-3: calc((var(--Site-Margins)) + (3 * ((var(--Column-Site-Width)) + (var(--Column-Gap))))); /* 1700 - 1301 */ --Collection-Intro-Container-Left-4: calc((var(--Site-Margins)) + (2 * ((var(--Column-Site-Width)) + (var(--Column-Gap))))); /* 1300 - 0841 */ --Collection-Intro-Container-Left-5: calc((var(--Site-Margins)) + (1 * ((var(--Column-Site-Width)) + (var(--Column-Gap))))); /* 0840 - 0731 */ --Collection-Intro-Container-Left-6: var(--Site-Margins); /* 0730 - 0000 */ --Collection-Intro-Container-Left: var(--Collection-Intro-Container-Left-1); /* ROOT COLLECTION INTRO CONTAINER WIDTH ---------------------------------------- */ /* --Collection-Intro-Container-Width: var(--Cover-Container-Width); */ --Collection-Intro-Container-Width-1: calc((var(--Content-Width)) - ((var(--Site-Margins)) + (var(--Collection-Intro-Container-Left)))); --Collection-Intro-Container-Width-2: calc((var(--Content-Width)) - (var(--Site-Margins))); --Collection-Intro-Container-Width-3: var(--Content-Width); --Collection-Intro-Container-Width: var(--Collection-Intro-Container-Width-1); /* ----------------- ------------------------------------------------------------ */ /* ----------------- ------------------------------------------------------------ */ /* ROOT INFO SECTION ------------------------------------------------------------ */ /* ----------------- ------------------------------------------------------------ */ /* ----------------- ------------------------------------------------------------ */ /* ROOT COLLECTION INFO PRINCIPAL CONTAINER WIDTH ------------------------------------------------------------ */ --Collection-Info-Principal-Container-Width-1: calc(((var(--Column-Site-Width)) * 6) + (5 * (var(--Column-Gap)))); --Collection-Info-Principal-Container-Width-2: calc(((var(--Column-Site-Width)) * 18) + (17 * (var(--Column-Gap)))); /* 1800 - 1701 */ --Collection-Info-Principal-Container-Width-3: calc(((var(--Column-Site-Width)) * 12) + (11 * (var(--Column-Gap)))); /* 1700 - 1601 */ --Collection-Info-Principal-Container-Width-4: calc(((var(--Column-Site-Width)) * 10) + (9 * (var(--Column-Gap)))); /* 1600 - 1441 */ --Collection-Info-Principal-Container-Width-5: calc(((var(--Column-Site-Width)) * 12) + (11 * (var(--Column-Gap)))); /* 1440 - 0961 */ --Collection-Info-Principal-Container-Width-6: calc(((var(--Column-Site-Width)) * 10) + (9 * (var(--Column-Gap)))); /* 0960 - 0841 */ --Collection-Info-Principal-Container-Width-7: calc(((var(--Column-Site-Width)) * 12) + (11 * (var(--Column-Gap)))); /* 0840 - 0731 */ --Collection-Info-Principal-Container-Width-8: calc(((var(--Column-Site-Width)) * 6) + (5 * (var(--Column-Gap)))); /* 0730 - 0000 */ --Collection-Info-Principal-Container-Width: var(--Collection-Info-Principal-Container-Width-1); /* ROOT COLLECTION INFO CONTAINER WIDTH ------------------------------------------------------------ */ --Collection-Info-Container-Width-1: calc(((var(--Column-Site-Width)) * 3) + (2 * (var(--Column-Gap)))); --Collection-Info-Container-Width-2: calc(((var(--Column-Site-Width)) * 9) + (8 * (var(--Column-Gap)))); --Collection-Info-Container-Width-3: calc(((var(--Column-Site-Width)) * 6) + (5 * (var(--Column-Gap)))); --Collection-Info-Container-Width-4: calc(((var(--Column-Site-Width)) * 5) + (4 * (var(--Column-Gap)))); --Collection-Info-Container-Width-5: calc(((var(--Column-Site-Width)) * 6) + (5 * (var(--Column-Gap)))); --Collection-Info-Container-Width-6: calc(((var(--Column-Site-Width)) * 5) + (4 * (var(--Column-Gap)))); --Collection-Info-Container-Width-7: calc(((var(--Column-Site-Width)) * 6) + (5 * (var(--Column-Gap)))); --Collection-Info-Container-Width-8: calc(((var(--Column-Site-Width)) * 3) + (2 * (var(--Column-Gap)))); --Collection-Info-Container-Width-9: calc(((var(--Column-Site-Width)) * 4) + (3 * (var(--Column-Gap)))); --Collection-Info-Container-Width-10: calc(((var(--Column-Site-Width)) * 6) + (5 * (var(--Column-Gap)))); --Collection-Info-Container-Width: var(--Collection-Info-Container-Width-1); /* ROOT COLLECTION INFO TEXT GAP ------------------------------------------ */ --Collection-Info-Text-Gap-1: 50px; --Collection-Info-Text-Gap-2: 20px; --Collection-Info-Text-Gap: var(--Collection-Info-Text-Gap-1); /* ROOT COLLECTION INFO TEXT 1 BOTTOM ------------------------------------- */ --Collection-Info-Text-1-Bottom-1: var(--Collection-Info-Text-Gap); --Collection-Info-Text-1-Bottom-2: 0px; --Collection-Info-Text-1-Bottom: var(--Collection-Info-Text-1-Bottom-1); /* ROOT COLLECTION INFO TEXT 2 TOP ---------------------------------------- */ --Collection-Info-Text-2-Top-1: var(--Collection-Info-Text-Gap); --Collection-Info-Text-2-Top-2: 0px; --Collection-Info-Text-2-Top: var(--Collection-Info-Text-2-Top-1); /* ROOT COLLECTION INFO CONTAINER HEIGHT ----------------------------------------- */ --Collection-Info-Container-Height: calc(1.12 * (var(--Collection-Info-Container-Width))); --Collection-Info-Container-Height-1: calc(1.12 * (var(--Collection-Info-Container-Width))); /* ROOT COLLECTION INFO MAIN CONTAINER HEIGHT ------------------------------------ */ --Collection-Info-Main-Container-Height: var(--Collection-Info-Container-Height); /* ROOT COLLECTION INFO MAIN CONTAINER WIDTH ------------------------------------- */ --Collection-Info-Main-Container-Width: var(--Collection-Info-Principal-Container-Width); /* ROOT COLLECTION INFO FULL CONTAINER HEIGHT ------------------------------------ */ --Collection-Info-Full-Container-Height: var(--Collection-Info-Container-Height); /* ROOT COLLECTION INFO FULL CONTAINER WIDTH ------------------------------------- */ --Collection-Info-Full-Container-Width: var(--Collection-Info-Principal-Container-Width); /* ROOT COLLECTION INFO PRINCIPAL CONTAINER HEIGHT ------------------------------- */ --Collection-Info-Principal-Container-Height: calc(2 * (var(--Collection-Info-Container-Height))); /* ROOT COLLECTION INFO GLOBAL CONTAINER HEIGHT ---------------------------------- */ /* --Collection-Info-Global-Container-Height-1: calc((var(--Scroll-Gap-Large)) + (var(--Collection-Info-Principal-Container-Height))); */ /* --Collection-Info-Global-Container-Height-2: calc((var(--Scroll-Gap-Short)) + (var(--Collection-Info-Principal-Container-Height))); */ /* --Collection-Info-Global-Container-Height: var(--Collection-Info-Global-Container-Height-1); */ /* ------------------ ----------------------------------------------------------- */ /* ------------------ ----------------------------------------------------------- */ /* ROOT FIRST SECTION ----------------------------------------------------------- */ /* ------------------ ----------------------------------------------------------- */ /* ------------------ ----------------------------------------------------------- */ /* ROOT COLLECTION FIRST SECTION TOP -------------------------------------------- */ --Collection-First-Section-Top-1: calc((var(--Cover-Collection-Container-Top)) + 422px + (var(--Cover-Container-Height))); --Collection-First-Section-Top-2: calc((var(--Cover-Collection-Container-Top)) + (2 * (var(--Lh-Collec-Cover-Title))) + (var(--Cover-Container-Height))); --Collection-First-Section-Top-3: calc((var(--Cover-Collection-Container-Top)) + 100px + (var(--Cover-Container-Height))); --Collection-First-Section-Top: var(--Collection-First-Section-Top-1); /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* COVER SECTION -- SUITE ----------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT COVER TITLE MAIN CONTAINER HEIGHT --------------------------------------- */ --Cover-Title-Main-Container-Height: calc((var(--Collection-First-Section-Top)) + 100vh + (var(--Scroll-Gap-Large))); /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT SECOND SECTION ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT COLLECTION SECOND SECTION TOP -------------------------------------------- */ --Collection-Second-Section-Top: var(--Collection-First-Section-Top); /* ROOT COLLECTION SECOND SECTION GLOBAL CONTAINER TOP --------------------------- */ --Collection-Second-Section-Global-Container-Top: var(--Scroll-Gap-Short); /* ROOT COLLECTION ACCROCHE MAIN CONTAINER HEIGHT -------------------------------- */ --Collection-Accroche-Main-Container-Height: 476px; /* ROOT COLLECTION ACCROCHE PRINCIPAL CONTAINER HEIGHT --------------------------- */ /* --Collection-Accroche-Principal-Container-Height: 12px; */ /* ROOT COLLECTION BANNER PRINCIPAL CONTAINER HEIGHT ----------------------------- */ /* --Collection-Banner-Principal-Container-Top: calc((var(--Collection-Accroche-Principal-Container-Height)) + (var(--Collection-Accroche-Principal-Container-Top))); */ /* --Collection-Banner-Principal-Container-Height: 800px; */ --Collection-Banner-Principal-Container-Height: calc(100vw / 2.4); --Collection-Banner2-Principal-Container-Height: calc(100vw / 1.5); --Collection-Banner-Principal-Container-Height-1: calc(100vw / 2.4); --Collection-Banner-Principal-Container-Height-2: calc(100vw / 1.5); --Collection-Banner-Principal-Container-Height: var(--Collection-Banner-Principal-Container-Height-1); /* --Collection-Banner-Height: var(--Collection-Banner-Principal-Container-Height); */ /* ROOT COLLECTION ACCROCHE TOP -------------------------------------------------- */ --Collection-Accroche-Top: var(--Scroll-Gap-Short); /* --Collection-Second-Section-Global-Container-Height: calc((var()) + (var(--Collection-Banner-Principal-Container-Height))); */ /* --Collection-Second-Section-Height: calc((var(--Collection-Second-Section-Global-Container-Height)) + ((var(--Collection-Second-Section-Global-Container-Top)))); */ /* ------------------ ----------------------------------------------------------- */ /* ------------------ ----------------------------------------------------------- */ /* ROOT THIRD SECTION ----------------------------------------------------------- */ /* ------------------ ----------------------------------------------------------- */ /* ------------------ ----------------------------------------------------------- */ --Collection-Third-Section-Top: var(--Collection-First-Section-Top); /* ------------- ---------------------------------------------------------------- */ /* ROOT COMMANDS ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT PRODUCTS GLOBAL COMMAND PRINCIPAL CONTAINER TOP ------------------------- */ --Products-Global-Command-Prinicpal-Container-Top: var(--Collection-Third-Section-Top); /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT IOS PRDCTS -------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT IOS PRDCTS WIDTH -------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT IOS PRDCTS ULTRA CONTAINER WIDTH ----------------------------------------- */ --Ios-Prdcts-Ultra-Container-Width: calc(100vw - 40px); /* ROOT IOS PRDCTS GLOBAL CONTAINER WIDTH ---------------------------------------- */ --Ios-Prdcts-Global-Container-Width: var(--Ios-Prdcts-Ultra-Container-Width); /* ROOT IOS PRDCTS PRINCIPAL CONTAINER WIDTH ------------------------------------- */ --Ios-Prdcts-Principal-Container-Width: calc((3 * (var(--Column-Site-Width))) + (2 * (var(--Column-Gap)))); /* ROOT IOS PRDCTS IMAGE MAIN CONTAINER WIDTH ------------------------------------ */ --Ios-Prdcts-Image-Main-Container-Width: var(--Ios-Prdcts-Principal-Container-Width); /* ROOT IOS PRDCTS CONTENT MAIN CONTAINER WIDTH ---------------------------------- */ --Ios-Prdcts-Content-Main-Container-Width: var(--Ios-Prdcts-Principal-Container-Width); /* ROOT IOS PRDCTS BTN CONTAINER WIDTH ---------------------------------- */ --Ios-Prdcts-Btn-Container-Width: var(--Ios-Prdcts-Principal-Container-Width); /* ------------- ---------------------------------------------------------------- */ /* ROOT IOS PRDCTS GAPS --------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT IOS PRDCTS TOP GAP HEIGHT ------------------------------------------------ */ --Ios-Prdcts-Top-Gap-Height-1: 25px; --Ios-Prdcts-Top-Gap-Height-2: 20px; --Ios-Prdcts-Top-Gap-Height-3: 20px; --Ios-Prdcts-Top-Gap-Height-4: 10px; --Ios-Prdcts-Top-Gap-Height: var(--Ios-Prdcts-Top-Gap-Height-1); /* ROOT IOS PRDCTS CONTENT FIRST GAP HEIGHT -------------------------------------- */ /* --Ios-Prdcts-Content-First-Gap-Height-1: 10px; */ --Ios-Prdcts-Content-First-Gap-Height-1: 7px; --Ios-Prdcts-Content-First-Gap-Height-2: 4px; --Ios-Prdcts-Content-First-Gap-Height-3: 10px; --Ios-Prdcts-Content-First-Gap-Height-4: 5px; --Ios-Prdcts-Content-First-Gap-Height: var(--Ios-Prdcts-Content-First-Gap-Height-1); /* ROOT IOS PRDCTS CONTENT SECOND GAP HEIGHT ------------------------------------- */ /* --Ios-Prdcts-Content-Second-Gap-Height-1: 10px; */ /* --Ios-Prdcts-Content-Second-Gap-Height-1: 7px; */ --Ios-Prdcts-Content-Second-Gap-Height-1: 4px; --Ios-Prdcts-Content-Second-Gap-Height-2: 7px; --Ios-Prdcts-Content-Second-Gap-Height-3: 10px; --Ios-Prdcts-Content-Second-Gap-Height-4: 3px; --Ios-Prdcts-Content-Second-Gap-Height: var(--Ios-Prdcts-Content-Second-Gap-Height-1); /* ROOT IOS PRDCTS BOTTOM GAP HEIGHT --------------------------------------------- */ /* --Ios-Prdcts-Bottom-Gap-Height-1: 60px; */ --Ios-Prdcts-Bottom-Gap-Height-1: 50px; /* --Ios-Prdcts-Bottom-Gap-Height-1: 40px; */ /* --Ios-Prdcts-Bottom-Gap-Height-2: 40px; */ --Ios-Prdcts-Bottom-Gap-Height-2: 30px; --Ios-Prdcts-Bottom-Gap-Height-3: 30px; --Ios-Prdcts-Bottom-Gap-Height-4: 18px; --Ios-Prdcts-Bottom-Gap-Height: var(--Ios-Prdcts-Bottom-Gap-Height-1); /* ROOT IOS PRDCTS ULTRA GAP HEIGHT ---------------------------------------------- */ --Ios-Prdcts-Ultra-Gap-Height-1: 60px; --Ios-Prdcts-Ultra-Gap-Height-2: 30px; --Ios-Prdcts-Ultra-Gap-Height: var(--Ios-Prdcts-Ultra-Gap-Height-1); /* ------------- ---------------------------------------------------------------- */ /* ROOT IOS PRDCTS HEIGHT ------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT IOS PRDCTS IMAGE MAIN CONTAINER HEIGHT ----------------------------------- */ --Ios-Prdcts-Image-Main-Container-Height: var(--Ios-Prdcts-Image-Main-Container-Width); /* ROOT IOS PRDCTS CONTENT MAIN CONTAINER HEIGHT --------------------------------- */ --Ios-Prdcts-Content-Main-Container-Height: calc((var(--Lh-Ios-Prdcts-Title)) + (var(--Ios-Prdcts-Content-First-Gap-Height)) + (var(--Lh-Ios-Prdcts-Price)) + (var(--Ios-Prdcts-Content-Second-Gap-Height)) + (var(--Lh-Ios-Prdcts-Info))); /* ROOT IOS PRDCTS BTN CONTAINER HEIGHT ------------------------------------------ */ --Ios-Prdcts-Btn-Container-Height-1: 50px; /* 730 - 661 */ /* --Ios-Prdcts-Btn-Container-Height-2: 40px; */ --Ios-Prdcts-Btn-Container-Height-2: 36px; /* 660 - 501 */ --Ios-Prdcts-Btn-Container-Height-3: 30px; /* 500 - 421 */ --Ios-Prdcts-Btn-Container-Height-4: 30px; /* 420 - 000 */ --Ios-Prdcts-Btn-Container-Height: var(--Ios-Prdcts-Btn-Container-Height-1); /* ROOT IOS PRDCTS PRINCIPAL CONTAINER HEIGHT ------------------------------------ */ --Ios-Prdcts-Principal-Container-Height: calc((var(--Ios-Prdcts-Image-Main-Container-Height)) + (var(--Ios-Prdcts-Top-Gap-Height)) + (var(--Ios-Prdcts-Content-Main-Container-Height)) + (var(--Ios-Prdcts-Bottom-Gap-Height)) + (var(--Ios-Prdcts-Btn-Container-Height))); /* ROOT IOS PRDCTS GLOBAL CONTAINER HEIGHT --------------------------------------- */ --Ios-Prdcts-Global-Container-Height: var(--Ios-Prdcts-Principal-Container-Height); /* ROOT IOS PRDCTS ULTRA CONTAINER HEIGHT ---------------------------------------- */ --Ios-Prdcts-Ultra-Container-Height: calc((2 * (var(--Ios-Prdcts-Global-Container-Height))) + (var(--Ios-Prdcts-Ultra-Gap-Height))); /* ------------- ---------------------------------------------------------------- */ /* ROOT IOS PRDCTS TOP ---------------------------------------------------------- */ /* ------------- ---------------------------------------------------------------- */ /* ROOT IOS PRDCTS ANCRE TOP ----------------------------------------------------- */ --Ios-Prdcts-Ancre-Top: calc((var(--Product-Ultra-Container-Top)) - (var(--Scroll-Gap-Short))); --Ios-Prdcts-Ancre-Top: calc((var(--Product-Ultra-Container-Top)) - 90px); --Ios-Prdcts-Ancre-Top: var(--Product-Ultra-Container-Top); /* ROOT IOS PRDCTS CONTENT MAIN CONTAINER TOP ------------------------------------ */ --Ios-Prdcts-Content-Main-Container-Top: calc(var(--Ios-Prdcts-Image-Main-Container-Height) + (var(--Ios-Prdcts-Top-Gap-Height))); /* ROOT IOS PRDCTS TITLE TOP ----------------------------------------------------- */ --Ios-Prdcts-Title-Top: 0px; /* ROOT IOS PRDCTS PRICE TOP ----------------------------------------------------- */ --Ios-Prdcts-Price-Top: calc((var(--Lh-Ios-Prdcts-Title)) + (var(--Ios-Prdcts-Content-First-Gap-Height))); /* ROOT IOS PRDCTS INFO BOTTOM --------------------------------------------------- */ --Ios-Prdcts-Info-Bottom: 0px; /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT FOURTH SECTION ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT QUALITY ----------------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT QUALITY NB LINES -------------------------------------------------------- */ --Quality-Nb-Lines-1: 2; --Quality-Nb-Lines-2: 3; --Quality-Nb-Lines-3: 4; --Quality-Nb-Lines-4: 5; --Quality-Nb-Lines-5: 6; --Quality-Nb-Lines: var(--Quality-Nb-Lines-1); /* ROOT QUALITY CONTAINER HEIGHT ------------------------------------------------ */ --Quality-Container-Height: calc((var(--Quality-Nb-Lines)) * (var(--Lh-Quality))); /* ROOT QUALITY CONTAINER WIDTH ------------------------------------------------- */ /* --Quality-Container-Width: calc((4 * (var(--Column-Site-Width))) + (3 * (var(--Column-Gap-1)))); */ /* ROOT QUALITY CONTAINER TOP --------------------------------------------------- */ /* --Quality-Container-Top-1: calc(2 * (var(--Scroll-Gap-Short))); */ /* --Quality-Container-Top-2: var(--Scroll-Gap-Short); */ /* --Quality-Container-Top-1: var(--Scroll-Gap-Short); */ /* --Quality-Container-Top-2: 0px; */ /* --Quality-Container-Top: var(--Quality-Container-Top-1); */ --Quality-Container-Top: 0px; /* ROOT QUALITY MAIN CONTAINER HEIGHT ------------------------------------------- */ /* --Quality-Main-Container-Height-1: calc((4 * (var(--Scroll-Gap-Short))) + (var(--Quality-Container-Height))); */ /* --Quality-Main-Container-Height-2: calc((2 * (var(--Scroll-Gap-Short))) + (var(--Quality-Container-Height))); */ --Quality-Main-Container-Height-1: calc((2 * (var(--Scroll-Gap-Short))) + (var(--Quality-Container-Height))); --Quality-Main-Container-Height-2: calc((1 * (var(--Scroll-Gap-Short))) + (var(--Quality-Container-Height))); --Quality-Main-Container-Height: var(--Quality-Main-Container-Height-1); --Quality-Width-1: calc(((var(--Column-Site-Width)) * 6) + (5 * (var(--Column-Gap)))); --Quality-Width-2: calc(((var(--Column-Site-Width)) * 16) + (15 * (var(--Column-Gap)))); --Quality-Width-3: calc(((var(--Column-Site-Width)) * 10) + (9 * (var(--Column-Gap)))); --Quality-Width-4: calc(((var(--Column-Site-Width)) * 8) + (7 * (var(--Column-Gap)))); --Quality-Width-5: calc(((var(--Column-Site-Width)) * 4) + (3 * (var(--Column-Gap)))); /* --Quality-Width-6: calc(((var(--Column-Site-Width)) * 6) + (5 * (var(--Column-Gap)))); */ --Quality-Width: var(--Quality-Width-1); /* ------------------- ---------------------------------------------------------- */ /* ROOT SUGGESTIONS ------------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT SUGGESTIONS PRINCIPAL CONTAINER TOP ------------------------------------- */ --Suggestions-Global-Container-Top: var(--Quality-Main-Container-Height); /* ROOT SUGGESTIONS PRINCIPAL CONTAINER WIDTH ---------------------------------- */ --Suggestions-Principal-Container-Width-1: calc((4 * (var(--Column-Site-Width))) + (3 * (var(--Column-Gap)))); --Suggestions-Principal-Container-Width-2: calc((10 * (var(--Column-Site-Width))) + (9 * (var(--Column-Gap)))); --Suggestions-Principal-Container-Width-3: calc((6 * (var(--Column-Site-Width))) + (5 * (var(--Column-Gap)))); --Suggestions-Principal-Container-Width-4: calc((8 * (var(--Column-Site-Width))) + (7 * (var(--Column-Gap)))); --Suggestions-Principal-Container-Width-5: calc((10 * (var(--Column-Site-Width))) + (9 * (var(--Column-Gap)))); --Suggestions-Principal-Container-Width-6: calc((12 * (var(--Column-Site-Width))) + (11 * (var(--Column-Gap)))); --Suggestions-Principal-Container-Width-7: calc((6 * (var(--Column-Site-Width))) + (5 * (var(--Column-Gap)))); --Suggestions-Principal-Container-Width: var(--Suggestions-Principal-Container-Width-1); /* ROOT SUGGESTIONS TOP CONTAINER WIDTH ---------------------------------------- */ --Suggestions-Top-Container-Width: var(--Suggestions-Principal-Container-Width); /* ROOT SUGGESTIONS FULL CONTAINER WIDTH --------------------------------------- */ --Suggestions-Full-Container-Width: var(--Suggestions-Principal-Container-Width); /* ROOT SUGGESTIONS MAIN CONTAINER WIDTH --------------------------------------- */ --Suggestions-Main-Container-Width-1: calc((2 * (var(--Column-Site-Width))) + (1 * (var(--Column-Gap)))); --Suggestions-Main-Container-Width-2: calc((5 * (var(--Column-Site-Width))) + (4 * (var(--Column-Gap)))); --Suggestions-Main-Container-Width-3: calc((3 * (var(--Column-Site-Width))) + (2 * (var(--Column-Gap)))); --Suggestions-Main-Container-Width-4: calc((4 * (var(--Column-Site-Width))) + (3 * (var(--Column-Gap)))); --Suggestions-Main-Container-Width-5: calc((5 * (var(--Column-Site-Width))) + (4 * (var(--Column-Gap)))); --Suggestions-Main-Container-Width-6: calc((6 * (var(--Column-Site-Width))) + (5 * (var(--Column-Gap)))); --Suggestions-Main-Container-Width-7: calc((3 * (var(--Column-Site-Width))) + (2 * (var(--Column-Gap)))); --Suggestions-Main-Container-Width: var(--Suggestions-Main-Container-Width-1); /* ROOT SUGGESTIONS CONTAINER WIDTH --------------------------------------- */ --Suggestions-Container-Width: var(--Suggestions-Main-Container-Width); /* --Lh-Title-Txt-2 */ /* Lh-Courant-2 */ /* ROOT SUGGESTIONS GAPS HEIGHT ---------------------------------- */ --Suggestions-First-Gap-Height-1: var(--Scroll-Gap-Short); --Suggestions-First-Gap-Height-2: calc((var(--Scroll-Gap-Short)) / 2); --Suggestions-First-Gap-Height: var(--Suggestions-First-Gap-Height-1); --Suggestions-Second-Gap-Height-1: 30px; --Suggestions-Second-Gap-Height-2: 30px; --Suggestions-Second-Gap-Height: var(--Suggestions-Second-Gap-Height-1); --Suggestions-Third-Gap-Height-1: 50px; --Suggestions-Third-Gap-Height-2: 50px; --Suggestions-Third-Gap-Height: var(--Suggestions-Third-Gap-Height-1); --Suggestions-Top-Gap-Height-1: 13px; --Suggestions-Top-Gap-Height-2: 13px; --Suggestions-Top-Gap-Height: var(--Suggestions-Top-Gap-Height-1); --Suggestions-Info-Gap-Height-1: 12px; --Suggestions-Info-Gap-Height-2: 12px; --Suggestions-Info-Gap-Height: var(--Suggestions-Info-Gap-Height-1); /* ROOT SUGGESTIONS TITLE NB LINES ----------------------------------------- */ --Suggestions-Title-Nb-Lines-1: 1; --Suggestions-Title-Nb-Lines-2: 2; --Suggestions-Title-Nb-Lines: var(--Suggestions-Title-Nb-Lines-1); /* ROOT SUGGESTIONS TITLE HEIGHT ------------------------------------------- */ --Suggestions-Title-Height: calc((var(--Lh-Title-Txt-2)) * (var(--Suggestions-Title-Nb-Lines))); /* ROOT SUGGESTIONS ACCROCHE NB LINES -------------------------------------- */ /* ROOT SUGGESTIONS ACCROCHE TOP ------------------------------------------- */ --Suggestions-Accroche-Top: calc((var(--Suggestions-Title-Height)) + (var(--Suggestions-Top-Gap-Height))); /* --Suggestions-Accroche-Top: calc((var(--Lh-Title-Txt-2)) + (var(--Suggestions-Top-Gap-Height))); */ /* ROOT SUGGESTIONS ACCROCHE NB LINES -------------------------------------- */ --Suggestions-Accroche-Nb-Lines-1: 2; --Suggestions-Accroche-Nb-Lines-2: 3; --Suggestions-Accroche-Nb-Lines-3: 4; --Suggestions-Accroche-Nb-Lines: var(--Suggestions-Accroche-Nb-Lines-1); /* ROOT SUGGESTIONS INFOS NB LINES ----------------------------------------- */ --Suggestions-Info-Nb-Lines-1: 4; --Suggestions-Info-Nb-Lines-2: 5; --Suggestions-Info-Nb-Lines-3: 7; --Suggestions-Info-Nb-Lines: var(--Suggestions-Info-Nb-Lines-1); /* ROOT SUGGESTIONS TOP CONTAINER HEIGHT ----------------------------------- */ --Suggestions-Top-Container-Height: calc((var(--Suggestions-Accroche-Top)) + ((var(--Suggestions-Accroche-Nb-Lines)) * (var(--Lh-Courant-2)))); /* ROOT SUGGESTIONS FULL CONTAINER TOP ------------------------------------- */ --Suggestions-Full-Container-Top: calc((var(--Suggestions-Top-Container-Height)) + (var(--Suggestions-First-Gap-Height))); /* ROOT SUGGESTIONS IMAGE CONTAINER HEIGHT --------------------------------- */ /* --Suggestions-Image-Container-Height-1: 400px; */ /* --Suggestions-Image-Container-Height-2: 338px; */ /* --Suggestions-Image-Container-Height-3: 225px; */ /* --Suggestions-Image-Container-Height-4: 155px; */ /* --Suggestions-Image-Container-Height: var(--Suggestions-Image-Container-Height-1); */ --Suggestions-Image-Container-Height: var(--Suggestions-Main-Container-Width); /* ROOT SUGGESTIONS CONTAINER TOP ------------------------------------------ */ --Suggestions-Container-Top: calc((var(--Suggestions-Image-Container-Height)) + (var(--Suggestions-Second-Gap-Height))); /* ROOT SUGGESTIONS CONTAINER HEIGHT --------------------------------------- */ --Suggestions-Container-Height: calc((var(--Lh-Suggestions-Infos-Title)) + ((var(--Suggestions-Info-Nb-Lines)) * (var(--Lh-Courant-2))) + (var(--Suggestions-Info-Gap-Height))); /* --Suggestions-Container-Height: calc((var(--Lh-Suggestions-Infos-Title)) + ((var(--Suggestions-Info-Nb-Lines)) * (var(--Lh-Courant-2)))); */ /* ROOT SUGGESTIONS BTN CONTAINER HEIGHT ----------------------------------- */ --Suggestions-Btn-Container-Height-1: 50px; --Suggestions-Btn-Container-Height-2: 30px; --Suggestions-Btn-Container-Height: var(--Suggestions-Btn-Container-Height-1); /* ROOT SUGGESTIONS MAIN CONTAINER HEIGHT ---------------------------------- */ --Suggestions-Main-Container-Height: calc((var(--Suggestions-Image-Container-Height)) + (var(--Suggestions-Second-Gap-Height)) + (var(--Suggestions-Container-Height)) + (var(--Suggestions-Third-Gap-Height)) + 50px); --Suggestions-Main-Container-Height: calc((var(--Suggestions-Image-Container-Height)) + (var(--Suggestions-Second-Gap-Height)) + (var(--Suggestions-Container-Height)) + (var(--Suggestions-Third-Gap-Height)) + var(--Suggestions-Btn-Container-Height)); /* --Suggestions-Main-Container-Height: calc((var(--Suggestions-Top-Container-Height)) + (var(--Suggestions-First-Gap-Height)) + (var(--Suggestions-)) + (var(--Suggestions-Second-Gap-Height)) + (var(--Suggestions-Third-Gap-Height)) + 50px); */ /* ROOT SUGGESTIONS FULL CONTAINER HEIGHT ---------------------------------- */ --Suggestions-Full-Container-Height: var(--Suggestions-Main-Container-Height); /* ROOT SUGGESTIONS PRINCIPAL CONTAINER HEIGHT ---------------------------------- */ --Suggestions-Principal-Container-Height: calc((var(--Suggestions-Top-Container-Height)) + (var(--Suggestions-First-Gap-Height)) + (var(--Suggestions-Full-Container-Height))); /* --Suggestions-Principal-Container-Height: calc((var(--Suggestions-Top-Container-Height)) + (var(--Suggestions-First-Gap-Height)) + (var(--Suggestions-)) + (var(--Suggestions-Second-Gap-Height)) + (var(--Suggestions-Third-Gap-Height)) + 50px); */ /* ROOT SUGGESTIONS PRINCIPAL CONTAINER HEIGHT ---------------------------------- */ --Suggestions-Global-Container-Height: var(--Suggestions-Principal-Container-Height); /* ------------------- ---------------------------------------------------------- */ /* ROOT WARNING ----------------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT WARNING GLOBAL CONTAINER TOP --------------------------------------------- */ --Warning-Global-Container-Top: calc((var(--Suggestions-Global-Container-Top)) + var(--Suggestions-Global-Container-Height)); /* ROOT WARNING PRINCIPAL CONTAINER TOP ------------------------------------------ */ --Warning-Principal-Container-Top-1: calc(2 * (var(--Scroll-Gap-Short))); --Warning-Principal-Container-Top-2: var(--Scroll-Gap-Short); --Warning-Principal-Container-Top: var(--Warning-Principal-Container-Top-1); /* ROOT WARNING CONTAINER WIDTH -------------------------------------------------- */ --Warning-Container-Width-1: calc((2 * (var(--Column-Site-Width))) + (var(--Column-Gap))); /*2 col*/ --Warning-Container-Width-2: calc((5 * (var(--Column-Site-Width))) + (4 * (var(--Column-Gap)))); /*5 col*/ --Warning-Container-Width-3: calc((3 * (var(--Column-Site-Width))) + (2 * (var(--Column-Gap)))); /*3 col*/ --Warning-Container-Width-4: calc((4 * (var(--Column-Site-Width))) + (3 * (var(--Column-Gap)))); /*4 col*/ --Warning-Container-Width-5: calc((6 * (var(--Column-Site-Width))) + (5 * (var(--Column-Gap)))); /*6 col*/ --Warning-Container-Width-6: var(--Warning-Container-Width-4); /*4 col*/ /*mobile*/ --Warning-Container-Width-7: var(--Warning-Container-Width-5); /*6 col*/ --Warning-Container-Width: var(--Warning-Container-Width-1); /* ROOT WARNING MAIN CONTAINER WIDTH --------------------------------------------- */ --Warning-Main-Container-Width: var(--Warning-Container-Width); /* ROOT WARNING FULL CONTAINER WIDTH --------------------------------------------- */ --Warning-Full-Container-Width-0: calc((4 * (var(--Warning-Main-Container-Width))) + (3 * (var(--Column-Gap)))); --Warning-Full-Container-Width-10: calc((2 * (var(--Warning-Main-Container-Width))) + (var(--Column-Gap))); --Warning-Full-Container-Width-20: var(--Warning-Main-Container-Width); --Warning-Full-Container-Width: var(--Warning-Full-Container-Width-0); /* ROOT WARNING PRINCIPAL CONTAINER WIDTH ---------------------------------------- */ --Warning-Principal-Container-Width: var(--Warning-Full-Container-Width); /* ROOT WARNING CONTAINER GAP ---------------------------------------------------- */ --Warning-Container-Gap-1: 24px; --Warning-Container-Gap-2: 12px; --Warning-Container-Gap: var(--Warning-Container-Gap-1); /* ROOT WARNING INFO NB LINES ---------------------------------------------------- */ --Warning-Info-Nb-Lines-1: 3; --Warning-Info-Nb-Lines-2: 4; --Warning-Info-Nb-Lines: var(--Warning-Info-Nb-Lines-1); /* ROOT WARNING INFO WIDTH ------------------------------------------------------- */ --Warning-Info-Width-1: 100%; --Warning-Info-Width-2: 110%; --Warning-Info-Width-3: var(--Warning-Info-Width-1); --Warning-Info-Width: var(--Warning-Info-Width-1); /* ROOT WARNING INFO TOP --------------------------------------------------------- */ --Warning-Info-Top: calc((var(--Warning-Container-Gap)) + (var(--Lh-Warning-Title))); /* ROOT WARNING CONTAINER HEIGHT ------------------------------------------------- */ --Warning-Container-Height: calc((var(--Lh-Warning-Title)) + (var(--Warning-Container-Gap)) + ((var(--Warning-Info-Nb-Lines)) * (var(--Lh-Warning-Info)))); /* ROOT WARNING MAIN CONTAINER HEIGHT -------------------------------------------- */ --Warning-Main-Container-Height: var(--Warning-Container-Height); /* ROOT WARNING FULL CONTAINER GAPS ---------------------------------------------- */ --Warning-Full-Container-Gap-1: 100px; --Warning-Full-Container-Gap-2: 60px; --Warning-Full-Container-Gap-3: 30px; --Warning-Full-Container-Gap: var(--Warning-Full-Container-Gap-1); /* ROOT WARNING FULL CONTAINER HEIGHT -------------------------------------------- */ --Warning-Full-Container-Height-0: var(--Warning-Main-Container-Height); --Warning-Full-Container-Height-10: calc((2 * (var(--Warning-Main-Container-Height))) + (var(--Warning-Full-Container-Gap-1))); /* --Warning-Full-Container-Height-20: calc((4 * (var(--Warning-Main-Container-Height))) + (3 * (var(--Warning-Full-Container-Gap-2)))); */ --Warning-Full-Container-Height-20: calc((4 * (var(--Warning-Main-Container-Height))) + (3 * (var(--Warning-Full-Container-Gap)))); --Warning-Full-Container-Height: var(--Warning-Full-Container-Height-0); /* ROOT WARNING PRINCIPAL CONTAINER HEIGHT --------------------------------------- */ --Warning-Principal-Container-Height-1: var(--Warning-Full-Container-Height); --Warning-Principal-Container-Height-2: calc((2 * (var(--Warning-Full-Container-Height))) + (var(--Warning-Full-Container-Gap))); --Warning-Principal-Container-Height: var(--Warning-Principal-Container-Height-1); /* ROOT WARNING GLOBAL CONTAINER HEIGHT ------------------------------------------ */ --Warning-Global-Container-Height-1: calc((var(--Warning-Principal-Container-Height)) + (4 * (var(--Scroll-Gap-Short)))); --Warning-Global-Container-Height-1: calc((var(--Warning-Principal-Container-Height)) + (3 * (var(--Scroll-Gap-Short)))); --Warning-Global-Container-Height-2: calc((var(--Warning-Principal-Container-Height)) + (2 * (var(--Scroll-Gap-Short)))); --Warning-Global-Container-Height: var(--Warning-Global-Container-Height-1); /* ------------------- ---------------------------------------------------------- */ /* ROOT FOURTH SECTION -- SUITE -- ---------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT FOURTH SECTION HEIGHT ---------------------------------------------------- */ --Collection-Fourth-Section-Height: calc((var(--Quality-Main-Container-Height)) + (var(--Suggestions-Principal-Container-Height)) + (var(--Warning-Global-Container-Height))); /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT COMMAND CACHE ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ------------------- ---------------------------------------------------------- */ /* ROOT GLOBAL COMMAND CACHE 2 HEIGHT -------------------------------------------- */ --Glolbal-Command-Cache-2-Height: calc((var(--Collection-Fourth-Section-Height)) + 911px); }