/* =============== LQ Perfumes — Base theme (stable) =============== */
:root{
  --ink:#111111; --gold:#CDAF8B; --porcelain:#F7F3EE; --mocha:#7A6A58;
  --radius:10px; --shadow:0 6px 18px rgba(0,0,0,.07);
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
html,body{
  margin:0; padding:0;
  background:var(--porcelain); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Inter","Helvetica","Arial",sans-serif;
}
a{color:var(--ink); text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit; cursor:pointer}

/* Layout helpers */
.container{max-width:1200px; margin:0 auto; padding:0 16px}
.flex{display:flex; gap:12px}
.between{justify-content:space-between}
.center{align-items:center}

/* ================================================================
   Header & Navigation
   ================================================================ */
.site-header{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid #eee;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:60px;
}

/* Brand */
.brand{display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.5px; padding:10px 0}
.logo{width:28px; height:28px; object-fit:contain; display:inline-block}

/* Desktop nav (one line, no wrap) */
.nav{display:flex; align-items:center; gap:18px; white-space:nowrap}
.nav a{display:inline-flex; align-items:center; padding:10px 10px; border-radius:8px}
.nav .admin-link{border:1px solid #ddd}

/* Callout button that appears in nav */
.btn{
  background:var(--mocha); color:#fff;
  padding:8px 12px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--mocha);
  display:inline-block;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease,
             box-shadow .18s ease, transform .06s ease;
}
.btn:hover,.btn:focus-visible{
  background:var(--ink); color:#fff; border-color:var(--ink);
  text-decoration:none; transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.btn-ghost{
  border:1px solid var(--mocha); border-radius:var(--radius);
  padding:6px 10px; background:#fff; color:var(--mocha);
  transition:background-color .18s ease, color .18s ease, border-color .18s ease,
             box-shadow .18s ease, transform .06s ease;
}
.btn-ghost:hover,.btn-ghost:focus-visible{
  background:var(--ink); color:#fff; border-color:var(--ink);
  text-decoration:none; transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.btn:active,.btn-ghost:active{transform:translateY(0); box-shadow:0 6px 18px rgba(0,0,0,.08)}

/* Mobile controls (checkbox hack) — hidden on desktop */
.nav-toggle{display:none}
.nav-panel{display:none}

/* Mobile breakpoint */
@media (max-width:768px){
  /* Collapse inline nav; show hamburger */
  .nav{display:none}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border:1px solid #ddd; border-radius:10px; background:#fff;
  }
  .nav-toggle .bars{width:18px; height:2px; background:#111; position:relative; display:block}
  .nav-toggle .bars::before,
  .nav-toggle .bars::after{
    content:""; position:absolute; left:0; width:18px; height:2px; background:#111;
  }
  .nav-toggle .bars::before{top:-6px}
  .nav-toggle .bars::after{top:6px}

  /* Dropped panel */
  .nav-panel{
    position:absolute; left:0; right:0; top:60px;
    background:#fff; border-bottom:1px solid #eee;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    padding:10px 16px; display:none;
  }
  .nav-panel.open{display:block}
  .nav-panel a{display:block; padding:12px 8px; border-radius:10px}
}

/* ================================================================
   Page structure & components
   ================================================================ */
.content{padding:28px 0}

/* Cards & grids */
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:1fr}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{
  background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; border:1px solid #eee
}
.card img{display:block; width:100%; height:auto}
.card-body{padding:14px}

/* Bits & badges */
.badge{display:inline-block; background:var(--gold); color:#000; padding:2px 8px; border-radius:999px; font-size:.75rem; margin-right:6px}

/* Hero */
.hero{
  background:linear-gradient(160deg,#fff,#f2ebe3);
  border-radius:16px; padding:28px; box-shadow:var(--shadow); border:1px solid #eee
}
.hero h1{margin:0 0 8px}

/* Text utils */
.muted{color:#666}

/* Alerts */
.alert{padding:12px 14px; border-radius:10px; margin:8px 0}
.alert.success{background:#eaf8f0; border:1px solid #bfe8cf}
.alert.error{background:#fde8e8; border:1px solid #f5b5b5}

/* Forms */
form .row{display:grid; gap:10px}
@media(min-width:700px){form .row-2{grid-template-columns:1fr 1fr}}
label{font-weight:600; margin:8px 0 4px; display:block}
input,select,textarea{width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold); border-color:var(--gold)}
/* extra space under selects in filter cards */
.card form .btn{margin-top:8px}

/* Tables */
table{width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; box-shadow:var(--shadow)}
th,td{padding:10px; border-bottom:1px solid #eee; text-align:left; vertical-align:top}
thead th{background:#faf7f2}
.actions a,.actions button{margin-right:8px}

/* Gallery */
figure{margin:0}
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:700px){.gallery{grid-template-columns:repeat(3,1fr)}}

/* Blockquote */
blockquote{border-left:4px solid var(--gold); margin:0; padding:8px 12px; background:#fff; border-radius:10px}

/* Sticky footer */
body{min-height:100vh; display:flex; flex-direction:column}
main{flex:1}
.site-footer{margin-top:auto; background:#fff; border-top:1px solid #eee}
.site-footer .container{
  display:flex; justify-content:center; align-items:center;
  flex-direction:column; text-align:center; gap:4px;
}

/* Focus states */
a:focus-visible, .btn:focus-visible, .btn-ghost:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

/* Admin login (bigger but tidy) */
.auth-wrap{display:flex; justify-content:center; align-items:flex-start; min-height:40vh; padding:24px 0}
.auth-card{max-width:720px; width:100%; padding:24px}
@media(min-width:700px){.auth-card{padding:32px}}
.auth-card input, .auth-card select, .auth-card textarea{font-size:1rem; padding:12px}
.auth-card .btn{padding:12px 16px; width:100%; margin-top:8px}

/* Toast (flash) */
.toast{
  position:fixed; top:18px; right:18px; z-index:1000;
  min-width:240px; max-width:420px; padding:12px 14px;
  border-radius:10px; color:#0f5132; background:#d1e7dd; border:1px solid #badbcc;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}
.toast.error{background:#f8d7da; border-color:#f5c2c7; color:#842029}

/* Image aspect tidy for cards */
.feat .card img,
.grid-3 > .card img{
  aspect-ratio:4/3; object-fit:cover;
}
/* Placeholder area for image-less cards, to keep heights aligned */
.grid-3 > .card:not(:has(img))::before{
  content:""; display:block; aspect-ratio:4/3; background:#f6f0e8; border-bottom:1px solid #eee;
}

/* ---- NAV hard fix ---- */
.site-header .nav-list{
  display:flex;
  gap:18px;
  list-style:none;      /* kill bullets */
  margin:0;
  padding:0;
  align-items:center;
  white-space:nowrap;   /* keep one line on desktop */
}
.site-header .nav-list li{ margin:0 }
.site-header .nav-list a{
  display:inline-flex;
  align-items:center;
  padding:10px 10px;
  border-radius:8px;
}

/* Ensure mobile dropdown is hidden on desktop */
.site-header .nav-panel{ display:none }

/* Mobile only: hide inline, show dropdown when opened */
@media (max-width:768px){
  .site-header .nav{ display:none }
  .site-header .nav-panel{
    position:absolute; left:0; right:0; top:60px;
    background:#fff; border-bottom:1px solid #eee;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    padding:10px 16px; display:none;
  }
  .site-header .nav-panel.open{ display:block }
  .site-header .nav-panel .nav-list{
    display:flex; flex-direction:column; gap:8px; white-space:normal;
  }
}