/* ==============================================================
   JOY OF FASHION — Design System (v1.0)
   Palette: dusty rose (--color-primary), deep charcoal (--color-secondary),
            warm sand accent (--color-accent), warm off-white background
   Type: Playfair Display (headings) + Poppins (body) — both admin-editable
   Signature element: the "stitch" divider (dashed thread rule) under
   section headings — a nod to garment stitching, used sparingly.
================================================================= */

:root{
  --bg-body: #FBF8F5;
  --text-dark: #2B2420;
  --radius: 14px;
}

body{
  font-family: var(--font-body, 'Poppins', sans-serif);
  background: var(--bg-body);
  color: var(--text-dark);
}

h1, h2, h3, h4, .brand-font{
  font-family: var(--font-heading, 'Playfair Display', serif);
  color: var(--color-secondary, #2B2420);
}

a { text-decoration: none; }

/* ---------- Top bar & Header ---------- */
.top-bar{
  background: var(--color-secondary, #2B2420);
  color: #fff;
  letter-spacing: .5px;
}
.site-logo{ height: 46px; width: auto; object-fit: contain; }
.site-logo-footer{ height: 40px; filter: brightness(0) invert(1); opacity:.9; }

.navbar .nav-link{
  color: var(--text-dark);
  font-weight: 500;
  position: relative;
}
.navbar .nav-link:hover{ color: var(--color-primary); }
.search-form input{ border-radius: 30px; min-width: 180px; }

.cart-badge{
  position: absolute;
  top: -2px;
  right: -8px;
  font-size: .6rem;
}

/* ---------- Stitch divider (signature element) ---------- */
.stitch-divider{
  border: none;
  border-top: 2px dashed var(--color-accent, #D9C7A3);
  width: 90px;
  margin: 14px auto 28px;
}
.stitch-divider.left{ margin: 14px 0 28px; }

/* ---------- Hero ---------- */
.hero{
  background: linear-gradient(120deg, rgba(43,36,32,.55), rgba(183,110,121,.35));
  position: relative;
  color: #fff;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
}
.hero-bg{
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  z-index: -1;
}
.hero h1{
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
}
.hero p{ font-size: 1.15rem; opacity: .95; }
.btn-primary-brand{
  background: var(--color-primary, #B76E79);
  border: none;
  color: #fff;
  padding: .7rem 1.8rem;
  border-radius: 30px;
  font-weight: 600;
  transition: .2s;
}
.btn-primary-brand:hover{ filter: brightness(.9); color:#fff; }

/* ---------- Category tiles ---------- */
.category-tile{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: block;
}
.category-tile img{ width:100%; height:100%; object-fit: cover; transition: .4s; }
.category-tile:hover img{ transform: scale(1.06); }
.category-tile .tile-label{
  position: absolute; bottom: 0; left:0; right:0;
  background: linear-gradient(0deg, rgba(0,0,0,.65), transparent);
  color: #fff; padding: 18px 14px 14px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
}

/* ---------- Product cards ---------- */
.product-card{
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #eee2d8;
  transition: .25s;
  height: 100%;
}
.product-card:hover{ box-shadow: 0 10px 26px rgba(43,36,32,.1); transform: translateY(-3px); }
.product-card .img-wrap{ aspect-ratio: 3/4; overflow:hidden; background:#f4efe9; }
.product-card .img-wrap img{ width:100%; height:100%; object-fit: cover; transition: .4s; }
.product-card:hover .img-wrap img{ transform: scale(1.05); }
.product-card .body{ padding: 14px 16px; }
.product-card .price-old{ text-decoration: line-through; color:#999; font-size:.85rem; }
.product-card .price-new{ color: var(--color-primary); font-weight:700; }
.badge-sale{
  position:absolute; top:10px; left:10px;
  background: var(--color-primary); color:#fff;
  font-size:.7rem; padding: 3px 10px; border-radius: 20px;
}

/* ---------- Sections ---------- */
.section-title{ text-align:center; margin-bottom: 4px; }
.section-sub{ text-align:center; color:#8a7f74; margin-bottom: 8px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-secondary, #2B2420); color:#fff; }
.footer-heading{ color: var(--color-accent, #D9C7A3); font-weight:600; margin-bottom: 14px; }
.footer-links li{ margin-bottom: 8px; }
.footer-links a{ color: rgba(255,255,255,.75); }
.footer-links a:hover{ color:#fff; }
.footer-bottom{ background: rgba(0,0,0,.2); color: rgba(255,255,255,.6); }

/* ---------- Auth / forms ---------- */
.auth-card{
  max-width: 440px; margin: 60px auto;
  background:#fff; border-radius: var(--radius);
  padding: 36px 32px; box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* ---------- Admin panel shared ---------- */
.admin-sidebar{
  background: var(--color-secondary, #2B2420);
  min-height: 100vh;
  color: #fff;
}
.admin-sidebar a{
  color: rgba(255,255,255,.75);
  display:block; padding: 10px 18px; border-radius: 8px;
}
.admin-sidebar a:hover, .admin-sidebar a.active{
  background: rgba(255,255,255,.1); color:#fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .hero{ min-height: 380px; text-align:center; }
  .search-form{ margin: 10px 0; }
}