/* ===== RESET ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial,sans-serif; background:#fff; color:#000; overflow-x:hidden; }

/* ===== HEADER ===== */
.main-header {
  position: fixed; top:0; left:0; width:100%; height:70px;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 20px; z-index:1000; background:transparent;
}
.header-left,.header-center,.header-right{ flex:1; display:flex; align-items:center; justify-content:center; }
.header-left{ justify-content:flex-start; }
.header-right{ justify-content:flex-end; }
.logo{ max-height:55px; }
.icon{ max-height:45px; cursor:pointer; }

.dropdown-menu{
  display:none; position:fixed; top:70px; left:0; width:100%;
  background:rgba(0,0,0,0.95); z-index:999; padding:20px 0;
}
.dropdown-menu ul{
  display:flex; justify-content:center; gap:60px; list-style:none;
}
.dropdown-menu li a{
  color:#fff; text-decoration:none; font-size:1.3rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; transition:color 0.3s, transform 0.2s;
}
.dropdown-menu li a:hover{ color:#00bfff; transform:scale(1.05); }
.main-header.active{ background:rgba(0,0,0,0.95); transition:0.3s; }
.dropdown-menu.open{ display:block; animation:slideDown 0.25s ease forwards; }
@keyframes slideDown { from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);} }

/* ===== PRODUCT PAGE ===== */
.product-page{
  display:flex; height:100vh; max-width:1400px; margin:0 auto; padding:80px 40px;
  gap:40px; align-items:center; justify-content:center;
}

/* Left thumbnails */
.product-thumbnails{ display:flex; flex-direction:column; gap:20px; flex:0 0 100px; }
.product-thumbnails .thumb{
  width:100px; height:80px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; transition:border 0.3s, transform 0.2s;
}
.product-thumbnails .thumb:hover,
.product-thumbnails .thumb.active{ border:2px solid #00bfff; transform:scale(1.05); }

/* Center main image */
.product-main{ flex:1 1 600px; display:flex; justify-content:center; align-items:center; }
.product-main img{ max-width:100%; max-height:80vh; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.1); object-fit:contain; }

/* Right info */
.product-info{ flex:0 0 350px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.product-info h1{ font-size:2.5rem; color:#111; }
.product-info .tagline{ font-size:1.2rem; color:#555; text-transform:uppercase; letter-spacing:1px; }
.product-info .description{ font-size:1rem; line-height:1.6; color:#333; }
.product-info .price{ font-size:1.8rem; font-weight:bold; color:#003049; }
.product-info .shop-btn{
  padding:14px 36px; font-size:1rem; font-weight:600; background:#000; color:#fff;
  border:none; border-radius:50px; cursor:pointer; text-transform:uppercase; transition:0.3s;
}
.product-info .shop-btn:hover{ background:#222; transform:translateY(-3px); }

/* ===== FOOTER ===== */
.site-footer{ background:#111; color:#fff; padding:60px 5% 30px; font-family:Arial,sans-serif; }
.footer-container{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; max-width:1200px; margin:0 auto; }
.footer-brand img{ width:140px; margin-bottom:15px; }
.footer-brand p{ font-size:0.95rem; color:#bbb; line-height:1.6; max-width:250px; }
.footer-links h4{ font-size:1.1rem; margin-bottom:14px; font-weight:600; }
.footer-links ul{ list-style:none; padding:0; }
.footer-links ul li{ margin-bottom:8px; }
.footer-links ul li a{ color:#bbb; font-size:0.95rem; text-decoration:none; transition:color 0.3s; }
.footer-links ul li a:hover{ color:#fff; }
.footer-social h4{ font-size:1.1rem; margin-bottom:14px; font-weight:600; }
.social-icons a{ margin-right:12px; }
.social-icons img{ width:26px; height:26px; filter:invert(1); transition:opacity 0.3s; }
.social-icons img:hover{ opacity:0.7; }
.footer-bottom{ text-align:center; border-top:1px solid #333; margin-top:40px; padding-top:20px; }
.footer-bottom p{ font-size:0.85rem; color:#777; }

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
  .product-page{ flex-direction:column; height:auto; padding:80px 20px; gap:30px; }
  .product-thumbnails{ flex-direction:row; gap:15px; margin-bottom:20px; }
  .product-thumbnails .thumb{ width:60px; height:50px; }
  .product-main{ max-width:90%; }
  .product-info{ flex:1 1 100%; text-align:center; }
}
html, body {
  overflow-x: hidden;
}


/* ===================== MOBILE DROPDOWN FULLSCREEN ===================== */
@media (max-width: 900px) {
  .dropdown-menu {
    position: fixed;
    top: 70px; /* below header */
    left: 0;
    width: 100%;
    height: calc(100vh - 70px); /* full screen minus header */
    background: rgba(0, 0, 0, 0.95); /* overlay */
    display: none; /* hidden by default */
    flex-direction: column; /* stack links vertically */
    justify-content: center; /* vertically center the whole menu */
    align-items: center; /* horizontally center links */
    padding: 0; /* remove extra spacing */
    overflow-y: auto;
    text-align: center; /* ensure text in links is centered */
  }

  .dropdown-menu ul {
    display: flex;
    flex-direction: column; /* vertical stack */
    gap: 30px; /* space between links */
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .dropdown-menu li {
    width: 100%;
    display: flex;
    justify-content: center; /* center each link horizontally */
  }

  .dropdown-menu li a {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center; /* center text inside the link */
  }
}
@media(max-width: 900px){
  .product-page {
    flex-direction: column;  /* stack items vertically */
    height: auto;
    padding: 80px 20px;
    gap: 20px;
    align-items: center;     /* center everything horizontally */
  }

  /* Main image first */
  .product-main {
    order: 1;
    max-width: 90%;
    margin: 0 auto;
  }

  /* Thumbnails below main image */
  .product-thumbnails {
    order: 2;                 /* comes after main image */
    flex-direction: row;      /* thumbnails in a row */
    justify-content: center;  /* center thumbnails */
    margin: 10px 0 0 0;       /* spacing only above thumbnails */
    gap: 10px;
  }

  .product-thumbnails .thumb {
    width: 60px;
    height: 50px;
  }

  /* Product info below thumbnails */
  .product-info {
    order: 3;
    flex: 1 1 100%;
    text-align: center;
    margin-top: 10px;         /* optional small spacing above info */
  }
}

/* ================ MOBILE FOOTER 2x2 ALIGNED ================ */
@media (max-width: 900px) {
  .site-footer {
    padding: 25px 15px 20px;
  }

  .footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    grid-template-rows: auto auto; /* 2 rows */
    gap: 15px 20px; /* vertical / horizontal spacing */
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
    align-items: start; /* align items at top of each cell */
  }

  /* Top-left: Logo / About */
  .footer-brand {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .footer-brand img {
    width: 100px; /* smaller logo */
    margin-bottom: 8px;
  }

  .footer-brand p {
    font-size: 0.9rem;
    max-width: 100%;
    margin: 0;
  }

  /* Top-right: Shop Links */
  .footer-links:nth-of-type(1) {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Bottom-left: Company Links */
  .footer-links:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Bottom-right: Socials */
  .footer-social {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Headings smaller */
  .footer-links h4,
  .footer-social h4 {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }

  .footer-links ul li a {
    font-size: 0.9rem;
  }

  .social-icons {
    justify-content: center;
  }

  .social-icons img {
    width: 22px;
    height: 22px;
    margin-right: 10px;
  }

  /* Footer bottom bar */
  .footer-bottom {
    grid-column: 1 / 3; /* span both columns */
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
  }

  .footer-bottom p {
    font-size: 0.8rem;
    color: #777;
  }
}
.footer-container {
  justify-items: center; /* center content horizontally in each cell */
}

.footer-links,
.footer-social,
.footer-brand {
  width: 100%; /* make sure each grid cell fills the width */
}

.footer-links ul {
  padding-left: 0; /* remove any extra padding that can misalign */
}