/*
Theme Name:  Kismet Candles (Flatsome child)
Theme URI:   https://kismetcandles.com
Description: Electric Rebirth dark build of kismetcandles.com — hand-poured ritual skull candles by Courtney Mason. Child theme of Flatsome (UX-Themes), the parent already licensed on the live install.
Author:      Brandon Harvey
Template:    flatsome
Version:     0.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
WC requires at least: 8.0
Text Domain: kismet
*/

/* ==========================================================================
   1. Ported from site/index.html (the approved redesign). Edit there first,
      then re-run scratchpad/gen_theme.py, or edit here once the mock-up is retired.
   ========================================================================== */
  :root{
    --night:#0D0918;
    --panel:#1A1230;
    --panel-2:#221740;
    --bone:#EFE6D8;
    --bone-dim:#B9AC98;
    --ember:#FF7A2F;
    --ember-hi:#FFC46B;
    --violet:#7A5CFF;
    --teal:#00EAA7;
    --fuchsia:#FF2F92;
    --honey:#FFD85E;
    --line:rgba(239,230,216,.14);
    --display:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    --utility:"Segoe UI",system-ui,sans-serif;
  }
  html{scroll-behavior:smooth}
  body{
    background:var(--night);
    color:var(--bone);
    font-family:var(--display);
    line-height:1.6;
    overflow-x:hidden;
  }
  #sky{position:fixed;inset:0;z-index:0;pointer-events:none}
  .page{position:relative;z-index:1}
  a{color:inherit;text-decoration:none}
  .script{
    font-family:"Dancing Script","Segoe Script","Brush Script MT",cursive;
    color:var(--ember-hi);font-size:1.25rem;letter-spacing:.02em;
  }
  .label{
    font-family:var(--utility);
    font-size:.7rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--ember-hi);
  }
  /* ---------- NAV ---------- */
  header{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    gap:2rem;
    padding:.8rem clamp(1rem,4vw,3rem);
    background:rgba(13,9,24,.72);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .brand{display:flex;align-items:center;gap:.7rem}
  .brand svg{width:44px;height:56px;overflow:visible}
  .brand-name{
    font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;
    font-weight:400;
  }
  .brand-name em{font-style:normal;color:var(--ember-hi)}
  nav{display:flex;gap:clamp(1rem,2.5vw,2.2rem)}
  nav a{
    position:relative;
    font-family:var(--utility);
    font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--bone-dim);
    padding:.4rem 0;
    transition:color .3s;
  }
  nav a:hover,nav a:focus-visible{color:var(--bone)}
  /* the "burning fuse" underline: a gradient wick that ignites left→right with a flame tip */
  nav a::after{
    content:"";
    position:absolute;left:0;bottom:0;height:2px;width:100%;
    background:linear-gradient(90deg,var(--ember) 0%,var(--ember-hi) 80%,#fff 100%);
    transform:scaleX(0);transform-origin:left;
    transition:transform .45s cubic-bezier(.22,1,.36,1);
    box-shadow:0 0 8px rgba(255,122,47,.8);
  }
  nav a::before{
    content:"";
    position:absolute;bottom:-2px;left:0;width:6px;height:6px;border-radius:50% 50% 50% 0;
    background:radial-gradient(circle at 40% 70%,#fff,var(--ember-hi) 45%,var(--ember) 75%,transparent);
    opacity:0;
    transform:rotate(-45deg);
    filter:blur(.4px);
  }
  nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1)}
  nav a:hover::before,nav a:focus-visible::before{
    opacity:1;
    animation:fuse .45s cubic-bezier(.22,1,.36,1) forwards,flicker-tip 1s .45s infinite alternate;
  }
  @keyframes fuse{from{left:0}to{left:calc(100% - 5px)}}
  @keyframes flicker-tip{
    0%{transform:rotate(-45deg) scale(1)}
    50%{transform:rotate(-40deg) scale(1.35)}
    100%{transform:rotate(-50deg) scale(.9)}
  }
  .cart{
    font-family:var(--utility);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
    border:1px solid var(--line);border-radius:999px;padding:.55rem 1.1rem;
    color:var(--bone);transition:border-color .3s,box-shadow .3s;
  }
  .cart:hover{border-color:var(--ember);box-shadow:0 0 16px rgba(255,122,47,.35)}
  /* ---------- skull mark flame ---------- */
  .flame-group{transform-origin:32px 12px}
  .flame-outer{fill:url(#flameGrad);transform-origin:32px 13px;animation:dance 1.6s ease-in-out infinite alternate}
  .flame-inner{fill:#FFF3D6;transform-origin:32px 13px;animation:dance 1.1s .2s ease-in-out infinite alternate-reverse}
  .flame-glow{animation:glowpulse 2.2s ease-in-out infinite alternate}
  @keyframes dance{
    0%{transform:scaleY(1) skewX(0deg)}
    35%{transform:scaleY(1.12) skewX(-4deg)}
    70%{transform:scaleY(.94) skewX(3deg)}
    100%{transform:scaleY(1.06) skewX(-2deg)}
  }
  @keyframes glowpulse{from{opacity:.5}to{opacity:.95}}
  .skull-eyes ellipse{transition:fill .4s}
  .brand:hover .skull-eyes ellipse{fill:var(--ember-hi)}
  .brand:hover .flame-outer{animation-duration:.7s}
  /* ---------- HERO ---------- */
  .hero{
    min-height:92vh;
    display:grid;place-items:center;text-align:center;
    padding:4rem 1.5rem 6rem;
    position:relative;
  }
  .hero-skull{width:clamp(180px,26vw,280px);overflow:visible;margin-bottom:1rem;
    filter:drop-shadow(0 0 60px rgba(255,122,47,.25))}
  .hero h1{
    font-size:clamp(2.4rem,6vw,4.6rem);
    line-height:1.08;font-weight:400;
    text-wrap:balance;
    max-width:16ch;margin:0 auto 1.2rem;
  }
  .hero h1 em{font-style:italic;color:var(--ember-hi)}
  .hero p{max-width:52ch;margin:0 auto 2.2rem;color:var(--bone-dim);font-size:1.05rem}
  .cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
  .btn{
    font-family:var(--utility);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
    padding:.95rem 2.1rem;border-radius:999px;transition:transform .3s,box-shadow .3s;
  }
  .btn-ember{
    background:linear-gradient(135deg,var(--ember) 0%,var(--ember-hi) 100%);
    color:#2A1405;font-weight:600;
    box-shadow:0 0 24px rgba(255,122,47,.4);
  }
  .btn-ember:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(255,122,47,.65)}
  .btn-ghost{border:1px solid var(--line);color:var(--bone)}
  .btn-ghost:hover{border-color:var(--violet);box-shadow:0 0 18px rgba(122,92,255,.35)}
  .scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
    color:var(--bone-dim);font-family:var(--utility);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
    animation:bob 2.4s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
  /* ---------- MARQUEE ---------- */
  .marquee{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    overflow:hidden;white-space:nowrap;padding:1rem 0;
    background:rgba(26,18,48,.5);
  }
  .marquee-track{display:inline-block;animation:slide 42s linear infinite}
  .marquee span{
    font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);
    padding:0 1.6rem;
  }
  .marquee b{color:var(--ember-hi);font-weight:400}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  /* ---------- SECTIONS ---------- */
  section{padding:clamp(4rem,9vw,7.5rem) clamp(1.2rem,5vw,4rem);max-width:1200px;margin:0 auto}
  .sec-head{text-align:center;margin-bottom:3.5rem}
  .sec-head h2{
    font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:400;margin:.6rem 0 .8rem;text-wrap:balance;
  }
  .sec-head p{color:var(--bone-dim);max-width:56ch;margin:0 auto}
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
  .reveal.lit{opacity:1;transform:none}
  /* ---------- COLLECTION ---------- */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem}
  .card{
    background:linear-gradient(180deg,var(--panel) 0%,rgba(26,18,48,.4) 100%);
    border:1px solid var(--line);border-radius:18px;
    padding:1.6rem 1.3rem 1.5rem;text-align:center;
    transition:transform .35s ease,border-color .35s,box-shadow .35s;
    position:relative;
  }
  .card:hover{transform:translateY(-6px);border-color:var(--card-c,var(--ember));box-shadow:0 12px 44px -12px var(--card-glow,rgba(255,122,47,.45))}
  .card svg{width:74px;height:92px;overflow:visible;margin-bottom:.9rem}
  .card:hover .flame-outer{animation-duration:.7s}
  .card h3{font-size:1.18rem;font-weight:400;margin-bottom:.2rem}
  .intent{
    display:inline-block;font-family:var(--utility);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
    color:var(--card-c,var(--ember-hi));border:1px solid currentColor;border-radius:999px;
    padding:.28rem .8rem;margin:.5rem 0 .7rem;opacity:.9;
  }
  .card p{font-size:.86rem;color:var(--bone-dim);line-height:1.55;min-height:4em}
  .price{display:block;margin-top:.8rem;font-size:1.05rem;color:var(--bone)}
  .card .btn{display:inline-block;margin-top:.9rem;padding:.6rem 1.4rem;font-size:.68rem;
    border:1px solid var(--line);border-radius:999px;color:var(--bone)}
  .card .btn:hover{border-color:var(--card-c,var(--ember));box-shadow:0 0 14px var(--card-glow,rgba(255,122,47,.4))}
  /* ---------- BLEND ---------- */
  .blend{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.4rem;text-align:center}
  .herb{padding:2rem 1.2rem;border-radius:18px;border:1px solid var(--line);background:rgba(26,18,48,.35)}
  .herb-sigil{font-size:1.9rem;display:block;margin-bottom:.7rem;filter:drop-shadow(0 0 10px rgba(255,196,107,.35))}
  .herb h3{font-size:1.05rem;font-weight:400;letter-spacing:.06em}
  .herb .for{color:var(--ember-hi);font-style:italic;font-size:.9rem;display:block;margin:.2rem 0 .6rem}
  .herb p{font-size:.85rem;color:var(--bone-dim)}
  /* ---------- RITUAL STEPS ---------- */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem;counter-reset:step}
  .step{position:relative;padding-left:1.2rem;border-left:1px solid var(--line)}
  .step::before{
    counter-increment:step;content:counter(step,upper-roman);
    font-family:var(--display);font-style:italic;font-size:1rem;color:var(--violet);
    display:block;margin-bottom:.5rem;letter-spacing:.2em;
  }
  .step h3{font-size:1.15rem;font-weight:400;margin-bottom:.5rem}
  .step p{font-size:.9rem;color:var(--bone-dim)}
  /* ---------- STORY ---------- */
  .story{
    display:grid;grid-template-columns:1fr 1.3fr;gap:3rem;align-items:center;
  }
  @media(max-width:760px){.story{grid-template-columns:1fr}}
  .story-mark{display:grid;place-items:center}
  .story-mark svg{width:min(240px,60vw);overflow:visible;filter:drop-shadow(0 0 50px rgba(122,92,255,.3))}
  .story h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:400;margin-bottom:1.2rem;text-wrap:balance}
  .story h2 em{font-style:italic;color:var(--violet)}
  .story p{color:var(--bone-dim);margin-bottom:1rem;max-width:58ch}
  .story .sig{font-style:italic;color:var(--bone);font-size:1.05rem}
  /* ---------- CIRCLE ---------- */
  .circle{
    text-align:center;background:radial-gradient(ellipse at center,rgba(255,122,47,.12) 0%,transparent 65%);
    border-radius:24px;
  }
  .circle-form{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
  .circle-form input{
    font-family:var(--utility);font-size:.9rem;
    background:rgba(26,18,48,.7);border:1px solid var(--line);border-radius:999px;
    padding:.9rem 1.4rem;color:var(--bone);min-width:min(320px,80vw);
  }
  .circle-form input::placeholder{color:var(--bone-dim)}
  .circle-form input:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:3rem clamp(1.2rem,5vw,4rem) 2.2rem;
    display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:center;
    color:var(--bone-dim);font-family:var(--utility);font-size:.78rem;letter-spacing:.08em;
  }
  footer .foot-tag{font-family:var(--display);font-style:italic;font-size:.95rem}
  /* ---------- FOLLOW STRIP ---------- */
  .follow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2rem;
    padding:1rem clamp(1rem,4vw,3rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:rgba(26,18,48,.55);font-family:var(--utility);font-size:.82rem;color:var(--bone-dim)}
  .follow strong{color:var(--bone);font-weight:500}
  .btn-fb{background:#1877F2;color:#fff;box-shadow:0 0 22px rgba(24,119,242,.45)}
  .btn-fb:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(24,119,242,.7)}
  .btn-sm{padding:.6rem 1.3rem;font-size:.68rem}
  /* ---------- SIZE LADDER ---------- */
  .ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:2.2rem auto 0;max-width:820px}
  .rung{text-align:center;padding:1.1rem .8rem;border:1px solid var(--line);border-radius:14px;background:rgba(26,18,48,.6)}
  .rung .sz{font-family:var(--utility);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ember-hi)}
  .rung .h{display:block;color:var(--bone-dim);font-size:.85rem;margin:.2rem 0 .4rem}
  .rung .rp{font-size:1.35rem}
  .rung .wp{display:block;font-family:var(--utility);font-size:.72rem;color:var(--teal);margin-top:.2rem}
  .from{font-family:var(--utility);font-size:.7rem;color:var(--bone-dim);margin-right:.3rem}
  /* ---------- LINES ---------- */
  .line-card .tag{font-family:var(--utility);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--card-c,var(--ember-hi))}
  .line-card h3{margin-top:.4rem}
  .line-card ul{list-style:none;padding:0;margin:.6rem 0 0;font-size:.82rem;color:var(--bone-dim);line-height:1.6}
  .line-card ul li::before{content:"\2726  ";color:var(--card-c,var(--ember-hi))}
  /* ---------- WHOLESALE ---------- */
  .wholesale{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center;
    padding:clamp(2rem,4vw,3.2rem);border:1px solid var(--line);border-radius:22px;
    background:linear-gradient(135deg,rgba(255,216,94,.08),rgba(26,18,48,.75) 45%,rgba(0,234,167,.07))}
  @media(max-width:760px){.wholesale{grid-template-columns:1fr}}
  .wholesale h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:400;margin:.5rem 0 1rem;text-wrap:balance}
  .wholesale p{color:var(--bone-dim);max-width:52ch}
  .wholesale .facts{display:grid;gap:.9rem}
  .fact{padding:1rem 1.1rem;border-left:2px solid var(--honey);background:rgba(13,9,24,.5);border-radius:0 12px 12px 0}
  .fact b{display:block;font-weight:400;font-size:1.05rem}
  .fact span{font-family:var(--utility);font-size:.8rem;color:var(--bone-dim)}
  footer nav{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center}
  footer nav a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--utility);color:var(--bone-dim)}
  footer nav a:hover{color:var(--ember-hi)}
  .btn:focus-visible,a:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px;border-radius:4px}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    #sky{display:none}
    .reveal{opacity:1;transform:none}
  }

/* ==========================================================================
   2. WordPress / Flatsome / WooCommerce overrides
   header.php and footer.php replace Flatsome's header/footer entirely, so only
   Flatsome's *inner-page* chrome (shop, product, cart, checkout) is restyled.
   ========================================================================== */
html,body,#wrapper,#main,.page-wrapper,.shop-container{background:var(--night);color:var(--bone)}
.header-wrapper,#header,.footer-wrapper,#footer,.absolute-footer,.back-to-top{display:none!important}
.kismet-page main{max-width:none;padding:0}
.kismet-page #main .container{max-width:1200px}
/* Header from the mock-up is rendered by header.php; WP nav markup gets the same look */
header.kismet-header nav ul{display:flex;gap:clamp(1rem,2.5vw,2.2rem);list-style:none;margin:0;padding:0}
header.kismet-header nav li{margin:0}
/* Restate the `nav a` look rather than `inherit` it: this selector outranks `nav a`, so inheriting
   from the <li> threw away the brand's size, tracking and uppercase along with Flatsome's. */
header.kismet-header nav li a{padding:.4rem 0;line-height:inherit;font-family:var(--utility);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase}
header.kismet-header .cart .count{margin-left:.35rem;color:var(--ember-hi)}
/* Product cards rendered from the loop */
.card .woocommerce-Price-amount{color:var(--bone)}
.card img{width:74px;height:92px;object-fit:contain;margin:0 auto .9rem;display:block;filter:drop-shadow(0 0 18px var(--card-glow,rgba(255,122,47,.35)))}
.card .btn.add_to_cart_button,.card .btn.added_to_cart{display:inline-block;margin-top:.9rem;padding:.6rem 1.4rem;font-size:.68rem;border:1px solid var(--line);border-radius:999px;color:var(--bone);background:none;line-height:1.4}
/* Shop / archive: Flatsome's product grid, recoloured */
.products .product-small.box,.products .product-small .box{background:linear-gradient(180deg,var(--panel) 0%,rgba(26,18,48,.4) 100%);border:1px solid var(--line);border-radius:18px;padding:1.2rem;text-align:center}
.products .product-small .box-image{background:transparent;border-radius:12px}
.products .product-small .box-text{background:transparent;padding-top:.8rem}
.product-small .product-title,.product-small .product-title a,.product-info .product-title,.shop-page-title,.page-title-inner,.woocommerce-products-header__title{font-family:var(--display);font-weight:400;color:var(--bone)}
.product-small .price,.product-info .price,.price-wrapper .price{color:var(--bone)}
.product-small .category{color:var(--bone-dim)}
.badge-container .badge-inner{background:var(--fuchsia);color:#fff;border-radius:999px;font-family:var(--utility);letter-spacing:.14em}
.shop-page-title.featured-title,.page-title{background:transparent}
.shop-page-title.featured-title .title-bg,.page-title .title-overlay{display:none}
/* Buttons (Flatsome + WooCommerce + block cart)
   Ember is opt-in, not opt-out. The WooCommerce catch-alls here used to be bare
   `.woocommerce button.button` / `input.button` / `a.button` — (0,2,1), heavier than most of the
   overrides written against them — so every Woo control came out an ember pill: the quantity
   stepper, the share icons, the wishlist hearts, the gallery circles, the header search submit.
   Flatsome marks all of those with .is-outline / .is-link / .is-form / .icon / .secondary, so the
   catch-alls exclude that set and the ghost rule below owns it. Add a control to the exclusion
   list rather than writing a heavier rule to take it back. */
.button.primary,.button.alt,.add-to-cart-grid .button,.single_add_to_cart_button,.checkout-button,.woocommerce .button.checkout,.wc-block-components-button,.woocommerce #respond input#submit,.woocommerce button.button:not(.is-outline,.is-link,.is-form,.icon,.secondary),.woocommerce input.button:not(.is-outline,.is-link,.is-form,.icon,.secondary),.woocommerce a.button:not(.is-outline,.is-link,.is-form,.icon,.secondary){font-family:var(--utility);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;border-radius:999px;background:linear-gradient(135deg,var(--ember) 0%,var(--ember-hi) 100%);color:#2A1405;font-weight:600;border:0;box-shadow:0 0 24px rgba(255,122,47,.4)}
/* The glow lives in the rule above rather than a later one of its own: a primary action *is* the
   ember button, and a separate override only has to out-weigh the catch-alls all over again. */
.woocommerce button.single_add_to_cart_button.button:hover,.woocommerce a.checkout-button.button:hover,.woocommerce .button.checkout:hover,.button.primary:hover,.button.alt:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(255,122,47,.65);color:#2A1405}
/* Secondary controls get the redesign's ghost treatment (.btn-ghost). Flatsome's own
   --primary-color is untouched at its #446084 default and never reaches these — the orange was
   all ours — but its outline buttons draw their border from it, so recolour to --line/--bone. */
.button.is-outline,.button.is-link,
.woocommerce .button.is-outline,.woocommerce .button.is-link,.woocommerce .button.is-form,
.woocommerce .button.icon,.woocommerce .button.secondary,
.woocommerce .quantity input.button,.woocommerce .social-icons a.button{
  background:none;background-image:none;border:1px solid var(--line);color:var(--bone);
  font-weight:400;box-shadow:none;text-shadow:none;transition:border-color .3s,box-shadow .3s,color .3s
}
.button.is-outline:hover,.button.is-link:hover,
.woocommerce .button.is-outline:hover,.woocommerce .button.is-link:hover,.woocommerce .button.is-form:hover,
.woocommerce .button.icon:hover,.woocommerce .button.secondary:hover,
.woocommerce .quantity input.button:hover,.woocommerce .social-icons a.button:hover{
  background:none;background-image:none;border-color:var(--violet);color:var(--bone);
  box-shadow:0 0 18px rgba(122,92,255,.35)
}
/* Quantity field: match the stepper so minus | input | plus reads as one pill. */
.woocommerce .quantity input.qty,.woocommerce .quantity input.input-text.qty,.quantity input.input-text.qty{
  background:rgba(26,18,48,.7);border:1px solid var(--line);border-left-width:0;border-right-width:0;
  color:var(--bone);box-shadow:none;font-family:var(--utility)
}
/* "Clear" reset link above the variation table — it is a control, not a call to action. */
.woocommerce .product-info a.reset_variations,.kismet-page .product-info a.reset_variations{
  color:var(--bone-dim);font-family:var(--utility);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase
}
.woocommerce .product-info a.reset_variations:hover,.kismet-page .product-info a.reset_variations:hover{color:var(--ember-hi)}
/* Single product */
.product-info,.product-main,.product-footer{background:transparent;color:var(--bone)}
.product-info .product-short-description,.product-info .product_meta,.product-info .product_meta a{color:var(--bone-dim)}
.product-gallery{border-radius:18px;overflow:hidden;background:var(--panel)}
.woocommerce-tabs .nav.nav-tabs>li>a,.tabbed-content .nav>li>a{color:var(--bone-dim)}
.woocommerce-tabs .nav.nav-tabs>li.active>a,.tabbed-content .nav>li.active>a{color:var(--bone);border-color:var(--ember)}
.woocommerce-tabs .tab-panels,.product-footer .woocommerce-tabs{background:rgba(26,18,48,.5);border:1px solid var(--line);border-radius:14px;padding:1.2rem}
table.variations td.label{color:var(--bone-dim)}
table.variations select,.form-row input.input-text,.form-row textarea,select,.select2-container .select2-selection--single,input[type=text],input[type=email],input[type=tel],input[type=password]{background:rgba(26,18,48,.7);border:1px solid var(--line);color:var(--bone);border-radius:10px;box-shadow:none}
.kismet-wholesale-note{font-family:var(--utility);font-size:.78rem;color:var(--teal);margin-top:.4rem}
/* Cart / checkout / account */
.woocommerce-cart table.cart,.cart-wrapper,.checkout-sidebar,#order_review,.woocommerce-MyAccount-navigation,.woocommerce-MyAccount-content{background:rgba(26,18,48,.5);border:1px solid var(--line);border-radius:14px;padding:1.2rem}
.woocommerce-cart table.cart th,.woocommerce-cart table.cart td,.shop_table th,.shop_table td{border-color:var(--line);color:var(--bone)}
.checkout-breadcrumbs a,.checkout-breadcrumbs .current{color:var(--bone-dim)}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.message-container{background:var(--panel);color:var(--bone);border-color:var(--line)}
/* Content pages / blog */
.kismet-page .entry-content,.kismet-page .entry-header{max-width:72ch;margin:0 auto;padding:clamp(2rem,5vw,4rem) 1.2rem}
.kismet-page .entry-title{font-weight:400}
/* Ember links are an editorial-content treatment. `.kismet-page` is a body class, so leaving
   this unscoped painted every non-button link on the site — product meta, breadcrumbs, the
   variation "Clear" link — ember, and each one then needed its own override. Scope it to the
   content containers it was written for (the two rules directly above). */
.kismet-page .entry-content a:not(.btn):not(.button),.kismet-page .entry-header a:not(.btn):not(.button){color:var(--ember-hi)}
.kismet-page h1,.kismet-page h2,.kismet-page h3,.kismet-page h4{color:var(--bone)}
/* Journal cards from the loop */
.j-meta{font-family:var(--utility);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
/* Flatsome's typography. Customizer → Style → Typography prints an inline `custom-css` block after
   every stylesheet (Lato on body, h1–h6, .heading-font and .nav > li > a), so it wins each tie.
   Those settings live in the database and a staging→production push resets them, so the brand
   fonts are pinned here, one step more specific, instead of in the Customizer. Class-level rules
   above (.label, .j-meta, …) still beat these. */
html body{font-family:var(--display)}
html h1,html h2,html h3,html h4,html h5,html h6,html .heading-font{font-family:var(--display)}
html .nav>li>a{font-family:var(--utility)}
/* The flame is drawn above the viewBox (its tip is at y<0) and dances higher still. Flatsome's
   normalize rule `svg:not(:root){overflow:hidden}` outranks a bare class and cropped it on the
   hero, so every skull mark carries .skull-mark and this rule outranks the normalize. */
svg.skull-mark:not(:root){overflow:visible}