@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Jost:wght@400;500;600&display=swap');

/* ==========================================================================
   VELORA GLOBAL DESIGN SYSTEM — 2026-07-19  (Layer 1: site-wide)
   Appended to Additional CSS AFTER the earlier polish blocks; overrides
   the amber-gradient header/footer + Signika/Roboto fonts with the new
   "candlelit spice table" system (see velora-home-v2.html / -product-v2).
   Reversible: delete everything from this marker to the end of the block.
   Structural changes (hero, gallery, section order) are Layer 2 = Elementor.
   ========================================================================== */
:root{
  /* Deploy probe: proves the file-based pipeline is live (not the inline
     Additional CSS copy). Unused by any rule — safe to delete. */
  --v-deploy-probe:file-pipeline-ok;
  --v-ink:#14170f; --v-ink-2:#1c2016; --v-ink-3:#262a1d;
  --v-cream:#f6efe0; --v-cream-2:#efe4cd; --v-cream-3:#e6d8bb;
  --v-pine:#1f4b3b; --v-pine-deep:#163829;
  --v-gold:#e7a73c; --v-gold-bright:#f2bd57; --v-gold-deep:#7a5108;
  --v-saffron:#c0381c; --v-saffron-ink:#9c2c14;
  --v-on-ink:#f4ecdb; --v-on-ink-dim:#c9bfa6;
  --v-on-cream:#23241b; --v-on-cream-dim:#5c5a49;
  --v-ease:cubic-bezier(.22,.61,.36,1);
  --v-logo-cream:brightness(0) saturate(100%) invert(94%) sepia(18%) saturate(420%) hue-rotate(354deg) brightness(103%);
}

/* ---------- Base surface + typography ------------------------------------ */
/* NOTE: we deliberately change only BACKGROUND + FONT globally, and leave
   per-section TEXT COLORS alone. Elementor/Astra sections with dark image
   backgrounds (hero, feature bands) already set light text; overriding colour
   globally would turn that text dark-on-dark. Colour is handled per-surface. */
body,
.ast-separate-container,
#content,
.site-content{ background-color:var(--v-cream); }
body{
  font-family:"Spectral",Georgia,serif !important;
  line-height:1.7;
}
h1,h2,h3,h4,h5,
.entry-title,.widget-title,.product_title,
.elementor-heading-title,
.wp-block-heading{
  font-family:"Marcellus",serif !important;
  font-weight:400 !important;
  letter-spacing:-.01em;
  text-wrap:balance;
}
::selection{ background:var(--v-gold); color:var(--v-ink); }

/* Links — only inside light reading areas, so we never recolour text sitting
   on a dark section. Scoped to entry content / widgets / woo, not global <a>. */
.entry-content a:not(.button):not(.elementor-button):not(.wp-block-button__link),
.woocommerce-tabs a:not(.button),
.widget-area a{ color:var(--v-pine); transition:color .3s var(--v-ease); }
.entry-content a:not(.button):hover,
.widget-area a:hover{ color:var(--v-gold-deep); }

/* Small tracked labels / eyebrows / meta use Jost */
.ast-breadcrumbs,.woocommerce-breadcrumb,
.wc-block-components-product-price,.price,.woocommerce-Price-amount,
.button,.elementor-button,.wp-block-button__link,
.main-header-menu a,.footer-bar-navigation a,.widget-title{
  font-family:"Jost",sans-serif !important;
}

/* ---------- Header: solid spice-dark bar --------------------------------- */
.site-header,
.main-header-bar,
.ast-primary-header-bar,
.ast-main-header-wrap .main-header-bar,
.ast-sticky-active .main-header-bar,
.ast-theme-transparent-header .main-header-bar,
#ast-mobile-header,
.ast-mobile-header-wrap .main-header-bar{
  background:var(--v-ink) !important;
  background-image:none !important;   /* kills the old amber gradient */
  box-shadow:0 1px 0 var(--v-ink-3), 0 18px 40px -30px #000 !important;
}
/* Logo → warm cream on the dark bar */
.custom-logo,
.site-header .custom-logo-link img,
.footer-widget-area img.custom-logo{
  filter:var(--v-logo-cream);
}
/* Site title / tagline if shown as text */
.site-title a,.site-description{ color:var(--v-cream) !important; }

/* Primary nav */
.main-header-menu > .menu-item > a,
.main-navigation a,
.main-header-menu a{
  color:var(--v-on-ink) !important;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.82rem;
}
/* NOTE: Astra outputs its own !important hover/current colour on
   `.main-header-menu .menu-item > .menu-link` (4 classes). We must match that
   selector (the link is `a.menu-link`) AND out-specify it — hence the
   `.ast-primary-header-bar` prefix — or the nav stays Astra's dark green. */
.ast-primary-header-bar .main-header-menu .menu-item > .menu-link:hover,
.ast-primary-header-bar .main-header-menu .menu-item > .menu-link:focus,
.ast-primary-header-bar .main-header-menu .current-menu-item > .menu-link,
.ast-primary-header-bar .main-header-menu .current-menu-ancestor > .menu-link,
.main-header-menu > .menu-item > a:hover,
.main-header-menu > .current-menu-item > a{
  color:var(--v-gold-bright) !important;
}
/* Submenu (dropdown) on dark */
.main-header-menu .sub-menu{
  background:var(--v-ink-2) !important;
  border-color:var(--v-ink-3) !important;
}
.main-header-menu .sub-menu a{ color:var(--v-on-ink-dim) !important; }
.main-header-menu .sub-menu a:hover{ color:var(--v-gold-bright) !important; }

/* Cart + account icons + mobile toggle → cream/gold */
.ast-site-header-cart a,
.ast-header-account-link,
.ast-cart-menu-wrap,
.ast-icon,
.ast-mobile-menu-trigger-fill,
.mobile-menu-toggle-icon,
.menu-toggle{
  color:var(--v-on-ink) !important;
  fill:var(--v-on-ink) !important;
}
.ast-site-header-cart a:hover .ast-icon,
.ast-header-account-link:hover{ color:var(--v-gold-bright) !important; }
.ast-cart-menu-wrap .count,
.ast-site-header-cart .ast-cart-menu-wrap{ color:var(--v-ink) !important; }

/* ---------- Mobile off-canvas menu → dark spice-table drawer ------------- *
 * Astra renders the mobile menu as a left off-canvas popup:
 *   .ast-mobile-popup-drawer > .ast-mobile-popup-inner (the PANEL)
 *     > .ast-mobile-popup-header (close button)
 *     > .ast-mobile-popup-content > … > #ast-hf-mobile-menu (the links)
 * Out of the box the panel paints near-white (rgba(247,247,247,.92)) while our
 * header rule tints the links cream (--v-on-ink) → cream-on-white, unreadable.
 * (Astra's own dark "current-item" colour left only the active link legible.)
 * We reskin the whole drawer to the candlelit-ink world: solid warm-ink panel,
 * warm scrim, cream links on hairline-gold separators, gold active/hover with a
 * cropped girih-star marker as the "zari thread" signature. Astra's white-panel
 * rules are plain (not !important), so a scoped selector + !important wins. */

/* The scrim behind the drawer — warm near-black, not Astra's flat grey */
.ast-mobile-popup-overlay{
  background:rgba(10,12,7,.62) !important;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}

/* The panel itself: solid, candlelit-ink, with a hairline gold "thread" on its
   meeting edge (inset shadow, not a border — sidesteps the side-stripe ban) */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner{
  background:linear-gradient(168deg,var(--v-ink-2) 0%,var(--v-ink) 62%) !important;
  box-shadow:inset -1px 0 0 rgba(231,167,60,.45), 24px 0 60px -30px #000 !important;
}

/* Close-button row: give it air and a hairline gold rule underneath */
.ast-mobile-popup-drawer .ast-mobile-popup-header{
  padding:1.15rem 1.4rem .95rem !important;
  border-bottom:1px solid rgba(231,167,60,.14);
}
/* Close X — cream icon, gold on hover, quarter-turn on interaction. Astra sets
   its dark colour on the inner icon span, so we set `fill` on the svg directly
   (beats the svg's fill="currentColor" presentation attr) as well as `color`. */
.ast-mobile-popup-drawer #menu-toggle-close{
  opacity:.85;
  transition:opacity .3s var(--v-ease), transform .3s var(--v-ease);
}
.ast-mobile-popup-drawer #menu-toggle-close,
.ast-mobile-popup-drawer .menu-toggle-close .ast-svg-iconset,
.ast-mobile-popup-drawer .menu-toggle-close svg{
  color:var(--v-on-ink) !important;
  fill:var(--v-on-ink) !important;
  transition:fill .3s var(--v-ease), color .3s var(--v-ease);
}
.ast-mobile-popup-drawer #menu-toggle-close:hover,
.ast-mobile-popup-drawer #menu-toggle-close:focus-visible{ opacity:1; transform:rotate(90deg); }
.ast-mobile-popup-drawer #menu-toggle-close:hover .ast-svg-iconset,
.ast-mobile-popup-drawer #menu-toggle-close:hover svg,
.ast-mobile-popup-drawer #menu-toggle-close:focus-visible svg{
  color:var(--v-gold-bright) !important; fill:var(--v-gold-bright) !important;
}

/* Menu list: comfortable rhythm, hairline gold separators (full-width 1px) */
.ast-mobile-popup-drawer #ast-hf-mobile-menu{ padding:.4rem 0 1.6rem !important; }
.ast-mobile-popup-drawer #ast-hf-mobile-menu > .menu-item{
  border-bottom:1px solid rgba(231,167,60,.12);
}
.ast-mobile-popup-drawer #ast-hf-mobile-menu > .menu-item:last-child{ border-bottom:0; }

.ast-mobile-popup-drawer #ast-hf-mobile-menu .menu-link{
  position:relative;
  display:block;
  color:var(--v-on-ink) !important;
  padding:1.05rem 1.5rem 1.05rem 2.5rem !important;
  font-size:.95rem;
  letter-spacing:.16em;
  transition:color .3s var(--v-ease), padding-left .3s var(--v-ease);
}
/* Cropped girih-star marker (a rotated gold square) — faded in on active/hover.
   Show/hide via opacity (constant rotation) so it never depends on transform
   winning the cascade against Astra's own ::before hover effects. */
.ast-mobile-popup-drawer #ast-hf-mobile-menu .menu-link::before{
  content:"";
  position:absolute; left:1.5rem; top:50%;
  width:.4rem; height:.4rem; margin-top:-.2rem;
  background:var(--v-gold); transform:rotate(45deg);
  opacity:0;
  transition:opacity .35s var(--v-ease), background .3s var(--v-ease);
}
/* Hover / focus */
.ast-mobile-popup-drawer #ast-hf-mobile-menu .menu-item > .menu-link:hover,
.ast-mobile-popup-drawer #ast-hf-mobile-menu .menu-item > .menu-link:focus-visible{
  color:var(--v-gold-bright) !important;
}
.ast-mobile-popup-drawer #ast-hf-mobile-menu .menu-item > .menu-link:hover::before,
.ast-mobile-popup-drawer #ast-hf-mobile-menu .menu-item > .menu-link:focus-visible::before{
  opacity:1;
}
/* Active page — gold, marker shown (override Astra's dark mobile current-colour) */
.ast-mobile-popup-drawer #ast-hf-mobile-menu .current-menu-item > .menu-link,
.ast-mobile-popup-drawer #ast-hf-mobile-menu .current-menu-ancestor > .menu-link,
.ast-mobile-popup-drawer #ast-hf-mobile-menu .current_page_item > .menu-link{
  color:var(--v-gold-bright) !important;
}
.ast-mobile-popup-drawer #ast-hf-mobile-menu .current-menu-item > .menu-link::before,
.ast-mobile-popup-drawer #ast-hf-mobile-menu .current-menu-ancestor > .menu-link::before,
.ast-mobile-popup-drawer #ast-hf-mobile-menu .current_page_item > .menu-link::before{
  opacity:1;
  background:var(--v-gold-bright);
}
/* Sub-menu links, should any be added later, stay legible on ink */
.ast-mobile-popup-drawer #ast-hf-mobile-menu .sub-menu .menu-link{
  color:var(--v-on-ink-dim) !important;
  font-size:.85rem; padding-left:3.3rem !important;
}

/* Open animation: links settle in with a soft staggered rise. Only fires while
   the drawer is .active (user-triggered), and reduced-motion shows them at rest. */
.ast-mobile-popup-drawer.active #ast-hf-mobile-menu > .menu-item{
  opacity:.001; transform:translateX(-10px);
  animation:v-drawer-item .5s var(--v-ease) forwards;
}
.ast-mobile-popup-drawer.active #ast-hf-mobile-menu > .menu-item:nth-child(1){ animation-delay:.06s; }
.ast-mobile-popup-drawer.active #ast-hf-mobile-menu > .menu-item:nth-child(2){ animation-delay:.11s; }
.ast-mobile-popup-drawer.active #ast-hf-mobile-menu > .menu-item:nth-child(3){ animation-delay:.16s; }
.ast-mobile-popup-drawer.active #ast-hf-mobile-menu > .menu-item:nth-child(4){ animation-delay:.21s; }
.ast-mobile-popup-drawer.active #ast-hf-mobile-menu > .menu-item:nth-child(5){ animation-delay:.26s; }
.ast-mobile-popup-drawer.active #ast-hf-mobile-menu > .menu-item:nth-child(n+6){ animation-delay:.3s; }
@keyframes v-drawer-item{ to{ opacity:1; transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){
  .ast-mobile-popup-drawer.active #ast-hf-mobile-menu > .menu-item{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
  .ast-mobile-popup-drawer #menu-toggle-close:hover{ transform:none; }
}

/* ---------- Blog / archive title clears the fixed header ----------------- *
 * The header bar is position:fixed site-wide and 200px tall on desktop (the
 * same height Astra bakes into the single-post banner's margin-top:200px).
 * Astra ships the blog/category/tag archive banner with margin-top:96px
 * instead, so the "Teach Yourself" title on /posts/ hid ~28px under the bar.
 * Match the real header height plus a little air. Desktop-only: at ≤921px the
 * banner centres its content well below the mobile header, so it clears there. */
@media (min-width:922px){
  .blog .ast-archive-entry-banner,
  .category .ast-archive-entry-banner,
  .tag .ast-archive-entry-banner{
    margin-top:calc(200px + 2.5rem) !important;
  }
}

/* ---------- Buttons: pine primary, gold hover-lift ----------------------- */
.button,
button.button,
.single_add_to_cart_button,
.wp-block-button__link,
.elementor-button,
.wc-block-components-button,
input[type="submit"],
.ast-button{
  background-color:var(--v-pine) !important;
  color:var(--v-cream) !important;
  border:1px solid transparent !important;
  border-radius:4px !important;
  font-family:"Jost",sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-size:.82rem !important;
  padding:1em 1.9em !important;
  transition:transform .5s var(--v-ease), background-color .35s var(--v-ease), box-shadow .5s var(--v-ease) !important;
}
.button:hover,
.single_add_to_cart_button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.wc-block-components-button:hover,
input[type="submit"]:hover,
.ast-button:hover{
  background-color:var(--v-pine-deep) !important;
  color:var(--v-cream) !important;
  transform:translateY(-3px);
  box-shadow:0 14px 34px -16px rgba(31,75,59,.7) !important;
}
/* Gold accent button — add class .is-gold in Elementor for hero CTAs */
.elementor-button.is-gold,.wp-block-button.is-style-gold .wp-block-button__link{
  background-color:var(--v-gold) !important; color:var(--v-ink) !important;
}
.elementor-button.is-gold:hover{ background-color:var(--v-gold-bright) !important; }

/* ---------- WooCommerce price + product bits ----------------------------- */
.price,.woocommerce-Price-amount,
.wc-block-components-product-price{
  color:var(--v-pine) !important; font-weight:600;
}
.product_title,.entry-title{ color:var(--v-on-cream) !important; }
.star-rating span::before,.star-rating::before{ color:var(--v-gold-deep) !important; }
/* Sale badge → saffron */
.onsale,.wc-block-components-product-sale-badge{
  background:var(--v-saffron) !important; color:#fff !important; border-radius:2px !important;
}

/* ---------- Footer: spice-dark ------------------------------------------- */
.site-footer,
.ast-small-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap,
footer.site-footer[data-section]{
  background:var(--v-ink) !important;
  background-image:none !important;
  color:var(--v-on-ink-dim) !important;
}
.site-footer p,.site-footer li,.ast-footer-copyright,
.site-footer .widget{ color:var(--v-on-ink-dim) !important; }
.site-footer h1,.site-footer h2,.site-footer h3,
.site-footer h4,.site-footer .widget-title{
  color:var(--v-gold) !important;
  font-family:"Jost",sans-serif !important;
  letter-spacing:.2em; text-transform:uppercase; font-size:.78rem;
}
.site-footer a{ color:var(--v-on-ink-dim) !important; }
.site-footer a:hover{ color:var(--v-gold-bright) !important; }

/* ---------- Accessibility: focus + motion -------------------------------- */
a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.button:focus-visible,.elementor-button:focus-visible{
  outline:2px solid var(--v-gold) !important;
  outline-offset:3px !important;
}
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ---------- Homepage hero/intro readability fixes ------------------------ */
/* These two Elementor widgets sit on the hero's black-gradient band but were
   coloured dark (green/grey) — unreadable. Force light text on the dark band.
   (Layer-2 hero rebuild will supersede this; harmless until then.) */
.elementor-element-1d1f7e2 .elementor-heading-title{
  color:var(--v-cream) !important;
}
.elementor-element-aadc4fa,
.elementor-element-aadc4fa *{
  color:var(--v-on-ink) !important;
  text-shadow:0 1px 10px rgba(0,0,0,.75);
}
/* ===== END VELORA GLOBAL DESIGN SYSTEM ================================== */