/* ============================================
   CrystMood — Luxury Dark Brand Styles v2.0
   Matches https://crystmood.com/ (luxe landing page)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --cm-bg-deep: #0A0718;
  --cm-bg-surface: #120E24;
  --cm-bg-card: #1A1530;
  --cm-gold: #C8A279;
  --cm-gold-light: #E8D5C4;
  --cm-gold-glow: rgba(200,162,121,0.3);
  --cm-purple: #8B5CF6;
  --cm-purple-glow: rgba(139,92,246,0.4);
  --cm-text: #F0EDF5;
  --cm-text-dim: #8A84A0;
  --cm-text-muted: #5C5780;
  --cm-border: rgba(255,255,255,0.06);
  --cm-radius: 4px;
  --cm-transition: 0.35s cubic-bezier(0.25,0.1,0.25,1);
}

/* ============================================
   STOREFRONT CONTAINER OVERRIDES
   ============================================ */

body, .home.blog, .home.page:not(.page-template-template-homepage), 
.post-type-archive-product, .woocommerce-page {
  background: var(--cm-bg-deep) !important;
  color: var(--cm-text);
}

/* Aggressive: override all Storefront white surfaces */
.site-content,
.content-area,
#primary,
.widget-area,
.col-full,
.hentry,
.entry-content,
.site-main,
.storefront-breadcrumb,
.woocommerce-products-header,
.woocommerce-products-header__title,
.woocommerce-breadcrumb,
.page-template-template-homepage .site-main,
.page-template-template-homepage .content-area,
.post-type-archive-product .site-main,
.woocommerce-shop .site-main,
.single-product .site-main,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
  background: transparent !important;
  color: var(--cm-text);
}

/* Storefront's .col-full with white bg */
.col-full {
  background: transparent !important;
}

/* Page title areas */
.woocommerce-products-header {
  border-bottom: 1px solid var(--cm-border);
  padding-bottom: 20px;
  margin-bottom: 30px;
}
.woocommerce-products-header__title,
.page-title {
  font-family: 'Cinzel', serif;
  color: var(--cm-text);
}

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

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', Georgia, serif !important;
  font-weight: 600;
  color: var(--cm-text) !important;
  line-height: 1.3;
  letter-spacing: 0.5px;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

a {
  color: var(--cm-gold);
  text-decoration: none;
  transition: color var(--cm-transition);
}
a:hover { color: var(--cm-gold-light); }

p, li, td, th, label, .woocommerce-info, .woocommerce-message {
  color: var(--cm-text-dim);
}
p { margin-bottom: 1.2em; }

/* ============================================
   SITE HEADER & NAV
   ============================================ */

.site-header {
  background: rgba(10,7,24,0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cm-border);
}

.site-branding .site-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: 2px;
}
.site-branding .site-title a { color: var(--cm-gold) !important; }
.site-branding .site-title a:hover { color: var(--cm-gold-light) !important; }
.site-branding .site-description { display: none; }

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 500;
  color: var(--cm-text-dim) !important;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 8px 16px; border-radius: var(--cm-radius);
  transition: all var(--cm-transition);
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover {
  color: var(--cm-gold) !important;
  background: transparent !important;
}
.main-navigation ul.menu > li.current-menu-item > a {
  color: var(--cm-gold) !important;
  font-weight: 600; background: transparent !important;
}

/* Hamburger menu on mobile */
button.menu-toggle {
  color: var(--cm-text-dim);
}
button.menu-toggle:hover { color: var(--cm-gold); }

.site-search .search-field {
  background: var(--cm-bg-card) !important;
  border: 1px solid var(--cm-border) !important;
  border-radius: var(--cm-radius);
  color: var(--cm-text) !important;
  padding: 8px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
}
.site-search .search-field:focus {
  border-color: var(--cm-gold) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--cm-gold-glow);
}

.site-header-cart .cart-contents { color: var(--cm-text-dim); }
.site-header-cart .cart-contents:hover { color: var(--cm-gold); }
.site-header-cart .cart-contents .count {
  background: var(--cm-gold);
  color: var(--cm-bg-deep);
  border-radius: 50%;
  font-size: 0.7rem; font-weight: 700;
  min-width: 18px; height: 18px; line-height: 18px;
}

/* Handheld footer */
.storefront-handheld-footer-bar {
  background: var(--cm-bg-surface);
  border-top: 1px solid var(--cm-border);
}
.storefront-handheld-footer-bar ul li a { color: var(--cm-text-dim); }
.storefront-handheld-footer-bar ul li a:hover { color: var(--cm-gold); }

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

.button, button,
input[type="button"], input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button,
.wp-block-button__link,
.added_to_cart {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600; font-size: 0.9rem;
  padding: 12px 28px;
  border-radius: var(--cm-radius) !important;
  border: none !important;
  background: var(--cm-gold) !important;
  color: var(--cm-bg-deep) !important;
  transition: all var(--cm-transition) !important;
  box-shadow: 0 2px 8px var(--cm-gold-glow);
  cursor: pointer; text-transform: none;
  letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.button:hover, button:hover,
input[type="button"]:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
  background: #D4A574 !important; transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--cm-gold-glow);
  color: var(--cm-bg-deep) !important;
}

/* Ghost buttons */
.button.alt, .woocommerce a.button.alt {
  background: transparent !important;
  border: 1.5px solid var(--cm-gold) !important;
  color: var(--cm-gold) !important;
  box-shadow: none;
}
.button.alt:hover, .woocommerce a.button.alt:hover {
  background: var(--cm-gold) !important;
  color: var(--cm-bg-deep) !important;
}

/* Checkout button — keep distinct */
.woocommerce-checkout .button.alt,
#place_order {
  background: var(--cm-gold) !important;
  color: var(--cm-bg-deep) !important;
  font-size: 1.1rem; padding: 16px 36px;
}

/* ============================================
   WOOCOMMERCE NOTICES
   ============================================ */

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--cm-bg-card) !important;
  border: 1px solid var(--cm-border);
  color: var(--cm-text) !important;
  border-radius: var(--cm-radius);
}
.woocommerce-message::before { color: var(--cm-gold) !important; }
.woocommerce-info::before { color: var(--cm-purple) !important; }
.woocommerce-error::before { color: #EF4444 !important; }

/* ============================================
   PRODUCT CARDS — Shop / Archive
   ============================================ */

.woocommerce ul.products li.product,
.wc-block-grid__product,
li.product.type-product {
  background: var(--cm-bg-card) !important;
  border-radius: var(--cm-radius);
  border: 1px solid var(--cm-border) !important;
  overflow: hidden;
  transition: all var(--cm-transition);
  position: relative;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-8px);
  border-color: var(--cm-gold) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px var(--cm-gold);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
  font-family: 'Cinzel', serif !important;
  font-size: 1rem; font-weight: 600;
  color: var(--cm-text) !important;
  padding: 16px 16px 4px;
}
.woocommerce ul.products li.product .price {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600; color: var(--cm-gold) !important;
  font-size: 1.1rem; padding: 0 16px 16px;
}
.woocommerce ul.products li.product .price del { color: var(--cm-text-muted); }
.woocommerce ul.products li.product .button {
  margin: 0 16px 16px; width: calc(100% - 32px);
  text-align: center; justify-content: center;
}
.woocommerce ul.products li.product img {
  border-radius: var(--cm-radius) var(--cm-radius) 0 0;
}

/* On-sale badge */
.woocommerce span.onsale {
  background: var(--cm-gold) !important;
  color: var(--cm-bg-deep) !important;
  font-weight: 700; border-radius: var(--cm-radius);
  padding: 4px 12px; font-size: 0.8rem;
  top: 12px; left: 12px;
}

/* Star ratings */
.woocommerce .star-rating span::before { color: var(--cm-gold) !important; }
.woocommerce .star-rating::before { color: var(--cm-text-muted); }

/* ============================================
   SINGLE PRODUCT PAGE
   ============================================ */

.single-product .product .product_title {
  font-family: 'Cinzel', serif !important;
  font-size: 2rem; font-weight: 700;
  color: var(--cm-text) !important;
}
.single-product .product .price {
  font-size: 1.5rem; color: var(--cm-gold) !important; font-weight: 700;
}
.single-product .product .price del { color: var(--cm-text-muted); }
.single-product .product .woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
  color: var(--cm-text-dim); line-height: 1.8;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--cm-border) !important;
  padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom: 1px solid var(--cm-border) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: none !important; background: transparent !important;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-weight: 500; color: var(--cm-text-dim) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--cm-gold) !important;
  border-bottom: 2px solid var(--cm-gold);
}
.woocommerce div.product .woocommerce-tabs .panel {
  color: var(--cm-text-dim);
  background: transparent;
  border: 1px solid var(--cm-border);
  border-top: none;
  padding: 24px;
  border-radius: 0 0 var(--cm-radius) var(--cm-radius);
}

/* Quantity */
.woocommerce .quantity .qty {
  background: var(--cm-bg-card) !important;
  border: 1px solid var(--cm-border) !important;
  color: var(--cm-text) !important;
  border-radius: var(--cm-radius);
}
.woocommerce .quantity .plus, .woocommerce .quantity .minus {
  background: var(--cm-bg-card) !important;
  color: var(--cm-text) !important;
}

/* Product gallery */
.woocommerce div.product div.images .flex-control-thumbs li img {
  border: 1px solid var(--cm-border);
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: var(--cm-gold);
}

/* ============================================
   SHOP / ARCHIVE
   ============================================ */

/* Result count */
.woocommerce-result-count { color: var(--cm-text-dim); }

/* Ordering dropdown */
.woocommerce-ordering select {
  background: var(--cm-bg-card) !important;
  border: 1px solid var(--cm-border) !important;
  border-radius: var(--cm-radius);
  color: var(--cm-text) !important;
  padding: 8px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: var(--cm-radius); padding: 8px 14px;
  color: var(--cm-text-dim) !important;
  background: var(--cm-bg-card) !important;
  border: 1px solid var(--cm-border);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--cm-gold) !important;
  color: var(--cm-bg-deep) !important;
  border-color: var(--cm-gold);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--cm-bg-surface) !important;
  color: var(--cm-gold) !important;
}

/* ============================================
   CART & CHECKOUT
   ============================================ */

.woocommerce-cart table.cart img { border-radius: var(--cm-radius); }

.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  background: transparent !important;
}
.woocommerce table.shop_table {
  border: 1px solid var(--cm-border) !important;
  border-radius: var(--cm-radius);
}
.woocommerce table.shop_table thead th {
  background: var(--cm-bg-card) !important;
  color: var(--cm-text-dim);
  font-weight: 500; font-family: 'DM Sans', sans-serif;
  border-bottom: 1px solid var(--cm-border);
}
.woocommerce table.shop_table tbody td {
  color: var(--cm-text);
  border-top: 1px solid var(--cm-border);
  background: var(--cm-bg-card) !important;
}

/* Cart totals */
.woocommerce .cart_totals,
.cart-collaterals .cart_totals {
  background: var(--cm-bg-card) !important;
  border: 1px solid var(--cm-border) !important;
  border-radius: var(--cm-radius);
  padding: 24px;
}
.woocommerce .cart_totals h2 {
  font-family: 'Cinzel', serif;
  color: var(--cm-text) !important;
}
.woocommerce .cart_totals table th {
  color: var(--cm-text-dim);
}
.woocommerce .cart_totals table td {
  color: var(--cm-text);
}

/* Coupon form */
.woocommerce .coupon .input-text {
  background: var(--cm-bg-card) !important;
  border: 1px solid var(--cm-border) !important;
  border-radius: var(--cm-radius);
  color: var(--cm-text) !important;
  padding: 10px 14px;
}

/* Checkout form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
  background: var(--cm-bg-card) !important;
  border: 1px solid var(--cm-border) !important;
  border-radius: var(--cm-radius) !important;
  color: var(--cm-text) !important;
  font-family: 'DM Sans', sans-serif;
  padding: 10px 14px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--cm-gold) !important;
  box-shadow: 0 0 0 3px var(--cm-gold-glow);
}
.woocommerce form .form-row label {
  color: var(--cm-text-dim);
  font-weight: 500;
}

/* Checkout sections */
.woocommerce-checkout-review-order-table {
  background: var(--cm-bg-card) !important;
  border: 1px solid var(--cm-border);
}
.woocommerce-checkout #payment {
  background: var(--cm-bg-card) !important;
  border-radius: var(--cm-radius);
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--cm-bg-surface) !important;
  color: var(--cm-text-dim);
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--cm-bg-surface) !important;
}

/* ============================================
   ACCOUNT PAGES
   ============================================ */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  background: var(--cm-bg-card);
  border-radius: var(--cm-radius);
  border: 1px solid var(--cm-border);
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--cm-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  color: var(--cm-text-dim); padding: 12px 20px; display: block;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--cm-gold); font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content {
  color: var(--cm-text);
}

/* ============================================
   HERO BLOCKS (WordPress Cover blocks)
   ============================================ */

.wp-block-cover,
.wp-block-cover-image {
  background-color: var(--cm-bg-surface) !important;
}
.wp-block-cover.has-background-dim {
  background-color: var(--cm-bg-surface) !important;
}
.wp-block-cover__inner-container {
  color: var(--cm-text);
}
.cm-hero {
  background: linear-gradient(135deg, #1A1530 0%, #2D1B4E 50%, #0A0718 100%);
  color: var(--cm-text);
  text-align: center;
  padding: 120px 24px 100px;
  position: relative;
  overflow: hidden;
}
.cm-hero h1, .cm-hero h2 {
  font-family: 'Cinzel', serif !important;
  font-weight: 700; font-size: 3rem;
  color: var(--cm-text) !important;
  max-width: 700px; margin: 0 auto 20px;
}
.cm-hero p {
  font-size: 1.15rem; color: var(--cm-text-dim);
  max-width: 560px; margin: 0 auto 32px;
}

/* ============================================
   SECTIONS & CONTENT BLOCKS
   ============================================ */

.hentry .entry-content,
.entry-content {
  background: transparent !important;
}
.cm-feature-card,
.wp-block-column.has-background,
.wp-block-group.has-background {
  background: var(--cm-bg-card) !important;
  border-radius: var(--cm-radius);
  padding: 32px 24px;
  border: 1px solid var(--cm-border);
  transition: all var(--cm-transition);
}
.cm-feature-card:hover,
.wp-block-column.has-background:hover {
  transform: translateY(-4px);
  border-color: var(--cm-gold);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* ============================================
   WIDGETS / SIDEBAR
   ============================================ */

.widget {
  background: var(--cm-bg-card);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  padding: 24px;
  margin-bottom: 24px;
}
.widget-title {
  font-family: 'Cinzel', serif !important;
  color: var(--cm-gold) !important;
  border-bottom: 1px solid var(--cm-border) !important;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.widget ul li {
  color: var(--cm-text-dim);
  border-bottom: 1px solid var(--cm-border);
  padding: 8px 0;
}
.widget ul li a { color: var(--cm-text-dim); }
.widget ul li a:hover { color: var(--cm-gold); }

/* Product search widget */
.widget_product_search .search-field {
  background: var(--cm-bg-surface) !important;
  border: 1px solid var(--cm-border) !important;
  color: var(--cm-text) !important;
}

/* Price filter */
.widget_price_filter .ui-slider .ui-slider-range {
  background: var(--cm-gold) !important;
}
.widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--cm-gold) !important;
}
.widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: var(--cm-bg-surface);
}

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

.site-footer {
  background: var(--cm-bg-surface) !important;
  color: var(--cm-text-dim);
  padding: 60px 0 40px;
  margin-top: 80px;
  border-top: 1px solid var(--cm-border);
}
.site-footer a { color: var(--cm-text); }
.site-footer a:hover { color: var(--cm-gold); }
.site-footer .widget-title {
  font-family: 'Cinzel', serif !important;
  color: var(--cm-gold) !important;
  border: none !important; margin-bottom: 16px;
  letter-spacing: 1px; font-size: 0.9rem;
}
.site-info {
  border-top: 1px solid var(--cm-border);
  padding-top: 24px; margin-top: 40px;
  text-align: center; font-size: 0.85rem;
  color: var(--cm-text-muted);
}

/* ============================================
   RELATED PRODUCTS
   ============================================ */

.woocommerce .related.products h2,
.woocommerce .upsells.products h2 {
  font-family: 'Cinzel', serif !important;
  color: var(--cm-text) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  h1, .cm-hero h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .cm-hero { padding: 60px 20px 50px; }
  .site-branding .site-title { font-size: 1.1rem; }
  .hentry .entry-content > * { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
  h1, .cm-hero h1 { font-size: 1.6rem; }
  .cm-hero p { font-size: 1rem; }
}