@font-face{
  font-family:'Normandia';
  src:url('fonts/Normandia.ttf') format('truetype');
}

@font-face{
  font-family:'abduction2002';
  src:url('fonts/abduction2002.ttf') format('truetype');
}

@font-face{
  font-family:'Intaglio';
  src:url('fonts/Intaglio.ttf') format('truetype');
}

@font-face{
  font-family:'Pervitina-Dex';
  src:url('fonts/Pervitina-Dex.ttf') format('truetype');
}

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

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

html{
  overflow-y:scroll;
}

body{
  font-family:Arial,sans-serif;
  background:#050505;
  color:white;

  background-image:url("images/background2.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* HEADER */

header{
  width:100%;
  padding:30px 2%;
  position:relative;
  z-index:1000;
}
/* =========================
   CORNER TEXT
   ========================= */

.corner-text {

  position:absolute;

  top:65px;
  left:15px;

  font-family:'abduction2002';

  font-size:24px;

  letter-spacing:2px;

  color:#cfcfcf;

  text-shadow:

    /* gold outer edge */
    -1px -1px 0 #8a6a1f,
     1px -1px 0 #8a6a1f,
    -1px  1px 0 #8a6a1f,
     1px  1px 0 #8a6a1f,

    /* metallic depth */
     0 2px 2px rgba(0,0,0,0.6),

    /* subtle silver shine */
     0 0 3px rgba(255,255,255,0.25);

  z-index:1000;
}
/* NAVIGATION */

nav{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:30px;

  flex-wrap:nowrap;
  white-space:nowrap;
}

nav a{
  color:white;
  text-decoration:none;
  transition:0.3s;
}

nav a:hover{
  color:#ffb300;
}

/* SEARCH */

.search-bar{
  margin-right:10px;
  flex-shrink:0;
}

.search-bar input{
  padding:6px 10px;

  border:1px solid #d4af37;
  border-radius:4px;

  background:transparent;
  color:#d4af37;

  outline:none;
}

.search-bar input::placeholder{
  color:#d4af37aa;
}

/* LANGUAGE */

.language-switch{
  display:flex;
  align-items:center;
  margin-left:20px;
  flex-shrink:0;
}

.lang-dropdown{
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}

.lang-btn{
  background:transparent;

  border:1px solid #d4af37;
  border-radius:8px;

  color:#d4af37;

  padding:6px 12px;

  font-weight:bold;

  cursor:pointer;

  transition:0.3s;
}

.lang-btn:hover{
  background:rgba(212,175,55,0.12);
  color:white;
  box-shadow:0 0 12px rgba(212,175,55,0.2);
}

.lang-menu{
  display:none;

  position:absolute;

  top:100%;
  right:0;

  min-width:180px;

  background:#111;

  border:1px solid rgba(255,170,0,0.25);
  border-radius:12px;

  overflow:hidden;

  z-index:9999;

  box-shadow:0 0 25px rgba(255,179,0,0.15);
}

.lang-menu a{
  display:flex;
  align-items:center;
  gap:8px;

  padding:10px 12px;

  color:white;
  text-decoration:none;

  font-size:14px;

  transition:0.3s;
}

.lang-menu a:hover{
  background:rgba(255,179,0,0.12);
  color:#ffb300;
  padding-left:16px;
}

.lang-dropdown:hover .lang-menu{
  display:block;
}

/* PRODUCTS DROPDOWN */

.products-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}

.products-dropdown-content{

  display:none;

  position:absolute;

  top:100%;
  left:50%;

  transform:translateX(-50%);

  width:fit-content;
  max-width:90vw;

  background:#111;

  border:1px solid rgba(255,170,0,0.25);
  border-radius:16px;

  padding:20px;

  z-index:1000;

  box-shadow:0 0 25px rgba(255,170,0,0.15);

  flex-direction:row;
  gap:40px;
}

.products-dropdown:hover .products-dropdown-content{
  display:flex;
}

/* DROPDOWN COLUMNS */

.dropdown-column{
  display:flex;
  flex-direction:column;
  min-width:180px;
}

.dropdown-column h4{
  color:#d4af37;
  margin-bottom:10px;
  font-size:14px;
  letter-spacing:1px;
}

.dropdown-column a{
  color:white;
  text-decoration:none;
  padding:6px 0;
  font-size:14px;
  transition:0.2s;
}

.dropdown-column a:hover{
  color:#ffb300;
  padding-left:6px;
}

/* HERO */

.hero{
  min-height:80vh;

  display:grid;
  grid-template-columns:1fr 1fr;

  align-items:center;

  padding:0 8%;

  margin-top:-40px;
}

.hero h2{
  font-family:'Normandia',serif;

  font-size:60px;
  line-height:0.9;

  letter-spacing:4px;

  background:linear-gradient(
    180deg,
    #fff6cc 0%,
    #f0d878 20%,
    #d4af37 40%,
    #b8891e 60%,
    #f7e08a 80%,
    #c9a45c 100%
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.center-logo{
  width:400px;
  height:auto;
  object-fit:contain;
}
.hero-logo-area{
  justify-self: end;
  transform: translateX(-160px);
}

/* =========================
   BUTTONS (GLOBAL STYLE)
   ========================= */

.gold-button {
  background: #d4af37;
  color: black;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s ease;
}

.gold-button:hover {
  background: black;
  color: #d4af37;
  border: 1px solid #d4af37;
}
/* PRODUCTS SECTION */

.products-section{
  padding:50px 8%;
}

.products-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:20px;
}

#sortSelect{
  margin-right:40px;
}
/* FEATURED PRODUCTS TITLE */

.section-title{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:25px;

  margin-bottom:30px;
}

.section-title h3{

  font-family:'Intaglio', serif;

  font-size:48px;

  letter-spacing:4px;

  color:#c8a96b;

  font-weight:normal;

  text-transform:uppercase;

  text-align:center;
}

.section-title .line{

  width:120px;

  height:1px;

  background:rgba(255,179,0,0.4);
}
/* FEATURED PRODUCTS GRID */

.featured-grid{

  width:90%;
  margin:auto;

  display:grid;

  grid-template-columns:
  repeat(auto-fit, minmax(240px, 1fr));

  gap:40px;

  margin-top:50px;
}
/* HOMEPAGE PRODUCT CARD */

.product-card{
  border:1px solid rgba(255,170,0,0.2);

  padding:30px;

  border-radius:20px;

  background:#111;

  transition:0.3s;
}

.product-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,179,0,0.5);
}

.product-image{
  height:200px;

  background:#1a1a1a;

  border-radius:15px;

  margin-bottom:20px;
}
.featured-click{
  cursor:pointer;
}
/* LIGHTBOX */

.lightbox{
  display:none;

  position:fixed;
  z-index:9999;

  left:0;
  top:0;

  width:100%;
  height:100%;

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

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

.lightbox img{
  max-width:90%;
  max-height:85%;

  border:3px solid #c8a96b;
  box-shadow:0 0 25px rgba(0,0,0,0.8);

  border-radius:8px;
}

.lightbox-close{
  position:absolute;

  top:20px;
  right:35px;

  color:#fff;
  font-size:45px;

  cursor:pointer;
}

.lightbox-arrow{
  position:absolute;

  top:50%;
  transform:translateY(-50%);

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

  color:white;

  border:none;

  font-size:50px;

  width:60px;
  height:80px;

  cursor:pointer;

  transition:0.2s;
}

.lightbox-arrow:hover{
  background:rgba(255,255,255,0.2);
}

.lightbox-arrow.left{
  left:20px;
}

.lightbox-arrow.right{
  right:20px;
}

/* PRODUCTS PAGE */

.products-page{
  padding:100px 8%;
}

/* GRID */

.products-page-grid{

  display:grid;

  grid-template-columns:
    repeat(3, minmax(280px, 1fr));

  gap:30px;

  margin-top:60px;

  align-items:start;
}

/* STORE PRODUCT CARD */

.store-product-card{

  background:#111;

  border:1px solid rgba(255,170,0,0.2);

  border-radius:20px;

  padding:20px;

  transition:0.3s;

  width:100%;
  max-width:280px;

  margin:0 auto;
}

.store-product-card:hover{
  transform:translateY(-5px);

  border-color:rgba(255,179,0,0.5);

  box-shadow:0 0 20px rgba(255,179,0,0.12);
}

/* IMAGE GALLERY */

.gallery-wrapper{
  position:relative;
}

.gallery-image{

  width:100%;
  height:220px;
  cursor:pointer;
  object-fit:cover;

  border-radius:15px;

  transition:opacity 0.15s ease;
}

/* GALLERY BUTTONS */

.gallery-controls{
  position:absolute;

  top:50%;
  left:0;

  width:100%;

  display:flex;
  justify-content:space-between;

  transform:translateY(-50%);

  padding:0 10px;
}

.gallery-controls button{

  width:36px;
  height:36px;

  border:none;
  border-radius:50%;

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

  color:#ffb300;

  cursor:pointer;

  transition:0.3s;
}

.gallery-controls button:hover{
  background:#ffb300;
  color:black;
}

/* PRODUCT TEXT */

.store-product-card h4{
  font-size:24px;
  color:#ffb300;
  margin-top:15px;
}

.product-description{
  color:#bbb;
  line-height:1.6;
  margin-top:10px;
}

/* PRODUCT INFO */

.product-info{
  display:flex;
  justify-content:space-between;
 align-items:center;
  color:#999;

  font-size:18px;

  margin-top:10px;
}

/* PRODUCT BUTTONS */

.product-buttons{
  display:flex;
  gap:15px;
  margin-top:15px;
}
.perms-text{
  font-size:14px;
}
.li-text{
  font-size:14px;
}

.price-text{
  font-size:14px;
}
.small-btn{
  flex:1;

  text-align:center;
  text-decoration:none;

  background: #d4af37;

  color: black !important;

  padding: 12px;

  border: none;
  border-radius: 8px;

  font-weight: bold;

  cursor: pointer;

  transition: 0.2s ease;

  display:flex;
  justify-content:center;
  align-items:center;
}
.small-btn:hover{
  background:black;
  color:#d4af37 !important;
  border:1px solid #d4af37;
}
/* SUPPORT */

.support-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 40px 20px;
}

.support-box {
  width: 100%;
  max-width: 600px;
  background: #000;
  border: 2px solid #d4af37;
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.2);
}

.support-box h1 {
  text-align: center;
  color: #d4af37;
  margin-bottom: 30px;
  letter-spacing: 3px;
}

.support-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.support-form input,
.support-form textarea {
  background: #0a0a0a;
  border: 1px solid #d4af37;
  color: white;
  padding: 12px;
  border-radius: 8px;
  outline: none;
  font-size: 14px;
}

.support-form textarea {
  min-height: 150px;
  resize: vertical;
}

.support-form button {
  background: #d4af37;
  color: black;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s ease;
}

.support-form button:hover {
  background: #b8962f;
}
.support-form input:focus,
.support-form textarea:focus {
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.7); /* dark overlay */
  z-index: 9999;
}

.popup-box {
  background: #000;
  border: 2px solid #d4af37;
  padding: 30px;
  text-align: center;
  color: #d4af37;
  border-radius: 10px;
}

/* IMPORTANT: hide class */
.hidden {
  display: none;
}
/* ABOUT */

.about-section{
  display:flex;
  justify-content:center;
  align-items:center;

  padding:100px 10%;
}

.about-box{
  background:#111;

  border:1px solid #222;
  border-radius:8px;

  padding:40px;
}

/* FOOTER */

footer{
  padding:40px;

  text-align:center;

  border-top:1px solid rgba(255,170,0,0.2);

  color:#777;
}

/* FLAGS */

.flag{
  width:18px;
  height:12px;

  margin-right:8px;

  vertical-align:middle;

  border-radius:2px;
}

/* CATEGORY TITLE */

#categoryTitle{

  width:100%;

  margin:30px 0;

  text-align:center;

font-family:'Normandia', serif;
text-transform:uppercase;
  font-size:60px;
  letter-spacing:1px;

  background:linear-gradient(
    180deg,
    #fff8d6 0%,
    #f7dc6f 20%,
    #d4af37 45%,
    #8f6b14 70%,
    #fff3b0 100%
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
    0 0 3px rgba(255,215,120,0.4),
    0 0 8px rgba(212,175,55,0.25);

  display:block;
}

/* MOBILE */

@media(max-width:1000px){

  .hero{
    grid-template-columns:1fr;
    gap:50px;
    padding-top:50px;
  }

  .hero h2{
    font-size:60px;
  }

  nav{
    justify-content:center;
  }

  .products-track .product-card{
    min-width:100%;
  }

  .products-page-grid{
    grid-template-columns:1fr;
  }

  .nav-links{
    flex-wrap:wrap;
    justify-content:center;
  }
}
/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 768px) {

  /* HEADER */

  header{
    padding:20px 15px;
  }

  .corner-text{
    position:static;
    text-align:center;
    margin-bottom:20px;

    font-size:24px;
  }

  /* NAV */

  nav{
    justify-content:center;
  }

  .nav-links{

    width:100%;

    flex-direction:column;

    align-items:center;

    gap:15px;

    white-space:normal;
  }

  /* SEARCH */

  .search-bar{
    width:100%;
    margin-right:0;
  }

  .search-bar input{
    width:100%;
  }

  /* DROPDOWNS */

  .products-dropdown-content{

    position:static;

    transform:none;

    flex-direction:column;

    width:100%;

    max-width:100%;

    margin-top:10px;
  }

  .dropdown-column{
    min-width:100%;
  }

  /* HERO */

  .hero{

    grid-template-columns:1fr;

    text-align:center;

    padding:40px 20px;

    margin-top:0;
  }

  .hero h2{
    font-size:42px;
  }

  .hero-logo-area{

    justify-self:center;

    transform:none;
  }

  .center-logo{
    width:260px;
  }

  /* TOPBAR */

  .products-topbar{

    flex-direction:column;

    align-items:stretch;

    gap:15px;

    padding:0 20px;
  }

  #sortSelect{
    margin-right:0;
  }

  /* CATEGORY TITLE */

  #categoryTitle{
    font-size:42px;
    padding:0 15px;
  }

  /* PRODUCTS GRID */

  .products-page-grid{
    grid-template-columns:1fr;
    gap:25px;
  }

  .store-product-card{
    max-width:100%;
  }

  /* FEATURED GRID */

  .featured-grid{
    width:100%;
    grid-template-columns:1fr;
  }

  /* BUTTONS */

  .product-buttons{
    flex-direction:column;
  }

  .small-btn{
    width:100%;
  }

  /* SUPPORT */

  .support-box{
    padding:25px;
  }
}