/* =========================================================
   ELWAN STORE — all brands page (brands.html)
   ========================================================= */
.page-brands {
  --lx-gold: #b08a55;
  --lx-gold2: #8b6a43;
  --lx-ink: #1d1615;
  --lx-muted: #7a6d66;
  --lx-line: rgba(139, 106, 67, .22);
  background: radial-gradient(1000px 520px at 90% 0%, rgba(201, 162, 110, .12), transparent 60%), #f7f2ec;
  color: var(--lx-ink);
}
.page-brands .header { background: rgba(247, 241, 234, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

.brands-page { width: min(1080px, 100%); margin: 0 auto; padding: calc(var(--header-h) + 34px) 16px 70px; }

.bhero { text-align: center; margin-bottom: 38px; }
.bhero__kicker { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--lx-gold2); margin: 0 0 12px; }
.bhero__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 7vw, 54px); line-height: 1.05; margin: 0; letter-spacing: .03em; }
.bhero__text { max-width: 520px; margin: 16px auto 0; font-size: 14.5px; line-height: 1.7; color: var(--lx-muted); }
.bhero__rule { display: block; width: 54px; height: 1px; margin: 22px auto 0; background: var(--lx-gold); }

.blist { display: grid; gap: 18px; }
.brow {
  display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: 16px;
  background: #fff; color: inherit; text-decoration: none;
  box-shadow: 0 0 0 1px var(--lx-line), 0 24px 46px -36px rgba(60, 35, 20, .55);
  transition: box-shadow .4s ease, transform .4s ease;
}
.brow:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(176, 138, 85, .6), 0 30px 56px -34px rgba(60, 35, 20, .6); }
.brow__media { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: #15100e; }
.brow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-slow); }
.brow:hover .brow__media img { transform: scale(1.05); }
.brow__media b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-serif); font-size: 26px; color: #f4ece3; letter-spacing: .08em; }
.brow__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; }
.brow__num { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; color: var(--lx-gold2); }
.brow__num i { width: 26px; height: 1px; background: currentColor; opacity: .6; }
.brow__name { font-family: var(--font-serif); font-size: clamp(22px, 5vw, 30px); line-height: 1.1; letter-spacing: .03em; }
.brow__meta { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lx-muted); }
.brow__story { font-size: 14px; line-height: 1.7; color: #4d423d; }
.brow__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--lx-line); }
.brow__count { font-size: 12px; color: var(--lx-muted); }
.brow__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--lx-gold2); }
.brow__cta svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.brow:hover .brow__cta svg { transform: translateX(4px); }
[dir="rtl"] .brow__cta svg { transform: scaleX(-1); }

@media (min-width: 760px) {
  .blist { gap: 24px; }
  .brow { grid-template-columns: 46% 1fr; min-height: 300px; }
  .brow:nth-child(even) { grid-template-columns: 1fr 46%; }
  .brow:nth-child(even) .brow__media { order: 2; }
  .brow__media { aspect-ratio: auto; }
  .brow__body { justify-content: center; padding: 34px 40px; }
}

/* slow reveal */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }
.brow.rv.is-in:hover { transform: translateY(-3px); transition: box-shadow .4s ease, transform .4s ease; }

/* ---------- two groups (watch brands / wallet brands), each a 3D coverflow you scroll sideways ---------- */
.blist { display: block; }
.bgroup { margin: 0 0 56px; scroll-margin-top: calc(var(--header-h) + 16px); }
.bgroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 0 2px 18px; border-bottom: 1px solid var(--lx-line); margin-bottom: 8px; }
.bgroup__kicker { flex: 1 0 100%; margin: 0; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--lx-gold2); }
.bgroup__title { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 6vw, 40px); letter-spacing: .03em; line-height: 1.1; }
.bgroup__n { margin-left: auto; font-size: 12px; color: var(--lx-muted); letter-spacing: .08em; }

.bflow { position: relative; margin: 0 -16px; }
.bflow__rail {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 34px 18% 44px; perspective: 1100px; perspective-origin: 50% 40%;
}
.bflow__rail::-webkit-scrollbar { display: none; }
.b3 {
  --d: 0; --ad: max(var(--d), calc(var(--d) * -1));
  flex: 0 0 min(72vw, 300px); scroll-snap-align: center; display: flex; flex-direction: column;
  background: #fff; color: inherit; text-decoration: none; overflow: hidden;
  transform: rotateY(calc(var(--d) * -34deg)) scale(calc(1 - var(--ad) * .14)) translateZ(calc(var(--ad) * -60px));
  transform-style: preserve-3d; opacity: calc(1 - var(--ad) * .35);
  box-shadow: 0 0 0 1px var(--lx-line), 0 30px 50px -34px rgba(60, 35, 20, .6);
  transition: box-shadow .4s ease;
}
.b3:hover { box-shadow: 0 0 0 1px rgba(176, 138, 85, .7), 0 34px 56px -30px rgba(60, 35, 20, .65); }
.b3__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3.4; overflow: hidden; background: #15100e; }
.b3__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-slow); }
.b3:hover .b3__media > img { transform: scale(1.06); }
.b3--logo .b3__media { background: radial-gradient(circle at 50% 40%, #fff, #f3ede6); }
.b3--logo .b3__media > img.b3__logo { width: 62%; height: 62%; object-fit: contain; }
.b3__media b { font-family: var(--font-serif); font-size: 24px; color: #f4ece3; letter-spacing: .08em; }
.b3--logo .b3__media b { color: var(--lx-ink); }
.b3__gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, transparent 38%, transparent 70%, rgba(255, 255, 255, .08) 100%); }
.b3__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.b3__num { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .14em; color: var(--lx-gold2); }
.b3__num i { width: 22px; height: 1px; background: currentColor; opacity: .6; }
.b3__name { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; letter-spacing: .03em; }
.b3__meta { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lx-muted); }
.b3__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--lx-line); }
.b3__count { font-size: 12px; color: var(--lx-muted); }
.b3__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--lx-gold2); }
.b3__cta svg { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.b3:hover .b3__cta svg { transform: translateX(4px); }
[dir="rtl"] .b3__cta svg { transform: scaleX(-1); }

.bflow__arrow {
  position: absolute; top: 42%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px;
  background: #fff; color: var(--lx-ink); border: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--lx-line), 0 12px 24px -12px rgba(60, 35, 20, .5); transition: opacity .3s, transform .2s;
}
.bflow__arrow svg { width: 18px; height: 18px; }
.bflow__arrow:hover { transform: scale(1.06); }
.bflow__arrow--prev { left: 8px; }
.bflow__arrow--next { right: 8px; }
.bflow.at-start .bflow__arrow--prev, .bflow.at-end .bflow__arrow--next { opacity: 0; pointer-events: none; }
@media (max-width: 759px) { .bflow__arrow { display: none; } }
@media (min-width: 760px) {
  .bflow { margin: 0; }
  .bflow__rail { padding: 40px calc(50% - 160px) 50px; gap: 24px; }
  .b3 { flex-basis: 320px; }
}
@media (prefers-reduced-motion: reduce) { .b3 { transform: none; opacity: 1; } }
.bgroup.rv { transform: translateY(30px); }