:root {
       --primary-color: #7B1EA2;
       --secondary-color:#424C86;
       --very-light-purple:#EEE8F0; 
       --border-radius: 14px;
}

a{
       color:var(--primary-color);
       text-decoration: underline;
}

 .c7_products-container{
       margin:0 auto;
}

@media(max-width:768px){
       .c7_products-container{
              padding-left:1.5rem;
              padding-right:1.5rem;
       }
}


/* tailwind extra light css grid */

/* grid */
.grid{display: grid; gap: 12px;}

.grid-cols-1{grid-template-columns: 1fr;}
.grid-cols-2{grid-template-columns: repeat(2, 1fr)}
.grid-cols-3{ grid-template-columns: repeat(3, 1fr)}
.grid-cols-4{grid-template-columns: repeat(4, 1fr)}
.grid-cols-5{grid-template-columns: repeat(5, 1fr)}
.grid-cols-6{grid-template-columns: repeat(6, 1fr)}
.grid-cols-7{grid-template-columns: repeat(7, 1fr)}
.grid-cols-8{grid-template-columns: repeat(8, 1fr)}
.grid-cols-9{grid-template-columns: repeat(9, 1fr)}
.grid-cols-10{grid-template-columns: repeat(10, 1fr)}
.grid-cols-11{grid-template-columns: repeat(11, 1fr)}
.grid-cols-12{grid-template-columns: repeat(12, 1fr)}

.col-span-1{ grid-column: span 1 / span 1; }
.col-span-2{ grid-column: span 2 / span 2; }
.col-span-3{ grid-column: span 3 / span 3; }
.col-span-4{ grid-column: span 4 / span 4; }
.col-span-5{ grid-column: span 5 / span 5; }
.col-span-6{ grid-column: span 6 / span 6; }
.col-span-7{ grid-column: span 7 / span 7; }
.col-span-8{ grid-column: span 8 / span 8; }
.col-span-9{ grid-column: span 9 / span 9; }
.col-span-10{ grid-column: span 10 / span 10; }
.col-span-11{ grid-column: span 11 / span 11; }
.col-span-12{ grid-column: span 12 / span 12; }


@media( max-width: 768px){
       .col-span-1,
       .col-span-2,
       .col-span-3,
       .col-span-4,
       .col-span-5,
       .col-span-6,
       .col-span-7,
       .col-span-8,
       .col-span-9,
       .col-span-10,
       .col-span-11,
       .col-span-12{
              grid-column: span 12 / span 12;
       }

       .grid-cols-1,
       .grid-cols-2,
       .grid-cols-3,
       .grid-cols-4,
       .grid-cols-5,
       .grid-cols-6,
       .grid-cols-7,
       .grid-cols-8,
       .grid-cols-9,
       .grid-cols-10,
       .grid-cols-11,
       .grid-cols-12
       {
              grid-template-columns:1fr
       }
}

/* flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.items-center{ align-items: center; }
.w-full{ width: 100%; }
.hidden{ display: none; }

/* fonts */
.font-bold{ font-weight: 700; }
.font-semibold{ font-weight: 600; }
.font-medium{ font-weight: 500; }
.font-normal{ font-weight: 400; }

/* roundness */
.rounded{
       border-radius: var(--border-radius);
}

.rounded-full{
       border-radius: 100%;
}
/* end tailwind extra light css grid */

/* contact person */
.contact-person{
       padding:1em;
       margin:1em 1em 0 0;
       border:1px solid var(--very-light-purple);
       border-radius: var(--border-radius);
}

.contact-person .contact-person__head{
       gap:1em;
}

.contact-person .contact-person__image{
       width: 56px;
       height: 56px;
}

.contact-person .contact-person__image img{
       height: 100%;
       width:100%;
       border-radius: 100%;
       object-fit: cover;
}

.contact-person .contact-person__name{
       display: flex;
       flex-direction: column;
}

.contact-person .contact-person__info{
       margin-top:1em;
}

@media(max-width:768px)
{
       .c7_products.grid{
              padding-left: 1.5em;
              padding-right: 1.5em;
       }
       .contact-person{
              display: none;
       }
}

.c7_products.grid > .grid{
       gap:3em;
}

.c7_products--title{
       margin-bottom:15px;
}

.c7_products-filter {
       min-height: 300px;
       color:var(--primary-color);
}

.c7_products-filter__input-search input {
       border: 1px solid #ccc;
       padding: .5em 1em;
       height: 48px;
       width: auto;
       flex-grow:1;
       border-top-left-radius: var(--border-radius);
       border-bottom-left-radius: var(--border-radius);
       color:#898989;
}

.c7_products-filter__input-search .search-term__input{
       margin-top:15px;
}

label{
       color:var(--secondary-color);
       font-weight: 600;
       font-size:20px;
}

.c7_products-filter__input-search button{
       background: var(--primary-color);
       color:var(--primary-color);
       padding: .5em 1em;
       font-size: 1.5em;
       border-top-right-radius: var(--border-radius)!important;
       border-bottom-right-radius: var(--border-radius)!important;
       border-top-left-radius: 0!important;
       border-bottom-left-radius: 0!important;
       height:48px;
       display: flex;
       gap:1em;
       align-items: center;
}

.c7_products-filter__input-search label div{
       border:2px solid white;
       background: white;
}


.c7_products-filter__input-category select{
       border: none;
       height: max-content;
       padding: .5em 1em;
       height: 58px;
}

.c7_products-filter__input-search,
.c7_products-filter__input-category {
       display: flex;
       flex-direction: column;
}

.c7_products-filter__characters {
       width: 100%;
       gap: 1em;
}

.c7_products-filter__characters .character{
       width: 40px;
       height: 40px;
}

.c7_products-filter__characters .character a {
       font-size: 1em;
       text-decoration: underline;
       text-transform: uppercase;
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       padding:.5em;
       border-bottom: 3px solid transparent;
} 

.c7_products-filter__characters .character a{
       color:var(--secondary-color);
}

.c7_products-filter__characters .character a.active, 
.c7_products-filter__characters .character a:not(.disabled):hover
{
       background:#EEE8F0;
       border-bottom: 3px solid var(--primary-color);
       color: var(--primary-color);
       text-decoration: none;
       font-weight: 600;
}

.c7_products-filter__characters .character a.disabled{
       color:#ccc;
       text-decoration: none;
}

.c7_products__character-group {
       gap: 1em;
}

.c7_products .c7_products__character-group h2 {
       color:var(--secondary-color);
}

.c7_products .c7_products__letter:not(:first-of-type){
       margin-top:1em;
}

.c7_products .c7_products__letter h3{
       color:var(--primary-color);
       font-size:20px;
       text-decoration: underline;
}

.c7_products-reset{
       margin-top:1em;
       margin-bottom:1em;
}