/*
Theme Name: The Unique Witch Boutique
Theme URI: https://theuniquewitchboutique.co.uk
Description: Custom mystical dark theme for The Unique Witch Boutique WooCommerce shop
Author: PixelPulseAI
Version: 1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: witch-boutique
Tags: woocommerce, dark, custom-colors, e-commerce
*/

/* ── CSS Variables ── */
:root {
  --deep-navy: #1a1a3e;
  --dark-purple: #2d1b4e;
  --sage-green: #8ba888;
  --light-sage: #a8c4a0;
  --crystal-green: #6b9e6b;
  --gold: #d4a843;
  --cream: #f5efe6;
  --lavender: #b8a9d4;
  --crystal-purple: #9b7cb8;
  --soft-pink: #d4a0b0;
  --text-light: #e8e0d4;
  --text-dim: #a09888;
}

/* ── Global ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--deep-navy);
  color: var(--text-light);
  font-family: 'Cormorant Garamond', serif;
  overflow-x: hidden;
  min-height: 100vh;
}

a {
  color: var(--sage-green);
  text-decoration: none;
  transition: color 0.3s;
}
a:hover { color: var(--light-sage); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif;
  color: var(--cream);
}

/* ── Header ── */
.site-header {
  background: rgba(26, 26, 62, 0.95);
  backdrop-filter: blur(20px);
  padding: 8px 30px;
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(139, 168, 136, 0.15);
}

.site-header .site-title a,
.site-header .site-title {
  font-family: 'Cinzel', serif;
  color: var(--cream) !important;
  font-size: 1.4rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Logo styling */
.custom-logo-link img,
.custom-logo {
  max-height: 100px;
  width: auto;
  background: transparent !important;
}

.site-header nav a,
.main-navigation a {
  color: var(--text-light) !important;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 16px;
  transition: color 0.3s;
}
.site-header nav a:hover,
.main-navigation a:hover {
  color: var(--sage-green) !important;
}

/* Fix menu list display */
.main-navigation ul {
  list-style: none !important;
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.main-navigation li {
  list-style: none !important;
}

/* ── WooCommerce Products Grid ── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 25px;
  padding: 30px;
}

.woocommerce ul.products li.product {
  background: rgba(45, 27, 78, 0.3);
  border: 1px solid rgba(139, 168, 136, 0.15);
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.4s;
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--sage-green);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #f8f4ef;
  border-bottom: 1px solid rgba(139, 168, 136, 0.1);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Cinzel', serif !important;
  font-size: 0.95rem !important;
  color: var(--cream) !important;
  padding: 15px 15px 5px !important;
  line-height: 1.4;
}

.woocommerce ul.products li.product .price {
  color: var(--gold) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 1.1rem !important;
  padding: 5px 15px 15px;
}

.woocommerce ul.products li.product .price ins {
  color: var(--gold) !important;
  text-decoration: none;
}

/* ── Add to Cart Button ── */
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: linear-gradient(135deg, var(--sage-green), var(--crystal-green)) !important;
  color: var(--deep-navy) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 10px 20px !important;
  cursor: pointer;
  transition: all 0.3s !important;
  margin: 0 15px 15px !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  box-shadow: 0 5px 20px rgba(139, 168, 136, 0.3) !important;
  transform: scale(1.02);
}

/* ── Single Product Page ── */
.woocommerce div.product {
  background: var(--deep-navy);
  padding: 30px;
}

.woocommerce div.product .product_title {
  font-family: 'Cinzel', serif;
  color: var(--cream);
  font-size: 1.8rem;
}

.woocommerce div.product p.price {
  color: var(--gold) !important;
  font-family: 'Cinzel', serif;
  font-size: 1.5rem !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-light);
  line-height: 1.8;
}

/* ── Cart ── */
.woocommerce-cart .woocommerce {
  background: var(--deep-navy);
  padding: 30px;
}

.woocommerce table.shop_table {
  background: rgba(45, 27, 78, 0.2) !important;
  border: 1px solid rgba(139, 168, 136, 0.15) !important;
  border-radius: 4px;
}

.woocommerce table.shop_table th {
  color: var(--cream) !important;
  font-family: 'Cinzel', serif;
  border-bottom: 1px solid rgba(139, 168, 136, 0.15) !important;
}

.woocommerce table.shop_table td {
  color: var(--text-light) !important;
  border-bottom: 1px solid rgba(139, 168, 136, 0.1) !important;
}

/* ── Checkout ── */
.woocommerce-checkout .woocommerce {
  background: var(--deep-navy);
  padding: 30px;
}

.woocommerce form .form-row label {
  color: var(--text-light) !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: rgba(45, 27, 78, 0.3) !important;
  border: 1px solid rgba(139, 168, 136, 0.2) !important;
  color: var(--text-light) !important;
  border-radius: 4px;
  padding: 10px;
}

.woocommerce form .form-row input.input-text:focus {
  border-color: var(--sage-green) !important;
  outline: none;
}

/* ── Checkout Button ── */
.woocommerce #place_order,
.woocommerce .checkout-button {
  background: linear-gradient(135deg, var(--sage-green), var(--crystal-green)) !important;
  color: var(--deep-navy) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.9rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  padding: 15px 30px !important;
  border: none !important;
  border-radius: 2px !important;
  width: 100%;
}

/* ── Sidebar / Widgets ── */
.widget {
  background: rgba(45, 27, 78, 0.2);
  border: 1px solid rgba(139, 168, 136, 0.1);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.widget-title {
  font-family: 'Cinzel', serif;
  color: var(--cream);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

/* ── Footer ── */
.site-footer, footer {
  background: rgba(26, 26, 62, 0.95);
  border-top: 1px solid rgba(139, 168, 136, 0.15);
  padding: 30px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--lavender);
}

/* ── WooCommerce Notices ── */
.woocommerce-message {
  background: rgba(139, 168, 136, 0.1) !important;
  border-top-color: var(--sage-green) !important;
  color: var(--text-light) !important;
}

.woocommerce-info {
  background: rgba(184, 169, 212, 0.1) !important;
  border-top-color: var(--lavender) !important;
  color: var(--text-light) !important;
}

.woocommerce-error {
  background: rgba(212, 160, 176, 0.1) !important;
  border-top-color: var(--soft-pink) !important;
  color: var(--text-light) !important;
}

/* ── Breadcrumbs ── */
.woocommerce .woocommerce-breadcrumb {
  color: var(--text-dim);
  padding: 15px 30px;
  font-size: 0.85rem;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--lavender);
}

/* ── Pagination ── */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: rgba(45, 27, 78, 0.3) !important;
  color: var(--text-light) !important;
  border-color: rgba(139, 168, 136, 0.2) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--sage-green) !important;
  color: var(--deep-navy) !important;
}

/* ── Category Filter Tags ── */
.product-categories li a {
  color: var(--text-light);
  padding: 5px 12px;
  border: 1px solid rgba(139, 168, 136, 0.2);
  border-radius: 20px;
  font-size: 0.85rem;
  transition: all 0.3s;
}

.product-categories li a:hover,
.product-categories li.current-cat a {
  border-color: var(--sage-green);
  color: var(--sage-green);
}

/* ── Quantity Input ── */
.woocommerce .quantity .qty {
  background: rgba(45, 27, 78, 0.3) !important;
  border: 1px solid rgba(139, 168, 136, 0.2) !important;
  color: var(--text-light) !important;
}

/* ── Star Rating ── */
.woocommerce .star-rating span::before {
  color: var(--gold) !important;
}

/* ── Sale Badge ── */
.woocommerce span.onsale {
  background: var(--crystal-purple) !important;
  color: var(--cream) !important;
  font-family: 'Cinzel', serif;
}

/* ── Sorting & Results Count ── */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  background: rgba(45, 27, 78, 0.3) !important;
  border: 1px solid rgba(139, 168, 136, 0.2) !important;
  color: var(--text-light) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 0.9rem !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  cursor: pointer;
}

.woocommerce .woocommerce-ordering select:focus {
  border-color: var(--sage-green) !important;
  outline: none;
}

.woocommerce .woocommerce-result-count {
  color: var(--text-dim) !important;
  font-size: 0.85rem !important;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  padding: 0 30px !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 15px;
  }

  .site-header {
    padding: 10px 15px;
  }
}

@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--deep-navy); }
::-webkit-scrollbar-thumb { background: var(--sage-green); border-radius: 3px; }

/* ── Selection ── */
::selection {
  background: var(--crystal-purple);
  color: var(--cream);
}

/* ── Override parent theme backgrounds ── */
body.woocommerce,
body.woocommerce-page,
.site-content,
.content-area,
main,
#main,
#content,
.entry-content {
  background: var(--deep-navy) !important;
  color: var(--text-light);
}

/* ── WooCommerce Block Cart & Checkout (new style) ── */
.wc-block-cart,
.wc-block-checkout,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  background: var(--deep-navy) !important;
  color: var(--text-light) !important;
}

.wc-block-cart .wc-block-cart__main,
.wc-block-cart .wc-block-cart__sidebar {
  color: var(--text-light) !important;
}

.wc-block-cart h2,
.wc-block-checkout h2,
.wc-block-cart__heading,
.wc-block-components-title {
  color: var(--cream) !important;
  font-family: 'Cinzel', serif !important;
}

/* Block Cart table */
.wc-block-cart-items .wc-block-cart-items__row {
  border-bottom: 1px solid rgba(139, 168, 136, 0.15) !important;
}

.wc-block-cart-items .wc-block-cart-items__row * {
  color: var(--text-light) !important;
}

.wc-block-components-product-name {
  color: var(--cream) !important;
}

.wc-block-components-product-price,
.wc-block-components-totals-item__value {
  color: var(--gold) !important;
}

/* Block Cart inputs */
.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  background: rgba(45, 27, 78, 0.3) !important;
  border-color: rgba(139, 168, 136, 0.2) !important;
  color: var(--text-light) !important;
}

/* Proceed to Checkout - Block Cart */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container a,
.wc-block-components-checkout-place-order-button,
a.wc-block-cart__submit-button {
  background: transparent !important;
  color: var(--sage-green) !important;
  border: 1px solid var(--sage-green) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 12px 30px !important;
  border-radius: 25px !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
}

.wc-block-cart__submit-button:hover,
a.wc-block-cart__submit-button:hover {
  background: rgba(139, 168, 136, 0.15) !important;
  color: var(--light-sage) !important;
  border-color: var(--light-sage) !important;
}

/* Block Checkout inputs */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea,
.wc-block-checkout select {
  background: rgba(45, 27, 78, 0.3) !important;
  border-color: rgba(139, 168, 136, 0.2) !important;
  color: var(--text-light) !important;
}

.wc-block-checkout label,
.wc-block-components-text-input label {
  color: var(--text-dim) !important;
}

/* Cart totals sidebar */
.wc-block-components-totals-wrapper,
.wc-block-components-panel {
  border-color: rgba(139, 168, 136, 0.15) !important;
}

.wc-block-components-totals-item__label {
  color: var(--text-light) !important;
}

/* Remove item link */
.wc-block-cart-item__remove-link {
  color: var(--soft-pink) !important;
}

/* ── Hide default WP elements we don't need ── */
.wp-block-post-content > p:empty {
  display: none;
}

/* ── Category Filter Hover (inline styles in archive-product.php, but also for widget) ── */
.cat-filter-btn {
  padding: 6px 16px;
  border: 1px solid rgba(139, 168, 136, 0.2);
  border-radius: 20px;
  font-size: 0.8rem;
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-light);
  text-decoration: none;
  transition: all 0.3s;
  display: inline-block;
}

.cat-filter-btn:hover {
  border-color: var(--sage-green) !important;
  color: var(--sage-green) !important;
  background: rgba(139, 168, 136, 0.1);
}

.cat-filter-btn.active {
  border-color: var(--sage-green);
  color: var(--sage-green);
  background: rgba(139, 168, 136, 0.15);
}

/* ── Added to Cart button state ── */
.woocommerce ul.products li.product .button.added {
  background: rgba(139, 168, 136, 0.15) !important;
  color: var(--sage-green) !important;
  border: 1px solid var(--sage-green) !important;
}

.woocommerce ul.products li.product .button.added::after {
  content: ' ✓';
}

/* ── View Cart link after adding ── */
.woocommerce ul.products li.product .added_to_cart {
  display: block !important;
  background: var(--gold) !important;
  color: var(--deep-navy) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 8px 20px !important;
  margin: 5px 15px 15px !important;
  border-radius: 2px !important;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s;
}

.woocommerce ul.products li.product .added_to_cart:hover {
  background: #e0b84d !important;
  box-shadow: 0 5px 15px rgba(212, 168, 67, 0.3);
}

/* ── Proceed to Checkout button ── */
.woocommerce .cart-collaterals .checkout-button,
.woocommerce a.checkout-button,
.wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout a {
  background: linear-gradient(135deg, var(--sage-green), var(--crystal-green)) !important;
  color: var(--deep-navy) !important;
  border: none !important;
  font-family: 'Cinzel', serif !important;
  font-size: 0.9rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  padding: 15px 30px !important;
  border-radius: 2px !important;
  display: block;
  text-align: center;
  transition: all 0.3s;
}

.woocommerce .wc-proceed-to-checkout a:hover {
  box-shadow: 0 5px 25px rgba(255, 255, 255, 0.2) !important;
  border-color: var(--cream) !important;
}