/* style.css */
/* VERSION 10.0.62 */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --bg:#050505;
  --panel:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.06);
  --text:#ffffff;
  --muted:#9ca3af;
  --red:#ff2b2b;
}

body{

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

  font-size:
    16px;

  font-weight:
    400;

  line-height:
    1.5;

  background:
    linear-gradient(
      rgba(0,0,0,.72),
      rgba(0,0,0,.82)
    ),
    url('assets/background.jpg');

  background-position:
    center center;

  background-size:
    cover;

  background-repeat:
    no-repeat;

  background-attachment:
    scroll;

  color:
    var(--text);

}

/* TOP NAV */

.top-nav{

  width:
    100%;

  background:
    linear-gradient(
      to right,
      rgba(20,20,20,.92),
      rgba(32,32,32,.92),
      rgba(20,20,20,.92)
    );

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

  position:
    sticky;

  top:
    0;

  z-index:
    999;

  backdrop-filter:
    blur(12px);

}

.nav-inner{

  max-width:
    1400px;

  margin:
    0 auto;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  gap:
    46px;

  height:
    78px;

}

.nav-inner a{

  color:
    white;

  text-decoration:
    none;

  font-size:
    13px;

  font-weight:
    500;

  letter-spacing:
    1.2px;

  transition:
    .2s;

}

/* HOVER ROT */

.nav-inner a:hover{

  color:
    #ff2b2b;

}

/* ACTIVE */

.nav-inner a.active{

  color:
    #ff2b2b;

}

/* WELCOME TEXT */

.welcome-text{

  max-width:
    1100px;

  margin:
    26px auto 10px;

  padding:
    0 14px;

  text-align:
    center;

}

.welcome-text p{

  color:
    rgba(255,255,255,.78);

  font-size:
    20px;

  line-height:
    1.7;

  font-weight:
    400;

}

/* WHATSAPP */

.whatsapp-link{

  color:
    #25D366;

  text-decoration:
    none;

  font-weight:
    600;

  transition:
    .2s;

}

.whatsapp-link:hover{

  opacity:
    .75;

}

/* PAGE */

.page-shell{

  width:
    100%;

  max-width:
    1700px;

  margin:
    0 auto;

  padding:
    16px;

}

/* SEARCH */

.search-row{

  display:
    flex;

  gap:
    10px;

  max-width:
    1100px;

  margin:
    24px auto 22px;

}

#searchInput{

  flex:
    1;

  height:
    56px;

  line-height:
    56px;

  border:
    none;

  outline:
    none;

  border-radius:
    16px;

  padding:
    0 18px;

  font-size:
    16px;

  font-weight:
    400;

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

  color:
    #111;

}

#resetBtn{

  border:
    none;

  border-radius:
    16px;

  background:
    #ff2b2b;

  color:
    white;

  padding:
    0 24px;

  font-weight:
    600;

  font-size:
    14px;

  cursor:
    pointer;

  transition:
    .2s;

}

#resetBtn:hover{

  background:
    #ff4444;

  transform:
    translateY(-1px);

}

/* CATEGORY */

.category-block{

  margin-bottom:
    12px;

  background:
    rgba(10,10,10,.72);

  border:
    1px solid rgba(255,255,255,.05);

  border-radius:
    22px;

  overflow:
    hidden;

  backdrop-filter:
    blur(8px);

}

.category-header{

  display:
    flex;

  align-items:
    center;

  padding:
    22px;

  font-size:
    28px;

  font-weight:
    700;

  cursor:
    pointer;

}

.subcategory-header{

  display:
    flex;

  align-items:
    center;

  padding:
    18px 22px;

  font-size:
    19px;

  font-weight:
    600;

  cursor:
    pointer;

}

.arrow{

  color:
    var(--red);

  font-size:
    18px;

  margin-right:
    12px;

}

/* PRODUCT GRID */

.product-grid{

  display:
    grid;

  grid-template-columns:
    repeat(auto-fill,minmax(320px,320px));

  justify-content:
    flex-start;

  gap:
    12px;

  padding:
    0 18px 18px;

}

/* PRODUCT CARD */

.product-card{

  width:
    320px;

  display:
    grid;

  grid-template-columns:
    70px 1fr;

  gap:
    12px;

  align-items:
    center;

  background:
    rgba(255,255,255,.04);

  border:
    1px solid rgba(255,255,255,.06);

  border-radius:
    18px;

  padding:
    12px;

  cursor:
    pointer;

  transition:
    .2s;

  backdrop-filter:
    blur(6px);

}

.product-card:hover{

  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,.08);

}

.product-image{

  width:
    70px;

  height:
    70px;

}

.product-image img{

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  border-radius:
    12px;

}

/* PRODUCT ID */

.product-id{

  font-size:
    11px;

  font-weight:
    500;

  color:
    #8d8d8d;

  margin-bottom:
    2px;

  letter-spacing:
    .4px;

}

.product-info h3{

  font-size:
    16px;

  font-weight:
    600;

  line-height:
    1.2;

  margin-bottom:
    4px;

}

/* PRODUCT PRICE */

.price{

  margin-top:
    4px;

  font-size:
    13px;

  font-weight:
    600;

  color:
    var(--red);

  line-height:
    1.2;

}

/* / TAG */

.price::after{

  content:
    " / Tag";

  color:
    #b8b8b8;

  font-size:
    11px;

  font-weight:
    400;

}

/* MODAL */

.modal{

  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    18px;

}

.modal-backdrop{

  position:
    absolute;

  inset:
    0;

  background:
    rgba(0,0,0,.82);

  backdrop-filter:
    blur(16px);

}

/* DETAIL */

.product-detail{

  position:
    relative;

  width:
    min(920px,100%);

  background:
    rgba(12,12,14,.96);

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

  border-radius:
    24px;

  padding:
    16px;

  z-index:
    2;

  backdrop-filter:
    blur(12px);

}

.detail-grid{

  display:
    grid;

  grid-template-columns:
    320px 1fr;

  gap:
    18px;

}

.detail-media{

  background:
    #111;

  border-radius:
    18px;

  padding:
    10px;

}

/* ZOOM */

.zoom-wrapper{

  overflow:
    hidden;

  border-radius:
    14px;

  cursor:
    zoom-in;

}

#modalMainImage{

  width:
    100%;

  aspect-ratio:
    1/1;

  object-fit:
    cover;

  border-radius:
    14px;

  transition:
    transform .25s ease;

  transform-origin:
    center center;

}

.zoom-wrapper:hover #modalMainImage{

  transform:
    scale(1);

}

/* GALLERY */

.gallery{

  display:
    flex;

  gap:
    8px;

  flex-wrap:
    wrap;

  margin-top:
    12px;

}

.gallery img{

  width:
    62px;

  height:
    62px;

  object-fit:
    cover;

  border-radius:
    10px;

  cursor:
    pointer;

  border:
    2px solid rgba(255,255,255,.08);

  transition:
    .2s;

}

.gallery img:hover{

  border:
    2px solid #ff2b2b;

  transform:
    scale(1.04);

}

.eyebrow{

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    500;

  margin-bottom:
    8px;

  text-transform:
    uppercase;

}

.detail-info h2{

  font-size:
    clamp(28px,4vw,42px);

  line-height:
    1;

  font-weight:
    700;

  margin-bottom:
    10px;

}

.article-number{

  color:
    var(--muted);

  font-size:
    14px;

  margin-bottom:
    14px;

}

#modalDescription{

  line-height:
    1.6;

  font-size:
    15px;

  margin-bottom:
    14px;

}

/* DETAIL PRICE */

.price-big{

  font-size:
    clamp(22px,4vw,34px);

  font-weight:
    700;

  color:
    var(--red);

  margin-bottom:
    18px;

  line-height:
    1.1;

}

/* / TAG */

.price-big::after{

  content:
    " / Tag";

  color:
    #b8b8b8;

  font-size:
    .5em;

  font-weight:
    400;

}

/* CLOSE BUTTON */

.close-modal{

  position:
    absolute;

  top:
    12px;

  right:
    12px;

  width:
    42px;

  height:
    42px;

  border:
    none;

  background:
    transparent;

  color:
    #ff2b2b;

  font-size:
    34px;

  font-weight:
    300;

  line-height:
    1;

  cursor:
    pointer;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  transition:
    .2s;

  z-index:
    9999;

}

.close-modal:hover{

  transform:
    scale(1.08);

  color:
    #ff5555;

}

/* HIDDEN */

.hidden{

  display:
    none !important;

}

/* LAPTOP */

@media(max-width:1400px){

  .product-grid{

    grid-template-columns:
      repeat(auto-fill,minmax(320px,320px));

  }

}

/* TABLET */

@media(max-width:1000px){

  .product-grid{

    grid-template-columns:
      repeat(auto-fill,minmax(280px,280px));

  }

  .product-card{

    width:
      280px;

  }

}

/* MOBILE */

@media(max-width:700px){

  body{

    background-attachment:
      scroll;

  }

  .top-nav{

    overflow-x:
      hidden;

  }

  .nav-inner{

    gap:
      18px;

    height:
      64px;

    padding:
      0 12px;

    justify-content:
      center;

  }

  .nav-inner a{

    font-size:
      11px;

    white-space:
      nowrap;

    letter-spacing:
      .6px;

  }

  .welcome-text{

    margin:
      22px auto 8px;

    padding:
      0 18px;

  }

  .welcome-text p{

    font-size:
      13px;

    line-height:
      1.6;

  }

  .search-row{

    flex-direction:
      column;

  }

  #searchInput{

    height:
      68px !important;

    min-height:
      68px !important;

    line-height:
      68px !important;

    font-size:
      20px !important;

    padding:
      0 24px !important;

    border-radius:
      24px !important;

  }

  #resetBtn{

    height:
      68px;

    font-size:
      18px;

    border-radius:
      24px;

  }

  .category-header{

    font-size:
      24px;

    padding:
      18px;

  }

  .subcategory-header{

    font-size:
      16px;

    padding:
      14px 18px;

  }

  .arrow{

    font-size:
      15px;

  }

  .product-grid{

    grid-template-columns:
      1fr;

    justify-content:
      center;

  }

  .product-card{

    width:
      100%;

    max-width:
      100%;

    grid-template-columns:
      58px 1fr;

    gap:
      10px;

    padding:
      10px;

    border-radius:
      16px;

  }

  .product-image{

    width:
      58px;

    height:
      58px;

  }

  .product-id{

    font-size:
      10px;

  }

  .product-info h3{

    font-size:
      14px;

  }

  .price{

    font-size:
      12px;

  }

  .price::after{

    font-size:
      10px;

  }

  .detail-grid{

    grid-template-columns:
      1fr;

  }

}

/* =========================================
   iPHONE / MOBILE CLOSE BUTTON FIX
   VERSION 10.0.63
   ========================================= */

@media(max-width:700px){

  .product-detail{

    margin-top:
      20px;

  }

  .close-modal{

    position:
      absolute;

    top:
      calc(20px + env(safe-area-inset-top));

    right:
      20px;

    width:
      48px;

    height:
      48px;

    font-size:
      38px;

    line-height:
      1;

    z-index:
      99999;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

  }

}