/* ------------------------------------------------------------------
   Store theme — layered on top of Bootstrap 5
   ------------------------------------------------------------------ */
:root {
  /* Palette taken from the SA Thread logo: forest-green cloth, gold thread */
  --brand: #0f4a2c;
  --brand-dark: #0b3320;
  --brand-deep: #06200f;
  --brand-soft: #e8efe9;
  --gold: #c9a24a;
  --gold-dark: #a8842f;
  --gold-soft: #f6eedb;
  --ink: #16201a;
  --muted: #6b726d;
  --surface: #faf8f3;
  --radius: 0.85rem;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --bs-primary: var(--brand);
  --bs-primary-rgb: 15, 74, 44;
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: 15, 74, 44;
  --bs-link-hover-color: var(--gold-dark);
  --bs-link-hover-color-rgb: 168, 132, 47;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, .h1, .h2, .display-4 { font-family: var(--font-display); font-weight: 700; letter-spacing: .005em; }

body {
  background: var(--surface);
  color: var(--ink);
}

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-dark);
}
.btn-gold {
  --bs-btn-color: var(--brand-deep);
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--brand-deep);
  --bs-btn-hover-bg: #d8b45f;
  --bs-btn-hover-border-color: #d8b45f;
  --bs-btn-active-color: var(--brand-deep);
  --bs-btn-active-bg: var(--gold-dark);
  --bs-btn-active-border-color: var(--gold-dark);
  font-weight: 600;
}
.bg-gold { background-color: var(--gold) !important; color: var(--brand-deep) !important; }
.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.pagination { --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-color: var(--brand); }
.list-group { --bs-list-group-active-bg: var(--brand); --bs-list-group-active-border-color: var(--brand); }
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(201, 162, 74, .2); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.card { border-radius: var(--radius); }
.price { font-weight: 700; color: var(--ink); }

/* Header ----------------------------------------------------------- */
.announcement-bar { background: var(--brand-deep); color: var(--gold); letter-spacing: .04em; }
.site-navbar {
  background: var(--brand-dark);
  border-bottom: 1px solid rgba(201, 162, 74, .35);
  --bs-navbar-color: rgba(255, 255, 255, .82);
  --bs-navbar-hover-color: var(--gold);
  --bs-navbar-active-color: var(--gold);
}
.site-navbar .dropdown-menu { --bs-dropdown-bg: #fff; --bs-dropdown-color: var(--ink); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--brand-soft); --bs-dropdown-link-active-bg: var(--brand); --bs-dropdown-border-color: rgba(0, 0, 0, .1); --bs-dropdown-divider-bg: rgba(0, 0, 0, .1); }
.site-navbar .form-control { background: #fff; color: var(--ink); border-color: transparent; }
.site-navbar .form-control::placeholder { color: var(--muted); }
.site-navbar .input-group .btn { border-color: rgba(255, 255, 255, .35); color: #fff; }
.site-navbar .btn-link:hover { color: var(--gold) !important; }
.navbar-logo { height: 46px; width: auto; display: block; }
@media (min-width: 992px) { .navbar-logo { height: 54px; } }
.navbar .nav-link { font-weight: 500; }

/* Hero ------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(ellipse at 70% 40%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 55%, var(--brand-deep) 100%);
  color: #fff;
  padding: 4rem 0 4.5rem;
  border-bottom: 3px solid var(--gold);
}
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .82); }
.hero__eyebrow {
  display: inline-block;
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .85rem;
}
.hero__logo { width: 100%; max-width: 300px; height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
@media (min-width: 992px) { .hero__logo { max-width: 520px; } }

.perk {
  background: #fff;
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.perk i { color: var(--gold-dark); font-size: 1.4rem; }

.category-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 1.25rem;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.category-tile:hover { background: var(--gold-soft); transform: translateY(-2px); color: var(--brand-dark); }
.category-tile i { font-size: 1.4rem; color: var(--gold-dark); }

.promo-banner {
  background: linear-gradient(90deg, var(--gold-soft), #ecd9a6);
  border: 1px solid rgba(201, 162, 74, .45);
  border-radius: 1.25rem;
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.page-header { background: #fff; border-bottom: 1px solid #eef0f3; padding: 2rem 0; }
.breadcrumb { font-size: .875rem; }

/* Product cards ---------------------------------------------------- */
.product-card { overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(17, 24, 39, .08) !important; }
.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #f1f3f6;
  overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #c4c9d2;
  font-size: 3rem;
}
.product-card__badge { position: absolute; top: .75rem; left: .75rem; }

.product-gallery {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.product-gallery img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery--sm { aspect-ratio: 4 / 3; background: #f1f3f6; }

.qty-stepper { width: 9.5rem; flex-shrink: 0; }
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input { -moz-appearance: textfield; }

/* Cart ------------------------------------------------------------- */
.cart-thumb {
  width: 72px;
  height: 72px;
  border-radius: .6rem;
  background: #f1f3f6;
  display: grid;
  place-items: center;
  color: #c4c9d2;
  font-size: 1.5rem;
  overflow: hidden;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb--sm { width: 44px; height: 44px; font-size: 1rem; }

.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  background: #fff;
  border-radius: var(--radius);
  color: var(--muted);
}
.empty-state i { font-size: 3rem; display: block; margin-bottom: .75rem; color: #c4c9d2; }

.success-icon { font-size: 4rem; color: #16a34a; }

/* About / contact -------------------------------------------------- */
.about-art {
  aspect-ratio: 4 / 3;
  border-radius: 1.5rem;
  background: linear-gradient(160deg, var(--brand), var(--brand-deep));
  display: grid;
  place-items: center;
  padding: 2.5rem;
}
.about-art img { max-width: 70%; max-height: 100%; height: auto; }
.value-card { background: #fff; border-radius: var(--radius); padding: 2rem 1.5rem; height: 100%; }
.value-card i { font-size: 2.2rem; color: var(--gold-dark); display: block; margin-bottom: .75rem; }
.contact-info { background: #fff; border-radius: var(--radius); padding: 2rem; }
.contact-info > div > i { font-size: 1.5rem; color: var(--brand); }

/* Auth ------------------------------------------------------------- */
.auth-card { border-radius: 1.25rem; }
.auth-icon { height: 64px; width: auto; }

/* Order status badges --------------------------------------------- */
.status-pending   { background: #fef3c7; color: #92400e; }
.status-paid      { background: #dbeafe; color: #1e40af; }
.status-shipped   { background: #ede9fe; color: #5b21b6; }
.status-completed { background: #dcfce7; color: #166534; }
.status-cancelled { background: #fee2e2; color: #991b1b; }

/* Dashboard -------------------------------------------------------- */
.dashboard-nav .nav-link {
  color: var(--ink);
  border-radius: .5rem;
  padding: .5rem .75rem;
  display: flex;
  gap: .6rem;
  align-items: center;
}
.dashboard-nav .nav-link:hover { background: var(--surface); }
.dashboard-nav .nav-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

.stat-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  height: 100%;
  background: #fff;
  border-radius: var(--radius);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  border-left: 4px solid var(--brand);
}
a.stat-card:hover { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08); color: var(--ink); }
.stat-card--warning { border-left-color: #f59e0b; }
.stat-card__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.stat-card__value { font-size: 1.75rem; font-weight: 800; }
.stat-card__meta { font-size: .85rem; color: var(--muted); }

/* Footer ----------------------------------------------------------- */
.site-footer { background: var(--brand-deep); color: rgba(255, 255, 255, .62); border-top: 3px solid var(--gold); }
.site-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer h6 { color: var(--gold) !important; letter-spacing: .08em; }
.site-footer hr { border-color: rgba(201, 162, 74, .3) !important; }
.footer-logo { width: 100%; max-width: 260px; height: auto; }
.site-footer li { margin-bottom: .4rem; }