/* =====================================================================
   KINGDOM LIVING GOODS — BRAND REFRESH STYLESHEET
   Theme: Flatsome (custom CSS overlay / child theme stylesheet)
   Site: kingdomlivinggoods.com
   -----------------------------------------------------------------
   Palette:
     --klg-charcoal      #181A17   (primary text / dark surfaces)
     --klg-ivory         #F4F0E7   (primary light background)
     --klg-olive         #3D4938   (links, secondary accents, deep sections)
     --klg-brass         #AD8A50   (buttons, CTAs, highlights)
     --klg-stone         #D7D0C4   (subtle backgrounds, borders, dividers)
     --klg-near-black    #111210   (footer, header, deepest surfaces)

   Typography:
     Headings : Barlow Condensed
     Body     : Inter
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. FONT IMPORTS
   Prefer self-hosting/enqueuing via functions.php (see child theme file);
   this @import is a fallback so the CSS still works if pasted directly
   into Flatsome's "Custom CSS" option box (Appearance > Customize).
--------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------
   1. ROOT VARIABLES
--------------------------------------------------------------------- */
:root {
  --klg-charcoal: #181A17;
  --klg-ivory: #F4F0E7;
  --klg-olive: #3D4938;
  --klg-brass: #AD8A50;
  --klg-stone: #D7D0C4;
  --klg-near-black: #111210;

  --klg-font-heading: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  --klg-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   2. GLOBAL BASE / TYPOGRAPHY
--------------------------------------------------------------------- */
body,
html {
  background-color: var(--klg-ivory) !important;
  color: var(--klg-charcoal) !important;
  font-family: var(--klg-font-body) !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.title,
.page-title,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--klg-font-heading) !important;
  color: var(--klg-charcoal) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  text-transform: none;
}

h1, .h1 { font-size: 3rem;   line-height: 1.1; }
h2, .h2 { font-size: 2.25rem; line-height: 1.15; }
h3, .h3 { font-size: 1.75rem; line-height: 1.2; }
h4, .h4 { font-size: 1.35rem; line-height: 1.25; }

p, li, span, label, input, textarea, select,
.woocommerce div.product p.price,
.price {
  font-family: var(--klg-font-body) !important;
}

/* Section eyebrow / small caps labels used across Flatsome (e.g. "Winter 2024") */
.text-muted,
.subheading,
.epsilon,
.badge {
  font-family: var(--klg-font-heading) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--klg-olive) !important;
}

/* ---------------------------------------------------------------------
   3. LINKS
--------------------------------------------------------------------- */
a,
a:visited {
  color: var(--klg-olive) !important;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover,
a:focus {
  color: var(--klg-brass) !important;
}

/* Neutralize links that live inside dark surfaces (header/footer) so
   the olive link color doesn't disappear on dark backgrounds */
.header,
#header,
.footer,
#footer,
.dark {
  --klg-link-color: var(--klg-stone);
}
.header a, #header a,
.footer a, #footer a,
.dark a {
  color: var(--klg-stone) !important;
}
.header a:hover, #header a:hover,
.footer a:hover, #footer a:hover,
.dark a:hover {
  color: var(--klg-brass) !important;
}

/* ---------------------------------------------------------------------
   4. HEADER / NAVIGATION
--------------------------------------------------------------------- */
#header,
.header-wrapper,
.header-main,
.header-bottom,
.top-bar {
  background-color: var(--klg-near-black) !important;
  border-color: rgba(215, 208, 196, 0.15) !important;
}

#header .logo,
#header .logo a {
  color: var(--klg-ivory) !important;
}

/* Primary nav menu */
#header nav.nav > li > a,
.nav-dropdown li > a,
.header-nav-main a {
  font-family: var(--klg-font-heading) !important;
  color: var(--klg-ivory) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.95rem;
}

#header nav.nav > li > a:hover,
#header nav.nav > li.active > a,
.header-nav-main li.current > a {
  color: var(--klg-brass) !important;
}

/* Dropdown / flyout menus */
.nav-dropdown,
.is-dropdown li ul {
  background-color: var(--klg-charcoal) !important;
  border-top: 2px solid var(--klg-brass) !important;
}
.nav-dropdown a {
  color: var(--klg-stone) !important;
}
.nav-dropdown a:hover {
  color: var(--klg-brass) !important;
  background-color: rgba(173, 138, 80, 0.08) !important;
}

/* Icons: cart, account, search */
#header .header-icon,
#header .icon,
#header svg,
#header i {
  color: var(--klg-ivory) !important;
  fill: var(--klg-ivory) !important;
}
#header .header-icon:hover {
  color: var(--klg-brass) !important;
  fill: var(--klg-brass) !important;
}

/* Cart count bubble */
.cart .cart-count,
.header-cart-bubble,
.cart-count {
  background-color: var(--klg-brass) !important;
  color: var(--klg-near-black) !important;
}

/* Top announcement bar ("Free shipping on all orders over $49") */
.top-bar,
.header-top,
.woocommerce-store-notice,
.stickynote,
.top-message {
  background-color: var(--klg-olive) !important;
  color: var(--klg-ivory) !important;
}
.top-bar a { color: var(--klg-brass) !important; }

/* Sticky header state */
#header.stuck {
  background-color: var(--klg-near-black) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* ---------------------------------------------------------------------
   5. FOOTER
--------------------------------------------------------------------- */
#footer,
.footer,
.footer-wrapper,
.footer-bottom {
  background-color: var(--klg-near-black) !important;
  color: var(--klg-stone) !important;
}

#footer h3,
#footer h4,
.footer .widget-title,
.footer-widgets h4 {
  font-family: var(--klg-font-heading) !important;
  color: var(--klg-ivory) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(215, 208, 196, 0.2);
  padding-bottom: 0.5rem;
}

#footer a,
.footer a {
  color: var(--klg-stone) !important;
}
#footer a:hover,
.footer a:hover {
  color: var(--klg-brass) !important;
}

.footer-bottom,
.footer-bottom-1,
.copyright-footer {
  background-color: var(--klg-near-black) !important;
  border-top: 1px solid rgba(215, 208, 196, 0.12) !important;
  color: var(--klg-stone) !important;
}

/* ---------------------------------------------------------------------
   6. BUTTONS (solid Antique Brass background)
--------------------------------------------------------------------- */
.button,
button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce-Button,
.add_to_cart_button,
.single_add_to_cart_button,
a.wc-forward,
.checkout-button,
.nav-button {
  background-color: var(--klg-brass) !important;
  border-color: var(--klg-brass) !important;
  color: var(--klg-near-black) !important;
  font-family: var(--klg-font-heading) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
a.wc-forward:hover {
  background-color: var(--klg-olive) !important;
  border-color: var(--klg-olive) !important;
  color: var(--klg-ivory) !important;
  transform: translateY(-1px);
}

/* Outline / secondary button variant */
.button.outline,
.button.is-outline,
.button-outline {
  background-color: transparent !important;
  border: 2px solid var(--klg-brass) !important;
  color: var(--klg-brass) !important;
}
.button.outline:hover,
.button.is-outline:hover,
.button-outline:hover {
  background-color: var(--klg-brass) !important;
  color: var(--klg-near-black) !important;
}

/* Disabled state */
.button:disabled,
.button.disabled,
button:disabled {
  background-color: var(--klg-stone) !important;
  border-color: var(--klg-stone) !important;
  color: var(--klg-charcoal) !important;
  opacity: 0.7;
}

/* ---------------------------------------------------------------------
   7. PRODUCT CARDS / SHOP GRID
--------------------------------------------------------------------- */
.product,
.product-small,
ul.products li.product {
  background-color: transparent !important;
}

.product-small .product-inner,
.product .product-image-link,
.box-image,
ul.products li.product .product-inner {
  background-color: var(--klg-ivory) !important;
  border: 1px solid var(--klg-stone) !important;
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.product-small .product-inner:hover,
ul.products li.product .product-inner:hover {
  box-shadow: 0 8px 24px rgba(24, 26, 23, 0.12);
  transform: translateY(-2px);
}

.product-title,
.woocommerce-loop-product__title,
.product-small .product-title a {
  font-family: var(--klg-font-heading) !important;
  color: var(--klg-charcoal) !important;
  font-weight: 600 !important;
}

.price,
.woocommerce div.product p.price,
.price .amount,
ul.products li.product .price {
  color: var(--klg-olive) !important;
  font-weight: 600 !important;
}

/* Sale / New badges */
.onsale,
.product-small .on-sale-flash,
.sale-flash,
span.onsale {
  background-color: var(--klg-brass) !important;
  color: var(--klg-near-black) !important;
  font-family: var(--klg-font-heading) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.out-of-stock-flash,
.stock.out-of-stock {
  background-color: var(--klg-charcoal) !important;
  color: var(--klg-stone) !important;
}

/* Product category tiles ("Shop by collection") */
.product-category .category-name,
.box-text .category-title,
.category-block .title {
  font-family: var(--klg-font-heading) !important;
  color: var(--klg-ivory) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-category::after,
.category-image-overlay {
  background: linear-gradient(180deg, rgba(17,18,16,0) 0%, rgba(17,18,16,0.65) 100%) !important;
}

/* Wishlist / quick-view icons */
.add-to-wishlist,
.yith-wcwl-add-to-wishlist a {
  color: var(--klg-olive) !important;
}
.add-to-wishlist:hover {
  color: var(--klg-brass) !important;
}

/* Single product page */
.woocommerce div.product .product_title {
  font-family: var(--klg-font-heading) !important;
  color: var(--klg-charcoal) !important;
}
.woocommerce-tabs ul.tabs li a {
  font-family: var(--klg-font-heading) !important;
  text-transform: uppercase;
  color: var(--klg-charcoal) !important;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--klg-brass) !important;
  border-bottom-color: var(--klg-brass) !important;
}

/* ---------------------------------------------------------------------
   8. SECTION BACKGROUNDS / PAGE BUILDER ROWS
--------------------------------------------------------------------- */
/* Light section (default) */
.section-ivory,
.bg-ivory {
  background-color: var(--klg-ivory) !important;
  color: var(--klg-charcoal) !important;
}

/* Deep olive feature sections (e.g. Our Mission) */
.section-olive,
.bg-olive,
.dark.section {
  background-color: var(--klg-olive) !important;
  color: var(--klg-ivory) !important;
}
.section-olive h1, .section-olive h2, .section-olive h3,
.bg-olive h1, .bg-olive h2, .bg-olive h3,
.dark.section h1, .dark.section h2, .dark.section h3 {
  color: var(--klg-ivory) !important;
}
.section-olive a, .bg-olive a, .dark.section a {
  color: var(--klg-brass) !important;
}

/* Stone / neutral divider sections */
.section-stone,
.bg-stone {
  background-color: var(--klg-stone) !important;
  color: var(--klg-charcoal) !important;
}

/* Charcoal / near-black dramatic sections (hero, testimonials) */
.section-charcoal,
.bg-charcoal,
.section-near-black {
  background-color: var(--klg-charcoal) !important;
  color: var(--klg-ivory) !important;
}

/* Flatsome row/section builder default overrides */
.section-title-divider {
  background-color: var(--klg-brass) !important;
}

/* Testimonial / review blocks */
.reviews-shortcode,
.testimonials .flow-text,
blockquote {
  border-left: 3px solid var(--klg-brass);
  color: var(--klg-charcoal);
  font-style: normal;
}
blockquote::before {
  color: var(--klg-brass);
}

/* ---------------------------------------------------------------------
   9. FORMS (checkout, contact, login/register, search)
--------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select,
.select2-container .select2-selection {
  background-color: #FFFFFF !important;
  border: 1px solid var(--klg-stone) !important;
  color: var(--klg-charcoal) !important;
  font-family: var(--klg-font-body) !important;
  border-radius: 2px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--klg-brass) !important;
  box-shadow: 0 0 0 3px rgba(173, 138, 80, 0.2) !important;
  outline: none !important;
}

label,
.woocommerce form .form-row label {
  font-family: var(--klg-font-body) !important;
  color: var(--klg-charcoal) !important;
  font-weight: 500;
}

/* Checkbox / radio accents */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--klg-brass);
}

/* Search bar (header) */
.search-form input[type="search"],
#header .searchform input {
  background-color: var(--klg-ivory) !important;
  border: 1px solid var(--klg-stone) !important;
}
.search-form button,
#header .searchform button {
  background-color: var(--klg-brass) !important;
  color: var(--klg-near-black) !important;
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--klg-olive) !important;
  background-color: var(--klg-stone) !important;
  color: var(--klg-charcoal) !important;
}
.woocommerce-error {
  border-top-color: var(--klg-brass) !important;
  background-color: #f7e7d8 !important;
  color: var(--klg-near-black) !important;
}

/* ---------------------------------------------------------------------
   10. MISC / UTILITY
--------------------------------------------------------------------- */
::selection {
  background-color: var(--klg-brass);
  color: var(--klg-near-black);
}

hr,
.divider {
  border-color: var(--klg-stone) !important;
}

.breadcrumb,
.breadcrumbs a {
  font-family: var(--klg-font-body) !important;
  color: var(--klg-olive) !important;
}

/* Scrollbar accent (WebKit browsers) */
::-webkit-scrollbar-thumb {
  background-color: var(--klg-olive);
}
::-webkit-scrollbar-track {
  background-color: var(--klg-ivory);
}

/* Back-to-top button */
#back-to-top,
.back-to-top {
  background-color: var(--klg-brass) !important;
  color: var(--klg-near-black) !important;
}

/* =====================================================================
   END KLG BRAND STYLESHEET
   ===================================================================== */