/* ============================================================================
   MOOD — the landing, as the store's front door.
   Loaded after mood.css: the store navigation, the collection strip, the
   footer links, and Arabic (RTL) typography. Colours follow mood.js's
   runtime --fg / --bg so everything shifts with the material journey.
   ========================================================================== */

/* ── Store navigation (always visible, including on phones) ──────────────── */
.nav-store{
  display: flex; align-items: center; gap: 1.35rem;
  font-size: .6rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgb(var(--fg) / .62);
  opacity: calc(.75 + .25 * var(--nav-o));   /* the way to the bag is never hidden */
  transition: opacity .8s;
}
.nav-store a{ transition: color .5s; }
.nav-store a:hover, .nav-store a:focus-visible{ color: rgb(var(--fg)); }
.nav-store .ns-shop{ display: none; }   /* on wide screens Shop sits in the glass capsule */
.ns-count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.3rem; height: 1.3rem; margin-inline-start: .45rem; padding: 0 .35rem;
  border-radius: 999px;
  background: rgb(var(--fg)); color: rgb(var(--bg));
  font-weight: 500; font-size: .58rem; letter-spacing: 0;
}

/* ── The collection strip ────────────────────────────────────────────────── */
/* Its own fixed ivory/ink panel (the shop's palette), not the scroll-lerped
   --fg/--bg: prices and names must read clearly at every point of the journey. */
#collection{
  --c-ink: 26 23 20;
  position: relative; z-index: 1;
  padding: 14vh var(--edge) 16vh;
  background: rgb(239 233 225);
  color: rgb(var(--c-ink));
}
.col-head{
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
  text-align: center; margin: 0 auto 3.6rem;
}
/* While the ivory panel is under the fixed nav, the nav turns to ink (set by the page script). */
body.nav-on-ivory #nav{ --fg: 26 23 20; }
.col-title{
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.05;
}
.col-all{
  display: inline-flex; flex-direction: column; gap: .7rem;
  font-size: .62rem; letter-spacing: .32em; text-transform: uppercase;
  color: rgb(var(--c-ink) / .78);
}
.col-all i{
  display: block; height: 1px; width: 100%;
  background: rgb(var(--c-ink) / .35);
  transform: scaleX(.4); transform-origin: 50% 50%;
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}

.col-all:hover i, .col-all:focus-visible i{ transform: scaleX(1); }

.col-grid{
  list-style: none; margin: 0 auto; padding: 0; max-width: 78rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem clamp(1rem, 2vw, 2rem);
}
.col-grid > li{ width: clamp(14rem, 21vw, 18rem); }
.col-card{ display: block; }
.col-card:focus-visible{ outline-color: rgb(var(--c-ink) / .6); }
.col-img{
  position: relative; display: block;
  aspect-ratio: 4 / 5; overflow: hidden;
  background: rgb(var(--c-ink) / .05);
  border: 1px solid rgb(var(--c-ink) / .07);
}
.col-img img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.6s cubic-bezier(.16,1,.3,1);
}
.col-card:hover .col-img img, .col-card:focus-visible .col-img img{ transform: scale(1.045); }
.col-sold{
  position: absolute; inset-inline-start: .8rem; top: .8rem;
  padding: .35rem .7rem;
  font-style: normal; font-size: .55rem; letter-spacing: .24em; text-transform: uppercase;
  background: rgb(239 233 225 / .85); color: rgb(var(--c-ink) / .75);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.col-name{
  display: block; margin-top: 1.1rem;
  font-family: var(--serif); font-size: 1.35rem; font-weight: 400; line-height: 1.2;
}
.col-mat{
  display: block; margin-top: .35rem;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgb(var(--c-ink) / .55);
}
.col-price{ display: block; margin-top: .6rem; font-size: .85rem; color: rgb(var(--c-ink) / .85); }
/* ── Footer links ────────────────────────────────────────────────────────── */
.foot-links{ display: flex; gap: 1.6rem; }
.foot-links a{ transition: color .5s; }
.foot-links a:hover, .foot-links a:focus-visible{ color: rgb(var(--fg) / .8); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px){
  .col-grid > li{ width: calc(50% - .5rem); }
  .col-grid{ gap: 2.4rem 1rem; justify-content: flex-start; }
}
@media (max-width: 820px){
  .nav-store{ gap: 1rem; font-size: .56rem; letter-spacing: .2em; }
  .nav-store .ns-shop{ display: inline; }
  #sound .snd-txt{ display: none; }
  #collection{ padding: 10vh var(--edge) 14vh; }

  .foot-links{ order: -1; }
}

/* ── Arabic ──────────────────────────────────────────────────────────────── */
/* Latin glyphs stay in the brand faces; Arabic falls through to Amiri/Cairo. */
html[lang="ar"]{
  --serif: "Cormorant Garamond", Amiri, Georgia, serif;
  --sans: Inter, Cairo, ui-sans-serif, system-ui, sans-serif;
}
/* Tracking breaks Arabic letter joining — only Latin brand marks keep it. */
html[lang="ar"] body :not([lang="en"]):not([lang="en"] *){ letter-spacing: normal !important; }
html[lang="ar"] .hero-line,
html[lang="ar"] .say--wood-b,
html[lang="ar"] .pl-note,
html[lang="ar"] .m-say,
html[lang="ar"] .whisper{ font-style: normal; }
html[lang="ar"] .hero-line{ line-height: 1.9; }
html[lang="ar"] .ghost{ font-weight: 400; }