/* =========================================================
   Shape & Shine Studio — Dark Luxury Theme
   ========================================================= */

/* ---- Reset / Base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:root{
  /* Palette */
  --bg: #0b0c10;
  --bg-contrast:#0f1115;
  --bg-elev:#111318;
  --panel:#12151c;
  --line:#21252e;

  --text:#e7e9ee;
  --sub:#9aa3b2;

  --gold:#d4af37;
  --gold-700:#b28f22;

  /* Effects */
  --radius: 18px;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --shadow-sm: 0 6px 20px rgba(0,0,0,.25);

  /* Layout */
  --wrap: 1180px;
}

body.theme-dark{
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 ui-sans-serif, system-ui, Segoe UI, Inter, Roboto, Arial, sans-serif;
}

/* ---- Utilities ---- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.section { padding: 40px 0; }
.section-contrast { background: var(--bg-contrast); }
.section-title { margin: 0 0 10px; font-size: clamp(1.3rem,1.6vw+1rem,1.9rem); }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.muted { color: var(--sub); }
.ticks { list-style:none; padding:0; margin:14px 0; display:grid; gap:6px; }
.ticks li::before { content:"✓"; color: var(--gold); margin-right:.5rem; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1rem;
  border-radius:12px; border:1px solid var(--line);
  background: var(--bg-elev); color: var(--text);
  text-decoration:none; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.primary{
  background: linear-gradient(180deg,#23262f,#1b1e26);
  border-color:#3a3f4d; position:relative;
}
.btn.primary::after{
  content:""; position:absolute; inset:0; border-radius:12px;
  box-shadow: inset 0 0 0 2px rgba(212,175,55,.28);
  pointer-events:none;
}
.btn.subtle{ background:transparent; border-color:#2a2f3a; }

/* ---- Form Inputs ---- */
.input, .select, textarea{
  width:100%; padding:.65rem .8rem; border:1px solid var(--line);
  border-radius:12px; background:#0f1218; color:var(--text);
}
.label{ display:block; font-size:.9rem; color:var(--sub); margin-bottom:.35rem; }

/* ---- Header / Nav ---- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(12,14,18,.75); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); font-weight:700; }
.logo{
  width:28px; height:28px; border-radius:8px;
  background: radial-gradient(60% 60% at 40% 35%, rgba(212,175,55,.9), rgba(212,175,55,.35) 60%, transparent 61%), #22252e;
  box-shadow: 0 0 0 1px rgba(212,175,55,.35);
}
.nav{ display:flex; gap:.5rem; }
.nav a{ color:var(--text); text-decoration:none; padding:.5rem .75rem; border-radius:10px; }
.nav a:hover{ background:#151922; }

.hamburger{ display:none; background:none; border:none; padding:.5rem; border-radius:10px; }
.hamburger .bar{ width:22px; height:2px; background:#e6e6e6; display:block; margin:4px 0; border-radius:2px; }

@media (max-width: 900px){
  .nav{ display:none; position:absolute; inset:66px 0 auto 0; background:#0e1015; border-bottom:1px solid var(--line); padding:10px 16px; }
  .nav.open{ display:flex; flex-direction:column; }
  .hamburger{ display:block; }
}

/* ---- Hero ---- */
.hero{ padding:32px 0; }
.hero-dark{
  background:
    radial-gradient(80% 120% at 80% 10%, rgba(212,175,55,.10) 0, rgba(212,175,55,0) 50%),
    linear-gradient(180deg, #0b0c10 0, #0e1014 100%);
}
.hero .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:22px; }
.hero-content h1{ font-size:clamp(1.8rem,2.2vw+1rem,2.6rem); margin:.1rem 0 .5rem; }
.hero-content p{ color:var(--sub); margin:0; }
.hero-actions{ display:flex; gap:10px; margin-top:14px; }
.hero-media{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hero-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0f1116; box-shadow:var(--shadow-sm); }
.hero-card img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 980px){ .hero .wrap{ grid-template-columns:1fr; } }

/* ---- Grids & Cards ---- */
.grid{ display:grid; gap:16px; grid-template-columns: repeat(12,1fr); }
.grid.cards > *{ grid-column: span 3; }

@media (max-width:1200px){ .grid.cards > *{ grid-column: span 4; } }
@media (max-width:900px){ .grid.cards > *{ grid-column: span 6; } }
@media (max-width:560px){ .grid.cards > *{ grid-column: span 12; } }

.card{
  background: linear-gradient(180deg,#12151c,#0f1218);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:12px; box-shadow: var(--shadow-sm);
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:.5rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.card .title{ font-weight:650; }
.card .sub{ color: var(--sub); }
.card .price{ color: var(--text); font-weight:700; }

/* Thumbs */
.thumb{ aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#0d0f14; border:1px solid var(--line); }
.thumb img{ width:100%; height:100%; object-fit:cover; }

.grid.thumbs > *{ grid-column: span 3; }
@media (max-width:1200px){ .grid.thumbs > *{ grid-column: span 4; } }
@media (max-width:900px){ .grid.thumbs > *{ grid-column: span 6; } }
@media (max-width:560px){ .grid.thumbs > *{ grid-column: span 12; } }
.thumb.lg{ aspect-ratio:4/3; }

/* ---- About split ---- */
.about{ display:grid; grid-template-columns:1.1fr .9fr; gap:22px; }
.about-media{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.about-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0f1116; }
.about-card img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:980px){ .about{ grid-template-columns:1fr; } }

/* ---- Error box (friendly alert) ---- */
.error-box{
  background: linear-gradient(180deg, #261b1b, #1a1414);
  border:1px solid #4b2525; color:#f6b7b7;
  border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.35);
  padding:1rem; margin:2rem auto; max-width:720px;
}
.error-inner{ font-size:.95rem; line-height:1.5; }

/* =========================================================
   FOOTER — Multi-column desktop, stacked mobile
   ========================================================= */
.site-footer{
  background:#0e0f10; color:#ddd; padding-top:3rem; border-top:1px solid #2a2a2a;
}

/* Force multi-columns on desktop */
.footer-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr)); /* 5 columns on wide */
  gap: 2rem;
  padding-bottom: 2rem;
}

/* Reduce columns at different breakpoints */
@media (max-width: 1100px){
  .footer-grid{ grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}
@media (max-width: 720px){
  .footer-grid{ grid-template-columns: 1fr; }
}

.footer-col h4{
  font-size:1rem; font-weight:600; color:var(--gold); margin:0 0 .6rem;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin:.35rem 0; }
.footer-col a{
  color:#cfd0d3; text-decoration:none; transition: color .2s;
}
.footer-col a:hover{ color: var(--gold); }

.footer-bottom{
  border-top:1px solid #1f1f1f; background:#0b0c0d;
  text-align:center; padding:1rem 0 1.5rem; font-size:.85rem; color:#aaa;
}
.footer-bottom .muted{ color:#666; margin-top:.3rem; }

/* =========================================================
   Cookie bar (optional, pairs with cookies.js)
   ========================================================= */
.cookie-bar{
  position: fixed; bottom:0; left:0; right:0;
  background: rgba(15,17,20,.95); color: #e7e9ee;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; font-size:.9rem; z-index:9999;
  border-top:1px solid #2a2f3a; box-shadow: 0 -6px 20px rgba(0,0,0,.3);
}
.cookie-text a{ color: var(--gold); text-decoration:none; }
.cookie-actions{ display:flex; gap:.5rem; }
.btn.small{ padding:.4rem .8rem; font-size:.85rem; }

/* Social bar */
.social-bar{
  display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap;
}
.social{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #2a2f3a; border-radius:12px; background:#0f1216;
  box-shadow: var(--shadow-sm); text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.social:hover{
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: rgba(212,175,55,.45);
}
.social svg{
  width:18px; height:18px; fill:#cfd0d3; transition: fill .15s ease;
}
.social:hover svg{ fill: var(--gold); }
/* Ensure icons never stretch */
.social-bar { display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; }
.social { flex: 0 0 38px; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; }
.social svg { display:block; width:18px; height:18px; }

/* Prevent list links from forcing block width */
.footer-col ul li a { display:inline; }

.social-bar { display: none !important; }