/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.0
Description: Velour Hair - Warm Luxury Child Theme
*/

/* ============================================
   VELOUR HAIR - WARM LUXURY THEME
   Palette: Cream #FDFAF6 | Dark Brown #2C1810 | Champagne Gold #C9A84C
   ============================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Inter:wght@300;400;500&display=swap');

/* --- Root Variables --- */
:root {
  --vh-cream: #FDFAF6;
  --vh-brown: #2C1810;
  --vh-gold: #C9A84C;
  --vh-brown-light: #5C3D2E;
  --vh-muted: #8A6E60;
  --vh-border: rgba(44,24,16,0.12);
}

/* --- Base --- */
body {
  background-color: var(--vh-cream);
  color: var(--vh-brown);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--vh-brown);
  font-weight: 500;
}

a { color: var(--vh-gold); }
a:hover { color: var(--vh-brown); }

/* --- Navigation --- */
.site-header {
  background-color: var(--vh-brown) !important;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}

.main-navigation a {
  color: #FDFAF6 !important;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.main-navigation a:hover {
  color: var(--vh-gold) !important;
}

.site-title a {
  font-family: 'Playfair Display', serif !important;
  color: var(--vh-gold) !important;
  font-size: 22px !important;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* --- Topbar --- */
.top-bar {
  background-color: var(--vh-gold) !important;
  color: var(--vh-brown) !important;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
}

.top-bar a { color: var(--vh-brown) !important; }

/* --- Buttons --- */
.wp-block-button__link,
.button,
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
  background-color: var(--vh-gold) !important;
  color: var(--vh-brown) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 12px 28px !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: var(--vh-brown) !important;
  color: var(--vh-gold) !important;
}

/* --- WooCommerce Product Cards --- */
.woocommerce ul.products li.product {
  background: #FDFAF6;
  border: 0.5px solid var(--vh-border);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 4px 20px rgba(44,24,16,0.08);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--vh-brown);
}

.woocommerce ul.products li.product .price {
  font-family: 'Playfair Display', serif;
  color: var(--vh-brown);
  font-size: 15px;
}

/* --- Sale Badge --- */
.woocommerce span.onsale {
  background-color: var(--vh-gold) !important;
  color: var(--vh-brown) !important;
  font-size: 10px;
  letter-spacing: 1px;
  border-radius: 2px;
}

/* --- Footer --- */
.site-footer {
  background-color: #1A0E09 !important;
  color: #8A6E60 !important;
  border-top: 1px solid rgba(201,168,76,0.2);
}

.site-footer a {
  color: #8A6E60 !important;
}

.site-footer a:hover {
  color: var(--vh-gold) !important;
}

/* --- Section Divider --- */
.vh-divider {
  width: 40px;
  height: 1px;
  background: var(--vh-gold);
  margin: 0 auto 20px;
}

/* --- Trust Bar --- */
.vh-trust-bar {
  background: var(--vh-brown);
  padding: 20px 0;
}

/* --- WooCommerce Single Product --- */
.woocommerce div.product .product_title {
  font-family: 'Playfair Display', serif;
  color: var(--vh-brown);
}

.woocommerce div.product p.price {
  font-family: 'Playfair Display', serif;
  color: var(--vh-brown);
  font-size: 24px;
}

.woocommerce .woocommerce-tabs ul.tabs li.active a {
  color: var(--vh-gold);
  border-bottom: 2px solid var(--vh-gold);
}