/* Liam Luxury Watches — the gallery wall (house pages + full catalog). Light boutique room, black display cases. */
* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--u-bg); color: var(--u-ink); font: 400 1rem/1.5 var(--u-text); -webkit-font-smoothing: antialiased; min-height: 100svh; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70rem 40rem at 85% -10%, rgba(216,189,134,.22), transparent 60%), radial-gradient(50rem 30rem at -10% 110%, rgba(176,141,79,.10), transparent 60%); }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* top bar */
.gb { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: .6rem; height: 3.5rem; padding: 0 max(1rem, env(safe-area-inset-left));
  background: rgba(244,241,234,.82); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--u-hair); }
.gb__mark { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.gb__mark b { font: 500 1.25rem/1 var(--u-display); font-family: 'Cormorant Garamond', serif; letter-spacing: .34em; }
.gb__mark small { margin-top: .2rem; font: 600 .48rem/1 'Manrope', sans-serif; letter-spacing: .42em; color: var(--u-gold); }
.gb__r { display: flex; align-items: center; gap: .4rem; }
.gb__wa { display: inline-flex; align-items: center; gap: .4rem; height: 2.1rem; padding: 0 .8rem; border-radius: 999px; background: var(--u-card); color: var(--u-card-ink); text-decoration: none; font: 600 .68rem/1 var(--u-text); letter-spacing: .08em; box-shadow: inset 0 0 0 1px rgba(216,189,134,.35); }
.gb__wa svg { width: .95rem; height: .95rem; fill: #3ddc84; }
.snd { display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; padding: 0 .6rem; border-radius: 999px; border: 1px solid var(--u-hair2); background: transparent; color: var(--u-soft); font: 500 .62rem/1 var(--u-text); letter-spacing: .1em; cursor: pointer; }
.snd.on { color: var(--u-ink); border-color: var(--u-gold); }
.snd__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: .75rem; } .snd__bars i { width: 2px; height: 30%; background: var(--u-gold); border-radius: 1px; }
.snd.on .snd__bars i { animation: g-eq 1.1s ease-in-out infinite; } .snd.on .snd__bars i:nth-child(2) { animation-delay: .2s; } .snd.on .snd__bars i:nth-child(3) { animation-delay: .4s; } .snd.on .snd__bars i:nth-child(4) { animation-delay: .1s; }
@keyframes g-eq { 50% { height: 100%; } }
@media (max-width: 30rem) { .snd__t, .gb__wa span { display: none; } .gb__wa { padding: 0 .65rem; } }

/* the house head — compact on purpose: the watches start on the first screen */
.gh { position: relative; padding: 1rem max(1rem, env(safe-area-inset-left)) .4rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .2rem 1rem; }
.gh__back { grid-column: 1 / -1; justify-self: start; font: 600 .62rem/1 var(--u-text); letter-spacing: .2em; text-transform: uppercase; color: var(--u-soft); text-decoration: none; }
[data-lang="he"] .gh__back, [data-lang="ar"] .gh__back { letter-spacing: .04em; font-size: .74rem; }
.gh h1 { margin: .25rem 0 0; font: 500 clamp(2.2rem, 9vw, 4.6rem)/.92 var(--u-display); font-family: 'Cormorant Garamond', 'Frank Ruhl Libre', serif; letter-spacing: -.01em; }
.gh h1 em { font-style: italic; color: var(--u-gold); }
.gh__n { font: 500 .72rem/1 var(--u-text); color: var(--u-soft); letter-spacing: .06em; white-space: nowrap; padding-bottom: .4rem; }
.gh__lore { grid-column: 1 / -1; margin: .3rem 0 0; max-width: 46rem; font: 400 .98rem/1.45 var(--u-display); color: #4a453c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.touch { grid-column: 1 / -1; margin: .1rem 0 0; font: 400 .78rem/1.3 'Frank Ruhl Libre', serif; color: var(--u-gold); }
@media (max-width: 40rem) { .gh__lore { display: none; } }
@media (min-width: 64rem) { .gh { padding-top: .7rem; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 1.6rem; } .gh h1 { font-size: 3.2rem; grid-row: 2; } .gh__lore { grid-column: 2; grid-row: 2; align-self: center; margin: 0; -webkit-line-clamp: 2; font-size: .95rem; } .gh__n { grid-column: 3; grid-row: 2; } .touch { grid-column: 1 / -1; grid-row: 3; } }

/* tools: search + chips (sticky under the bar) */
.gt { position: sticky; top: 3.5rem; z-index: 50; padding: .5rem max(1rem, env(safe-area-inset-left)) .55rem; background: linear-gradient(var(--u-bg) 82%, rgba(244,241,234,0)); }
.gs { position: relative; display: flex; align-items: center; }
.gs svg { position: absolute; inset-inline-start: .85rem; width: 1rem; height: 1rem; fill: none; stroke: var(--u-soft); stroke-width: 1.8; pointer-events: none; }
.gs input { width: 100%; height: 2.7rem; padding-inline: 2.4rem 4.6rem; border-radius: 999px; border: 1px solid var(--u-hair2); background: #fff; font: 500 .9rem/1 var(--u-text); color: var(--u-ink); outline: 0; box-shadow: 0 6px 20px rgba(18,14,8,.05); }
.gs input::placeholder { color: #9a9387; font-weight: 400; }
.gs input:focus { border-color: var(--u-gold); box-shadow: 0 0 0 4px rgba(176,141,79,.14); }
.gs output:empty { display: none; }
.gs output { position: absolute; inset-inline-end: 1rem; font: 600 .64rem/1 var(--u-text); color: var(--u-gold); letter-spacing: .06em; }
.gc { display: flex; gap: .35rem; margin-top: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .1rem; }
.gc::-webkit-scrollbar { display: none; }
.ch { flex: none; display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--u-hair2); background: rgba(255,255,255,.6); font: 600 .7rem/1 var(--u-text); cursor: pointer; transition: .2s; white-space: nowrap; }
.ch i { font-style: normal; font-weight: 500; color: var(--u-soft); font-size: .62rem; }
.ch.on { background: var(--u-card); color: var(--u-card-ink); border-color: var(--u-card); } .ch.on i { color: var(--u-gold-2); }

/* the wall: 4 per row on a phone, 6 on a laptop, 8 on a wide screen */
.gw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; padding: .3rem max(.7rem, env(safe-area-inset-left)) 3rem; }
@media (min-width: 48rem) { .gw { gap: .8rem; padding-inline: 1.2rem; } }
@media (min-width: 64rem) { .gw { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; padding-inline: 1.6rem; } }
@media (min-width: 80rem) { .gw { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 120rem) { .gw { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.cd { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 10px; background: var(--u-card); color: var(--u-card-ink); text-align: start; cursor: pointer; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px -14px rgba(18,14,8,.55); transition: transform .35s var(--u-ease), box-shadow .35s; contain: layout paint; }
.cd:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 22px 36px -18px rgba(18,14,8,.6), 0 0 0 1px rgba(216,189,134,.4); }
.cd:focus-visible { outline: 2px solid var(--u-gold); outline-offset: 2px; }
.cd__win { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(90% 70% at 50% 35%, #1c1b1d, #070708 75%); }
.cd__img { position: absolute; inset: -4%; background-color: #111; background-repeat: no-repeat; transform-origin: 50% 55%; opacity: 0; transition: opacity .6s; }
.cd__img[style] { opacity: 1; }
.cd.in .cd__img { animation: u-turn 24s ease-in-out var(--d) infinite; }
.cd__glass { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.13) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: screen; }
.cd.in .cd__glass { animation: g-sweep 11s ease-in-out var(--d) infinite; }
@keyframes g-sweep { 0%, 70% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.cd__name { display: flex; flex-direction: column; gap: .18rem; padding: .42rem .45rem .5rem; min-height: 2.9rem; }
.cd__name small { font: 700 .44rem/1 'Manrope', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--u-gold-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd__name b { font: 600 .66rem/1.18 'Cormorant Garamond', 'Frank Ruhl Libre', serif; letter-spacing: .01em; color: #fbf6ea; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 30rem) { .cd__name b { font-size: .78rem; } .cd__name small { font-size: .5rem; } }
@media (min-width: 48rem) { .cd { border-radius: 14px; } .cd__name { padding: .65rem .75rem .75rem; min-height: 3.8rem; gap: .3rem; } .cd__name b { font-size: 1rem; } .cd__name small { font-size: .56rem; } }
.ge { padding: 3rem 1.2rem; text-align: center; color: var(--u-soft); font: 400 1.05rem/1.5 var(--u-display); }
.ge a { display: inline-block; margin-top: .8rem; font: 600 .72rem/1 var(--u-text); letter-spacing: .14em; text-transform: uppercase; color: var(--u-gold); }

.gf { padding: 2rem 1.2rem calc(2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--u-hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; font: 500 .7rem/1.5 var(--u-text); color: var(--u-soft); }
@media (prefers-reduced-motion: reduce) { .cd.in .cd__img, .cd.in .cd__glass { animation: none; } }

/* phone legibility: slightly larger names, a gold hairline on every case */
.cd { box-shadow: 0 0 0 1px rgba(216,189,134,.18) inset, 0 10px 24px -14px rgba(18,14,8,.55); }
.cd__name b { font-size: .74rem; line-height: 1.15; }
.cd__name small { font-size: .46rem; }
@media (min-width: 48rem) { .cd__name b { font-size: 1.02rem; } }

.cd__play { position: absolute; top: .4rem; inset-inline-end: .4rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(11,11,12,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23d8bd86'/%3E%3C/svg%3E") center/60% no-repeat; box-shadow: 0 0 0 1px rgba(216,189,134,.5); }