*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial,sans-serif;
}

html,
body{
  width:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* =========================================
   THEME VARIABLES
========================================= */

:root{

  /* DARK MODE DEFAULT */

  --bg:#050505;

  --text:#ffffff;

  --secondary:rgba(255,255,255,0.78);

  --glass:rgba(255,255,255,0.05);

  --glass-border:rgba(255,255,255,0.08);

  --header-bg:rgba(0,0,0,0.45);

  --panel-overlay:
  linear-gradient(
    to top,
    rgba(0,0,0,0.94),
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.05)
  );

  --button-bg:#ffffff;

  --button-text:#000000;

  --card-shadow:
  0 10px 35px rgba(0,0,0,0.35);
}

/* =========================================
   LIGHT MODE
========================================= */

body.light-mode{

  --bg:#f4f4f4;

  --text:#111111;

  --secondary:rgba(0,0,0,0.65);

  --glass:rgba(255,255,255,0.6);

  --glass-border:rgba(0,0,0,0.08);

  --header-bg:rgba(255,255,255,0.6);

  --panel-overlay:
  linear-gradient(
    to top,
    rgba(255,255,255,0.92),
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.05)
  );

  --button-bg:#111111;

  --button-text:#ffffff;

  --card-shadow:
  0 10px 35px rgba(0,0,0,0.08);
}

/* =========================================
   BODY
========================================= */

body{

  background:var(--bg);

  overflow:hidden;

  color:var(--text);

  transition:
  background 0.4s ease,
  color 0.4s ease;
}

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

.top-header{

  width:100%;

  position:fixed;

  top:0;

  left:0;

  z-index:999 !important;

 


  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:25px 5%;

  background:var(--header-bg);

  backdrop-filter:blur(20px);

  border-bottom:
  1px solid var(--glass-border);
}

.logo{

  font-size:32px;

  font-weight:bold;

  letter-spacing:2px;

  color:var(--text);
}

/* LINKS */

.top-links{

  display:flex;

  gap:30px;

  list-style:none;
}

.top-links a{

  text-decoration:none;

  color:var(--text);

  opacity:0.8;

  transition:0.3s;

  font-size:15px;

  letter-spacing:1px;
}

.top-links a:hover{

  opacity:1;
}

/* RIGHT */

.header-right{

  display:flex;

  align-items:center;

  gap:20px;
}

/* =========================================
   THEME TOGGLE BUTTON
========================================= */

.theme-toggle{

  width:52px;

  height:52px;

  border:none;

  border-radius:50%;

  cursor:pointer;

  font-size:20px;

  color:var(--text);

  background:var(--glass);

  backdrop-filter:blur(18px);

  border:
  1px solid var(--glass-border);

  transition:0.3s ease;
}

.theme-toggle:hover{

  transform:scale(1.08);
}

/* ACCOUNT */

.account-btn{

  text-decoration:none;

  color:var(--text);

  padding:12px 22px;

  border-radius:16px;

  border:
  1px solid var(--glass-border);

  background:var(--glass);

  backdrop-filter:blur(20px);

  transition:0.3s;
}

.account-btn:hover{

  transform:translateY(-3px);
}

/* CART */

.cart-icon{

  position:relative;

  font-size:24px;

  cursor:pointer;
}

.cart-count{

  position:absolute;

  top:-10px;

  right:-10px;

  width:22px;

  height:22px;

  border-radius:50%;

  background:var(--button-bg);

  color:var(--button-text);

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:12px;
}

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

.hero{

  width:100%;

  height:100vh;

  display:flex;

  background:var(--bg);
}

/* =========================================
   RIGHT SIDE
========================================= */

.hero-right{

  width:100%;

  display:flex;

  height:100vh;

  overflow-x:auto;

  overflow-y:hidden;

  gap:18px;

  padding:120px 30px 40px;

  scroll-behavior:smooth;

  scrollbar-width:none;
}

.hero-right::-webkit-scrollbar{

  display:none;
}

/* =========================================
   PANEL
========================================= */

.panel{

  position:relative;

  min-width:280px;

  height:88vh;

  overflow:hidden;

  transition:0.5s ease;

  border-radius:32px;

  flex:1;

  backdrop-filter:blur(18px);

  border:
  1px solid var(--glass-border);

  background:var(--glass);

  box-shadow:var(--card-shadow);

  clip-path:
  polygon(
    10% 0,
    100% 0,
    90% 100%,
    0 100%
  );
}

/* IMAGE */

.panel img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:0.8s ease;

  filter:brightness(0.88);
}

/* OVERLAY */

.panel-overlay{

  position:absolute;

  inset:0;

  background:var(--panel-overlay);

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  padding:45px 28px;

  z-index:5;
}

/* TITLE */

.panel-overlay h2{

  font-size:34px;

  font-weight:800;

  line-height:1.1;

  margin-bottom:14px;

  color:var(--text);

  letter-spacing:1px;

  text-transform:uppercase;

  text-shadow:
  0 4px 15px rgba(0,0,0,0.35);
}

/* DESCRIPTION */

.panel-overlay p{

  color:var(--secondary);

  line-height:1.7;

  font-size:15px;

  margin-bottom:22px;

  max-width:220px;
}

/* HOVER */

.panel:hover{

  flex:1.25;
}

.panel:hover img{

  transform:scale(1.1);
}

/* GLASS EFFECT */

.panel::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  rgba(0,0,0,0.02);

  z-index:1;
}

.panel-overlay{

  z-index:2;
}

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

.panel{

  animation:fadeIn 1.2s ease forwards;
}

.panel-1{ animation-delay:0.1s; }

.panel-2{ animation-delay:0.3s; }

.panel-3{ animation-delay:0.5s; }

.panel-4{ animation-delay:0.7s; }

.panel-5{ animation-delay:0.9s; }

.panel-6{ animation-delay:1.1s; }

.panel-7{ animation-delay:1.3s; }

.panel-8{ animation-delay:1.5s; }

@keyframes fadeIn{

  from{

    opacity:0;

    transform:translateY(50px);
  }

  to{

    opacity:1;

    transform:translateY(0);
  }
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1000px){

  body{

    overflow:auto;
  }

  .hero{

    flex-direction:column;
  }

  .hero-right{

    width:100%;

    height:auto;

    padding-top:160px;
  }

  .panel{

    min-width:320px;

    height:500px;
  }
}

@media(max-width:768px){

  .top-header{

    flex-direction:column;

    gap:20px;
  }

  .top-links{

    flex-wrap:wrap;

    justify-content:center;
  }

  .panel{

    min-width:85vw;

    height:420px;
  }

  .panel-overlay h2{

    font-size:28px;
  }
}