/** Shopify CDN: Minification failed

Line 61:37 Expected ":"

**/
/* ==========================================================================
   Vice Shop — custom layer on top of Horizon
   --------------------------------------------------------------------------
   This file is loaded after base.css (see snippets/vice-head.liquid) so it can
   refine the theme without forking any of Horizon's own section stylesheets.

   Conventions used here:
   - Everything animates `opacity`, `transform`, `scale` or `translate` only.
     No layout-triggering properties (width/height/top/margin) are animated.
   - Every motion rule is opt-out via `prefers-reduced-motion: reduce`.
   - `!important` is only used where Horizon writes inline styles we must beat.

   Contents:
     1. Brand tokens
     2. Scroll-reveal primitives
     3. Typography refinements
     4. Focus & accessibility
     5. Product cards
     6. Buttons & CTAs
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens
   Horizon's palette settings only expose four slots (background, foreground,
   color1, color2), so the rest of the Vice Shop palette is declared here as
   first-class custom properties. `*-rgb` variants exist so we can build
   translucent glows with `rgb(var(--x) / <alpha>)`.
   -------------------------------------------------------------------------- */
:root {
  --vice-ink: #0b0a10; /* near-black page ground */
  --vice-silver: #e3e3e6; /* body text */
  --vice-pink: #e42c61; /* primary CTA */
  --vice-magenta: #df2199;
  --vice-cyan: #2ed9e6; /* highlights, secondary CTA */
  --vice-sunset: #fc8f4b; /* gradient warm end */
  --vice-purple: #4a2a66; /* subtle borders */

  --vice-ink-rgb: 11 10 16;
  --vice-pink-rgb: 228 44 97;
  --vice-magenta-rgb: 223 33 153;
  --vice-cyan-rgb: 46 217 230;
  --vice-sunset-rgb: 252 143 75;
  --vice-purple-rgb: 74 42 102;

  /* Brand gradient: magenta -> sunset. Used on banners and accent rules. */
  --vice-gradient: linear-gradient(100deg, var(--vice-magenta) 0%, var(--vice-pink) 45%, var(--vice-sunset) 100%);
  /* Cool counterpart, used for hover rings so cards read pink -> cyan. */
  --vice-gradient-cool: linear-gradient(120deg, var(--vice-pink) 0%, var(--vice-magenta) 40%, var(--vice-cyan) 100%);

  /* Surfaces. Slightly lifted off the page ground so cards read as objects. */
  --vice-surface: #141018;
  --vice-surface-raised: #191320;
  --vice-hairline: rgb(var(--vice-purple-rgb) / 0.55);

  /* Spacing.
     Horizon's own --padding-*/--gap-* scale is tuned for dense UI chrome
     (--padding-lg is 1rem, --gap-lg is 1rem), which is too tight for the
     generous, premium rhythm we want between marketing sections. The Vice
     sections use this scale instead so they stay consistent with each other. */
  --vice-space-xs: 8px;
  --vice-space-sm: 14px;
  --vice-space-md: 20px;
  --vice-space-lg: 28px;
  --vice-space-xl: 40px;

  /* Inner breathing room for a product card. Shared with .vice-badge below,
     which is positioned against the card's padding box: absolute offsets are
     measured from the border edge, not the content edge, so the badge has to
     add this back or it floats in the padding instead of sitting on the photo. */
  --vice-card-pad: 12px;

  /* Radii — one consistent scale for cards, media and inputs. */
  --vice-radius-sm: 8px;
  --vice-radius-md: 14px;
  --vice-radius-lg: 20px;

  /* Elevation + neon. Kept as tokens so every glow in the theme matches. */
  --vice-shadow-card: 0 16px 40px -22px rgb(0 0 0 / 0.9);
  --vice-shadow-card-hover: 0 26px 60px -24px rgb(0 0 0 / 0.95);
  --vice-glow-pink: 0 0 28px -6px rgb(var(--vice-pink-rgb) / 0.55);
  --vice-glow-cyan: 0 0 28px -6px rgb(var(--vice-cyan-rgb) / 0.45);

  /* Motion. Horizon's own --animation-speed is 0.125s, which is too quick for
     the premium easing we want on cards, so we keep a separate scale. */
  --vice-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out */
  --vice-duration-fast: 180ms;
  --vice-duration: 260ms;
  --vice-duration-slow: 420ms;
}

/* --------------------------------------------------------------------------
   2. Scroll-reveal primitives

   `.vice-js` is set on <html> by the inline bootstrap in snippets/vice-head.liquid
   BEFORE first paint, so elements are hidden without a flash. vice-motion.js
   then adds `.vice-reveal--in` as each element enters the viewport, and removes
   `.vice-js` entirely if anything goes wrong — so a JS failure degrades to
   "everything visible" rather than a blank page.
   -------------------------------------------------------------------------- */
/*
  The hidden state is keyed off selectors that already exist in the HTML at
  parse time — NOT off a class that vice-motion.js adds. Module scripts are
  deferred, so the browser can paint before the script runs; hiding via a
  JS-added class would flash the content visible and then blank it out.

  Keep this list in sync with TARGETS in assets/vice-motion.js.
*/
.vice-js [data-vice-reveal],
.vice-js .product-grid__item,
.vice-js .resource-list__item {
  opacity: 0;
  /* `translate` rather than `transform` so we never clobber a transform that
     Horizon's slideshow/carousel components set on the same element. */
  translate: 0 18px;
  transition: opacity var(--vice-duration-slow) var(--vice-ease),
    translate var(--vice-duration-slow) var(--vice-ease);
  /* Staggered siblings. The index is written by vice-motion.js. */
  transition-delay: calc(var(--vice-stagger, 0) * 70ms);
}

/*
  Never hide anything inside a <dialog>. Horizon builds the cart drawer, quick
  add, search modal and media zoom as native dialogs; while one is closed its
  contents are display:none, so IntersectionObserver never fires for them and
  they would open stuck at opacity 0. Higher specificity than the rule above,
  so it wins wherever it applies.
*/
.vice-js dialog [data-vice-reveal],
.vice-js dialog .product-grid__item,
.vice-js dialog .resource-list__item {
  opacity: 1;
  translate: none;
  transition: none;
}

/* Must stay after the rules above: same specificity, so source order decides.
   No `will-change` anywhere here — a collection page can hold 50 cards, and
   promoting every one of them to its own layer costs more than the animation
   is worth. */
.vice-js .vice-reveal--in {
  opacity: 1;
  translate: 0 0;
}

/* --------------------------------------------------------------------------
   3. Typography refinements
   The heading font (Chakra Petch) is set in theme settings; these rules add the
   hierarchy that settings alone can't express.
   -------------------------------------------------------------------------- */
h1,
.h1,
h2,
.h2 {
  /* h1/h2 are set to uppercase in theme settings. Uppercase Chakra Petch packs
     tightly, so it needs a little positive tracking to stay readable at
     display sizes. Balances the negative tracking most display faces want. */
  letter-spacing: 0.015em;
  text-wrap: balance;
}

/* Small uppercase label used above headings in the custom sections. */
.vice-eyebrow {
  display: inline-block;
  font-family: var(--font-heading--family, inherit);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vice-cyan);
  margin: 0 0 var(--vice-space-xs);
}

/* Gradient headline treatment. Falls back to plain foreground colour where
   background-clip: text isn't supported. */
.vice-gradient-text {
  background: var(--vice-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Thin neon rule used as a section divider. */
.vice-rule {
  border: 0;
  block-size: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgb(var(--vice-magenta-rgb) / 0.6),
    rgb(var(--vice-cyan-rgb) / 0.6),
    transparent
  );
}

/* --------------------------------------------------------------------------
   4. Focus & accessibility
   A single, high-contrast neon focus ring for every interactive element, so
   keyboard users always get a visible target on the dark ground.
   -------------------------------------------------------------------------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--vice-cyan);
  outline-offset: 3px;
  border-radius: var(--vice-radius-sm);
}

/* Horizon's product card link is a stretched, zero-size <a>. Focusing it must
   light up the card itself, otherwise the ring is invisible. */
.product-card__link:focus-visible {
  outline: none;
}

.product-card:has(.product-card__link:focus-visible) .product-card__content {
  outline: 2px solid var(--vice-cyan);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. Product cards
   Targets Horizon's existing markup (snippets/product-card.liquid), so no
   theme file is forked:
     <product-card> > .product-card__content (.product-grid__card)
                    > .card-gallery > .product-media-container > img
   -------------------------------------------------------------------------- */
/* The doubled class matches the specificity Horizon uses in
   snippets/product-card-styles.liquid:

     .product-grid__card.product-grid__card { padding-*: var(--padding-*); overflow: hidden }

   which is (0,2,0). A plain `product-card .product-card__content` is (0,1,1)
   and loses, so the padding below silently did nothing. Adding the second
   class here takes this to (0,2,1).

   That rule also reads --padding-* custom properties written inline by
   spacing-style, and inline custom properties cannot be overridden from a
   stylesheet -- so the padding has to be set as a real property, not by
   redefining the variables. */
product-card .product-card__content.product-grid__card {
  position: relative;
  padding: var(--vice-card-pad);

  /* Horizon clips the card so a slideshow cannot bleed past the corners. Here
     that clip was slicing the bottom off the price. The zoom is already
     contained by .card-gallery's own overflow, so nothing needs clipping at
     this level. */
  overflow: visible;

  border-radius: var(--vice-radius-md);
  background-color: var(--vice-surface);
  box-shadow: var(--vice-shadow-card);
  transition: box-shadow var(--vice-duration) var(--vice-ease),
    translate var(--vice-duration) var(--vice-ease),
    background-color var(--vice-duration) var(--vice-ease);
}

product-card .card-gallery {
  /* Clips the image zoom below. */
  overflow: hidden;
  border-radius: var(--vice-radius-sm);
  background-color: rgb(var(--vice-ink-rgb) / 0.6);
}

product-card .card-gallery img {
  transition: scale var(--vice-duration-slow) var(--vice-ease);
}

@media (hover: hover) and (pointer: fine) {
  product-card:hover .product-card__content {
    translate: 0 -4px;
    background-color: var(--vice-surface-raised);
    box-shadow: var(--vice-shadow-card-hover), var(--vice-glow-pink);
  }

  product-card:hover .card-gallery img {
    scale: 1.06;
  }
}

/* Neon gradient ring on hover.
   Built with the padding + mask-composite technique so a *gradient* can act as
   a 1px border. Guarded by @supports because without mask-composite the
   pseudo-element would paint a solid gradient block over the whole card. */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  product-card .product-card__content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 1px;
    background: var(--vice-gradient-cool);
    opacity: 0;
    transition: opacity var(--vice-duration) var(--vice-ease);
    pointer-events: none;

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  @media (hover: hover) and (pointer: fine) {
    product-card:hover .product-card__content::before {
      opacity: 1;
    }
  }
}

/* Scarcity / status badge. Rendered by snippets/vice-product-badge.liquid.
   Positioned against .card-gallery, which is the media box. */
.vice-badge {
  position: absolute;
  z-index: 3;
  inset-block-start: calc(var(--vice-card-pad) + 8px);
  inset-inline-start: calc(var(--vice-card-pad) + 8px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-heading--family, inherit);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.vice-badge--bestseller {
  background: var(--vice-gradient);
  color: #fff;
  box-shadow: var(--vice-glow-pink);
}

.vice-badge--limited {
  background: rgb(var(--vice-ink-rgb) / 0.85);
  color: var(--vice-cyan);
  box-shadow: inset 0 0 0 1px rgb(var(--vice-cyan-rgb) / 0.7), var(--vice-glow-cyan);
}

/* --------------------------------------------------------------------------
   6. Buttons & CTAs
   Horizon draws a button's border with `box-shadow: inset ...`, so any glow we
   add must re-declare that inset shadow or the border disappears.
   -------------------------------------------------------------------------- */
.button,
.button-secondary,
.button-custom {
  position: relative;
  /* Contains the shine sweep below. */
  overflow: hidden;
  transition: color var(--vice-duration-fast) var(--vice-ease),
    background-color var(--vice-duration-fast) var(--vice-ease),
    box-shadow var(--vice-duration) var(--vice-ease),
    scale var(--vice-duration-fast) var(--vice-ease);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover:not([aria-disabled='true'], :disabled) {
    scale: 1.025;
    box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color), var(--vice-glow-pink);
  }

  .button-secondary:hover:not([aria-disabled='true'], :disabled) {
    scale: 1.025;
    box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color), var(--vice-glow-cyan);
  }

  .button:active:not([aria-disabled='true'], :disabled),
  .button-secondary:active:not([aria-disabled='true'], :disabled) {
    scale: 0.985;
  }
}

/* Shine sweep. The pseudo-element is absolutely positioned so it stays out of
   the button's grid flow (Horizon sets `display: grid` on .button). */
.button::after,
.button-custom::after {
  content: '';
  position: absolute;
  inset-block: -50%;
  inset-inline-start: -75%;
  inline-size: 45%;
  background: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / 0.38) 50%, transparent 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover::after,
  .button-custom:hover::after {
    /* `translate` is animated separately from the static skew above. */
    animation: vice-shine 700ms var(--vice-ease) forwards;
  }
}

@keyframes vice-shine {
  from {
    opacity: 1;
    translate: 0 0;
  }
  to {
    opacity: 1;
    translate: 400% 0;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   Single opt-out for every animated rule above. Elements land in their final
   state immediately; nothing is hidden and nothing moves.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vice-js [data-vice-reveal],
  .vice-js .product-grid__item,
  .vice-js .resource-list__item {
    opacity: 1;
    translate: none;
    transition: none;
  }

  product-card .product-card__content,
  product-card .card-gallery img,
  .button,
  .button-secondary,
  .button-custom {
    transition: none;
  }

  product-card:hover .product-card__content {
    translate: none;
  }

  product-card:hover .card-gallery img {
    scale: 1;
  }

  .button:hover,
  .button-secondary:hover,
  .button:active,
  .button-secondary:active {
    scale: 1;
  }

  .button::after,
  .button-custom::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Mobile & touch
   -------------------------------------------------------------------------- */

/*
  Tighten the Vice sections' vertical rhythm on phones.

  Section padding is authored in the theme editor and written as an INLINE
  custom property (`--padding-block-start: 64px`, see snippets/spacing-padding.liquid),
  so a media query cannot override that variable. What it can override is the
  resolved `padding-block` shorthand from `.spacing-style` in base.css — hence
  the extra class for specificity. Scoped to `.vice-section` so no Horizon
  section's spacing changes behind the merchant's back.
*/
@media screen and (max-width: 749px) {
  .vice-section.spacing-style {
    padding-block: calc(var(--padding-block-start) * 0.65 + var(--section-top-offset, 0px))
      calc(var(--padding-block-end) * 0.65);
  }
}

/*
  Touch targets. WCAG 2.2 asks for 24x24 CSS px minimum; 44px is the comfortable
  target and what iOS/Android both recommend. Applied only on coarse pointers so
  desktop button proportions are untouched.
*/
@media (pointer: coarse) {
  .button,
  .button-secondary,
  .button-custom {
    min-block-size: 44px;
  }
}

/*
  Wide content must scroll inside its own box rather than pushing the page
  sideways. Horizontal page scroll on a phone reads as a broken store.
*/
.vice-section table,
.vice-section pre {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
}

/* Hover-driven affordances must not stick on touch, where :hover latches until
   the next tap elsewhere. All hover rules above are already inside
   `@media (hover: hover) and (pointer: fine)`; this covers the shine sweep,
   which is purely decorative and wasteful on mobile. */
@media (hover: none) {
  .button::after,
  .button-custom::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. Forms
   Newsletter and search inputs, aligned with the card radii and neon focus.
   -------------------------------------------------------------------------- */
input:not([type='checkbox'], [type='radio']),
textarea,
select {
  transition: border-color var(--vice-duration) var(--vice-ease),
    box-shadow var(--vice-duration) var(--vice-ease);
}

input:not([type='checkbox'], [type='radio']):focus,
textarea:focus {
  border-color: var(--vice-cyan);
}

@media (prefers-reduced-motion: reduce) {
  input,
  textarea,
  select {
    transition: none;
  }
}