/* Product lists and the product card (design "الف · گالری آرام"). */

.ree-shop{
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--gap-top) clamp(16px, 4vw, 40px) calc(3.5*var(--u));
  box-sizing: border-box;
}

/* Breadcrumb, title, count and sort */
.ree-shop .woocommerce-breadcrumb{
  margin: calc(.5*var(--u)) 0 0;
  font-size: 12px;
  color: #777;
}
.ree-shop .woocommerce-breadcrumb a{ color: #777; text-decoration: none }
.ree-shop .woocommerce-breadcrumb a:hover{ color: var(--ree-blue) }
.ree-shop .woocommerce-products-header__title{
  margin: calc(1.25*var(--u)) 0 calc(.25*var(--u));
  font-family: var(--ree-font-head);
  font-size: clamp(24px, 1.6vw + 14px, 34px);
  font-weight: 400;
  line-height: 1.5;
}
.ree-shop .term-description{ max-width: 640px; color: #555; font-size: 14px; line-height: 2 }
.ree-shop .woocommerce-result-count{
  float: right;
  margin: calc(1*var(--u)) 0 calc(1.5*var(--u));
  font-size: 12.5px;
  color: #777;
}
.ree-shop .woocommerce-ordering{ float: left; margin: calc(.75*var(--u)) 0 calc(1.5*var(--u)) }
.ree-shop .woocommerce-ordering select{
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid rgba(26,26,26,.18);
  background: transparent;
  color: var(--ree-text);
  border-radius: 0;
}
.ree-shop .woocommerce-notices-wrapper:empty{ display: none }

/* Messages ("added to your cart", errors) — WooCommerce's own stylesheet is off on these pages. */
.ree-shop .woocommerce-message,
.ree-shop .woocommerce-info,
.ree-shop .woocommerce-error{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 calc(1.25*var(--u));
  padding: 14px 16px;
  list-style: none;
  background: #fff;
  border-inline-start: 3px solid var(--ree-blue);
  font-size: 14px;
  line-height: 1.9;
}
.ree-shop .woocommerce-error{ border-color: #A3261C }
.ree-shop .woocommerce-error li{ margin: 0 }
.ree-shop .woocommerce-message .button,
.ree-shop .woocommerce-info .button{
  order: 2;
  color: var(--ree-blue);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* Grid */
ul.products{
  clear: both;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(2.25*var(--u)) calc(1.5*var(--u));
}
ul.products::before, ul.products::after{ display: none }
@media(max-width:1200px){ ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media(max-width:768px){ ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.5*var(--u)) calc(.75*var(--u)) } }

/* Card */
.ree-card{ position: relative; margin: 0; padding: 0; min-width: 0 }
/* The name's link covers the whole card, so a click anywhere opens the product. */
.ree-card__link{ color: var(--ree-text); text-decoration: none }
.ree-card__link::after{ content: ""; position: absolute; inset: 0; z-index: 1 }

.ree-card__media{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ree-footer-bg);
}
.ree-card__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .45s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
/* Second photo fades in on hover; only on devices that really hover, so a tap
   on a phone goes straight to the product instead of swapping photos. */
.ree-card__img--hover{ opacity: 0 }
@media(hover:hover) and (pointer:fine){
  .ree-card:hover .ree-card__media.has-hover .ree-card__img--hover{ opacity: 1 }
  .ree-card:hover .ree-card__media:not(.has-hover) .ree-card__img{ transform: scale(1.04) }
}

.ree-card__badge{
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1.6;
  background: #fff;
  color: var(--ree-text);
}
.ree-card__badge--soldout{ background: var(--ree-text); color: #fff }
.product.outofstock .ree-card__img{ filter: grayscale(.6); opacity: .75 }

.ree-card__body{ padding: calc(.85*var(--u)) 2px 0 }
.ree-card__title{
  margin: 0;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ree-card:hover .ree-card__title, .ree-card:hover .ree-card__link{ color: var(--ree-blue) }
/* Price on the right, heart at the left end of the same line. */
.ree-card__row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px }
.ree-card__price{
  color: var(--ree-blue);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}
.ree-card__price del{ color: #888; font-size: 12px; margin-inline-start: 6px }
.ree-card__price ins{ text-decoration: none }
.ree-card__installment,
.ree-card__options{
  font-size: 12px;
  line-height: 1.9;
  color: #6A6A6A;
}

@media(max-width:768px){
  .ree-card__badge{ top: 8px; right: 8px; padding: 3px 7px; font-size: 10.5px }
  .ree-card__title{ font-size: 13px }
  .ree-card__price{ font-size: 13px }
  .ree-card__installment, .ree-card__options{ font-size: 11px }
  .ree-card .ree-wide{ display: none }
}

/* Pagination */
.ree-shop .woocommerce-pagination{ margin-top: calc(2.5*var(--u)); text-align: center }
.ree-shop .woocommerce-pagination ul{ list-style: none; display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 6px; margin: 0; padding: 0; border: 0 }
.ree-shop .woocommerce-pagination li{ border: 0; float: none }
.ree-shop .woocommerce-pagination a,
.ree-shop .woocommerce-pagination span{
  display: grid; place-items: center;
  min-width: 38px; height: 38px; padding: 0 8px;
  border: 1px solid rgba(26,26,26,.15);
  color: var(--ree-text); text-decoration: none; font-size: 13px;
}
.ree-shop .woocommerce-pagination .current{ background: var(--ree-blue); border-color: var(--ree-blue); color: #fff }
.ree-shop .woocommerce-pagination a:hover{ border-color: var(--ree-blue); color: var(--ree-blue) }
@media(max-width:600px){ .ree-shop .woocommerce-pagination a, .ree-shop .woocommerce-pagination span{ min-width: 34px; height: 34px; padding: 0 6px } }