/* ══════════════════════════════════════════════════════════════
   Theme layer v8 — old-site structure: department nav, hero slider,
   promo banners, newsletter (luggagefashion.com 2025 rebuild)
   ══════════════════════════════════════════════════════════════ */

/* ── Department nav (All Departments …) ───────────────────── */
.dept-nav-home{
  background:#fff; border-bottom:1px solid var(--line);
  position:relative; z-index:20;
}
.dept-list{
  display:flex; gap:2px; align-items:center; overflow-x:auto;
  scrollbar-width:none; margin:0; padding:0; list-style:none;
  max-width:var(--container,1200px); margin-inline:auto; padding-inline:20px;
}
.dept-list::-webkit-scrollbar{ display:none; }
.dept-item{ position:relative; flex:0 0 auto; }
.dept-item > a{
  display:flex; align-items:center; gap:5px; min-height:46px; padding:0 13px;
  font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap;
  border-bottom:2px solid transparent;
}
.dept-item > a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.dept-caret{ font-size:10px; color:var(--muted); }
.dept-sub{
  position:absolute; left:0; top:100%; min-width:210px; margin:0; padding:6px 0; list-style:none;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 18px 40px -22px rgba(16,24,40,.45);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
  z-index:30;
}
.dept-item.has-sub:hover .dept-sub,
.dept-item.has-sub:focus-within .dept-sub{ opacity:1; visibility:visible; transform:translateY(0); }
.dept-sub a{ display:block; padding:9px 16px; font-size:13.5px; color:var(--ink); }
.dept-sub a:hover{ background:var(--line-soft); color:var(--accent); }

/* ── Hero slider ──────────────────────────────────────────── */
.hero-slider{
  background:linear-gradient(180deg,#f7f9fb,#eef2f6);
  border-bottom:1px solid var(--line); padding:30px 0 18px;
}
.hero-slider-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center;
  max-width:var(--container,1200px); margin-inline:auto; padding-inline:20px;
}
.hero-slide-eyebrow{
  margin:0 0 8px; font-size:11.5px; font-weight:800; letter-spacing:.8px;
  text-transform:uppercase; color:var(--accent);
}
.hero-slide-title{
  margin:0 0 10px; font-size:clamp(26px,4vw,42px); line-height:1.08;
  letter-spacing:-.8px; color:var(--ink);
}
.hero-slide-blurb{ margin:0 0 14px; font-size:15px; line-height:1.55; color:#4a5568; max-width:52ch; }
.hero-slide-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 18px; }
.hero-slide-now{ font-size:clamp(26px,4vw,36px); font-weight:800; color:var(--sale); line-height:1; }
.hero-slide-price s{ color:var(--muted); font-size:15px; }
.hero-slide-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero-slide-link{ font-size:13.5px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:2px; }
.hero-slide-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.hero-slider-media{ position:relative; }
.hero-media-slide{
  position:relative; display:block; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:18px; box-shadow:0 26px 60px -34px rgba(16,24,40,.5);
}
.hero-media-slide img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; display:block; }
.hero-slide-badge{
  position:absolute; top:14px; left:14px; background:var(--sale); color:#fff;
  font-size:13px; font-weight:800; padding:6px 11px; border-radius:99px;
}
.hero-slider-dots{
  display:flex; justify-content:center; gap:8px; margin-top:16px;
  max-width:var(--container,1200px); margin-inline:auto;
}
.hero-dot{
  width:9px; height:9px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:#c9d1d9; transition:background .15s ease, transform .15s ease;
}
.hero-dot.is-active{ background:var(--accent); transform:scale(1.35); }

/* ── Promo banners ───────────────────────────────────────── */
.promo-band{
  background:linear-gradient(120deg,#fff6f5,#fdeceb);
  border-top:1px solid #f6d5d5; border-bottom:1px solid #f6d5d5;
  padding:26px 0;
}
.promo-inner{
  display:grid; grid-template-columns:1fr 220px; gap:22px; align-items:center;
  max-width:var(--container,1200px); margin-inline:auto; padding-inline:20px;
}
.promo-eyebrow{
  margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.9px;
  text-transform:uppercase; color:var(--accent);
}
.promo-title{ margin:0 0 8px; font-size:clamp(20px,2.6vw,28px); line-height:1.15; color:var(--ink); letter-spacing:-.4px; }
.promo-blurb{ margin:0 0 14px; font-size:14px; line-height:1.55; color:#4a5568; max-width:56ch; }
.promo-media{ display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; }
.promo-media img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; display:block; }
.promo-kids{ background:linear-gradient(120deg,#f2f7ff,#e8f0ff); border-color:#d5e3f7; }
.promo-tags{ background:linear-gradient(120deg,#fdf8ec,#fbf0d9); border-color:#f0e2c4; }
.promo-organisers{ background:linear-gradient(120deg,#f2fbf5,#e6f7ec); border-color:#cfe9d8; }
.promo-locks{ background:linear-gradient(120deg,#f7f5fd,#efebfa); border-color:#ddd6f0; }

/* ── Newsletter ──────────────────────────────────────────── */
.newsletter{ background:var(--header); color:#fff; }
.newsletter-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center;
  max-width:var(--container,1200px); margin-inline:auto; padding-inline:20px;
}
.newsletter-copy h2{ margin:0 0 6px; font-size:clamp(20px,2.4vw,26px); color:#fff; letter-spacing:-.3px; }
.newsletter-copy p{ margin:0; font-size:14px; color:rgba(255,255,255,.78); line-height:1.55; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input[type=email]{
  flex:1 1 240px; min-height:46px; padding:11px 14px; font-size:16px;
  border-radius:10px; border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.08); color:#fff;
}
.newsletter-form input[type=email]::placeholder{ color:rgba(255,255,255,.6); }
.newsletter-form .btn{ min-height:46px; }
.nl-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (max-width:900px){
  .hero-slider-inner{ grid-template-columns:1fr; gap:16px; }
  .hero-slider-media{ order:-1; }
  .hero-media-slide img{ max-height:300px; }
  .promo-inner{ grid-template-columns:1fr; }
  .promo-media{ display:none; }
  .newsletter-inner{ grid-template-columns:1fr; }
  /* departments stay a horizontal scroller, submenu opens on tap */
  .dept-sub{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
             border:0; border-top:1px solid var(--line); display:none; min-width:0; }
  .dept-item.is-open .dept-sub{ display:block; }
  .dept-item.has-sub:hover .dept-sub{ display:none; }
  .dept-item.has-sub.is-open:hover .dept-sub{ display:block; }
}