/* ===========================================
   WooCommerce Header Styling Fixes
   =========================================== */

/* Hide default WordPress entry headers on WooCommerce pages */
.woocommerce-page .entry-header,
.woocommerce-page .entry-title,
.woocommerce-account .entry-header,
.woocommerce-account .entry-title,
.woocommerce-cart .entry-header,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-header,
.woocommerce-checkout .entry-title {
  display: none !important;
}

/* Hide WooCommerce default page titles */
.woocommerce-page .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header h1,
.woocommerce-page
  .woocommerce-products-header
  .woocommerce-products-header__title {
  display: none !important;
}

/* Hide default WooCommerce breadcrumb containers if needed */
.woocommerce-page .woocommerce-breadcrumb {
  display: none !important;
}

/* Ensure our custom headers are visible */
.premium-cart-header,
.premium-checkout-header,
.premium-category-header,
.premium-brand-header {
  display: block !important;
  visibility: visible !important;
}

/* ===========================================
   Enhanced Page Headers for All WooCommerce Pages
   =========================================== */

/* Base header styles for all WooCommerce pages */
.woocommerce-page .page-header,
.woocommerce-page .woocommerce-page-header {
  background: linear-gradient(135deg, #157ed2 0%, #0f5a9c 100%);
  color: white;
  padding: 40px 0;
  margin-bottom: 40px;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.woocommerce-page .page-header::before,
.woocommerce-page .woocommerce-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.1;
  pointer-events: none;
}

.woocommerce-page .page-header .container,
.woocommerce-page .woocommerce-page-header .container {
  position: relative;
  z-index: 2;
}

.woocommerce-page .page-header h1,
.woocommerce-page .woocommerce-page-header h1 {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.woocommerce-page .page-header .subtitle,
.woocommerce-page .woocommerce-page-header .subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  margin: 0;
  font-weight: 400;
}

/* ===========================================
   Account Pages Header Enhancement
   =========================================== */

.woocommerce-account .page-header {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.woocommerce-account .page-header h1 {
  font-size: 2.2rem;
}

.woocommerce-account .page-header h1::before {
  content: "\f007"; /* User icon */
  font-family: "FontAwesome";
  margin-right: 15px;
  color: #3498db;
}

/* ===========================================
   Cart Page Header Enhancement
   =========================================== */

.woocommerce-cart .page-header {
  background: linear-gradient(135deg, #157ed2 0%, #0f5a9c 100%);
}

.woocommerce-cart .page-header h1::before {
  content: "\f07a"; /* Shopping cart icon */
  font-family: "FontAwesome";
  margin-right: 15px;
  color: #ffffff;
}

/* ===========================================
   Checkout Page Header Enhancement
   =========================================== */

.woocommerce-checkout .page-header {
  background: linear-gradient(135deg, #157ed2 0%, #0f5a9c 100%);
}

.woocommerce-checkout .page-header h1::before {
  content: "\f09d"; /* Credit card icon */
  font-family: "FontAwesome";
  margin-right: 15px;
  color: #ffffff;
}

/* ===========================================
   Shop/Category Pages Header Enhancement
   =========================================== */

.woocommerce-shop .page-header,
.woocommerce-archive .page-header {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.woocommerce-shop .page-header h1::before,
.woocommerce-archive .page-header h1::before {
  content: "\f07a"; /* Shopping bag icon */
  font-family: "FontAwesome";
  margin-right: 15px;
  color: #f39c12;
}

/* ===========================================
   Product Page Header Enhancement
   =========================================== */

.single-product .page-header {
  background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
}

.single-product .page-header h1::before {
  content: "\f1b2"; /* Product hunt icon */
  font-family: "FontAwesome";
  margin-right: 15px;
  color: #f39c12;
}

/* ===========================================
   Responsive Header Styles
   =========================================== */

@media (max-width: 768px) {
  .woocommerce-page .page-header,
  .woocommerce-page .woocommerce-page-header {
    padding: 30px 0;
    margin-bottom: 30px;
  }

  .woocommerce-page .page-header h1,
  .woocommerce-page .woocommerce-page-header h1 {
    font-size: 1.8rem;
  }

  .woocommerce-page .page-header .subtitle,
  .woocommerce-page .woocommerce-page-header .subtitle {
    font-size: 1rem;
  }

  .woocommerce-page .page-header h1::before,
  .woocommerce-page .woocommerce-page-header h1::before {
    margin-right: 10px;
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .woocommerce-page .page-header,
  .woocommerce-page .woocommerce-page-header {
    padding: 25px 0;
    margin-bottom: 25px;
  }

  .woocommerce-page .page-header h1,
  .woocommerce-page .woocommerce-page-header h1 {
    font-size: 1.5rem;
  }

  .woocommerce-page .page-header h1::before,
  .woocommerce-page .woocommerce-page-header h1::before {
    display: block;
    margin-right: 0;
    margin-bottom: 10px;
    text-align: center;
    font-size: 2rem;
  }
}

/* ===========================================
   Additional Header Utilities
   =========================================== */

/* Hide any remaining default headers */
.page .entry-header,
.page .entry-title,
.single .entry-header,
.single .entry-title {
  display: none !important;
}

/* Ensure WooCommerce content starts properly */
.woocommerce-page .content-area,
.woocommerce-page .site-content {
  padding-top: 0;
}

/* ===========================================
   Layout Containment Fixes
   =========================================== */

/* Prevent WooCommerce containers from interfering with footer */
.woocommerce .entry-content,
.woocommerce-account .entry-content,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
  float: none !important;
  clear: both !important;
  overflow: visible !important;
  position: static !important;
}

/* Ensure proper layout flow */
.woocommerce-page .woocommerce,
.woocommerce-page .woocommerce-account,
.woocommerce-page .woocommerce-cart,
.woocommerce-page .woocommerce-checkout {
  clear: both !important;
  overflow: visible !important;
  position: static !important;
}

/* Fix for My Account page specifically */
.woocommerce-account .my-account-wrapper {
  clear: both !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Custom breadcrumb styling if shown */
.woocommerce-page .woocommerce-breadcrumb {
  background: #f8f9fa;
  padding: 10px 0;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: #666;
}

.woocommerce-page .woocommerce-breadcrumb a {
  color: #157ed2;
  text-decoration: none;
}

.woocommerce-page .woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

/* ===========================================
   Animation Effects for Headers
   =========================================== */

.woocommerce-page .page-header,
.woocommerce-page .woocommerce-page-header {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================================
   Dark Mode Support
   =========================================== */

@media (prefers-color-scheme: dark) {
  .woocommerce-page .page-header .subtitle,
  .woocommerce-page .woocommerce-page-header .subtitle {
    color: rgba(255, 255, 255, 0.8);
  }

  .woocommerce-page .woocommerce-breadcrumb {
    background: #2d3748;
    color: #a0aec0;
  }

  .woocommerce-page .woocommerce-breadcrumb a {
    color: #63b3ed;
  }
}