/* * @author: Zbigniew Stanejko * @copyright: ? 2012-2024, Zbigniew Stanejko * @license: This program is not free software and you can't sell and distribute it! * @company: PrestaPremium Zbigniew Stanejko * @email: info@prestashop.tf * @url: https://prestapremium.com * ------------------------------------ * @version: 1.0 * */ /*-------------------------------------------------------------- =pp body --------------------------------------------------------------*/ body{ /*background:#fafafa url(../img/bg.png) repeat center fixed;*/ font-family: var(--font-1); color: var(--color-black2); /* background: #000;*/ } /*-------------------------------------------------------------- =pp main-wrapper --------------------------------------------------------------*/ #main-wrapper>*{ background: #fff; } /*-------------------------------------------------------------- =pp Header --------------------------------------------------------------*/ #header { position: relative; --sticky-h:12rem; } /*------------------------------- =pp header-nav -------------------------------*/ .header-nav { background: var(--color-blue-1); } .header-nav .f-container{ min-height: 4.4rem; align-items: center; justify-content: space-between; gap: var(--gap-3); } /*header-info*/ .header-info a { align-items: center; gap: var(--gap--1_5); display: flex; } .header-info a i { font-size: 1.7rem; } .ppsocialfollow a{ font-size: 2.4rem; } /* header-info-1 */ #header-info-1 { gap: var(--gap); display: flex; align-items: center; } #header-info-1 a i { font-size: 2rem; } #header-info-1 .contact { margin-left: var(--gap-2); } #header-info-1 .contact .btn { border:none; } #header-info-1 .contact i { color: var(--color-red); font-size: 2.2rem; margin: -.3em 0; display: flex; } /* header-info-2 */ #header-info-2 { gap: var(--gap-1_5); display: flex; align-items: center; } #header-info-2 .favorite { order: -1; } #header-info-2 .favorite svg { font-size: 2rem; } #header-info-2 .favorite .heart { display: flex; } /*------------------------------- =pp header-content -------------------------------*/ .header-content { } .header-content .f-container { align-items: center; gap: var(--gap-2); justify-content: space-between; } .header-content .logo-shop { margin: 0; } .header-content .logo-shop img { /*max-width: 20rem;*/ } .header-content .header-right { flex:1; display: flex; justify-content: space-between; align-items: center; gap: var(--gap-3); } .header-content #pp-mainmenu { flex:1; } #header-icon .pp-1 { position: relative; } /* 3 ------------------------------- =pp pplanguageselector ppcurrencyselector */ :is(#pplanguageselector,#ppcurrencyselector) button { padding-top: .3em; padding-bottom: .3em; } :is(#pplanguageselector,#ppcurrencyselector) li a { font-size: 1.7rem; font-weight: 400; font-family: var(--font-1); } :is(#pplanguageselector,#ppcurrencyselector) .current a { color: var(--color-H); } /*------------------------------- =pp sticky -------------------------------*/ #header.sticky .header-nav { padding-bottom: var(--sticky-h); } #header.sticky .header-content { position: fixed; animation: slideDown 0.4s; right: 0; top: 0; left: 0; background: var(--color-white-1); /*padding: .6rem;*/ z-index: 999; /*box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);*/ box-shadow: var(--shadow-0); } #header.sticky #pp-mainmenu [data-depth="0"]{ padding: 0; } #header.sticky .header-content .f-container { min-height: calc(var(--sticky-h) - 6rem); } /*------------------------------- =pp header-bottom -------------------------------*/ .header-bottom { background: var(--color-black4); } /*============================================================ =pp wrapper ★★★ */ #wrapper { padding-bottom: 0; background: var(--color-blue-1); } /*#wrapper:has(#breadcrumb-bg[data-depth="1"]) { padding-top: var(--gap-3); }*/ body:not(#index) #wrapper { padding-bottom: var(--gap-5); } #columns-wrapper { padding-top: var(--gap-5); } :is(#index) #wrapper { background: #fff; } #columns { display: flex; flex-direction: column; gap: var(--gap-5); } #columns>* { flex:1; position: relative; } #content-wrapper { } /* 1200px */ @media (min-width: 75em) { #columns { --column: 29rem; --gap-columns:var(--gap-5); flex-direction: row; gap: var(--gap-columns); } #content-wrapper:is(.left-column,.right-column) { max-width: calc(100% - var(--column) - var(--gap-columns)); } .left-column.right-column#content-wrapper { max-width: calc(100% - 2 * (var(--column) + var(--gap-columns))); } #left-column,#right-column{ flex: 0 0 var(--column); max-width: var(--column); } #left-column{ order: -1; } } /* 1199px */ @media (max-width: 75em) { *:where(#left-column,#right-column)>*:not(#search_filters_wrapper) { display: none !important; } }/* end 1199px */ #left-column,#right-column{ margin: 0; display: flex; flex-direction: column; gap: var(--gap-4); } /*-------------------------------------------------------------- =pp main --------------------------------------------------------------*/ #main { min-height: 60rem; } /*============================================================ =pp footer ★★★ */ #footer{ /*background: var(--color-blue-1) url(../img/footer/footer-bg.png) no-repeat center;*/ display: flex; flex-direction: column; } /*------------------------------- =pp footer-before -------------------------------*/ .footer-before { padding: var(--gap-7) 0; } .footer-before .f-container { justify-content: center; align-items: center; flex-direction: column; gap: var(--gap-5); } .footer-before .carousel { align-self: stretch; } /*------------------------------- =pp footer-content -------------------------------*/ .footer-content { padding: calc(7rem * var(--glob-50)) 0; background: radial-gradient(circle, #108EDD12 0%, #fff 100%); } .footer-content .f-container { /*gap: var(--gap-3) var(--gap-2); justify-content: space-evenly; flex-wrap: wrap;*/ display: grid; justify-content: space-evenly; gap: var(--gap-2); grid-template-areas: "item-1 item-2 item-3 item-4" "item-5 item-5 item-5 item-4" } .footer-content .item-1 {grid-area:item-1} .footer-content .item-2 {grid-area:item-2} .footer-content .item-3 {grid-area:item-3} .footer-content .item-4 {grid-area:item-4} .footer-content .item-5 {grid-area:item-5} /*#item- {grid-area:item-}*/ #footer :is(.wrapper,.wrapper>.li) { line-height: 1.1; display: flex; flex-direction: column; gap: var(--gap-3); transition: gap 0.3s ease-out; } .body #footer .wrapper { gap: var(--gap-2); } #footer .wrapper * { line-height: inherit; } #footer .wrapper .title { font-size: 1.8rem; font-weight: 700; text-transform: uppercase; font-family: var(--font-2); line-height: inherit; margin:0; color: var(--color-gray); display: flex; gap: var(--gap); justify-content: space-between; align-items: center; position: relative; } /* =pp Dane ----------------------------*/ #footer .wrapper ul { display: flex; flex-direction: column; gap: 1.5rem; } #footer .wrapper li{ font-weight: 400; font-size: 1.6rem; line-height: inherit; color: var(--color-gray); vertical-align: middle; } #footer strong { /*font-weight: 600;*/ } #footer .wrapper li a:not(.btn){ position: relative; color: inherit; /*display: inline-block;*/ } #footer .wrapper ul:not(.ul-social) li a:not(.btn):hover{ padding-left: .3rem; /*margin-right: -.3rem;*/ right: -.3rem; } /*#footer .wrapper:not(.pp-contact) li:not(#pp-social-footer) a:not(.btn):before{ content: '\e5c8'; font-family: var(--font-mi); line-height: 1.5rem; font-size: 1.6rem; position: relative; top: 2px; margin-right: .5rem; color: var(--color-brown); }*/ #footer .wrapper .rte *{ line-height: 1.5; } /*#footer .item li a:before{*/ /*content: '\f111';*/ /* * */ /*content: "\e317"; /* -> */ /*content: '\f061';*/ /* */ /*font-family: 'Material Icons'; width: 1.8rem; color: #ffffff77; font-size: 1.4rem; display: inline-block; vertical-align: middle; line-height: 1; position: relative; top: 0px; text-align: right; transform: rotate(180deg); transition: all .15s ease-out; }*/ /*#footer .item:not(.item-4) li a:before{*/ /*#footer .block_content li.login a:before{ font-size: 1.6rem; color:#ffffffcc;*/ /*content: '\f105';*/ /*content: '\f061';*/ /*top: -4px;*/ /*}*/ #footer .block_content li.login a:before{ content: '\f13e'; } #footer .block_content li.signout a:before{ content: '\f023'; } #footer .wrapper li a:hover:before{ } #footer .wrapper li a:not(.btn):hover { color: var(--color-H); opacity: 1; } /* pp-footer-contact */ #pp-footer-contact strong { text-transform: uppercase; } #footer #pp-footer-contact .social-content { display: flex; gap: var(--gap); font-size: 2.7rem; } #pp-footer-contact.wrapper ul { gap: var(--gap); } #pp-footer-contact li a { display: flex; align-items: center; gap: var(--gap--2); } #pp-payment { display: flex; flex-direction: column; justify-content: center; gap: var(--gap); } /* 3 =================================== =pp footer-after */ .footer-checkout { padding: var(--gap-2) 0 0; gap: var(--gap); justify-content: center; display: flex; } /* 3 =================================== =pp footer-copyright */ #footer .footer-copyright{ /* border-top: 1px solid var(--color-B)*/ } .page-order #footer .footer-copyright{ } #footer .footer-copyright .f-container { min-height: 0; align-items: center; justify-content: center; padding: var(--gap-2_5) 0; opacity: .8; text-align: center; } #footer .footer-copyright *{ margin-bottom: 0; font-family: Verdana,Arial; font-size: 1.2rem; text-transform: uppercase; color: inherit; } #footer .footer-copyright a:hover{ text-decoration: underline; } /*============================================================ =pp Home ★★★ */ #home-wrapper { display: flex; flex-direction: column; /* gap: var(--gap-6);*/ } #home-wrapper>* { padding-top: var(--gap-6); padding-bottom: var(--gap-6); } .ppfeaturedproducts { background: var(--color-blue-1); } /*=============================== =pp pp-slider */ body #pp-slider { padding-top: 0; padding-bottom: var(--gap-3); background: var(--color-blue-1); } #pp-slider .slider-wrap { /*gap: var(--gap-3);*/ position: relative; } #pp-slider .slider-wrap>* { /*position: relative; flex:1;*/ } /* slider */ #pp-slider .pp-1 { /*max-width: 33%; flex:33%;*/ } #pp-slider .items { display: flex; justify-content: center; } #pp-slider .pp-1 .item { /*filter: grayscale(100%);*/ transition: all .6s ease-in; opacity: 1; perspective: 300rem; padding:2rem var(--carousel-gap) 3rem; } #pp-slider .pp-1 :is(.slick-current,.slick-active,.no-active) { filter: grayscale(0); opacity:1; transition: all 2s ease-out; } #pp-slider .pp-1 img { /*border-radius: 50%;*/ border-radius: var(--radius-4); box-shadow: var(--shadow-1); /*transform: rotateX(0deg) rotateY(0) translateX(6.6rem);*/ transform-style: preserve-3d; transition: all .6s ease-out; } #pp-slider .pp-1 :is(.slick-current,.slick-active,.no-active) img { /*transform: rotateX(0deg) rotateY(44deg) translateX(3rem);*/ } #pp-slider .slick-dots { padding: 0; } #pp-slider .pp-2 { position: absolute; bottom: 3rem; left: 0; right: 0; /*transform: translateY(-50%);*/ display: flex; justify-content: center; } #pp-slider #ppslider-typewriter { font-size: calc(2.9rem * var(--glob-20)); font-weight: 300; line-height: 1.5; /*box-shadow: var(--shadow-1);*/ filter: drop-shadow(0px 0px .5rem rgba(0,0,0,.09)) drop-shadow(0px 0px 1rem rgba(0,0,0,.04)); background: #000000bb; padding: var(--gap-2) var(--gap-2_5); border-radius: var(--radius-4); position: relative; color: #fff; z-index: 1; min-width: 18rem; max-width: 88rem; } #pp-slider #ppslider-typewriter:after { /* clip-path: polygon(0 0, 100% 25%, 100% 100%);*/ clip-path: polygon(0 100%, 100% 0, 75% 100%); position: absolute; bottom: calc(100% - 1px); left:50%; transform: translateX(-50%); content:''; width: 4rem; height: 4rem; background: #000000bb; } #pp-slider :is(#ppslider-typewriter strong,.Typewriter__cursor) { font-weight: 700; font-style: normal; } #pp-slider .Typewriter__cursor { } #pp-slider :is(.bot,.human) { } #pp-slider .bot { } #pp-slider .human { font-style: italic; } /*=============================== =pp pp-intro-1 */ #pp-intro-1 { background: url(../img/home/intro/intro-1-bg.webp) no-repeat center; background-size: contain; } #pp-intro-1 .intro-content { gap: var(--gap-7); flex-wrap: nowrap; display: flex; } #pp-intro-1 .intro-content>li { flex:2; } #pp-intro-1 .intro-content>li+li { flex:3; order:-1; } #pp-intro-1 .box-intro-1 { display: grid; grid-gap: var(--gap-2); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); /*grid-auto-flow:row;*/ width: 100%; background: url(../img/home/intro/intro-1-bg2.png) no-repeat center; } /* 512px */ @media (min-width: 32em) { #pp-intro-1 .box-intro-1 { grid-gap: var(--gap-3); grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); } } #pp-intro-1 .box-intro-1 li { background: #fff; border-radius: var(--radius-3); box-shadow: 2rem 2rem 6rem 0 #00000011; transform: skewY(-4deg); transition: .6s ease-out; display: flex; } #pp-intro-1 .box-intro-1 a { transform: skewY(4deg); flex-direction: column; gap: var(--gap-1_5); display: flex; width: 100%; height: 100%; padding: var(--gap-4) var(--gap-3); padding-left: var(--gap-2_5); justify-content: center; align-items: center; } #pp-intro-1 .box-intro-1 i { max-width: 8rem; /*fill: var(--color-blue2);*/ } #pp-intro-1 .box-intro-1 span { font-size: calc(2.7rem * var(--glob-20)); font-weight: 400; font-family: var(--font-2); text-align: center; line-height: 1.1; } #pp-intro-1 .box-intro-1 li:hover { background-color: var(--color-blue3); transition: .3s ease-out .1s; } #pp-intro-1 .box-intro-1 li:hover a { color: var(--color-blue4); fill: currentColor; } #pp-intro-1 .box-intro-1 li:hover svg { fill: var(--color-blue4); } /*------------------------------- =pp pp-2 */ #pp-intro-1 .pp-2 :is(h2,.subtitle) { margin-bottom: .6em; font-family: var(--font-2); font-size: calc(3rem * var(--glob-10)); line-height: 1; font-weight: 400; } #pp-intro-1 .pp-2 h2.heading { font-size: calc(4.4rem * var(--glob-10)); } #pp-intro-1 .pp-2 :is(.subtitle,.subtitle strong) { font-weight: 400; line-height: 1.2; color: var(--color-black4); } #pp-intro-1 .pp-2 .subtitle.h2{ font-size: calc(3.7rem * var(--glob-10)); font-weight: 400; } #pp-intro-1 .pp-2 p { /*font-family: var(--font-2);*/ font-size: calc(2rem * var(--glob-20)); color: var(--color-gray); } /*============================================= =pp pp-team */ #pp-team { background: var(--color-blue-1); } #pp-team ul { display: grid; grid-gap: var(--gap-5); grid-template-columns: repeat(auto-fit, minmax(38rem, 1fr)); /*grid-auto-flow:row;*/ width: 100%; } #pp-team li { display: flex; gap: var(--gap); box-shadow: 0 15px 25px -7px rgba(0,0,0,.09),0 -12px 10px -10px rgba(0,0,0,.04); border-radius: var(--radius-3); background: #fff; } #pp-team li .pp-1 { flex:2; } #pp-team li img { border-radius: var(--radius-3); aspect-ratio: 1/1.3; object-fit: cover; } #pp-team li .pp-2 { display: flex; align-items: center; flex:3; } #pp-team li .pp-2>* { display: flex; flex-direction: column; gap: var(--gap--2); padding: var(--gap-2); } #pp-team li .pp-2 p { line-height: 1.3; margin-bottom: 0; } #pp-team li .pp-2 .title { font-weight: 700; font-size: 1.8rem; } #pp-team li .pp-2 em { color: var(--color-blue); } #pp-team li .pp-2 .desc { padding-top: var(--gap-3); } /*=============================== =pp pp-worked */ #pp-worked .heading { margin-bottom: .3em; } #pp-worked .slick-track { align-items: stretch; height: 100%; } #pp-worked .item { padding: var(--gap); } #pp-worked .item-7 img { /*mix-blend-mode: darken;*/ background: var(--color-blue2); border-radius: var(--radius-2); padding: var(--gap); } #pp-worked .item a { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: var(--gap); height: 100%; min-height: 100%; color: var(--color-gray2); margin: auto; padding: var(--gap--2); overflow: hidden; opacity: .7; border-radius: var(--radius-3); } #pp-worked .item img { aspect-ratio: 2/1; object-fit: contain; object-position: center; } #pp-worked .item a:hover { box-shadow: var(--shadow-1); opacity: 1; } /*============================================= =pp pp-testimonials */ #pp-testimonials { background: var(--color-blue-1); } #pp-testimonials .f-content { max-width: 100%; gap: var(--gap-4); } #pp-testimonials .f-content>* { flex:50%; max-width: 50%; } /*pp-1*/ #pp-testimonials .pp-1 { background: url(../img/home/testimonials/bg.png) no-repeat 100% 100%; } #pp-testimonials .heading { justify-content: flex-end; margin-bottom: .5em; gap: var(--gap); } #pp-testimonials .heading>* { align-items: flex-end; } #pp-testimonials .pp-1 .desc { text-align: right; font-size: 2rem; color: var(--color-gray); font-style: italic; } /*pp-2*/ #pp-testimonials .pp-2 { display: flex; flex-direction: column; gap: var(--gap-2); } #pp-testimonials .item { padding: var(--gap-2); position: relative; } #pp-testimonials .item>* { display: flex; gap: var(--gap-2); box-shadow: 0 15px 25px -7px rgba(0,0,0,.09),0 -12px 10px -10px rgba(0,0,0,.04); border-radius: var(--radius-4); border-top-left-radius: 0; background: #fff; padding: var(--gap-4); max-width: 66rem; } #pp-testimonials .pp-21 { font-size: 6rem } #pp-testimonials .pp-22>p { font-size: 2rem; line-height: 1.4; } #pp-testimonials .pp-31 { display: flex; gap: var(--gap); align-items: center; } #pp-testimonials .pp-41 img { width: 8rem; border-radius: 50%; } #pp-testimonials .pp-42 p { margin:0; font-weight: 700; } #pp-testimonials .pp-42 p+p { font-weight: 400; color: var(--color-gray); } #pp-testimonials .slick-dots { justify-content: flex-start; padding-left: var(--gap-2); padding-top: 0; } /*============================================================ =pp desktop/mobile/responsive ★★★ ============================================================*/ /* 1599px */ @media (max-width: 99.9375em) { .header-content .f-container { gap: var(--gap-2); } #pp-header-contact { display: none; } } /* 0 ============================================================ =pp Heading ★★★ */ body :is(.heading,.heading-product,.page-header) { font-family: var(--font-2); font-size: calc(5.1rem * var(--glob-20)); font-weight: 300; line-height: 1.1; color: var(--color-black2); margin-bottom: .8em; display: flex; /*text-shadow: -2px -2px 2px #fff;*/ } body :is(.heading,.heading-product):has(.sub) { gap: var(--gap--2); flex-direction: column; } .body :is(.heading,.heading-product) .sub { font-size: .4em; font-weight: 400; font-style: italic; opacity: .5; } body :is(.heading,.heading-product)>* { flex-wrap: inherit; } body .heading:has([class^="txt-svg"]) { margin-bottom: .6em; } .body .heading .sub-title { color: var(--color-gray); font-size: calc(2.2rem * var(--glob-10)); font-style: italic; } .heading:has(.sub-title),.heading:has(.sub-title)>a { flex-direction: column; display: flex; /*align-items: center;*/ gap: var(--gap--2); } #ppportfolio-home .heading .sub-title { color: #ffffff; font-size: calc(3rem * var(--glob-20)); } /*.heading-page { display: flex; justify-content: center; padding-top: var(--gap-4); padding-bottom: var(--gap-4); } .heading-page >* { font-size: calc(3.6rem * var(--glob-30)); position: relative; line-height: 1; }*/ /*.heading-page >*:after, .heading-page >*:before { content: ''; position: absolute; top: 0; left: -39rem; width: 37.5rem; height: 100%; z-index: 1; background: url(../img/layout/cat_title_l.webp) no-repeat center; } .heading-page >*:after { left: auto; right: -39rem; background-image: url(../img/layout/cat_title_r.webp); }*/ /*.heading .pp:before, .heading-product .pp:before,*/ /*.heading:after, .heading-product:after { content:''; width: 100%; max-width: 39rem; height: .3rem; background: var(--color-green); position: absolute; bottom: -.5em; transform: translate(0, -50%) }*/ /*.heading .pp:after, .heading-product .pp:after { top: auto; bottom: -.15em; }*/ .heading-product>*, .cart-heading>*, .body .heading>*:not(nav){ margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-shadow: inherit; /*letter-spacing: .02em;*/ } :is(.heading,.heading-product,.heading>*,.heading-product>*):not(.sub-title):first-letter { text-decoration: solid underline var(--color-black2) .05em; text-decoration-color:inherit; text-underline-offset: .15em; /*text-underline-position: under;*/ } /* product */ body .heading-product { font-size:calc(4.3rem * var(--glob-20)); } .heading-center { justify-content: center; text-align: center; align-items:center; /*margin-bottom: 1.8em;*/ } .heading-center>a { justify-content:inherit; align-items:inherit; } /*carousel*/ .carousel :is(.heading,.heading-product) { margin-bottom: calc(.7em - var(--gap)); } /*.center-column .heading>*:not(nav):before { content: ''; width: 0; height: 0; border-top: .5rem solid transparent; border-bottom: .5rem solid transparent; border-left: .7rem solid var(--color-red2); position: absolute; left: 0; top: calc(50% - .5rem); }*/ .heading a{ color: inherit; } .heading a:hover{ color: var(--color-H); } /* 1 ============================================= =pp column */ .column .heading { margin-bottom: .6em; font-size:calc(3.3rem * var(--glob-10)); padding: 0; min-height: 0; font-weight: 400; } .column .block-content { display: flex; flex-direction: column; gap: var(--gap); } .column .view-all { display: flex; justify-content: flex-end; font-style: italic; } /* 1 ============================================================ =pp heading carousel */ .carousel .heading { margin-bottom: .3em; /* font-size: calc(3.3rem * var(--glob-10));*/ } /*-------------------------------------------------------------- =pp breadcrumb --------------------------------------------------------------*/ .breadcrumb { color: #ffffffcc; line-height: 1.1; font-size: calc(2.2rem * var(--glob-20)); font-weight:300; font-family: var(--font-2); } #breadcrumb-bg { background-image: url(../img/layout/br-bg6.webp); background-size: cover; /*background-color: #79eFc1;*/ background-repeat: repeat-y; background-attachment: scroll; background-position: center; animation: slidess 90s linear infinite; /*filter: grayscale(100%);*/ } #breadcrumb-bg .f-container { /*padding: var(--gap-3) 0;*/ flex-direction: column; align-items: center; gap: var(--gap-2); } #breadcrumb-bg .f-container h1 { font-size: calc(7rem * var(--glob-20)); color: #fff; } @keyframes slidess{ 0% { background-position: 0 118px; opacity:.5; filter:blur(3px); /* transform: translate3d(0, 0, 0);*/ } 1% { opacity:1; filter:blur(0px); /* transform: translate3d(0, -30px, 0);*/ } 99% { background-position: 0 1024px; opacity:1; filter:blur(0px); /* transform: translate3d(0, -30px, 0);*/ } 100% { background-position: 0 0; opacity:.5; filter:blur(3px); /* transform: translate3d(0, 0, 0);*/ } } .breadcrumb[data-depth="1"] { display: none; } .breadcrumb ol{ align-items: center; padding: var(--gap-3); /*background-color:#0A2A4777;*/ backdrop-filter:blur(10px); flex-wrap:wrap; justify-content:center; /*border-radius: var(--radius-3)*/ } .breadcrumb li{ position: relative; /* font-weight: 700;*/ } .breadcrumb li+li:before{ /*content: '\e315'; font-family: Material Icons;*/ /*content: '\e649';*/ content:"\e649"; font-family: var(--font-ti); /*margin: 0rem var(--gap--3) 0 0rem;*/ position: relative; top: 0rem; font-size: 2rem; /*color: var(--color-green);*/ font-weight: 700; } .breadcrumb li a { /*text-decoration: underline;*/ } .breadcrumb .btn-link:after { bottom: -.1em; } .breadcrumb li i { /*font-size: 1.6rem;*/ } .breadcrumb li:last-child { /* font-weight: 400;*/ } .breadcrumb li:last-child * { font-weight: inherit; } /*============================================================ =pp product-list ★★★ */ #main.pp-product-list { display: flex; flex-direction: column; gap: var(--gap-4); } #main.pp-product-list .heading { margin-bottom: 0; } /*============================================= =pp category */ #js-product-list-header .block-category { gap: var(--gap-3); display: flex; flex-direction: column; } #js-product-list-header { gap: var(--gap-2); display: flex; flex-direction: column; } /*=============================== =pp subcategory */ #subcategories { padding-bottom: var(--gap-2); } #subcategories .subcategory-heading{ font-size: 2.2rem; margin-bottom: var(--gap-1_5); font-weight:400; /*text-transform: uppercase;*/ } .ppGridSubcat{ grid-gap:var(--gap); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); grid-auto-flow: row; justify-content: center; display: grid; } /* 512px */ @media (min-width: 32em) { .ppGridSubcat{ grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } } /* 912px */ @media (min-width: 57em) { .ppGridSubcat{ grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-gap:var(--gap-2); } } @media (min-width: 1501px) { .ppGridSubcat{ grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } } .ppGridSubcat .item { } .ppGridSubcat .item>a{ display: flex; width: 100%; height: 100%; /*flex-direction: column;*/ position: relative; align-items: center; gap: var(--gap); transition: all .4s ease-out; /*text-align: center;*/ /*justify-content: center;*/ /*gap: var(--gap--1_5);*/ word-wrap: break-word; border:3px solid var(--color-gray5); /*padding-bottom: var(--gap--2);*/ background: #fff; border-radius:var(--radius-3); /*color: var(--color-blue);*/ font-family: var(--font-2); /*text-transform: uppercase;*/ font-weight: 400; line-height: 1.2; font-size: calc(1.8rem * var(--glob-10)); top: 0; padding: var(--gap--1_5) var(--gap); } .ppGridSubcat .item>a:hover { } .ppGridSubcat img{ border-radius:var(--radius-3); aspect-ratio: 1/1; object-fit: cover; } .ppGridSubcat .pp-1 { font-size: calc(3.9rem * var(--glob-10)); color: var(--color-gray3); position: relative; } .ppGridSubcat .pp-1 i { transform: rotate(0deg); display: flex; transition: all .4s ease-out; } .ppGridSubcat .pp-2 { font-size: inherit; font-weight: inherit; color: inherit; word-break:normal; padding: .5em .2em; } .ppGridSubcat .item>a:hover{ top: -.3rem; transition: all .2s ease-out .1s; /*border-color: var(--color-brown);*/ box-shadow: var(--shadow-1) } .ppGridSubcat .item>a:hover .pp-1 i { transform: rotate(90deg); color: var(--color-H); transition: all .2s ease-out .1s; } /* 1 ============================================= =pp js-product-list-top pp sortPagiBar */ .sortPagiBar { display: flex; gap: var(--gap-2); justify-content: space-between; align-items: center; flex-wrap: wrap; } .sortPagiBar :is(span, p) { font-size: 1.4rem; margin: 0; line-height: 1; } /* select-title */ .sortPagiBar .select-title{ border:1px solid var(--color-B); padding: .3rem .9rem .3rem 1.5rem; font-size: 1.4rem; color: inherit; background: #fff; text-transform: none; font-weight: 400; font-family: var(--font-1); border-radius: var(--radius-2); min-width: 18rem; justify-content: space-between; min-height: 4rem; } .sortPagiBar .select-title .mi { font-size: 2.6rem; line-height: 1.4rem; } /* sort-by-row */ .sortPagiBar .sort-by-row{ align-items: center; display: flex; gap: var(--gap-4); } /* 912px */ @media (min-width: 57em) { .sortPagiBar .sort-by-row{ flex-wrap: nowrap; white-space: nowrap; } } .sortPagiBar .sort-orders { display: flex; align-items: center; gap: var(--gap); } .products-sort-order + .total-products { margin-left: 2rem; } #js-product-list-bottom { padding-top: var(--gap-2); } /* 2 =============================== =pp product-display */ .product-display { align-items: center; justify-content: center; display: flex; gap: var(--gap); } .product-display a{ /*font-size: 4rem; width: .7em; height: 4rem; border-radius: 50%; line-height: .7; color: var(--color-grayE4); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; border:1px solid var(--color-green);*/ cursor: pointer; color: var(--color-gray2); font-size: 1.2rem; display: flex; align-items: center; gap: var(--gap--1_5); line-height: 1.1; border-bottom: 2px solid transparent; padding-bottom: .5rem; } .product-display a span { font-size: inherit; max-width: 6rem; line-height: inherit; color: inherit; } .product-display a i { font-size: 2.1em; color: inherit; } .product-display a:not(.selected):hover { color: var(--color-H); } /*.product-display a:after{ font-family: material icons; content: '\e8f0'; margin: 0 -.1rem; }*/ /*#ppList:after { content: '\e8ef'; margin-top: 1px; }*/ .product-display #ppList{ /* font-size: 3.7rem;*/ top: -.5px } .product-display .selected { /*stroke:currentColor;*/ cursor: default; color: var(--color-blue); border-color: currentColor; } /* 2 =============================== =pp pagination */ .pagination .page-list, .portfolio-pagination { display: flex; gap:var(--gap--3); } .pagination .page-list a, .portfolio-pagination a { padding: .3rem .2rem .2rem; min-width: 3.6rem; height: 3.6rem; font-size: 1.6rem; font-weight: 600; color: var(--color-black2); background: #fff; border: 1px solid var(--color-gray4); display: flex; line-height: inherit; justify-content: center; align-items: center; border-radius: 50%; } .pagination .page-list a:is(.prev,.next), .portfolio-pagination a:is(.prev,.next,.last,.first){ font-size: 2rem; /*width: .7em;*/ padding-left: 0; padding-right: 0; /*border: none;*/ /*max-width: 2.7rem;*/ } .pagination .page-list a:hover, .portfolio-pagination a:hover, .portfolio-pagination .current, .pagination .page-list .current a{ border-color: var(--color-blue); color: #fff; background: var(--color-blue); } #js-product-list .heading{ margin-bottom: 2rem; } #js-product-list .heading>*{ font-size: 2.6rem; } /* 0 ============================================================ =pp products ★★★ */ #products { display: flex; flex-direction: column; gap: var(--gap-3); align-items: stretch; } /* GLOBAL */ article.item .sr-only{ display: none; } /*------------------------------- =pp features -------------------------------*/ /*article.item .features-description{ max-width: 33rem; position: relative; } article.item .features-description li{ text-align: right; line-height: 1.1; padding-top: .1rem; padding-bottom: .1rem; } article.item .features-description li span{ flex:1; font-size: 1.3rem; color: var(--color-gray); } article.item .features-description li span+span{ text-align: left; } article.item .features-description .features-list-btn{ border:none; font-size: 1.2rem; font-weight: 600; padding: .3rem; } article.item .features-description .hidden{ position: absolute; top: 100%; left: -.3rem; right: -.3rem; background: #fff; border:3px solid #00000011; border-top: none; padding: .5rem .5rem 1.2rem; min-height: 5.1rem; transition: all .6s ease-out; } article.item>:hover .features-description .hidden{ border-color: var(--color-green); } article.item .features-description .features-list-btn:hover~ul{ z-index: 2; }*/ /*------------------------------- =pp product-flags -------------------------------*/ .product-flags{ pointer-events: none; position: absolute; top: -.9rem; left: 0; right: 0; z-index: 0; font-size: 1.2rem; display: flex; justify-content: center; text-align: center; /*z-index: -1;*/ } .carousel-1 .product-flags { } .product-flags li{ background: var(--color-brown); font-weight: 700; color: #fff; min-height: 2.4em; min-width: 10em; padding: .2em .8em; display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; text-transform: uppercase; font-size: inherit; position: relative; } /* 912px */ @media (min-width: 57em) { .product-flags{ font-size: 1.4rem; } .product-flags li{ min-height: 2.85em; } } .product-flags:has(li+li) li { min-width: 0; } .product-flags li span { } .product-flags li + li { /*margin-top: .3em;*/ } .product-flags.lg { } .product-flags.lg li { } .product-flags.sm { font-size: calc(1.5rem * var(--glob-20)); } .product-flags li:before, .product-flags li:after { position: absolute; top: 0; width: 0; height: 0; content: ''; } .product-flags li:before { left: -.6rem; border-bottom: .7rem solid #000; border-left: .7rem solid transparent; } .product-flags li:after { right: -.6rem; border-top: .7rem solid transparent; border-left: .7rem solid #000; } .product-flags span{ display: block; } .product-flags .new{ } .product-flags .discount { background-color: var(--color-blue); /*border-color: var(--color-blue);*/ } .product-flags .on-sale{ background-color: var(--color-black); /*border-color: var(--color-black);*/ /*color:#fff; opacity: .8; bottom: 0; top:auto; left:50%; transform:translate(-50%, 0); padding-left: 1.3em; padding-right: 1.3em;*/ } .product-flags .pack{ background-color: #000 } .product-flags .online-only { font-size: .6em; background: #999; border-color:#999; } .product-flags .online-only:before { content: "\E30A"; font-family: Material Icons; vertical-align: middle; margin:-.2rem .4rem -.2rem 0; font-size: 1.6rem; } .product-flags .out_of_stock{ background-color: var(--color-black); border-color: var(--color-black); opacity: .5; } /*------------------------------- =pp product-flags-list -------------------------------*/ .body .product-flags-list { display: flex; gap: var(--gap-2); } .product-flags-list li { font-size: 1.4rem; line-height: 1; display: flex; align-items: center; font-weight: 700; font-family: var(--font-2); } .product-flags-list li+li:before { content: ''; border-left: 1px solid var(--color-B); position: relative; left: calc(-1 * var(--gap)); display: inline-block; height: 1em; } .product-flags-list .discount { color: var(--color-red); font-style: italic; } .product-flags-list .new { color: var(--color-blue2); } /*------------------------------------- =pp variant-links -------------------------------------*/ .variant-links { } .variant-links .flex { gap: .6rem; justify-content: center; flex-wrap: wrap; } .variant-links .flex>* { width: 1em; height: 1em; font-size: 5rem; border:1px solid var(--color-B); /*border-radius: 50%;*/ } .variant-links .js-count { margin-top: var(--gap); display: block; } /*------------------------------- =pp product-thumbnail -------------------------------*/ .product-thumbnail { position: relative; } .item .thumbnail { position: relative; /*padding-bottom: 100%;*/ display: flex; align-items: center; justify-content: center; align-self:center; /*width: 100%; height: 100%;*/ /*background: var(--color-grayF6);*/ } :is(.item .thumbnail,.product-thumbs) picture { aspect-ratio: 1/1; display: flex; align-items: center; } .item .thumbnail img { object-fit: cover; mix-blend-mode: darken; margin:auto; transition: all .6s ease-out; border-radius:var(--radius-3); } .item .thumbnail img+img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; } .item .thumbnail:hover img { transition: all .3s ease-out .1s; } .item .thumbnail:hover img.two { opacity: 0; } .item .thumbnail:hover img+img{ opacity: 1; } /*------------------------------- =pp ppGrid -------------------------------*/ .ppGrid .v-L,.isMobile .ppGrid .product-hover{ display: none!important; } .ppGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); grid-gap:var(--gap-2) var(--gap-1_5); grid-auto-flow:row; /*background: #fff;*/ position: relative; z-index: 1; /*justify-items: start;*/ } /*.ppGrid>.product-banner-before:nth-child(-n+1), .ppGrid>.product-banner-after:nth-last-child(-n+1){ grid-column: span 2; }*/ /* 512px */ @media (min-width: 32em) { .ppGrid{ grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } } /* 768px */ @media (min-width: 48em) { .ppGrid{ grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); } } /* 912px */ @media (min-width: 57em) { .ppGrid{ grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr)); } } /* 1200px */ @media (min-width: 75em) { .ppGrid{ grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); grid-gap:var(--gap-2_5) var(--gap-2); } } /* 1600px */ @media (min-width: 100em) { .ppGrid{ grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); } } .ppGrid>*{ min-width: 0; min-height: 0; /*max-width: 32rem;*/ } .ppGrid .item>* { position: relative; transition: all .6s ease-out; display: flex; height: 100%; flex-direction: column; gap: var(--gap--2); /*max-width: 32.5rem;*/ top:0; background: #fff; border: 3px solid var(--color-gray5); border-radius:var(--radius-3); /*box-shadow: 0px 0px 0 1px #00000020;*/ /*background: var(--color-grayF6);*/ } /*.ppGrid .items:hover~.view-all { z-index: -1; }*/ .ppGrid .item>*:hover { box-shadow: var(--shadow-1); z-index: 5; transition: all .2s ease-out .1s; top:-.7rem; /*border-color: var(--color-brown)*/ } /* pp-1 */ .ppGrid .pp-1{ position: relative; z-index: 2; } /* pp-2 */ .ppGrid .pp-2{ display: flex; flex-direction: column; gap: var(--gap-1_5); } .ppGrid .pp-21{ /*text-align: center;*/ /*justify-content: space-between;*/ display: flex; flex-direction: column; /*flex-wrap: wrap;*/ min-height: 8rem; /*gap: var(--gap--2);*/ /*padding: 1.4rem 0 1.2rem;*/ /*align-items: flex-end;*/ /*min-height: 9.3rem;*/ } .ppGrid .brand { color: var(--color-gray3); font-size: 1.2rem; text-transform: uppercase; padding: .2rem 0; } .ppGrid .product-list-reviews { justify-content: center; } /*.ppGrid .ets-rv-comments-nb:before { content:'('; } .ppGrid .ets-rv-comments-nb:after { content:')'; }*/ /*.ppGrid .ets-rv-comments-nb + span { display: none; }*/ .ppGrid .product-title{ flex:100%; color: var(--color-black4); display: flex; align-items: center; justify-content: center; text-align: center; font-size: calc(2rem * var(--glob-10)); line-height: 1.1; font-weight: 500; margin-bottom: -.1em; padding: 0 .2em; min-height: 3.3em; /*text-transform: uppercase;*/ font-family: var(--font-2); } .ppGrid .product-title:hover{ color: var(--color-H); } .ppGrid .product-title *{ display: block; margin:-.2em 0; } .carousel-1.ppGrid .product-title{ } /* price */ .ppGrid .pp-22 { padding-bottom: var(--gap-1_5); } .ppGrid .product-price-and-shipping { display: flex; flex-wrap: wrap; gap: var(--gap--1_5) var(--gap); justify-content: center; align-items: center; font-size: calc(2rem * var(--glob-20)); } .ppGrid .product-price-and-shipping .price { font-weight: 500; } .ppGrid .product-price-and-shipping:has(.regular-price) .price { color: var(--color-red); } .ppGrid .product-price-and-shipping .discount-product { font-size: .8em; padding: .2em .4em; border:2px solid var(--color-red); color: var(--color-red); border-radius: var(--radius-2); font-weight: 500; } .ppGrid .product-price-and-shipping .regular-price { color: var(--color-gray); font-weight: 300; } .ppGrid .item>*:has(.regular-price) { border-color: var(--color-red); } .ppGrid span.discount-product-info span{ font-size: 1.6rem; font-weight: 600; color: #fff; background: var(--color-green); padding: .17em .4em .15em; border-radius: var(--radius-1); top: -.1em; } .ppGrid .pp-24 { display: flex; flex-wrap: wrap; padding: var(--gap) 0 0; gap: var(--gap--2); align-items: center; } /* 2 =================================== =pp ppGridMin ===================================== */ .ppGridMin .item>* { position: relative; transition: all .6s ease-out; display: flex; width: 100%; align-items: center; gap: var(--gap); top:0; background: #fff; border: 3px solid var(--color-gray5); /*box-shadow: var(--shadow-1);*/ border-radius:var(--radius-3); } .ppGridMin .item>*:hover { box-shadow: var(--shadow-1); z-index: 5; transition: all .2s ease-out .1s; top:-.7rem; } .ppGridMin .item .pp-1 { position: relative; max-width: 40%; flex:0 2 40%; } .ppGridMin .item .pp-2 { flex:1; display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap); } .ppGridMin .item .product-title { font-size: calc(1.8rem * var(--glob-10)); font-weight: 500; font-family: var(--font-2); line-height: 1.1; color: var(--color-gray); margin:0; } .ppGridMin .product-price-and-shipping { display: flex; flex-wrap: wrap; gap: var(--gap--2); align-items: center; } .ppGridMin .product-price-and-shipping span { font-size: calc(1.6rem * var(--glob-10)); font-weight: 300; } .ppGridMin .product-price-and-shipping .price { font-weight: 500; color: var(--color-black4); font-size: calc(1.8rem * var(--glob-10)); } /* column */ .column .ppGridMin .item>* { gap: var(--gap--2); } .column .ppGridMin .item .pp-2 { gap: var(--gap--1_5); padding: var(--gap--2); } .column .ppGridMin .product-title { font-size: calc(1.6rem * var(--glob-10)); } .column .ppGridMin .product-price-and-shipping span { font-size: calc(1.4rem * var(--glob-10)); } .column .ppGridMin .product-price-and-shipping .price { font-size: calc(1.6rem * var(--glob-10)); } .ppGridMin .item .view { text-align: right; } .column .ppGridMin .items { gap: var(--gap); display: flex; flex-direction: column; } /*------------------------------- =pp ppList -------------------------------*/ .ppList .v-G { display: none!important; } .ppList{ display: flex; gap:var(--gap-1_5); flex-wrap: wrap; } .ppList .item { flex:calc(50% - var(--gap)); max-width: calc(50% - var(--gap)); border: 3px solid #fff; background: #fff; border-radius: var(--radius-3); position: relative; top: 0; transition: all .6s ease-out; } .ppList .item:hover { box-shadow: var(--shadow-1); z-index: 5; transition: all .2s ease-out .1s; top:-.7rem; } .ppList .item:nth-child(even) { /*background: var(--color-gray-2f);*/ } .ppList .thumbnail-container{ display: flex; /*flex-wrap: wrap;*/ gap: var(--gap-2); } /* pp-1 */ .ppList .pp-1{ flex:0 0 35%; max-width: 21rem; /*align-self: self-start;*/ position: relative; display: flex; } .ppList .pp-1 img { height: auto; } .ppList .pp-1 .product-countdown { font-size: .8rem; } /* pp-2 */ .ppList .pp-2 { flex:1; display: flex; flex-direction: column; gap: var(--gap-1_5); padding: var(--gap-1_5) var(--gap-1_5) var(--gap-1_5) 0; } .ppList .pp-21 { display: flex; flex-direction: column; gap: var(--gap); justify-content: center; } .ppList .product-list-reviews { order: 3; } .ppList .pp-21 .product-title{ font-size: calc(2rem * var(--glob-10)); color: var(--color-black4); font-weight: 500; margin-bottom: 0; /*text-transform: uppercase;*/ } .ppList .pp-21 .desc p { font-size: 1.5rem; color: var(--color-gray2); line-height: 1.3; margin:0; } /* pp-22 */ .ppList .pp-22 { display: flex; justify-content: flex-end; flex-direction: column; gap: var(--gap); flex:1; } .ppList .product-flags-list { } .ppList .product-price-and-shipping { display: flex; flex-wrap: wrap; gap:var(--gap--2) var(--gap); justify-content: flex-end; font-size: 2rem; align-items: center; } .ppList .product-price-and-shipping .price { font-weight: 500; color: var(--color-black2); } .ppList .product-price-and-shipping:has(.regular-price) .price { color: var(--color-red); } .ppList .product-price-and-shipping .discount-product { font-size: .8em; padding: .2em .4em; border:2px solid var(--color-red); color: var(--color-red); border-radius: var(--radius-2); font-weight: 500; } .ppList .product-price-and-shipping .regular-price { color: var(--color-gray); font-weight: 300; font-size: .95em; } .ppList .pp-22 .ppOmnibus { flex:100%; margin-top: -.15em; text-align: right; } .ppList .pp-22 .ppOmnibus span { color:var(--color-gray2); font-size: 1.2rem; line-height: 1.5; } .ppList .pp-22 .view { display: flex; justify-content: flex-end; } /*-------------------------------------------------------------- =pp ppListMin --------------------------------------------------------------*/ /* carousel var */ .ppListMin { --gap:calc(3.6rem * var(--glob-20)); --gap--2:calc(var(--gap) / 2); } .ppListMin .heading { margin-bottom: .3rem; } .ppListMin .item>*{ position: relative; transition: all .6s ease-out; margin: auto; top:0; display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem; border:1px solid var(--color-blue); } /* 1200px */ @media (min-width: 75em) { .ppListMin .item>*{ gap: var(--gap-2); } } .ppListMin .item>*:hover{ /*box-shadow: 0px 0px 2rem #0000001A;*/ transition: all .1s ease-out .1s; /*top:-.6rem;*/ z-index: 2; background: #fff; } .ppListMin .thumbnail-container{ } /* pp-1 */ .ppListMin .pp-1 { flex:50%; max-width: 13.4rem; } /* pp-2 */ .ppListMin .pp-2 { flex:1; display: flex; flex-direction: column; gap: .8rem; } .ppListMin .brand { font-size: 1.2rem; color: ; font-weight: 500; text-transform: uppercase; } .ppListMin .product-title { font-size: 1.4rem; /*margin:-.1em 0;*/ line-height: 1.2; font-weight: 600; } .ppListMin .desc { margin-bottom: 0rem; line-height: 1.4; margin:-.25em 0; font-size: 1.5rem; } .ppListMin .product-price-and-shipping { padding-top: .4rem; } .ppListMin .product-price-and-shipping span{ font-size: 1.4rem; font-weight: 500; } .ppListMin .product-price-and-shipping .product-discount { opacity: .5; } .ppListMin .product-price-and-shipping .price { } .ppListMin .add-to-cart { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); padding: 0; width: 3.7rem; height: 3.7rem; font-size: 2.5rem; line-height: .8; border:none; color: #fff; background: var(--color-blue); border-radius: 50%; min-height: 0; } /* pp-2 */ .ppListMin .pp-2 { /*width: 50%; max-width: 27rem;*/ flex:50%; max-width: 30rem; padding-right: var(--gap--3); } /*-------------------------------------------------------------- =pp ppListColumn --------------------------------------------------------------*/ .ppListColumn .items { flex-direction: column; display: flex; gap:var(--gap-1_5); } .ppListColumn .product-flags li { font-size: calc(1.2rem* var(--glob-20)); top:0; } .ppListColumn .product-miniature { align-items: center; } .ppListColumn .pp-1 { max-width: 14rem; flex:1 0 40%; } .ppListColumn .pp-2 { flex:1; display: flex; flex-direction: column; gap: var(--gap); } .ppListColumn .product-title { font-size: calc(1.6rem* var(--glob-10)); text-transform: uppercase; line-height: 1.25; } .ppListColumn .product-price-and-shipping span { font-size: calc(2.2rem* var(--glob-10)); font-weight: 600; } .ppListColumn .view-all { padding-top: var(--gap-2); display: flex; justify-content: flex-end; } /*------------------------------------------------ =pp ppListSidebar ================================================*/ .ppListSidebar { display: flex; flex-direction: column; } .ppListSidebar .heading-sidebar { font-size: 1.8rem; } .ppListSidebar .thumbnail-container { display: flex; gap: var(--gap-1_5); } .ppListSidebar .thumbnail-container>* { flex:1; } .ppListSidebar .thumbnail-container .pp-1 { max-width: 12rem; } .ppListSidebar .product-title { font-size: 1.6rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; font-family: var(--font-2); color: var(--color-brown); margin-bottom: -.2em; } .ppListSidebar .pp-2 { display: flex; flex-direction: column; gap: var(--gap); } .ppListSidebar .add-to-cart { padding: .3em 2em .3em 2em; min-height: 3.2rem; /* text-transform: none;*/ font-weight: 600; font-family: var(--font-1); color: var(--color-black2); background: #fff; } .ppListSidebar .product-price-and-shipping span { font-family: var(--font-1); font-size: 1.7rem; font-weight: 600; } /*-------------------------------------------------------------- =pp brand ppGridBrand --------------------------------------------------------------*/ .ppGridBrand{ display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); grid-gap:1rem; grid-auto-flow:row; /*background: #fff;*/ position: relative; z-index: 2; justify-items: start; } @media (min-width: 57em) {/* 912px */ .ppGridBrand{ grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); /*grid-gap:1rem;*/ } } @media (min-width: 75em) {/* 1200px */ .ppGridBrand{ grid-gap: 2.4rem; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); } } .ppGridBrand .item{ position: relative; transition: all .6s ease-out; max-width: 32.5rem; margin: auto; top: 0; box-shadow: 0px 0px 0 .1rem var(--color-B); text-align: center; height: 100%; display: flex; flex-direction: column; } .ppGridBrand .item:hover { box-shadow: 0px 0px 2rem #0000001A; z-index: 2; transition: all .1s ease-out .1s; top:-.6rem; } .ppGridBrand .pp-infos>*, .ppGridBrand .pp-products>*{ margin: .5rem 1rem; } .ppGridBrand .pp-infos .name { line-height: 1.3; font-weight: 600; } .ppGridBrand .desc{ font-size: 1.3rem; line-height: 1.3; margin-bottom: 1rem; } .ppGridBrand .pp-products{ align-items: center; justify-content: flex-end; font-size: 1.4rem; flex:1; display: flex; flex-direction: column; padding-bottom: 2rem; } .product-list-header { margin-bottom: var(--gap-3); } .product-list-header>*+*{ margin-top: var(--gap-2); } /*============================================================ =pp carousel ★★★ */ .carousel { --carousel-gap: calc(1.2rem * var(--glob-50)); } .carousel.ppGrid { grid-gap: 0; display: block!important; } .carousel .items:not(.slick-initialized) { flex-wrap: nowrap; display: flex !important; align-items: center; visibility: visible; position: relative; } .carousel .slick-track { } /*.carousel:not(.ppslider):not(.ppbrand) .items{ margin:0 calc(-1 * var(--gap)); min-width: calc(100% + var(--gap-2)); max-width: calc(100% + var(--gap-2)); }*/ .carousel .items { /* overflow: hidden;*/ margin-left: calc(-1 * var(--carousel-gap)); margin-right: calc(-1 * var(--carousel-gap)); } .carousel .item { padding:var(--carousel-gap); } /* heading nav */ .carousel .heading .pp-nav { display: flex; align-items: center; gap: var(--gap); } .body .carousel .slick-arrow, .js-qv-product-images .slick-arrow, #product-modal .slick-arrow, .ets_image_list_popup .slick-arrow, .ets_rv_review_photos_wrap .slick-arrow { width: 1.5em; height: 1.5em; font-size: 4rem; display: flex; justify-content: center; align-items: center; padding: 0; background: none; border:1px solid var(--color-gray5); background: var(--color-white-2); border-radius: 50%; box-shadow: var(--shadow-1); color: var(--color-black); /*position: absolute;*/ top:50%; transform: translate(-50%, -50%); left: 1.2rem; } .body .carousel .slick-next { left: auto; right: 1.2rem; transform: translate(50%, -50%); } .carousel .heading .slick-arrow { position: relative; top: 0; transform: none; } .carousel:not(.ppslider) .slick-list{ /*overflow-y: visible;*/ } .body .carousel .slick-arrow:hover, .js-qv-product-images .slick-arrow:hover, #product-modal .slick-arrow:hover { color: var(--color-H); background: #fff; border-color: var(--color-gray5); } .body .carousel .slick-arrow:active, .js-qv-product-images .slick-arrow:active, #product-modal .slick-arrow:active { padding:0 .9rem 0 .2rem; } .body .carousel .slick-next:active, .js-qv-product-images .slick-next:active, #product-modal .slick-next:active { padding:0 .2rem 0 .9rem; } /*------------------------------- =pp dots */ .carousel .slick-dots { padding-top: var(--gap-2); } body .carousel .slick-dots button{ background: var(--color-gray2); border-color: var(--color-gray2); font-size: 1.2rem /*border-radius: .3rem;*/ } body .carousel .slick-dots :is( .slick-active button, button:hover) { background: var(--color-blue); border-color: var(--color-blue); } .carousel .view-all{ text-align: center; margin-top: -2.8rem; position: relative; } /*------------------------------- =pp menu vertical -------------------------------*/ /*.menu .sub>a:after{ content: 'trending_flat'; font-family: 'Material Icons'; font-size: 2.8rem; } .sub-menu{ position: absolute; top: 0; left: 100%; background: #fff; margin-left: 1rem; min-width: 100%; box-shadow:0 .3rem .6rem #00000022; visibility: hidden; opacity: 0; transition: all .6s ease-out; } .sub:hover>.sub-menu{ visibility: visible; opacity: 1; margin: 0; transition: all .3s ease-out; z-index: 2; } .menu[data-depth="0"] .current{ background: var(--color-gray); color: #fff; }*/ /* 0 */ /*.menu[data-depth="0"]>li>a{ background: var(--color-gray4); color: #000; margin:.2rem 0; min-height: 4rem; } .menu[data-depth="0"] li>a:hover { background: var(--color-gray); color: #fff; } */ .language_selector img{ width: 2.4rem; height: 1.7rem; } /* curr */ .header-nav .dropdown *{ } .header-nav .dropdown-menu{ } .header-nav .dropdown .expand-more:hover, .header-nav .dropdown-item:focus,.header-nav .dropdown-item:hover{ } /*-------------------------------------------------------------- =pp quickview --------------------------------------------------------------*/ .quickview .modal-dialog{ max-width: 90rem; } .quickview .modal-header h1{ font-size: 2.2rem; } .quickview .product-cover{ margin:0; } .quickview .images-container>.images-container{ } .quickview .mask{ margin-top: .6rem; } .quickview .js-qv-product-images{ margin: 0 -.6rem; height: auto; display: flex; flex-wrap: wrap; } .quickview .product-images .thumb-container img{ max-width: 7.1rem; margin:.6rem; } .quickview .js-arrows{ position: absolute; right: 0rem; bottom: -3rem; display: flex; width: 7rem; justify-content: space-between; } .quickview .images-container .js-arrows>*{ font-size: 2.6rem; width: 2.6rem; height: 2.6rem; border-width: 1px; margin: 0; } .quickview-right>*+*{ margin-top: var(--gap-3); } .quickview #product .product-prices{ margin-left: 0; } .quickview #product-description-short p{ font-size: 1.4rem; } .quickview .images-container .thumb-container{ } /*============================================================ =pp product =pp solo ★★★ ============================================================*/ /*[id*="product-box-"] { }*/ #product #main { display: flex; flex-direction: column; gap: var(--gap-5); } /*============================================= =pp product-box-primo */ #product-box-primo .product-container { gap: var(--gap-5); flex-direction: column; } /* column left */ #product-box-primo .product-left-column { flex:1; display: flex; flex-direction: column; gap: var(--gap-3); } /* column right */ #product-box-primo .product-right-column { flex:100%; max-width: 100%; } @media (min-width: 1074px) { #product-box-primo .product-container { flex-direction: row; align-items: flex-start; } #product-box-primo .product-right-column { flex:0 0 33.133%; max-width: 33.133%; } } /*=============================== =pp product-left-column */ #product-box-primo h1.heading { margin-bottom: 0; } .product-information { display: flex; flex-direction: column; gap: var(--gap-2); } /*------------------------------- =pp product-details */ #product-details *:not(.btn):not(.btn i) { line-height: 1.1; margin:0; font-size: calc(1.7rem * var(--glob-10)); color: var(--color-black4); } #product-details a:hover { color: var(--color-H); } #product-details>*:empty{ display:none !important; } #product-details { display: flex; flex-direction: column; gap: var(--gap-2); } /*pp-1*/ #product-details .pp-1{ display: inline-flex; gap:var(--gap-1_5) var(--gap-2); align-items: center; flex-wrap: wrap; } .product-information #product-details .pp-1 label { color: var(--color-gray); } #product-details .pp-1 span { font-weight: 500; } #product-details .pp-2 { display: flex; gap: var(--gap); flex-wrap: wrap; } #product-details .pp-2 .item { display: inline-flex; flex-direction: column; padding: 1.2rem 1.2rem .8rem; background: #fff; gap: var(--gap--2); flex-direction: column; align-items: center; } #product-details .pp-2 .item+.item { } #product-details .pp-2 .item label { font-size: 1.3rem; text-transform: uppercase; color: var(--color-gray); } #product-details .pp-2 .item span { font-size: calc(2.2rem * var(--glob-10)); font-family: var(--font-2); font-weight: 500; } .product-left-column .product-description { font-size: 1.8rem; } .product-left-column .product-description p:last-child { margin-bottom: 0; } /*------------------------------- =pp image */ #product-box-primo .images-container { display: flex; flex-direction: column; max-width: 100%; gap: var(--gap); } #product-box-primo .images-container picture { /*background-color: var(--color-blue-2);*/ /*background-color: #fff;*/ border-radius: var(--radius-3); display: flex; } #product-box-primo .images-container picture img { mix-blend-mode: multiply; border-radius: inherit; } /*ppProductImagesFor*/ #ppProductImagesFor .items { border-radius: var(--radius-3); box-shadow: var(--shadow-1); margin: 0; } #ppProductImagesFor .item { padding: 0; } .product-cover { position: relative; } .isMobile .product-cover .layer { opacity: 1; font-size: 2.7rem; right:.3em; bottom:.3em; pointer-events: none; } .isMobile.openZoom .product-cover .layer { display: none; } .quickview .product-cover .layer{ display: none; } .product-cover .layer { font-size: 5rem; display: flex; align-items: center; justify-content: center; position: absolute; right:.5em; bottom:.5em; width: 2em; height: 2em; border-radius: 50%; z-index: 2; background: #ffffffaa; backdrop-filter: blur(10px); text-align: center; cursor: pointer; opacity: 0; } .product-cover:hover .layer { opacity: 1; } .product-cover .layer .zoom-in { text-shadow: 1px 1px 1px #fff; } .product-cover .layer:hover { color: var(--color-H); } /* ppProductImagesNav */ #ppProductImagesNav .slick-track { align-items: stretch; } #ppProductImagesNav .items { margin:0; } /* 1 ================================================ =pp zoom mobile */ .isMobile.openZoom #ppProductImagesFor .slick-arrow { display: none !important; } .isMobile #ppProductImagesFor .js-qv-product-cover { transition: transform 0.3s ease-in-out; cursor: zoom-in; position: relative; transform: scale(1); } .isMobile #ppProductImagesFor .js-qv-product-cover.zoomed { transform: scale(2.2); cursor: zoom-out; z-index: 2; mix-blend-mode: normal; pointer-events: auto; } .isMobile :is(.slick-slider,.slick-list) { transition: transform 0.6s ease-in-out; overflow: hidden; } .isMobile.openZoom :is(.slick-slider,.slick-list,.slick-track) { overflow: visible !important; } .isMobile.openZoom #ppProductImagesFor .slick-track { pointer-events: none; } .isMobile.openZoom #ppProductImagesFor .slick-current { pointer-events: auto; } .isMobile.openZoom #ppProductImagesFor { z-index: 2; } .isMobile .js-images-container { z-index: 0; transition: transform 0.6s ease-in-out; } .isMobile.openZoom .js-images-container { z-index: 9999; } .product-thumbs img:not(.selected) { cursor: pointer; } .product-thumbs img { object-fit: cover; max-height:100% /*aspect-ratio: 1/1;*/ } .product-thumbs picture:has(img.selected) { box-shadow: inset 0 0 0 .3rem var(--color-blue2) } /* arrow */ #ppProductImagesFor .slick-arrow { top: 30rem; } #ppProductImagesFor .slick-arrow:hover { } /* =pp modal product ====================================*/ #product-modal { background: #fff; width: 100vw; height: 100vh; } #ppProductImagesModal .item { opacity: 0; transition: opacity .3s ease-out; } .in #ppProductImagesModal .item { opacity: 1; transition: opacity .3s ease-out .33s; } #product-modal picture { display: flex; width: 100%; border-radius: var(--radius-2); } #product-modal picture img { border-radius: inherit; } #product-modal .close{ } #product-modal .modal-dialog { max-width: 100%; margin: 0; } #product-modal .modal-content { border: none; box-shadow: none; background: var(--color-blue-1); min-height: 100vh; } #product-modal .f-content { } #product-modal .modal-body{ padding: 0; } #product-modal .flex-content { flex-direction: column; } #product-modal .modal-heading { padding-bottom: var(--gap-1_5); margin-bottom: var(--gap-2); border-bottom: 1px solid var(--color-B); } #product-modal .modal-heading * {; font-size: .9em; } @media (max-width: 47.9375em) {/* 767px */ #product-modal .modal-heading { font-size: 2rem; } } /* ppProductImagesModal */ #product-modal #ppProductImagesModal { position: relative; } #ppProductImagesModal .items { display: flex!important; align-items: center; justify-content: center; opacity: 1; min-height: 100vh; } /*.open #ppProductImagesModal .items { opacity: 1; }*/ #ppProductImagesModal .items img{ max-height: 100vh; /*max-width: 100vh;*/ margin: auto; /*mix-blend-mode: darken;*/ /*width: 100% !important;*/ } #ppProductImagesModal .items .zoom-active img{ cursor: move; } #ppProductImagesModal a.full { display: none; } #ppProductImagesModal .full.off { display: none; } #product-modal .full .off { display: flex; } #product-modal .full .on { display: none } #product-modal .full #ppProductImagesModal { flex: 100%; max-width: 100%; transition: all .2s ease-out; } #product-modal .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); left: var(--gap); } #product-modal .slick-next { left: auto; right: var(--gap); } #product-modal .containerZoom{background-position:50% 50%;position:relative;width:100%;overflow:hidden;margin:0; touch-action: pinch-zoom !important; } #product-modal .containerZoom img{transition:opacity .5s;display:block;cursor:zoom-in;} #product-modal .containerZoom:not(.active) {background: none !important; } #product-modal .containerZoom.active img{opacity:0;cursor: zoom-out;} @media (min-width: 57em) {/* 912px */ #product-modal #ppProductImagesModal { flex: 0 0 75%; border-right: 1px solid var(--color-B); max-width: 75%; min-width: 75%; /* padding: 0 var(--gap-2);*/ } #ppProductImagesModal .items { /* height: 100vh;*/ } #ppProductImagesModal a.full { width: 4rem; height: 5rem; display: flex; align-items: center; justify-content: center; position: absolute; top: 10rem; right: -1px; font-size: 3rem; border: 1px solid var(--color-B); border-right-color: #fff; border-radius: .5rem 0 0 .5rem; cursor: pointer; background: #fff; } } /* ppProductThumbnailsModal */ #product-modal #ppProductThumbnailsModal { padding: var(--gap-2); padding-top: 3rem; background: #fff; min-height: 100vh; } @media (min-width: 57em) {/* 912px */ #product-modal #ppProductThumbnailsModal { flex: 0 0 25%; max-width: 25%; } } #product-modal .full #ppProductThumbnailsModal { display: none; } #product-modal .full #ppProductThumbnailsModal>* { } #ppProductThumbnailsModal .items{ display: grid; grid-template-columns: repeat(auto-fit, minmax(9.8rem, 1fr)); grid-gap:var(--gap); grid-auto-flow:row; } #ppProductThumbnailsModal .item img { mix-blend-mode: multiply; object-fit: cover; aspect-ratio: 1 / 1; } #ppProductThumbnailsModal .item:has(.selected), #ppProductThumbnailsModal .item:hover{ box-shadow:inset 0 0 0 .3rem var(--color-blue2); cursor: pointer; } #product-modal .desc{ margin-top: var(--gap-3); opacity: .6; } @media (min-width: 57em) {/* 912px */ } @media (min-width: 57em) {/* 912px */ #product-modal .flex-content { flex-direction: row; } #product-modal #ppProductThumbnailsModal { padding-top: 5.2rem; } } /*=============================== =pp product-right-column */ #product-box-primo .product-right-column { display: flex; flex-direction: column; gap: var(--gap-2_5); } #product-box-primo .product-right-column>.content { /*padding: var(--gap-3); background: #fff; box-shadow: var(--shadow-1); border-radius: var(--radius-3);*/ display: flex; flex-direction: column; gap: var(--gap-2_5); } /*------------------------------- =pp product-countdown */ #product-box-primo .product-countdown { margin: calc(-1 * var(--gap-3)); margin-bottom: var(--gap-1_5); padding: var(--gap-3); border-radius: var(--radius-3) var(--radius-3) 0 0; } .product-countdown { font-family: var(--font-1); font-size: 1.2rem; background: var(--color-yellow); pointer-events: none; } .product-countdown .title { color: #000; font-weight: 700; line-height: 1.1; font-size: calc(1.6rem * var(--glob-10)); margin-top: -.3em; margin-bottom: .5em; text-align: right; } .ppProductCountdown { display: flex; gap: var(--gap--1_5); justify-content: flex-end; } .product-countdown .item-pc { display: flex; gap: var(--gap--3); flex-direction: column; background: #fff; min-width: 5.4em; min-height: 6.5em; align-items: center; justify-content: center; padding: .3rem; box-shadow: var(--shadow-2); border-top: 2px solid #000; border-radius: 0 0 var(--radius-3) 0; } .product-countdown .txt { font-size: 1.3rem; text-transform: uppercase; font-family: var(--font-2); } /* 511px */ @media (max-width: 31.9375em) { .ppProductCountdown { gap: var(--gap--4); } .product-countdown .txt { font-size: 1.1rem; } } .product-countdown .number { font-size: 3em; font-weight: 700; font-family: var(--font-3); } .product-countdown .item-pc:last-child .number { color: var(--color-red); } /* product-list */ .products .product-countdown { position: absolute; top: 0; left: 0; right: 0; padding: 1.6rem .8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(1rem * var(--glob-30)); background: var(--color-yellow-1); } .products .product-countdown .title { text-align: center; } .products .product-countdown .item-pc { border-radius: 0 0 var(--radius-2) 0; } /*------------------------------- =pp product-price solo */ .product-right-column .product-prices { display: flex; gap: var(--gap); flex-direction: column; } .product-right-column :is(.current-price,.product-price) { display: flex; gap: var(--gap); } .product-right-column .product-price { align-items: center; flex-wrap: wrap; justify-content: flex-end; justify-content: right; } /* current-price */ .product-right-column .current-price { gap: var(--gap--2); margin-left: var(--gap-2); order:3; } .product-right-column .current-price-value { font-size: 3.3rem; font-weight: 600; } .has-discount .current-price-value { color: var(--color-red); } .product-right-column .tax-shipping-delivery-label { font-size: 1.4rem; color: var(--color-gray2); order:-1; } /* product-discount */ .product-right-column .product-discount { font-size: 2.7rem; color: var(--color-gray3); font-weight: 300; } .product-right-column .product-price .discount { font-size: 1.6rem; padding: .7rem 1rem; border: 2px solid var(--color-red); color: var(--color-red); border-radius: var(--radius-2); font-weight: 500; } /* form */ #add-to-cart-or-refresh { display: flex; flex-direction: column; gap: var(--gap-2_5); } /*------------------------------- =pp product-variants */ .product-variants, .product-variants-item { display: flex; flex-direction: column; gap: var(--gap-2_5); } .product-variants-item { gap: var(--gap); align-items: flex-end; } .product-variants-item .control-label{ font-weight: 500; text-align: right; } /* select */ .product-variants-item select{ height: 4rem; } /* color */ .product-variants-item .in-radio { display: flex; flex-wrap: wrap; gap: var(--gap); } .product-variants-item .in-radio li { } .product-variants-item .in-radio label { position: relative; display: block; cursor: pointer; } .product-variants-item .group-color .color { min-width: 8rem; height: 8rem; /*border-radius: 50%;*/ } /* radio */ .product-variants-item .group-radio { display: flex; gap: var(--gap); } .product-variants-item .group-radio li label { display: flex; align-items: center; justify-content: center; min-width: 5.6rem; height: 3.6rem; font-size: 1.6rem; /*text-transform: uppercase;*/ font-weight: 500; padding: .3em; padding: .2rem 1.4rem .2rem; border:1px solid var(--color-B); border-radius: var(--radius-2); position: relative; cursor: pointer; } .product-variants-item .group-radio label:has(input[type=radio]:checked) { border-color: var(--color-blue); background: var(--color-blue); color: #fff; } .product-variants-item .group-radio input[type=radio]:checked+span:after{ } .product-variants-item .group-radio label:has(input[type=radio]:checked):after{ content: '\e876'; font-family: Material Icons; background: var(--color-blue); display: flex; justify-content: center; align-items: center; color: #fff; position: absolute; top: 4px; right: 4px; font-size: 1.2rem; transform: translate(50%, -50%); border: 2px solid #fff; border-radius: 50%; width: 1.9rem; height: 1.9rem; } /* radio two */ .product-variants-item:has(.switch-radio) { flex-direction: row; justify-content: flex-end; align-items: center; } /* 3 ======================= =pp product-demo */ #product-demo { display: flex; justify-content: flex-end; gap: var(--gap-1_5); flex-wrap: wrap; } #product-demo>* { display: flex; flex-direction: column; gap: var(--gap); } #product-demo>*+* { margin-left: auto; text-align: right; } #product-demo em { color: var(--color-gray2); } /* 1 ================================================ =pp ppOmnibus */ .ppOmniprice { color: var(--color-gray2); font-size: 1.4rem; line-height: 1.2; } .ppOmniprice * { color: inherit !important; font-size: inherit !important; line-height: inherit !important; display: inline-block; } #product-box-primo .ppOmniprice { text-align: right; } .ppGrid .ppOmniprice { flex:100%; text-align: center; font-size: 1.3rem; } .products .ppOmniprice { padding: 0 .5rem; } .ppGridMin .ppOmniprice { font-size: 1.3rem; } .column .ppGridMin .ppOmniprice { /*font-size: 1.2rem;*/ padding: 0; } /*=============================== =pp product-add-to-cart */ .product-add-to-cart p { line-height: 1; margin:0; } .product-add-to-cart { display: flex; gap: var(--gap); flex-direction: column; padding-top: var(--gap); } /* product-quantity */ .product-add-to-cart .product-quantity{ align-items: center; display: flex; gap: var(--gap-1_5); flex-wrap: wrap; } .product-quantity input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } .product-quantity .input-group { position: relative; border:1px solid var(--color-B); border-radius: 2.4rem; padding: 0 3rem; } .product-add-to-cart .product-quantity .bootstrap-touchspin, .product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical { display: block; } #quantity_wanted{ width: 4.8rem; height: 4.8rem; text-align: center; padding: .5rem; position: relative; font-size: 2.2rem; font-weight: 600; color: var(--color-black); background: #fff; border: none; } .product-add-to-cart .input-group-btn-vertical button{ width: 3rem; height: 3rem; background:#fff; color: var(--color-gray3); font-size:2.2rem; line-height: 1; border:none; position: absolute; margin: 0; padding-top: 2px; top: 50%; border-radius: 50%; transform: translateY(-50%); } .product-add-to-cart .input-group-btn-vertical .bootstrap-touchspin-up{ right: 0; } .product-add-to-cart .input-group-btn-vertical .bootstrap-touchspin-down{ left: 0; } .product-add-to-cart .input-group-btn-vertical button:hover{ background: var(--color-black); color: #fff; border-color: var(--color-black); } .product-quantity .add{ flex:1; } .product-add-to-cart .product-quantity .qty+.add{ } #product .product-quantity .add button { min-height: 4.8rem; /*background-image: url(../img/icon/addtocart.png);*/ /*background-position: .6rem center;*/ /*background-repeat: no-repeat;*/ /* text-transform: uppercase;*/ font-size: 1.5rem; line-height: 1; font-weight: 500; white-space: nowrap; text-align: left; align-items: center; justify-content: center; flex-flow: row nowrap; width: 100%; background: var(--color-blue); border-color: var(--color-blue); padding: .4em .8em .3em; } #product .product-quantity .add button:hover { background-color: var(--color-black); /*color: #fff;*/ border-color: var(--color-black); } #product .product-quantity .add button i{ font-size: 2.4rem; } /*=============================== =pp product-information */ #product-information { display: flex; flex-direction: column; gap: var(--gap); font-family: var(--font-3); /*font-style: italic;*/ } #product-information li { display: flex; align-items: center; gap: var(--gap--1_5); line-height: 1.4; } #product-information li>i { font-size: 2rem; color: var(--color-blue2); } /*=============================== =pp pp-product-bottom */ #pp-product-bottom { /*border:1px solid var(--color-B); border-radius: var(--radius-3); padding: var(--gap-3);*/ display: flex; flex-direction: column; gap: var(--gap-2); background: var(--color-white-2); } #pp-product-bottom .title { line-height: 1.2; margin-bottom: 0; font-weight: 700; font-family: var(--font-2); font-size: 2rem } #pp-product-bottom ul { display: flex; flex-direction: column; /*gap: var(--gap-2);*/ } #pp-product-bottom li { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 3em; padding: .5rem 1rem; gap: var(--gap-2); } #pp-product-bottom li span { font-weight: 600; } #pp-product-bottom li+li { border-top: 1px dashed var(--color-B); } #pp-product-bottom li:nth-of-type(odd) { background: var(--color-blue-1); } /*============================================================ =pp product-box-secondo ============================================================*/ /*============================================================ =pp product-box-terzo ============================================================*/ /*------------------------------------------------ =pp Tabs ================================================*/ .tabs { flex-direction: column; display: flex; /* align-items: flex-start;*/ } .nav-tabs { display: flex; flex-wrap: wrap; justify-content: center; position: relative; gap: 0; } .tabs .nav-item+.nav-item { margin-left: -1px; } .nav-tabs a { font-size:calc(2.2rem * var(--glob-10)); text-transform: uppercase; font-weight: 700; font-family: var(--font-2); /*color: var(--color-black);*/ /*border-bottom-width: 2px;*/ border:1px solid var(--color-B); padding:1em 1.4em; display: flex; position: relative; z-index: 2; transition: all .6s ease-out; border-radius: var(--radius-3) var(--radius-3) 0 0; opacity: .5; background: #fff; } .nav-tabs .active { border-color: var(--color-B); border-bottom-color: #fff; transition: all .3s ease-out; background: #fff; z-index: 2; opacity: 1; } .tabs .nav-item a:hover { color: var(--color-H); } /* tab-content */ .tabs .tab-content { background: #fff; width: 100%; padding: calc(var(--gap-3) * var(--glob-50)); border:1px solid var(--color-B); border-radius: var(--radius-3); margin-top: -1px; position: relative; } /* 3 =================================== =pp product-description-3 */ #description-3 .product-description-3 { font-family: monospace, serif; } /* =pp product-attachments ====================================*/ #attachments .heading { margin-bottom: .6em; } #attachments .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); grid-gap:var(--gap-2); grid-auto-flow:row; /*background: #fff;*/ position: relative; z-index: 1; /*justify-items: start;*/ } #attachments .item { display: flex; flex-direction: column; gap: var(--gap); } #attachments p { line-height: 1; margin-bottom: 0; } #attachments :is(.desc,.size) { color: var(--color-gray2); font-style: italic; line-height: 1.3; } #attachments .name a { display: flex; gap: var(--gap); align-items: center; } #attachments .name i { font-size: 3rem; } /*-------------------------------------------------------------- =pp product-box-quarto --------------------------------------------------------------*/ #product-box-quarto .f-container { gap: var(--gap-3); flex-direction: column; } /*-------------------------------------------------------------- =pp product-box-cinque quinto --------------------------------------------------------------*/ #product-box-cinque { } /*-------------------------------------------------------------- =pp product-box-sesto --------------------------------------------------------------*/ #product-box-sesto .f-container { flex-direction: column; gap: var(--gap-3); } /* 0 ============================================================ =pp contact page contact ★★★ */ #contact #columns { --column: 33%; --gap-columns: var(--gap-7); } #contact #left-column { order:-1; } /* column */ #pp-contact-column .items { display: flex; flex-direction: column; gap: var(--gap-3); } #pp-contact-column .email { display: flex; gap: var(--gap); align-items: center; font-size: 2rem; } #pp-contact-column .email i { font-size: 2.7rem; } #contact-alert-bank { margin:0; padding: var(--gap-2); /*border-radius: var(--radius-3);*/ gap: var(--gap-2); font-size: 1.8rem; background: #fff; color: inherit; } #contact-alert-bank .h4 { font-weight: 300; } #contact-alert-bank>div { width: 100%; } #contact-alert-bank .heading { justify-content: space-between; align-items: center; } #contact-alert-bank i { font-size: 4.0rem; color: var(--color-orange); } /* center */ #contact-content :is(.form-fields,.form-footer) { /* margin-left: 0;*/ max-width: 100%; } #contact-content { display: flex; flex-direction: column; gap: var(--gap-5); } /* desc */ #contact-content .desc { display: flex; gap: var(--gap-3); align-items: center; } #contact-content .desc p { font-family: var(--font-2); font-size: calc(2.4rem * var(--glob-20)); line-height: 1.3; margin-bottom: 0; } #contact-content .desc .pp-1 { flex:0 0 22rem; } #contact-content .desc .pp-1 img { border-radius: var(--radius-3); } #contact-content .desc .pp-2 { flex:1; } /* links */ #contact-content .links { display: flex; gap: var(--gap-2); } #contact-content .links li { flex:1; } #contact-content .links a { display: flex; gap: var(--gap-2); align-items: center; background: var(--color-blue-1); padding: var(--gap-2); border-radius: var(--radius-2); border:1px solid var(--color-blue4); line-height: 1.1; } #contact-content .links i { font-size: 4rem; } #contact-content .links a>span { font-size: calc(2.7rem * var(--glob-20)); display: flex; flex-direction: column; gap: var(--gap--2); font-family: var(--font-2); } #contact-content .links span+span { font-size: 1.5rem; font-family: var(--font-1); font-style: italic; opacity: .7; } #contact-content .links a:hover { background: var(--color-blue3); color: #fff; } #ppContactSelectDescription { margin: -.5em 0 0; } /* form */ #contact-content .heading { font-size: 3rem; } #contact-content textarea:not(:placeholder-shown) { border-color: var(--color-green); box-shadow: inset 0 0 0 1px var(--color-green); } /*-------------------------------------------------------------- =pp page my-account --------------------------------------------------------------*/ .page-my-account #content .links{ display: grid; grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr)); grid-gap:var(--gap); grid-auto-flow:row; justify-content: center; width: 100%; } .page-my-account #content .links>*{ max-width: 100%; width: 100%; border:1px solid var(--color-B); padding: var(--gap-2); border-radius: var(--radius-3); background: var(--color-blue-1); box-shadow:var(--shadow-1) } .page-my-account #content .links>*:hover{ border-color: #fff; background: var(--color-blue3); color: #fff; } .page-my-account #content .links .link-item{ display: flex; width: 100%; height: 100%; align-items: center; min-height: 5rem; font-size: 2rem; font-family: var(--font-1); gap: var(--gap-1_5); } .page-my-account #content .links .link-item i{ font-size: 4rem; } .page-my-account #content .links .link-item i+i{ margin-left: calc(-1 * var(--gap)); } @media (min-width: 57em) {/* 912px */ .page-my-account #content .links>*{ } .page-my-account #content .links{ grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr)); grid-gap:var(--gap-2) } .page-my-account #content .links .link-item{ min-height: 10rem; font-size: 2.4rem; } .page-my-account #content .links .link-item i{ font-size: 5rem; } } /* 0 ============================================================ =pp history page ★★★ */ .order-message-form>form { display: flex; flex-direction: column; gap: var(--gap-2); } .order-message-form header { text-align: center; } .order-message-form header h3 { margin-bottom: var(--gap); } .order-message-form .form-footer { margin-top:var(--gap); } .label.bright{ color: #fff; padding:.2em .5em; border-radius: 1rem 0; opacity: .7; } #history .order-actions { font-style: italic; } #history .order-actions a+a { margin-left: 1.6rem; position: relative; } #history .order-actions a+a:before{ content: '|'; font-style: normal; position: absolute; left: -1.1rem; top: 0; } #history .order-actions a+a:after{ content: '\e8e4'; font-family: 'Material Icons'; font-style: normal; font-size: 2.4rem; vertical-align: middle; margin-left: .2rem; } /*-------------------------------------------------------------- =pp page order-detail --------------------------------------------------------------*/ /*-------------------------------------------------------------- =pp page authentication --------------------------------------------------------------*/ #authentication .no-account{ text-align: center; } /*-------------------------------------------------------------- =pp page addresses pp addresses --------------------------------------------------------------*/ #addresses #notifications, #addresses .addresses-footer { flex: 100%; } .customer-address { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); grid-gap:var(--gap-3); grid-auto-flow:row; } article.address { border: 1px solid var(--color-B2); padding: var(--gap-2) var(--gap-2) var(--gap-1_5); display: flex; flex-direction: column; height: 100%; gap: var(--gap); border-radius: var(--radius-3); } .address { line-height: 1.4; text-transform: none; font-weight: 400; font-size: 1.6rem; } .address-body { } .address h4,.address-alias.h4{ font-weight: 700; line-height: 1.1; font-size: 1.7rem; margin-bottom: .6em; display: block; } .address-body address { } .address hr { margin-top: .6em; margin-bottom: .6em; } .address-footer { margin-top: auto; } .addresses-footer { display: flex; padding-top: var(--gap-3); } /*-------------------------------------------------------------- =pp page-footer --------------------------------------------------------------*/ .page-footer,.wishlist-footer-links { margin-top: var(--gap-6); display: flex; flex-wrap: wrap; gap: var(--gap-2); align-items: center; justify-content: center; } .page-footer:not(:has(>*)) { display: none; } :is(.page-footer,.wishlist-footer-links) a { display: inline-flex; gap: var(--gap--2); align-items: inherit; } :is(.page-footer,.wishlist-footer-links) i { font-size: calc(2.4rem * var(--glob-20)); } /* 0 ============================================================ =pp cart ★★★ */ /* 1 ============================================= =pp cart-grid */ .cart-grid { margin: 0; display: flex; gap: var(--gap-5); flex-direction: column; } .cart-grid .col-xs-4.hidden-md-up { display: none; } @media (max-width: 1400px) { body .product-line-grid-right .row { flex-direction: column; gap: var(--gap-1_5); height: auto; } body .product-line-grid-right .qty { flex:auto; } .cart-grid { gap: var(--gap-2); } body .product-line-grid-right { flex:1; max-width: 100%; } .cart-grid-right { max-width: 36rem; } body .product-line-grid-left { flex:10rem; max-width: 10rem; } } /* 912px */ @media (min-width: 57em) { .cart-grid { flex-direction: row; } .cart-grid>* { flex:1; width: 100%; } .cart-grid-right { max-width: 50rem; } #checkout .cart-grid-right { max-width: 36rem; } #checkout .cart-grid-body { max-width: calc(100% - 36rem - var(--gap-5)); } } /* 911px */ @media (max-width: 56.9375em) { .cart-grid>* { max-width: 100%; } .cart-grid { gap: var(--gap-4); } .cart-grid-right { max-width: 50rem; margin:auto; width: 100%; } } /* 511px */ @media (max-width: 31.9375em) { body .product-line-grid-left { flex:8rem; max-width: 8rem; } .product-line-grid { flex-wrap: wrap; } body .product-line-grid-right { width: 100%; flex:100%; } body .product-line-grid-right .row { flex-direction: row; } } /* 2 =============================== =pp cart-grid-body */ .cart-grid-body { flex:1; } .cart-grid-body,.cart-items { display: flex; flex-direction: column; gap: var(--gap-1_5); } .cart-grid-body { gap: var(--gap-2_5); } /* 3 ------------------------------- =pp cart-items */ .cart-items .cart-item { border-bottom: 1px solid var(--color-gray3); padding-bottom: var(--gap-1_5); } .product-line-grid { display: flex; gap: var(--gap-2); } /* product-line-grid-left */ .product-line-grid-left { flex:0 0 12rem; max-width: 12rem; } /* product-line-grid-body */ .product-line-grid-body { flex:1; max-width: 100%; display: flex; flex-direction: column; gap: var(--gap--2); } .product-line-grid-body .product-line-info a { font-weight: 600; font-family: var(--font-2); font-size: 1.8rem; font-style: normal; } .product-line-grid-body .product-line-info:has(a) { font-style: normal; margin-bottom: .2em; } .product-line-grid-body .product-price { font-weight: 700; font-size: 1.6rem; font-family: var(--font-1); display: flex; gap: var(--gap); } .product-line-grid-body .product-price .discount { color: var(--color-red); font-weight: 700; } .product-line-grid-body .regular-price { font-weight: 400; color: var(--color-gray); } .product-line-grid-body .product-line-info:has(.label,.value) { font-style: italic; font-size: 1.4rem; } /* product-line-grid-right */ .product-line-grid-right { max-width: 38%; flex:38%; } .product-line-grid-right .row { height: 100%; align-items: center; flex-wrap: nowrap; justify-content: flex-end; } .product-line-grid-right .row>* { flex:1; max-width: 100%; } .product-line-grid-right .qty { flex:12rem; max-width: 12rem; } .product-line-grid-right .price { font-size: 1.8rem; white-space: nowrap; } .product-line-grid-right .row>div:has(.remove-from-cart) { flex:0 0 4.4rem; min-width: 4.4rem; font-size: 1.8rem; } /* 2 =============================== =pp cart-grid-right */ .cart-grid-right { /* border:1px solid var(--color-B); padding: var(--gap-3);*/ } .cart-grid-right :is(#js-checkout-summary,#js-checkout-summary>.card-block,.cart-detailed-totals,.cart-summary,.cart-detailed-subtotals,.cart-summary-subtotals-container,.cart-summary-totals ) { display: flex; flex-direction: column; gap: var(--gap-3); } #main-wrapper .cart-grid-right :is(.cart-summary-totals,.cart-summary-subtotals-container,.cart-detailed-subtotals) { gap: var(--gap); } .cart-grid-right .cart-summary-line { padding: 0; display: flex; justify-content: space-between; gap: var(--gap) var(--gap); flex-wrap: wrap; } .cart-grid-right .cart-summary-line+.cart-summary-line { border-top:1px solid var(--color-B); padding-top: var(--gap); } .cart-grid-right .cart-summary-line .value { font-weight: 700; } #cart-subtotal-shipping div { width: 100%; } #cart-subtotal-shipping div:has(.value:empty) { display: none; } .cart-grid-right .cart-detailed-actions { padding-top: var(--gap); } .cart-grid-right .cart-detailed-actions .btn { font-size: 1.8rem; width: 100%; } /*------------------------------- =pp voucher -------------------------------*/ .block-promo .promo-code .alert-danger, .block-promo .promo-code-button.with-discounts{ display: none; } .cart-voucher p{ line-height: 1; margin-bottom: 1rem; } .block-promo .promo-code-button.cancel-promo[aria-expanded=true]{ display: inline-block; cursor: pointer; } /*.block-promo .cart-voucher>*+*, #js-checkout-summary>*+* { margin-top: 1.2rem; }*/ .cart-voucher .promo-highlighted { margin-bottom: -.8rem; } .cart-voucher .cart-summary-line { margin-left: 0; margin-right: 0; padding: .5rem .5rem .5rem 0rem; /*background: var(--color-gray5);*/ border: 3px dashed var(--color-red); } .promo-name .cart-summary-line { border-color: var(--color-gray2); flex-wrap: nowrap; } .promo-discounts .label{ width: 100%; } .cart-voucher .label{ font-size: 1.5rem; text-align: center; display: block; } .cart-voucher .label .code{ cursor: pointer; font-weight: 400; padding: .5rem 1rem .4rem; display: inline-block; color: #fff; background: var(--color-black); border-radius: var(--radius-2); } .promo-discounts .label .code:hover{ background: var(--color-H); } .cart-voucher .cart-summary-line i { font-size: 2.2rem; } .cart-voucher .cart-summary-line .row { align-items: center; } .cart-voucher .promo-code-button { text-align: center; } .cart-voucher .promo-code-button.display-promo { margin-top: 1.8rem; margin-bottom: 1.5rem; } .cart-voucher .promo-code-button i{ font-size: 2rem; line-height: 1.5rem; } .cart-voucher .promo-code { background: var(--color-gray5); padding: 1.5rem; } #promo-code form { display: flex; justify-content: center; } #promo-code .promo-input { height: 4rem; flex: 1; min-width: 0; } #promo-code form button { height: 4rem; min-height: 0; padding: .5em 1em; margin-left: 1.2rem; } #promo-code .collapse-button-box { padding-top: 1.5rem; text-align: center; text-transform: uppercase; } .promo-discounts li{ justify-content: center; } .promo-discounts li + li { margin-top: 1rem; } #promo-code .alert{ text-align: left; } /* 0 ============================================================ =pp checkout ★★★ */ #checkout-personal-information-step .nav-item:has(.nav-separator) { display: none; } #header .header-checkout-content .f-container { justify-content: space-between; min-height: 6rem; align-items: center; } #checkout .cart-grid-body { background: #fff; } #checkout .cart-grid-right { order:-1; background: var(--color-blue-1); /*border-width: 0 1px 0 0;*/ } #checkout .cart-summary-products { display: flex; flex-direction: column; align-items: stretch; gap: var(--gap); } #checkout .cart-summary-products p { margin:0; line-height: 1; } #cart-summary-product-list .media-list { width: 100%; margin:0; } /* 0 ============================================================ =pp order-confirmation page ★★★ */ :is(#order-confirmation) #main, :is(#order-detail,#history) #content { display: flex; flex-direction: column; gap: var(--gap-5); } /*#order-confirmation #main>*:not(#content-hook-order-confirmation-footer) { max-width: 100rem; margin: auto; }*/ #order-reference-value { font-weight: 700; } /* content */ #order-confirmation #content>div>.row { display: flex; flex-direction: column; gap: var(--gap-5); } #order-confirmation #content h3 { font-size: 1.8rem; font-weight: 700; font-family: var(--font-1); } #order-confirmation #order-items>.row{ align-items: center; } #order-confirmation :is(#order-items,.order-confirmation-table) { display: flex; flex-direction: column; gap: var(--gap); } #order-confirmation #order-items .order-confirmation-table { gap: var(--gap); } #order-confirmation #order-items .order-line { padding: var(--gap) 0; background: #f9f9f9; align-items: center; } #order-confirmation #order-items .order-line .details { line-height: 1.6; } #order-confirmation #order-details { max-width: 100%; flex:100%; } #order-confirmation #order-details h3 { margin-bottom: var(--gap); } #order-confirmation #order-details ul { display: flex; flex-direction: column; gap: var(--gap--2); line-height: 1.2; list-style:inside square ; } #order-confirmation #content-hook_payment_return .row>.col-md-12 { display: flex; flex-direction: column; gap: var(--gap-2); } #order-confirmation #content-hook_payment_return p { margin-bottom: 0; } /* 0 ============================================================ =pp steps ★★★ */ .checkout-step .content, .checkout-step .done, .checkout-step .step-edit, .checkout-step.-current.-reachable.-complete .done, .checkout-step.-current.-reachable.-complete .step-edit, /*.checkout-step.-reachable.-complete .step-number,*/ .checkout-step.-reachable.-complete .content { display: none } .checkout-step.-current .content, /*.checkout-step.-current.-reachable.-complete .step-number,*/ .checkout-step.-current.-reachable.-complete .content, .checkout-step.-reachable.-complete .done, .checkout-step.-reachable.-complete .step-edit { display: block } /* step-title */ body .step-title{ margin: 0; display: flex; gap: var(--gap-1_3); align-items: center; font-size: calc(2.6rem * var(--glob-20)); line-height: 1; font-weight: 400; color: var(--color-gray); position: relative; } .step-title:after{ content: ''; position: absolute; left:5.9rem; right:0; bottom: 0; border-bottom: 2px dashed var(--color-gray4); } .step-title .title{ flex:1; padding-top: .2rem; padding-bottom: .2rem; text-transform: uppercase; } .body .step-title .step-edit { text-align: right; font-size: .9em; text-transform: none; cursor: pointer; font-weight: 400; margin-left: auto; } .step-title .step-edit:hover { color: var(--color-H); } .step-title i{ color: var(--color-green); } .step-title .step-edit i{ font-size: 1em; vertical-align: middle; } /* step-number */ .body h1 .step-number { width: 1.6em; height: 1.6em; border:1px solid var(--color-gray); display: flex; justify-content: center; align-items: center; border-radius: 50%; font-weight: 400; padding-top: .2rem; order:-1; font-size: 1.1em; } .step-title > i { order:0; } /* -complete */ .-complete .step-number{ border-color: var(--color-gray); } .-complete .step-title .title{ border-bottom: 2px dashed var(--color-B2); } /* -current */ body .-current .step-number{ background: var(--color-black3); color: #fff; border-color: var(--color-black3); } .-current .step-title .title{ color: var(--color-black); } /* -unreachable */ .-unreachable .step-title { color: var(--color-gray2); } .-unreachable .step-number { border-color: var(--color-gray2); } .checkout-step.-current:not(#checkout-personal-information-step) .content, .-complete#checkout-personal-information-step .content{ /* border: 1px solid var(--color-B); padding:3rem 2rem 2rem;*/ /*border-radius: var(--radius-2);*/ } .checkout-step .content{ /* padding-bottom: var(--gap-3);*/ padding-top: var(--gap-2); } @media (min-width: 57em) {/* 912px */ .checkout-step .content{ padding-left: 6rem; } } /*------------------------------- =pp #login-form -------------------------------*/ #login-form{ padding-top: 2rem; } /* 1 ============================================= =pp delivery */ #js-delivery,#checkout-payment-step .content { display: flex; flex-direction: column; gap: var(--gap-2); } #js-delivery .form-fields { width: 100%; max-width: 100%; } #js-delivery .row{ margin-left: -.5rem; margin-right: -.5rem; align-items: center; } @media (min-width: 48em) {/* 768px */ #js-delivery .row{ flex-wrap: nowrap; } } #js-delivery .row>*{ padding-left: .5rem; padding-right: .5rem; } #js-delivery .delivery-options { margin-bottom: var(--gap-1_5) } #js-delivery .delivery-option, #js-delivery .carrier-extra-content, .payment-options .payment-option{ background: #f3f3f3; padding:1rem; margin: 0; min-height: 6rem; display: flex; align-items: center; } #js-delivery .delivery-option label { flex: 1; line-height: 1.3; } #js-delivery .delivery-options .end-item, .payment-options .end-item{ margin: 0 0 1rem; min-height: .1px; } #delivery [for="delivery_message"]{ margin-bottom: 1rem; display: block; } /*delivery-addresses*/ #delivery-address .form-footer button+a{ order:-1; } #delivery-addresses, #invoice-addresses, .addresses { gap:var(--gap-2) var(--gap-1_5) ; display: flex; flex-wrap: wrap; } .address-item, .addresses>*{ /* max-width: 50%;*/ flex:1; min-width: 26rem; } .addresses h4 { font-size: calc(2.2rem * var(--glob-20)); margin-bottom: var(--gap--2); } .body .address-item header{ background: #f3f3f3; padding:.8rem; margin-bottom: 1rem; font-size: 1.6rem; line-height: 1.3; } .address-item .custom-radio{ margin-right: .3rem; } /* heading */ .address-item .address{ margin-left: 2.8rem; font-weight: 400; font-family: var(--font-1); } .add-address { margin-bottom: 2em; } /* 1 ============================================= =pp payment-confirmation */ #payment-confirmation .ps-shown-by-js { text-align: center; } #payment-confirmation .ps-shown-by-js .btn { font-size:2.2rem; } #payment-confirmation[style="visibility: hidden;"] { max-height: 0; overflow: hidden; } .ps-hidden{ display: none; } .delivery-options, .payment-options { display: flex; flex-direction: column; gap: var(--gap); } .payment-options .additional-information p { font-size: 1.5rem; font-style: italic; line-height: 1.3; } .payment-options .payment-option { } /*-------------------------------------------------------------- =pp tabs --------------------------------------------------------------*/ .nav-inline{ display: flex; padding-bottom: var(--gap) } .nav-inline .nav-item+.nav-item{ /*margin-left: .5rem;*/ } .nav-inline .nav-link { padding: .5rem 2rem .3rem; display: inline-flex; align-items: center; border:1px solid transparent; border-bottom-color: var(--color-B); position: relative; bottom: -1px; text-transform: uppercase; font-weight: 700; font-family:var(--font-2); /*opacity: .5;*/ color: var(--color-gray3); font-size:calc(2.2rem * var(--glob-20)); min-height: var(--gap-5); border-radius:var(--radius-3) var(--radius-3) 0 0; } .nav-inline .nav-link:hover{ opacity: 1; } .nav-inline .nav-link.active{ border-color: var(--color-B); border-bottom-color: #fff; color: var(--color-black3); opacity: 1; } #checkout .tab-content{ padding:var(--gap-2) 0; /* margin-bottom: 2rem;*/ } .tab-content .tab-pane{ display: none !important; } .tab-content .tab-pane.active{ display: block !important; } .tab-content #login-form { padding: 0; } /*---------------- =pp social log ----------------*/ .nav-inline .nav-link span{ margin-right: .3rem; } .nav-inline .nav-link svg{ position: relative; top: -1px; } .nav-inline .nav-link .fb{ fill: #4064AC; } .nav-inline .nav-link .google{ fill: #E34133; } /* 0 ============================================================ =pp offer page ★★★ ============================================================== */ #offer-shop .spcial-offer img { mix-blend-mode: darken; box-shadow: var(--shadow-1); border-radius: 50% } #offer-table { display: flex; max-width: 140rem; margin: auto; gap: var(--gap-3); line-height: 1.1; } #offer-table .item { flex:1; background: #fff; border-radius: var(--radius-4); padding: var(--gap-3); box-shadow: var(--shadow-1); margin-bottom: var(--gap-7); position: relative; transition: all .6s ease-out; /*border: 2px solid transparent;*/ } #offer-table :is(.item,.offer-header,.offer-header .pp-1) { display: flex; flex-direction: column; gap: var(--gap); text-align: center; } /* 3 =================================== =pp header */ #offer-price-toggle{ display: flex; justify-content: center; padding-bottom: var(--gap-5); gap: var(--gap-2); align-items: center; flex-direction: column; } #offer-price-toggle .label { flex:100%; text-align: center; margin:0; } #offer-price-toggle .wrapper-btn { display: flex; flex-wrap: wrap; gap: var(--gap) 0; justify-content: center; } #offer-price-toggle .btn { gap: var(--gap--1_5); text-transform: none; font-size: 1.6rem; min-height: 2.6em; border-radius: 1.5em 0 0 1.5em; padding-left: 1.2em; padding-right: 1.2em; } #offer-price-toggle .btn+.btn { border-radius: 0 1.5em 1.5em 0; } #offer-price-toggle .btn { background: var(--color-white-1); color: var(--color-gray2); border-color: var(--color-gray2); } #offer-price-toggle .btn:hover { background: var(--color-black2); color: #fff; border-color: var(--color-black2); } #offer-price-toggle .btn.is-active { background: var(--color-orange); color: #fff; border-color: var(--color-orange); } #offer-price-toggle i{ font-size: 2.8rem; transform: rotate(-45deg); } #offer-price-toggle .btn+.btn i{ transform: rotate(45deg); } #offer-price-toggle .ppp { display: flex; gap: var(--gap) var(--gap-2); justify-content: center; flex-wrap: wrap; } #offer-price-toggle .ppp select { min-width: 10rem; /*background-color: var(--color-blue-2);*/ } /*#offer-price-toggle .btn:after { font-size: 3rem; font-family: var(--font-ti); transform: rotate(90deg); } #offer-price-toggle .btn.is-monthly:after { content: '\e64c'; content: '\e6ad'; } #offer-price-toggle .btn.is-yearly:after { content: '\e64d'; content: '\e6af'; } #offer-price-toggle:has(.is-yearly) i { display: none; }*/ #offer-table .offer-header .pp-21 { font-family: var(--font-2); font-size: calc(5rem * var(--glob-30)); } #offer-table .offer-header .pp-22 { /*font-family: var(--font-2);*/ font-size: 1.6rem; font-style: italic; color: var(--color-gray2); margin-left: calc(-1 * var(--gap-3)); margin-right: calc(-1 * var(--gap-3)); padding: 1rem var(--gap-1_5); background: var(--color-blue-1); min-height: calc(2rem + 2.4em); display: flex; align-items: center; justify-content: center; line-height: 1.2; text-shadow: -1px -1px 1px #fff; } #offer-table .offer-header .pp-2 { border-bottom: .4rem solid var(--color-blue); padding-bottom: var(--gap); display: flex; justify-content: center; gap: var(--gap); min-height: 5.6rem; } #offer-table .offer-header .pp-2>* { display: flex; align-items: center; } #offer-table :is(.yearly-price,.monthly-price):not(.is-active), .currency-pln #offer-table .offer-header .EUR, .currency-eur #offer-table .offer-header .PLN { display: none; } .currency-pln #offer-table .offer-header .PLN.is-active, .currency-eur #offer-table .offer-header .EUR.is-active, .currency-pln #offer-table .offer-header .PLN.curr, .currency-eur #offer-table .offer-header .EUR.curr { display: flex; gap: var(--gap--2); } #offer-table .offer-header .pp-2 span { font-size: calc(3.4rem * var(--glob-10)); font-weight: 300; } #offer-table .premium .offer-header .pp-2 span { font-size: calc(2.7rem * var(--glob-10)); } #offer-table .offer-header .pp-2 :is(.curr,.tax) { font-size: calc(1.8rem * var(--glob-10)); } #offer-table .offer-header .infos { flex-direction: column; align-items: flex-start; /*gap: var(--gap--2);*/ } #offer-table .offer-header .infos>span { display: flex; gap: var(--gap--2); } #offer-table .offer-header .pp-2 .info { font-size: calc(1.4rem * var(--glob-10)); } #offer-table .offer-header .pp-2 .info.yearly-price { color: var(--color-red); font-weight: 400; font-size: calc(1.8rem * var(--glob-10)); } #offer-table .offer-header .pp-2 .info.yearly-price * { font-weight: inherit; } /* content */ #offer-table .offer-content { flex:1; text-align: left; } #offer-table .offer-content { display: flex; flex-direction: column; gap: var(--gap-1_5); padding-top: var(--gap); } #offer-table .offer-content li { color: var(--color-gray); display: flex; gap: var(--gap--1_5); font-family: var(--font-3); align-items: center; justify-content: space-between; font-size: 1.5rem; font-weight: 400; } #offer-table .offer-content span { flex:1; } #offer-table .offer-content .ti-close { color: var(--color-red); } #offer-table .offer-content .ti-check { color: var(--color-green2); font-weight: 700; } #offer-table .offer-content .ti-help-alt { color: var(--color-orange); } #offer-table .offer-footer { position: absolute; bottom: 0; left: 0; right: 0; transform: translateY(calc(100% + var(--gap-2))); pointer-events: none; } #offer-table .offer-footer .btn { pointer-events: auto; } /* 3 =================================== =pp BIZNES */ #offer-table .offer-header .pp-3 { overflow: hidden; width: 9rem; height: 9rem; position: absolute; top: 0; right: 0; pointer-events: none; } #offer-table .ribbon { inset: 1rem 1rem auto auto; transform-origin: 0 0; transform: translate(29.3%) rotate(45deg); position: absolute; background: var(--color-red); box-shadow: 0 0 0 999px var(--color-red); clip-path: inset(0 -100%); padding: .5rem; text-transform: uppercase; color: #fff; font-weight: 500; } #offer-table .biznes { border-color: var(--color-red); padding-top: var(--gap-5); /*padding-bottom: var(--gap-5);*/ margin-top: calc(-1 * var(--gap-2)); margin-bottom: var(--gap-5); box-shadow: var(--shadow-2); } /* hover */ #offer-table .item:hover { background: var(--color-blue3); color: #fff; transition: all .3s ease-out; } #offer-table .item:hover :is(.offer-header .pp-22,.offer-content li) { text-shadow:-1px -1px 1px #000; color: #ffffffbb; } #offer-table .item:hover .offer-header .pp-22 { background: #000; } /* tooltip */ #offer-table [tooltip] i:hover { color: #fff; } /* 3 =================================== =pp offer-prestashop */ #offer-prestashop .logo-prestashop svg { max-width: 60rem; } /* 0 ============================================================ =pp cms ★★★ ============================================================== */ /* seo */ .seo-benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-top: 3rem; } .seo-benefit-item { background: #fff; padding: 2rem; border-radius: 1rem; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: transform 0.2s; } .seo-benefit-item:hover { transform: translateY(-5px); } .seo-benefit-item i { font-size: 4rem; color: #007bff; display: block; margin-bottom: 1rem; } /* ╔═════════════════════════════════════════════════════════════╗ */ /* ║ #2 =pp grid-items */ /* ╚═════════════════════════════════════════════════════════════╝ */ .grid-box-items { --grid-gap: calc(3rem * var(--glob-50)); /* Odstęp między kolumnami i wierszami */ --grid-min-width: 330px; /* Domyślna szerokość kolumny */ --grid-width-xs: 150px; /* Bardzo wąska */ --grid-width-sm: 200px; /* Mała */ --grid-width-md: 300px; /* Średnia (domyślna) */ --grid-width-lg: 400px; /* Duża */ --grid-width-xl: 500px; /* Bardzo duża */ --grid-width-xxl: 600px; /* Ekstra duża */ display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-width, 300px), 1fr)); gap: var(--grid-gap, 1rem); /* Opcjonalne: wyrównanie i inne właściwości */ align-items: start; justify-items: stretch; } /* Bazowe style dla itemów w grid */ .grid-box-items>* { /* Tutaj możesz dodać wspólne style dla wszystkich itemów */ background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px solid #e9ecef; transition: transform 0.2s ease; } .grid-box-items>*:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* Klasy dla różnych szerokości kolumn (jak Bootstrap: xs, sm, md, lg, xl, xxl) */ .grid-box--xs { --grid-min-width: var(--grid-width-xs); } .grid-box--sm { --grid-min-width: var(--grid-width-sm); } .grid-box--md { --grid-min-width: var(--grid-width-md); } .grid-box--lg { --grid-min-width: var(--grid-width-lg); } .grid-box--xl { --grid-min-width: var(--grid-width-xl); } .grid-box--xxl { --grid-min-width: var(--grid-width-xxl); } /* Opcjonalne klasy dla odstępów */ .grid--compact { --grid-gap: 0.5rem; } .grid--spacious { --grid-gap: 2rem; } @media (max-width: 767.98px) { .grid-box-items { grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)); } }/* end 767.98px */ @media (max-width: 575.98px) { .grid-box-items { grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); } }/* end 575.98px */ /*-------------------------------------------------------------- =pp social --------------------------------------------------------------*/ /* social global */ .social{ display: flex; align-items: center; flex-flow: row wrap; } .social>a, .social>button{ } .social>span{ margin-right: 10px; font-size: 14px; } /* social global */ .social a, .social button{ background: var(--color-black); border:1px solid var(--color-black); color: #fff; padding:1px; width:3.8rem; height:3.8rem; display: flex; justify-content: center; align-items: center; border-radius:.5rem; margin:.3rem; font-size: 2.8rem; fill: currentColor; } .social:not(.social-inline) a i, .social:not(.social-inline) button i, .social:not(.social-inline) a:not(.btn-facebook) .a{ font-size:inherit; margin: 0; color: inherit; fill: inherit; } .social button:hover, .social a:hover{ background: var(--color-gray); border-color: var(--color-gray); color: #fff; } .social-inline.social{ } .social-inline.social i{ margin-right:3px; } .social-inline.social a, .social-inline.social button{ padding:5px 10px 5px 8px; width:auto; height:auto; border-radius:0; margin:2px 0px; } /* social white - background white */ body .social-white a, body .social-white button{ background:#fff; border-color:#ccc; color:#999; } .social-white.social-black a{ /*background-color:rgba(255,255,255,0); border-color:rgba(255,255,255,0.6);*/ } .social-white.social-black a i{ color:#fff; } .social-white a:hover, .social-white button:hover{ color:#fff; border-color: inherit; } .social-white .btn-facebook{ color: #435f9f; border-color:#435f9f; } .social-white .btn-facebook:hover { background-color: #435f9f; } .social-white .btn-twitter{ color: #00aaf0; border-color: #00aaf0; } .social-white .btn-twitter:hover { background-color: #00aaf0; } .social-white .btn-instagram{ color: #A47259; border-color:#A47259; } .social-white .btn-instagram:hover { background-color: #A47259; } .social-white .btn-google-plus { color: #e04b34; border-color:#e04b34; } .social-white .btn-google-plus:hover { background-color: #e04b34; } .social-white .btn-youtube{ color: #d03b24; border-color:#e04b34; } .social-white .btn-youtube:hover { background-color: #e04b34; } .social-white .btn-pinterest{ color: #ce1f21; border-color:#ce1f21; } .social-white .btn-pinterest:hover { background-color: #ce1f21; } /* social color */ .social-color a, .social-color button{ color:#fff; } .social-color a:hover, .social-color button:hover { background:#fff; } .social-color .btn-facebook{ background-color: #435f9f; border-color:#435f9f; } .social-color .btn-facebook:hover{ color: #435f9f; } .social-color .btn-twitter { background-color: #00aaf0; border-color:#00aaf0; } .social-color .btn-twitter:hover{ color: #00aaf0; } .social-color .btn-instagram{ background-color: #A47259; border-color:#A47259; } .social-color .btn-instagram:hover { color: #A47259; } .social-color .btn-google-plus{ background-color: #e04b34; border-color:#e04b34; } .social-color .btn-google-plus:hover{ color: #e04b34; } .social-color .btn-youtube{ background-color: #e04b34; border-color:#e04b34; } .social-color .btn-youtube:hover{ color: #d03b24; } .social-color .btn-pinterest{ background-color: #ce1f21; border-color:#ce1f21; } .social-color .btn-pinterest:hover{ color: #ce1f21; } .social-color .btn-email{ background-color: #999; border-color:#999; } .social-color .btn-email:hover{ } /* 0 ============================================================ =pp alertFeaturedBlock ============================================================== */ .alertFeaturedBlock { position: relative; transition: all .3s ease-out; z-index: 0; } .alertFeaturedBlock.open { z-index: 9999; } .alertFeaturedBlock:not(.open) .block-close { display: none; } /*-------------------------------------------------------------- =pp #backTop --------------------------------------------------------------*/ #backTop{ font-size: 3rem; background: var(--color-black-1); color: #fff; position: fixed; right: 3rem; bottom: 3rem; z-index: 99; cursor: pointer; width: 4rem; height: 4rem; border-radius: 50%; text-align: center; line-height: 3.8rem; box-shadow: 0 0 1rem #fff; } #backTop i{ line-height: inherit; } #backTop:hover{ background: var(--color-H); }