/** Shopify CDN: Minification failed

Line 54:0 All "@import" rules must come first

**/
/* ==========================================================================
   THE VAPOUR ROOM — vapour-room.css
   The visual backbone: colour palette, fonts, type scale, buttons.
   Loaded after Horizon's own styles so these values win the cascade.
   Edit THIS file to re-skin the whole site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND TOKENS  — change these to change the whole site
   -------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --vr-base:            #0A0A0F;   /* near-black background            */
  --vr-surface:         #12121A;   /* cards / raised panels            */
  --vr-surface-2:       #1A1A24;   /* inputs / secondary surfaces      */
  --vr-text:            #F4F5F7;   /* primary text                     */
  --vr-text-muted:      #9A9AA8;   /* secondary text                   */
  --vr-border:          #23232E;   /* hairline borders                 */

  /* Neon accents */
  --vr-teal:            #22E0D0;   /* turquoise                        */
  --vr-purple:          #B026B8;   /* dark pink / purple               */
  --vr-blue:            #5B6FE0;   /* gradient mid-point               */
  --vr-gradient:        linear-gradient(120deg, var(--vr-teal), var(--vr-blue) 45%, var(--vr-purple));

  /* Typography */
  --vr-font-display:    "Archivo", "Arial Narrow", sans-serif;
  --vr-font-body:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vr-heading-weight:  800;
  --vr-heading-transform: uppercase;
  --vr-heading-tracking: -0.01em;

  /* Shape */
  --vr-radius:          12px;
  --vr-radius-sm:       8px;
  --vr-radius-pill:     999px;
}

/* NOTE ON GLOBAL COLOURS & FONTS
   Horizon generates its entire palette (including the --color-*-rgb variants it
   uses everywhere) from Theme Settings → Colors, and its fonts from
   Theme Settings → Typography. Set the brand base there — see INSTALL.md for the
   exact values — so buttons, cards, inputs and every core component reskin cleanly.
   This file only adds the neon extras Horizon has no concept of. */

/* --------------------------------------------------------------------------
   2. FONTS  — brand display/body faces for our sections
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap");

.vapour-hero__title,
.vapour-brands__title,
.vapour-flavours__title,
.vapour-locations__title {
  font-family: var(--vr-font-display);
  font-weight: var(--vr-heading-weight);
  text-transform: var(--vr-heading-transform);
  letter-spacing: var(--vr-heading-tracking);
}

/* Gradient text helper */
.vr-gradient-text {
  background: var(--vr-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   4. BUTTONS  — optional branded button classes for use inside our sections.
   (Global Horizon button colours are set in Theme Settings → Colors.)
   -------------------------------------------------------------------------- */
.vr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.9rem;
  font-family: var(--vr-font-display);
  font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.9rem;
  border-radius: var(--vr-radius-sm); text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.vr-btn--primary {
  background: var(--vr-gradient); color: var(--vr-base); border: none;
}
.vr-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--vr-teal) 40%, transparent);
}
.vr-btn--ghost {
  background: none; color: var(--vr-text);
  border: 1px solid color-mix(in srgb, var(--vr-teal) 55%, transparent);
}
.vr-btn--ghost:hover { border-color: var(--vr-teal); color: var(--vr-teal); }

/* --------------------------------------------------------------------------
   5. SHARED SECTION HELPERS  — used by the Vapour: * sections
   -------------------------------------------------------------------------- */
.vr-eyebrow {
  display: inline-block; margin-bottom: 0.7rem;
  font-family: var(--vr-font-display);
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: var(--vr-teal);
}
.vr-card {
  background: var(--vr-surface);
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-radius);
}
.vr-card--lit { position: relative; overflow: hidden; }
.vr-card--lit::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--vr-gradient); opacity: 0; transition: opacity 0.2s ease;
}
.vr-card--lit:hover::before { opacity: 1; }

/* Ambient grid texture — subtle, brand-flavoured */
.vr-grid-texture {
  background-image:
    linear-gradient(color-mix(in srgb, var(--vr-teal) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--vr-teal) 4%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}

@media (prefers-reduced-motion: reduce) {
  .vr-btn, .vr-card--lit::before { transition: none; }
}

/* ==========================================================================
   VAPOUR PRODUCT CARD (vpc) — signature neon-frame card
   Used by: featured products, collection grid, search, related.
   ========================================================================== */
.vpc{position:relative;height:100%}
.vpc__link{position:absolute;inset:0;z-index:3}
.vpc__frame{
  position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--vr-radius,12px);
  background:var(--vr-surface,#12121a);
  border:1px solid var(--vr-border,#23232e);
  transition:transform .2s ease,border-color .2s ease,box-shadow .25s ease;
}
/* Neon frame that lights up on hover */
.vpc__frame::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(130deg,var(--vr-teal,#22e0d0),var(--vr-blue,#5b6fe0) 45%,var(--vr-purple,#b026b8));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s ease;
}
.vpc:hover .vpc__frame{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:0 18px 50px color-mix(in srgb,var(--vr-purple,#b026b8) 22%,transparent),
             0 0 30px color-mix(in srgb,var(--vr-teal,#22e0d0) 14%,transparent);
}
.vpc:hover .vpc__frame::before{opacity:1}

.vpc__media{position:relative;aspect-ratio:1;background:#0c0c14;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:8%}
.vpc__img{width:100%;height:100%;object-fit:contain;transition:opacity .35s ease,transform .5s ease}
.vpc__img--alt{position:absolute;inset:8%;width:auto;height:auto;max-width:84%;max-height:84%;opacity:0}
.vpc:hover .vpc__img--alt{opacity:1}
.vpc:hover .vpc__img{transform:scale(1.04)}
.vpc__ph{width:100%;height:100%;opacity:.25}

.vpc__flags{position:absolute;top:.7rem;left:.7rem;display:flex;gap:.4rem;z-index:2}
.vpc__flag{padding:.25rem .6rem;border-radius:999px;font-family:var(--vr-font-display,"Archivo",sans-serif);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.vpc__flag--sale{background:linear-gradient(120deg,var(--vr-teal,#22e0d0),var(--vr-purple,#b026b8));color:#0a0a0f}.vpc__flag--offer{background:var(--vr-purple,#b026b8);color:#fff;font-weight:800}
.vpc__flag--out{background:#000;color:var(--vr-text,#f4f5f7);border:1px solid var(--vr-border,#23232e)}

.vpc__quick{
  position:absolute;left:.7rem;right:.7rem;bottom:.7rem;z-index:4;
  padding:.7rem;border:none;cursor:pointer;border-radius:var(--vr-radius-sm,8px);
  font-family:var(--vr-font-display,"Archivo",sans-serif);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;
  background:color-mix(in srgb,#0a0a0f 55%,transparent);backdrop-filter:blur(8px);
  color:var(--vr-text,#f4f5f7);border:1px solid color-mix(in srgb,var(--vr-teal,#22e0d0) 40%,transparent);
  opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,background .2s ease,color .2s ease;
}
.vpc:hover .vpc__quick{opacity:1;transform:translateY(0)}
.vpc__quick:hover{background:linear-gradient(120deg,var(--vr-teal,#22e0d0),var(--vr-purple,#b026b8));color:#0a0a0f;border-color:transparent}

.vpc__body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.vpc__vendor{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--vr-teal,#22e0d0)}
.vpc__title{margin:0;font-size:1rem;font-weight:600;line-height:1.25;color:var(--vr-text,#f4f5f7)}
.vpc__specs{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.vpc__spec{display:flex;flex-direction:column;gap:1px;padding:.35rem .55rem;border-radius:7px;background:#0c0c14;border:1px solid var(--vr-border,#23232e);font-size:.82rem;font-weight:600;color:var(--vr-text,#f4f5f7);line-height:1.1}
.vpc__spec--wide{flex:1;min-width:100%}
.vpc__spec-k{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--vr-text,#f4f5f7) 50%,transparent)}
.vpc__foot{margin-top:auto;padding-top:.6rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.vpc__price{font-family:var(--vr-font-display,"Archivo",sans-serif);font-weight:800;font-size:1.05rem;display:flex;gap:.45rem;align-items:baseline}
.vpc__was{color:color-mix(in srgb,var(--vr-text,#f4f5f7) 42%,transparent);font-weight:400;font-size:.85em}
.vpc__now.is-sale{color:var(--vr-teal,#22e0d0)}
.vpc__rating{display:flex;align-items:center;gap:.12rem;font-size:.8rem}
.vpc__star{color:color-mix(in srgb,var(--vr-text,#f4f5f7) 20%,transparent)}
.vpc__star.is-on{color:var(--vr-teal,#22e0d0)}
.vpc__rating-n{margin-left:.25rem;color:color-mix(in srgb,var(--vr-text,#f4f5f7) 55%,transparent);font-size:.75rem}

/* Quick-view modal */
.vpc-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:1.5rem}
.vpc-modal.is-open{display:flex}
.vpc-modal__backdrop{position:absolute;inset:0;background:color-mix(in srgb,#050508 78%,transparent);backdrop-filter:blur(6px)}
.vpc-modal__dialog{position:relative;z-index:1;width:100%;max-width:860px;max-height:90vh;overflow:auto;border-radius:16px;background:var(--vr-surface,#12121a);border:1px solid var(--vr-border,#23232e);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vpc-modal__close{position:absolute;top:.9rem;right:.9rem;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--vr-border,#23232e);background:color-mix(in srgb,#0a0a0f 60%,transparent);color:var(--vr-text,#f4f5f7);cursor:pointer;font-size:1.1rem;line-height:1}
.vpc-modal__loading{padding:4rem;text-align:center;color:color-mix(in srgb,var(--vr-text,#f4f5f7) 60%,transparent)}

/* ==========================================================================
   POLICY PAGES (Shipping, Terms, Refund, Privacy) — vr-policy-* classes
   ========================================================================== */
.vr-policy-body, .vr-policy-body-inner { color: var(--vr-text, #f4f5f7); line-height: 1.7; }
.vr-policy-body-inner { max-width: 820px; margin-inline: auto; }
.vr-policy-body h2 { font-family: var(--vr-font-display, "Archivo", sans-serif); font-size: clamp(1.3rem, 2.5vw, 1.8rem); text-transform: uppercase; font-weight: 800; margin: 2rem 0 0.8rem; color: var(--vr-text, #f4f5f7); }
.vr-policy-body h3 { font-family: var(--vr-font-display, "Archivo", sans-serif); font-size: 1.1rem; text-transform: uppercase; font-weight: 700; margin: 1.6rem 0 0.6rem; color: var(--vr-teal, #22e0d0); }
.vr-policy-body p, .vr-policy-body li { color: color-mix(in srgb, var(--vr-text, #f4f5f7) 82%, transparent); margin: 0 0 0.9rem; }
.vr-policy-body a { color: var(--vr-teal, #22e0d0); }
.vr-policy-body ul, .vr-policy-body ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.vr-policy-stamp { display: inline-block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--vr-teal, #22e0d0); border: 1px solid color-mix(in srgb, var(--vr-teal, #22e0d0) 40%, transparent); border-radius: 999px; padding: 0.3rem 0.8rem; margin-bottom: 1.5rem; }
.vr-policy-callout { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--vr-surface, #12121a); border: 1px solid var(--vr-border, #23232e); border-left: 3px solid var(--vr-teal, #22e0d0); border-radius: 10px; padding: 1.1rem 1.3rem; margin: 1.5rem 0; }
.vr-policy-callout .icon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #0a0a0f; background: linear-gradient(120deg, var(--vr-teal, #22e0d0), var(--vr-purple, #b026b8)); font-size: 0.85rem; }
.vr-policy-callout p { margin: 0; }
.vr-policy-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.8rem; font-size: 0.95rem; }
.vr-policy-table th { text-align: left; padding: 0.7rem 0.9rem; background: var(--vr-surface, #12121a); border-bottom: 2px solid var(--vr-teal, #22e0d0); font-family: var(--vr-font-display, "Archivo", sans-serif); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--vr-text, #f4f5f7); }
.vr-policy-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--vr-border, #23232e); }
.vr-policy-table td.highlight { font-weight: 600; }
.vr-policy-table td.price { font-family: var(--vr-font-display, "Archivo", sans-serif); font-weight: 800; }
.vr-policy-table td.price.free { color: var(--vr-teal, #22e0d0); }
.vr-policy-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; background: var(--vr-surface, #12121a); border: 1px solid var(--vr-border, #23232e); border-radius: 12px; padding: 1.5rem 1.8rem; margin: 2rem 0 1rem; position: relative; overflow: hidden; }
.vr-policy-cta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--vr-teal, #22e0d0), var(--vr-purple, #b026b8)); }
.vr-policy-cta h3 { margin: 0 0 0.3rem; color: var(--vr-text, #f4f5f7); }
.vr-policy-cta p { margin: 0; color: color-mix(in srgb, var(--vr-text, #f4f5f7) 72%, transparent); }
.vr-btn { display: inline-block; padding: 0.85rem 1.6rem; border-radius: 10px; font-family: var(--vr-font-display, "Archivo", sans-serif); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; text-decoration: none; color: #0a0a0f; background: linear-gradient(120deg, var(--vr-teal, #22e0d0), var(--vr-purple, #b026b8)); white-space: nowrap; }
.vr-btn-lg { padding: 1rem 2rem; font-size: 0.95rem; }
/* Contact form on contact page */
.vr-contact-form { max-width: 620px; margin: 1rem auto 0; }
.vr-contact-form label { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: color-mix(in srgb, var(--vr-text, #f4f5f7) 75%, transparent); margin-bottom: 0.4rem; }
.vr-contact-form input, .vr-contact-form textarea { width: 100%; background: #0c0c14; border: 1px solid var(--vr-border, #23232e); border-radius: 8px; padding: 0.75rem 0.9rem; color: var(--vr-text, #f4f5f7); font-family: inherit; font-size: 0.95rem; }
.vr-contact-form input:focus, .vr-contact-form textarea:focus { outline: none; border-color: var(--vr-teal, #22e0d0); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vr-teal, #22e0d0) 30%, transparent); }
.vr-contact-form button { margin-top: 0.5rem; border: none; cursor: pointer; }
.vr-contact-success { max-width:620px; margin:1rem auto; background: color-mix(in srgb, var(--vr-teal,#22e0d0) 15%, transparent); border:1px solid var(--vr-teal,#22e0d0); border-radius:8px; padding:1rem; color:var(--vr-teal,#22e0d0); }
.vr-contact-error { max-width:620px; margin:1rem auto; background: rgba(220,60,60,0.12); border:1px solid #dc3c3c; border-radius:8px; padding:1rem; color:#ff8a8a; }