/* ========================================
   GROMAMBO MARILLAS MAGIE - Main Stylesheet
   Black / White / Gold Voodoo Theme
   ======================================== */

:root {
  --bg-dark: #080808;
  --bg-card: #111111;
  --bg-card2: #181818;
  --bg-input: #1a1a1a;
  --gold: #c9a84c;
  --gold-light: #e8c96e;
  --gold-dark: #a07830;
  --text: #f0f0f0;
  --text-muted: #888;
  --text-dim: #555;
  --border: #2a2a2a;
  --border-gold: #c9a84c40;
  --red: #e53935;
  --green: #4caf50;
  --shadow: 0 4px 24px rgba(0,0,0,0.6);
  --radius: 4px;
  --radius-lg: 8px;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Lato', sans-serif;
  --nav-height: 64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

/* ===== CONTAINER ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .container { padding: 0 24px; } }

.main-content { padding-top: var(--nav-height); min-height: calc(100vh - 200px); }

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.3; }
.gold { color: var(--gold); }
.text-muted { color: var(--text-muted); font-size: 0.85em; }
.text-center { text-align: center; }

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-height);
  background: rgba(8,8,8,0.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.nav-container {
  display: flex; align-items: center; gap: 12px;
  height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px;
}
.nav-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 1.1rem; color: var(--gold);
  letter-spacing: 1px; text-decoration: none; white-space: nowrap;
}
.brand-symbol { font-size: 0.7rem; opacity: 0.6; }
.brand-name { font-size: 1rem; }
.nav-menu {
  display: none; flex-direction: column;
  position: fixed; top: var(--nav-height); left: 0; right: 0;
  background: rgba(8,8,8,0.98);
  border-bottom: 1px solid var(--border);
  padding: 16px;
  gap: 4px;
}
.nav-menu.open { display: flex; }
.nav-link {
  color: var(--text); font-size: 0.9rem; padding: 10px 14px;
  border-radius: var(--radius); transition: all 0.2s;
  letter-spacing: 0.5px;
}
.nav-link:hover, .nav-link.active { color: var(--gold); background: rgba(201,168,76,0.08); }
.nav-admin { color: var(--gold); }
.btn-outline-gold { border: 1px solid var(--gold); }
.nav-toggle {
  display: flex; flex-direction: column; gap: 5px; padding: 8px;
  background: none; border: none; cursor: pointer; margin-left: auto;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); transition: all 0.2s; }
.cart-btn {
  position: relative; background: none; border: none; color: var(--text);
  cursor: pointer; padding: 8px; display: flex; align-items: center;
}
.cart-badge {
  position: absolute; top: 0; right: 0;
  background: var(--gold); color: #000; font-size: 0.65rem;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; padding: 0 3px;
}
@media (min-width: 768px) {
  .nav-menu { display: flex; flex-direction: row; position: static; background: none; border: none; padding: 0; flex: 1; justify-content: flex-end; }
  .nav-toggle { display: none; }
}

/* ===== NAV DROPDOWN ===== */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-arrow { font-size: 0.6rem; opacity: 0.5; margin-left: 3px; display: inline-block; transition: transform 0.25s; vertical-align: middle; }
.nav-has-dropdown.open .nav-arrow { transform: rotate(180deg); }

.nav-dropdown {
  display: none;
  background: rgba(8,8,8,0.99);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 10px 0;
  min-width: 240px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.8);
  z-index: 1500;
}
/* Invisible hover bridge so mouse can travel to dropdown without it closing */
@media (min-width: 768px) {
  .nav-dropdown::before {
    content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
  }
}
/* Mobile: inline accordion */
@media (max-width: 767px) {
  .nav-item { display: block; }
  .nav-dropdown { border: none; background: rgba(201,168,76,0.04); border-left: 2px solid var(--border-gold); border-radius: 0; margin-left: 14px; margin-top: 4px; padding: 4px 0; }
  .nav-has-dropdown.open .nav-dropdown { display: block; }
}
/* Desktop: absolute flyout – JS-controlled via .open class */
@media (min-width: 768px) {
  .nav-dropdown { position: absolute; top: calc(100% + 4px); right: 0; }
  .nav-has-dropdown.open .nav-dropdown { display: block; }
}

.nav-dropdown-link {
  display: block; padding: 10px 20px; color: var(--text-muted);
  font-size: 0.85rem; transition: color 0.15s, background 0.15s, padding-left 0.15s;
  white-space: nowrap; letter-spacing: 0.3px;
}
.nav-dropdown-link:hover { color: var(--gold); background: rgba(201,168,76,0.06); padding-left: 26px; }
.nav-dropdown-divider { height: 1px; background: var(--border); margin: 8px 14px; }
.nav-dropdown-all { color: var(--gold); font-size: 0.82rem; }
.nav-dropdown-cta {
  color: var(--gold) !important; font-weight: 600;
  border-top: 1px solid var(--border-gold); margin-top: 4px; padding-top: 12px;
}

/* ===== CART SIDEBAR ===== */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1100;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.cart-overlay.active { opacity: 1; pointer-events: all; }
.cart-sidebar {
  position: fixed; top: 0; right: -400px; width: min(400px, 100vw); height: 100vh;
  background: var(--bg-card); border-left: 1px solid var(--border);
  z-index: 1200; transition: right 0.3s ease; display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.6);
}
.cart-sidebar.open { right: 0; }
.cart-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-family: var(--font-heading); font-size: 1.1rem;
}
.cart-close { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; }
.cart-sidebar-items { flex: 1; overflow-y: auto; padding: 16px; }
.cart-sidebar-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cart-sidebar-item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); }
.cart-sidebar-item-placeholder { width: 56px; height: 56px; background: var(--bg-input); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.cart-sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--border); }
@media (max-width: 767px) {
  .cart-sidebar-footer { padding-bottom: calc(16px + 56px); }
}
.cart-sidebar-total { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; }

/* ===== FLASH MESSAGES ===== */
.flash-container { position: fixed; top: calc(var(--nav-height) + 8px); left: 50%; transform: translateX(-50%); z-index: 2000; width: min(600px, 95vw); display: flex; flex-direction: column; gap: 8px; }
.flash { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); font-size: 0.9rem; box-shadow: var(--shadow); animation: slideDown 0.3s ease; }
.flash button { margin-left: auto; background: none; border: none; cursor: pointer; opacity: 0.6; font-size: 1rem; color: inherit; }
.flash-success { background: #1a2e1a; border: 1px solid #2d5a2d; color: #7ec87e; }
.flash-error { background: #2e1a1a; border: 1px solid #5a2d2d; color: #e07070; }
.flash-info { background: #1a1e2e; border: 1px solid #2d3a5a; color: #7090e0; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 24px; border-radius: var(--radius); font-size: 0.9rem;
  font-weight: 600; letter-spacing: 0.5px; cursor: pointer; border: none;
  transition: all 0.2s; text-decoration: none; font-family: var(--font-body);
}
.btn-gold { background: var(--gold); color: #080808; }
.btn-gold:hover { background: var(--gold-light); color: #080808; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,168,76,0.3); }
.btn-outline { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn-outline:hover { background: rgba(201,168,76,0.1); }
.btn-disabled { background: var(--border); color: var(--text-dim); cursor: not-allowed; }
.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }
.btn-full { width: 100%; display: flex; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }

/* ===== HERO ===== */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  background-size: cover; background-position: center top;
}
/* Smooth fade into the services section below */
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg-card) 100%);
  pointer-events: none;
  z-index: 3;
}
/* fallback radial gradient bg (no image) */
.hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, #1a1200 0%, #080808 55%);
}
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(201,168,76,0.015) 60px, rgba(201,168,76,0.015) 61px),
    repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(201,168,76,0.015) 60px, rgba(201,168,76,0.015) 61px);
}
/* overlay on top of background image */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
}
/* centered single-column hero layout */
.hero-inner {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; width: 100%;
  padding: 90px 24px 60px;
  animation: fadeInUp 1s ease;
}
.hero-content {
  flex: none; text-align: center; width: 100%; max-width: 880px;
}
.hero-actions { justify-content: center; }
.hero-trust   { justify-content: center; }
@media (max-width: 960px) {
  .hero-inner { padding: 100px 20px 60px; }
}
.hero-symbol { color: var(--gold); font-size: 0.9rem; letter-spacing: 8px; margin-bottom: 16px; opacity: 0.6; }
.hero-eyebrow { font-size: 0.85rem; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; opacity: 0.8; }
.hero-title { font-size: clamp(1.6rem, 4vw, 2.8rem); color: var(--text); margin-bottom: 12px; line-height: 1.2; }
.hero-subtitle { font-size: clamp(0.9rem, 1.8vw, 1.05rem); color: var(--text-muted); margin-bottom: 20px; letter-spacing: 1px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-trust { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); }
.hero-trust span::before { content: ''; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* ── Hero logo display (centered, full-width) ── */
.hero-logo-display {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  position: relative; width: 100%;
}

/* Orbiting decorative rings */
.hld-orbit {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.14);
  pointer-events: none; top: 50%; left: 50%;
}
.hld-orbit-1 {
  width: 270px; height: 270px;
  margin: -135px 0 0 -135px;
  border-style: dashed;
  animation: hldOrbit 22s linear infinite;
}
.hld-orbit-2 {
  width: 350px; height: 190px;
  margin: -95px 0 0 -175px;
  animation: hldOrbit 36s linear infinite reverse;
  opacity: 0.55;
}
@keyframes hldOrbit { to { transform: rotate(360deg); } }

/* Main wrap – receives the 3-D mouse tilt */
.hld-wrap {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  padding: 24px 28px;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Radial aura behind the monogram */
.hld-aura {
  position: absolute;
  width: 240px; height: 240px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.13) 0%, transparent 68%);
  border-radius: 50%;
  animation: hldAura 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hldAura {
  0%, 100% { opacity: 0.55; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: 1;    transform: translate(-50%,-50%) scale(1.18); }
}

/* Monogram container – gentle float */
.hld-monogram {
  animation: hldFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(201,168,76,0.38));
}
@keyframes hldFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}

/* Stroke draw-on then glimmer */
.hld-path-1 {
  stroke-dasharray: 115;
  stroke-dashoffset: 115;
  animation: hldDraw 2s cubic-bezier(0.4,0,0.2,1) 0.2s forwards,
             hldGlimmer 4s ease-in-out 2.4s infinite;
}
.hld-path-2 {
  stroke-dasharray: 115;
  stroke-dashoffset: 115;
  animation: hldDraw 2s cubic-bezier(0.4,0,0.2,1) 0.5s forwards,
             hldGlimmer 4s ease-in-out 2.7s infinite;
}
@keyframes hldDraw    { to   { stroke-dashoffset: 0; } }
@keyframes hldGlimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* Apex jewel dot pulse */
.hld-apex   { animation: hldApex 3s ease-in-out infinite; }
.hld-apex-2 { animation: hldApex 3s ease-in-out 1.5s infinite; }
@keyframes hldApex {
  0%, 100% { opacity: 0.8; }
  50%       { opacity: 1; filter: drop-shadow(0 0 4px #f5d98e); }
}

/* Divider line expand */
.hld-line {
  width: 110px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.65), transparent);
  animation: hldLineIn 1.4s ease-out 1s both;
}
@keyframes hldLineIn {
  from { width: 0; opacity: 0; }
  to   { width: 110px; opacity: 1; }
}

/* Wordmark shimmer */
.hld-wordmark {
  font-family: 'Cinzel', serif;
  font-size: 1.55rem; font-weight: 700;
  letter-spacing: 9px;
  background: linear-gradient(90deg, #7a5c10 0%, #c9a84c 28%, #f5d98e 50%, #c9a84c 72%, #7a5c10 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hldShimmer 3.5s linear infinite;
}
@keyframes hldShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}

/* Tagline */
.hld-tagline {
  font-size: 0.62rem; letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(201,168,76,0.48);
  font-family: 'Lato', sans-serif;
}

/* Floating mystical particles */
.hld-p {
  position: absolute;
  left: var(--hx); top: var(--hy);
  font-size: var(--hs);
  color: rgba(201,168,76,0.38);
  animation: hldPFloat var(--hdur) ease-in-out var(--hd) infinite;
  pointer-events: none; user-select: none;
}
@keyframes hldPFloat {
  0%, 100% { transform: translateY(0)   rotate(0deg);   opacity: 0.28; }
  33%       { transform: translateY(-11px) rotate(120deg); opacity: 0.65; }
  66%       { transform: translateY(5px)  rotate(240deg); opacity: 0.38; }
}

/* ===== ABOUT SECTION ===== */
.about-section { background: var(--bg-card); overflow: hidden; }
.about-layout {
  display: grid; grid-template-columns: 340px 1fr; gap: 80px; align-items: center;
}
@media (max-width: 960px) {
  .about-layout { grid-template-columns: 1fr; gap: 40px; }
  .about-image-col { order: 1; }
  .about-text-col { order: 2; }
}
.about-image-col { position: relative; }
.about-image-frame {
  position: relative; border-radius: 2px; overflow: hidden;
  aspect-ratio: 3/4; max-width: 300px; margin: 0 auto;
  background: linear-gradient(135deg, #1a1200 0%, #0d0d0d 100%);
}
.about-image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-image-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; color: var(--gold); opacity: 0.15;
}
.about-image-border {
  position: absolute; inset: 14px;
  border: 1px solid rgba(201,168,76,0.25); border-radius: 2px;
  pointer-events: none;
}
.about-image-corner {
  position: absolute; width: 20px; height: 20px;
  border-color: var(--gold); border-style: solid; opacity: 0.5;
}
.about-image-corner--tl { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
.about-image-corner--br { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; }
.about-eyebrow {
  display: block; font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); opacity: 0.7; margin-bottom: 10px;
}
.about-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 4px; }
.about-subtitle {
  color: var(--gold-light); font-family: var(--font-body); font-style: italic;
  font-size: 1rem; letter-spacing: 0.5px; margin-bottom: 24px;
}
.about-divider {
  width: 56px; height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  margin-bottom: 22px;
}
.about-text { color: var(--text-muted); line-height: 1.85; margin-bottom: 18px; }
.about-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.about-badge {
  font-size: 0.75rem; color: var(--gold-light);
  border: 1px solid rgba(201,168,76,0.22); border-radius: 20px;
  padding: 5px 14px; background: rgba(201,168,76,0.04);
  letter-spacing: 0.5px;
}

/* ===== TESTIMONIALS – MARQUEE ===== */
.testimonials-section {
  background: var(--bg-dark);
  padding: 64px 0 52px;
  overflow: hidden;
}
.testimonials-header { text-align: center; margin-bottom: 44px; }
.testimonials-deco { color: var(--gold); letter-spacing: 10px; font-size: 0.8rem; margin-bottom: 12px; opacity: 0.5; }
.testimonials-subtitle { color: var(--text-muted); font-size: 0.9rem; margin-top: 6px; }

/* Track wrapper — clips & adds edge fade */
.tm-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
}
.tm-wrap:hover .tm-track { animation-play-state: paused; }

/* Scrolling track */
.tm-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
}
@keyframes tm-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tm-track--left { animation: tm-left 38s linear infinite; }

/* Individual card */
.tm-card {
  width: 272px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.25s, box-shadow 0.25s;
  cursor: default;
}
.tm-card:hover {
  border-color: rgba(201,168,76,0.35);
  box-shadow: 0 6px 24px rgba(201,168,76,0.07);
}
.tm-stars { font-size: 0.78rem; letter-spacing: 1px; }
.tm-text {
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-muted);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tm-footer {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.tm-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #1a1200, #2a2000);
  border: 1px solid rgba(201,168,76,0.25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 0.78rem; color: var(--gold);
}
.tm-name { display: block; font-size: 0.78rem; color: var(--text); font-weight: 600; }
.tm-date { display: block; font-size: 0.68rem; color: var(--text-dim); margin-top: 1px; }
.testimonials-cta { text-align: center; margin-top: 40px; }

/* ===== GUESTBOOK PAGE ===== */
.gb-page { padding-bottom: 80px; }
.gb-stats-bar {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  padding: 32px 0 48px; flex-wrap: wrap;
}
.gb-stat { text-align: center; }
.gb-stat-num {
  display: block; font-family: var(--font-heading);
  font-size: 2.2rem; color: var(--gold); line-height: 1;
}
.gb-stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; }
.gb-stat-sep { color: var(--gold); opacity: 0.3; font-size: 0.7rem; }
.gb-masonry {
  columns: 3; column-gap: 20px;
  padding-bottom: 48px;
}
@media (max-width: 900px) { .gb-masonry { columns: 2; } }
@media (max-width: 560px) { .gb-masonry { columns: 1; } }
.gb-card {
  break-inside: avoid; margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px 18px;
  position: relative; overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}
.gb-card:hover {
  border-color: rgba(201,168,76,0.3);
  transform: translateY(-3px);
}
.gb-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gb-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #1a1200, #252525);
  border: 1px solid rgba(201,168,76,0.25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 0.9rem; color: var(--gold);
}
.gb-card-meta { flex: 1; min-width: 0; }
.gb-name { font-size: 0.88rem; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-date { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }
.gb-stars { font-size: 0.8rem; flex-shrink: 0; }
.gb-quote-mark {
  font-family: Georgia, serif; font-size: 4.5rem; line-height: 0.7;
  color: var(--gold); opacity: 0.1;
  position: absolute; top: 52px; left: 14px;
  pointer-events: none; user-select: none;
}
.gb-content {
  font-size: 0.875rem; color: var(--text-muted);
  line-height: 1.8; font-style: italic; position: relative;
}
.gb-page-cta {
  text-align: center; padding: 32px 0 0;
  border-top: 1px solid var(--border);
}
.gb-cta-text { color: var(--text-muted); margin-bottom: 20px; font-size: 0.95rem; }

/* ===== SERVICES GRID (Homepage) ===== */
.services-section { background: var(--bg-card); }
.services-header { text-align: center; margin-bottom: 48px; }
.services-deco { color: var(--gold); letter-spacing: 10px; font-size: 0.85rem; margin-bottom: 12px; opacity: 0.6; }
.services-subtitle { color: var(--text-muted); margin-top: -24px; font-size: 1rem; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }
.service-card {
  position: relative;
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  display: block;
}
.service-card:hover {
  border-color: var(--gold); transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(201,168,76,0.12);
}
.service-card-featured {
  border-color: var(--border-gold);
  background: linear-gradient(135deg, #111 60%, #1a1200 100%);
}
.service-card-badge {
  position: absolute; top: 14px; right: 14px;
  background: var(--gold); color: #000;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 10px; text-transform: uppercase;
}
.service-card-inner { padding: 32px 28px; }
/* Thumbnail image at the top of a service card */
.service-card-thumb {
  position: relative; width: 100%; height: 180px; overflow: hidden;
}
.service-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.service-card:hover .service-card-thumb img { transform: scale(1.06); }
.service-card-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(8,8,8,0.85) 100%);
}
/* When a thumb is present, reduce inner padding slightly */
.service-card-thumb + .service-card-inner { padding: 18px 24px 24px; }
.service-icon {
  font-size: 1.8rem; color: var(--gold); margin-bottom: 16px;
  display: block; opacity: 0.7;
}
.service-name {
  font-family: var(--font-heading); font-size: 1.2rem;
  color: var(--text); margin-bottom: 10px;
}
.service-desc { color: var(--text-muted); font-size: 0.88rem; line-height: 1.7; margin-bottom: 20px; }
.service-link {
  color: var(--gold); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.5px; transition: letter-spacing 0.2s;
}
.service-card:hover .service-link { letter-spacing: 1.5px; }
.services-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

/* Desktop: full-width image gallery */
@media (min-width: 900px) {
  .services-grid {
    display: flex;
    flex-direction: row;
    height: 460px;
    gap: 0;
  }
  .service-card {
    flex: 1;
    min-width: 0;
    border-radius: 0;
    border: none;
    border-right: 2px solid #080808;
  }
  .service-card:last-child { border-right: none; }
  .service-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
  }
  /* Gold bar slides in from center on hover */
  .service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-light) 50%, var(--gold) 75%, transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s ease;
    z-index: 3;
  }
  .service-card:hover::before { transform: scaleX(1); }
  /* Image fills entire card */
  .service-card-thumb {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
  }
  .service-card-thumb-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.04) 100%);
    transition: background .4s;
  }
  .service-card:hover .service-card-thumb-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.08) 100%);
  }
  /* Text overlaid at bottom */
  .service-card-inner,
  .service-card-thumb + .service-card-inner {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 24px 28px 32px;
    z-index: 2;
    background: transparent;
  }
  .service-card .service-name { font-size: 1.3rem; }
  /* Desc hidden by default, slides up on hover */
  .service-card .service-desc {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0;
    transition: max-height .35s ease, opacity .35s ease, margin-bottom .35s;
  }
  .service-card:hover .service-desc {
    max-height: 120px;
    opacity: 1;
    margin-bottom: 14px;
  }
  /* No-image fallback: flex-end layout */
  .service-card:not(:has(.service-card-thumb)) .service-card-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 28px 32px;
  }
}

/* ===== TRUST BAR ===== */
.trust-bar { background: var(--bg-card2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 20px 0; }
.trust-bar-inner { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); }
.trust-icon { color: var(--gold); font-size: 0.9rem; }

/* ===== CTA SECTION — FULL WIDTH DELUXE ===== */
.cta-fullwidth {
  position: relative;
  padding: 110px 24px 100px;
  text-align: center;
  overflow: hidden;
  background: #050505;
  isolation: isolate;
}
/* Bottom radial gold glow */
.cta-fullwidth::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 110%, rgba(201,168,76,.13) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 15% 50%, rgba(201,168,76,.06) 0%, transparent 70%),
    radial-gradient(ellipse 45% 50% at 85% 50%, rgba(201,168,76,.06) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
/* Sweeping light shimmer */
.cta-fullwidth::after {
  content: '';
  position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.028) 50%, transparent 100%);
  animation: cta-sweep 8s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
@keyframes cta-sweep {
  0%   { left: -80%; }
  100% { left: 180%; }
}
/* Top & bottom engraved gold lines */
.cta-rule {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,.25) 10%,
    rgba(201,168,76,.65) 35%,
    rgba(232,201,110,.8) 50%,
    rgba(201,168,76,.65) 65%,
    rgba(201,168,76,.25) 90%,
    transparent 100%);
}
.cta-rule--top    { top: 0; }
.cta-rule--bottom { bottom: 0; }
/* Floating Unicode particles — purely decorative, aria-hidden */
.cta-fp {
  position: absolute;
  color: rgba(201,168,76,.18);
  pointer-events: none;
  user-select: none;
  animation: cta-float linear infinite;
}
@keyframes cta-float {
  0%   { transform: translateY(0) rotate(0deg) scale(.9); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: .55; }
  100% { transform: translateY(-130px) rotate(380deg) scale(1.1); opacity: 0; }
}
/* Inner content */
.cta-inner {
  position: relative; z-index: 1;
  max-width: 780px; margin: 0 auto;
}
.cta-eyebrow {
  font-family: var(--font-heading);
  font-size: .68rem; letter-spacing: 5px; text-transform: uppercase;
  color: rgba(201,168,76,.65); margin-bottom: 22px;
  animation: cta-rise .8s ease both;
}
.cta-h {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: 1.15; color: var(--text);
  margin-bottom: 18px;
  animation: cta-rise .85s .08s ease both;
}
.cta-h em {
  font-style: normal;
  background: linear-gradient(135deg, #a07830 0%, #c9a84c 20%, #f0d070 50%, #c9a84c 75%, #a07830 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: cta-goldmove 5s ease-in-out infinite;
}
@keyframes cta-goldmove {
  0%, 100% { background-position: 0% 0%; }
  50%       { background-position: 100% 0%; }
}
.cta-lead {
  font-size: 1.05rem; color: var(--text-muted); line-height: 1.75;
  margin-bottom: 30px;
  animation: cta-rise 1s .18s ease both;
}
.cta-lead strong { color: var(--text); font-weight: 600; }
.cta-chips {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 42px;
  animation: cta-rise 1s .26s ease both;
}
.cta-chip {
  padding: 7px 16px;
  border: 1px solid rgba(201,168,76,.28);
  border-radius: 2px;
  font-size: .78rem; letter-spacing: .5px;
  color: rgba(201,168,76,.65);
  background: rgba(201,168,76,.04);
  white-space: nowrap;
}
.cta-btns {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  animation: cta-rise 1s .34s ease both;
}
/* ── Gold shimmer button ── */
.btn-cta-primary {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 40px;
  background: linear-gradient(130deg, #8a6010 0%, #c9a84c 30%, #f0d070 55%, #c9a84c 75%, #8a6010 100%);
  background-size: 250% 100%;
  color: #0c0800;
  font-family: var(--font-heading); font-size: .95rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  border-radius: 3px; text-decoration: none; overflow: hidden;
  box-shadow: 0 4px 28px rgba(201,168,76,.4), inset 0 1px 0 rgba(255,255,255,.18);
  animation: cta-goldmove 5s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .25s ease;
}
.btn-cta-primary::before {
  content: '';
  position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  animation: btn-sweep 3.8s ease-in-out infinite;
}
@keyframes btn-sweep {
  0%   { left: -80%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
.btn-cta-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 40px rgba(201,168,76,.6), inset 0 1px 0 rgba(255,255,255,.22);
  color: #0c0800;
}
.btn-cta-primary .cta-arrow { display: inline-block; transition: transform .2s; }
.btn-cta-primary:hover .cta-arrow { transform: translateX(5px); }
/* ── Outline button ── */
.btn-cta-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 40px;
  border: 1px solid rgba(201,168,76,.42); border-radius: 3px;
  background: transparent;
  color: var(--gold); text-decoration: none; cursor: pointer;
  font-family: var(--font-heading); font-size: .95rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  transition: border-color .25s, color .25s, background .25s, transform .2s;
}
.btn-cta-secondary:hover {
  border-color: var(--gold); background: rgba(201,168,76,.07);
  color: var(--gold-light); transform: translateY(-3px);
}
@keyframes cta-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== DIVIDERS ===== */
.divider-mystik { text-align: center; padding: 32px 0; color: var(--gold); font-size: 1.2rem; letter-spacing: 16px; opacity: 0.5; }

/* ===== SECTIONS ===== */
.section { padding: 64px 0; }
.section-dark { background: var(--bg-card); }
.section-title { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--text); text-align: center; margin-bottom: 40px; position: relative; }
.section-title::after { content: ''; display: block; width: 48px; height: 2px; background: var(--gold); margin: 12px auto 0; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.section-header .section-title { margin-bottom: 0; }
.section-header .section-title::after { display: none; }
.section-link { color: var(--gold); font-size: 0.9rem; }
.badge-sale { background: var(--red); color: #fff; padding: 2px 8px; border-radius: 2px; font-size: 0.75rem; font-weight: 700; }

/* ===== PRODUCT GRID ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.product-grid-featured { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ===== PRODUCT CARD ===== */
.product-card {
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: all 0.3s; display: flex; flex-direction: column;
}
.product-card:hover { border-color: var(--border-gold); transform: translateY(-4px); box-shadow: 0 8px 32px rgba(201,168,76,0.1); }
.product-card-link { text-decoration: none; color: inherit; flex: 1; display: flex; flex-direction: column; }
.product-card-img { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-input); }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 2rem; opacity: 0.3; }
.badge { position: absolute; top: 8px; padding: 3px 8px; font-size: 0.7rem; font-weight: 700; border-radius: 2px; }
.badge-new { left: 8px; background: var(--gold); color: #000; }
.badge-sale { right: 8px; background: var(--red); color: #fff; }
.product-card-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.product-category { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.product-name { font-family: var(--font-heading); font-size: 0.95rem; color: var(--text); }
.product-desc { font-size: 0.82rem; color: var(--text-muted); flex: 1; }
.product-price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.price { color: var(--gold); font-weight: 700; font-size: 1rem; }
.price-original { color: var(--text-dim); text-decoration: line-through; font-size: 0.85rem; }
.price-sale { color: var(--gold); font-weight: 700; }
.installment-badge { font-size: 0.65rem; background: rgba(201,168,76,0.1); border: 1px solid var(--border-gold); color: var(--gold); padding: 2px 6px; border-radius: 2px; }
.product-card-action { padding: 12px; padding-top: 0; }

/* ===== FEATURES GRID ===== */
.features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; justify-items: center; max-width: 960px; margin: 0 auto; }
.features-grid .feature-card { width: 100%; }
.feature-card { text-align: center; padding: 32px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card2); transition: border-color 0.2s; }
.feature-card:hover { border-color: var(--border-gold); }
.feature-icon { font-size: 1.8rem; color: var(--gold); margin-bottom: 16px; }
.feature-card h3 { font-size: 1rem; margin-bottom: 8px; }
.feature-card p { font-size: 0.85rem; color: var(--text-muted); }

/* ===== REVIEWS ===== */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.review-card { background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.review-stars, .review-stars-sm { color: var(--text-dim); }
.star-filled { color: var(--gold); }
.star-empty { color: var(--border); }
.review-text { font-style: italic; margin: 12px 0; font-size: 0.9rem; color: var(--text-muted); }
.review-author { font-size: 0.8rem; color: var(--gold); }

/* ===== SHOP LAYOUT ===== */
.shop-layout { display: flex; gap: 32px; padding: 40px 0; align-items: flex-start; }
.shop-filters { width: 240px; flex-shrink: 0; position: sticky; top: calc(var(--nav-height) + 16px); }
.shop-products { flex: 1; min-width: 0; }
.filter-title { font-family: var(--font-heading); font-size: 1.1rem; margin-bottom: 20px; color: var(--gold); }
.filter-group { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.filter-label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; }
.filter-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; padding: 4px 0; color: var(--text-muted); }
.filter-checkbox:hover { color: var(--text); }
.filter-checkbox input[type="radio"], .filter-checkbox input[type="checkbox"] { accent-color: var(--gold); }
.price-range-inputs { display: flex; align-items: center; gap: 6px; }
.price-range-inputs .form-input-sm { flex: 1; min-width: 0; width: 0; }
.price-range-inputs span { color: var(--text-dim); flex-shrink: 0; }
.shop-header { margin-bottom: 20px; }
.products-count { color: var(--text-muted); font-size: 0.9rem; }
.search-input-wrap { display: flex; gap: 8px; }
.search-btn {
  background: var(--gold); border: none; color: #000;
  padding: 0 14px; border-radius: var(--radius); cursor: pointer;
  font-size: 0.95rem; flex-shrink: 0; transition: background 0.2s;
}
.search-btn:hover { background: var(--gold-light); }
.filter-toggle-mobile {
  display: none; background: var(--bg-card); border: 1px solid var(--border-gold);
  color: var(--gold); padding: 6px 14px; border-radius: var(--radius);
  font-size: 0.82rem; letter-spacing: 0.5px; cursor: pointer; font-family: var(--font-body);
  transition: background 0.2s;
}
.filter-toggle-mobile:hover { background: rgba(201,168,76,0.08); }
.filter-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.filter-title { margin-bottom: 0; }
.filter-clear-link { display: block; font-size: 0.8rem; color: var(--text-dim); margin-top: 6px; }

/* Search autocomplete */
.search-autocomplete-wrap { position: relative; flex-wrap: wrap; }
.search-autocomplete-wrap .form-input { flex: 1; }
.search-suggestions {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-card); border: 1px solid var(--border-gold);
  border-radius: var(--radius); overflow: hidden; z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.search-suggestions.open { display: block; }
.search-suggestion-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; text-decoration: none; color: var(--text);
  transition: background 0.15s; border-bottom: 1px solid var(--border);
}
.search-suggestion-item:last-child { border-bottom: none; }
.search-suggestion-item:hover, .search-suggestion-item.focused { background: rgba(201,168,76,0.07); }
.sug-img {
  width: 36px; height: 36px; border-radius: 4px; object-fit: cover;
  background: var(--bg-input); flex-shrink: 0;
}
.sug-img-placeholder {
  width: 36px; height: 36px; border-radius: 4px; background: var(--bg-input);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 0.8rem; opacity: 0.4;
}
.sug-info { flex: 1; min-width: 0; }
.sug-name { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-meta { font-size: 0.75rem; color: var(--text-muted); }
.sug-price { font-size: 0.82rem; color: var(--gold); flex-shrink: 0; font-family: var(--font-heading); }
.sug-price-sale { text-decoration: line-through; color: var(--text-dim); font-size: 0.72rem; margin-right: 4px; }
.search-suggestions-empty { padding: 14px 12px; font-size: 0.85rem; color: var(--text-dim); text-align: center; }
.search-suggestions mark { background: none; color: var(--gold); font-weight: 700; }

@media (max-width: 767px) {
  .shop-layout { flex-direction: column; padding: 16px 0; gap: 16px; }
  .shop-filters { width: 100%; position: static; }
  .filter-toggle-mobile { display: inline-flex; align-items: center; gap: 6px; }
  .filter-body { display: none; }
  .filter-body.open { display: block; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-card-body { padding: 9px 10px; gap: 4px; }
  .product-name { font-size: 0.82rem; line-height: 1.3; }
  .product-desc { display: none; }
  .product-price-row { gap: 4px; }
  .price, .price-sale { font-size: 0.88rem; }
  .price-original { font-size: 0.75rem; }
  .installment-badge { display: none; }
  .product-card-action { padding: 8px; padding-top: 0; }
  .product-card-action .btn { font-size: 0.75rem; padding: 6px 10px; }
  .shop-header { margin-bottom: 12px; }
}

/* ===== FORMS ===== */
.form-input, .form-textarea {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius); padding: 10px 14px;
  font-size: 0.9rem; font-family: var(--font-body); transition: border-color 0.2s;
}
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--gold); }
.form-input-sm { padding: 6px 10px; font-size: 0.85rem; width: auto; }
.form-label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.form-group { margin-bottom: 16px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.form-group-full { grid-column: 1 / -1; }
.form-section-title { font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 12px; border-top: 1px solid var(--border); padding-top: 16px; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.form-hint { font-size: 0.8rem; color: var(--text-dim); margin-top: 4px; }
.toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; }
.toggle-label input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; }
.password-input-wrap { position: relative; }
.password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1rem; opacity: 0.5; }
@media (max-width: 600px) {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .form-group-full { grid-column: 1; }
}

/* ===== AUTH PAGES ===== */
.auth-page { display: flex; justify-content: center; padding: 60px 16px; min-height: 70vh; align-items: center; }
.auth-card { width: 100%; max-width: 440px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 32px; }
.auth-symbol { text-align: center; font-size: 1.5rem; color: var(--gold); margin-bottom: 12px; }
.auth-title { font-size: 1.6rem; text-align: center; margin-bottom: 28px; }
.auth-form { display: flex; flex-direction: column; }
.auth-links { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--text-muted); }

/* ===== CHECKOUT ===== */
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; padding: 40px 0; align-items: flex-start; }
.checkout-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; }
.checkout-section-title { font-size: 1.1rem; margin-bottom: 20px; }
.payment-info-box { background: var(--bg-input); border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 16px; }
.payment-info-paypal { border-color: #0070ba; }
.payment-methods-select { display: flex; flex-direction: column; gap: 12px; }
.payment-method-option { cursor: pointer; }
.payment-method-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.payment-method-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-input); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  transition: border-color 0.2s, background 0.2s;
}
.payment-method-option input[type="radio"]:checked + .payment-method-card {
  border-color: var(--gold); background: rgba(201,168,76,0.06);
}
.payment-method-card:hover { border-color: rgba(201,168,76,0.5); }
.payment-method-icon { font-size: 1.6rem; line-height: 1; }
.payment-method-card strong { display: block; font-size: 0.95rem; }
.payment-method-card p { font-size: 0.8rem; color: var(--text-muted); margin: 2px 0 0; }
.paypal-payment-block { margin-top: 12px; }
.bank-details { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.bank-detail-row { display: flex; justify-content: space-between; font-size: 0.9rem; }
.bank-detail-row.highlight { background: rgba(201,168,76,0.08); padding: 6px 10px; border-radius: var(--radius); }
.payment-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
.checkout-summary { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: calc(var(--nav-height) + 16px); }
.checkout-summary-title { font-size: 1.1rem; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.checkout-summary-item { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 6px 0; }
.checkout-item-name { flex: 1; padding-right: 12px; color: var(--text-muted); }
.checkout-summary-divider { border-top: 1px solid var(--border); margin: 12px 0; }
.checkout-summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.9rem; }
.checkout-summary-total { font-size: 1.1rem; font-weight: 700; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; }
.checkout-legal { font-size: 0.75rem; color: var(--text-dim); text-align: center; margin-top: 12px; }
.installment-option { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.installment-detail-block { margin-top: 16px; }
.installment-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } }

/* ===== CART ===== */
.cart-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; padding: 40px 0; align-items: flex-start; }
.cart-item { display: grid; grid-template-columns: 64px 1fr auto auto auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cart-item-img img, .cart-img-placeholder { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); background: var(--bg-input); display: flex; align-items: center; justify-content: center; }
.cart-item-name { color: var(--text); font-size: 0.9rem; display: block; margin-bottom: 4px; }
.cart-item-price { font-size: 0.85rem; color: var(--text-muted); }
.installment-badge-sm { font-size: 0.65rem; color: var(--gold); }
.qty-input { width: 60px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); text-align: center; padding: 6px; border-radius: var(--radius); font-size: 0.9rem; }
.cart-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; }
.cart-remove:hover { color: var(--red); }
.cart-actions { padding: 16px 0; }
.cart-summary { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: calc(var(--nav-height) + 16px); }
@media (max-width: 767px) {
  .cart-summary { position: static; margin-bottom: 56px; }
}
.cart-summary-title { font-size: 1.1rem; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.cart-summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.9rem; }
.cart-summary-total { font-size: 1.1rem; font-weight: 700; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; }
.cart-trust { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; font-size: 0.8rem; color: var(--text-muted); }
@media (max-width: 767px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 56px 1fr; }
}

/* ===== PAGE HEADERS ===== */
.page-title { font-size: clamp(1.5rem, 4vw, 2.5rem); margin: 40px 0 32px; }
.page-header-centered { text-align: center; padding: 60px 0 40px; }
.page-symbol { font-size: 1.5rem; color: var(--gold); margin-bottom: 16px; letter-spacing: 8px; }
.page-subtitle { color: var(--text-muted); font-size: 1.1rem; font-style: italic; margin-top: 8px; }

/* ===== BREADCRUMB ===== */
.breadcrumb { display: flex; gap: 8px; align-items: center; padding: 20px 0; font-size: 0.85rem; color: var(--text-muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span:last-child { color: var(--text); }

/* ===== PRODUCT DETAIL ===== */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 24px 0 48px; align-items: flex-start; }
.gallery-main { aspect-ratio: 1; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--gold); opacity: 0.2; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); border: 2px solid var(--border); cursor: pointer; transition: border-color 0.2s; }
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--gold); }
.product-category-badge { font-size: 0.75rem; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
.product-title { font-size: clamp(1.3rem, 3vw, 2rem); margin: 12px 0; }
.rating-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.rating-count { font-size: 0.85rem; color: var(--text-muted); }
.product-price-block { margin: 20px 0; }
.price-original-lg { color: var(--text-dim); text-decoration: line-through; font-size: 1rem; margin-right: 12px; }
.price-sale-lg { color: var(--gold); font-size: 2rem; font-weight: 700; }
.price-lg { color: var(--gold); font-size: 2rem; font-weight: 700; }
.discount-pct { background: var(--red); color: #fff; font-size: 0.8rem; padding: 2px 8px; border-radius: 2px; font-weight: 700; }
.installment-info { background: rgba(201,168,76,0.06); border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 10px 14px; font-size: 0.9rem; margin: 16px 0; }
.product-short-desc { color: var(--text-muted); font-size: 0.95rem; margin: 16px 0; line-height: 1.7; }
.stock-info { margin: 12px 0; font-size: 0.85rem; }
.in-stock { color: var(--green); }
.low-stock { color: #ff9800; }
.out-of-stock { color: var(--red); }
.add-to-cart-form { margin-top: 20px; }
.qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.qty-control { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.qty-control button { background: var(--bg-input); border: none; color: var(--text); padding: 8px 14px; cursor: pointer; font-size: 1.1rem; }
.qty-control input { width: 50px; text-align: center; background: transparent; border: none; color: var(--text); padding: 8px; font-size: 0.95rem; }
.product-description { padding: 48px 0; border-top: 1px solid var(--border); }
.description-content { color: var(--text-muted); line-height: 1.9; max-width: 720px; }
@media (max-width: 767px) { .product-detail { grid-template-columns: 1fr; } }

/* ===== REVIEWS ===== */
.product-reviews { padding: 48px 0; border-top: 1px solid var(--border); }
.review-form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 32px; }
.star-rating-input { display: flex; flex-direction: row-reverse; gap: 4px; margin-bottom: 16px; }
.star-rating-input input { display: none; }
.star-rating-input label { font-size: 1.8rem; color: var(--border); cursor: pointer; transition: color 0.1s; }
.star-rating-input input:checked ~ label, .star-rating-input label:hover, .star-rating-input label:hover ~ label { color: var(--gold); }
.reviews-list { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.review-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.review-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.review-author-name { font-weight: 700; font-size: 0.9rem; }
.review-date { color: var(--text-muted); font-size: 0.8rem; margin-left: auto; }
.review-title { font-size: 1rem; margin-bottom: 6px; }
.review-content { color: var(--text-muted); font-size: 0.9rem; }
.no-reviews { color: var(--text-muted); font-style: italic; }
.info-box { background: rgba(112,144,224,0.08); border: 1px solid rgba(112,144,224,0.2); border-radius: var(--radius); padding: 12px 16px; font-size: 0.9rem; color: #7090e0; margin: 16px 0; }
.opening-hours-list { margin: 8px 0 0 0; padding-left: 18px; }
.opening-hours-list li { margin: 3px 0; }

/* ===== BLOG ===== */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.blog-grid-home { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.blog-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.2s; display: flex; flex-direction: column; }
.blog-card:hover { border-color: var(--border-gold); transform: translateY(-4px); }
.blog-card-img { display: block; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, #111 0%, #1a1200 100%); flex-shrink: 0; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.8rem; opacity: 0.25; }
.blog-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; display: flex; gap: 12px; flex-wrap: wrap; }
.blog-title { font-size: 1.05rem; margin-bottom: 8px; line-height: 1.4; }
.blog-title a { color: var(--text); }
.blog-title a:hover { color: var(--gold); }
.blog-excerpt { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.6; flex: 1; }
.blog-read-more { color: var(--gold); font-size: 0.82rem; margin-top: auto; }
.blog-post-cover { margin-bottom: 28px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; }
.blog-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-post { max-width: 800px; margin: 0 auto; padding: 40px 0 60px; }
.blog-post-header { text-align: center; padding: 40px 0; border-bottom: 1px solid var(--border); margin-bottom: 40px; }
.blog-post-symbol { font-size: 1.5rem; color: var(--gold); margin-bottom: 20px; letter-spacing: 8px; opacity: 0.5; }
.blog-post-title { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 16px; }
.blog-post-meta { color: var(--text-muted); font-size: 0.9rem; display: flex; justify-content: center; gap: 16px; }
.blog-post-content { color: var(--text-muted); line-height: 1.9; font-size: 1rem; }
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3 { font-family: 'Cinzel', serif; color: var(--gold); margin: 1.5em 0 0.5em; }
.blog-post-content h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.blog-post-content h2 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
.blog-post-content h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--gold-light, #e8c96e); }
.blog-post-content p { margin-bottom: 1em; }
.blog-post-content ul,
.blog-post-content ol { padding-left: 1.6em; margin-bottom: 1em; }
.blog-post-content li { margin-bottom: 0.3em; }
.blog-post-content blockquote {
  border-left: 3px solid var(--gold); padding-left: 1em;
  margin: 1.2em 0; color: var(--text-dim); font-style: italic;
}
.blog-post-content a { color: var(--gold); text-decoration: underline; }
.blog-post-content strong { color: var(--text); }
.blog-post-content pre { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 12px; overflow-x: auto; margin-bottom: 1em; }
.blog-comments-section { border-top: 1px solid var(--border); padding-top: 48px; margin-top: 48px; max-width: 800px; margin-left: auto; margin-right: auto; }
.comments-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.comment-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.comment-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.comment-date { font-size: 0.8rem; color: var(--text-dim); margin-left: auto; }
.comment-body { color: var(--text-muted); font-size: 0.9rem; }
.comment-form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-top: 24px; }
.no-comments { color: var(--text-muted); font-style: italic; }

/* ===== GUESTBOOK ===== */
.guestbook-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.guestbook-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.guestbook-stars { font-size: 1.2rem; margin-bottom: 12px; }
.guestbook-content { font-style: italic; color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 16px; }
.guestbook-author { font-size: 0.85rem; color: var(--text-dim); display: flex; justify-content: space-between; }
.guestbook-date { font-size: 0.8rem; }

/* ===== ACCOUNT ===== */
.account-layout { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding-bottom: 60px; }
.account-sidebar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; height: fit-content; position: sticky; top: calc(var(--nav-height) + 16px); }
.account-nav { display: flex; flex-direction: column; }
.account-nav-link { color: var(--text-muted); padding: 10px 14px; border-radius: var(--radius); font-size: 0.9rem; transition: all 0.2s; }
.account-nav-link:hover, .account-nav-link.active { color: var(--gold); background: rgba(201,168,76,0.08); }
.account-nav-logout { color: var(--text-dim); margin-top: 8px; border-top: 1px solid var(--border); padding-top: 16px; }
.account-content { min-width: 0; }
.account-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; }
.account-card-title { font-size: 1.1rem; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.account-info-row { display: flex; flex-wrap: wrap; gap: 12px; }
.info-pill { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 0.85rem; }
@media (max-width: 767px) { .account-layout { grid-template-columns: 1fr; } .account-sidebar { position: static; } }

/* ===== ORDERS ===== */
.order-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 20px; overflow: hidden; }
.order-card-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--bg-card2); flex-wrap: wrap; gap: 8px; }
.order-invoice { font-family: var(--font-heading); font-size: 0.9rem; color: var(--gold); }
.order-date { font-size: 0.8rem; color: var(--text-muted); margin-left: 10px; }
.order-items-list { padding: 16px 20px; }
.order-item-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.9rem; border-bottom: 1px solid var(--border); }
.order-card-footer { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 20px; background: var(--bg-card2); }
.order-total { font-size: 0.95rem; }
.status-badge { padding: 3px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.status-pending { background: rgba(255,152,0,0.1); color: #ff9800; border: 1px solid rgba(255,152,0,0.2); }
.status-processing { background: rgba(112,144,224,0.1); color: #7090e0; border: 1px solid rgba(112,144,224,0.2); }
.status-shipped { background: rgba(201,168,76,0.1); color: var(--gold); border: 1px solid var(--border-gold); }
.status-delivered { background: rgba(76,175,80,0.1); color: #4caf50; border: 1px solid rgba(76,175,80,0.2); }
.status-cancelled { background: rgba(229,57,53,0.1); color: #e53935; border: 1px solid rgba(229,57,53,0.2); }

/* ===== TICKETS ===== */
.tickets-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.support-status { font-size: 0.85rem; }
.support-status.open { color: var(--green); }
.support-status.closed { color: var(--red); }
.ticket-card-link { text-decoration: none; color: inherit; }
.ticket-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px; transition: border-color 0.2s; }
.ticket-card:hover { border-color: var(--border-gold); }
.ticket-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ticket-id { color: var(--gold); font-family: var(--font-heading); font-size: 0.85rem; }
.ticket-subject { flex: 1; font-size: 0.95rem; }
.ticket-status { padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; }
.ticket-status-open { background: rgba(76,175,80,0.1); color: var(--green); border: 1px solid rgba(76,175,80,0.2); }
.ticket-status-pending { background: rgba(255,152,0,0.1); color: #ff9800; border: 1px solid rgba(255,152,0,0.2); }
.ticket-status-closed { background: rgba(100,100,100,0.1); color: var(--text-dim); border: 1px solid var(--border); }
.ticket-meta { font-size: 0.8rem; color: var(--text-dim); margin-top: 6px; }
.ticket-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.messages-thread { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; max-height: 560px; overflow-y: auto; padding-right: 4px; scroll-behavior: smooth; }
.message { max-width: 85%; border-radius: var(--radius-lg); padding: 16px 20px; }
.message-user { background: var(--bg-card); border: 1px solid var(--border); align-self: flex-start; }
.message-admin { background: rgba(201,168,76,0.06); border: 1px solid var(--border-gold); align-self: flex-end; }
.message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.85rem; flex-wrap: wrap; }
.msg-badge-admin { background: var(--gold); color: #000; font-size: 0.7rem; padding: 1px 6px; border-radius: 10px; }
.msg-badge-user { background: var(--border); color: var(--text-muted); font-size: 0.7rem; padding: 1px 6px; border-radius: 10px; }
.message-time { font-size: 0.75rem; color: var(--text-dim); margin-left: auto; }
.message-body { font-size: 0.9rem; color: var(--text-muted); }
.reply-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }

/* ===== CHECKOUT SUCCESS ===== */
.success-page { max-width: 600px; margin: 0 auto; padding: 60px 16px; text-align: center; }
.success-symbol { font-size: 3rem; color: var(--gold); margin-bottom: 24px; }
.success-title { font-size: 2rem; margin-bottom: 12px; }
.success-subtitle { color: var(--text-muted); margin-bottom: 32px; }
.success-order-info { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 32px; }
.success-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.payment-instructions { background: rgba(201,168,76,0.04); border: 1px solid var(--border-gold); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 32px; text-align: left; }
.payment-instructions h2 { margin-bottom: 12px; font-size: 1.1rem; }
.success-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ===== CHECKOUT AUTH ===== */
.checkout-auth-page { max-width: 700px; margin: 0 auto; padding: 60px 16px; text-align: center; }
.checkout-auth-info { color: var(--text-muted); margin-bottom: 40px; }
.checkout-auth-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-bottom: 40px; }
.checkout-auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.checkout-auth-card h2 { margin-bottom: 12px; }
.checkout-auth-card p { color: var(--text-muted); margin-bottom: 20px; font-size: 0.9rem; }
.checkout-auth-divider { color: var(--text-dim); font-size: 0.85rem; }
.cart-preview { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-align: left; }
.cart-preview h3 { margin-bottom: 12px; font-size: 1rem; }
.cart-preview-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.9rem; border-bottom: 1px solid var(--border); }
.cart-preview-total { padding-top: 12px; font-size: 1rem; }
@media (max-width: 600px) { .checkout-auth-grid { grid-template-columns: 1fr; } .checkout-auth-divider { display: none; } }

/* ===== EMPTY STATE / ERROR ===== */
.empty-state, .error-page { text-align: center; padding: 80px 24px; }
.empty-symbol, .error-symbol { font-size: 2.5rem; color: var(--gold); opacity: 0.3; margin-bottom: 20px; }
.error-page .error-symbol { opacity: 0.5; }
.empty-state h3, .error-title { font-size: 1.5rem; margin-bottom: 12px; }
.empty-state p, .error-message { color: var(--text-muted); margin-bottom: 24px; }
.error-actions { display: flex; gap: 12px; justify-content: center; }

/* ===== FOOTER ===== */
.footer { background: #000; border-top: 1px solid var(--border); padding: 60px 0 24px; margin-top: 80px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 40px; margin-bottom: 40px; }
.footer-title { font-family: var(--font-heading); font-size: 0.9rem; color: var(--gold); margin-bottom: 16px; letter-spacing: 1px; }
.footer-tagline { font-style: italic; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 8px; }
.footer-text { color: var(--text-dim); font-size: 0.82rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: var(--text-dim); font-size: 0.85rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-bottom p { color: var(--text-dim); font-size: 0.8rem; }
.footer-mystik { color: var(--gold); opacity: 0.3; letter-spacing: 8px; }
.footer-powered { width: 100%; text-align: center; margin-top: 4px; font-size: 0.72rem !important; opacity: 0.35; }
.footer-powered a { color: inherit; text-decoration: none; }
.footer-powered a:hover { opacity: 0.7; }
.footer-col--logo { display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; }
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; opacity: 0.75; transition: opacity 0.2s; }
.footer-brand:hover { opacity: 1; }
.footer-brand-wordmark { font-family: var(--font-heading); font-size: 0.7rem; color: var(--gold); letter-spacing: 3px; }

/* ===== SUCCESS/INFO BADGES ===== */
.success-badge { background: rgba(76,175,80,0.1); border: 1px solid rgba(76,175,80,0.2); color: #4caf50; border-radius: var(--radius); padding: 8px 14px; font-size: 0.85rem; margin-bottom: 16px; }
.gold-link { color: var(--gold); }

/* ===== MISC ===== */
.related-products { padding: 48px 0; border-top: 1px solid var(--border); }
.account-form { display: flex; flex-direction: column; }

/* ===== MM MONOGRAM LOGO ===== */
.brand-monogram {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  text-decoration: none;
}
.brand-monogram svg { display: block; }
.brand-wordmark {
  font-family: var(--font-heading); font-size: 0.55rem; color: var(--gold);
  letter-spacing: 4px; margin-top: -2px; opacity: 0.75;
}
.nav-brand:hover .brand-wordmark { opacity: 1; }

/* ===== NAV RITUAL LINK ===== */
.nav-link-ritual { }
.nav-link-ritual:hover, .nav-link-ritual.active { color: var(--gold); background: rgba(201,168,76,0.1); }

/* ===== PAGE HERO BANNER ===== */
.page-hero-banner {
  position: relative; min-height: 460px;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; background-attachment: fixed;
  overflow: hidden;
}
/* Smooth fade into the content section below */
.page-hero-banner::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg-dark) 100%);
  pointer-events: none; z-index: 3;
}
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
}
.page-hero-content {
  position: relative; z-index: 4; text-align: center;
  padding: 80px 24px 60px;
}
.page-hero-deco {
  color: var(--gold); font-size: 0.8rem; letter-spacing: 12px;
  margin-bottom: 16px; opacity: 0.7;
}
.page-hero-title {
  font-size: clamp(1.8rem, 5vw, 3.2rem); color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.8); margin-bottom: 12px;
}
.page-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255,255,255,0.8);
  font-style: italic; text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.page-title-bar {
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  padding: 48px 0 32px;
}
.page-title { font-size: clamp(1.5rem, 4vw, 2.5rem); color: var(--text); }

/* ===== RITUAL SHOWCASE (Homepage) ===== */
.ritual-showcase-section { background: var(--bg-dark); }
.ritual-showcase-header { text-align: center; margin-bottom: 48px; }
.ritual-showcase-deco { color: var(--gold); letter-spacing: 10px; font-size: 0.85rem; margin-bottom: 12px; opacity: 0.6; }
.ritual-showcase-subtitle { color: var(--text-muted); font-style: italic; font-size: 1rem; margin-top: -24px; }
.ritual-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.ritual-showcase-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: inherit; display: block;
  border: 1px solid var(--border);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.ritual-showcase-card:hover {
  border-color: var(--gold); transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(201,168,76,0.15);
}
.ritual-showcase-img {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--bg-input);
}
.ritual-showcase-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ritual-showcase-card:hover .ritual-showcase-img img { transform: scale(1.07); }
.ritual-showcase-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; color: var(--gold); font-size: 2.5rem; opacity: 0.3;
}
.ritual-showcase-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.85) 0%, transparent 60%);
}
.ritual-showcase-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 18px; z-index: 2;
}
.ritual-showcase-icon { color: var(--gold); font-size: 1rem; margin-bottom: 4px; opacity: 0.7; }
.ritual-showcase-name {
  font-family: var(--font-heading); font-size: 1.05rem; color: #fff;
  margin-bottom: 4px;
}
.ritual-showcase-desc { font-size: 0.78rem; color: rgba(255,255,255,0.7); margin-bottom: 10px; }
.ritual-showcase-cta {
  font-size: 0.75rem; color: var(--gold); letter-spacing: 0.5px;
  opacity: 0; transition: opacity 0.3s;
}
.ritual-showcase-card:hover .ritual-showcase-cta { opacity: 1; }

/* ===== RITUAL INDEX PAGE ===== */
.ritual-index-grid { display: flex; flex-direction: column; gap: 48px; }
.ritual-index-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.ritual-index-card:nth-child(even) .ritual-index-img { order: 2; }
.ritual-index-card:nth-child(even) .ritual-index-body { order: 1; }
.ritual-index-img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-input); }
.ritual-index-img img { width: 100%; height: 100%; object-fit: cover; }
.ritual-index-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; color: var(--gold); font-size: 3rem; opacity: 0.2;
}
.ritual-index-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.2); }
.ritual-index-num {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-heading); font-size: 2rem; color: var(--gold);
  opacity: 0.25; font-weight: 700; z-index: 2;
}
.ritual-index-body { padding: 32px; }
.ritual-index-name { font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: var(--text); margin-bottom: 12px; }
.ritual-index-desc { color: var(--text-muted); margin-bottom: 20px; line-height: 1.7; }
@media (max-width: 768px) {
  .ritual-index-card { grid-template-columns: 1fr; }
  .ritual-index-card:nth-child(even) .ritual-index-img,
  .ritual-index-card:nth-child(even) .ritual-index-body { order: unset; }
}

/* ===== RITUAL SERVICE PAGE ===== */
.ritual-service-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: flex-start; }
@media (max-width: 900px) { .ritual-service-layout { grid-template-columns: 1fr; } }
.ritual-service-header { margin-bottom: 32px; }
.ritual-service-title { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--text); margin-bottom: 12px; }
.ritual-service-lead { font-size: 1.1rem; color: var(--text-muted); font-style: italic; }
.ritual-service-img-wrap { margin-bottom: 32px; border-radius: var(--radius-lg); overflow: hidden; }
.ritual-service-img { width: 100%; max-height: 420px; object-fit: cover; }
.ritual-service-description { color: var(--text); line-height: 1.9; margin-bottom: 32px; font-size: 1rem; }
.ritual-seo-text { color: var(--text-muted); line-height: 1.8; font-size: 0.9rem; border-top: 1px solid var(--border); padding-top: 24px; }
.ritual-sidebar-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.ritual-sidebar-title { font-family: var(--font-heading); font-size: 1rem; color: var(--gold); margin-bottom: 12px; }
.ritual-sidebar-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ritual-sidebar-list a { color: var(--text-muted); font-size: 0.9rem; padding: 4px 0; border-bottom: 1px solid var(--border); display: block; transition: color 0.2s; }
.ritual-sidebar-list a:hover { color: var(--gold); }

/* ===== FAQ SECTION ===== */
.faq-section { background: var(--bg-darker, #050505); padding: 72px 0; }
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); transition: border-color 0.2s; }
.faq-item.open { border-color: var(--border-gold); }
.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; text-align: left;
  color: var(--text); font-family: var(--font-heading); font-size: 0.92rem; letter-spacing: 0.03em;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--gold); }

/* ===== CUSTOM CURSOR ===== */
@media (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * { cursor: none !important; }

  /* small rotating diamond as the precise tip */
  #cursor-dot {
    position: fixed; top: 0; left: 0;
    width: 7px; height: 7px;
    background: var(--gold-light);
    border-radius: 1px;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 0 7px 1px rgba(232,201,110,.88), 0 0 20px rgba(201,168,76,.4);
    transition: width .12s ease, height .12s ease, box-shadow .14s ease;
    will-change: transform;
  }
  /* soft radial glow that lazily trails behind — no hard ring */
  #cursor-ring {
    position: fixed; top: 0; left: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    background: radial-gradient(circle, rgba(201,168,76,.13) 0%, rgba(201,168,76,.04) 50%, transparent 70%);
    transition: width .2s ease, height .2s ease, background .2s ease;
    will-change: transform;
  }
  #cursor-dot.cursor-hover {
    width: 9px; height: 9px;
    background: #fff8e1;
    box-shadow: 0 0 10px 2px rgba(232,201,110,1), 0 0 28px rgba(201,168,76,.6), 0 0 50px rgba(201,168,76,.2);
  }
  #cursor-ring.cursor-hover {
    width: 40px; height: 40px;
    background: radial-gradient(circle, rgba(201,168,76,.2) 0%, rgba(201,168,76,.06) 50%, transparent 70%);
  }
}

/* ===== SECTION ORNAMENT ===== */
@keyframes sd-shimmer {
  0%, 100% { opacity: .35; text-shadow: none; }
  50% { opacity: .8; text-shadow: 0 0 12px rgba(201,168,76,.7), 0 0 24px rgba(201,168,76,.3); }
}
.section-ornament {
  text-align: center;
  padding-bottom: 1.5rem;
  font-size: .65rem;
  letter-spacing: 10px;
  color: var(--gold);
  user-select: none;
  pointer-events: none;
  animation: sd-shimmer 4s ease-in-out infinite;
}
.faq-item.open .faq-question { color: var(--gold); }
.faq-icon { font-size: 1.4rem; line-height: 1; color: var(--gold); flex-shrink: 0; margin-left: 16px; transition: transform 0.25s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 22px 18px; }
.faq-item.open .faq-answer { display: block; }
.faq-answer p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.75; margin: 0; }

/* ===== NEWS HOME SECTION ===== */
.news-home-section { background: var(--bg-dark); padding: 72px 0; }
.news-home-list { display: flex; flex-direction: column; gap: 2px; max-width: 860px; margin: 0 auto; }
.news-home-item {
  display: flex; align-items: center; gap: 18px; padding: 18px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--text); transition: all 0.2s;
}
.news-home-item:hover { border-color: var(--border-gold); transform: translateX(4px); }
.news-home-img { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-input); }
.news-home-img img { width: 100%; height: 100%; object-fit: cover; }
.news-home-img--placeholder { display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.6rem; opacity: 0.4; }
.news-home-body { flex: 1; min-width: 0; }
.news-home-date { font-size: 0.75rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }
.news-home-title { font-family: var(--font-heading); font-size: 0.95rem; color: var(--text); margin: 4px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-home-excerpt { font-size: 0.82rem; color: var(--text-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-home-arrow { color: var(--gold); font-size: 1rem; flex-shrink: 0; opacity: 0; transition: opacity 0.2s; }
.news-home-item:hover .news-home-arrow { opacity: 1; }
@media (max-width: 600px) {
  .news-home-img { width: 56px; height: 56px; }
  .news-home-title { font-size: 0.9rem; }
}

/* ===== COMMENT EDIT / DELETE ACTIONS ===== */
.comment-actions { display: flex; gap: 12px; margin-top: 8px; }
.btn-text-link { background: none; border: none; padding: 0; cursor: pointer; font-size: 0.82rem; color: var(--text-muted); text-decoration: underline; transition: color 0.2s; }
.btn-text-link:hover { color: var(--gold); }
.btn-text-link.btn-danger { color: #c0392b; }
.btn-text-link.btn-danger:hover { color: #e74c3c; }
.comment-edited { font-size: 0.75rem; color: var(--text-dim, #555); font-style: italic; }

/* ===== SHARE BAR ===== */
.share-bar { display: flex; align-items: center; gap: 8px; margin: 28px 0 8px; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.share-bar-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; white-space: nowrap; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); transition: all 0.18s; cursor: pointer; text-decoration: none; flex-shrink: 0; }
.share-btn svg { width: 16px; height: 16px; }
.share-btn:hover { transform: translateY(-2px); }
.share-fb { color: #1877f2; border-color: rgba(24,119,242,0.3); }
.share-fb:hover { background: rgba(24,119,242,0.12); border-color: #1877f2; color: #1877f2; }
.share-x { color: #e7e7e7; border-color: rgba(231,231,231,0.2); }
.share-x:hover { background: rgba(231,231,231,0.1); border-color: rgba(231,231,231,0.5); color: #fff; }
.share-wa { color: #25d366; border-color: rgba(37,211,102,0.3); }
.share-wa:hover { background: rgba(37,211,102,0.1); border-color: #25d366; color: #25d366; }
.share-tg { color: #2aabee; border-color: rgba(42,171,238,0.3); }
.share-tg:hover { background: rgba(42,171,238,0.1); border-color: #2aabee; color: #2aabee; }
.share-copy { color: var(--text-muted); }
.share-copy:hover { background: rgba(201,168,76,0.1); border-color: var(--border-gold); color: var(--gold); }
.share-copy--done { background: rgba(76,175,80,0.12) !important; border-color: #4caf50 !important; color: #4caf50 !important; }