/* ============================================================
   01 — BASE
   Dark canvas + typography, and the minimum needed to stop
   Storefront's own styling from fighting the ported sections.
   ============================================================ */

html, body { background: var(--vk-black); }

/* The mini-cart and mobile drawer park off-canvas (right:-400px / -100%) and
   the marquee track is deliberately wider than the screen. Without this they
   add ~51px of horizontal scroll on desktop.
   `clip` rather than `hidden`: hidden makes this a scroll container and would
   break the sticky header (.vk-hd). */
html { overflow-x: clip; }
body { overflow-x: clip; }

body,
body.woocommerce,
body.woocommerce-page {
  background: var(--vk-black);
  color: var(--vk-text-muted);
  font-family: var(--vk-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-osx-font-smoothing: grayscale;
}

/* Display face — the thing that makes Vapekage look like Vapekage */
h1, h2, h3,
.vk-hero-h1,
.entry-title,
.page-title,
.woocommerce-products-header__title,
.product_title {
  font-family: var(--vk-font-display);
  font-weight: 700;
  letter-spacing: var(--vk-ls-display);
  line-height: .92;
  text-transform: uppercase;
  color: var(--vk-text);
}

h1, .entry-title, .page-title,
.woocommerce-products-header__title,
.product_title { font-size: clamp(2.4rem, 6vw, 5.39rem); line-height: .88; }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h4, h5, h6 {
  font-family: var(--vk-font);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--vk-text);
}

p { color: var(--vk-text-muted); }
small, .small { color: var(--vk-text-dim); font-size: 13px; }

a { color: var(--vk-accent); text-decoration: none; }
a:hover { color: var(--vk-accent-2); }

/* Storefront forces underlines on content links — normalise, but keep
   underlines inside prose so body copy stays readable/accessible. */
.vk-header a,
.vk-footer a,
[class^="vk-"] a,
[class*=" vk-"] a,
.woocommerce ul.products li.product a,
.site-header a,
.site-footer a { text-decoration: none !important; }

/* Full-bleed: the ported sections manage their own padding */
.vk-section-full,
[class^="vk-"][class*="-hero"],
.vk-header,
.vk-footer { max-width: none; width: 100%; }

img { max-width: 100%; height: auto; }

::selection { background: var(--vk-accent); color: #000; }

/* Focus ring — keyboard users must still see where they are */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--vk-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   FAQ question buttons — undo the themed <button> treatment
   -------------------------------------------------------------------------
   Every FAQ row is a real <button> for keyboard and screen-reader support, and
   it therefore inherits the site's themed button styling: a lime pill with dark
   text, 13px/22px padding and a 10px radius. On an accordion row that is not a
   small visual slip — the whole question bar renders as a solid lime block, so
   the FAQ reads as a stack of green bars rather than a list of questions, and
   it looks broken rather than styled.

   The section stylesheets already describe how these should look, but they set
   it on a single class and lose the cascade. Restoring it here, scoped to FAQ
   rows only, fixes the homepage FAQ, the collection FAQ and the FAQ page
   together without touching the header, cart and back-to-top buttons, whose
   lime treatment IS the design.
   ------------------------------------------------------------------------- */

.vk-faq__item > .vk-faq__q,
.vk-fq__item > .vk-fq__q,
button.vk-faq__q,
button.vk-fq__q {
  width: 100% !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 14px 22px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  cursor: pointer;
  text-align: left !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #fff !important;
}

.vk-faq__item > .vk-faq__q:hover,
.vk-fq__item > .vk-fq__q:hover,
button.vk-faq__q:hover,
button.vk-fq__q:hover {
  color: #aaff00 !important;
  background: rgba(170, 255, 0, 0.04) !important;
}