:root{
  --accent: #b01e24;
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #fafafa;

  /* CORE TYPE */
  --text: #0b0c10;
  --muted: #5f6066;

  /* BRAND RED */
  --accent: #c1121f; /* deep fashion red */
  --accent-soft: rgba(193,18,31,.08);

  --border: rgba(0,0,0,.10);
  --border-2: rgba(0,0,0,.18);

  --shadow: 0 18px 48px rgba(0,0,0,.08);
  --radius: 18px;
  --radius-sm: 14px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:22px}
@media (max-width: 720px){
  .container{padding:16px}
}

header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(7,8,11,.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 2px;
}

.brand{
  font-family: 'UnifrakturCook', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--accent);
  text-transform: uppercase;
}

.navlinks{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
}

.navlinks a{
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1;
  font-size: 14px;
}

.navlinks a:hover{
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-color: var(--border);
}

.navlinks a.active{
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: var(--border-2);
}

.hero{
  padding: 34px 0 18px;
}

.hero h1{
  margin: 0 0 10px;
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.02em;
}

.hero p{
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
  font-size: 16px;
}

@media (max-width: 720px){
  .hero{padding: 22px 0 14px;}
  .hero p{font-size: 15px;}
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

@media (max-width: 960px){
  .grid{gap: 12px;}
}

.card{
  grid-column: span 4;
  background: linear-gradient(180deg, var(--panel), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.card h3{
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.card p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 960px){
  .card{grid-column: span 6;}
}
@media (max-width: 640px){
  .card{grid-column: span 12;}
}

.hr{
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.btn:hover{
  background: rgba(255,255,255,.06);
  border-color: var(--border-2);
  transform: translateY(-1px);
}

.btn.primary{
  background: rgba(124,92,255,.22);
  border-color: rgba(124,92,255,.55);
}

.btn.primary:hover{
  background: rgba(124,92,255,.28);
  border-color: rgba(124,92,255,.72);
}

footer{
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding: 18px 0;
  margin-top: 26px;
  font-size: 13px;
}

/* Shop cards (if you use the products grid) */
.product-card{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.thumb{
  height: 160px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background:
    radial-gradient(400px 180px at 30% 10%, rgba(124,92,255,.20), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.price{
  color: var(--muted);
  font-size: 14px;
}
/* ===== FINAL OVERRIDES (WHITE NAV + RED BRAND) ===== */

/* White navbar (no grey strip) */
header{
  background: #fff !important;
  backdrop-filter: none !important;
}

/* Make brand + key headings red */
.brand{ color: var(--accent) !important; }
.hero h1, h1{ color: var(--accent); }

/* Nav links: black, red when active */
.navlinks a{ color: var(--text) !important; opacity: 1 !important; }
.navlinks a:hover{ color: var(--accent) !important; }
.navlinks a.active{
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: transparent !important;
}

/* Primary buttons red */
.btn.primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Remove purple from product image placeholders */
.thumb{
  background: linear-gradient(180deg, rgba(193,18,31,.16), rgba(193,18,31,.02)) !important;
  border-color: var(--border) !important;
}
/* Header alignment fix */
header .container{
  padding-left: 22px !important;
  padding-right: 22px !important;
}

@media (max-width: 720px){
  header .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Logo and H1 only: UnifrakturMaguntia */
header .brand,
h1{
  font-family: 'UnifrakturMaguntia', serif;
  font-weight: 700;
  letter-spacing: .035em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* H2: High-end serif for titles */
h2{
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .01em;
  color: var(--text);
}