/* store.css — implement per Phases 2/3/4/9 of _prompts/design-parity-implementation.md */
/* Reference: [DS_ROOT]/Hendr1kaDesignSystem/ui_kits/store/store.css */
/* Preview files: components-navbar.html, components-promo-strip.html, components-product-card.html */

/* ============================================================
   ANNOUNCE BAR
   ============================================================ */
.announce,
.wp-block-group.announce {
  position: relative;
  z-index: 60;
  background: var(--wp--preset--color--dark-bg, #0A0A0F);
  border-bottom: 1px solid rgba(255, 0, 128, 0.25);
  padding: 8px 24px;
  text-align: center;
}
.announce-text,
.announce p {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
  margin: 0;
}
.announce .pink { color: var(--wp--preset--color--neon-pink-hot, #FF0080); font-weight: 700; }

/* ============================================================
   CYBER NAV
   ============================================================ */
.cyber-nav,
.wp-block-group.cyber-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 10, 15, 0.96);
  border-bottom: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 2px 20px rgba(0, 255, 255, 0.15);
  backdrop-filter: blur(var(--blur-md, 12px));
  -webkit-backdrop-filter: blur(var(--blur-md, 12px));
  padding: 0 24px;
}
.cyber-nav > .wp-block-group {
  max-width: 80rem;
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo */
.store-brand img,
.wp-block-site-logo.store-brand img {
  filter: var(--filter-glow-cyan);
}

/* Nav links */
.cn-links .wp-block-navigation-item__content,
.cn-links a,
.cyber-nav .wp-block-navigation-item__content,
.cyber-nav .wp-block-navigation__submenu-icon {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 4px 8px !important;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cn-links .wp-block-navigation-item__content:hover,
.cn-links a:hover,
.cyber-nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  background: rgba(0, 255, 255, 0.12) !important;
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
  transform: translateY(-1px);
}
.cn-links .current-menu-item > a,
.cn-links .current-menu-item > .wp-block-navigation-item__content,
.cyber-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  background: rgba(255, 0, 128, 0.10) !important;
  border-color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 10px rgba(255, 0, 128, 0.7) !important;
}

/* Mobile nav drawer */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* Search in nav */
.cn-search .wp-block-search__inside-wrapper {
  background: rgba(26, 26, 36, 0.8);
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  border-radius: 4px;
}
.cn-search .wp-block-search__input {
  background: transparent;
  color: var(--wp--preset--color--fg-2, #E0E0E0);
  font-family: var(--font-body);
  font-size: 13px;
  border: none;
  outline: none;
}
.cn-search .wp-block-search__input::placeholder { color: var(--wp--preset--color--fg-5, #6B7280); }
.cn-search .wp-block-search__button {
  background: transparent;
  border: none;
  color: var(--wp--preset--color--fg-5, #6B7280);
  cursor: pointer;
}
.cn-search .wp-block-search__button:hover { color: var(--wp--preset--color--neon-cyan, #00FFFF); }

/* Mini-cart icon */
.cn-icon .wc-block-mini-cart__button {
  background: transparent;
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  border-radius: 6px;
  color: var(--wp--preset--color--fg-3, #D1D5DB);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.cn-icon .wc-block-mini-cart__button:hover {
  border-color: var(--wp--preset--color--neon-cyan, #00FFFF);
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
}
.cn-icon .wc-block-mini-cart__badge {
  background: var(--wp--preset--color--neon-pink-hot, #FF0080);
  color: #fff;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
}

/* ============================================================
   FOOTER
   ============================================================ */
.store-footer,
.wp-block-group.store-footer {
  background: var(--wp--preset--color--dark-surface, #12121A) !important;
  border-top: 2px solid var(--wp--preset--color--neon-pink-hot, #FF0080);
  padding: 40px 24px;
  margin-top: 40px;
}
.footer-cols { gap: 32px; }
.footer-col-brand .wp-block-site-logo img { width: 48px; height: auto; }
.footer-tagline {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--wp--preset--color--fg-5, #6B7280);
  margin-top: 12px;
  line-height: 1.5;
}
.footer-col-heading,
.wp-block-heading.footer-col-heading {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  margin-bottom: 12px !important;
  text-shadow: 0 0 8px rgba(255, 0, 128, 0.4);
}
.footer-nav a,
.footer-nav .wp-block-navigation-item__content {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  text-decoration: none;
  line-height: 2;
  transition: color var(--transition-fast);
}
.footer-nav a:hover,
.footer-nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
}
.footer-sep {
  border-color: var(--wp--preset--color--dark-border, #2A2A3A) !important;
  margin: 32px 0 24px;
}
.footer-copy {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--wp--preset--color--fg-5, #6B7280);
  margin: 0;
}
.footer-link {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-decoration: none;
}
.footer-link:hover { color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important; }

/* ============================================================
   SHOP HERO BANNER — Phase 4
   ============================================================ */
.shop-hero-banner {
  background: var(--wp--preset--color--dark-bg, #0A0A0F);
  border-bottom: 1px solid rgba(255, 0, 128, 0.18);
  padding: 56px 24px 40px;
  position: relative;
  overflow: hidden;
}

/* Diagonal ambient scanline overlay on hero */
.shop-hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 40px,
    rgba(0, 255, 255, 0.02) 40px, rgba(0, 255, 255, 0.02) 80px
  );
  pointer-events: none;
}

.shop-hero-h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 5vw, 3.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 30px rgba(255, 0, 128, 0.4) !important;
  line-height: 1 !important;
  margin: 0 0 12px !important;
  position: relative;
  z-index: 1;
}

.shop-hero-lede {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--wp--preset--color--fg-5, #6B7280) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  position: relative;
  z-index: 1;
}

/* ============================================================
   SHOP LAYOUT — Phase 4
   ============================================================ */
.shop-main {
  padding: 32px 24px 56px;
}

.shop-layout {
  gap: 32px !important;
}

/* ============================================================
   SHOP SIDEBAR — Phase 4
   ============================================================ */
.shop-sidebar {
  position: sticky;
  top: 88px;          /* clears sticky header (72px) + announce bar (36px) */
  align-self: flex-start;
}

@media (max-width: 781px) {
  .shop-sidebar {
    position: static;
  }
}

.sidebar-widget {
  background: var(--wp--preset--color--dark-surface, #12121A);
  border: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
  border-radius: 8px;
  padding: 16px;
}

.sidebar-widget-title {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 8px rgba(255, 0, 128, 0.4);
  margin: 0 0 12px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
}

/* WooCommerce product-categories block in sidebar */
.sidebar-widget .wp-block-woocommerce-product-categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-widget .wp-block-woocommerce-product-categories li {
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--wp--preset--color--fg-3, #D1D5DB);
  border-left: 2px solid transparent;
  transition: all var(--transition-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-widget .wp-block-woocommerce-product-categories li:hover,
.sidebar-widget .wp-block-woocommerce-product-categories li.current-cat {
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
  border-left-color: var(--wp--preset--color--neon-cyan, #00FFFF);
  background: rgba(0, 255, 255, 0.05);
}

.sidebar-widget .wp-block-woocommerce-product-categories li a {
  color: inherit;
  text-decoration: none;
}

.sidebar-widget .wp-block-woocommerce-product-categories .count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--wp--preset--color--fg-5, #6B7280);
}

/* Shop toolbar (sort dropdown wrapper) */
.shop-toolbar {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wp--preset--color--dark-border, #2A2A3A);
}

.shop-toolbar .wc-block-collection-sort-dropdown {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--neon-cyan, #00FFFF);
  background: transparent;
  border: 1px solid var(--wp--preset--color--neon-cyan, #00FFFF);
  border-radius: 4px;
  padding: 6px 12px;
}

/* No-results message */
.no-results-msg {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--wp--preset--color--fg-5, #6B7280);
  padding: 40px 0;
}

/* ============================================================
   PHASE 9 — HOMEPAGE HERO
   Reference: [DS_ROOT]/Hendr1kaDesignSystem/ui_kits/store/store.css
              Section: "Hero banner"
   ============================================================ */

.store-hero,
.wp-block-group.store-hero {
  position: relative;
  background: linear-gradient(135deg, #000000 0%, #1A0033 50%, #000000 100%);
  padding: 64px 24px;
  overflow: hidden;
  border-bottom: 2px solid var(--wp--preset--color--neon-pink-hot, #FF0080);
}

/* Horizontal scanline overlay — matches store kit ::before */
.store-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 0, 128, 0.03) 2px,
    rgba(255, 0, 128, 0.03) 4px
  );
  pointer-events: none;
}

.store-hero-inner {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 55fr 45fr;
  gap: 48px;
  align-items: center;
}

/* Hero breadcrumb label — "Drop / 2026.01" */
.hero-breadcrumb {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
  margin: 0 0 14px !important;
}

/* H1 partial-cyan: last words in .cyan span */
.store-hero h1 .cyan,
.store-hero-h1 .cyan {
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.6) !important;
}

/* Hero art — right column, product image with pink drop-shadow */
.store-hero-art,
.wp-block-group.store-hero-art {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.store-hero-art img,
.store-hero-art .wp-block-image img,
.hero-product-img img {
  max-height: 340px;
  width: auto;
  filter: drop-shadow(0 0 24px rgba(255, 0, 128, 0.55));
}

/* Hero H1 — hot-pink, Orbitron, neon glow.
   Requires !important: theme.json sets h1 color to #FFFFFF globally.
   This class overrides that without inline styles (bug D6 prevention). */
.store-hero-h1,
.store-hero h1,
.store-hero .wp-block-heading {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 12px rgba(255, 0, 128, 0.6) !important;
  line-height: 1.05 !important;
  margin: 0 0 16px !important;
}

/* Lede / subtitle */
.lede,
.store-hero .lede {
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--wp--preset--color--fg-2, #E0E0E0) !important;
  margin: 0 0 28px !important;
  max-width: 36rem;
}

/* CTA button — hot-pink gradient fill, cyan border, 4px radius */
.hero-cta-btn .wp-block-button__link,
.hero-ctas .wp-block-button__link {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--fg-1, #FFFFFF) !important;
  background: linear-gradient(45deg, var(--wp--preset--color--neon-pink-hot, #FF0080), #FF1493) !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  padding: 14px 28px !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
  transition: all var(--dur-base) var(--ease-in-out);
  text-decoration: none !important;
}

.hero-cta-btn .wp-block-button__link:hover,
.hero-ctas .wp-block-button__link:hover {
  background: linear-gradient(45deg, var(--wp--preset--color--neon-cyan, #00FFFF), #0088CC) !important;
  color: var(--wp--preset--color--dark-bg, #0A0A0F) !important;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
  transform: translateY(-2px);
}

/* Outline / secondary CTA — "View Lookbook" */
.hero-cta-outline .wp-block-button__link {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  background: transparent !important;
  border: 2px solid var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  border-radius: 4px !important;
  padding: 14px 24px !important;
  text-decoration: none !important;
  transition: all var(--dur-base, 200ms) ease;
}

.hero-cta-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--neon-cyan, #00FFFF) !important;
  color: var(--wp--preset--color--dark-bg, #0A0A0F) !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* ============================================================
   PHASE 9 — FEATURED PRODUCTS SECTION
   ============================================================ */

.homepage-featured,
.wp-block-group.homepage-featured {
  padding: 40px 24px 56px;
  background: var(--wp--preset--color--dark-bg, #0A0A0F);
}

/* Section heading ("Featured") */
.section-title,
.homepage-featured .wp-block-heading.section-title {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--wp--preset--color--neon-pink-hot, #FF0080) !important;
  text-shadow: 0 0 8px rgba(255, 0, 128, 0.5);
  margin: 0 0 24px !important;
}

/* Mobile — hero single-column, art hidden on small screens */
@media (max-width: 768px) {
  .store-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .store-hero-art,
  .wp-block-group.store-hero-art {
    display: none !important;
  }
  .store-hero {
    padding: 48px 16px;
  }
  .store-hero-h1,
  .store-hero h1,
  .store-hero .wp-block-heading {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  }
  .hero-ctas .wp-block-buttons {
    flex-direction: column;
    gap: 12px;
  }
}