/* Colors */
/* Extensions */
.archive .options-overlay-container ul, .archive nav.woocommerce-pagination .current-indicator {
  font-family: Lato;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 100%;
}

.archive .options-overlay-container .taxonomy-filter-container .taxonomy-title, .archive .shop-men,
.archive .shop-women, .archive .trial-text-responsive,
.archive .trial-text-iphone,
.archive .trial-text-ipad,
.archive .trial-text {
  font-family: Inconsolata;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.08em;
}

/* CSS for shop and glasses archive */
.archive {
  /* Custom elements default to inline; block layout so ul.products flex/grid works */
}
.archive .koko-archive-container koko-archive-list-wrapper,
.archive .koko-archive-container content {
  display: block;
}
.archive {
  /* main container */
}
.archive .glasses-store {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  margin: 64px 70px 64px 70px;
}
.archive .free-trial-text-space {
  grid-area: 1/1/2/2;
  padding-top: 17px;
}
.archive .trial-text-responsive,
.archive .trial-text-iphone,
.archive .trial-text-ipad,
.archive .trial-text {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.archive .trial-text-responsive {
  padding-left: 20px;
  display: none;
}
.archive .trial-text-iphone {
  flex-direction: row;
  display: none;
}
.archive .trial-text {
  padding-left: 20px;
}
.archive .trial-text-ipad {
  padding-left: 20px;
  display: none;
}
.archive .flex-container {
  width: 33.3333333%;
  display: flex;
  justify-content: center;
}
.archive .flex-container a img {
  padding-bottom: 8px;
}
.archive .flex-container a p {
  max-width: 300px;
}
.archive .materialimage img {
  width: 54px;
  height: 54px;
}
.archive {
  /* CSS for lenses tilte */
}
.archive .D-product-text {
  margin: 10px 0 6px 0;
}
.archive {
  /* CSS for search bar */
}
.archive #search-icon {
  width: 20px;
  height: 22px;
  border: none;
  display: inline-flex;
  background: unset;
  padding: 0;
  cursor: pointer;
  /* url('') no-repeat top left; */
}
.archive #search-icon span {
  width: 100%;
  height: 100%;
  display: block;
}
.archive {
  /* Product List */
}
.archive ul.products,
.archive .woocommerce-page ul.products {
  display: flex;
  flex-wrap: wrap;
}
.archive ul.products li.product,
.archive .woocommerce-page ul.products li.product {
  margin: 0 3.3% 2.992em 0;
  padding: 0;
  position: relative;
  width: 30%;
}
.archive {
  /* CSS for shop pagination */
}
.archive .atras {
  margin: 15px;
  cursor: pointer;
}
.archive .sig {
  margin: 15px;
  cursor: pointer;
}
.archive {
  /* CSS for loading AJAX animation  */
}
.archive .pre-loader {
  display: flex;
  width: 100vw;
  height: 15vh;
  align-content: flex-end;
  justify-content: space-evenly;
  align-items: center;
}
.archive {
  /* CSS for trial banner */
}
.archive #free-id {
  display: none;
  flex-direction: column;
  text-align: -moz-center;
  text-align: center;
}
.archive #text-free-id {
  padding-top: 1.5%;
}
.archive {
  /* Background Hero Shop women Shop Men */
}
.archive .hero {
  background-image: url(/wp-content/uploads/2020/03/Group-23.png);
  height: 450px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.archive .hero_overlay {
  height: 450px;
  background-color: black;
  opacity: 0.1;
}
.archive {
  /* Css for hero text */
}
.archive .shop-men,
.archive .shop-women {
  color: #f4d5c1;
  position: absolute;
  font-size: 24px;
  cursor: pointer;
}
.archive .shop-men {
  right: 60px;
  top: 50px;
}
.archive .shop-women {
  bottom: 60px;
  left: 120px;
}
.archive .shop-men input {
  display: none;
}
.archive .shop-women input {
  display: none;
}
.archive {
  /* CSS For filters  */
}
.archive .label-radio input:checked ~ .checkmark-koko {
  background-color: black;
  /* Show the indicator (dot/circle) when checked */
}
.archive .label-radio input:checked ~ .checkmark-koko:after {
  display: block;
}
.archive .label-radio {
  /* Style the indicator (dot/circle) */
}
.archive .label-radio .label-radio .checkmark-koko:after,
.archive .label-radio .checkmark-koko-rounded:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.archive .label-radio .label-radio input:checked ~ .checkmark-koko-rounded {
  background-color: black;
}
.archive .label-radio {
  /* When the radio button is checked, add a blue background */
}
.archive .label-radio:hover input ~ .checkmark-koko,
.archive .label-radio:hover .checkmark-koko-rounded:hover {
  background-color: #ccc;
}
.archive {
  /* Filter bar CSS */
}
.archive .navbar-elements {
  height: auto;
  display: grid;
  grid-template-columns: 30% 22.5% 22.5% 25%;
  margin: 0px 56px 0px 56px;
  overflow: hidden;
}
@media only screen and (max-width: 1024px) {
  .archive .navbar-elements {
    margin-block-start: 10px;
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: space-evenly;
    flex-direction: row;
  }
}
@media screen and (max-width: 660px) {
  .archive .navbar-elements {
    margin: 0px 24px 0px 24px;
  }
}
@media (max-width: 575.98px) {
  .archive .navbar-elements {
    margin-block-start: 10px;
    display: grid;
    grid-template-columns: 55%;
    grid-template-rows: 45px 65px 65px 55px;
    justify-content: space-evenly;
    flex-direction: row;
  }
}
@media (max-width: 420.98px) {
  .archive .navbar-elements {
    grid-template-columns: 85%;
  }
}
.archive .navbar-size {
  padding-top: 31px;
  width: 100%;
  height: auto;
}
.archive {
  /* Trial Switch */
}
.archive .mat-slide-toggle .mat-slide-toggle-bar {
  background-color: #e0e0e0;
}
.archive .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
  background-color: #f4d5c1;
}
.archive .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
  background-color: rgba(251.6849315068, 242.3424657534, 236.3150684932, 0.8);
}
.archive {
  /* Pagination */
}
.archive nav.woocommerce-pagination {
  text-align: right;
  padding: 0 20px;
}
.archive nav.woocommerce-pagination .current-indicator {
  margin: 0 8px;
  font-size: 36px;
}
.archive nav.woocommerce-pagination .prev,
.archive nav.woocommerce-pagination .next {
  transition: width 0.2s ease, height 0.2s ease;
}
.archive nav.woocommerce-pagination .prev:not(.disable),
.archive nav.woocommerce-pagination .next:not(.disable) {
  cursor: pointer;
}
.archive nav.woocommerce-pagination .prev,
.archive nav.woocommerce-pagination .next {
  width: 23px;
  height: 23px;
  background-size: contain;
  background-repeat: no-repeat;
}
.archive nav.woocommerce-pagination .prev:hover,
.archive nav.woocommerce-pagination .next:hover {
  width: 25px;
  height: 25px;
}
.archive nav.woocommerce-pagination .prev:not(.disable) {
  background-image: url("../../images/pag-prev.png");
}
.archive nav.woocommerce-pagination .next:not(.disable) {
  background-image: url("../../images/pag-next.png");
}
.archive {
  /* Dropdown Overlay */
  /* fix initial load on angular component */
}
.archive koko-archive-filter-dropdown > filter-options,
.archive koko-archive-sort-dropdown > filter-options {
  display: none;
}
.archive .options-overlay-container {
  background-color: #fff;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-top: 4px;
  padding: 24px;
}
.archive .options-overlay-container .taxonomy-filter-container {
  min-width: 280px;
}
.archive .options-overlay-container .taxonomy-filter-container .taxonomy-title {
  font-size: 18px;
  font-weight: 700;
  margin-top: 24px;
}
.archive .options-overlay-container .taxonomy-filter-container ul {
  display: grid;
  grid-template-columns: 50% 50%;
}
.archive .options-overlay-container .sort-options-container ul {
  display: grid;
  display: block;
  grid-template-columns: 50%;
}
.archive .options-overlay-container .sort-options-container ul li {
  display: block;
  font-weight: 700;
}
.archive .options-overlay-container .sort-options-container ul li p {
  margin: 8px 0;
}
.archive .options-overlay-container .sort-options-container ul li.selected {
  color: #f4d5c1;
}
.archive .options-overlay-container ul {
  font-size: 18px;
  padding: 0;
  display: block;
  list-style: none;
  margin: 4px 0px;
}
.archive .options-overlay-container ul li {
  display: inline-block;
  cursor: pointer;
  font-size: 18px;
}
.archive .options-overlay-container ul li > * {
  display: inline-block;
}
.archive .options-overlay-container ul li .preview {
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: transparent;
  margin-right: 8px;
  overflow: hidden;
}
.archive .options-overlay-container ul li .preview,
.archive .options-overlay-container ul li .preview * {
  width: 32px;
  height: 32px;
}
.archive .options-overlay-container ul li .preview.empty {
  border-color: rgb(108.2321428571, 108.2321428571, 100.7678571429);
  border-width: 1px;
}
.archive .options-overlay-container ul li.selected .preview {
  border-color: #1d1d1b;
  border-width: 2px;
}
.archive {
  /* Search */
}
.archive mat-form-field.search-field {
  width: 260px;
}
.archive mat-form-field.search-field .mat-form-field-flex {
  padding: 0.25em 0.25em 0 0.25em;
  background-color: transparent;
}
.archive mat-form-field.search-field .mat-form-field-infix {
  padding: 0.25em 0 0.25em 0;
}
.archive {
  /* Parent 1920px width CSS: This CSS overrides original css to show products */
}
.archive .woocommerce ul.products li.product,
.archive .woocommerce-page ul.products li.product {
  margin: 0 0 2.992em 0;
}
.archive .woocommerce ul.products li.product .onsale {
  display: none;
}
.archive .woocommerce ul.products.columns-3 li.product,
.archive .woocommerce-page ul.products.columns-3 li.product {
  margin-right: -3.8%;
}
.archive .woocommerce .woocommerce-result-count {
  display: none;
}
.archive .woocommerce .woocommerce-ordering select {
  display: none;
}
.archive .woocommerce ul.products.columns-3 li.product,
.archive .woocommerce-page ul.products.columns-3 li.product {
  width: 300px;
}
.archive {
  /* min-width 1200px and max-width 1600px CSS for laptops - widescreen */
}
@media only screen and (max-width: 600px) {
  .archive {
    /* Product List */
  }
  .archive ul.products[class*=columns-] li.product,
  .archive .woocommerce-page ul.products li.product {
    margin: 0 3.3% 2.992em 0;
    width: 100%;
  }
}
@media only screen and (min-width: 48em) {
  .archive {
    /* Product List */
  }
  .archive ul.products[class*=columns-] li.product,
  .archive .woocommerce-page ul.products li.product {
    margin: 0 3.3% 2.992em 0;
    width: 45%;
  }
}
@media only screen and (min-width: 75em) {
  .archive > .koko-archive-container > * {
    padding: 0;
  }
  .archive {
    /* Product List */
  }
  .archive ul.products[class*=columns-] li.product,
  .archive .woocommerce-page ul.products li.product {
    margin: 0 3.3% 2.992em 0;
    width: 30%;
  }
}
.archive {
  /* IPAD RESPONSIVE */
}
@media only screen and (min-width: 415px) and (max-width: 1024px) {
  .archive {
    /* Product List */
  }
  .archive #text-free-id {
    margin: 5%;
  }
  .archive .white-screen1 {
    margin-top: 70%;
  }
  .archive .white-screen2 {
    margin-top: 70%;
  }
  .archive .flex-container {
    padding-inline-end: 10% !important;
    padding-bottom: 7% !important;
    width: 30% !important;
    margin-inline-start: 10% !important;
  }
  .archive .glasses-store {
    width: 100% !important;
    margin-top: 30% !important;
    margin: 200 0 0 0 !important;
  }
  .archive .ipad-nav-bar {
    display: grid;
  }
  .archive .trial-text-responsive {
    display: block;
  }
  .archive .hero {
    height: 150px;
  }
  .archive .shop-women {
    left: 15px;
    bottom: 0;
    font-size: 16px;
  }
  .archive .shop-men {
    font-size: 16px;
    left: 89%;
    top: 0px;
  }
  .archive .hero_overlay {
    height: 150px;
  }
  .archive .trial-text {
    display: none !important;
  }
  .archive .woocommerce ul.products.columns-3 li.product,
  .archive .woocommerce-page ul.products.columns-3 li.product {
    left: 0% !important;
    margin-inline-end: 0px !important;
  }
  .archive .dropdownsort {
    margin-left: 0;
    left: 0% !important;
  }
  .archive .search-bar-position {
    padding-top: 40px;
  }
  .archive #search-icon {
    padding-bottom: 10px;
  }
  .archive .trial-text-responsive {
    width: max-content;
    margin-left: 20%;
  }
  .archive .dropdown {
    margin-left: 0%;
    position: inherit;
    left: 0 !important;
  }
  .archive .dropdown-content-sortby {
    left: -62px;
  }
  .archive .dropdown-content {
    left: -40px;
  }
  .archive .no-border button {
    background: white;
  }
  .archive .woocommerce ul.products.columns-3 li.product,
  .archive .woocommerce-page ul.products.columns-3 li.product {
    left: 15%;
  }
}
.archive {
  /* Mobile responsivness */
}
@media only screen and (max-width: 414px) {
  .archive .pre-loader {
    width: 100%;
    margin-left: 10%;
    margin-right: 10%;
  }
  .archive .dropdown-parents {
    width: 100%;
    justify-content: center;
  }
  .archive .glasses-store {
    margin-top: 390px !important;
    margin-left: 16% !important;
  }
  .archive #text-free-id p {
    font-size: 16px;
  }
  .archive #text-free-id {
    margin: 5%;
  }
  .archive .white-screen1 {
    margin-top: 70%;
  }
  .archive .white-screen2 {
    margin-top: 70%;
  }
  .archive .trial-text-iphone {
    font-family: Inconsolata;
    font-style: normal;
    font-weight: normal;
    flex-direction: row;
    align-items: center;
    display: block !important;
  }
  .archive .navbar-size {
    display: unset;
  }
  .archive .iphone-nav-bar {
    display: block;
  }
  .archive .hero {
    height: 150px;
  }
  .archive .shop-women {
    top: 8px;
    left: 15px;
    font-size: 16px;
  }
  .archive .shop-men {
    font-size: 16px;
    left: 284px;
    top: auto;
    bottom: 8px;
  }
  .archive .hero_overlay {
    height: 150px;
  }
  .archive .woocommerce ul.products.columns-3 li.product,
  .archive .woocommerce-page ul.products.columns-3 li.product {
    left: 0% !important;
    margin-inline-end: 0px !important;
  }
  .archive .search-bar-position {
    display: block;
    width: 250px;
  }
  .archive .search-field {
    width: 210px;
  }
  .archive .trial-text-responsive {
    display: block;
    width: max-content;
    margin-left: 20%;
  }
  .archive .trial-text {
    display: none;
  }
  .archive .dropdown-content-sortby {
    left: -62px;
    margin: 9 0;
    display: flex;
    flex-direction: column;
  }
  .archive .dropdown-content-sortby label {
    margin: 10;
  }
  .archive .dropdown-content {
    left: -40px;
  }
  .archive .no-border button {
    background: white;
  }
  .archive #padding {
    padding-top: 30px !important;
    display: none !important;
    justify-items: center;
  }
  .archive .woocommerce ul.products li.product a img {
    left: 15%;
    width: 300px;
  }
  .archive .woocommerce ul.products.columns-3 li.product,
  .archive .woocommerce-page ul.products.columns-3 li.product {
    left: 15%;
  }
}

.archive ul.products,
.archive .woocommerce-page ul.products {
  direction: ltr;
}