/*
Theme Name: Astra Child - Marisha Biser
Template: astra
Version: 2.0.0
Description: Child theme for Marisha Biser jewellery shop (Royal Purple & Gold Edition v2)
*/
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap");

/* =====================================================
   GLOBAL DESIGN SYSTEM
   ====================================================*/
:root {
  --color-bg:          #FAF6FE;
  --color-surface:     #F3E8FF;
  --color-card-bg:     #FFFFFF;
  --color-border:      #E9D5FF;
  --color-border-gold: #D4AF37;
  --color-primary:     #6B21A8;
  --color-primary-h:   #581C87;
  --color-accent:      #D4AF37;
  --color-accent-h:    #B8860B;
  --color-gold-grad:   linear-gradient(135deg, #F3E0A9 0%, #D4AF37 50%, #AA7C11 100%);
  --color-purple-grad: linear-gradient(135deg, #4A154B 0%, #6B21A8 50%, #9333EA 100%);
  --color-heading:     #2E073F;
  --color-text:        #4A2060;
  --color-muted:       #8B6B9E;
  --color-white:       #FFFFFF;
  --color-header-bg:   #2E073F;
  --color-footer-bg:   #1F032B;
  --font-heading:      "Playfair Display", serif;
  --font-body:         "Montserrat", sans-serif;
  --radius:            8px;
  --shadow-card:       0 4px 20px rgba(107,33,168,.08);
  --shadow-hover:      0 12px 32px rgba(107,33,168,.20);
  --transition:        all .3s cubic-bezier(.25, .8, .25, 1);
}

/* =====================================================
   SITE BACKGROUND IMAGE
   ====================================================*/
body, html {
  background-image: url('/wp-content/uploads/site-background.png') !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-attachment: fixed !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

/* Content areas need slight overlay for readability */
.site-content,
.ast-container,
#primary {
  background: rgba(250, 246, 254, 0.92) !important;
  border-radius: 0 !important;
}

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comment-respond {
  background: rgba(255,255,255,0.97) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-card) !important;
}

h1, h2, h3, h4, h5, h6,
.ast-shop-product-title,
.entry-title,
.woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
  color: var(--color-heading) !important;
}

a { color: var(--color-primary) !important; text-decoration: none !important; }
a:hover, a:focus { color: var(--color-accent) !important; }

::selection {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}

/* =====================================================
   HEADER & NAVIGATION
   ====================================================*/
.ast-primary-header-bar,
#ast-fixed-header,
.site-header {
  background: var(--color-header-bg) !important;
  border-bottom: 2px solid var(--color-accent) !important;
}
.site-title a,
.ast-site-identity a {
  color: var(--color-accent) !important;
  font-family: var(--font-heading) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
}
.main-header-menu .menu-link,
.ast-nav-menu .menu-link {
  color: #F3E8FF !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  transition: var(--transition) !important;
}
.main-header-menu .menu-link:hover,
.ast-nav-menu .menu-link:hover,
.main-header-menu .current-menu-item .menu-link {
  color: var(--color-accent) !important;
}
.ast-header-cart .count {
  background: var(--color-accent) !important;
  color: #1F032B !important;
  font-weight: 700 !important;
}

/* =====================================================
   BUTTONS
   ====================================================*/
.ast-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wp-block-button__link,
button.single_add_to_cart_button,
.woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--color-purple-grad) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: var(--radius) !important;
  padding: 12px 28px !important;
  transition: var(--transition) !important;
  box-shadow: 0 4px 14px rgba(107,33,168,.3) !important;
  cursor: pointer !important;
}
.ast-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
button.single_add_to_cart_button:hover,
.woocommerce #payment #place_order:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: var(--color-gold-grad) !important;
  color: #1F032B !important;
  border-color: #AA7C11 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(212,175,55,.4) !important;
}

/* =====================================================
   PRODUCT CARDS & CATALOG
   ====================================================*/
ul.products li.product {
  background: var(--color-card-bg) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--transition) !important;
  border: 1px solid var(--color-border) !important;
}
ul.products li.product:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--color-accent) !important;
}
ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  padding: 14px 16px 4px !important;
  color: var(--color-heading) !important;
  font-weight: 600 !important;
}
ul.products li.product .price {
  color: var(--color-primary) !important;
  font-family: var(--font-heading) !important;
  font-size: 18px !important;
  padding: 0 16px 12px !important;
  font-weight: 700 !important;
}
ul.products li.product .onsale {
  background: var(--color-gold-grad) !important;
  color: #1F032B !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
}

/* =====================================================
   TRUST BADGES
   ====================================================*/
.mbs-trust-badges {
  background: #FAF5FF !important;
  border: 1.5px solid var(--color-accent) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: 0 4px 16px rgba(107,33,168,0.06) !important;
}
.mbs-badge-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--color-heading) !important;
}
.mbs-badge-item .mbs-icon {
  font-size: 16px !important;
}

/* =====================================================
   SIDEBAR CATEGORY/PRICE/COLOR FILTERS
   ====================================================*/
#secondary {
  background: rgba(255,255,255,0.95) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

.widget_product_categories,
.widget_woocommerce_price_filter,
.widget_woocommerce_layered_nav {
  background: var(--color-card-bg) !important;
  border: 1px solid var(--color-border-gold) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-card) !important;
}
.widget_product_categories .widget-title,
.widget_woocommerce_price_filter .widget-title,
.widget_woocommerce_layered_nav .widget-title {
  font-family: var(--font-heading) !important;
  color: var(--color-heading) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--color-accent) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}
.widget_product_categories ul li {
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.widget_product_categories ul li a {
  color: var(--color-heading) !important;
  font-weight: 500 !important;
}
.widget_product_categories ul li .count {
  background: var(--color-surface) !important;
  color: var(--color-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  border: 1px solid var(--color-border-gold) !important;
}

/* Price filter slider */
.price_slider_wrapper .ui-slider {
  background: var(--color-border) !important;
}
.price_slider_wrapper .ui-slider .ui-slider-range {
  background: var(--color-primary) !important;
}
.price_slider_wrapper .ui-slider .ui-slider-handle {
  background: var(--color-accent) !important;
  border: 2px solid var(--color-primary) !important;
}

/* =====================================================
   CART VARIATION DROPDOWN
   ====================================================*/
.mbs-cart-variation-select select {
  border: 1.5px solid var(--color-border) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  color: var(--color-heading) !important;
  background: var(--color-surface) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}
.mbs-cart-variation-select select:hover {
  border-color: var(--color-accent) !important;
}

/* =====================================================
   CHECKOUT FORM
   ====================================================*/
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-heading) !important;
  color: var(--color-heading) !important;
  font-size: 22px !important;
  border-bottom: 2px solid var(--color-accent) !important;
  padding-bottom: 8px !important;
}
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  background: var(--color-card-bg) !important;
  color: var(--color-heading) !important;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(107,33,168,.15) !important;
}
#order_review {
  background: var(--color-card-bg) !important;
  border: 1px solid var(--color-border-gold) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: var(--shadow-card) !important;
}

/* =====================================================
   FOOTER
   ====================================================*/
#colophon, .site-footer {
  background: var(--color-footer-bg) !important;
  color: #E9D5FF !important;
  border-top: 2px solid var(--color-accent) !important;
}
#colophon a, .site-footer a { color: var(--color-accent) !important; }

/* =====================================================
   WOO MESSAGES / NOTICES
   ====================================================*/
.woocommerce-message {
  border-top-color: var(--color-accent) !important;
  background: #FAF5FF !important;
}
.woocommerce-message::before {
  color: var(--color-primary) !important;
}
.woocommerce-info {
  border-top-color: var(--color-primary) !important;
  background: #FAF5FF !important;
}
.woocommerce-error {
  border-top-color: #B91C1C !important;
}

/* =====================================================
   FORMS FOCUS COLORS (Purple, not brown)
   ====================================================*/
input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(107,33,168,.12) !important;
  outline: none !important;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
}

/* =====================================================
   PAGINATION
   ====================================================*/
.ast-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--color-primary) !important;
}

/* =====================================================
   RESPONSIVE
   ====================================================*/
@media (max-width: 768px) {
  #secondary {
    margin-top: 20px !important;
  }
  ul.products li.product {
    margin-bottom: 16px !important;
  }
}