/* Single product page (design "الف · گالری آرام"). Photo column on the right (first in RTL),
   info column on the left; related products full width underneath. */

.ree-shop .woocommerce-breadcrumb{ margin-bottom: calc(1.25*var(--u)) }

/* Photo column sized so the 4:5 photo plus thumbnails fit a laptop screen; both columns
   centred together rather than the photo floating in a wide column. */
.ree-product__top{
  display: grid;
  grid-template-columns: clamp(400px, calc((100vh - 230px) * .8), 720px) minmax(320px, 420px);
  justify-content: center;
  column-gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
.ree-product__top > *{ min-width: 0 }
/* «… به سبد خرید اضافه شد» as wide as the photo and info columns, not the whole page. */
.single-product .ree-shop .woocommerce-notices-wrapper{
  max-width: calc(clamp(400px, calc((100vh - 230px) * .8), 720px) + clamp(32px, 4vw, 72px) + 420px);
  margin-inline: auto;
}
.ree-product__top > .summary{
  /* Under the sticky header (76px) and the admin bar, if any. product.js adds .is-sticky
     only when the whole column fits on screen. */
  top: calc(var(--wp-admin--admin-bar--height, 0px) + calc(4.75*var(--u)) + 24px);
}
.ree-product__top > .summary.is-sticky{ position: sticky }
/* White box around the buying part, no shadow and no border, like «خلاصهٔ سفارش» in the cart. */
.ree-buybox{ padding: clamp(18px, 2vw, 28px); background: #fff }
.ree-buybox > :last-child{ margin-bottom: 0 }
.ree-buybox + *{ margin-top: clamp(20px, 2vw, 28px) }

.ree-sr,
.ree-shop .screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Gallery ---------- */
.ree-gallery{ position: relative }
.ree-gallery__track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  aspect-ratio: 4 / 5;
  background: var(--ree-footer-bg);
}
.ree-gallery__track::-webkit-scrollbar{ display: none }
.ree-gallery__slide{
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.ree-gallery__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ree-gallery__arrow{
  position: absolute;
  top: calc(50% - 60px);
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, background-color .2s ease;
}
/* Hover like the home slider's arrows: brand blue, white chevron. */
.ree-gallery__arrow:hover{ background: var(--ree-blue) }
.ree-gallery__arrow:hover::before{ border-color: #fff }
.ree-gallery__arrow::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px; height: 9px;
  border: solid var(--ree-text);
  border-width: 0 1.5px 1.5px 0;
}
/* RTL: previous photo is on the right, next on the left. */
.ree-gallery__arrow--prev{ right: 12px }
.ree-gallery__arrow--prev::before{ transform: translateX(-2px) rotate(-45deg) }
.ree-gallery__arrow--next{ left: 12px }
.ree-gallery__arrow--next::before{ transform: translateX(2px) rotate(135deg) }
@media(hover:hover) and (pointer:fine){
  .ree-gallery:hover .ree-gallery__arrow, .ree-gallery__arrow:focus-visible{ opacity: 1 }
}

.ree-gallery__thumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ree-gallery__thumb{
  width: 64px;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1px solid transparent;
  background: var(--ree-footer-bg);
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s ease, border-color .2s ease;
}
.ree-gallery__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block }
.ree-gallery__thumb:hover{ opacity: 1 }
.ree-gallery__thumb[aria-current]{ opacity: 1; border-color: var(--ree-text) }

.ree-gallery__dots{ display: none }

/* ---------- Info column ---------- */
.ree-shop .summary .product_title{
  margin: 0;
  font-family: var(--ree-font-head);
  font-size: clamp(24px, 1.2vw + 14px, 32px);
  font-weight: 400;
  line-height: 1.5;
}
.ree-product__sku{ margin-top: 2px; font-size: 12px; color: #777 }
.ree-shop .summary .price{
  margin: calc(1*var(--u)) 0 0;
  color: var(--ree-blue);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
}
.ree-shop .summary .price del{ color: #888; font-size: 15px; margin-inline-start: 8px }
.ree-shop .summary .price ins{ text-decoration: none }
.ree-product__installment{ margin: 2px 0 0; font-size: 13px; line-height: 1.9; color: #6A6A6A }

.ree-shop form.cart{ margin-top: calc(1.5*var(--u)) }

/* Options: label, then a row of buttons (built by product.js from the hidden <select>). */
.ree-shop table.variations,
.ree-shop table.variations tbody,
.ree-shop table.variations tr,
.ree-shop table.variations th,
.ree-shop table.variations td{ display: block; padding: 0; border: 0; text-align: right }
.ree-shop table.variations{ width: 100%; margin: 0; border-collapse: collapse }
.ree-shop table.variations tr{ margin-bottom: calc(1.25*var(--u)) }
/* Title, with the size guide link right after it (product.js moves the link up here). */
.ree-shop table.variations th{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 10px;
}
.ree-shop table.variations label{
  display: block;
  font-size: 13.5px;
  font-weight: 500;
}
.ree-shop .reset_variations{ display: none !important }

.ree-swatches{ display: flex; flex-wrap: wrap; gap: 8px }
.ree-swatch{
  min-width: 46px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(26,26,26,.2);
  background: transparent;
  color: var(--ree-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.ree-swatch:hover{ border-color: var(--ree-text) }
.ree-swatch[aria-checked="true"]{ background: var(--ree-blue); border-color: var(--ree-blue); color: #fff }
.ree-swatch:disabled{ opacity: .35; text-decoration: line-through; cursor: not-allowed }
.ree-swatch:focus-visible{ outline: 2px solid var(--ree-blue); outline-offset: 2px }

.ree-size-guide{
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ree-text);
  text-underline-offset: 4px;
}
.ree-size-guide:hover{ color: var(--ree-blue) }
.ree-size-other{ margin: 4px 0 14px; font-size: 12.5px; line-height: 1.9; color: #555 }
.ree-size-other a{ color: var(--ree-blue); text-underline-offset: 3px }

.ree-shop table.variations tr.is-missing label{ color: #A3261C }
.ree-shop table.variations tr.is-missing .ree-swatch{ border-color: rgba(163,38,28,.55) }
.ree-choose-note{
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.9;
  color: #8A1C14;
  background: #F8E9E7;
}

/* Free-text field (letters to engrave). */
.ree-field{ margin-bottom: calc(1.25*var(--u)) }
.ree-field label{ display: block; margin-bottom: 10px; font-size: 13.5px; font-weight: 500 }
.ree-field label span{ color: #A3261C }
.ree-field input{
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid rgba(26,26,26,.2);
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ree-text);
  border-radius: 0;
}
.ree-field input:focus{ outline: none; border-color: var(--ree-blue) }

/* WooCommerce repeats the price under the options; the main price above already follows the choice. */
.ree-shop .woocommerce-variation-price{ display: none }
.ree-shop .woocommerce-variation-availability p,
.ree-shop .summary .stock{ margin: 0 0 10px; font-size: 13px; color: #6A6A6A }
.ree-shop .summary .stock.out-of-stock{ color: #A3261C }

/* One piece at a time, as on Webzi. (WooCommerce's script sets display:block inline after a choice.) */
.ree-shop .summary .quantity{ display: none !important }

.ree-shop .single_add_to_cart_button{
  display: block;
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 0;
  background: var(--ree-blue);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease;
}
.ree-shop .single_add_to_cart_button:hover{ background: var(--ree-blue-hover) }
.ree-shop .single_add_to_cart_button:active{ background: var(--ree-blue-active) }
/* Still clickable, so the customer gets the "choose a size" note. */
.ree-shop .single_add_to_cart_button.disabled{ opacity: .55 }

.ree-product__assurance{
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.9;
  color: #444;
  background: rgba(36,59,143,.06);
  border-inline-start: 2px solid var(--ree-blue);
}

.ree-product__description{
  margin-top: calc(1.75*var(--u));
  padding-top: calc(1.25*var(--u));
  border-top: 1px solid rgba(26,26,26,.1);
  font-size: 14px;
  line-height: 2.1;
  color: #333;
}
.ree-product__description p{ margin: 0 0 .9em }
.ree-product__description p:last-child{ margin-bottom: 0 }

.ree-product__more{
  margin-top: calc(1.25*var(--u));
  border-top: 1px solid rgba(26,26,26,.1);
  border-bottom: 1px solid rgba(26,26,26,.1);
}
.ree-product__more summary{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.ree-product__more summary::-webkit-details-marker{ display: none }
.ree-product__more summary::after{ content: "+"; font-size: 18px; font-weight: 300; line-height: 1 }
.ree-product__more[open] summary::after{ content: "−" }
.ree-product__more > div{ padding-bottom: 14px; font-size: 13.5px; line-height: 2.1; color: #444 }
.ree-product__more > div p{ margin: 0 0 .8em }

.ree-product__links{
  display: flex;
  gap: 20px;
  margin-top: calc(1*var(--u));
  font-size: 13px;
}
.ree-product__links a{ color: #555; text-underline-offset: 4px }
.ree-product__links a:hover{ color: var(--ree-blue) }
.ree-product__cats{ margin: 10px 0 0; font-size: 12.5px; color: #777 }
.ree-product__cats a{ color: #555; text-decoration: none }
.ree-product__cats a:hover{ color: var(--ree-blue) }

/* ---------- Related products ---------- */
.ree-shop div.product > .related{ margin-top: calc(4.5*var(--u)) }
/* Always 4 in a row (2 on phones), so the 4 related products never leave one alone on a line. */
@media(min-width:769px){ .ree-shop .related ul.products{ grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.ree-shop .related > h2{
  margin: 0 0 calc(1.25*var(--u));
  font-family: var(--ree-font-head);
  font-size: clamp(20px, .8vw + 14px, 26px);
  font-weight: 400;
}

/* ---------- Tablet and phone: one column, photos edge to edge ---------- */
@media(max-width:900px){
  .ree-product__top{ grid-template-columns: minmax(0, 1fr) }
  .ree-product__top > .summary.is-sticky{ position: static }
  .ree-gallery{ margin-inline: calc(-1*clamp(16px, 4vw, 40px)) }
  .ree-gallery__arrow, .ree-gallery__thumbs{ display: none }
  .ree-gallery__dots{
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-top: 10px;
  }
  .ree-gallery__dots span{
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(26,26,26,.2);
    transition: background-color .2s ease, transform .2s ease;
  }
  .ree-gallery__dots span.is-on{ background: var(--ree-text); transform: scale(1.15) }
  .ree-product__top > .summary{ margin-top: calc(1.25*var(--u)) }
  .ree-shop div.product > .related{ margin-top: calc(3*var(--u)) }
}