:root{
  --black:#090909;
  --charcoal:#121212;
  --line:#d5d4d0;
  --off:#f2f1ed;
  --white:#ffffff;
  --muted:#777777;

  --max:1440px;
  --side:4vw;
}


/* ========================================
   RESET
======================================== */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:var(--off);

  color:var(--black);

  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
select{
  font-family:inherit;
}

[hidden]{
  display:none !important;
}


/* ========================================
   HEADER
======================================== */

.stock-header{
  position:fixed;

  top:0;
  left:0;
  right:0;

  z-index:100;

  height:82px;

  padding:
    0
    max(28px,var(--side));

  display:flex;

  align-items:center;

  justify-content:space-between;

  background:
    rgba(9,9,9,.92);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}


/* ========================================
   LOGO
======================================== */

.stock-brand{
  display:flex;

  align-items:center;

  width:300px;

  height:82px;

  overflow:hidden;
}

.stock-brand img{
  display:block;

  width:260px;

  height:auto;

  max-width:100%;

  object-fit:contain;
}


/* ========================================
   BACK
======================================== */

.back-link{
  padding-bottom:7px;

  border-bottom:
    1px solid
    rgba(255,255,255,.28);

  color:#fff;

  font-size:10px;

  letter-spacing:.18em;

  opacity:.72;

  transition:
    opacity .2s ease;
}

.back-link:hover{
  opacity:1;
}


/* ========================================
   HERO
======================================== */

.stock-hero{
  min-height:560px;

  padding:
    82px
    max(28px,var(--side))
    70px;

  display:flex;

  align-items:flex-end;

  background:
    radial-gradient(
      circle at 78% 32%,
      rgba(255,255,255,.07),
      transparent 25%
    ),
    linear-gradient(
      115deg,
      #090909,
      #111 55%,
      #080808
    );

  color:#fff;
}

.stock-hero-inner{
  width:100%;

  max-width:var(--max);

  margin:0 auto;
}

.hero-eyebrow{
  margin:
    0
    0
    25px;

  font-size:10px;

  letter-spacing:.24em;

  color:#777;
}

.stock-hero h1{
  margin:0;

  font-size:
    clamp(
      70px,
      7vw,
      110px
    );

  line-height:.84;

  letter-spacing:-.055em;

  font-weight:600;
}

.hero-intro{
  max-width:510px;

  margin:
    34px
    0
    0;

  font-size:15px;

  line-height:1.7;

  color:#929292;
}


/* ========================================
   STOCK SECTION
======================================== */

.stock-section{
  padding:
    100px
    max(28px,var(--side))
    120px;
}

.stock-container{
  width:100%;

  max-width:var(--max);

  margin:0 auto;
}


/* ========================================
   SEARCH HEADER
======================================== */

.search-head{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:40px;

  margin-bottom:55px;
}

.section-label{
  margin:
    0
    0
    22px;

  font-size:10px;

  letter-spacing:.18em;

  color:#777;
}

.search-head h2{
  margin:0;

  font-size:
    clamp(
      44px,
      5vw,
      76px
    );

  line-height:.95;

  font-weight:500;

  letter-spacing:-.05em;
}


/* ========================================
   COUNT
======================================== */

.stock-count{
  display:flex;

  align-items:flex-end;

  gap:12px;

  padding-bottom:7px;
}

.stock-count span{
  font-size:36px;

  line-height:1;

  letter-spacing:-.04em;
}

.stock-count small{
  padding-bottom:4px;

  font-size:9px;

  letter-spacing:.16em;

  color:#888;
}


/* ========================================
   FILTERS
======================================== */

.filters{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-bottom:55px;
}

.filter-group{
  position:relative;

  flex:
    1
    1
    175px;

  min-width:150px;
}

.filter-group label{
  position:absolute;

  top:12px;

  left:16px;

  z-index:2;

  font-size:8px;

  letter-spacing:.15em;

  color:#888;

  pointer-events:none;
}

.filter-group select{
  width:100%;

  height:68px;

  padding:
    22px
    35px
    5px
    16px;

  border:
    1px solid
    #d4d3cf;

  border-radius:0;

  outline:none;

  background:#fff;

  color:#111;

  font-size:10px;

  letter-spacing:.04em;

  appearance:none;

  -webkit-appearance:none;

  cursor:pointer;
}

.filter-group select:focus{
  border-color:#888;
}

.filter-group::after{
  content:"↓";

  position:absolute;

  right:14px;

  top:27px;

  pointer-events:none;

  font-size:10px;

  color:#777;
}


/* ========================================
   RESET
======================================== */

.reset-button{
  flex:
    0
    0
    90px;

  width:90px;

  height:68px;

  padding:0;

  border:
    1px solid
    #151515;

  background:#151515;

  color:#fff;

  font-size:9px;

  letter-spacing:.18em;

  cursor:pointer;

  transition:
    background .2s ease;
}

.reset-button:hover{
  background:#333;
}


/* ========================================
   MESSAGE
======================================== */

.no-result{
  display:none;

  padding:
    70px
    20px;

  text-align:center;

  border-top:
    1px solid
    #cccac5;

  border-bottom:
    1px solid
    #cccac5;
}

.no-result strong{
  display:block;

  font-size:12px;

  letter-spacing:.14em;
}

.no-result p{
  margin:
    14px
    0
    0;

  font-size:12px;

  line-height:1.6;

  color:#888;
}


/* ========================================
   TABLE
======================================== */

.table-wrap{
  width:100%;

  overflow-x:auto;

  border-top:
    1px solid
    #bcbcb8;
}

.stock-table{
  width:100%;

  min-width:1100px;

  border-collapse:collapse;
}

.stock-table th{
  padding:
    19px
    12px;

  border-bottom:
    1px solid
    #cccac5;

  text-align:left;

  white-space:nowrap;

  font-size:8px;

  font-weight:600;

  letter-spacing:.14em;

  color:#777;
}

.stock-table td{
  padding:
    24px
    12px;

  border-bottom:
    1px solid
    #d8d6d1;

  vertical-align:middle;

  white-space:nowrap;

  font-size:12px;
}

.stock-table tbody tr{
  transition:
    background .2s ease;
}

.stock-table tbody tr:hover{
  background:
    rgba(255,255,255,.65);
}

.stock-table td:first-child{
  font-weight:700;

  letter-spacing:.06em;
}

.stock-table td:nth-child(2){
  font-weight:600;
}


/* ========================================
   STATUS
======================================== */

.status{
  display:inline-flex;

  align-items:center;

  gap:8px;

  font-size:9px;

  letter-spacing:.12em;
}

.status::before{
  content:"";

  display:block;

  width:5px;

  height:5px;

  flex:
    0
    0
    5px;

  border-radius:50%;

  background:#111;
}


/* ========================================
   MOBILE RESULTS
======================================== */

.stock-mobile{
  display:none;
}


/* ========================================
   CONTACT
======================================== */

.stock-contact{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:10vw;

  margin-top:130px;

  padding-top:80px;

  border-top:
    1px solid
    #bbb9b4;
}

.stock-contact h2{
  margin:0;

  font-size:
    clamp(
      46px,
      5vw,
      78px
    );

  line-height:.94;

  font-weight:500;

  letter-spacing:-.05em;
}

.contact-right{
  max-width:500px;

  padding-top:35px;
}

.contact-right p{
  margin:
    0
    0
    35px;

  font-size:14px;

  line-height:1.8;

  color:#666;
}

.inquiry-button{
  display:inline-flex;

  align-items:center;

  gap:30px;

  padding:
    18px
    22px;

  background:#111;

  color:#fff;

  font-size:9px;

  letter-spacing:.18em;

  transition:
    background .2s ease,
    color .2s ease;
}

.inquiry-button:hover{
  background:#fff;

  color:#111;
}


/* ========================================
   FOOTER
======================================== */

footer{
  padding:
    28px
    max(28px,var(--side));

  display:flex;

  justify-content:space-between;

  background:#0b0b0b;

  color:#777;

  font-size:9px;

  letter-spacing:.14em;
}


/* ========================================
   TABLET
======================================== */

@media(max-width:1200px){

  .filter-group{
    flex:
      1
      1
      calc(33.333% - 10px);
  }

  .reset-button{
    flex:
      1
      1
      calc(33.333% - 10px);

    width:auto;
  }

}


/* ========================================
   MOBILE
======================================== */

@media(max-width:850px){


  .stock-header{
    height:70px;

    padding:
      0
      20px;
  }


  .stock-brand{
    width:190px;

    height:70px;
  }


  .stock-brand img{
    width:180px;
  }


  .back-link{
    font-size:8px;

    letter-spacing:.14em;
  }


  /* HERO */

  .stock-hero{
    min-height:510px;

    padding:
      70px
      20px
      55px;
  }


  .hero-eyebrow{
    margin-bottom:20px;

    font-size:8px;
  }


  .stock-hero h1{
    font-size:
      clamp(
        58px,
        18vw,
        82px
      );
  }


  .hero-intro{
    max-width:340px;

    margin-top:27px;

    font-size:13px;
  }


  /* SECTION */

  .stock-section{
    padding:
      65px
      20px
      80px;
  }


  /* SEARCH HEADER */

  .search-head{
    gap:20px;

    margin-bottom:38px;
  }


  .section-label{
    margin-bottom:16px;

    font-size:8px;
  }


  .search-head h2{
    font-size:
      clamp(
        40px,
        12vw,
        56px
      );
  }


  /* COUNT */

  .stock-count{
    gap:7px;

    padding-bottom:3px;
  }


  .stock-count span{
    font-size:27px;
  }


  .stock-count small{
    max-width:45px;

    padding-bottom:2px;

    font-size:6px;

    line-height:1.4;
  }


  /* FILTERS */

  .filters{
    gap:8px;

    margin-bottom:35px;
  }


  .filter-group{
    flex:
      1
      1
      calc(50% - 4px);

    min-width:
      calc(50% - 4px);
  }


  .filter-group select{
    height:60px;

    padding:
      20px
      28px
      4px
      12px;

    font-size:9px;
  }


  .filter-group label{
    top:10px;

    left:12px;

    font-size:6px;
  }


  .filter-group::after{
    top:25px;

    right:11px;
  }


  .reset-button{
    flex:
      1
      1
      100%;

    width:100%;

    height:48px;
  }


  /* DESKTOP TABLE */

  .table-wrap{
    display:none;
  }


  /* MOBILE */

  .stock-mobile{
    display:block;

    border-top:
      1px solid
      #aaa;
  }


  .stock-card{
    padding:
      25px
      0;

    border-bottom:
      1px solid
      #ccc;
  }


  .stock-card-top{
    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    margin-bottom:22px;
  }


  .stock-card-product{
    margin:0;

    font-size:15px;

    font-weight:700;

    letter-spacing:.07em;
  }


  .stock-card-type{
    margin:
      6px
      0
      0;

    font-size:10px;

    color:#666;
  }


  .stock-card-grid{
    display:grid;

    grid-template-columns:
      1fr
      1fr;

    gap:
      18px
      25px;
  }


  .stock-card-item span{
    display:block;

    margin-bottom:6px;

    font-size:6px;

    letter-spacing:.16em;

    color:#888;
  }


  .stock-card-item strong{
    display:block;

    font-size:11px;

    font-weight:500;

    line-height:1.4;
  }


  .stock-card .status{
    font-size:7px;
  }


  /* CONTACT */

  .stock-contact{
    grid-template-columns:
      1fr;

    gap:35px;

    margin-top:80px;

    padding-top:55px;
  }


  .stock-contact h2{
    font-size:46px;
  }


  .contact-right{
    padding-top:0;
  }


  /* FOOTER */

  footer{
    flex-direction:column;

    gap:18px;

    padding:
      25px
      20px;
  }

}