/* ================= ROOT COLORS ================= */

:root{
  --bg:#000000;
  --card:#181818;
  --text:#ffffff;
  --muted:#9a9a9a;
}

/* LIGHT MODE */

body.light{
  --bg:#ffffff;
  --card:#f7f7f7;
  --text:#111111;
  --muted:#666666;
}


/* ================= GLOBAL TEXT SIZE ================= */

html{
  font-size:18px;
}

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

body{
  margin:0;
  font-family: 'Patrick Hand', cursive;
  font-weight:300;
  letter-spacing:0.3px;
  background:var(--bg);
  color:var(--text);
}

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

header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:20px 30px;
  background:#000;
  position:sticky;
  top:0;
  z-index:1000;
}

header,
header a{
  color:#ffffff !important;
}

/* ================= NAVBAR ================= */

.navbar{
  width:100%;
  max-width:1200px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  row-gap:10px;
}

/* ================= LOGO ================= */

.logo{
  flex:1 1 100%;
  display:flex;
  justify-content:center;
}

.logo img{
  width:min(70vw, 600px);
  filter:grayscale(100%) contrast(200%);
}

/* ================= MENU ================= */

nav{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}

nav a{
  text-decoration:none;
  color:#ffffff;
  font-weight:400;
  font-size:16px;
  letter-spacing:2px;
  padding:6px;
}

nav a.active{
  font-weight:600;
  font-style:italic;
}

/* ================= TOGGLE ================= */

.theme-switch{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
}

.switch-track{
  width:44px;
  height:22px;
  background:#888;
  border-radius:20px;
  position:relative;
}

.switch-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  background:#000;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  overflow:hidden;
  transition:left 0.25s ease;
}

/* PERFECT MOVEMENT */
body.light .switch-thumb{
  left:calc(100% - 20px);
}

/* ================= BUTTON ================= */

button{
  background-color:#777;
  color:#fff;
  border:none;
  padding:4px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  transition:0.3s ease;
}

button:hover{
  background-color:#555;
  transform:scale(1.05);
}

/* ================= CONTENT ================= */

.container{
  padding:40px;
  display:grid;
  gap:20px;
  text-align:justify;
}

.normal-image,
.fade-image{
  width:100%;
  display:block;
}

/* IMAGE MASK */
.fade-image{
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,0.2) 10%,
      rgba(0,0,0,0.6) 20%,
      black 35%,
      black 65%,
      rgba(0,0,0,0.6) 80%,
      rgba(0,0,0,0.2) 90%,
      transparent 100%
    ),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.2) 10%,
      rgba(0,0,0,0.6) 20%,
      black 35%,
      black 65%,
      rgba(0,0,0,0.6) 80%,
      rgba(0,0,0,0.2) 90%,
      transparent 100%
    );

  -webkit-mask-composite: destination-in;
  mask-composite: intersect;

  mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,0.2) 10%,
      rgba(0,0,0,0.6) 20%,
      black 35%,
      black 65%,
      rgba(0,0,0,0.6) 80%,
      rgba(0,0,0,0.2) 90%,
      transparent 100%
    ),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.2) 10%,
      rgba(0,0,0,0.6) 20%,
      black 35%,
      black 65%,
      rgba(0,0,0,0.6) 80%,
      rgba(0,0,0,0.2) 90%,
      transparent 100%
    );
}

/* ================= LAYOUT ================= */

@media (min-width:900px){
  .container{
    grid-template-columns:1fr 1.8fr 1.2fr;
  }
}

@media (max-width:899px){
  .container{
    grid-template-columns:1fr;
    padding:15px;
  }
}

/* ================= SECTIONS ================= */

.left-section,
.middle-section,
.right-section{
  padding:20px;
  background:var(--card);
  border-radius:10px;
}

.left-section{ min-height:400px; }
.middle-section{ min-height:500px; }
.right-section{ min-height:420px; }

/* ================= LINKS ================= */

.container a,
.container a:visited{
  color:var(--text);
  text-decoration:none;
}

.container a:hover{
  color:var(--text);
  font-weight:700;
}

/* ================ CONTECT BOX ==========================*/

#contact-form {
  max-width: 500px; /* optional: controls overall form width */
}

#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box; /* ensures padding doesn't break width */
}

#contact-form button {
  padding: 10px 20px;
}

/* ================= TABLET ================= */

@media (max-width:900px){
  html{ font-size:20px; }
  .logo img{ width:450px; }
  nav{ gap:25px; }
}

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

@media (max-width:600px){
  html{ font-size:16px; }

  body{ line-height:1.6; }

  .logo img{ width:80vw; }

  .navbar{
    flex-direction:column;
    align-items:center;
  }

  nav{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 14px;
    padding:8px 0;
  }

  nav a{
    flex:0 1 auto;
    font-size:14px;
  }

  h1{ font-size:1.6rem; }
  h2{ font-size:1.4rem; }
  h3{ font-size:1.2rem; }
  p{ font-size:1rem; }

  .theme-switch{
    position:static;
    transform:none;
    margin-top:10px;
    align-self:flex-end;
  }
}

/* ================= DESKTOP FIX ================= */

@media (min-width:1000px){
  header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
  }

  body{
    padding-top:120px;
  }

  .logo{
    flex:0 0 auto;
    justify-content:flex-start;
  }

  .logo img{
    width:min(28vw, 420px);
  }

  nav{
    flex-wrap:nowrap;
    white-space:nowrap;
    justify-content:flex-start;
    margin-left:60px;
  }

  .theme-switch{
    position:static;
    margin-left:40px;
  }
}

/* ================= PRODUCT PAGE ================= */

.product-container{
  width:88%;
  max-width:1500px;
  margin:auto;
  padding:100px 20px;

  display:flex;
  flex-direction:column;

  /* curated luxury spacing */
  gap:36px;
}

/* ================= PRODUCT WINDOW ================= */

.product-item{
  background:var(--card);
  border-radius:36px;

  /* luxurious breathing room */
  padding:48px 54px;

  display:grid;
  grid-template-columns:
    340px      /* image */
    1fr        /* description */
    180px;     /* link */

  align-items:center;
  gap:58px;

  box-sizing:border-box;

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

  /* softer premium depth */
  box-shadow:
    0 2px 8px rgba(0,0,0,0.025),
    0 14px 36px rgba(0,0,0,0.04);
}

/* Elegant luxury hover */
.product-item:hover{
  transform:translateY(-2px);

  box-shadow:
    0 10px 24px rgba(0,0,0,0.04),
    0 22px 46px rgba(0,0,0,0.06);
}

/* ================= IMAGE SECTION ================= */

.product-image{
  display:flex;
  justify-content:center;
  align-items:center;

  /* more luxury breathing room */
  padding:28px;
}

.product-image img{
  width:100%;
  max-width:250px;
  max-height:220px;

  object-fit:contain;
  display:block;

  transition:transform 0.35s ease;
}

.product-item:hover img{
  transform:scale(1.02);
}

/* ================= DESCRIPTION ================= */

.product-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.product-content h3{
  margin:0 0 16px;

  font-family:
    "Inter",
    "SF Pro Display",
    "Helvetica Neue",
    sans-serif;

  font-size:1.4rem;
  font-weight:600;
  letter-spacing:-0.3px;
  line-height:1.3;

  color:var(--text);
}

.product-content p{
  margin:0;

  font-family:
    "Inter",
    "Helvetica Neue",
    sans-serif;

  font-size:1rem;
  line-height:1.9;

  color:#666;
}

/* ================= LINK SECTION ================= */

.product-link{
  display:flex;
  justify-content:flex-end;
  align-items:center;

  /* elegant separator */
  border-left:1px solid rgba(0,0,0,0.08);
  padding-left:34px;
}

.product-link a{
  text-decoration:none;

  font-family:
    "Inter",
    "SF Pro Display",
    "Helvetica Neue",
    sans-serif;

  font-size:1rem;
  font-weight:600;
  letter-spacing:0.25px;

  color:var(--text);

  position:relative;
  transition:0.3s ease;
}

/* elegant underline animation */
.product-link a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;

  width:0;
  height:1.5px;

  background:var(--text);
  transition:0.35s ease;
}

.product-link a:hover::after{
  width:100%;
}

/* ================= TABLET ================= */

@media (max-width:1000px){
  .product-item{
    grid-template-columns:240px 1fr;
    gap:40px;

    padding:40px;
  }

  .product-link{
    grid-column:1 / -1;

    justify-content:flex-start;

    border-left:none;
    border-top:1px solid rgba(0,0,0,0.08);

    padding-left:0;
    padding-top:22px;
    margin-top:6px;
  }

  .product-image img{
    max-width:200px;
  }
}

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

@media (max-width:700px){
  .product-container{
    width:94%;
    padding:50px 10px;
    gap:24px;
  }

  .product-item{
    grid-template-columns:1fr;
    text-align:center;

    padding:34px 26px;
    gap:28px;

    border-radius:30px;
  }

  .product-image{
    padding:14px;
  }

  .product-image img{
    max-width:180px;
    max-height:170px;
  }

  .product-content h3{
    font-size:1.2rem;
  }

  .product-content p{
    line-height:1.75;
  }

  .product-link{
    justify-content:center;

    border-left:none;
    border-top:1px solid rgba(0,0,0,0.08);

    padding-top:20px;
  }
}