/* ===== PouLux shared styles (gray-site) ===== */
body { font-family: 'Inter', system-ui, sans-serif; }
.font-serif { font-family: 'Cormorant Garamond', serif; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.pulse-dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.cat-card { transition: transform .35s ease, box-shadow .35s ease; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -22px rgba(41,31,24,.5); }
.age-gate { backdrop-filter: blur(8px); }
.drawer { transition: transform .35s ease; }

/* ===== Cinematic animated hero ===== */
.hero { background:#150e08; }
.hero-bg { position:absolute; inset:0; overflow:hidden; }
.hero-photo { position:absolute; inset:0; overflow:hidden; }
.hero-photo > img { width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.06); animation:heroZoom 22s ease-in-out infinite alternate; }
@keyframes heroZoom { from{transform:scale(1.06)} to{transform:scale(1.16)} }
.hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,10,6,.88) 0%, rgba(15,10,6,.55) 48%, rgba(15,10,6,.30) 100%); }
.cat-photo { position:relative; aspect-ratio:4/3; overflow:hidden; transition: transform .55s ease; background:#1a1410; }
.cat-photo > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; transition: transform .55s ease; }
.cat-card:hover .cat-photo { transform: scale(1.04); }
.cat-card:hover .cat-photo > img { transform: scale(1.04); }
.cat-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(18,12,7,.92) 4%, rgba(18,12,7,.05) 55%); pointer-events:none; }
.prod-photo { position:relative; aspect-ratio:1/1; overflow:hidden; transition: transform .55s ease; background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#f8f5f2; }
.prod-photo > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition: transform .55s ease; }
.cat-card:hover .prod-photo { transform: scale(1.04); }
.cat-card:hover .prod-photo > img { transform: scale(1.08); }
.article-card-image { position:relative; height:10rem; overflow:hidden; }
.article-card-image > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.blob { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform; }
.blob-1 { width:48vw; height:48vw; left:-12vw; top:-14vw; background:radial-gradient(circle at 30% 30%, #ad524d, transparent 60%); animation:drift1 18s ease-in-out infinite; }
.blob-2 { width:42vw; height:42vw; right:-10vw; top:4vw; background:radial-gradient(circle at 50% 50%, #c98a3f, transparent 62%); animation:drift2 22s ease-in-out infinite; }
.blob-3 { width:40vw; height:40vw; left:26vw; bottom:-16vw; background:radial-gradient(circle at 50% 50%, #4a3424, transparent 60%); animation:drift3 26s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,4vw) scale(1.12)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vw,5vw) scale(1.08)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,-4vw) scale(1.15)} }
.hero-grain { position:absolute; inset:0; opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-vignette { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 38%, transparent 30%, rgba(8,5,3,.78) 100%); }
.text-gradient { background:linear-gradient(120deg,#e9b27a,#ad524d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-visual { position:relative; }
.float-bottle { animation:floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.glass-pill { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(10px); color:#f7ede0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; border-radius:999px; box-shadow:0 12px 30px -12px rgba(0,0,0,.55); }
.scroll-cue { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); width:24px; height:40px; border:1.5px solid rgba(255,255,255,.35); border-radius:14px; }
.scroll-cue::before { content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:3px; height:8px; background:rgba(255,255,255,.6); border-radius:2px; animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{opacity:0; transform:translate(-50%,0)} 50%{opacity:1; transform:translate(-50%,10px)} }

.cat-icon { transition: transform .5s ease; }
.cat-card:hover .cat-icon { transform: scale(1.08) rotate(-2deg); }

/* header / footer injected */
.nav-link { color: rgba(252,252,252,.80); transition: color .2s; }
.nav-link:hover { color: #ad524d; }
.nav-link.active { color: #ad524d; }

@media (prefers-reduced-motion: reduce) {
  .blob, .float-bottle, .scroll-cue::before, .pulse-dot, .hero-photo > img { animation:none !important; }
}

/* floating whatsapp + sticky quote bar */
body.has-sticky-bar { padding-bottom: 62px; }
.fab-wa { position:fixed; right:18px; bottom:86px; z-index:80; width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -8px rgba(0,0,0,.5); transition: transform .2s ease; }
.fab-wa:hover { transform: scale(1.07); }
.sticky-bar { position:fixed; left:0; right:0; bottom:0; z-index:79; background:#150e08; border-top:1px solid rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) { .fab-wa { transition: none; } }

/* variant chips + faq */
.variant-chip { border:1px solid #e0deda; border-radius:8px; padding:8px 14px; font-size:13px; background:#fff; color:#0e0a07; transition: all .2s ease; }
.variant-chip:hover { border-color:#ad524d; }
.variant-chip.selected { background:#291f18; color:#fcfcfc; border-color:#291f18; }
.faq-item > summary { list-style:none; }
.faq-item > summary::-webkit-details-marker { display:none; }
.faq-item[open] > summary > span { transform: rotate(45deg); }
.faq-item > summary > span { display:inline-block; transition: transform .2s ease; }

/* ===== Contact thanks panel (Formspree redirect target: /contact.html?thanks=1) ===== */
.thanks-check {
  width: 48px; height: 48px; border-radius: 50%;
  background: #ad524d; color: #fcfcfc;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px -6px rgba(173, 82, 77, .55);
}
.thanks-window {
  background: #fdf3f1; border-left: 3px solid #ad524d;
  padding: 14px 16px; border-radius: 6px;
}
#thanksPanel[hidden] { display: none !important; }
#leadFormWrap[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  #thanksPanel:not([hidden]) { animation: thanksFadeIn .55s ease both; }
}
@keyframes thanksFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Coming Soon — Vape collection ===== */
.coming-soon-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  text-align: center;
  padding: 18px 20px;
  position: relative;
  z-index: 10;
}
.coming-soon-banner .cs-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.coming-soon-banner .cs-sub {
  font-size: 13px;
  opacity: 0.92;
  font-weight: 400;
}
.coming-soon-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(102, 126, 234, 0.88);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  z-index: 5;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
[dir="rtl"] .coming-soon-badge {
  left: auto;
  right: 12px;
}
.notify-btn {
  background: #6b7280 !important;
  color: #fff !important;
  cursor: pointer !important;
  border: none !important;
}
.notify-btn:hover {
  background: #4b5563 !important;
}
.notify-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 6, 0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.notify-modal-overlay.hidden { display: none; }
.notify-modal {
  background: #fcfbf9;
  border-radius: 12px;
  max-width: 440px;
  width: 100%;
  padding: 32px;
  position: relative;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid #e0deda;
}
.notify-modal h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: #0e0a07;
  margin-bottom: 6px;
}
.notify-modal .nm-sub {
  color: #6b7280;
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.notify-modal .form-group { margin-bottom: 14px; }
.notify-modal label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.notify-modal input,
.notify-modal select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  background: #fff;
  color: #0e0a07;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.notify-modal input:focus,
.notify-modal select:focus {
  border-color: #667eea;
}
.notify-modal input:read-only {
  background: #f3f4f6;
  color: #6b7280;
}
.notify-modal .nm-submit {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 6px;
}
.notify-modal .nm-submit:hover { opacity: 0.9; }
.notify-modal .nm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  color: #9ca3af;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.notify-modal .nm-close:hover { color: #374151; }
.notify-modal .nm-thanks {
  text-align: center;
  padding: 16px 0 8px;
}
.notify-modal .nm-thanks .nm-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
}
.notify-modal .nm-thanks h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: #0e0a07;
  margin-bottom: 6px;
}
.notify-modal .nm-thanks p {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.coming-soon-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(102, 126, 234, 0.12);
  color: #667eea;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.coming-soon-stock .cs-dot {
  width: 7px;
  height: 7px;
  background: #667eea;
  border-radius: 50%;
}