/* Header */
.woocommerce-products-header {
  display: none;
}

.woocommerce-no-products-found {
  display: contents;
}

#page.site .c-shop-header {
  margin-bottom         : 24px;
  display               : grid;
  column-gap            : 8px;
  grid-template-columns : 1fr auto;
  grid-template-areas: 
    "title   title   "
    "count   count   "
    "order   filter  "
    "details details ";
}
@media(min-width: 768px) {
  #page.site .c-shop-header {
    grid-template-columns : 1fr auto auto;
    grid-template-areas: 
    "title   title   title  "
    "count   order   filter "
    "details details details";
  }
}
@media(min-width: 1180px) {
  #page.site .c-shop-header {
    grid-template-columns : 1fr auto auto;
    grid-template-areas: 
      "title   order   filter "
      "count   .       .      "
      "details details details";
  }
}


#page.site .c-shop-header > h1 {
  grid-area     : title;
  margin        : 0;
  margin-bottom : 16px; 
}
@media(min-width: 1180px) {
  #page.site .c-shop-header > h1 {
    margin-bottom : 0;
  }
}
#page.site .c-shop-header .woocommerce-result-count {
  grid-area : count;
  padding   : 0;
}
#page.site .c-shop-header .woocommerce-ordering {
  grid-area    : order;
  margin-right : 16px;
  padding      : 0;
}
#page.site .c-shop-header > button {
  grid-area             : filter;
  grid-template-columns : auto auto;
  column-gap            : 8px;
}
#page.site .c-shop-header > button::after {
  content             : '';
  display             : block;
  width               : 16px;
  height              : 16px;
  background          : url(/wp-content/plugins/custom/assets/filter-icon2.svg);
  background-repeat   : no-repeat;
  background-position : center;
  background-size     : 16px 16px;
} 
#page.site .c-shop-header > button:hover::after {
  opacity: 0.8;
}
#page.site .c-shop-header .c-search {
  grid-area  : details;
}

/* Product Items */
.c-product-image img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: unset !important;
}

.archive .products {
  margin-bottom: 16px;
}
@media(min-width: 768px) {
  .archive .products {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr 1fr;
    column-gap            : 16px;
    grid-template-rows    : repeat(4, auto auto auto auto auto auto);
    margin-bottom         : 0;
  }
}
.archive .products::before {
  display: none;
}
.archive .product-category,
.archive .product {
  border                : 1px solid var(--c-border);
  border-radius         : var(--c-radius);
  padding               : 8px;
  margin-bottom         : 8px !important;
  text-align            : left !important;
  background-color      : white ;
  display               : grid;
  grid-template-columns : 92px 1fr auto;
  grid-template-areas:
    "image   title  title    title  "
    "image   sku    sale     sale   "
    "image   .      oldPrice price1 "
    "image   price2 price2   price2 "
    "image   .      buttons  buttons";
}
@media(min-width: 768px) {
  .archive .product-category,
  .archive .product {
    grid-row              : span 6;
    width                 : 100% !important;
    border                : none;
    background-color      : var(--c-background);
    padding               : 0;
    margin-bottom         : 40px !important;
    grid-template-columns : 1fr auto;
    grid-template-rows    : subgrid;
    grid-template-areas:
      "image  image    image  "
      "title  title    title  "
      "sku    sale     sale   "
      ".      oldPrice price1 "
      "price2 price2   price2 "
      ".      buttons  buttons";
  }
}
.archive .product-category > a:nth-child(1),
.archive .product          > a:nth-child(1) {
  display: contents !important;
}

/* Image */
.archive .product-category .c-product-image,
.archive .product          .c-product-image {
  grid-area        : image;
  border-radius    : var(--c-radius);
  padding          : 8px;
  background-color : white;
}
@media(min-width: 768px) {
  .archive .product-category .c-product-image,
  .archive .product          .c-product-image {
    padding       : 16px;
    margin-bottom : 16px;
  }
}
.archive p.roduct-category .c-product-image img,
.archive .product          .c-product-image img {
  border-radius : var(--c-radius);
  margin        : 0 !important;
}



/* Title */
.archive .product-category .woocommerce-loop-category__title,
.archive .product          .woocommerce-loop-product__title {
  grid-area     : title;
  margin-left   : 16px;
  margin-bottom : 8px !important;
  margin-left   : 0;
}

/* SKU */
.archive .product-category .c-sku,
.archive .product          .c-sku {
  grid-area  : sku;
  align-self : center;
}


/* Price */
.archive .product > a:nth-child(1) .onsale {
  grid-area        : sale;
  justify-self     : right;
  margin-bottom    : 0;
  background-color : var(--c-error);
  color            : white;
  border           : none;
  font-size        : 12px;
  line-height      : 18px;
  font-weight      : 400;
  font-family      : var(--c-font-familiy-text);
  padding          : 1px 6px;
  border-radius    : 4px;
  text-transform   : none;
}

.archive .product > a:nth-child(1) .price {
  display: contents;
}
@media(min-width: 768px) {
  .archive .product > a:nth-child(1) .price {
    margin-bottom : 8px !important;
  }
}
.archive .product > a:nth-child(1) .price del {
  grid-area    : oldPrice ;
  justify-self : right;
  margin-right : 8px;
  align-self   : end;
}
.archive .product > a:nth-child(1) .price del .woocommerce-Price-amount {
  font-size    : 12px;
  line-height  : 18px;
  font-weight  : 400;
  font-family  : var(--c-font-familiy-text);
  color        : var(--c-text-secondary);
}
.archive .product > a:nth-child(1) .price ins {
  grid-area    : price1;
  margin-left  : 0;
  align-self   : end;
  justify-self : right;
}

.archive .product > a:nth-child(1) .price .woocommerce-Price-amount {
  grid-area    : price1;
  font-size    : 14px;
  line-height  : 20px;
  font-weight  : 400;
  font-family  : var(--c-font-familiy-text);
  color        : var(--c-text-secondary);
  justify-self : right;
  align-self   : end;
}

.archive .product > a:nth-child(1) .price .woocommerce-price-suffix {
  grid-area     : price2;
  font-size     : 12px;
  line-height   : 18px ;
  font-weight   : 400;
  font-family   : var(--c-font-familiy-text);
  color         : var(--c-text-secondary);
  justify-self  : right;
}



/* Add to cart Button */
.archive #page.site .product .add_to_cart_button {
  grid-area        : buttons;
  margin           : 0 !important;
  padding          : 8px 0 0 0;
  background-color : white;
  justify-self     : right;
}
@media(min-width: 768px) {
  .archive #page.site .product .add_to_cart_button {
    padding          : 0;
    background-color : var(--c-background);
  }
}
.archive #page.site .product .product_type_simple:not(.add_to_cart_button) {
  display : none;
}

/* Add to Cart Message */
.archive .product .add_to_cart_button::before {
  content             : '';
  display             : inline-block;
  height              : 14px;
  width               : 14px;
  background-repeat   : no-repeat;
  background-size     : 14px;
  background-position : center center;
  vertical-align      : text-bottom;
  background-image    : url(/wp-content/plugins/custom/assets/cart2-icon.svg);
}
.archive #page.site .product .added_to_cart {
  background-color : var(--c-success);
  color            : white; 
  position         : fixed;
  bottom           : 0;
  left             : 0;
  right            : 0;
  z-index          : 500;
  text-align       : center;
  border-radius    : 0;
}
.archive .product .added_to_cart::after {
  display : none;
}


/* Empty Categories */
/* .archive .product-category */