/* ═══════════════════════════════════════════════════════
   veloura.css — shared "inner page" styles for the
   VELOURA design system (see home.css for the design
   tokens / homepage components this builds on).

   Loaded on every page that uses includes/header.php +
   includes/footer.php (i.e. everything except index.php,
   which has its own hero-overlaying nav).
═══════════════════════════════════════════════════════ */

/* ── STICKY "INNER PAGE" NAVBAR ──────────────────────────
   index.php's .vl-nav is fixed + transparent so it can sit
   on top of the hero image. Every other page has no hero,
   so the nav here is permanently dark and sits in normal
   document flow (sticky) — no extra body padding needed,
   and it naturally pushes page content down.
*/
.vl-nav.vl-nav--page {
  position: sticky;
  top: 0;
  background: rgba(26, 23, 20, .97);
  backdrop-filter: blur(16px);
  padding: 16px 0;
}

/* ── PAGE HEADER BAND ─────────────────────────────────────
   A short dark "editorial" band used at the top of inner
   pages (Shop, My Account, etc.) in place of the homepage
   hero — keeps the VELOURA look without needing a photo.
*/
.vl-page-header {
  background: var(--vl-ink);
  padding: 56px 0 50px;
}
.vl-page-header .vl-breadcrumb {
  font-family: var(--vl-ff-body);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 18px;
}
.vl-page-header .vl-breadcrumb a {
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: color .2s;
}
.vl-page-header .vl-breadcrumb a:hover { color: #fff; }
.vl-page-header .vl-breadcrumb span.sep { margin: 0 8px; color: rgba(255, 255, 255, .25); }
.vl-page-header .vl-eyebrow { color: var(--vl-gold); }
.vl-page-header h1 {
  font-family: var(--vl-ff-disp);
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 8px 0 14px;
}
.vl-page-header p {
  font-family: var(--vl-ff-body);
  font-size: .9rem;
  color: rgba(255, 255, 255, .5);
  max-width: 480px;
  line-height: 1.7;
}
.vl-page-header .vl-gold-divider {
  margin-top: 4px;
}

/* ── SHOP LAYOUT ──────────────────────────────────────────*/
.vl-shop-section {
  padding: 64px 0 110px;
  background: var(--vl-cream);
}
.vl-shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .vl-shop-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* Sidebar */
.vl-shop-sidebar { display: flex; flex-direction: column; gap: 36px; }

.vl-shop-search-form {
  display: flex;
  border: 1.5px solid rgba(26, 23, 20, .14);
  background: #fff;
}
.vl-shop-search-form input {
  flex: 1; border: none; outline: none;
  padding: 12px 14px;
  font-family: var(--vl-ff-body); font-size: .85rem;
  background: transparent; color: var(--vl-ink);
}
.vl-shop-search-form input::placeholder { color: var(--vl-muted); }
.vl-shop-search-form button {
  background: none; border: none; cursor: pointer;
  padding: 12px 14px; color: var(--vl-muted);
  transition: color .2s;
}
.vl-shop-search-form button:hover { color: var(--vl-ink); }

.vl-filter-block .vl-filter-title {
  display: block;
  font-family: var(--vl-ff-body);
  font-size: .65rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--vl-gold); margin-bottom: 18px;
}
.vl-filter-list { display: flex; flex-direction: column; }
.vl-filter-link {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 0 11px 16px;
  font-family: var(--vl-ff-body); font-size: .85rem;
  color: var(--vl-muted); text-decoration: none;
  border-bottom: 1px solid rgba(26, 23, 20, .07);
  transition: color .2s, padding-left .2s;
}
.vl-filter-link::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; background: transparent; transition: background .2s;
}
.vl-filter-link:hover { color: var(--vl-ink); padding-left: 20px; }
.vl-filter-link.active { color: var(--vl-ink); font-weight: 600; }
.vl-filter-link.active::before { background: var(--vl-gold); }
.vl-filter-count {
  font-family: var(--vl-ff-body); font-size: .72rem;
  color: var(--vl-muted); font-weight: 400;
}

.vl-active-search {
  font-family: var(--vl-ff-body); font-size: .82rem;
  color: var(--vl-muted); line-height: 1.7;
  padding: 14px 16px;
  border: 1px solid var(--vl-border);
  background: #fff;
}
.vl-active-search strong { color: var(--vl-ink); font-weight: 600; }
.vl-active-search a {
  color: var(--vl-ink); font-weight: 600;
  text-decoration: none; border-bottom: 1px solid var(--vl-gold);
}

/* Main column */
.vl-shop-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  padding-bottom: 20px; margin-bottom: 36px;
  border-bottom: 1.5px solid rgba(26, 23, 20, .1);
}
.vl-result-count {
  font-family: var(--vl-ff-body); font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--vl-muted);
}
.vl-sort-form { display: flex; align-items: center; gap: 12px; }
.vl-sort-form label {
  font-family: var(--vl-ff-body); font-size: .65rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--vl-muted);
}
.vl-sort-select {
  appearance: none;
  padding: 10px 34px 10px 14px;
  border: 1.5px solid rgba(26, 23, 20, .14);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1714' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  font-family: var(--vl-ff-body); font-size: .8rem; color: var(--vl-ink);
  cursor: pointer; transition: border-color .2s;
}
.vl-sort-select:focus { border-color: var(--vl-ink); }

/* "Sold out" product-card state (extends .vl-product-card from home.css) */
.vl-product-badge--muted { background: var(--vl-ink2); color: rgba(255, 255, 255, .7); }
.vl-sold-out-label {
  color: rgba(255, 255, 255, .35);
  font-family: var(--vl-ff-body); font-size: .65rem;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}

/* Pagination */
.vl-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin-top: 64px; flex-wrap: wrap;
}
.vl-page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 8px;
  font-family: var(--vl-ff-body); font-size: .8rem; font-weight: 600;
  color: var(--vl-ink); text-decoration: none;
  border: 1.5px solid rgba(26, 23, 20, .12);
  background: #fff;
  transition: border-color .2s, background .2s, color .2s;
}
.vl-page-link:hover { border-color: var(--vl-ink); }
.vl-page-link.active {
  background: var(--vl-ink); border-color: var(--vl-ink); color: #fff;
}

/* ── ACCOUNT LAYOUT ───────────────────────────────────────*/
.vl-account-section {
  padding: 64px 0 110px;
  background: var(--vl-cream);
  min-height: 50vh;
}
.vl-account-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 48px;
  align-items: flex-start;
}
@media (max-width: 860px) {
  .vl-account-layout { grid-template-columns: 1fr; gap: 32px; }
}

.vl-account-sidebar {
  background: #fff;
  border: 1px solid var(--vl-border);
  padding: 32px 28px;
}
.vl-account-avatar {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vl-ink); color: #fff;
  font-family: var(--vl-ff-disp); font-size: 1.4rem; font-weight: 400;
  margin-bottom: 16px;
}
.vl-account-name {
  font-family: var(--vl-ff-disp); font-size: 1.25rem; font-weight: 500;
  color: var(--vl-ink); margin: 0 0 4px; line-height: 1.2;
  word-break: break-word;
}
.vl-account-email {
  font-family: var(--vl-ff-body); font-size: .8rem;
  color: var(--vl-muted); margin: 0 0 22px; word-break: break-all;
}
.vl-account-nav {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--vl-border); padding-top: 16px;
}
.vl-account-nav a, .vl-account-nav button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--vl-ff-body); font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--vl-muted); text-decoration: none;
  padding: 12px 0; border: none; background: none; cursor: pointer;
  border-bottom: 1px solid rgba(26, 23, 20, .07);
  text-align: left; width: 100%;
  transition: color .2s;
}
.vl-account-nav a:last-child, .vl-account-nav form:last-child button { border-bottom: none; }
.vl-account-nav a:hover, .vl-account-nav button:hover { color: var(--vl-ink); }
.vl-account-nav a.active { color: var(--vl-ink); }

.vl-account-main { display: flex; flex-direction: column; gap: 32px; }
.vl-account-card {
  background: #fff; border: 1px solid var(--vl-border); padding: 36px;
}
.vl-account-card h2 {
  font-family: var(--vl-ff-disp); font-size: 1.5rem; font-weight: 500;
  color: var(--vl-ink); margin: 0 0 6px; line-height: 1.2;
}
.vl-account-card .vl-card-sub {
  font-family: var(--vl-ff-body); font-size: .85rem;
  color: var(--vl-muted); margin: 0 0 28px; line-height: 1.6;
}

.vl-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px;
}
@media (max-width: 600px) { .vl-form-grid { grid-template-columns: 1fr; } }
.vl-field {
  margin-bottom: 20px;
}
.vl-field label {
  display: block;
  font-family: var(--vl-ff-body); font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--vl-ink3); margin-bottom: 8px;
}
.vl-field input {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid rgba(26, 23, 20, .18); outline: none;
  font-family: var(--vl-ff-body); font-size: .9rem;
  color: var(--vl-ink); background: var(--vl-cream);
  transition: border-color .2s, background .2s;
}
.vl-field input:focus { border-color: var(--vl-ink); background: #fff; }
.vl-field input:disabled { color: var(--vl-muted); cursor: not-allowed; }
.vl-field-hint {
  font-family: var(--vl-ff-body); font-size: .75rem;
  color: var(--vl-muted); margin-top: 6px; line-height: 1.5;
}

.vl-form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }

.vl-btn-account {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 30px;
  background: var(--vl-ink); color: #fff; border: 1.5px solid var(--vl-ink);
  font-family: var(--vl-ff-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, color .2s;
}
.vl-btn-account:hover { background: var(--vl-ink2); border-color: var(--vl-ink2); }
.vl-btn-account--ghost {
  background: transparent; color: var(--vl-ink);
}
.vl-btn-account--ghost:hover { background: var(--vl-ink); color: #fff; }

/* Verification badge */
.vl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-family: var(--vl-ff-body); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.vl-badge--verified { background: rgba(46, 125, 50, .1); color: #2e7d32; }
.vl-badge--unverified { background: rgba(201, 169, 110, .15); color: #9c7a36; }

/* Alerts */
.vl-alert {
  padding: 14px 18px; margin-bottom: 24px;
  font-family: var(--vl-ff-body); font-size: .85rem; line-height: 1.5;
  border: 1px solid;
}
.vl-alert--success { background: rgba(201, 169, 110, .08); border-color: var(--vl-border); color: var(--vl-ink); }
.vl-alert--error { background: #fff5f5; border-color: #fcc; color: #c0392b; }

/* Order history table */
.vl-table-scroll { overflow-x: auto; }
.vl-orders-table { width: 100%; border-collapse: collapse; font-family: var(--vl-ff-body); font-size: .85rem; }
.vl-orders-table th {
  text-align: left; padding: 0 14px 12px 0;
  font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--vl-muted); border-bottom: 1.5px solid var(--vl-ink);
  white-space: nowrap;
}
.vl-orders-table td {
  padding: 16px 14px 16px 0; border-bottom: 1px solid var(--vl-border);
  color: var(--vl-ink2); white-space: nowrap;
}
.vl-orders-table tr:last-child td { border-bottom: none; }
.vl-orders-table a {
  color: var(--vl-ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--vl-gold);
}

.vl-order-status {
  display: inline-block; padding: 5px 12px;
  font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.vl-order-status--pending,
.vl-order-status--processing { background: rgba(201, 169, 110, .15); color: #9c7a36; }
.vl-order-status--shipped    { background: rgba(59, 130, 246, .1); color: #1d4ed8; }
.vl-order-status--delivered  { background: rgba(46, 125, 50, .1); color: #2e7d32; }
.vl-order-status--cancelled  { background: rgba(220, 38, 38, .08); color: #dc2626; }

/* ── LIGHT HARMONIZATION FOR EXISTING PAGES ──────────────
   Cart / checkout / product / auth pages keep their original
   style.css layout, but pick up the VELOURA display typeface
   on headings so they feel part of the same site.
*/
.section-header h2,
.auth-header h1 {
  font-family: var(--vl-ff-disp);
  font-weight: 500;
  letter-spacing: -.01em;
}