/* ==========================================================================
   KAMAYA — reskin overrides
   Loaded via mu-plugins/kamaya-reskin.php, after every theme/plugin stylesheet.
   Do not edit WooVina's own files — everything site-wide lives here so it can
   be fully removed by deleting this folder + the loader file.
   ========================================================================== */

@font-face{
  font-family:'XB Niloofar';
  src:url('fonts/xb-niloofar-regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'XB Niloofar';
  src:url('fonts/xb-niloofar-bold.ttf') format('truetype');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

:root{
  --k-ink:      #1c1712;
  --k-ink-2:    #241d16;
  --k-ink-3:    #2c241a;
  --k-paper:    #f6eee0;
  --k-paper-2:  #efe3cd;
  --k-cream:    #f5ecdf;
  --k-muted:    #c9bba4;
  --k-muted-2:  #6b6255;
  --k-line:     rgba(245,236,223,0.14);
  --k-line-soft:rgba(28,23,18,0.12);
  --k-brass:    #b08a56;
  --k-brass-2:  #8c6a3d;
  --k-ember:    #8c3f2d;

  --k-font-display: 'XB Niloofar', Georgia, 'Times New Roman', serif;
  --k-font-ui:      Georgia, 'Times New Roman', serif;
}

/* ---------- base ---------- */
body{
  background:var(--k-paper) !important;
  color:var(--k-ink) !important;
  font-family:var(--k-font-ui) !important;
}
h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.page-title, .entry-title, .woocommerce-Tabs-panel h2,
.product_title{
  font-family:var(--k-font-display) !important;
  /* NOT !important: Elementor writes a widget's own "Title Color" setting
     as an inline style="color:..." on the element. An inline style already
     beats a plain stylesheet rule regardless of selector specificity, so
     leaving this un-!important lets every widget's own custom color win
     automatically, while headings with no custom color still fall back to
     ink via ordinary cascade. (Making this !important — as it was through
     v5 — silently forced ink onto EVERY heading sitewide, no matter what
     color was set on the widget itself: this broke the hero's cream text,
     the "Why Kamaya" section's cream/brass text, and every brass eyebrow
     on the page, each needing its own one-off scoped override to fix. This
     is the root-cause fix so future sections don't need that same patch.) */
  color:var(--k-ink);
  letter-spacing:.01em;
  font-weight:500 !important;
}
a{ color:var(--k-brass); }
a:hover{ color:var(--k-brass-2); }

/* generic buttons across the theme + Elementor + WooCommerce */
.woovina-btn, .button, .btn, .wp-block-button__link,
.elementor-button, .elementor-button-link,
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
input[type="submit"]{
  background:var(--k-brass) !important;
  border-color:var(--k-brass) !important;
  color:var(--k-ink) !important;
  border-radius:2px !important;
  font-family:var(--k-font-ui) !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:13px !important;
  transition:background .3s ease, border-color .3s ease;
}
.woovina-btn:hover, .button:hover, .btn:hover, .wp-block-button__link:hover,
.elementor-button:hover, .elementor-button-link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
input[type="submit"]:hover{
  background:var(--k-brass-2) !important;
  border-color:var(--k-brass-2) !important;
  color:var(--k-cream) !important;
}

/* ---------- header ---------- */
#site-header{
  background:var(--k-ink) !important;
  color:var(--k-cream) !important;
  border-bottom:1px solid var(--k-line);
}
#site-header a,
#site-header .ekit-menu-nav-link,
#site-header .elementor-heading-title{
  color:var(--k-cream) !important;
}
#site-header .ekit-menu-nav-link:hover,
#site-header .current-menu-item > .ekit-menu-nav-link,
#site-header .current-menu-item > a{
  color:var(--k-brass) !important;
}
#site-header .elementskit-navbar-nav{
  font-family:var(--k-font-ui) !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:12px;
}
/* site logo: recolor via filter since it's a dark PNG wordmark, sits on a dark header now */
#site-header img.attachment-full,
#site-header .custom-logo{
  filter: invert(1) brightness(1.6) sepia(.25) saturate(2) hue-rotate(0deg);
}
#site-header .woovina-menucart--items-indicator-bubble .cart-contents-count,
#site-header [class*="menucart"] .cart-contents-count{
  background:var(--k-brass) !important;
  color:var(--k-ink) !important;
}

/* ---------- footer ---------- */
#footer, #footer.site-footer{
  background:var(--k-ink) !important;
  color:var(--k-muted) !important;
}
/* Elementor renders the footer widget area as its own sections, each with
   their own (usually white) background painted on top of #footer's — strip
   those so our dark background actually shows through. */
#footer .elementor-section,
#footer .elementor-container,
#footer .elementor-column,
#footer .elementor-widget-wrap,
#footer .elementor-background-overlay,
#footer-widgets,
#footer-inner,
#footer .footer-widgets-inner{
  background:transparent !important;
  background-color:transparent !important;
}
#footer a,
#footer .elementor-icon-list-text,
#footer .elementor-heading-title{
  color:var(--k-muted) !important;
}
#footer a:hover,
#footer .elementor-icon-list-item:hover .elementor-icon-list-text{
  color:var(--k-brass) !important;
}
#footer .elementor-heading-title{
  color:var(--k-cream) !important;
  font-family:var(--k-font-display) !important;
}

/* ---------- misc brand accents ---------- */
::selection{ background:var(--k-brass); color:var(--k-ink); }

/* ---------- Home hero (dark photo background) ---------- */
/* The generic heading rule above forces dark ink text everywhere, which is
   unreadable over the hero's dark photo. Scope a light-text override to just
   this section (Elementor auto-adds an .elementor-element-<id> class to
   every element, so this only ever touches this one hero, nothing else). */
.elementor-element-4e8e79b .elementor-heading-title{
  color:var(--k-cream) !important;
  font-family:var(--k-font-display) !important;
}
.elementor-element-4e8e79b .elementor-widget-text-editor,
.elementor-element-4e8e79b .elementor-widget-text-editor p{
  color:var(--k-cream) !important;
}
/* Secondary "Explore our collections" button: keep it outlined, not solid
   brass like every other button on the site (the generic .elementor-button
   rule above would otherwise force it to match the primary button). */
.elementor-element-3085cb4 .elementor-button{
  background:transparent !important;
  border:1px solid var(--k-cream) !important;
  color:var(--k-cream) !important;
}
.elementor-element-3085cb4 .elementor-button:hover{
  background:var(--k-cream) !important;
  color:var(--k-ink) !important;
  border-color:var(--k-cream) !important;
}

/* ---------- Shop page (product archive) ---------- */
/* WooCommerce/WooVina render this page from a PHP template, not Elementor —
   these rules restyle it directly rather than via the page editor. */
.woovina-toolbar{
  border-color:var(--k-line-soft) !important;
}
.woovina-toolbar .off-canvas-filter-text,
.woovina-toolbar > a{
  color:var(--k-ink) !important;
  font-family:var(--k-font-ui);
}
.woovina-grid-list a.active,
.result-count a.active{
  border-color:var(--k-brass) !important;
  color:var(--k-brass) !important;
}
.result-count li a,
.result-count li.view-title{
  color:var(--k-muted-2);
  font-family:var(--k-font-ui);
}
.woocommerce-ordering .theme-select,
.woocommerce-ordering .theme-selectInner{
  font-family:var(--k-font-ui);
  color:var(--k-ink);
}

ul.products li.product{
  background:#fff;
  border:1px solid var(--k-line-soft);
  border-radius:2px;
  transition:transform .25s ease, box-shadow .25s ease;
}
ul.products li.product:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(28,23,18,0.12);
}
ul.products li.product li.title a{
  font-family:var(--k-font-display) !important;
  color:var(--k-ink) !important;
  font-size:15px;
  line-height:1.4;
  font-weight:500 !important;
}
ul.products li.product li.inner .price,
ul.products li.product li.inner .price .woocommerce-Price-amount{
  color:var(--k-brass-2) !important;
  font-family:var(--k-font-ui);
  font-weight:600 !important;
  letter-spacing:.02em;
}
ul.products li.product .btn-addtocart .add_to_cart_button{
  background:var(--k-brass) !important;
  color:var(--k-ink) !important;
  border-radius:2px !important;
}
ul.products li.product .btn-addtocart .add_to_cart_button:hover{
  background:var(--k-brass-2) !important;
  color:var(--k-cream) !important;
}

/* pagination */
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span{
  color:var(--k-ink) !important;
  font-family:var(--k-font-ui);
  border-color:var(--k-line-soft) !important;
}
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current{
  background:var(--k-brass) !important;
  color:var(--k-ink) !important;
  border-color:var(--k-brass) !important;
}

/* ---------- Home "Why Kamaya" section (dark ink background) ---------- */
/* Same issue as the hero: the global heading rule forces dark ink text,
   unreadable on this section's dark background. Default all headings in
   this section to cream, then re-scope the eyebrow + the three pillar
   numbers to brass (source order makes the second, more specific-in-intent
   rule win for just those elements). */
.elementor-element-8bcc61e .elementor-heading-title{
  color:var(--k-cream) !important;
}
.elementor-element-e97896b .elementor-heading-title,
.elementor-element-394ae9c .elementor-heading-title,
.elementor-element-e611130 .elementor-heading-title,
.elementor-element-a3ec610 .elementor-heading-title{
  color:var(--k-brass-2) !important;
}