/* =========================================================
   anchor point studio — store (catalog + preset detail)
   base.css supplies the shell: tokens, wrapper, grain, nav, footer.
   ========================================================= */

/* =========================================================
   masthead
   ========================================================= */

.store-head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 46vh;
  padding-top: 110px;
  padding-bottom: 6vh;
  position: relative;
  z-index: 1;
}

.store-headline {
  font-size: 7vh;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.store-sub {
  font-size: 2vh;
  font-weight: 300;
  line-height: 1.6;
  max-width: 44ch;
  opacity: 0.7;
  margin-top: 2.4vh;
}

/* =========================================================
   catalog
   ========================================================= */

.catalog {
  display: flex;
  flex-direction: column;
  padding-bottom: 10vh;
  position: relative;
  z-index: 1;
}

.catalog .section-label-wrapper {
  margin-bottom: 4vh;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  align-self: stretch;
}

.preset-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  transition: border-color 0.25s ease;
}
.preset-card:hover {
  border-color: #3a3a3a;
}

.pc-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}
.pc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.pc-body {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding: 2.4vh 2vh;
  flex: 1;
}

.pc-title {
  font-size: 2.2vh;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.pc-subtitle {
  font-size: 1.5vh;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.6;
}

.pc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 1.4vh;
}

.badge {
  font-size: 1.1vh;
  font-weight: 400;
  letter-spacing: 0.08em;
  border: 1px solid var(--color-rule);
  padding: 4px 8px;
  opacity: 0.65;
  white-space: nowrap;
}

.pc-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 1.6vh 2vh;
  border-top: 1px solid var(--color-rule);
}

.pc-price {
  font-size: 1.4vh;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.pc-cta {
  font-size: 1.4vh;
  font-weight: 400;
  position: relative;
}
.pc-cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1.5px;
  background-color: var(--color-accent);
  transition: width 0.25s ease;
}
.preset-card:hover .pc-cta::after {
  width: 100%;
}

.catalog-empty {
  padding: 8vh 0;
  font-size: 2vh;
  font-weight: 300;
  opacity: 0.55;
}

/* =========================================================
   preset detail
   ========================================================= */

.detail {
  display: flex;
  flex-direction: column;
  padding-top: 110px;
  padding-bottom: 10vh;
  position: relative;
  z-index: 1;
}

.detail .section-label-wrapper {
  margin-bottom: 5vh;
}

.detail-grid {
  display: flex;
  gap: 48px;
  align-self: stretch;
  align-items: flex-start;
}

.detail-media {
  flex: 1 1 56%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface);
  position: relative;
}
.detail-media img,
.detail-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.detail-media video.is-playing {
  opacity: 1;
}

.detail-info {
  flex: 1 1 44%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.detail-title {
  font-size: 4.4vh;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.detail-subtitle {
  font-size: 2vh;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.7;
  margin-top: 1.4vh;
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2.6vh;
}

.detail-desc {
  margin-top: 3vh;
}
.detail-desc p {
  font-size: 1.8vh;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 1.6vh;
}
.detail-desc p:last-child {
  margin-bottom: 0;
}

.detail-specs {
  display: grid;
  grid-template-columns: 14ch 1fr;
  gap: 1.2vh 16px;
  margin-top: 3vh;
  padding-top: 3vh;
  border-top: 1px solid var(--color-rule);
}
.detail-specs dt {
  font-size: 1.3vh;
  font-weight: 300;
  letter-spacing: 0.1em;
  opacity: 0.5;
}
.detail-specs dd {
  font-size: 1.5vh;
  font-weight: 400;
}

/* =========================================================
   email gate
   ========================================================= */

.gate {
  margin-top: 3.4vh;
  padding-top: 3vh;
  border-top: 1px solid var(--color-rule);
}

.gate-label {
  font-size: 1.3vh;
  font-weight: 300;
  letter-spacing: 0.1em;
  opacity: 0.5;
  display: block;
  margin-bottom: 1.6vh;
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gate-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.gate-email {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 1.6vh;
  font-weight: 400;
  padding: 14px 16px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-rule);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.gate-email:focus {
  border-color: #3a3a3a;
}
.gate-email::placeholder {
  color: var(--color-text);
  opacity: 0.35;
}

.gate-submit {
  font-family: inherit;
  font-size: 1.6vh;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 14px 24px;
  background: var(--color-accent);
  color: var(--color-text);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.2s ease;
}
.gate-submit:hover {
  opacity: 0.85;
}
.gate-submit[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* honeypot — off-screen, never focusable, never announced */
.gate-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Turnstile runs in interaction-only mode: the widget stays invisible unless
   cloudflare actually wants a challenge. Only collapse it while it is still
   empty — hiding the container outright can stop the widget rendering at all. */
.gate-turnstile:empty {
  display: none;
}

.gate-msg {
  font-size: 1.4vh;
  font-weight: 300;
  line-height: 1.5;
  min-height: 1.4vh;
}
.gate-msg.is-error {
  opacity: 0.85;
}
.gate-msg.is-success {
  opacity: 0.7;
}

.gate-fine {
  font-size: 1.2vh;
  font-weight: 300;
  line-height: 1.6;
  opacity: 0.45;
  max-width: 52ch;
}
.gate-fine a {
  border-bottom: 1px solid var(--color-rule);
}
.gate-fine a:hover {
  border-bottom-color: var(--color-text);
}

/* =========================================================
   install notes
   ========================================================= */

.install {
  align-self: stretch;
  margin-top: 8vh;
  padding-top: 4vh;
  border-top: 1px solid var(--color-rule);
}

.install h2 {
  font-size: 1.2vh;
  font-weight: 300;
  letter-spacing: 0.1em;
  opacity: 0.5;
  margin-bottom: 2.4vh;
}

.install-body {
  max-width: 70ch;
}
.install-body p {
  font-size: 1.7vh;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 1.4vh;
}
.install-body p:last-child {
  margin-bottom: 0;
}

.detail-back {
  font-size: 1.4vh;
  font-weight: 400;
  opacity: 0.55;
  align-self: flex-start;
  margin-top: 6vh;
  transition: opacity 0.2s ease;
}
.detail-back:hover {
  opacity: 1;
}

/* =========================================================
   notice page (download expired / file missing / unsubscribed)
   ========================================================= */

.notice {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 110px;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}
.notice .section-label-wrapper {
  margin-bottom: 6vh;
}
.notice-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 60ch;
}
.notice-message {
  font-size: 3.2vh;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.notice-sub {
  font-size: 1.9vh;
  font-weight: 300;
  line-height: 1.6;
  opacity: 0.6;
  margin-top: 2vh;
}
.notice-cta {
  font-size: 1.5vh;
  font-weight: 400;
  align-self: flex-start;
  margin-top: 5vh;
  position: relative;
}
.notice-cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background-color: var(--color-accent);
  transition: width 0.25s ease;
}
.notice-cta:hover::after {
  width: 100%;
}

/* =========================================================
   tablet — gap reductions only, desktop vh type stays
   ========================================================= */

@media (max-width: 1199px) {
  .preset-grid  { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .detail-grid  { gap: 32px; }
  .store-headline { font-size: 6vh; }
}

/* =========================================================
   mobile — all dynamic sizing in vw, never vh
   ========================================================= */

@media (max-width: 767px) {
  .store-head {
    min-height: 0;
    height: auto;
    padding-top: 90px;
    padding-bottom: 9vw;
  }
  .store-headline { font-size: 12vw; }
  .store-sub      { font-size: 4.2vw; margin-top: 4vw; max-width: none; }

  .catalog { padding-bottom: 16vw; }
  .catalog .section-label-wrapper { margin-bottom: 7vw; }

  .preset-grid { grid-template-columns: 1fr; gap: 7vw; }

  .pc-body     { gap: 2vw; padding: 4.5vw 4vw; }
  .pc-title    { font-size: 5.4vw; }
  .pc-subtitle { font-size: 3.8vw; }
  .pc-badges   { gap: 5px; padding-top: 3vw; }
  .badge       { font-size: 2.9vw; padding: 5px 8px; }
  .pc-foot     { padding: 3.6vw 4vw; }
  .pc-price    { font-size: 3.5vw; }
  .pc-cta      { font-size: 3.7vw; }

  .catalog-empty { font-size: 4.2vw; padding: 14vw 0; }

  .detail { padding-top: 90px; padding-bottom: 16vw; }
  .detail .section-label-wrapper { margin-bottom: 8vw; }

  /* media becomes a banner above the copy */
  .detail-grid {
    flex-direction: column;
    gap: 7vw;
  }
  .detail-media { flex: none; width: 100%; }
  .detail-info  { flex: none; width: 100%; }

  .detail-title    { font-size: 9.5vw; }
  .detail-subtitle { font-size: 4.2vw; margin-top: 3vw; }
  .detail-badges   { margin-top: 5vw; gap: 5px; }
  .detail-desc     { margin-top: 6vw; }
  .detail-desc p   { font-size: 4vw; margin-bottom: 3.4vw; }

  .detail-specs {
    grid-template-columns: 1fr;
    gap: 1vw 0;
    margin-top: 6vw;
    padding-top: 6vw;
  }
  .detail-specs dt { font-size: 3vw; margin-top: 3.5vw; }
  .detail-specs dd { font-size: 4vw; }

  .gate { margin-top: 7vw; padding-top: 6vw; }
  .gate-label { font-size: 3vw; margin-bottom: 4vw; }

  /* stack so both touch targets get full width */
  .gate-row { flex-direction: column; gap: 10px; }
  .gate-email,
  .gate-submit {
    font-size: 4.2vw;
    padding: 16px;
    min-height: 48px;
    width: 100%;
  }

  .gate-msg  { font-size: 3.6vw; min-height: 3.6vw; }
  .gate-fine { font-size: 3.2vw; max-width: none; }

  .install { margin-top: 14vw; padding-top: 8vw; }
  .install h2 { font-size: 3vw; margin-bottom: 5vw; }
  .install-body p { font-size: 4vw; margin-bottom: 3vw; }

  .detail-back { font-size: 3.7vw; margin-top: 12vw; }

  .notice { padding-top: 90px; }
  .notice .section-label-wrapper { margin-bottom: 10vw; }
  .notice-message { font-size: 7.5vw; }
  .notice-sub     { font-size: 4.2vw; margin-top: 4vw; }
  .notice-cta     { font-size: 3.7vw; margin-top: 10vw; }
}