/* =========================
   Global
========================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/* =========================
   Navbar
========================= */
#navbar {
  background: rgba(0,0,0,.7);
  padding: 10px 0;
  text-align: center;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
#navbar ul { list-style: none; margin: 0; padding: 0; }
#navbar ul li { display: inline; margin: 0 15px; }
#navbar ul li a{
  position: relative;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  padding-bottom: 5px;
  transition: color .3s ease, text-shadow .3s ease;
}
#navbar ul li a::before{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:2px;
  background:#fff;
  opacity:0; transform:scaleX(0);
  transition: transform .3s ease, opacity .3s ease;
}
#navbar ul li a:hover::before{ opacity:1; transform:scaleX(1); }
#navbar ul li a:hover{
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,.7),0 0 20px rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.5);
}

#returnPolicyLink{ color:#fff; text-decoration:underline; }
#returnPolicyLink:hover{ color:#FFD700; }

/* =========================
   Hero
========================= */
.hero{
  height:100vh;
  background:#e0e0e0;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding-top:0;
  overflow:hidden;
  position:relative; /* needed for scroll-cue */
}

.logo-container{
  position:relative;
  width:1000px; max-width:100%;
  height:500px; max-height:100%;
}
.logo-step{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; transition:opacity 2s ease-in-out;
}

.cta-button{
  background:#000; color:#fff;
  padding:10px 20px; border:0; cursor:pointer;
  font-size:18px; margin-top:20px; border-radius:5px;
  text-decoration:none; display:inline-block;
}
.cta-button:hover{ background:#333; }

/* Scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; color:#000; opacity:.85;
  transition:opacity .2s ease, transform .2s ease;
}
.scroll-cue:hover{ opacity:1; transform:translateX(-50%) translateY(1px); }
.scroll-cue .chevron{
  width:18px; height:18px;
  border-right:3px solid currentColor;
  border-bottom:3px solid currentColor;
  transform:rotate(45deg);
  animation:bounceDown 1.5s infinite;
}
.scroll-cue .scroll-label{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
@media (prefers-color-scheme: dark){
  .scroll-cue{ color:#fff; }
}
@keyframes bounceDown{
  0%,20%,50%,80%,100%{ transform:rotate(45deg) translateY(0); }
  40%{ transform:rotate(45deg) translateY(6px); }
  60%{ transform:rotate(45deg) translateY(3px); }
}

/* =========================
   PRODUCT CAROUSEL (one line)
========================= */
.product-grid-container{
  position: relative;
  padding: 32px 56px;        /* room for arrows */
  max-width: 1200px;
  margin: 0 auto;
  overflow: visible;
}

/* Single-row, horizontally scrollable rail */
.product-grid{
  display: flex;
  flex-wrap: nowrap;         /* one line */
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 56px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;     /* Firefox */
}
.product-grid::-webkit-scrollbar{ display: none; } /* WebKit */

/* Card */
.product{
  flex: 0 0 300px;           /* fixed card width */
  position: relative;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  overflow: hidden;
  background: transparent;   /* no white border behind image */
  color: #111;
  text-align: center;
  scroll-snap-align: start;  /* snap each card */
}

/* Image fills card */
.product img{
  display: block;
  width: 100%;
  height: clamp(240px, 32vh, 360px);
  object-fit: cover;
  border-radius: inherit;
}

/* Black footer bar inside the card */
.product-footer{
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  background: #0b0b0b;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* View item + Price pills */
.view-btn, .price-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  line-height: 1;
  text-decoration: none;
  font-weight: 700;
}
.view-btn{
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: background-color .2s ease, color .2s ease; /* no movement animation */
}
/* Hover: white button with black text */
.view-btn:hover, .view-btn:focus{
  background: #fff;
  color: #000;
}
.price-tag{
  color: #fff;
  font-weight: 800;
  background: rgba(255,255,255,.08);
}

/* Optional: hide headings/desc if present in HTML for SEO only */
.product h3, .product p{ display: none; }

/* Black-glass arrows */
.pg-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color: #fff;
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  font-size: 26px;
  line-height: 1;
  user-select: none;
}
.pg-prev{ left: 6px; }
.pg-next{ right: 6px; }
.pg-arrow:hover{ background: rgba(0,0,0,.7); }
.pg-arrow:active{ transform: translateY(-50%) scale(.98); }

/* =========================
   Footer
========================= */
footer{
  padding:20px; text-align:center; background:#000; color:#fff;
}
footer .social-links a{ color:#fff; text-decoration:none; margin:0 10px; }
footer .social-links a:hover{ color:#999; }

/* =========================
   Modal (unchanged)
========================= */
.modal{
  display:none; position:fixed; z-index:2000; inset:0;
  overflow:auto; background:rgba(0,0,0,.8);
  justify-content:center; align-items:center; padding:50px;
}
.modal-content{
  background:#fff; margin:auto; padding:20px; border-radius:10px;
  width:100%; max-width:500px; text-align:center; position:relative;
}
.close{
  position:absolute; top:10px; right:15px; color:#333;
  font-size:24px; font-weight:bold; cursor:pointer;
}
.close:hover{ color:#000; }
.modal-content form{ display:flex; flex-direction:column; }
.modal-content form label{ margin-bottom:5px; text-align:left; }
.modal-content form input,
.modal-content form textarea{
  margin-bottom:15px; padding:10px; border:1px solid #ccc; border-radius:5px;
}
.modal-content form textarea{ resize:vertical; }
.modal-content form button{
  background:#000; color:#fff; padding:10px; border:0; cursor:pointer; font-size:16px; border-radius:5px;
}
.modal-content form button:hover{ background:#333; }

/* =========================
   Centered Section / Newsletter (unchanged layout)
========================= */
.centered-section{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:50px; text-align:center; background:#fff;
}
.centered-section p{ max-width:800px; line-height:1.6; }

.newsletter-section{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:50px; text-align:center; background:#f8f8f8;
}
.newsletter-section h2{ margin-bottom:20px; }
.newsletter-section form{
  display:flex; flex-direction:row; gap:10px; margin-bottom:10px; justify-content:flex-start;
}
.newsletter-section input{
  padding:10px; font-size:16px; border:1px solid #ccc; border-radius:5px 0 0 5px; outline:none;
  height: 38px; width: 250px;
}
.newsletter-section button{
  background:#000; color:#fff; padding:10px 20px; font-size:18px; border:0; border-radius:5px; cursor:pointer;
  transition: background-color .3s ease;
}
.newsletter-section button:hover{ background:#333; }
#subscriptionMessage{ color:#28a745; font-size:18px; }

/* =========================
   Spray UI (unchanged)
========================= */
.spray-can-container{ position:fixed; bottom:20px; right:20px; cursor:pointer; z-index:1000; }
#sprayCanIcon{ transition: transform .2s ease-in-out; }
#sprayCanIcon:hover{ animation: shake .5s infinite; }
@keyframes shake{
  0%{ transform: translate(1px,1px) rotate(0); }
  10%{ transform: translate(-1px,-2px) rotate(-1deg); }
  20%{ transform: translate(-3px,0) rotate(1deg); }
  30%{ transform: translate(3px,2px) rotate(0); }
  40%{ transform: translate(1px,-1px) rotate(1deg); }
  50%{ transform: translate(-1px,2px) rotate(-1deg); }
  60%{ transform: translate(-3px,1px) rotate(0); }
  70%{ transform: translate(3px,1px) rotate(-1deg); }
  80%{ transform: translate(-1px,-1px) rotate(1deg); }
  90%{ transform: translate(1px,2px) rotate(0); }
  100%{ transform: translate(1px,-2px) rotate(-1deg); }
}

.spray-options{
  position:fixed; top:100px; left:20px;
  background:rgba(0,0,0,.6); backdrop-filter: blur(10px);
  padding:15px; border-radius:10px; z-index:2000; display:none;
  flex-direction:column; gap:15px; box-shadow:0 4px 10px rgba(0,0,0,.5);
}
.spray-options div{
  padding:10px; border-radius:5px; background:rgba(255,255,255,.2); color:#fff; cursor:pointer;
  transition: background-color .3s ease, color .3s ease;
}
.spray-options div:hover{ background:rgba(255,255,255,.4); color:#f0f0f0; }
.spray-options div::before{ font-size:20px; margin-right:10px; }
.sub-menu{
  position:fixed; top:100px; left:130px; background:rgba(0,0,0,.8); color:#fff; padding:5px; border-radius:5px;
  display:none; z-index:1000; box-shadow:0 4px 10px rgba(0,0,0,.5);
}
.tool-icon{
  background:rgba(0,0,0,.6); color:#fff; padding:1px; border-radius:1px; cursor:pointer;
  margin-bottom:-5px; text-align:center; font-size:24px;
  transition: background-color .3s ease, color .3s ease;
}
.tool-icon:hover{ background:rgba(255,255,255,.2); color:#f0f0f0; }
.tool-icon.selected{ background:rgba(255,255,255,.4); border:2px solid #fff; }
#sprayCanvas{ cursor:url('sprayCursor.png'), auto; }

/* =========================
   GALLERY CAROUSEL — core
========================= */
#gallery.carousel{
  position: relative;
  width: 100%;
  overflow: hidden;            /* hide off-screen slides */
}

#gallery .carousel-container{
  display: flex;               /* lay slides in a row */
  transition: transform .5s ease-in-out;
  will-change: transform;
}

#gallery .carousel-slide{
  flex: 0 0 100%;              /* each slide = viewport width */
  max-width: 100%;
}

#gallery .carousel-slide img{
  display: block;
  width: 100%;
  height: clamp(220px, 36vh, 360px);  /* responsive band; not massive */
  object-fit: cover;
}

/* Gallery arrows (black glass to match site) */
#gallery .carousel-control{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color: #fff;
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  font-size: 26px;
  line-height: 1;
  user-select: none;
}
#gallery .carousel-control.prev{ left: 8px; }
#gallery .carousel-control.next{ right: 8px; }
#gallery .carousel-control:hover{ background: rgba(0,0,0,.7); }

/* =======================================================
   MOBILE FRIENDLY LAYOUT
   Breakpoints: 1024px (tablet), 680px (phones), 420px (small phones)
======================================================= */

/* ---------- Tablet and down ---------- */
@media (max-width: 1024px){
  /* Navbar */
  #navbar { padding: 8px 0; }
  #navbar ul li { margin: 0 10px; }
  #navbar ul li a { font-size: 16px; }

  /* Hero */
  .logo-container { width: min(760px, 86vw); height: auto; }
  .hero h1 { font-size: clamp(24px, 4.5vw, 36px); }
  .cta-button { font-size: 16px; padding: 10px 16px; }

  /* Gallery carousel */
  .carousel-slide img{
    height: clamp(200px, 36vh, 320px);
  }

  /* Product rail */
  .product-grid-container{ padding: 28px 52px; }
  .product { flex: 0 0 280px; }
  .product img{ height: clamp(220px, 30vh, 320px); }
  .product-footer{
    left: 10px; right: 10px; bottom: 10px; padding: 10px;
  }

  /* Arrows (gallery + product rail) */
  .carousel-control,
  .pg-arrow{ width: 42px; height: 42px; font-size: 24px; border-radius: 12px; }

  /* Popups */
  .contact-popup,
  .return-popup{ width: min(520px, 92vw); }
}

/* ---------- Phones ---------- */
@media (max-width: 680px){
  /* Navbar */
  #navbar ul li { margin: 0 8px; }
  #navbar ul li a { font-size: 15px; }

  /* Hero */
  .logo-container { width: min(560px, 90vw); }
  .hero h1 { font-size: clamp(22px, 6vw, 30px); }
  .cta-button { font-size: 15px; padding: 9px 14px; }
  .scroll-cue { bottom: 18px; }

  /* Gallery carousel band */
  #gallery.carousel{
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0;
  }
  .carousel-slide img{
    height: clamp(180px, 34vh, 260px);
  }

  /* Product rail (one line) */
  .product-grid-container{ padding: 24px 48px; }
  .product-grid{ gap: 18px; scroll-padding: 48px; }
  .product{ flex: 0 0 240px; }
  .product img{ height: clamp(200px, 30vh, 280px); }

  .product-footer{
    left: 8px; right: 8px; bottom: 8px; padding: 8px; border-radius: 10px;
  }
  .view-btn, .price-tag{
    padding: 7px 12px; font-size: 14px; border-radius: 999px;
  }

  /* Black-glass arrows (smaller) */
  .pg-arrow{ width: 38px; height: 38px; font-size: 22px; }
  .pg-prev{ left: 6px; } .pg-next{ right: 6px; }

  /* Gallery arrows */
  .carousel-control{ width: 40px; height: 40px; font-size: 22px; }

  /* Newsletter: stack fields vertically on phones */
  .newsletter-section form{
    flex-direction: column;
    align-items: stretch;
  }
  .newsletter-section input{
    width: 100%;
    border-radius: 5px;
  }
  .newsletter-section button{
    width: 100%;
    margin-top: 8px;
  }

  /* Popups */
  .contact-popup,
  .return-popup{ width: min(480px, 92vw); padding: 16px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 420px){
  /* Navbar */
  #navbar ul li { margin: 0 6px; }
  #navbar ul li a { font-size: 14px; }

  /* Hero */
  .logo-container { width: min(320px, 88vw); }
  .cta-button { font-size: 14px; padding: 8px 12px; }

  /* Gallery */
  .carousel-slide img{
    height: clamp(160px, 32vh, 220px);
  }

  /* Product rail tighter */
  .product-grid-container{ padding: 20px 44px; }
  .product-grid{ gap: 16px; scroll-padding: 44px; }
  .product{ flex: 0 0 220px; }
  .product img{ height: clamp(180px, 30vh, 240px); }

  .product-footer{
    left: 6px; right: 6px; bottom: 6px; padding: 7px; border-radius: 9px;
  }
  .view-btn, .price-tag{ padding: 6px 10px; font-size: 13px; }

  /* Arrows */
  .pg-arrow{ width: 34px; height: 34px; font-size: 20px; }
  .carousel-control{ width: 36px; height: 36px; font-size: 20px; }

  /* Modals */
  .contact-popup,
  .return-popup{ width: 92vw; padding: 14px; }
}

/* Optional: improve tap targets and inertial scrolling on touch devices */
@media (hover: none){
  .view-btn, .price-tag, .cta-button{ min-height: 40px; }
  .product-grid{ -webkit-overflow-scrolling: touch; }
}