/* sl.arkrocket.cn — Sound Leisure distribution site
   Shared by index.html (catalogue) and inquiry.html (RFQ form). */

:root {
  --ink: #12100e;
  --ink-2: #1c1917;
  --paper: #f7f5f1;
  --paper-2: #efece5;
  --line: #d9d3c7;
  --line-dark: #33302b;
  --gold: #b8873b;
  --gold-bright: #d9a95c;
  --muted: #6b655c;
  --muted-dark: #a39c90;
  --radius: 2px;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 500; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(30px, 4.6vw, 50px); line-height: 1.1; }
h2 { font-size: clamp(23px, 2.7vw, 31px); line-height: 1.2; }
h3 { font-size: 19px; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.lede { font-size: 18px; color: var(--muted); max-width: 62ch; }

/* ---------- header ---------- */
.site-head {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
  flex-wrap: wrap;
}
.brand { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--gold); }
.site-nav { margin-left: auto; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.site-nav a {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted-dark);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--gold); }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang-toggle button {
  background: transparent;
  border: 0;
  color: var(--muted-dark);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }

/* ---------- hero ---------- */
.hero { background: var(--ink); color: var(--paper); padding: 68px 0 76px; }
.hero .lede { color: var(--muted-dark); }
.hero h1 { max-width: 20ch; }
.credentials {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}
.credentials div { font-size: 13px; color: var(--muted-dark); }
.credentials strong { display: block; color: var(--paper); font-weight: 500; font-size: 15px; margin-bottom: 2px; }

/* ---------- sections ---------- */
section { padding: 62px 0; }
.section-head { margin-bottom: 38px; max-width: 66ch; }

/* ---------- product cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
}
/* Product shot. Fixed aspect box so cards line up whether the photo is a real
   product shot or the typographic fallback used for models we have no
   photography for yet. */
.card .shot {
  aspect-ratio: 4 / 3;
  margin: -26px -26px 22px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card .shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  transition: transform 0.6s ease;
}
.card:hover .shot img { transform: scale(1.03); }
.card .shot.placeholder {
  background: var(--paper-2);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 20px;
}

/* Mainland stock line — only rendered inside [data-cn] blocks. */
.stock {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  margin: 0 0 14px;
  color: var(--muted);
}
.stock .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex: 0 0 auto;
}
.card[data-stock="instock"] .stock .dot { background: #2f8f4e; }
.card[data-stock="instock"] .stock .lbl-instock { display: inline; }
.card[data-stock="order"]   .stock .dot { background: var(--gold); }
.card[data-stock="order"]   .stock .lbl-order { display: inline; }
.card[data-stock="ask"]     .stock .lbl-ask { display: inline; }
.stock .lbl-instock, .stock .lbl-order, .stock .lbl-ask { display: none; }

.card .fmt {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}
.card h3 { margin-bottom: 6px; }
.card .model { font-size: 12px; color: var(--muted); letter-spacing: 0.05em; margin-bottom: 16px; }
.card p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }

.spec { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--line); }
.spec li {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.spec .k { color: var(--muted); flex: 0 0 auto; }
.spec .v { text-align: right; }

.price-row {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.price { font-size: 19px; }
.price small { display: block; font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.price.poa { color: var(--muted); font-size: 15px; letter-spacing: 0.06em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.small { padding: 9px 16px; font-size: 12px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- terms strip ---------- */
.terms { background: var(--paper-2); }
.terms .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.terms h3 { font-size: 15px; margin-bottom: 7px; }
.terms p { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- form ---------- */
.form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 54px;
  align-items: start;
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field .req { color: var(--gold); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 135, 59, 0.16);
}
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aside {
  background: var(--ink);
  color: var(--paper);
  padding: 30px 28px;
  border-radius: var(--radius);
}
.aside h3 { margin-bottom: 14px; }
.aside ul { margin: 0; padding-left: 18px; color: var(--muted-dark); font-size: 14.5px; }
.aside li { margin-bottom: 10px; }
.aside .contact { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: 14px; color: var(--muted-dark); }
.aside .contact a { color: var(--gold); }

.form-msg { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); font-size: 15px; display: none; }
.form-msg.show { display: block; }
.form-msg.ok { background: #eaf3ea; border: 1px solid #b9d4b9; color: #24571f; }
.form-msg.err { background: #fbecec; border: 1px solid #e2bcbc; color: #8a2020; }

/* ---------- footer ---------- */
.site-foot {
  background: var(--ink);
  color: var(--muted-dark);
  padding: 42px 0;
  font-size: 13.5px;
}
.site-foot a { color: var(--gold); }
.site-foot .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }

/* ---------- i18n + region ----------
   All four rules are (0,2,0) so they outrank any component rule of the
   "class + element" shape — e.g. `.credentials strong { display: block }`
   (0,1,1), which would otherwise leave the hidden variant visible. Hiding
   only the inactive variant means the visible one keeps its own layout,
   so no `revert` is needed.

   Region matters because the two markets are priced on different bases:
   Hong Kong and Macau are free ports, while the Mainland adds import duty
   and VAT on top of the landed cost. Same catalogue, different commercial
   terms — so the terms blocks are swapped rather than duplicated.

   Three language variants, not two: Hong Kong and Macau read traditional
   Chinese, the Mainland reads simplified. Serving one to the other reads as
   carelessness to exactly the buyers we are quoting, so the region toggle
   drives which Chinese is even offered. */
html:not([lang="en"])      [data-en]   { display: none; }
html:not([lang="zh-Hant"]) [data-hant] { display: none; }
html:not([lang="zh-Hans"]) [data-hans] { display: none; }

html:not([data-region="cn"]) [data-cn] { display: none; }
html[data-region="cn"]       [data-hk] { display: none; }

/* ---------- region toggle ---------- */
.region-toggle {
  display: inline-flex;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.region-toggle button {
  background: transparent;
  border: 0;
  color: var(--muted-dark);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.region-toggle button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

.region-note {
  margin-top: 26px;
  padding: 16px 18px;
  border-left: 2px solid var(--gold);
  background: #fff;
  font-size: 14.5px;
  color: var(--muted);
}
.region-note strong { color: var(--ink); font-weight: 500; }

@media (max-width: 860px) {
  .form-wrap { grid-template-columns: 1fr; gap: 34px; }
  .row2 { grid-template-columns: 1fr; }
  section { padding: 46px 0; }
  .site-nav { gap: 16px; }
}

/* ---------- lightbox ----------
   Buyers judge a GBP 10k+ cabinet on the photography, so the card shot opens
   into the full set — quarter view, face on, and the gold/detail close-ups. */
.card .shot.has-gallery { cursor: zoom-in; position: relative; }
.card .shot.has-gallery::after {
  content: attr(data-count);
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(18, 16, 14, 0.78);
  color: var(--paper);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 4px 9px;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.card:hover .shot.has-gallery::after { opacity: 1; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 11, 10, 0.94);
  display: none;
  flex-direction: column;
  padding: 22px;
}
.lb.open { display: flex; }

.lb-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--muted-dark);
  font-size: 13px;
  margin-bottom: 14px;
  flex: 0 0 auto;
}
.lb-title { color: var(--paper); font-size: 15px; }
.lb-count { margin-left: auto; font-variant-numeric: tabular-nums; }

.lb-close, .lb-nav {
  background: transparent;
  border: 1px solid var(--line-dark);
  color: var(--paper);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  cursor: pointer;
  flex: 0 0 auto;
}
.lb-close:hover, .lb-nav:hover { border-color: var(--gold); color: var(--gold); }
.lb-nav[disabled] { opacity: 0.3; cursor: default; }

.lb-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius);
}

.lb-thumbs {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.lb-thumbs button {
  width: 62px;
  height: 62px;
  padding: 0;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.lb-thumbs button[aria-current="true"] { border-color: var(--gold); }
.lb-thumbs img { width: 100%; height: 100%; object-fit: contain; }

body.lb-lock { overflow: hidden; }

@media (max-width: 700px) {
  .lb { padding: 14px; }
  .lb-nav { display: none; }
  .lb-thumbs button { width: 48px; height: 48px; }
}