/* ═══════════════════════════════════════════
       PRODUCT PAGES
       Layers on top of css/styles.css — tokens, nav,
       footer, reveals and cursor all come from there.
    ═══════════════════════════════════════════ */

    /* ── Keyboard access for the nav dropdowns ──
       styles.css opens .nav-drop on :hover only; mirror it for focus. */
    .nav-has-drop:focus-within .nav-drop {
      visibility: visible;
      opacity: 1;
      pointer-events: all;
      transform: translateX(-50%) translateY(0);
    }

    /* ═══════════════════════════════════════════
       PAGE HERO
    ═══════════════════════════════════════════ */
    .page-hero {
      padding: 190px 0 110px;
      background-color: var(--bg);
      background-image:
        repeating-linear-gradient(
          135deg,
          rgba(15,15,15,0.032) 0,
          rgba(15,15,15,0.032) 1px,
          transparent 1px,
          transparent 68px
        );
    }
    .ph-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 80px;
      align-items: start;
      margin-top: 8px;
    }
    .ph-title { margin-bottom: 28px; }
    .ph-rule { width: 36px; height: 1px; background: var(--gold); margin-bottom: 28px; }
    .ph-lead {
      font-family: var(--mono);
      font-size: 15px;
      line-height: 1.95;
      color: var(--grey);
      max-width: 56ch;
      margin-bottom: 36px;
    }
    .ph-points {
      list-style: none;
      border-top: 1px solid rgba(15,15,15,0.08);
    }
    .ph-points li {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 11px 0;
      border-bottom: 1px solid rgba(15,15,15,0.06);
      font-family: var(--mono);
      font-size: 13px;
      line-height: 1.8;
      color: var(--grey);
    }
    .ph-points li::before {
      content: '';
      width: 14px; height: 1px;
      background: var(--gold);
      flex-shrink: 0;
      margin-top: 11px;
    }

    /* Right-hand panel */
    .ph-panel {
      background: var(--bg-2);
      padding: 40px 38px;
      border-top: 2px solid var(--gold);
    }
    .ph-panel-lbl {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      display: block;
      margin-bottom: 14px;
    }
    .ph-panel-ttl {
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 400;
      line-height: 1.25;
      color: var(--black);
      margin-bottom: 14px;
    }
    .ph-panel-txt {
      font-family: var(--mono);
      font-size: 13px;
      line-height: 1.95;
      color: var(--grey);
    }
    .ph-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin-top: 2px;
      border-left: 1px solid rgba(15,15,15,0.08);
      border-top: 1px solid rgba(15,15,15,0.08);
    }
    .ph-metric {
      padding: 26px 24px;
      border-right: 1px solid rgba(15,15,15,0.08);
      border-bottom: 1px solid rgba(15,15,15,0.08);
    }
    .ph-metric strong {
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 300;
      color: var(--black);
      display: block;
      line-height: 1.1;
      margin-bottom: 8px;
    }
    .ph-metric span {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--lgrey);
      line-height: 1.6;
      display: block;
    }

    /* ═══════════════════════════════════════════
       TRUST STRIP
    ═══════════════════════════════════════════ */
    .trust-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid rgba(15,15,15,0.08);
      border-bottom: 1px solid rgba(15,15,15,0.08);
    }
    .trust-cell {
      padding: 34px 28px;
      border-right: 1px solid rgba(15,15,15,0.08);
    }
    .trust-cell:last-child { border-right: none; }
    .trust-lbl {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--lgrey);
      display: block;
      margin-bottom: 10px;
    }
    .trust-val {
      font-family: var(--serif);
      font-size: 21px;
      font-weight: 400;
      color: var(--black);
    }

    /* ═══════════════════════════════════════════
       COLLECTION GRID
    ═══════════════════════════════════════════ */
    #collection { padding: 120px 0; background: var(--bg-2); }
    .sec-intro {
      font-family: var(--mono);
      font-size: 15px;
      line-height: 1.95;
      color: var(--grey);
      max-width: 62ch;
      margin-top: 24px;
    }
    .prod-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      margin-top: 64px;
    }
    .prod-card {
      background: var(--bg);
      display: flex;
      flex-direction: column;
      transition: background 0.3s;
    }
    .prod-card:hover { background: #FAFAF6; }
    .prod-img { aspect-ratio: 4/3; overflow: hidden; }
    .prod-img img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      filter: sepia(18%) saturate(0.82) brightness(0.97);
      transition: transform 0.6s var(--ease-out), filter 0.4s;
    }
    .prod-card:hover .prod-img img {
      transform: scale(1.05);
      filter: sepia(8%) saturate(0.95) brightness(1);
    }
    .prod-body {
      padding: 30px 30px 34px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .prod-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(15,15,15,0.08);
      margin-bottom: 18px;
    }
    .prod-code {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      color: var(--gold);
    }
    .prod-price {
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 400;
      color: var(--black);
    }
    .prod-name {
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 400;
      color: var(--black);
      line-height: 1.2;
      margin-bottom: 12px;
    }
    .prod-desc {
      font-family: var(--mono);
      font-size: 13px;
      line-height: 1.95;
      color: var(--grey);
      margin-bottom: 20px;
    }
    .prod-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 22px;
      margin-top: auto;
    }
    .prod-tag {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--lgrey);
      border: 1px solid rgba(15,15,15,0.12);
      padding: 5px 10px;
    }
    .prod-specs {
      border-top: 1px solid rgba(15,15,15,0.08);
    }
    .spec-row {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 9px 0;
      border-bottom: 1px solid rgba(15,15,15,0.05);
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.6;
    }
    .spec-row span   { color: var(--lgrey); letter-spacing: 0.1em; text-transform: uppercase; font-size: 9.5px; padding-top: 2px; }
    .spec-row strong { color: var(--black); font-weight: 400; text-align: right; }

    /* ═══════════════════════════════════════════
       MATERIAL DETAIL GRID
    ═══════════════════════════════════════════ */
    #details { padding: 120px 0; background: var(--bg); }
    .det-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      margin-top: 64px;
    }
    .det-card {
      background: var(--bg-2);
      transition: background 0.3s;
    }
    .det-card:hover { background: var(--bg-3); }
    .det-card > img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      display: block;
      filter: sepia(18%) saturate(0.82) brightness(0.97);
      transition: filter 0.4s;
    }
    .det-card:hover > img { filter: sepia(8%) saturate(0.95) brightness(1); }
    .det-body { padding: 26px 28px 30px; }
    .det-ttl {
      font-family: var(--serif);
      font-size: 21px;
      font-weight: 400;
      color: var(--black);
      line-height: 1.25;
      margin-bottom: 10px;
    }
    .det-ttl em {
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
      letter-spacing: 0.16em;
      color: var(--gold);
      display: block;
      margin-bottom: 6px;
    }
    .det-txt {
      font-family: var(--mono);
      font-size: 12.5px;
      line-height: 1.95;
      color: var(--grey);
    }

    /* ═══════════════════════════════════════════
       PRICING — dark section
    ═══════════════════════════════════════════ */
    #pricing {
      padding: 130px 0;
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }
    .pricing-ghost {
      position: absolute;
      bottom: -120px; right: -80px;
      width: min(600px, 60vw);
      height: min(600px, 60vw);
      opacity: 0.04;
      pointer-events: none;
    }
    #pricing .sec-label { color: rgba(255,255,255,0.22); }
    #pricing .sec-label::after { background: rgba(255,255,255,0.12); }
    #pricing .sec-head  { color: var(--white); }
    #pricing .sec-intro { color: rgba(255,255,255,0.42); }

    .price-card {
      margin-top: 56px;
      border: 1px solid rgba(255,255,255,0.09);
      overflow-x: auto;
    }
    .price-card table {
      width: 100%;
      border-collapse: collapse;
      min-width: 640px;
    }
    .price-card th {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.32);
      font-weight: 400;
      text-align: left;
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
      white-space: nowrap;
    }
    .price-card td {
      font-family: var(--mono);
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      padding: 18px 24px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      white-space: nowrap;
    }
    .price-card tbody tr { transition: background 0.25s; }
    .price-card tbody tr:hover { background: rgba(255,255,255,0.02); }
    .price-card td:first-child { color: var(--gold); letter-spacing: 0.12em; }
    .price-card td:last-child {
      font-family: var(--serif);
      font-size: 22px;
      color: var(--white);
    }
    .price-note {
      font-family: var(--mono);
      font-size: 11.5px;
      line-height: 2;
      color: rgba(255,255,255,0.3);
      padding: 24px;
      max-width: 82ch;
    }

    /* ═══════════════════════════════════════════
       COMING SOON
    ═══════════════════════════════════════════ */
    #soon {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 160px 52px 120px;
      position: relative;
      overflow: hidden;
      background-color: var(--bg);
      background-image:
        repeating-linear-gradient(
          135deg,
          rgba(15,15,15,0.032) 0,
          rgba(15,15,15,0.032) 1px,
          transparent 1px,
          transparent 68px
        );
    }
    .soon-ghost {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: min(700px, 80vw);
      height: min(700px, 80vw);
      opacity: 0.03;
      pointer-events: none;
    }
    .soon-inner { position: relative; z-index: 2; }
    .soon-lbl {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--lgrey);
      margin-bottom: 30px;
    }
    .soon-head {
      font-family: var(--serif);
      font-size: clamp(52px, 11vw, 128px);
      font-weight: 300;
      letter-spacing: -0.025em;
      line-height: 1;
      color: var(--black);
      margin-bottom: 34px;
    }
    .soon-rule { width: 36px; height: 1px; background: var(--gold); margin: 0 auto 34px; }
    .soon-txt {
      font-family: var(--mono);
      font-size: 14px;
      line-height: 2;
      color: var(--grey);
      max-width: 52ch;
      margin: 0 auto 52px;
    }

    /* ═══════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════ */
    @media (max-width: 1100px) {
      .prod-grid, .det-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 900px) {
      .page-hero { padding: 140px 0 80px; }
      .ph-grid { grid-template-columns: 1fr; gap: 48px; }
      .trust-strip { grid-template-columns: 1fr 1fr; }
      .trust-cell:nth-child(2) { border-right: none; }
      .trust-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(15,15,15,0.08); }
      #collection, #details, #pricing { padding: 90px 0; }
      #soon { padding: 130px 28px 90px; }
    }
    @media (max-width: 620px) {
      .prod-grid, .det-grid { grid-template-columns: 1fr; }
      .trust-strip { grid-template-columns: 1fr; }
      .trust-cell { border-right: none; border-bottom: 1px solid rgba(15,15,15,0.08); }
      .ph-metrics { grid-template-columns: 1fr; }
      .ph-panel { padding: 32px 26px; }
    }