:root {

    /* 1800*/
    --pad: clamp(5px, 6.6vw, 120px);
    --extrapad: clamp(15px, 2vw, 20px);
    --toppad: clamp(30px, 3vw, 50px);
    --botpad: clamp(30px, 8.3vw, 150px);
}


@media (max-width:1500px){
    :root{
        --pad: clamp(5px, 5vw, 155px);
    }
}


body{
    color: #1D1D1D;
    background: #F5F3EF;
}

.container{
    animation: startopa 0.4s linear forwards;
    animation-direction: alternate;
    opacity: 0.01;
    position: relative;
    overflow: hidden;
}

@keyframes startopa {
    from {opacity: 0.01; }
    to { opacity: 1;}
}


.project-pads{
    padding-left: var(--pad);
    padding-right: var(--pad);   
}

.project-pads-left{
    padding-left: var(--pad);
}

.project-pads-right{
    padding-right: var(--pad);
}

.extrapad{
    padding-left: var(--extrapad);
    padding-right: var(--extrapad);
}

.extrapad-left{
    padding-left: var(--extrapad);
}

.extrapad-right{
    padding-right: var(--extrapad);
}

.topbotpad{
    padding-top: var(--toppad);
    padding-bottom: var(--botpad);
}

.toppad{
    padding-top: var(--toppad); 
}

.botpad{
    padding-bottom: var(--botpad);
}


h1, h2, h3, h4, h5, h6{
    
}

h1{
    font-size: var(--font36);
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 800;
    font-style: normal; 
}

.h132 h1{
    font-size: var(--font32);
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 800;
    font-style: normal; 
}

h2{
    font-size: var(--font32);
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 600;
    font-style: normal; 
}

h3{
    font-size: var(--font24);
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.h326 h3{
    font-size: var(--font26);
}

h4{
    font-size: var(--font22);
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 600;
    font-style: normal;
}

h5{
    font-size: var(--font20);
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 600;
    font-style: normal;
}

h6{
    font-size: var(--font17);
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 600;
    font-style: normal;
}


p{
    font-size: var(--font16);
    padding-bottom: 1em;
    line-height: 1.25em;
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal; 
}

.p16 p{
    font-size: var(--font16);
}

.p12 p{
    font-size: var(--font14);
}

.p20 p{
    font-size: var(--font20);
}

.p22 p{
    font-size: var(--font22);
}

.tuote-card-top-category p, .tuote-card-top-storage p{
    font-size: var(--font14);
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal; 
}

.tuote-card-bottom-top-left h6{
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 800;
}

footer a{
    font-size: var(--font14);
}

a, li{
    font-size: var(--font17);
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.btn{
    font-size: var(--font16);
    margin-top: 10px;
    display: grid;
    grid-template-columns: auto 60px;
    max-width: 100%;
    gap: 20px;
    width: fit-content;
    text-transform: uppercase;
    padding: 5px 10px;
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 600;
    font-style: normal; 
}

.btn.blue{
    background-color: #4E9BFF;
    color: #fff;
    padding-bottom: 5px;
}

.btn.black{
    background-color: #111111;
    color: #FFFFFF;
    padding-bottom: 5px;
}

.btn svg{
    justify-self: end;
    align-self: center;
    width: var(--font14);
    transform: rotate(-45deg);
}

.btn:hover svg {
    animation: arrowMove 0.7s infinite alternate linear;
    transform-origin: left center;
}

@keyframes arrowMove {
  0% {
    transform: rotate(0deg) scaleX(1);
  }
  50% {
    transform: rotate(0deg) scaleX(1.15);
  }
  100% {
    transform: rotate(0deg) scaleX(1);
  }
}


.line3px{
    height: 3px;
    width: 100%;
    background-color: #FFFFFF;
}

.line3px.grey{
    background-color: #F3F3F3;
}

.line1px{
    height: 1px;
    width: 100%;
    background-color: #FFFFFF;
}



.banner-balloon{
    height: 21px;
    width: 21px;
    display: block;
    border: 1px solid #111111;
    background-color: #fff;
    border-radius: 50%;
    z-index: 3;
    cursor: pointer;
}

.banner-balloon.active{
    background-color: #4E9BFF;
}

.bannerpart{
    opacity: 0;
    z-index: 1;
    grid-template-columns: 25% 25% 50%;
}

.bannerpart.active {
    opacity: 1;
    z-index: 2;
}

.uflex-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.bannerpart img{
    height: 100%;
    aspect-ratio: 16/9;
    grid-column: 2/4;
    grid-row: 1;
    z-index: 1;
    min-height: 100%;
}

.bannerpart-content-helper{
    margin-top: clamp(50px, 8vw, 150px);
    background-color: rgba(78, 155, 255, 0.85);
    height: fit-content;
    max-width: 600px;
    margin-left: var(--pad);
    margin-right: var(--pad);
    grid-column: 1/3;
    grid-row: 1;
    z-index: 2;
    border: 1px solid #111;
    border-radius: 5px;
}

.bannerpart-content{
    padding: 20px;
    color: #fff;
    padding-bottom: 0px;
}

.balloons-helper{
    margin-top: calc(clamp(50px, 8vw, 150px) - 40px);
}

.product-categories-feedpart{
    gap: 15px;
    margin-top: 33px;
}

.product-categories-card-right img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.tuote-card-top-category{
    display: grid;
    background-color: #E3E5E8;
    height: fit-content;
    padding: 5px var(--extrapad);
    color: #1D1D1D;
}

.nostotuotteet-tuotteet, .tuote-sinkku-similar-product-products, .tuote-sinkku-similar-product{
    margin-top: 33px;
    gap: 26px;
}

#nostotuotteet{
    background-color: #FFE253;
}

#tuote-sinkku-similar-product, #tuote-sinkku-similar-product{
    background-color: #D4E6FF;
}

.tuote-card-top img{
    aspect-ratio: 10/8;
    object-fit: contain;
}

.tuote-card-top-storage{
    display: grid;
    align-self: end;
    height: fit-content;
    min-width: calc(50% - 30px);
    width: fit-content;
    max-width: calc(100% - 30px);
    color: #fff;
    padding: 5px 15px;
}

.tuote-card-top-storage p, .tuote-card-top-category p{
    text-transform: uppercase;
}

.product-green{
    background-color: rgba(46,204,113, 0.8);
}

.product-red{
    background-color: rgba(251,9,9, 0.8);
}

.product-yellow{
    background-color: rgba(251,186,9, 0.8);
}

.tuote-card{
    background-color: #fff;
    border: 1px solid #1D1D1D;
    border-radius: 3px;
}

.tuote-card:hover img{
    transform: scale(1.1);
}

.tuote-card:hover .tuote-card-bottom{
    background: #F9FAFB;
}

.tuote-card-bottom{
    padding: 10px 20px 20px;
}

.line .grey{ 
    background-color: #F3F3F3;
}

.line .white{ 
    background-color: #fff;
}

.line .green{ 
    background-color: #2ECC71;
}

.line .horizontal{
    height: 1px;
    width: 100%;
}

.line .vertical{
    height: 100%;
    width: 1px;
}

#main-image.contain, .tinyimg.contain {
    object-fit: contain;
}

#main-image {
    display: block;
    aspect-ratio: 10/6.9;
    object-fit: contain;
    width: 100%;
    cursor: pointer;
    max-height: 420px;
}

.tinyimages {
    display: flex;
    margin-top: 2%;
    overflow: hidden;
    position: relative;
}

.tinyimg {
    width: calc(100% / 3);
    flex-shrink: 0;
    object-fit: cover;
    aspect-ratio: 10/6.9;
    cursor: pointer;
}

.tinyimages-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #4E9BFF;
    display: grid;
    padding: 5px 10px;
    cursor: pointer;
}

.tinyimages-arrow.right{
    right: 0;
}

.tinyimages-arrow.left svg{
    transform: scaleX(-1);
    width: 6px;
}

#main-image.active {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    object-fit: contain;
    background-color: rgba(0,0,0,0.65);
    padding: 50%;
    width: 60% !important;
    height: 100%;
    display: flex !important;
    max-height: unset;
}

.productimg-arrow{
    align-self: center;
    background: transparent linear-gradient(90deg, #4E9BFF 0%, #4E9BFF 100%) 0% 0% no-repeat padding-box;
    width: fit-content;
    padding: 10px 15px 10px 10px;
    display: grid;
    align-content: center;
    cursor: pointer;
}

.productimg-arrow.right{
    justify-self: end;
    transform: scaleX(-1);
}

.productimg-arrow.right svg{
    transform: scaleX(-1);
}

.productimg-arrow.left svg{
    transform: scaleX(-1);
}

#single-product-block2{
    background-color: #FFE253;
    padding-bottom: 20px;
    margin-top: 50px;
}

#single-product-block2-content{
    padding: 20px;
}

input[type="radio"] {
  accent-color: #094B25;
}

input[type="radio"] {
  width: 16px;
  height: 16px;
  border: 2px solid #094B25;
  border-radius: 50%;
  appearance: none;
  outline: none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  background-color: #fff;
}

input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #094B25;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.variant-quantity-global {
	display: flex;
    flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
}

#variant-quantity{
    width: 70px;
}


#addcartbtn{
    background-color: #4E9BFF;
    color: #fff;
    display: grid;
    gap: 50px;
    align-content: center;
    grid-template-columns: auto max-content;
    box-shadow: 0px 3px 6px #00000029;
    height: 30px;
    position: relative;
    cursor: pointer;
    clip-path: polygon(calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 0 0);
    width: calc(100% - 30px);
    max-width: 330px;
}


#addcartbtn p{
    font-size: 20px;
    padding-left: 20px;
}

#addcartbtn svg{
    align-self: center;
    height: 13px;
}

#addcartbtn:hover{
    width: 100%;
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0 0);
}


#singprod-informationbox{
    background-color: #0ABC86;
    color: #fff;
    width: fit-content;
    padding: 5px 20px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    opacity: 0;
}

#singprod-informationbox.missing{
    background-color: #ff0000;
}

#singprod-informationbox p{
    font-size: var(--font20);
}

#single-product-content.ugrid3{
    grid-template-columns: 1fr 1fr 2fr;
    gap: 15px;
    margin-top: 30px;
}

#single-product-content.ugrid2{
    gap: 30px;
    margin-top: 30px;
}

.prod-categories-child{
    margin-left: 20px;
}

.prod-cats{
    cursor: pointer;
    padding-left: 10px;
}

.prod-categories .prod-categories-child{
    display: none;
}

.prod-categories.active .prod-categories-child{
    display: block;
}

.catkuvaukset {
    display: none;
    max-width: 400px;
}

.catkuvaukset.active {
  display: block;
}


#kauppafiidi-search-box{
    border: none;
}

#kauppafiidi-search{
    grid-template-columns: auto 30px;
    border: 1px solid #4E9BFF;
    width: 250px;
    margin-top: 30px;
}

#kauppafiidi-search-right{
    background-color: #4E9BFF;
    display: grid;
}

#kauppafiidi-search-right svg{ 
    width: 17px;
    margin: 0 auto;
    transform: scaleX(-1);
}

#kauppafiidi {
  display: grid;
  /* 1800 */
  grid-template-columns: clamp(350px, 27.7vw, 500px) auto;
}


#topnav-section{
    background-color: #FFE253;
    color: #1D1D1D;
    padding-top: 10px;
    padding-bottom: 10px;
    grid-template-columns: 190px auto max-content;
    gap: 10px 30px;
}

#logopart img{
    width: 140px;
}

#logopart{
    border-right: 1px solid #92AACF;
}

#navpart{
    display: flex;
    gap: 10px 30px;
    flex-wrap: wrap;
}

#navpart a{
    align-self: center;
}

#extranavpart{
    justify-self: end;
}

#navlogin{
    background-color: #111;
    padding: 6px 20px 3px 15px;
    color: #fff;
    display: grid;
    grid-template-columns: 15px auto;
    gap: 15px;
    border-radius: 4px;
}

#navlogin-txt{
    align-self: center;
    color: #fff;
}

#navsearch-box-hourglass{
    background-color: #111;
    display: grid;
    align-content: center;
}

#navsearch-box-hourglass svg {
    height: 16px;
    transform: scaleX(-1);
}

#extranavpart{
    display: grid;
    grid-template-columns: max-content auto max-content;
    gap: 30px;
    align-self: center;
}

#navsearch{
    display: grid;
    grid-template-columns: auto 30px;
}

#navsearch-box{
    background-color: #FFF;
    border: 1px solid #FFF;
    color: #111;
    width: 300px;
    padding: 7px;
}

#navbasket{
    background-color: #4E9BFF;
    padding: 6px 15px 3px;
    color: #fff;
    display: grid;
    grid-template-columns: 30px auto 20px;
    gap: 15px;
    border-radius: 4px;
}

#navbasket svg{
    height: 20px;
}

#navbasket-txt{
    align-self: center;
    color: #FFF;
}

#navbasket-count-helper{
    background-color: #FFF;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: grid;
}

#navbasket-count{
    color: #042311;
    align-self: center;
    justify-self: center;
    font-size: 12px;
}

#bottomav-section{
    background: #FFF;
    color: #042311;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 0px 1px 6px #00000017;
}

#bottomav-section-links{
    display: flex;
    gap: 10px 30px;
    flex-wrap: wrap;
    padding-left: 220px;
}

#nav-section a, #navsearch-box, #navsearch {
    height: fit-content;
    color: #111;
}

.prod-cats.active {
    text-decoration-line: underline;
}

.prod-cats .prodcats-arrow {
    display: none;
}

.prod-cats.active .prodcats-arrow {
    display: inline-block;
}

#fshopcart{
    background-color: #4E9BFF;
    width: 70px;
    height: 70px;
    color: #fff;
    border-radius: 50%;
    position: fixed;
    right: 30px;
    bottom: 20px;
    display: grid;
    align-content: center;
    justify-content: center;
    z-index: 10000;
}

#fshopcart svg {
  width: 27px;
  height: auto;
  margin-top: 5px;
}

#fshopcart-shopcounter-counter {
  text-align: center;
}


footer{
    background-color: #1D1D1D;
    color: #FFF;
}


#footer-part1 img{
    height: 26px;
}

#footer-part2 h5, #footer-part3 h5{
    font-size: 20px;
    color: #FBBA09;
}


#footer-part1 img{
    margin-bottom: 20px;
}

#footer-part2 h5, #footer-part3 h5{
    margin-bottom: 26px;
}

.footer-space{
    margin-top: 15px;
}

footer a.valkoinen{
    color: #fff;
}

footer a.keltainen{
    color: #FBBA09;
}

#footer-content{
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 1200px;
    gap: 30px;
}

#footer-part1, #footer-part2{
    border-right: 1px solid #585858;
}

#footer-part1, #footer-part2, #footer-part3{
    padding-right: 30px;
}

#footer-part1 p{
    color: #F3F3F3;
}

.product-categories-headline-part h2{
    color: #1D1D1D;
}

.product-categories-card-left-content h6{
    color: #1D1D1D;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.whiteline{
    width: 100%;
    height: 1px;
    background-color: #fff;
    align-self: end;
}

.product-categories-card-button{
    padding: 5px 0px 0px;
    align-self: end;
}

.product-categories-card-left{
    display: grid;
}

.product-categories-card-button .btn{
    margin-top: 0px;
}

.product-categories-card img{
    transition: transform 0.4s ease, opacity 0.4s ease;
}

footer a.valkoinen:hover{
    color: #DADADA;
}

footer a.vihrea:hover{
    color: #4E9BFF;
}

#fshopcart:hover, #navbasket:hover{
  background-color: #3E7CCC;
}


#banner-button{
    margin-left: 20px;
    margin-bottom: var(--extrapad)
}

.single-product-toppart h1{
    color: #111;
}

.single-storage-green{
    background-color: #2ECC71;
    color: #fff;
}

.single-storage-red{
    background-color: #FB0909;
    color: #fff;
}

.single-storage-yellow{
    background-color: #FBBA09;
    color: #fff;
}

#single-product-block2-content .zerop{
    padding: 2px 10px;
    width: fit-content;
    margin-top: 3px;
}

.variants-options{
    margin-bottom: 5px;
    margin-top: 5px;
}

.variant-option input{
    margin-right: 10px;
}

.variant-option label{
    color: #042311;
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal; 
}

#single-product-block1 h4{
    color: #111;
    margin-bottom: 10px;
}

#single-price-name{
    margin-top: 20px;
}


#variant-quantity {
  width: 80px;
  padding: 5px 7px;
  font-size: 14px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

/* WebKit: isommat nuolet */
#variant-quantity::-webkit-inner-spin-button {
  width: 18px;
  height: 18px;
}

#single-product-block2-content h3, .variant-quantity-global h4{
    font-size: 14px;
}

.uflexroll{
    display: flex;
}

.uflexroll>*{
    flex-shrink: 0;
    width: 100%;
}

#tekninenkuvaus p{
    padding-left: var(--extrapad);
    padding-right: var(--extrapad);
}

#tekninenkuvaus h4{
    color: #111;
    margin-bottom: 10px;
}

#tekninenkuvaus hr{
    margin-bottom: 10px;
}

#tekninenkuvaus p{
    width: calc(25% - var(--extrapad) - 20px);
}

.single-product-toppart .zerop{
    height: fit-content;
    align-self: center;
    padding: 3px 15px;
}

.single-product-toppart{
    margin-bottom: 20px;
}

#kauppafiidi-right{
    background-color: #FFE253;
    padding-left: 30px;
    padding-right: 30px;
}

.cat-parent .prodcats-arrow svg{
    height: 12px;
}

#kauppafiidi-left h1{
    margin-bottom: 40px;
    font-size: var(--font32);
}

.catkuvaukset h2{
    color: #111111;
    margin-bottom: 20px;
}

#kauppafiidi-right-kategoriakuvaus{
    margin-bottom: 30px;
}

.catkuvaukset{
    padding-left: var(--extrapad);
    padding-right: var(--extrapad);
}

.himmel{
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.vertical-line {
    width: 1px;
    height: 100%;
    background-color: #2ECC71;
    border: none;
}

.tuote-card-bottom-top{
    grid-template-columns: 1fr;
    gap: 10px;
}

.tuote-card-bottom-top-right{
    grid-template-columns: 1px auto;
    gap: 15px;
}

.tuote-card-bottom-top-right h6{
    justify-self: end;
}

.bannerpart-content h1{
    margin-bottom: 10px;
}

.tuote-card-bottom-top-left h6{
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.product-categories-card-button{
    margin-top: 10px;
}

#bottomav-section-links a:hover{
    color: #4E9BFF;
}

h3#single-price{
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}



.woocommerce-orders-table{
    margin-top: 30px;
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-orders-table .woocommerce-orders-table__row, .woocommerce-orders-table th{
    text-align: left;
}

.woocommerce-orders-table th, .woocommerce-orders-table td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}
.woocommerce-orders-table th {
    background-color: #f2f2f2;
}

th.woocommerce-orders-table__cell{
    background-color: transparent;
}

.woocommerce-orders-table th, .woocommerce-orders-table td{
    color: #04224D;
}

.woocommerce-orders-table tbody tr:nth-child(odd){
    background-color: #2ECC71;
}

.woocommerce-MyAccount-navigation ul{
    display: flex;
    gap: 30px;
    margin: 0 auto;
    width: fit-content;
    flex-wrap: wrap;
}

.woocommerce-MyAccount-navigation ul li, .woocommerce-MyAccount-navigation ul li a{
    font-size: var(--font18);
    color: #111;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.woocommerce-MyAccount-navigation ul{
    list-style-type: none;
    padding: 0;
    margin-bottom: 50px;
}

.woocommerce-MyAccount-navigation ul li:last-child a{
    color: #4E9BFF;
}

.woocommerce-table--order-details{
    margin-top: 30px;
    width: 100%;
    max-width: 700px;
    border-collapse: collapse;
}

.woocommerce-table--order-details th, .woocommerce-table--order-details td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}
.woocommerce-table--order-details th {
    background-color: #f2f2f2;
}

.woocommerce-order-details p.order-again{
    display: none;
}

.woocommerce-order-details a{
    margin-bottom: 5px;
}

.woocommerce-customer-details{
    margin-top: 30px;
}

.woocommerce-customer-details h2, .woocommerce-Address h2{
    font-size: var(--font36);
}

.woocommerce-customer-details section{
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 700px;
}

.woocommerce-customer-details section .col-2{
    grid-template-columns: 1fr;
}

.woocommerce-MyAccount-content p mark{
    background-color: #D3DDEB;
}

.woocommerce-table__product-name a{
    color: #04224D;
    font-size: var(--font20);
}

.woocommerce-dashboard .woocommerce-MyAccount-content p{
    padding-bottom: 0px;
}

.woocommerce-dashboard .woocommerce-MyAccount-content a{
    display: inline-block;
}

.woocommerce-dashboard .woocommerce-MyAccount-content p, .woocommerce-dashboard .woocommerce-MyAccount-content a{
    font-size: var(--font17);
}

.col-2.woocommerce-Address{
    grid-template-columns: 1fr;
}

.woocommerce-edit-address .woocommerce-Addresses{
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 700px;
}

.woocommerce-edit-account fieldset{
    max-width: 700px;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.woocommerce-edit-account button{
    padding: 8px 15px;
    color: #fff;
    border: none;
    background-color: #0ABC86;
    cursor: pointer;
    border-radius: 4px;
}


.shop_table{
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.woocommerce-cart td.product-thumbnail img{
    max-width: 80px;
    width: 100%;
    max-height: 80px;
    height: 100%;
}


#order_review_heading{
    margin-top: 30px;
}

/* Woocommerce */

/* Kassa- ja ostoskori-sivujen napit */
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout .place-order .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
    background-color: #4E9BFF !important;
    color: #ffffff !important;
    border: none;
    width: fit-content;
}

/* Hover-efekti napeille */
.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout .place-order .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
    background-color: #3E7CCC !important;
    color: #ffffff !important;
}

/* Linkkien väri */
.woocommerce-cart a,
.woocommerce-checkout a{
    color: #4E9BFF;
}

/* Linkkien hover-väri (valinnainen) */
.woocommerce-cart a:hover,
.woocommerce-checkout a:hover{
    color: #468BE5;
}

td.product-name dd p {
  display: inline-block;
  margin-top: 1px;
  padding-bottom: 0px;
}

/* Ostoskorin inputit */
.woocommerce-cart input[type="text"],
.woocommerce-cart input[type="email"],
.woocommerce-cart input[type="tel"],
.woocommerce-cart input[type="number"],
.woocommerce-cart input[type="password"],
.woocommerce-cart textarea,
.woocommerce-cart select {
  padding: 5px 10px;
}

/* Kassan inputit */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  padding: 5px 10px;
}

/* Ostoskorin labelit */
.woocommerce-cart label {
  
}

/* Kassan labelit */
.woocommerce-checkout label {

}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
    background: #A6CDFF;
    border-radius: 5px;
}

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
  background-color: #A9E8C3;
}

.woocommerce-page .woocommerce-orders-table tbody a {
  background-color: unset !important;
  color: #042311 !important;
  margin-bottom: 5px;
}

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content textarea {
  padding: 5px 10px;
}

.woocommerce-MyAccount-content a{
    color: #4E9BFF;
}

/* Woocommerce end*/


.product-categories-feedpart .product-categories-card{
    grid-template-columns: 142px auto;
    gap: 10px;
    border: 1px solid #1D1D1D;
    padding-top: var(--extrapad);
    padding-bottom: var(--extrapad);
    border-radius: 3px;
}

.product-categories-feedpart .product-categories-card h6{
    font-size: var(--font20);
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 800;
    font-style: normal;
}


.product-categories-feedpart .product-categories-card img{
    height: auto;
    mix-blend-mode: multiply;
}

.product-categories-card-button{
    grid-column: 1/3;
}

.product-categories-feedpart .product-categories-card:nth-child(-n+4) img{
    aspect-ratio: 10/8;
}

.product-categories-feedpart .product-categories-card:nth-child(-n+4){
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content auto;
}

.product-categories-feedpart .product-categories-card:nth-child(-n+4) .product-categories-card-right{
    grid-row: 1;
    grid-column: 1/3;
}

.product-categories-feedpart .product-categories-card:nth-child(-n+4) .product-categories-card-left{
    grid-row: 2;
    grid-column: 1/3;
}

.product-categories-feedpart .product-categories-card:nth-child(-n+4) h6{
    font-size: var(--font24);
}


.tuote-card-top{
    overflow: hidden;
}

.tuote-card-top .uutuus{
    transition: unset;
    -moz-transition: unset;
    -webkit-transition: unset;
    -o-transition: unset;
    text-transform: uppercase;
    height: fit-content;
    background-color: #FF5353;
    color: #fff;
    justify-content: end;
    display: grid;
    transform-origin: bottom right;
    transform: rotate(45deg);
    padding: 3px 50px;
    margin-top: 100px;
    font-size: 21px;   
}

.nostotuotteet-button{
    margin-top: 40px;
}

#kauppafiidi-left-cats .prod-categories:last-child{
    margin-top: 20px;
    color: #4E9BFF;
}

.product-child-marker{
    border-left: 1px solid #4E9BFF;
    border-bottom: 1px solid #4E9BFF;
    width: 10px;
    display: inline-block;
    height: 10px;
}

.catkuvaukset{
    font-size: var(--font14);
}

.prod-categories p{
    font-size: var(--font14);
}


#postfeedhandler{
  position: relative;
  opacity: 0;
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  transition: clip-path 0.9s ease, opacity 0.9s ease;
  pointer-events: none;
}

#postfeedhandler.active {
  opacity: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: auto;
}


.woocommerce-cart .cart-subtotal,
.woocommerce-cart .order-total,
.woocommerce-checkout .cart-subtotal,
.woocommerce-checkout .order-total {
    display: none !important;
}

.woocommerce-cart-form__contents th.product-price,
.woocommerce-cart-form__contents th.product-subtotal {
    display: none;
}

.woocommerce-cart-form__contents td.product-price,
.woocommerce-cart-form__contents td.product-subtotal {
    display: none;
}

.woocommerce-checkout-review-order-table {
    border-collapse: collapse;
}

.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout-review-order-table td.product-total {
    width: 0.0001px;       
    padding: 0 !important; 
    border: 0 !important; 
    font-size: 0;    
    line-height: 0;
    overflow: hidden;
    white-space: nowrap;
}

.woocommerce-checkout-review-order-table th.product-name,
.woocommerce-checkout-review-order-table td.product-name {
    border-right: 1px solid var(--wc-border, #e5e5e5);
}

.woocommerce-checkout-review-order-table tfoot .cart-subtotal,
.woocommerce-checkout-review-order-table tfoot .order-total {
    display: none;
}

.woocommerce-checkout-review-order-table tbody tr:last-child td,
.woocommerce-checkout-review-order-table tbody tr:last-child th {
    border-bottom: 1px solid var(--wc-border, #e5e5e5);
}

#bottomav-section-links a{
    font-size: var(--font14);
}

#navpart a, a#navlogin, a#navbasket{
    font-size: var(--font14);
}

.product-categories-card:hover{
    background-color: #F7F7F7;
}

.tuote-card-bottom-top-left h3{
    margin-bottom: 5px;
}

.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-total,
.woocommerce-MyAccount-content .woocommerce-order-details .woocommerce-table__footer {
    display: none !important;
}

.woocommerce-account.woocommerce-view-order table.woocommerce-table th.product-total,
.woocommerce-account.woocommerce-view-order table.woocommerce-table td.product-total {
    display: none !important;
}


.woocommerce-account.woocommerce-view-order .woocommerce-table__product-name.product-name{
    display: flex;
    gap: 15px;
}

.woocommerce-account.woocommerce-view-order .woocommerce-table__product-name.product-name strong{
    align-self: center;
}

#single-product-content{
    gap: clamp(30px, 5.56vw, 100px);
}

#single-product-block1 p{
    max-width: 600px; 
}

#single-product-block1-table, #single-product-block2-table, #single-product-block3-table{
    overflow-x: auto;
    max-width: calc(100vw - (2 * var(--pad) + 2 * var(--extrapad)));
    padding-bottom: 13px;
    margin-bottom: 30px;
}

#single-product-block2-content select{
    background: #fff;
    font-size: 16px;
    border: none;
    padding: 5px 10px;
}


/* Taulukko */

/* Oletustyylit ACF-taulukolle */
#single-product-block1-table table, #single-product-block2-table table, #single-product-block3-table table{
    color: #000;
    font-size: 15px;
    border-collapse: collapse;
    width: 100%;
}

#single-product-block1-table th,
#single-product-block1-table td,
#single-product-block2-table th,
#single-product-block2-table td,
#single-product-block3-table th,
#single-product-block3-table td {
    border: 1px solid #000;
    text-align: left;
    padding: 5px;
}

#single-product-block1-table th, #single-product-block2-table th, #single-product-block3-table th {
    background-color: #ccc; 
}

#single-product-block1-table tbody tr:nth-child(odd), #single-product-block2-table tbody tr:nth-child(odd), #single-product-block3-table tbody tr:nth-child(odd){
    background-color: #f2f2f2; 
}

#single-product-block1-table tbody tr:nth-child(even), #single-product-block2-table tbody tr:nth-child(even), #single-product-block3-table tbody tr:nth-child(even){
    background-color: #fff;
}

/* Taulukko End */

#single-product-content-line-content #single-product-block3, #single-product-content #single-product-content-right{
    max-width: 600px;
}

#single-product-content-line-content #single-product-block3{
    margin-bottom: 40px;
}

#single-product-content #single-product-content-left-new{
    grid-column: 1/3;
}

#single-product-content #single-product-content-right{
    justify-self: center;
}

.product-categories-card, .tuote-card{
    max-width: 400px;
}


.tekstikuva-area{
    gap: var(--pad);
}

.tekstikuva-content h3{
    margin-bottom: 15px;
}

.nav-burger-navpartul a::first-letter{
    text-transform: uppercase;
}
.nav-burger-navpartul a{
    text-transform: lowercase;
}

#nav-burger{
    background-color: #FFE253;
}

#nav-burger-logopart img {
    width: 145px;
    height: auto;
}

#nav-burger{
    height: 50px;
}

#burger-navsearch{
    justify-self: end;
    padding-right: var(--pad);
}


#navpart a{
    font-size: var(--font16);
}

#burger-navsearch{
    display: grid;
    grid-template-columns: auto 30px;
    margin-bottom: 10px;
    margin-top: 5px;
}

#burger-navsearch-box{
    padding: 5px;
}

#burger-navsearch-box-hourglass{
    background-color: #111;
    display: grid;
    align-content: center;
    justify-content: center;
    width: 30px;
}

#burger-navsearch-box-hourglass svg{
    height: 16px;
    width: auto;
}


@media (max-width:1800px){
    .product-categories-feedpart .product-categories-card {
        grid-template-columns: 1fr;
    }

    .product-categories-feedpart .product-categories-card:nth-child(-n+4) .product-categories-card-right {
        display: block;
    }

   .product-categories-feedpart .product-categories-card img{
        aspect-ratio: 10/8;
    }

    .product-categories-feedpart .product-categories-card{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: max-content auto;
    }

    .product-categories-feedpart .product-categories-card .product-categories-card-right{
        grid-row: 1;
        grid-column: 1/3;
    }

    .product-categories-feedpart .product-categories-card .product-categories-card-left{
        grid-row: 2;
        grid-column: 1/3;
    }

    .product-categories-feedpart .product-categories-card h6{
        font-size: var(--font24);
    }

}

@media (max-width:1700px){

}

@media (max-width:1600px){

}

@media (max-width:1500px){

}

@media (max-width:1400px){
    .tuote-card-bottom-button .btn{
        grid-template-columns: auto 30px;
    }

    .tuote-card-bottom {
        padding: 10px 10px 20px;
    }

    .tuote-card-top-category {
        padding: 5px 10px;
    }

    #navsearch-box{
        width: 200px;
    }

    #extranavpart{
        gap: 10px;
    }
}

@media (max-width:1300px){
    .himmel {
        height: 25px;
        width: 25px;
    }
}

@media (max-width:1200px){
    .bannerpart {
        grid-template-columns: 35% 25% 40%;
    }

    .bannerpart-content-helper {
        margin-top: clamp(50px, 7vw, 150px);
    }
    
    .balloons-helper {
        margin-top: calc(clamp(50px, 7vw, 150px) - 40px);
    }

    #kauppafiidi-right-feedpart #postfeedhandler .ugap15.col-4{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:1100px){
    #kauppafiidi{
        grid-template-columns: 1fr;
    }

    #kauppafiidi-left-cats{
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }

    #kauppafiidi-left h1{
        margin-bottom: 20px;
    }
}

@media (max-width:1000px){
    .bannerpart {
        grid-template-columns: 35% 45% 20%;
    }
}

@media (max-width:900px){
    #kauppafiidi-left-cats {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width:800px){
    .bannerpart{
        grid-template-columns: 1fr;
    }

    .bannerpart-content-helper{
        margin-top: 20px;
        margin-bottom: 60px;
        grid-column: 1;
        grid-row: 1;
        align-self: end;
    }
    
    .balloons-helper{
        margin-top: 0px;
        margin-bottom: 20px;
        align-self: end;
    }

    .bannerpart img {
        grid-column: 1;
        grid-row: 1;
        height: 500px;
    }

    #single-product-content #single-product-content-left{
        order: 2;
        grid-column: 1/3;
    }

    #single-product-content #single-product-content-right{
        order: 1;
        grid-column: 1/3;
    }

    #single-product-content #single-product-content-left-new{
        order: 3;
    }

    #single-product-block2 .tables-single.ugrid3{
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    #footer-part1, #footer-part2{
        border-right: unset;
    }

    #footer-content{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:700px){
    #kauppafiidi-left-cats, #kauppafiidi-right-feedpart #postfeedhandler .ugap15.col-4{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:600px){

}

@media (max-width:500px){
    #kauppafiidi-left-cats, #kauppafiidi-right-feedpart #postfeedhandler .ugap15.col-4, #single-product-block2 .tables-single.ugrid3{
        grid-template-columns: 1fr;
    }
}

@media (max-width:400px){
    .bannerpart-content-helper {
        margin-left: 5px;
        margin-right: 5px;
    }

    #addcartbtn {
        height: fit-content;
    }

    #addcartbtn p{
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #footer-content{
        grid-template-columns: 1fr;
    }

    #footer-part2 h5, #footer-part3 h5 {
        margin-bottom: 5px;
    }
}