/* =====================================
   THEME VARIABLES (EDIT ONLY THIS)
===================================== */

:root {
  /* 🌸 Luxury Blush Theme */

  /* Primary Brand */
  --primary: #c8a2a6;        /* soft rose */
  --secondary: #b58d91;      /* deeper rose */

  /* Accent (Gold) */
  --accent: #825156;
  --accent-dark: #b9972e;

  /* Backgrounds */
  --bg-main: #f6eeee;
  --bg-light: #faf6f6;       /* soft pink background */
  --bg-soft: #f3eaea;        /* cards */

  /* Text */
  --text-dark: #3a2e2e;      /* deep brown */
  --text-medium: #6b5b5b;
  --text-light: #a89a9a;

  /* Borders */
  --border-light: #e8dede;

  /* Footer */
  --footer-bg: #b58d91;
  --footer-dark: #8e6b6f;

  /* White / Black */
  --white: #ffffff;
  --black: #2a2a2a;

  /* Status */
  --success: #28a745;
  --success-bg: #e6ffed;
  --danger: #d9534f;
}

/* =====================================
   GLOBAL
===================================== */

body {
  background: var(--bg-main);
  color: var(--text-dark);
}

/* =====================================
   TOP BAR
===================================== */

.top-bar {
  background: var(--primary);
  color: var(--white);
}

.top-bar a,
.top-bar span {
  color: var(--white);
}

/* =====================================
   HEADER
===================================== */

.main-header {
  border-top: 4px solid var(--text-dark);
}

/* Search */
.search-box input {
  border: 1px solid var(--border-light);
}

.search-box button {
  background: var(--text-dark);
  color: var(--white);
}

.search-box button:hover {
  background: var(--secondary);
}

/* =====================================
   NAVBAR
===================================== */

.navbar {
  background: var(--white);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.navbar a {
  color: var(--black);
}

.navbar li:hover > a {
  background: var(--primary);
  color: var(--white);
}

/* Dropdown */
.normal-dropdown .dropdown {
  background: var(--white);
}

.normal-dropdown .dropdown li a {
  color: var(--text-medium);
}

.normal-dropdown .dropdown li a:hover {
  background: var(--secondary);
  color: var(--white);
}

/* Mega Menu */
.mega-menu {
  background: var(--white);
}

.mega-column h4 a {
  color: var(--black);
}

.mega-column ul li a {
  color: var(--text-light);
}

.mega-column ul li a:hover {
  background: var(--bg-soft);
  color: var(--primary);
}

/* =====================================
   BUTTONS
===================================== */

.btn-primary {
  background: var(--primary);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--secondary);
}

.btn-outline {
  border: 1px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: var(--white);
}

/* =====================================
   CARDS
===================================== */

.product-card,
.exclusive-card,
.cart-items,
.cart-summary,
.checkout-card {
  background: var(--white);
  border: 1px solid var(--border-light);
}

/* =====================================
   PRODUCT
===================================== */

.price {
  color: var(--text-dark);
}

.product-info .price {
  color: var(--primary);
}

/* =====================================
   CATEGORY
===================================== */

.category-card {
  background: var(--primary);
}

.category-card h3 {
  color: var(--text-dark);
}

/* =====================================
   FOOTER
===================================== */

.footer {
  background: var(--footer-bg);
  color: var(--white);
}

.footer-col h3 {
  color: var(--accent);
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-middle {
  background: var(--footer-bg);
}

.footer-bottom {
  background: var(--footer-dark);
}

/* =====================================
   CART
===================================== */

.cart-page {
  background: var(--bg-soft);
}

.btn-checkout {
  background: var(--black);
  color: var(--white);
}

.btn-checkout:hover {
  background: #333;
}

/* =====================================
   CHECKOUT
===================================== */

.checkout-page {
  background: var(--bg-light);
}

.checkout-form input:focus {
  border-color: var(--black);
}

/* Payment */
.payment-box:hover {
  border-color: var(--black);
}

.payment-option input:checked + .payment-box {
  border: 2px solid var(--black);
}

/* =====================================
   STATUS
===================================== */

.required {
  color: var(--danger);
}

.error {
  color: var(--danger);
}

#live-status {
  color: var(--success);
}

/* =====================================
   HERO
===================================== */

.hero {
  background: var(--footer-bg);
  color: var(--white);
}

/* =====================================
   CONTACT
===================================== */

.card {
  background: var(--white);
}

.contact-info h3 {
  color: var(--footer-bg);
}

.contact-info a {
  color: var(--primary);
}

/* =====================================
   SOCIAL
===================================== */

.social-links a {
  background: var(--bg-soft);
  color: var(--text-dark);
}

.social-links a:hover {
  background: var(--accent);
  color: var(--white);
}

/* =====================================
   FORM
===================================== */

.form-group input,
.form-group textarea {
  border: 1px solid var(--border-light);
}

.btn-submit {
  background: var(--accent);
  color: var(--white);
}

.btn-submit:hover {
  background: var(--accent-dark);
}

/* =====================================
   LOADER
===================================== */

.spinner {
  border-top: 5px solid var(--accent);
}

.success-card {
  background: var(--success-bg);
  border-left: 5px solid var(--success);
}

/* =====================================
   PAGINATION
===================================== */

.page-link {
  border: 1px solid var(--primary);
  color: var(--primary);
}

.page-link:hover {
  background: var(--primary);
  color: var(--white);
}

/* =====================================
   MOBILE CONTROL
===================================== */

@media (min-width:769px){
.mobile-header,
.bottom-nav,
.mobile-menu,
.mobile-search-panel,
.mobile-filter-btn,
.close-filter,
.sticky-cart,
.carousel-arrow,
.mobile-bottom-nav {
  display:none;
}
}

@media (max-width:768px){
.mobile-header{ display:flex; }
.bottom-nav{ display:flex; }
.mobile-menu{ display:block; }
.mobile-search-panel{ display:block; }
}