/* ============================================================
   02 — OVERRIDES
   Corrections applied on top of the ported section CSS.

   Files in css/sections/ are generated from the Shopify theme and
   are meant to stay byte-for-byte faithful, so they can be
   regenerated at any time. Anything we deliberately change goes
   HERE, with the reason written down.
   ============================================================ */

/* ------------------------------------------------------------
   HEADER: nav overflowed the viewport between 900px and ~1550px.

   The nav needs ~1007px at its default spacing, but the original
   only collapses it to a hamburger at 900px. Between those widths
   the cart button was pushed off-screen — verified present on the
   live Shopify site too (overflowed by 26px at 1440, 186px at
   1280), so this is an inherited bug, not a porting artefact.

   Fix: tighten nav spacing across the laptop range and let the
   hamburger take over before the nav can ever overflow.
   ------------------------------------------------------------ */
@media (max-width: 1550px) {
  .vk-hd__wrap { gap: 20px; padding: 0 28px; }
  .vk-nav { gap: 2px; min-width: 0; }
  .vk-nav__a { padding-left: 8px; padding-right: 8px; letter-spacing: .06em; }
}

@media (max-width: 1340px) {
  .vk-hd__wrap { gap: 14px; padding: 0 20px; }
  .vk-nav__a { padding-left: 6px; padding-right: 6px; letter-spacing: .04em; }
  /* the cart's text label is the least important thing in the row */
  .vk-ic__lbl { display: none; }
}

/* Hand over to the hamburger while the nav still fits, rather than
   letting it collide with the icons first. */
@media (max-width: 1180px) {
  .vk-nav { display: none; }
  .vk-ham { display: flex; }
}

/* ------------------------------------------------------------
   BRAND CARDS WITH NO IMAGE

   Shopify's placeholder_svg_tag draws a real illustration; our
   renderer can only emit a flat rect, which is invisible on a dark
   card and reads as broken. This is the same letter-mark treatment
   the theme already uses for guide cards with no image.

   TEMPORARY: set a brand image on the block and this disappears.
   Currently affects Pod Juice, Vapetasia, Coastal Clouds, Sadboy.
   ------------------------------------------------------------ */
.vk-bg__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(170,255,0,.10), transparent 60%),
    linear-gradient(145deg, #141414 0%, #0c0c0c 100%);
}
.vk-bg__ph-mark {
  font-family: var(--vk-font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  color: rgba(170,255,0,.22);
  -webkit-user-select: none;
  user-select: none;
}
.vk-bg__card:hover .vk-bg__ph-mark { color: rgba(170,255,0,.34); }

/* Brand names that wrap to two lines ("Coastal Clouds", "Sadboy E-Liquid")
   pushed their "SHOP →" link down, so the links didn't line up across the
   row. .vk-bg__info is already a flex column — pin the CTA to the bottom. */
.vk-bg__cta { margin-top: auto; padding-top: 16px; }

/* ------------------------------------------------------------
   SCROLL-REVEAL FAILSAFE

   Several ported sections hide their content with a "*-reveal" class
   (opacity:0 + translateY) and rely on their own IntersectionObserver
   to add .is-visible. When that observer does not run, the content
   stays invisible permanently — the About section rendered as a tall
   blank block for exactly this reason.

   This is CSS-only on purpose: a JS failsafe is only as reliable as
   the JS that already failed. Anything still un-revealed 3.5s after
   the stylesheet applies fades itself in. A section whose observer
   works adds .is-visible, the :not() stops matching, and its own
   animation plays as designed.
   ------------------------------------------------------------ */
@keyframes vk-reveal-failsafe {
  to { opacity: 1; transform: none; }
}

[class*="-reveal"]:not(.is-visible) {
  animation: vk-reveal-failsafe .5s ease 3.5s forwards;
}

@media (prefers-reduced-motion: reduce) {
  /* no waiting and no movement for anyone who asked for less motion */
  [class*="-reveal"],
  [class*="-reveal"]:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   EMAIL CAPTURE (homepage)

   The block is now a real <form>; these cover the states the
   ported CSS never had, plus two readability fixes on the lime
   ground: the fine print was grey-on-lime, and "Join the List"
   did not read as a button.
   ------------------------------------------------------------ */
.vk-em__form-wrap { flex-wrap: wrap; }

.vk-em__btn {
  background: #101010;
  color: #eaffb0;
  border: 0;
  border-radius: var(--vk-radius);
  padding: 13px 24px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}
.vk-em__btn:hover { background: #1c1c1c; transform: translateY(-1px); }

/* fine print and perks sit on lime — near-black reads, grey does not */
.vk-em__note { color: rgba(0, 0, 0, .62) !important; }
.vk-em__perk { color: rgba(0, 0, 0, .78) !important; }

.vk-em__done,
.vk-em__error {
  flex-basis: 100%;
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
}
.vk-em__done {
  color: #0b0b0b;
  background: rgba(0, 0, 0, .08);
  border-radius: var(--vk-radius);
  padding: 12px 16px;
  display: inline-block;
}
.vk-em__error { color: #6b1109; }

/* ------------------------------------------------------------
   BLOG INDEX  (/blogs/news/)
   Reuses the homepage "Latest Guides" section styling; these are the
   few extras the archive needs on top of it.
   ------------------------------------------------------------ */
.vk-blog-archive .vk-latest-guides__title { font-size: clamp(2.4rem, 5vw, 4rem); }
.vk-blog-count {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--vk-ls-eyebrow);
  text-transform: uppercase;
  color: var(--vk-accent);
}
.vk-blog-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 40px;
}
.vk-blog-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius);
  background: var(--vk-surface);
  color: var(--vk-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
}
.vk-blog-pager .page-numbers:hover { border-color: var(--vk-accent-soft); color: var(--vk-text); }
.vk-blog-pager .page-numbers.current {
  background: var(--vk-accent);
  border-color: var(--vk-accent);
  color: #101010;
}

/* ------------------------------------------------------------
   Storefront wraps page content in .col-full (max-width ~1170px).
   The ported sections are full-bleed and manage their own padding,
   so let them out of that wrapper on the pages that use them.
   ------------------------------------------------------------ */
.vk-home,
.vk-home > section,
.vk-home > .vk-pg,
.vk-home > .vk-latest-guides { max-width: none; }

.home .site-content,
.home #primary,
.home .content-area { padding: 0 !important; margin: 0 !important; }

/* ------------------------------------------------------------
   Storefront injects its own link underlines and button styles
   inside our sections; the ported CSS assumes neither.
   ------------------------------------------------------------ */
.vk-home a,
.vk-hd a,
.vk-ft a { box-shadow: none !important; }

/* ------------------------------------------------------------
   Full-bleed layout — the side gutters.

   Storefront's .col-full carries `margin: 0 4.6608%`, which on a
   390px phone is a 23px black margin down each side of every
   section. The rule above only cleared padding on .site-content
   and only on the homepage, so .col-full kept insetting everything
   everywhere — the "tiny black lines on the sides".

   .vk-full-width is added site-wide by inc/chrome.php, so this
   frees the wrapper on every view. The ported sections each carry
   their own horizontal padding, and the templates that need a
   readable measure (the article, the search results) cap their own
   text width, so nothing here runs edge to edge that shouldn't.
   ------------------------------------------------------------ */
.vk-full-width .col-full {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.vk-full-width .site-content,
.vk-full-width #primary,
.vk-full-width .content-area {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}

/* ------------------------------------------------------------
   Ordering-closed notice (inc/payments.php).
   Sits above everything, including the announcement ticker, so it
   is the first thing read. Printed only while there is no
   processor; it disappears with the rest of the payment copy when
   vk_payments_live() is switched on.
   ------------------------------------------------------------ */
.vk-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--vk-accent);
  color: #0b0b0b;
  font-family: var(--vk-font);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.vk-notice__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #0b0b0b;
  color: var(--vk-accent);
  font-size: .75rem;
  font-weight: 800;
}

@media (max-width: 560px) {
  .vk-notice { font-size: .8125rem; padding: 10px 14px; gap: 8px; }
}

/* ------------------------------------------------------------
   ...and the gutter that .col-full used to provide.

   Freeing .col-full above fixed the black margins down the sides
   of the ported sections, but it also removed the only horizontal
   padding that WordPress-rendered text had: article bodies and the
   static pages went edge to edge, letters touching both sides of
   the phone.

   .entry-content is the precise target. The full-bleed templates —
   home, collection, product, blog index, search, 404 — render
   their sections directly and have no .entry-content at all, so
   they are untouched by this. The three views that do have one are
   the article, the static pages, and the cart; the cart's ported
   layout carries its own padding, so it opts back out.
   ------------------------------------------------------------ */
.vk-full-width .entry-content {
  padding-left: 16px;
  padding-right: 16px;
}

.vk-full-width.vk-cart .entry-content {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  .vk-full-width .entry-content { padding-left: 24px; padding-right: 24px; }
  .vk-full-width.vk-cart .entry-content { padding-left: 0; padding-right: 0; }
}

/* ------------------------------------------------------------
   .vk-shipping-info — wherever it lands.

   The ported block ships a light card (#f9fafb) from the Shopify
   theme, which was fine there and is unreadable here: the site's
   text colour is white, so it rendered white on near-white.

   vk-pdp-base.css already fixes it, but that file belongs to the
   'product' CSS group, so on the shipping-information and
   pact-act-compliance pages it never loaded and the light card
   came through untouched. The same markup can appear on any page
   that embeds the block, so the treatment belongs here, where it
   loads everywhere, rather than in one template's stylesheet.
   ------------------------------------------------------------ */
.vk-shipping-info {
  background: #0a0a0a !important;
  border: 1px solid rgba(170, 255, 0, .18) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  color: rgba(255, 255, 255, .88) !important;
}

.vk-shipping-info h2,
.vk-shipping-info h3,
.vk-shipping-info h4 { color: #fff !important; margin-top: 0; }

.vk-shipping-info p,
.vk-shipping-info li,
.vk-shipping-info ul,
.vk-shipping-info ol,
.vk-shipping-info em,
.vk-shipping-info strong { color: rgba(255, 255, 255, .88) !important; }

.vk-shipping-info a { color: var(--vk-accent) !important; }

.vk-shipping-info p[style*="color"],
.vk-shipping-info > p:last-child { color: rgba(255, 255, 255, .65) !important; }