/*
Theme Name: Virgo Vibe Child
Theme URI: https://www.virgovibe.com
Description: Virgo Vibe child theme - celestial dark design for WooCommerce
Author: Virgo Vibe
Author URI: https://www.virgovibe.com
Template: storefront
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: virgovibe-child
*/

/* ============================================================
   VIRGO VIBE — CELESTIAL DESIGN SYSTEM
   All styles override the Storefront parent theme
   ============================================================ */

/* ── GOOGLE FONTS (loaded via functions.php) ── */

/* ── CSS VARIABLES ── */
:root {
  --midnight:       #0D0A14;
  --deep-violet:    #1A1228;
  --violet-mid:     #2D1F4A;
  --amethyst:       #7B4FA6;
  --amethyst-light: #9F6DC4;
  --gold:           #C9A84C;
  --gold-light:     #E2C97E;
  --cream:          #F5F0E8;
  --soft-white:     #FAF8F5;
  --text-muted:     #A89BBF;
}

/* ── GLOBAL RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--midnight) !important;
  color: var(--cream) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
}

/* Starfield background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 30%, #1a0a2e 0%, #0D0A14 60%),
    radial-gradient(1.5px 1.5px at 10% 15%, rgba(232,213,163,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(232,213,163,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 8%, rgba(232,213,163,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 60%, rgba(232,213,163,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 25%, rgba(232,213,163,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 45%, rgba(232,213,163,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 10%, rgba(232,213,163,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 70%, rgba(232,213,163,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 80%, rgba(232,213,163,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 88%, rgba(232,213,163,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 35%, rgba(159,109,196,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 5% 50%, rgba(232,213,163,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 12%, rgba(232,213,163,0.4) 0%, transparent 100%);
}

a { color: var(--amethyst-light); }
a:hover { color: var(--gold-light); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  color: var(--soft-white) !important;
}

p { color: var(--text-muted); }

/* ── HEADER / NAV ── */
.site-header,
.storefront-sticky-add-to-cart,
header.site-header {
  background: rgba(13,10,20,0.95) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(123,79,166,0.2) !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .site-logo a,
.site-branding .site-title,
.site-branding .site-title a {
  font-family: 'Cinzel', serif !important;
  color: var(--gold) !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.12em !important;
  text-decoration: none !important;
}

.main-navigation ul li a,
.storefront-primary-navigation ul li a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  transition: color 0.2s !important;
}

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

/* Cart icon */
.site-header-cart .cart-contents,
.storefront-handheld-footer-bar .cart a {
  color: var(--amethyst-light) !important;
}

/* ── HERO / HOMEPAGE BANNER ── */
.hero-section,
.woocommerce-store-notice,
.storefront-hero {
  background: linear-gradient(135deg, var(--deep-violet), var(--midnight)) !important;
}

/* ── BUTTONS ── */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wc-proceed-to-checkout .checkout-button,
.single_add_to_cart_button,
.add_to_cart_button {
  background: linear-gradient(135deg, var(--amethyst), var(--amethyst-light)) !important;
  color: var(--soft-white) !important;
  border: none !important;
  border-radius: 2rem !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  padding: 0.75rem 1.8rem !important;
  transition: all 0.25s !important;
  box-shadow: 0 0 20px rgba(123,79,166,0.3) !important;
  text-transform: none !important;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
  background: linear-gradient(135deg, var(--amethyst-light), var(--amethyst)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 35px rgba(123,79,166,0.5) !important;
  color: var(--midnight) !important;
}

/* Secondary / outlined buttons */
.button.alt, .wc-backward {
  background: transparent !important;
  border: 1px solid rgba(201,168,76,0.4) !important;
  color: var(--gold-light) !important;
  box-shadow: none !important;
}

.button.alt:hover {
  background: rgba(201,168,76,0.08) !important;
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
  transform: translateY(-2px) !important;
}

/* ── PRODUCT CARDS ── */
ul.products li.product,
.woocommerce ul.products li.product {
  background: linear-gradient(145deg, var(--deep-violet), var(--violet-mid)) !important;
  border: 1px solid rgba(123,79,166,0.2) !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  transition: all 0.3s !important;
  padding: 0 !important;
}

ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(123,79,166,0.5) !important;
  box-shadow: 0 20px 60px rgba(123,79,166,0.2) !important;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.2rem !important;
  color: var(--soft-white) !important;
  padding: 1rem 1.2rem 0.3rem !important;
}

ul.products li.product .price,
.woocommerce ul.products li.product .price {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--gold-light) !important;
  font-size: 1.3rem !important;
  padding: 0 1.2rem !important;
}

ul.products li.product .price del {
  color: var(--text-muted) !important;
  opacity: 0.7;
}

ul.products li.product .button {
  margin: 1rem 1.2rem 1.2rem !important;
  display: block !important;
  text-align: center !important;
}

/* Product image area */
ul.products li.product a img,
.woocommerce ul.products li.product a img {
  border-radius: 0.75rem 0.75rem 0 0 !important;
  transition: transform 0.4s !important;
}

ul.products li.product:hover a img {
  transform: scale(1.03) !important;
}

/* Sale badge */
.woocommerce span.onsale {
  background: var(--gold) !important;
  color: var(--midnight) !important;
  border-radius: 2rem !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  min-width: auto !important;
  min-height: auto !important;
  padding: 0.3rem 0.8rem !important;
  line-height: 1.4 !important;
}

/* ── SINGLE PRODUCT PAGE ── */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--deep-violet) !important;
  border-color: rgba(123,79,166,0.2) !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--text-muted) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--gold-light) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--deep-violet) !important;
  border-color: rgba(123,79,166,0.2) !important;
  color: var(--text-muted) !important;
  border-radius: 0 0.5rem 0.5rem 0.5rem !important;
  padding: 2rem !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--gold-light) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2rem !important;
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before,
.woocommerce p.stars a:hover~a::before,
.woocommerce p.stars.selected a.active~a::before {
  color: var(--gold) !important;
}

/* ── FORMS & INPUTS ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background: rgba(13,10,20,0.6) !important;
  border: 1px solid rgba(123,79,166,0.35) !important;
  color: var(--cream) !important;
  border-radius: 0.5rem !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: border-color 0.2s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--amethyst-light) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(123,79,166,0.15) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}

/* ── SIDEBAR & WIDGETS ── */
.widget-area,
.storefront-sidebar {
  background: var(--deep-violet) !important;
  border: 1px solid rgba(123,79,166,0.15) !important;
  border-radius: 0.75rem !important;
  padding: 1.5rem !important;
}

.widget-title {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--gold-light) !important;
  font-size: 1.1rem !important;
  border-bottom: 1px solid rgba(123,79,166,0.2) !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1rem !important;
}

/* ── WC NOTICES ── */
.woocommerce-message,
.woocommerce-info {
  background: var(--violet-mid) !important;
  border-top-color: var(--amethyst) !important;
  color: var(--cream) !important;
  border-radius: 0.5rem !important;
}

.woocommerce-error {
  background: rgba(166,79,79,0.2) !important;
  border-top-color: #a64f4f !important;
  color: var(--cream) !important;
  border-radius: 0.5rem !important;
}

/* ── CART & CHECKOUT ── */
.woocommerce table.cart,
.woocommerce-cart-form table {
  background: var(--deep-violet) !important;
  border: 1px solid rgba(123,79,166,0.2) !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
}

.woocommerce table.cart td,
.woocommerce table.cart th {
  border-color: rgba(123,79,166,0.15) !important;
  color: var(--cream) !important;
}

.woocommerce table.cart th {
  background: rgba(45,31,74,0.5) !important;
  color: var(--gold-light) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--deep-violet) !important;
  border: 1px solid rgba(123,79,166,0.2) !important;
  border-radius: 0.75rem !important;
  padding: 2rem !important;
}

/* ── FOOTER ── */
.site-footer,
footer.site-footer {
  background: var(--deep-violet) !important;
  border-top: 1px solid rgba(123,79,166,0.2) !important;
  color: var(--text-muted) !important;
}

.site-footer a {
  color: var(--text-muted) !important;
}

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

.site-info {
  color: rgba(168,155,191,0.5) !important;
  font-size: 0.75rem !important;
}

/* ── BLOG / POSTS ── */
.hentry,
article.post {
  background: var(--deep-violet) !important;
  border: 1px solid rgba(123,79,166,0.15) !important;
  border-radius: 0.75rem !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
}

.entry-title a {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--soft-white) !important;
}

.entry-title a:hover {
  color: var(--amethyst-light) !important;
}

.entry-meta, .entry-footer {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
}

/* ── PAGINATION ── */
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.page-numbers a, .page-numbers span {
  background: var(--deep-violet) !important;
  border: 1px solid rgba(123,79,166,0.2) !important;
  color: var(--text-muted) !important;
  border-radius: 0.4rem !important;
}

.woocommerce-pagination ul li span.current,
.page-numbers span.current {
  background: var(--amethyst) !important;
  color: var(--soft-white) !important;
  border-color: var(--amethyst) !important;
}

/* ── BREADCRUMBS ── */
.woocommerce-breadcrumb {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
}

.woocommerce-breadcrumb a {
  color: var(--amethyst-light) !important;
}

/* ── SECTION HEADINGS (shop page) ── */
h1.page-title,
.woocommerce-products-header__title {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--soft-white) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 300 !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .storefront-handheld-footer-bar {
    background: rgba(13,10,20,0.97) !important;
    border-top: 1px solid rgba(123,79,166,0.3) !important;
  }

  .storefront-handheld-footer-bar ul li a {
    color: var(--text-muted) !important;
  }

  .storefront-handheld-footer-bar ul li.cart a {
    background: var(--amethyst) !important;
    color: var(--soft-white) !important;
    border-radius: 2rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}