/* ============================================================
   Crispo Homewear — tema brand
   Palette: navy (uomo/primario) · rosa malva (donna) · crema
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Jost:wght@300;400;500&display=swap');

:root {
  --cr-navy:       #223150;
  --cr-navy-dark:  #18233b;
  --cr-cream:      #ece0c9;
  --cr-cream-soft: #f7f1e6;
  --cr-rose:       #9e4a5c;
  --cr-rose-dark:  #843c4c;
  --cr-pink-bg:    #f5e8eb;
  --cr-ink:        #272727;

  --bs-body-font-family: 'Jost', system-ui, sans-serif;
  --bs-body-color: var(--cr-ink);
}

body { font-family: var(--bs-body-font-family); }

h1,h2,h3,.navbar-brand,.display-5,.display-6 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .01em;
}

/* --- Brand primario (navy) --------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--cr-navy);
  --bs-btn-border-color: var(--cr-navy);
  --bs-btn-hover-bg: var(--cr-navy-dark);
  --bs-btn-hover-border-color: var(--cr-navy-dark);
  --bs-btn-active-bg: var(--cr-navy-dark);
  --bs-btn-active-border-color: var(--cr-navy-dark);
}
a { color: var(--cr-navy); }
a:hover { color: var(--cr-navy-dark); }

/* --- Wordmark testuale (logo CRISPO) ----------------------------------- */
.brand-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cr-cream);
}
.brand-wordmark span {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: .62em;
  letter-spacing: .3em;
  opacity: .8;
}

/* --- Navbar pubblica ---------------------------------------------------- */
.navbar.bg-dark { background-color: var(--cr-navy) !important; }

/* --- Hero home --------------------------------------------------------- */
.hero-navy {
  background: linear-gradient(160deg, var(--cr-navy) 0%, var(--cr-navy-dark) 100%);
  color: var(--cr-cream-soft);
}
.hero-navy .lead { color: #d8dce6; }
.hero-logo-box {
  display:inline-block; border:2px solid var(--cr-cream);
  padding:1.1rem 2.2rem; color:var(--cr-cream);
}
.hero-logo-box .cr { font-family:'Cormorant Garamond',serif; font-size:2.6rem; letter-spacing:.3em; display:block; }
.hero-logo-box .hw { font-family:'Jost',sans-serif; font-weight:300; letter-spacing:.42em; font-size:.8rem; }

/* --- Sezioni donna / uomo ---------------------------------------------- */
.accent-rose { color: var(--cr-rose); }
.badge-woman { background: var(--cr-rose); }
.badge-man   { background: var(--cr-navy); }

/* ============================================================
   Area admin
   ============================================================ */
.admin-body { background: #f1f2f5; }
.admin-topbar { background: var(--cr-navy); }
.admin-topbar .nav-link { color: #cdd3e0; }
.admin-topbar .nav-link:hover, .admin-topbar .nav-link.active { color:#fff; }
.admin-topbar .brand-wordmark { font-size: 1.25rem; }

.stat-card { border:0; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .12s; }
.stat-card:hover { transform: translateY(-2px); }

.admin-login-wrap {
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, var(--cr-navy) 0%, var(--cr-navy-dark) 100%);
  padding: 1rem;
}
.admin-login-card {
  background:#fff; border-radius:10px; padding:2.2rem; width:100%; max-width:380px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.admin-login-card .brand-wordmark { color: var(--cr-navy); }

/* Swatch colore variante */
.swatch {
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:1px solid rgba(0,0,0,.2); vertical-align:-1px; margin-right:4px;
}

/* Tile immagine prodotto */
.img-tile { position:relative; border:1px solid #dee2e6; border-radius:8px; overflow:hidden; aspect-ratio:1; }
.img-tile.is-cover { border-color: var(--cr-navy); box-shadow:0 0 0 2px var(--cr-navy); }
.img-tile img { width:100%; height:100%; object-fit:cover; }
.img-tile .cover-tag {
  position:absolute; top:6px; left:6px; background:var(--cr-navy); color:#fff;
  font-size:.65rem; padding:2px 6px; border-radius:4px;
}
.img-tile .img-actions {
  position:absolute; bottom:0; left:0; right:0; display:flex; gap:4px; justify-content:center;
  padding:6px; background:linear-gradient(transparent, rgba(0,0,0,.45));
}