/* Home page (design "الف · گالری آرام"): big photos, little text, lots of air.
   Every section is a .ree-home__band with the same side gutters and vertical rhythm. */

.ree-home__band{
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(2*var(--ree-band)) clamp(16px, 4vw, 40px) 0;
  box-sizing: border-box;
}
.ree-home > .ree-home__band:last-child{ padding-bottom: calc(2*var(--ree-band)) }

/* Section heading */
.ree-home__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: calc(1.75*var(--u));
}
/* Webzi's global rule for English lines: Arial, 9–10px, 2.2px apart, REE blue. */
.ree-home__kicker{
  margin: 0 0 8px;
  font-family: Arial, sans-serif;
  font-size: clamp(9px, .72vw, 10px);
  letter-spacing: 2.2px;
  line-height: 1.4;
  color: var(--ree-blue);
  direction: ltr;
  text-align: right;
}
.ree-home__title{
  margin: 0;
  font-family: var(--ree-font-head);
  font-size: clamp(22px, 1.4vw + 12px, 32px);
  font-weight: 400;
  line-height: 1.6;
}
.ree-home__note{ margin: 6px 0 0; max-width: 560px; font-size: 14px; line-height: 2; color: #555 }
.ree-home__more{
  flex: none;
  font-size: 13px;
  color: var(--ree-text);
  text-underline-offset: 5px;
}
.ree-home__more:hover{ color: var(--ree-blue) }

.ree-btn{
  display: inline-block;
  padding: 14px 30px;
  background: var(--ree-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s ease;
}
.ree-btn:hover{ background: var(--ree-blue-hover); color: #fff }
.ree-btn--ghost{ background: transparent; color: var(--ree-text); border: 1px solid rgba(26,26,26,.3) }
.ree-btn--ghost:hover{ background: var(--ree-text); color: #fff }

/* ---------- Hero: edge to edge, copy on the right ---------- */
.ree-hero{ position: relative; overflow: hidden; background: var(--ree-footer-bg) }
/* The photo's own 2:1 shape (bracelets left of centre), capped at one screen; copy bottom right
   in white on a soft shade, as on Webzi, where it does not cover the bracelets. */
.ree-hero__img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  max-height: calc(100vh - 76px - var(--wp-admin--admin-bar--height, 0px));
  min-height: 420px;
  object-fit: cover;
  object-position: 40% 45%;
}
.ree-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top left, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 35%, rgba(0,0,0,0) 60%);
  pointer-events: none;
}
.ree-hero__copy{
  position: absolute;
  z-index: 1;
  /* Same right edge as every band's content: page gutter, plus the margin of the 1440px page on wide screens. */
  right: calc(max(0px, (100% - 1440px) / 2) + clamp(16px, 4vw, 40px));
  bottom: clamp(24px, 4vw, 64px);
  max-width: 460px;
  color: #fff;
}
.ree-hero .ree-home__kicker{ color: rgba(255,255,255,.85) }
.ree-hero__title{
  margin: 0;
  font-family: var(--ree-font-head);
  font-size: clamp(28px, 2.2vw + 12px, 48px);
  font-weight: 400;
  line-height: 1.45;
}
.ree-hero__text{ margin: 8px 0 22px; font-size: 14.5px; line-height: 2; color: rgba(255,255,255,.9) }


/* ---------- Category mosaic: bangles large, four smaller tiles, names on the photos ---------- */
.ree-cats__grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: calc(.75*var(--u));
}
.ree-cats__big{ grid-row: span 2 }
.ree-cats__tile{
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: var(--ree-footer-bg);
}
.ree-cats__big .ree-cats__tile{ aspect-ratio: auto }
.ree-cats__tile img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.ree-cats__tile::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 42%);
}
@media(hover:hover) and (pointer:fine){
  .ree-cats__tile:hover img{ transform: scale(1.04) }
}
.ree-cats__copy{ position: absolute; z-index: 1; right: 16px; left: 16px; bottom: 14px; display: grid; gap: 2px }
.ree-cats__title{ font-size: 16px; font-weight: 500 }
.ree-cats__big .ree-cats__title{ font-family: var(--ree-font-head); font-size: clamp(22px, 1.2vw + 12px, 30px); font-weight: 400 }
.ree-cats__line{ font-size: 12.5px; line-height: 1.8; opacity: .9 }

/* ---------- «پیشنهاد ویژه ری»: a slider (home.js moves it with the arrows and the progress line) ---------- */
.ree-picks__frame{ position: relative; --picks-gap: calc(1*var(--u)) }
.ree-picks .ree-picks__track{
  display: flex;
  gap: var(--picks-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.ree-picks .ree-picks__track::-webkit-scrollbar{ display: none }
.ree-picks .ree-picks__track > li{ flex: 0 0 calc((100% - 3 * var(--picks-gap)) / 4); min-width: 0; scroll-snap-align: start }
.ree-picks__arrow{
  position: absolute;
  top: 38%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(26,26,26,.16);
  color: var(--ree-text);
  cursor: pointer;
  transform: translateY(-50%);
}
.ree-picks__arrow[hidden]{ display: none }
.ree-picks__arrow:hover{ background: var(--ree-blue); color: #fff }
.ree-picks__arrow svg{ width: 20px; height: 20px }
.ree-picks__arrow--prev{ right: -14px }
.ree-picks__arrow--next{ left: -14px }
/* The line is 2px but the bar is 20px tall, so a finger or the mouse can grab it and drag (home.js). */
.ree-picks__progress{ position: relative; height: 20px; margin-top: calc(.75*var(--u)); cursor: grab; touch-action: none }
.ree-picks__progress::before{ content: ""; position: absolute; inset: 9px 0 auto; height: 2px; background: rgba(26,26,26,.1) }
.ree-picks__progress span{ position: absolute; top: 9px; right: 0; height: 2px; width: 25%; background: var(--ree-blue); transition: transform .2s ease, height .15s ease, top .15s ease }
.ree-picks__progress:hover span, .ree-picks__progress.is-dragging span{ top: 8px; height: 4px }
.ree-picks__progress.is-dragging{ cursor: grabbing }
.ree-picks__progress.is-dragging span{ transition: none }
.ree-picks.is-static .ree-picks__progress{ display: none }
@media(max-width:1200px){ .ree-picks .ree-picks__track > li{ flex-basis: calc((100% - 2 * var(--picks-gap)) / 3) } }
/* Touch screens swipe; no arrows. */
@media(hover:none){ .ree-picks__arrow{ display: none !important } }

/* ---------- Worlds: big names on the right, one large photo that follows the pointer ---------- */
.ree-worlds{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}
.ree-worlds__list ol{ list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(26,26,26,.14) }
.ree-worlds__item{
  display: grid;
  grid-template-columns: 40px auto 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(26,26,26,.14);
  color: rgba(26,26,26,.38);
  text-decoration: none;
  transition: color .25s ease;
}
.ree-worlds__item.is-on, .ree-worlds__item:focus-visible{ color: var(--ree-text) }
.ree-worlds__thumb{ display: none }
.ree-worlds__num{ font-family: "Marcellus", Georgia, serif; font-size: 12px; letter-spacing: .15em; direction: ltr; text-align: right }
.ree-worlds__name{
  font-family: "Marcellus", Georgia, serif;
  font-size: clamp(24px, 2vw + 8px, 44px);
  line-height: 1.1;
  letter-spacing: .08em;
  direction: ltr;
}
.ree-worlds__mood{ font-size: 13px; text-align: left; color: #777 }
.ree-worlds__stage{ position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ree-footer-bg) }
.ree-worlds__stage img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.ree-worlds__stage img.is-on{ opacity: 1 }

/* ---------- Piece of the week: big photo, copy beside it with a small second photo ---------- */
.ree-week{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}
.ree-week__media{ display: block; aspect-ratio: 10 / 11; overflow: hidden; background: var(--ree-footer-bg) }
.ree-week__media img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.22,.61,.36,1) }
@media(hover:hover) and (pointer:fine){ .ree-week__media:hover img{ transform: scale(1.03) } }
/* Like packaging: the copy block sits in the middle of its half, so the left side does not look empty. */
.ree-week__copy{ width: 100%; max-width: 500px; margin-inline: auto }
/* Section title like every other band; the piece's name sits under it, a size smaller, with room to wrap. */
.ree-week__name{ margin: clamp(30px, 2.8vw, 46px) 0 0; font-family: var(--ree-font-head); font-size: clamp(19px, .6vw + 15px, 24px); font-weight: 500; line-height: 1.7 }
.ree-week__name a{ color: inherit; text-decoration: none }
.ree-week__text{ margin: 12px 0 0; max-width: 500px; font-size: 14.5px; line-height: 2.1; color: #444 }
.ree-week__price{ margin: 18px 0 0; color: var(--ree-blue); font-size: 20px; font-weight: 500 }
.ree-week__price del{ color: #888; font-size: 15px }
.ree-week__price ins{ text-decoration: none }
.ree-week__installment{ margin: 0 0 22px; font-size: 13px; color: #6A6A6A }

/* ---------- Morse: copy and input on one side, the drawn chain on a dark stage ---------- */
.ree-morse__box{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.ree-morse__label{ display: block; margin: 22px 0 8px; font-size: 13px; font-weight: 500 }
.ree-morse__input{
  width: 100%;
  max-width: 320px;
  height: 52px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid rgba(26,26,26,.25);
  border-radius: 0;
  background: #fff;
  color: var(--ree-text);
  font-family: "Marcellus", var(--ree-font-body);
  font-size: 22px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.ree-morse__input:focus{ outline: none; border-color: var(--ree-blue) }
/* Persian letters must stay joined: no letter spacing, no capitals. */
.ree-morse__input.is-fa{ letter-spacing: 0; text-transform: none }
.ree-morse__msg{ min-height: 1.9em; margin: 6px 0 14px; font-size: 12.5px; line-height: 1.9; color: #8A1C14 }
.ree-morse__stage{
  display: grid;
  align-content: center;
  gap: 28px;
  min-height: 300px;
  padding: clamp(24px, 4vw, 48px);
  background: #1B2347;
  color: #fff;
}
/* The chain: a thin silver line with beads and bars threaded on it. */
.ree-morse__chain{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 20px;
  min-height: 40px;
  direction: ltr;
}
/* Each letter carries its piece of chain, reaching half the gap on both sides, so the line looks
   continuous along a row and only breaks where the word wraps. */
.ree-morse__letter{ position: relative; display: inline-flex; align-items: center; gap: 5px }
.ree-morse__letter::before{
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 50%;
  height: 1px;
  background: rgba(220,224,235,.7);
}
.ree-morse__bead, .ree-morse__bar{
  position: relative;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #DADDE6 30%, #9AA0AE 75%, #6F7584 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.ree-morse__bead{ width: 15px; height: 15px; border-radius: 50% }
.ree-morse__bar{ width: 34px; height: 9px; border-radius: 5px; background: linear-gradient(180deg, #fff 0%, #DADDE6 30%, #9AA0AE 80%, #6F7584 100%) }
.ree-morse__key{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13px; color: rgba(255,255,255,.7); letter-spacing: .1em }
.ree-morse__key b{ font-family: "Marcellus", Georgia, serif; font-weight: 400; color: #fff }

/* ---------- Gifts by budget: three wide bands ---------- */
.ree-gifts__row{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(.75*var(--u));
}
.ree-gifts__band{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 26px 22px;
  border: 1px solid rgba(26,26,26,.18);
  color: var(--ree-text);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ree-gifts__band:hover{ background: var(--ree-blue); border-color: var(--ree-blue); color: #fff }
.ree-gifts__label{ font-family: var(--ree-font-head); font-size: clamp(17px, .6vw + 13px, 21px); white-space: nowrap }
.ree-gifts__count{ font-size: 12.5px; opacity: .7; white-space: nowrap }
/* All three boxes the same height at every width: label and count never wrap, and while the row is
   narrow (before it stacks on phones) the count goes under the label instead of beside it. */
.ree-gifts__row > li{ display: flex }
.ree-gifts__band{ flex: 1; box-sizing: border-box; align-items: center }
@media(min-width:801px) and (max-width:1180px){
  .ree-gifts__band{ flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px }
}

/* ---------- Process: four numbered steps on a thin line ---------- */
.ree-process__steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(1.5*var(--u));
  counter-reset: none;
}
.ree-process__step{ padding-top: 18px; border-top: 1px solid rgba(26,26,26,.18) }
.ree-process__num{ font-size: 13px; color: var(--ree-blue); letter-spacing: .08em }
.ree-process__title{ margin: 8px 0 6px; font-family: var(--ree-font-head); font-size: 19px; font-weight: 400 }
.ree-process__text{ margin: 0; font-size: 13.5px; line-height: 2; color: #555 }

/* ---------- Packaging and Iran: as wide as the page, photo and copy in two equal halves,
   copy centred in its half. Both shrink with the window and stack on phones. ---------- */
.ree-pack, .ree-iran__box{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}
/* The copy block sits in the middle of its half; the text itself is right-aligned like Webzi. */
.ree-pack__copy, .ree-iran__copy{ width: 100%; max-width: 460px; margin-inline: auto }
.ree-pack__media, .ree-iran__media{ aspect-ratio: 4 / 3; overflow: hidden; background: var(--ree-footer-bg) }
.ree-pack__media img, .ree-iran__media img{ width: 100%; height: 100%; object-fit: cover; display: block }

/* Iran: Webzi's pale blue, edge to edge at every width (no page margin); the content keeps the
   page's gutters and, on very wide screens, the 1440px page width. */
.ree-iran{ max-width: none; padding-inline: 0 }
.ree-iran__box{
  padding-block: clamp(32px, 4vw, 56px);
  padding-inline: max(clamp(16px, 4vw, 40px), calc((100% - 1360px) / 2));
  background: #E9EDF5;
}
.ree-iran__copy .ree-btn{ margin-top: 24px }


/* Hero and packaging titles stay on one line on wide screens too (their size grows with the
   window; the copy box does not). Phones have their own sizes below. */
@media(min-width:801px){
  .ree-hero__title{ white-space: nowrap }
  .ree-pack__copy{ max-width: 540px }
  .ree-pack .ree-home__title{ white-space: nowrap }
}

/* ---------- Tablet ---------- */
@media(max-width:1024px){
  .ree-process__steps{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ---------- Phone ---------- */
@media(max-width:800px){
  /* Picks: two cards and part of the third, so the slider shows itself. */
  .ree-picks__frame{ --picks-gap: 10px }
  .ree-picks .ree-picks__track > li{ flex-basis: 43% }
  /* Phones: the same 55px between every section (Mohamad, Aban 1405), the last one included. */
  .ree-home__band{ padding-top: 55px }
  .ree-home > .ree-home__band:last-child{ padding-bottom: 55px }
  .ree-hero__title{ font-size: 22px } /* same size as the section titles */
  /* «از جزئیات ساخت تا لحظهٔ باز کردن جعبه» on one line: 22px from 375px up, a hair smaller below. */
  .ree-pack .ree-home__title{ white-space: nowrap; font-size: min(22px, 5.8vw) }
  .ree-home__head{ margin-bottom: calc(1.1*var(--u)) }

  /* Hero: portrait photo, copy under it instead of on it. */
  .ree-hero__img{ aspect-ratio: 4 / 5; max-height: 72vh; min-height: 0; object-position: center }
  .ree-hero::after{ display: none }
  .ree-hero__copy{
    position: static;
    max-width: none;
    padding: 22px 16px 4px;
    background: var(--ree-bg);
    color: var(--ree-text);
  }
  .ree-hero .ree-home__kicker{ color: var(--ree-blue) }
  .ree-hero__text{ margin-bottom: 20px; color: #333 }

  /* Mosaic: bangles full width, then two by two. */
  .ree-cats__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .ree-cats__big{ grid-column: 1 / -1; grid-row: auto }
  .ree-cats__big .ree-cats__tile{ aspect-ratio: 1 / 1 }
  .ree-cats__copy{ right: 12px; left: 12px; bottom: 10px }
  .ree-cats__title{ font-size: 14px }
  .ree-cats__grid li:not(.ree-cats__big) .ree-cats__line{ display: none }

  /* Piece of the week, Morse, gifts: stacked. */
  .ree-week, .ree-morse__box{ grid-template-columns: minmax(0, 1fr) }
  .ree-morse__stage{ min-height: 200px; order: -1 }
  .ree-morse__input{ max-width: none }
  .ree-gifts__row{ grid-template-columns: minmax(0, 1fr); gap: 8px }
  .ree-gifts__band{ padding: 18px 16px }


  /* Worlds (like Webzi): 2 × 2 photo cards, number and name on a dark top fade; no big photo. */
  .ree-worlds{ grid-template-columns: minmax(0, 1fr) }
  .ree-worlds__stage{ display: none }
  .ree-worlds__list ol{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 0 }
  .ree-worlds__list li{ min-width: 0 }
  .ree-worlds__item{
    position: relative;
    display: block;
    height: clamp(220px, 60vw, 280px);
    padding: 13px 14px;
    overflow: hidden;
    border: 0;
    color: #fff;
    isolation: isolate;
  }
  .ree-worlds__item.is-on, .ree-worlds__item:focus-visible{ color: #fff }
  .ree-worlds__thumb{ display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover }
  .ree-worlds__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block }
  .ree-worlds__item::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,0) 55%) }
  .ree-worlds__num{ display: block; font-family: Arial, sans-serif; font-size: 8px; letter-spacing: 1.5px; text-align: right; text-shadow: 0 1px 5px rgba(0,0,0,.6) }
  .ree-worlds__name{ display: block; margin-top: 8px; font-size: clamp(20px, 6.3vw, 27px); line-height: 1; color: #fff; text-align: right; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,.6) }
  .ree-worlds__mood{ display: block; margin-top: 7px; font-size: 10.5px; line-height: 1.75; color: rgba(255,255,255,.92); text-align: right; text-shadow: 0 1px 8px rgba(0,0,0,.6) }

  .ree-process__steps{ grid-template-columns: minmax(0, 1fr); gap: 0 }
  .ree-process__step{ display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; padding: 14px 0 }
  .ree-process__num{ grid-row: span 2; padding-top: 3px }
  .ree-process__title{ margin: 0 0 2px; font-size: 17px }

  .ree-pack, .ree-iran__box{ grid-template-columns: minmax(0, 1fr) }
  .ree-iran__media{ order: -1 } /* photo first, like the other sections */
}

/*
 * Worlds cards, cropped like Webzi (ree-vibe v146): from 601px up to the 2 × 2 breakpoint the cards are
 * wide, so they use the landscape photos at 1.18 : 1, each nudged so the piece stays in frame; phones
 * (≤600px) use the portrait photos at a fixed height, Forest a little lower.
 */
@media(min-width:601px) and (max-width:800px){
  .ree-worlds__item{ height: auto; aspect-ratio: 1.18 / 1 }
  .ree-worlds__name{ font-size: clamp(22px, 3.8vw, 27px) }
  .ree-worlds__item--chang .ree-worlds__thumb img{ object-position: center 58% }
  .ree-worlds__item--forest .ree-worlds__thumb img{ object-position: center 85% }
  .ree-worlds__item--nakhl .ree-worlds__thumb img{ object-position: center 78% }
  .ree-worlds__item--katibeh .ree-worlds__thumb img{ object-position: center 80% }
}
@media(max-width:600px){
  .ree-worlds__item--forest .ree-worlds__thumb img{ object-position: center 70% }
}