/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: D3Spool Morandi & Dark Tech Design System (d3-04-blocksy-store standard)
Author: D3 Engineering
Template: blocksy
Version: 2.0.0
Text Domain: blocksy-child
*/

/* ==========================================================================
   1. DESIGN TOKENS ARCHITECTURE (DEFAULT: MORANDI 01 - SAGE & TERRACOTTA)
   ========================================================================== */

:root, body[data-d3-palette="morandi-01"], body.palette-morandi-01 {
  /* Canvas & Surfaces (Nordic Micro-cement Basalt) */
  --d3-canvas: #13171A;
  --d3-surface: #191E23;
  --d3-surface-card: #1C2228;
  --d3-surface-elev: #222A31;
  --d3-border: #252C34;
  --d3-border-light: rgba(125, 157, 139, 0.18);

  /* Morandi M1 Tri-Color Palette */
  --d3-primary: #7D9D8B;          /* Muted Sage Green 鼠尾草灰绿 */
  --d3-primary-glow: rgba(125, 157, 139, 0.35);
  --d3-primary-text: #13171A;     /* High-contrast text on primary */
  
  --d3-secondary: #C48B71;        /* Dusty Terracotta 哑光陶土橘 */
  --d3-secondary-glow: rgba(196, 139, 113, 0.35);
  
  --d3-tertiary: #6B8299;         /* Mist Slate Blue 烟雾板岩灰蓝 */
  --d3-alert: #D97762;

  /* Typography Colors */
  --d3-text-headline: #FFFFFF;
  --d3-text-body: #DCE3E8;
  --d3-text-muted: #8B97A1;
  --d3-badge-bg: rgba(125, 157, 139, 0.14);
  --d3-badge-border: rgba(125, 157, 139, 0.35);

  /* Blocksy Native Palette Overrides */
  --theme-palette-color-1: #7D9D8B;
  --theme-palette-color-2: #C48B71;
  --theme-palette-color-3: #6B8299;
  --theme-palette-color-8: #13171A;
  --theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --theme-heading-font-family: 'Space Grotesk', -apple-system, sans-serif;
}

/* ==========================================================================
   OPTIONAL PALETTES (SWITCHABLE VIA DATA ATTRIBUTE OR COOKIE)
   ========================================================================== */

/* Morandi M2: Glacial Mist & Warm Oat */
body[data-d3-palette="morandi-02"], body.palette-morandi-02 {
  --d3-canvas: #14171C;
  --d3-surface: #1A1F26;
  --d3-surface-card: #1D232C;
  --d3-surface-elev: #232A33;
  --d3-border: #262E39;
  --d3-border-light: rgba(108, 139, 153, 0.18);
  --d3-primary: #6C8B99;          /* Glacial Frost Blue */
  --d3-primary-glow: rgba(108, 139, 153, 0.35);
  --d3-primary-text: #14171C;
  --d3-secondary: #BFA894;        /* Warm Oat Sand */
  --d3-secondary-glow: rgba(191, 168, 148, 0.35);
  --d3-tertiary: #B87D7D;         /* Dusty Coral Blush */
  --d3-text-headline: #FFFFFF;
  --d3-text-body: #DCE3E8;
  --d3-text-muted: #8E97A4;
  --d3-badge-bg: rgba(108, 139, 153, 0.14);
  --d3-badge-border: rgba(108, 139, 153, 0.35);
  --theme-palette-color-1: #6C8B99;
  --theme-palette-color-2: #BFA894;
}

/* Morandi M3: Dusk Olive & Antique Brass */
body[data-d3-palette="morandi-03"], body.palette-morandi-03 {
  --d3-canvas: #151614;
  --d3-surface: #1C1D1A;
  --d3-surface-card: #20211D;
  --d3-surface-elev: #252722;
  --d3-border: #2B2D27;
  --d3-border-light: rgba(130, 142, 116, 0.18);
  --d3-primary: #828E74;          /* Dusk Olive Green */
  --d3-primary-glow: rgba(130, 142, 116, 0.35);
  --d3-primary-text: #151614;
  --d3-secondary: #BFA26F;        /* Antique Brass Gold */
  --d3-secondary-glow: rgba(191, 162, 111, 0.35);
  --d3-tertiary: #6B7A8C;         /* Storm Grey Blue */
  --d3-text-headline: #FFFFFF;
  --d3-text-body: #DCE0D6;
  --d3-text-muted: #909489;
  --d3-badge-bg: rgba(130, 142, 116, 0.14);
  --d3-badge-border: rgba(130, 142, 116, 0.35);
  --theme-palette-color-1: #828E74;
  --theme-palette-color-2: #BFA26F;
}

/* Morandi M4: Smoked Lilac & Sea Salt */
body[data-d3-palette="morandi-04"], body.palette-morandi-04 {
  --d3-canvas: #15131A;
  --d3-surface: #1C1823;
  --d3-surface-card: #201C29;
  --d3-surface-elev: #252030;
  --d3-border: #2B2435;
  --d3-border-light: rgba(150, 135, 158, 0.18);
  --d3-primary: #96879E;          /* Smoked Lilac */
  --d3-primary-glow: rgba(150, 135, 158, 0.35);
  --d3-primary-text: #15131A;
  --d3-secondary: #789B94;        /* Sea Salt Celadon */
  --d3-secondary-glow: rgba(120, 155, 148, 0.35);
  --d3-tertiary: #C79A7D;         /* Muted Apricot */
  --d3-text-headline: #FFFFFF;
  --d3-text-body: #E1DAE6;
  --d3-text-muted: #908A9D;
  --d3-badge-bg: rgba(150, 135, 158, 0.14);
  --d3-badge-border: rgba(150, 135, 158, 0.35);
  --theme-palette-color-1: #96879E;
  --theme-palette-color-2: #789B94;
}

/* Cyber Neon: Laser Cyan */
body[data-d3-palette="neon-cyan"], body.palette-neon-cyan {
  --d3-canvas: #090D16;
  --d3-surface: #121721;
  --d3-surface-card: #182030;
  --d3-surface-elev: #1C2433;
  --d3-border: #1C2433;
  --d3-border-light: rgba(0, 229, 255, 0.18);
  --d3-primary: #00E5FF;
  --d3-primary-glow: rgba(0, 229, 255, 0.45);
  --d3-primary-text: #000000;
  --d3-secondary: #0088FF;
  --d3-secondary-glow: rgba(0, 136, 255, 0.4);
  --d3-tertiary: #FF0055;
  --d3-text-headline: #FFFFFF;
  --d3-text-body: #CBD5E1;
  --d3-text-muted: #64748B;
  --d3-badge-bg: rgba(0, 229, 255, 0.12);
  --d3-badge-border: rgba(0, 229, 255, 0.35);
  --theme-palette-color-1: #00E5FF;
  --theme-palette-color-2: #0088FF;
}

/* ==========================================================================
   2. GLOBAL BODY & CANVASES
   ========================================================================== */

html, body {
  background-color: var(--d3-canvas) !important;
  color: var(--d3-text-body) !important;
  font-family: var(--theme-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#main-container, .site-main, .entry-content, main {
  background-color: transparent !important;
}

/* ==========================================================================
   3. STICKY GLASSMORPHISM HEADER (STRICT RULE)
   ========================================================================== */

header#header, .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background-color: rgba(19, 23, 26, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--d3-border) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

body[data-d3-palette="morandi-02"] header#header {
  background-color: rgba(20, 23, 28, 0.88) !important;
}
body[data-d3-palette="morandi-03"] header#header {
  background-color: rgba(21, 22, 20, 0.88) !important;
}
body[data-d3-palette="morandi-04"] header#header {
  background-color: rgba(21, 19, 26, 0.88) !important;
}
body[data-d3-palette="neon-cyan"] header#header {
  background-color: rgba(9, 13, 22, 0.88) !important;
}

/* Navigation items styling */
.site-header a, .site-header .menu-item a {
  color: var(--d3-text-body) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}
.site-header a:hover, .site-header .menu-item a:hover {
  color: var(--d3-primary) !important;
}

/* ==========================================================================
   4. HEADER CART ITEM: STRICT RULE (NO DIRECT DOLLAR AMOUNT)
   ========================================================================== */

/* Hide raw dollar text ($0.00) completely */
.ct-header-cart .ct-label,
.ct-header-cart .ct-amount,
.ct-header-cart [data-price="yes"] {
  display: none !important;
}

/* Style cart SVG icon */
.ct-header-cart .ct-cart-item svg,
.ct-header-cart svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  width: 20px !important;
  height: 20px !important;
  transition: color 0.2s ease, stroke 0.2s ease;
}
.ct-header-cart:hover .ct-cart-item svg {
  color: var(--d3-primary) !important;
  stroke: var(--d3-primary) !important;
}

/* Dynamic Count Badge Badge */
.ct-header-cart .ct-cart-item [data-count],
.ct-header-cart .ct-badge {
  background-color: var(--d3-primary) !important;
  color: var(--d3-primary-text) !important;
  font-family: 'JetBrains Mono', Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px var(--d3-primary-glow) !important;
  border: none !important;
}

/* User Account Icon Link */
.d3-header-account-link svg {
  color: #FFFFFF !important;
  transition: color 0.2s ease;
}
.d3-header-account-link:hover svg {
  color: var(--d3-primary) !important;
}

/* ==========================================================================
   5. PRODUCT CARDS (4:5 RATIO & NESTED RADIUS)
   ========================================================================== */

.woocommerce ul.products li.product,
.entry-card {
  background: var(--d3-surface) !important;
  border: 1px solid var(--d3-border) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
  overflow: hidden;
}

.woocommerce ul.products li.product:hover,
.entry-card:hover {
  transform: translateY(-4px);
  border-color: var(--d3-primary) !important;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.5), 0 0 14px var(--d3-primary-glow) !important;
}

/* Inner Media Container */
.woocommerce ul.products li.product .ct-image-container,
.entry-card .ct-media-container {
  border-radius: 8px !important;
  background: var(--d3-canvas) !important;
  overflow: hidden;
  border: 1px solid var(--d3-border) !important;
  aspect-ratio: 4 / 5;
}

/* Product Titles */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title {
  color: var(--d3-text-headline) !important;
  font-family: var(--theme-heading-font-family) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  margin-top: 10px !important;
}

/* Product Prices */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  color: var(--d3-secondary) !important;
  font-family: 'JetBrains Mono', Consolas, monospace !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: var(--d3-text-muted) !important;
  font-size: 12px !important;
}

/* Add to Cart Loop Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button.add_to_cart_button {
  background-color: var(--d3-primary) !important;
  color: var(--d3-primary-text) !important;
  border-radius: 8px !important;
  font-family: 'JetBrains Mono', Consolas, monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  border: none !important;
  padding: 8px 14px !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button.add_to_cart_button:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* ==========================================================================
   6. SINGLE PRODUCT PAGE ENHANCEMENT
   ========================================================================== */

.single-product .summary.entry-summary {
  background: var(--d3-surface) !important;
  border: 1px solid var(--d3-border) !important;
  border-radius: 16px !important;
  padding: 28px !important;
}

.single-product .product_title {
  color: var(--d3-text-headline) !important;
  font-family: var(--theme-heading-font-family) !important;
  font-weight: 700 !important;
}

.single-product button.single_add_to_cart_button {
  background-color: var(--d3-primary) !important;
  color: var(--d3-primary-text) !important;
  font-family: 'JetBrains Mono', Consolas, monospace !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: none !important;
  padding: 14px 28px !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.single-product button.single_add_to_cart_button:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Technical Specs Table */
.single-product table.shop_attributes {
  background: var(--d3-surface-card) !important;
  border: 1px solid var(--d3-border) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.single-product table.shop_attributes th,
.single-product table.shop_attributes td {
  border-bottom: 1px solid var(--d3-border) !important;
  color: var(--d3-text-body) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
}

/* ==========================================================================
   7. WOOCOMMERCE OFF-CANVAS CART DRAWER & CHECKOUT
   ========================================================================== */

.ct-offcanvas-cart, .ct-cart-content, .ct-drawer {
  background-color: var(--d3-surface) !important;
  border-left: 1px solid var(--d3-border) !important;
  color: var(--d3-text-body) !important;
}

.ct-cart-item-title, .ct-total-label {
  color: var(--d3-text-headline) !important;
}

/* Form Inputs & Checkout Fields */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea, select {
  background-color: var(--d3-surface-card) !important;
  border: 1px solid var(--d3-border) !important;
  color: var(--d3-text-body) !important;
  border-radius: 8px !important;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: var(--d3-primary) !important;
  outline: none !important;
  box-shadow: 0 0 8px var(--d3-primary-glow) !important;
}

/* Checkout Place Order Button */
#place_order, .woocommerce-checkout #place_order {
  background-color: var(--d3-primary) !important;
  color: var(--d3-primary-text) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: none !important;
  padding: 14px !important;
}

/* ==========================================================================
   8. FOOTER STYLING
   ========================================================================== */

footer.site-footer {
  background-color: var(--d3-canvas) !important;
  border-top: 1px solid var(--d3-border) !important;
  color: var(--d3-text-muted) !important;
}
footer.site-footer a {
  color: var(--d3-text-body) !important;
}
footer.site-footer a:hover {
  color: var(--d3-primary) !important;
}

/* ==========================================================================
   9. INTERACTIVE FLOATING PALETTE SWITCHER WIDGET
   ========================================================================== */

#d3-palette-switcher-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  background: var(--d3-surface-elev);
  border: 1px solid var(--d3-border);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: all 0.25s ease;
}

#d3-palette-switcher-pill:hover {
  border-color: var(--d3-primary);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 12px var(--d3-primary-glow);
}

.d3-pill-btn {
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--d3-text-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.d3-pill-select {
  background: transparent;
  border: none;
  color: var(--d3-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 12px 8px 4px;
  outline: none;
}
.d3-pill-select option {
  background-color: #191E23;
  color: #FFFFFF;
}