/*
Theme Name: Nail Studio (Astra Child)
Theme URI: https://example.com
Description: Original child theme for Astra — "Blush Studio" color system for a nail products store (press-on tips, tools, raw materials, retail + wholesale).
Author: Your Store
Template: astra
Version: 1.0.0
Text Domain: nail-studio-child
*/

/* =========================================================
   1. BLUSH STUDIO COLOR SYSTEM (CSS custom properties)
   ========================================================= */
:root {
  --ns-primary: #D98C86;       /* Blush Rose - buttons, links, accents */
  --ns-primary-hover: #B96F69; /* Darker blush for hover states */
  --ns-secondary: #4A4645;     /* Deep Stone Grey - headings, nav text */
  --ns-accent: #C9A66B;        /* Champagne Gold - badges, ratings, wholesale highlights */
  --ns-bg: #FBF6F2;            /* Warm Ivory - main background */
  --ns-bg-card: #F2E4DF;       /* Blush Grey - card/section backgrounds */
  --ns-text: #2E2B2A;          /* Charcoal - body copy */
  --ns-border: #E4D5CF;        /* Rose Grey - borders, dividers */
  --ns-success: #8FA888;       /* Sage Green - in stock / approved */
  --ns-warning: #C1604F;       /* Terracotta - sold out / limited */
  --ns-dark-bg: #2E2B2A;       /* Charcoal - footer / wholesale section backgrounds */
  --ns-dark-text: #FBF6F2;     /* Ivory text on dark backgrounds */

  --ns-radius: 14px;
  --ns-shadow: 0 4px 16px rgba(46, 43, 42, 0.08);
  --ns-shadow-hover: 0 8px 24px rgba(46, 43, 42, 0.14);
}

/* =========================================================
   2. GLOBAL BASE
   ========================================================= */
body {
  background-color: var(--ns-bg);
  color: var(--ns-text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ns-secondary);
}

a {
  color: var(--ns-primary);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--ns-primary-hover);
}

/* =========================================================
   3. HEADER
   ========================================================= */
.ast-header-break-point .main-header-bar,
.main-header-bar {
  background-color: var(--ns-bg);
  border-bottom: 1px solid var(--ns-border);
}

.main-header-menu .menu-item > .menu-link {
  color: var(--ns-secondary);
}

.main-header-menu .menu-item > .menu-link:hover {
  color: var(--ns-primary);
}

/* Sticky/scrolled header variant - add class "ns-header-dark" via Astra header builder if desired */
.ns-header-dark .main-header-bar {
  background-color: var(--ns-dark-bg);
}
.ns-header-dark .main-header-menu .menu-item > .menu-link {
  color: var(--ns-dark-text);
}

/* Wholesale login pill button - use class "ns-btn-outline-gold" on a header menu item / button widget */
.ns-btn-outline-gold {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--ns-accent);
  border-radius: 999px;
  color: var(--ns-accent) !important;
  font-size: 0.85rem;
}
.ns-btn-outline-gold:hover {
  background-color: var(--ns-accent);
  color: var(--ns-dark-text) !important;
}

/* =========================================================
   4. BUTTONS (WooCommerce + Elementor buttons inherit these)
   ========================================================= */
.ast-button,
button,
.button,
input[type="submit"],
.wp-block-button__link,
.elementor-button {
  background-color: var(--ns-primary);
  color: var(--ns-dark-text);
  border-radius: 999px;
  border: none;
  padding: 12px 28px;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.ast-button:hover,
button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.elementor-button:hover {
  background-color: var(--ns-primary-hover);
  transform: translateY(-1px);
}

/* Secondary / outline button - add class "ns-btn-secondary" */
.ns-btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--ns-accent) !important;
  color: var(--ns-accent) !important;
}
.ns-btn-secondary:hover {
  background-color: var(--ns-accent) !important;
  color: var(--ns-dark-text) !important;
}

/* =========================================================
   5. TRUST STRIP - class "ns-trust-strip"
   ========================================================= */
.ns-trust-strip {
  background-color: var(--ns-dark-bg);
  color: var(--ns-dark-text);
  padding: 18px 0;
}
.ns-trust-strip * {
  color: var(--ns-dark-text);
}

/* =========================================================
   6. CATEGORY / PRODUCT CARDS - class "ns-card"
   ========================================================= */
.ns-card,
.products .product,
.woocommerce ul.products li.product {
  background-color: var(--ns-bg-card);
  border-radius: var(--ns-radius);
  border: 1px solid var(--ns-border);
  box-shadow: var(--ns-shadow);
  padding: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ns-card:hover,
.products .product:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--ns-shadow-hover);
  border-color: var(--ns-accent);
}

/* =========================================================
   7. STOCK / STATUS BADGES
   ========================================================= */
.ns-badge-instock {
  background-color: var(--ns-success);
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
.ns-badge-soldout {
  background-color: var(--ns-warning);
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
.ns-badge-wholesale {
  background-color: var(--ns-accent);
  color: var(--ns-dark-text);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Star ratings */
.woocommerce .star-rating span,
.ns-rating {
  color: var(--ns-accent);
}

/* =========================================================
   8. DARK SECTIONS (Wholesale CTA, Footer) - class "ns-section-dark"
   ========================================================= */
.ns-section-dark {
  background-color: var(--ns-dark-bg);
  color: var(--ns-dark-text);
  padding: 60px 0;
}
.ns-section-dark h1,
.ns-section-dark h2,
.ns-section-dark h3,
.ns-section-dark p {
  color: var(--ns-dark-text);
}

/* =========================================================
   9. NEWSLETTER SECTION - class "ns-section-newsletter"
   ========================================================= */
.ns-section-newsletter {
  background-color: #F0D8D5; /* tint of primary */
  padding: 50px 0;
  border-radius: var(--ns-radius);
}
.ns-section-newsletter input[type="email"] {
  border-radius: 999px;
  border: 1px solid var(--ns-border);
  padding: 12px 20px;
  background: #fff;
}

/* =========================================================
   10. FOOTER
   ========================================================= */
.site-footer,
footer.site-footer {
  background-color: var(--ns-dark-bg);
  color: var(--ns-dark-text);
}
.site-footer a {
  color: var(--ns-dark-text);
  opacity: 0.85;
}
.site-footer a:hover {
  opacity: 1;
  color: var(--ns-accent);
}

/* =========================================================
   11. FORMS (Contact / Wholesale application)
   ========================================================= */
.ns-form-card,
.wpforms-container,
.elementor-form {
  background: #fff;
  border-radius: var(--ns-radius);
  box-shadow: var(--ns-shadow);
  padding: 30px;
  border: 1px solid var(--ns-border);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border: 1px solid var(--ns-border) !important;
  border-radius: 8px !important;
  background-color: var(--ns-bg) !important;
  color: var(--ns-text) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ns-primary) !important;
  outline: none;
}

/* =========================================================
   12. FAQ ACCORDION - class "ns-faq-item"
   ========================================================= */
.ns-faq-item {
  background-color: var(--ns-bg-card);
  border-radius: var(--ns-radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.ns-faq-item .ns-faq-question {
  padding: 16px 20px;
  font-weight: 600;
  color: var(--ns-secondary);
  cursor: pointer;
}
.ns-faq-item .ns-faq-answer {
  padding: 0 20px 16px 20px;
  background-color: var(--ns-bg);
  color: var(--ns-text);
}

/* =========================================================
   13. BREADCRUMBS
   ========================================================= */
.ast-breadcrumbs,
.woocommerce-breadcrumb {
  color: var(--ns-secondary);
  opacity: 0.7;
}
.ast-breadcrumbs a {
  color: var(--ns-secondary);
}
.ast-breadcrumbs .ast-breadcrumb-divider,
.woocommerce-breadcrumb span:last-child {
  color: var(--ns-primary);
}

/* =========================================================
   14. LIVE CHAT WIDGET color override (works with Tidio / Tawk.to
   custom color settings — most plugins let you set a HEX in their
   own dashboard, this is a fallback CSS hook if you self-host one)
   ========================================================= */
.ns-chat-bubble {
  background-color: var(--ns-primary) !important;
}