/*
Theme Name: Virtue
Text Domain: Virtue Clothing
Version: 1.0
Description: Ecommerce clothing site
Tags: Fashion, Ecommerce
Author: Peter Sanghara
Author URI: https://www.petersanghara.ca
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;500&display=swap');



* {
    margin: 0;
    padding: 0;
    }


    header{

        height: 10%;

    }


    .title{
        font-family: 'UnifrakturMaguntia';
        color: rgb(70, 115, 240);
        font-size: 61px;
        width: 170px;
        text-align: center;

    }
    
    .pages{
        font-family: 'UnifrakturMaguntia';
        margin-top: 4%;
        width: 70px;
        text-align: center;
    }

.menu{
    padding-top: 2%;
    position: fixed;
    display: flex;
    z-index: 999;
    width: 575px;
    left: 50%;
    transform: translate(-50%, 0);
    justify-content: space-evenly;

}

footer{
    width: auto;
    height: 10vh;
}

body{

    height: 170vh;
    width: 100%;
    object-fit: contain;
    overflow-x: hidden;
    
}

.test_row{

    width: 100%;
    height: 35%;
    display: flex;
    justify-content: space-between;


}

.test_block{

    min-width: 350px;
    min-height: 350px;
    width: 350px;
    height: 350px;

    background-color: blueviolet;
    margin: 0 auto;
    box-shadow: 0px 0px 117px -40px rgba(0,0,0,1) inset;
-webkit-box-shadow: 0px 0px 117px -40px rgba(0,0,0,1) inset;
-moz-box-shadow: 0px 0px 117px -40px rgba(0,0,0,1) inset;


}




a{
    text-decoration: none; 
    color: inherit;
}



.flex-container{

        display: flex;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;
        margin-top: 5%;
        margin-bottom: 5%;
}


.archive-type{

    font-family: 'Roboto Mono', monospace;
    width: 80%;
    margin: 0 auto;

}

.archive-item{

    max-width: 500px;
    font-family: 'Roboto Mono', monospace;
    color: rgb(0, 0, 0);
   
}



.clothing-builder-row{

    width: 20%;
    margin: 0 auto;
    margin-right: 75%;
    user-drag: none;  
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
    
}

.list-item-clothing-article{

    list-style-type: none;
    height: 30px;
}

.clothing-container{
    display: flex;
    flex-direction: row;
    position: absolute;
    z-index: 98;
    touch-action: none;
    
}






.clothing-container-button{

    width: 20px;
    height: 20px;
    background-color: black;
    position: absolute;
    top: 0;
    left: 10px;
    cursor: pointer;
    z-index: 99;

}

.clothing-container-label{

 position: absolute;
 top: -2px;
 left: 38px;
 width: 270px;
 cursor: pointer;

}

.mydiv{

    display: none;
    width: 100%;
}



.clothing-container-article{

display: none;
width: 100%;
height: auto;
cursor: grabbing;
user-drag: none;  
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;

}


/* .clothing-container-article:hover{

    border: 2px dashed #ff1a00;
    margin: -2px;
} */


.clothing-type-label{

    width: 100%;
    height: auto;
    background-color: white;
    border: 1px solid black;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    

}

.clothing-type-label-container{

    width: 100%;
    height: auto;
    padding-top: 25px;
    padding-bottom: 45px;
    display: none;
    border: 1px solid black;
    background-color: rgb(255, 255, 255);
    position: relative;

}


.clothing-container-index{

    
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0px;
    right: -39px;
}

.clothing-container-index-button-up{


    width: 10px;
    border: 1px solid black;
    height: 10px;
    text-align: center;
    padding: 8px;
    margin-top: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clothing-container-index-button-up:active {

    background-color: black;
    color: white;
}



.clothing-container-index-button-down{


    width: 10px;
    border: 1px solid black;
    height: 10px;
    text-align: center;
    padding: 8px;
    margin-top: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

}

.clothing-container-index-button-down:active {

    background-color: black;
    color: white;
}

.append{

    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 17%;
    display: flex;
    flex-direction: column;
    align-items: center;
    

}


.page-button-container{

    position: absolute;
    bottom: 10%;
    display: flex;
    width: 100%;
    height: auto;

}


.page-button-left{

    left: -15%;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    position: absolute;
    text-align: center;
}


.page-button-right{

    right: -15%;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    position: absolute;
    text-align: center;
}

.clothing-container-button-toggle{

    width: 20px;
    height: 20px;
    background-color: black;
    z-index: 99;
    margin-bottom: 5px;
    cursor: pointer;
    

}


.clothing-container-button-show{

    width: 20px;
    height: 20px;
    background-color: black;
    z-index: 99;

}


.resizeable-example{
    
    width: auto;
    display: flex;
    z-index: 99;
    margin: 0 auto;
    justify-content: center;
}

.resizeable-example-space{
    
    width: auto;
    display: flex;
    z-index: 99;
    margin: 0 auto;
    height: 100px;
    justify-content: center;
}

.resize-tab-example{

    width: 0;
    height: 0;
    border-bottom: 10px solid rgb(0, 0, 0);
    border-left: 10px solid transparent;
    margin-top: 5px;
}

.clothing-container-button-example{

    width: 20px;
    height: 20px;
    background-color: black;
    z-index: 99;
    margin-left: 10px;

}


.resize-tab {
    width: 0;
    display: none;
    height: 0;
    border-bottom: 15px solid rgb(0, 0, 0);
    border-left: 15px solid transparent;
    position: absolute;
    bottom: -10px;
    right: -32px;
  }


/* Woo Commerce */


.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{

  color: rgba(0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid black;

  
}

.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background-color: black;
  text-decoration: none;
  background-image: none;
  color: white;
}

.shopping-cart-icon{

width: auto;

}

.woocommerce-cart-form{

    font-size: 10px;
    color: #000000;

}

.woocommerce table.shop_table{

    font-size: 20px;
    color: #000000;


}


.woocommerce table.shop_table a:hover {
    background-color: rgba(255, 255, 255, 0);;
    color: black;
    border: none;
  }

.cart{

    font-size: 20px;
    color: #000000;
    background-color: #ffffff;

}

.product-page-container-div a{

    border: 1px dashed #000000;
    padding: 5px 20px 5px 20px;

}

.product-page-container-div li{


    background-color: transparent;
}

.cart a:hover {
    background-color: rgb(0, 0, 0);
    color: #ffffff;
    border: 1px dashed #ffffff;
  }

.shopping-cart-div{

    width: 70px;
    display: flex;
    align-self: center;
    justify-content: center;
    position: relative;

}

.shopping-cart-div p{

    font-family: 'UnifrakturMaguntia';
    position: absolute;
    top: -3px;
    right: 7px;
    font-style: italic;
    font-size: 35px;

}



.woocommerce .products ul, .woocommerce ul.products {

margin: 0 auto;
width: 90%;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: center;

}

.woocommerce ul.products[class*=columns-] li.product {

    margin: 2% 2% 2% 2%;
}

.woocommerce nav.woocommerce-pagination ul li span.current {

    background: none;
    color: black;
}



.page-numbers {
    border: 1px solid black;
    border-right: 1px solid black;
    
}

.woocommerce nav.woocommerce-pagination ul{

    border: 1px solid black;
    background: white;
    color: black;
}

.woocommerce nav.woocommerce-pagination ul li {

    border-right: 1px solid black;
}

.page-numbers a{


    background: white;
    color: black;
}

.content-gallery{

    display: flex;
    justify-content: center;
    margin-bottom: 3%;
}

.content-gallery img{

    border: 1px solid black;
    width: 25%;
    height: 25%;
    margin-left: 1%;
    margin-right: 1%;
}

.content-gallery img:hover{
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.32);
-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.32);
-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.32);
}

.content-gallery img:nth-child(2){

    margin-left: 10px;
    margin-right: 10px;
}

.product-page-container-div{

    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 65%;
    font-family: 'Roboto Mono';
    
    
}


.woocommerce-product-details__short-description p, .woocommerce-product-details__short-description  li{

    text-align: center;
    padding-top: 2%;
    padding-bottom: 2%;
    color: #000000;
    
   
}

.woocommerce ul.products li.product,.woocommerce-page ul.products li.product {
    padding: 15px;
    width: 18.9%;
    border: 1px solid black;
    margin: 2% 2% 2% 2%;
}


li.product:hover {
    box-shadow: 20px 15px 0px 0px rgba(0,0,0,1);
-webkit-box-shadow: 20px 15px 0px 0px rgba(0,0,0,1);
-moz-box-shadow: 20px 15px 0px 0px rgba(0,0,0,1);
}





.woocommerce-product-details__short-description{

    margin-top: 3%;
    margin-bottom: 3%;
    align-content: center;
    color: #000000;
}



.product_title.entry-title{

    font-family: 'Roboto Mono';
    color: #000000;
    border-bottom: 1px solid #000000;
    margin-bottom: 5%;
    /* text-shadow: 0px 1px 0px rgba(0, 0, 0, 1); */
    padding-bottom: 1%;
    font-size: 35px;


}

.sizing-table {
    border:1px solid #000000;
    border-collapse:collapse;
    width: 20%;
    margin: 0 auto;
}
.sizing-table th {
    border:1px solid #000000;
    
}
.sizing-table tr th :first-child{
    display: none;
    
}
.sizing-table td {
    border:1px solid #000000;
    width: 30%;
    text-align: center;
}


li{

    background-color: white;
}

.page-numbers {
    border: 0px solid black;
    border-right: 0px solid black;
}

.pattern-grid-lg {
    background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
    background-size: 105px 105px;
}




.heart {

  position: absolute;

  height: 75px; /* adjust to control the size */
  aspect-ratio: 1;
  --_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
  -webkit-mask-box-image: var(--_m);
             mask-border: var(--_m);
  clip-path: polygon(-41% 0,50% 91%, 141% 0);
  background: #cc333f;
}
/* fallback until better support for mask-border */
@supports not (-webkit-mask-box-image: var(--_m)) { 
  .heart {
    mask:
     radial-gradient(at 70% 31%,#000 29%,#0000 30%),
     radial-gradient(at 30% 31%,#000 29%,#0000 30%),
     conic-gradient(#000 0 0) bottom/100% 50% no-repeat;
  }

}

.star {

  position: absolute;
  top: -2px;
  left: 28px;
  z-index: 9;
  width: 55px;  
  aspect-ratio: 1;
  background: #F8CA00;
  clip-path: polygon(50% 0,
    calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
    calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn))) 
   ); 
  /* or more simple
  clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%); 
   */
}


.sparkle {
  height: 50px;
  width: 30px;
  background: #EDC951;
  mask: radial-gradient(#0000 71%, #000 72%) 10000% 10000%/99.5% 99.5%;

  /* if you will use a different unit than px consider round()
   height: round(__,1px);
   width: round(__,1px);
  */
}

.flower {
  width: 150px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/37.02% 37.02% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 88.526% 81.871% var(--g),31.594% 96.489% var(--g),0.099% 46.86% var(--g),37.566% 1.571% var(--g),92.216% 23.209% var(--g),radial-gradient(100% 100%,#000 25.476%,#0000 calc(25.476% + 1px));
}

.blob {
    left: 28px;
    bottom: -128px;
    width: 100px;
  aspect-ratio: 1;
  clip-path: shape(from 19.04% 52.23%,curve to 20.10% 39.91% with 24.82% 46.82%,curve to 17.24% 26.00% with 15.37% 33.00%,curve to 30.97% 27.14% with 19.11% 19.00%,curve to 44.74% 29.05% with 42.83% 35.27%,curve to 52.25% 17.87% with 46.66% 22.84%,curve to 66.26% 10.83% with 57.84% 12.90%,curve to 68.41% 24.25% with 74.67% 8.76%,curve to 78.79% 36.05% with 62.15% 39.74%,curve to 89.15% 40.53% with 95.42% 32.36%,curve to 72.13% 51.05% with 82.88% 48.69%,curve to 63.51% 57.31% with 61.37% 53.41%,curve to 64.79% 65.40% with 65.65% 61.21%,curve to 61.84% 76.27% with 63.93% 69.58%,curve to 54.13% 83.81% with 59.75% 82.96%,curve to 45.50% 76.90% with 48.51% 84.66%,curve to 36.69% 70.81% with 42.50% 69.13%,curve to 21.34% 72.58% with 30.89% 72.48%,curve to 12.53% 65.16% with 11.80% 72.68%,curve to 19.04% 52.23% with 13.25% 57.64%);
}

.dashed-circle {
  --n: 10;   /* number of dashes */
  --d: 8deg; /* control the space between dashes */
  
  height: 650px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 3px; /* border thickness */
  /* the coloration (more examples: https://css-tip.com/dashed-rounded-border/ */
  background: 
    repeating-conic-gradient(
      #4d574f 0 calc(  360deg/var(--n)), 
      #3d3d3d 0 calc(2*360deg/var(--n))
    );
  mask: 
    linear-gradient(#0000 0 0) content-box intersect, 
    repeating-conic-gradient(from calc(var(--d)/2),
     #000  0 calc(360deg/var(--n) - var(--d)),
     #0000 0 calc(360deg/var(--n))
   );
}


.cross {
    background: red;
    height: 100px;
    position: relative;
    width: 20px;
 }

.cross:after {
background: inherit;
content: "";
height: 20px;
left: -40px;
position: absolute;
top: 40px;
width: 100px;
}

.starcontainer{

    
}

.shopbody{

    position: relative;
}

@media screen and (max-width: 1650px) {

    .woocommerce ul.products[class*=columns-] li.product{


        

    }



}

@media screen and (max-width: 1400px ){


    .woocommerce ul.products[class*=columns-] li.product{


        width: 23.9%;

    }
    
}


@media screen and (max-width: 1000px){

    .woocommerce ul.products[class*=columns-] li.product{


        width: 22.9%;

    }

        .clothing-type-label-container{

        height: 350px;
    }
    

}

@media screen and (max-width: 900px) {

    .woocommerce ul.products[class*=columns-] li.product{


        width: 23.9%;

    }

    


}



@media screen and (max-width: 550px) {


    body{

        height: 280vh;
    }

    .menu{
        width: 100%;
    }

    .title{

        font-size: 45px;
        width: 110px;
    }

    .pages{

        font-size: 15px;
        width: 45px;
    }
    .shopping-cart-div{

        width: 45px;
    }

    .append{

        width: 100%;
        height: 170vh;
        margin: 0 auto;
    
    }

    header{

        height: 10%;
    }


    .clothing-builder-row {
        width: 80%;
        margin: 0 auto;
        }

    .page-button-right {
        right: 2%;
    }

    .page-button-left {
        left: 2%;
    }

    .clothing-type-label-container{

        overflow: hidden;
    }

    .clothing-container{

        max-width: 75vw;

    }

    .clothing-container-index-button-down {
        width: 5px;
        height: 5px;
        line-height: 50%;
    }


    .clothing-container-index-button-up {
        width: 5px;
        height: 5px;
        line-height: 50%;
    }

    .sizing-table {

        width: 50%;
    }

    .clothing-container-index{


        top: 8%;
    }
    
    .clothing-container-article{

    

    }

    .woocommerce ul.products[class*=columns-] li.product{


        width: 80%;

    }
}