@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* =========================
   GLOBAL
========================== */

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

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;

  background:#e4e4e4;

  font-family:"Poppins", sans-serif;

  overflow-x:hidden;
  overflow-y:auto;

  padding:
    18px
    18px
    calc(120px + env(safe-area-inset-bottom));

  display:flex;
  flex-direction:column;
}

/* =========================
   PAGE CONTAINER
========================== */

.page-wrapper{
  width:100%;
  max-width:1400px;
  margin:0 auto;
}

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

.top-header{
  width:100%;

  display:flex;
  align-items:center;

  margin-bottom:18px;

  animation:fadeTop 0.8s ease;
}

.brand-section{
  display:flex;
  align-items:center;
  gap:12px;
}

/* LOGO */

.brand-logo{
  width:48px;
  height:48px;

  object-fit:contain;

  display:block;

  flex-shrink:0;
}

/* BRAND NAME */

.brand-section h1{
  font-family:"Playfair Display", serif;

  font-size:1.6rem;
  font-weight:700;

  color:#111111;

  letter-spacing:1px;

  line-height:1;

  text-transform:uppercase;

  text-shadow:
    0 3px 10px rgba(0,0,0,0.10);
}

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

.search-section{
  width:100%;
  position:relative;

  margin-bottom:24px;

  animation:fadeTop 1s ease;
}

.search-container{
  width:100%;
  height:58px;

  background:#ffffff;

  border-radius:22px;

  display:flex;
  align-items:center;

  padding:0 18px;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.06);

  transition:0.35s ease;
}

.search-container:focus-within{
  box-shadow:
    0 12px 28px rgba(255, 187, 164, 0.22);
}

.search-container i{
  color:#999999;
  font-size:1rem;
  margin-right:12px;
}

.search-container input{
  width:100%;
  height:100%;

  border:none;
  outline:none;

  background:transparent;

  font-size:1rem;
  font-weight:500;

  color:#222222;
}

/* SEARCH RESULTS */

.search-results{
  position:absolute;

  top:68px;
  left:0;

  width:100%;

  background:#ffffff;

  border-radius:20px;

  overflow:hidden;

  box-shadow:
    0 12px 28px rgba(0,0,0,0.08);

  z-index:999;

  display:none;

  animation:searchPopup 0.35s ease;
}

.search-item{
  padding:14px 18px;

  font-size:0.95rem;
  font-weight:500;

  color:#333333;

  cursor:pointer;

  transition:0.3s ease;
}

.search-item:hover{
  background:rgba(255, 187, 164, 0.12);
  color:#0f88a7;
}

/* =========================
   CLEAR SEARCH BUTTON
========================== */

.clear-search{
  width:34px;
  height:34px;

  border:none;
  outline:none;

  background:
    rgba(255, 187, 164, 0.16);

  border-radius:50%;

  display:flex;
  justify-content:center;
  align-items:center;

  cursor:pointer;

  flex-shrink:0;

  opacity:0;
  visibility:hidden;

  transform:scale(0.8);

  transition:0.3s ease;
}

.clear-search.show{
  opacity:1;
  visibility:visible;

  transform:scale(1);
}

.clear-search i{
  font-size:0.9rem;
  color:#0f88a7;
}

.clear-search:hover{
  background:
    rgba(255, 187, 164, 0.28);
}

/* =========================
   FURNITURE SECTION
========================== */

.furniture-section{
  width:100%;
}

.furniture-grid{
  display:grid;

  grid-template-columns:repeat(2, 1fr);

  gap:16px;
}

/* TABLET */

@media (min-width:768px){

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

/* DESKTOP */

@media (min-width:1024px){

  .furniture-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

/* LARGE DESKTOP */

@media (min-width:1400px){

  .furniture-grid{
    grid-template-columns:repeat(5, 1fr);
  }
}

/* =========================
   CARD
========================== */

.furniture-card{
  background:#ffffff;

  border-radius:24px;

  padding:7px;

  overflow:hidden;

  box-shadow:
    0 6px 20px rgba(0,0,0,0.06);

  animation:cardFade 0.8s ease forwards;

  opacity:0;
  transform:translateY(40px);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;

  text-decoration:none;
}

.furniture-card:hover{
  transform:translateY(-4px);

  box-shadow:
    0 12px 30px rgba(0,0,0,0.10);
}

/* STAGGER */

.furniture-card:nth-child(1){ animation-delay:0.1s; }
.furniture-card:nth-child(2){ animation-delay:0.2s; }
.furniture-card:nth-child(3){ animation-delay:0.3s; }
.furniture-card:nth-child(4){ animation-delay:0.4s; }
.furniture-card:nth-child(5){ animation-delay:0.5s; }
.furniture-card:nth-child(6){ animation-delay:0.6s; }
.furniture-card:nth-child(7){ animation-delay:0.7s; }
.furniture-card:nth-child(8){ animation-delay:0.8s; }

/* IMAGE */

.furniture-card img{
  width:100%;
  aspect-ratio:1/1;

  object-fit:cover;

  border-radius:18px;

  margin-bottom:4px;

  display:block;
}

/* TITLE */

.furniture-card h3{
  font-family:"Playfair Display", serif;

  font-size:1rem;
  font-weight:700;

  color:#1f1f1f;

  text-align:center;

  padding:4px 0 6px;
}

/* =========================
   BOTTOM NAVIGATION
========================== */

.bottom-nav{
  position:fixed;

  bottom:calc(15px + env(safe-area-inset-bottom));

  left:50%;
  transform:translateX(-50%);

  width:min(92vw, 420px);
  height:78px;

  background:rgba(182,181,181,0.92);

  border-radius:28px;

  display:flex;
  justify-content:space-around;
  align-items:center;

  padding:0 10px;

  backdrop-filter:blur(12px);

  z-index:9999;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.15);
}

.nav-item{
  position:relative;

  width:68px;
  height:68px;

  display:flex;
  justify-content:center;
  align-items:center;
}

.nav-link{
  position:relative;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  gap:5px;

  text-decoration:none;
  color:#ffffff;

  transition:0.35s ease;
}

.nav-link i{
  font-size:1.2rem;
  transition:0.35s ease;
}

.nav-text{
  position:absolute;

  bottom:-10px;

  font-size:0.7rem;

  opacity:0;

  transform:translateY(10px);

  transition:0.35s ease;

  color:#000000;
}

.nav-item.active .nav-link i{
  transform:translateY(-10px);

  color:#0f88a7;

  text-shadow:
    0 0 10px rgb(253, 210, 196),
    0 0 25px rgba(255, 187, 164, 1);
}

.nav-item.active .nav-text{
  opacity:1;
  transform:translateY(0);

  font-weight:600;
}

/* =========================
   ANIMATIONS
========================== */

@keyframes cardFade{

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fadeTop{

  from{
    opacity:0;
    transform:translateY(-20px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes searchPopup{

  from{
    opacity:0;
    transform:translateY(-10px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

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

@media (max-width:480px){

  body{
    padding:
      14px
      12px
      calc(120px + env(safe-area-inset-bottom));
  }

  .brand-section{
    gap:10px;
  }

  .brand-logo{
    width:42px;
    height:42px;
  }

  .brand-section h1{
    font-size:0.92rem;
    letter-spacing:0.5px;
  }

  .search-container{
    height:50px;
    border-radius:18px;
  }

  .search-container input{
    font-size:0.92rem;
  }

  .clear-search{
    width:30px;
    height:30px;
  }

  .clear-search i{
    font-size:0.8rem;
  }

  .furniture-grid{
    gap:12px;
  }

  .furniture-card{
    padding:6px;
    border-radius:20px;
  }

  .furniture-card img{
    border-radius:16px;
  }

  .furniture-card h3{
    font-size:0.9rem;
  }
  
  .nav-text{
    font-size:0.62rem;
  }
}