/* New sections that don't exist in the ported original (which only ever
   showed one product) — kept separate from l9l-site.css so the ported file
   stays an unmodified copy of the original export. Reuses the original's
   tokens (--black/--white/--dim-grey/--silver), spacing unit (12px, seen
   throughout l9l-site.css: .footer padding, .logo-block padding, .about
   margins) and type system (Oswald / Noto Serif HK / Noto Sans HK). */

/* Homepage hero: the coin-coaster product, ported from the original site
   where it was CMS-bound directly onto index.html (.coaster-con — see
   _migration/l9l-store/index.html and l9l.webflow.css for that layout,
   reused unmodified here). The original's 3 coin images sat in live
   Spline 3D iframes; self-hosting real 3D would need a glTF/GLB model
   file we don't have (Spline scenes aren't exportable to that from
   photos alone), so real product photos are used instead, each with a
   static CSS metallic sheen — decided explicitly over a mouse-tracked
   highlight or keeping the iframes. */
.coin-sheen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.coin-sheen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: conic-gradient(
    from 220deg,
    rgba(255, 255, 255, 0.05) 0deg,
    rgba(255, 255, 255, 0.35) 40deg,
    rgba(255, 255, 255, 0.05) 90deg,
    rgba(0, 0, 0, 0.12) 180deg,
    rgba(255, 255, 255, 0.15) 260deg,
    rgba(255, 255, 255, 0.05) 320deg,
    rgba(255, 255, 255, 0.05) 360deg
  );
  mix-blend-mode: overlay;
}

.coin-sheen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Original (l9l.webflow.css) is max-width: 360px. */
.coaster-h-controlled {
  max-width: 380px;
}

/* The original .content-con (l9l.webflow.css) is height:100vh, built for
   the old single-viewport (no scroll) product page. The homepage/product
   page now scroll past a full gallery + grid, so a locked 100vh either
   clips content or leaves a huge empty gap — let it size to its content
   instead, with margin above/below in place of the vh lock. */
.content-con {
  height: auto;
  margin-top: 48px;
  margin-bottom: 48px;
}

/* .thumb-con is now a <button> (was a plain div) so the gallery thumbnails
   are clickable/keyboard-accessible for the click-to-swap-main-image
   interaction (see ProductGallery.tsx) — reset button chrome so it still
   looks like the original's plain image tile, plus add an active-state
   indicator (none existed in the original CSS, since nothing was
   interactive there). */
.thumb-con {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  overflow: hidden;
}

/* Original (l9l.webflow.css) is `.prod-gallery { flex: 1; justify-content:
   space-around; display: flex }` — a single row that doesn't wrap, and
   `.thumb-con { width: 120px; height: 120px }` — a fixed size that doesn't
   respond to the grid below. Grid instead: 6 columns on large screens
   (all thumbnails visible in one row without overflowing), 3 on mobile
   (see the max-width: 767px block below). */
.prod-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.thumb-con img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumb-con:hover {
  opacity: 0.85;
}

/* The original .footer (l9l-site.css) is position:fixed, built for the old
   single-viewport (100vh, no scroll) product page. The homepage now scrolls
   past a full project grid, so a fixed footer would float over grid content
   at the bottom of the viewport instead of ending the page — put it back in
   normal flow. */
.footer {
  position: static;
  height: auto;
  padding: 24px 24px 32px;
}

.project-grid {
  width: 100vw;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 96px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.project-tile {
  display: block;
  text-decoration: none;
}

.project-tile-img-con {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--silver);
  overflow: hidden;
}

.project-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.project-tile:hover .project-tile-img {
  transform: scale(1.03);
}

.project-tile-title {
  color: #000;
  margin-top: 14px;
  margin-bottom: 2px;
  font-family: 'Noto Serif HK', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

.project-tile-status {
  color: var(--silver);
  font-family: Oswald, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-tile.is-coming-soon {
  cursor: not-allowed;
}

.project-tile.is-coming-soon .project-tile-img-con {
  opacity: 0.55;
}

/* .about (the "?" nav button) and .tab-link (FAQ/About/Contact tabs, in
   AboutModal.tsx) are now <button>s instead of <a>s, so the modal works
   without dead hrefs — same appearance-reset need as .thumb-con above. */
.about,
.tab-link {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
}

.tab-link {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 9px 20px;
  font-size: 14px;
  white-space: nowrap;
}

/* .faq-modal (original l9l.webflow.css) has no `position` set, so it's an
   in-flow static element; .close-faq is `position: fixed`. Per CSS
   stacking rules, positioned elements always paint above non-positioned
   ones in the same stacking context regardless of DOM order — so the
   fixed backdrop was painting (and catching clicks) on top of the modal
   itself, making every click anywhere register as "click outside" and
   close it. Giving .faq-modal a position promotes it into the same
   stacking bucket as .close-faq, where DOM order then wins — it comes
   after .close-faq in the markup, so it now correctly paints on top. */
.faq-modal {
  position: relative;
  z-index: 1;
}

/* .email-form-block (the Contact tab's form) used Webflow's generic
   .w-input/.w-button classes, which live in webflow.css — skipped per
   workspace convention (only imports the real site CSS, not Webflow's
   framework boilerplate). Basic form styling that was never ported,
   scoped to this form so it doesn't affect the checkout page's own
   .w-commerce-commercecheckout* buttons/inputs (those have real styles
   already, ported from l9l.webflow.css). */
.email-form-block {
  display: flex;
  flex-direction: column;
}

.email-form-block label {
  margin-top: 14px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--dim-grey);
}

.email-form-block .w-input {
  border: 1px solid var(--silver);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
}

.email-form-block .w-button {
  appearance: none;
  -webkit-appearance: none;
  margin-top: 18px;
  padding: 10px 16px;
  border: none;
  background-color: var(--black);
  color: var(--white);
  font-family: 'Noto Sans HK', sans-serif;
  cursor: pointer;
}

.email-form-block .w-button:disabled {
  opacity: 0.6;
  cursor: default;
}

@media screen and (max-width: 767px) {
  .project-grid {
    grid-template-columns: 1fr;
    padding: 0 12px 64px;
  }

  /* Original mobile rule (l9l.webflow.css) gives .coaster-con a 200px
     bottom padding — needed on the old single-product page, where
     .footer was position:fixed and this padding kept content from
     disappearing behind it. .footer is position:static now (see the
     .footer override above, for the homepage's project grid below it),
     so that gap is just dead space today — most visible on the homepage,
     where it left a huge empty gulf between the hero and the project
     grid beneath it. */
  .coaster-con {
    padding-bottom: 0;
  }

  .prod-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}