@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&family=Outfit:wght@200;300;400;500;600;700&family=Poiret+One&display=swap");

/* ==================================================================
   LAST RESORT DEVELOPMENT — "VICE" THEME
   Neon-elegant Vice City / GTA VI inspired webstore theme.
   Palette: midnight indigo + sunset (gold -> coral -> magenta -> violet)
   Type:    Josefin Sans (art-deco display) + Outfit (UI text)
   ================================================================== */

:root {
  /* ---- core ui tokens ---- */
  --color-text: #F7F4FF;
  --color-text-darker: #DED8F8;
  --color-text-secondary: #A7A3D2;
  --color-text-dark: #0A0714;
  --color-bg: #06060F;
  --color-brighter-bg: #12122A;

  --color-primary: #FF3D9A;
  --color-primary-hover: #FF74B8;
  --color-primary-text: #17040E;
  --color-primary-text-hover: #17040E;

  --color-secondary: #1A1A33;
  --color-secondary-hover: #2A2A52;
  --color-secondary-text: #EFEBFF;
  --color-secondary-text-hover: #FFFFFF;

  --color-tertiary: transparent;
  --color-tertiary-hover: rgb(255 61 154 / 10%);
  --color-tertiary-text: #EFEBFF;
  --color-tertiary-text-hover: #FFFFFF;

  --color-removed: #FF5C7A;
  --color-sale-banner-bg: #FF3D9A;
  --color-sale-banner-text: #17040E;

  /* ---- vice city palette ---- */
  --vice-pink: #FF3D9A;
  --vice-magenta: #E963C7;
  --vice-coral: #F4717C;
  --vice-gold: #FFD98A;
  --vice-violet: #A46BFF;
  --vice-lav: #ADB5FF;
  --vice-teal: #38E0D0;

  --sunset: linear-gradient(90deg, #FFD98A 0%, #F4717C 34%, #E963C7 66%, #A46BFF 100%);
  --sunset-v: linear-gradient(180deg, #FFD98A 0%, #F4717C 46%, #E963C7 100%);
  --chrome: linear-gradient(100deg, #FFFFFF 6%, #FFE9C2 24%, #FF9FC4 46%, #FFFFFF 60%, #C8B4FF 82%, #FFFFFF 98%);

  --panel: rgb(16 15 38 / 0.78);
  --panel-solid: #12122A;
  --panel-border: rgb(173 181 255 / 0.16);
  --panel-border-strong: rgb(255 61 154 / 0.42);
  --grid-line: rgb(173 181 255 / 0.07);
  --deco: rgb(255 217 138 / 0.38);
  --radius: 8px;

  /* legacy aliases kept so older rules never break */
  --neon-cyan: #FF3D9A;
  --neon-magenta: #E963C7;
  --neon-yellow: #FFD98A;
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgb(255 61 154 / 0.45) var(--color-bg);
}

body {
  font-family: "Outfit", "Helvetica Neue", sans-serif;
  font-weight: 400;
  letter-spacing: 0.1px;
  background:
    radial-gradient(1400px 820px at 50% 118%, rgb(255 61 154 / 0.30), transparent 62%),
    radial-gradient(900px 620px at 6% -12%, rgb(164 107 255 / 0.24), transparent 60%),
    radial-gradient(880px 600px at 102% -8%, rgb(56 224 208 / 0.11), transparent 58%),
    linear-gradient(180deg, #0C0B1E 0%, #080815 42%, var(--color-bg) 100%);
  background-attachment: fixed;
}

/* faint deco star dust */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 25px 35px, rgb(255 217 138 / 0.95), transparent 55%),
    radial-gradient(1.6px 1.6px at 80px 120px, rgb(255 61 154 / 0.85), transparent 55%),
    radial-gradient(1.4px 1.4px at 150px 55px, rgb(173 181 255 / 0.9), transparent 55%),
    radial-gradient(2.2px 2.2px at 195px 170px, rgb(255 255 255 / 0.75), transparent 55%),
    radial-gradient(1.4px 1.4px at 45px 185px, rgb(233 99 199 / 0.8), transparent 55%),
    radial-gradient(1.8px 1.8px at 120px 25px, rgb(255 217 138 / 0.7), transparent 55%),
    radial-gradient(1.6px 1.6px at 210px 90px, rgb(173 181 255 / 0.75), transparent 55%),
    radial-gradient(1.6px 1.6px at 65px 150px, rgb(255 61 154 / 0.65), transparent 55%),
    radial-gradient(1.4px 1.4px at 175px 205px, rgb(255 255 255 / 0.7), transparent 55%),
    radial-gradient(1.6px 1.6px at 10px 95px, rgb(255 217 138 / 0.6), transparent 55%),
    radial-gradient(1.6px 1.6px at 100px 200px, rgb(173 181 255 / 0.7), transparent 55%),
    radial-gradient(1.3px 1.3px at 140px 140px, rgb(233 99 199 / 0.6), transparent 55%),
    radial-gradient(2px 2px at 205px 30px, rgb(255 255 255 / 0.8), transparent 55%);
  background-size: 240px 240px;
  background-repeat: repeat;
  opacity: 0.9;
}

/* art-deco pinstripe grid, fading out below the header */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(130% 90% at 50% 0%, black, transparent 78%);
  mask-image: radial-gradient(130% 90% at 50% 0%, black, transparent 78%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Josefin Sans", "Outfit", sans-serif;
  font-weight: 600;
  letter-spacing: 1.2px;
}

::selection {
  color: #17040E;
  background-color: var(--vice-pink);
}

.site {
  gap: calc(var(--widget-padding) * 1.4);
}

/* ---------------- header ---------------- */
.site-header::after {
  content: "";
  display: block;
  position: absolute;
  left: var(--content-padding);
  right: var(--content-padding);
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 217 138 / 0.5), rgb(255 61 154 / 0.65), rgb(164 107 255 / 0.5), transparent);
  pointer-events: none;
}

.site-title {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 9px;
}

.site-title a {
  background: var(--chrome);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgb(255 61 154 / 0.35));
  transition: filter 0.25s ease-in-out;
}

.site-title a:hover {
  filter: drop-shadow(0 0 26px rgb(255 61 154 / 0.6));
}

.site-title img { filter: drop-shadow(0 0 18px rgb(255 61 154 / 0.35)); }

/* ---------------- buttons ---------------- */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.24s ease-in-out, translate 0.14s ease-in-out;
}

.btn-primary {
  background-color: transparent;
  background-image: linear-gradient(100deg, #FFD98A 0%, #FF8FB6 46%, #FF3D9A 100%);
  color: var(--color-primary-text);
  border: 0;
  box-shadow: 0 8px 26px rgb(255 61 154 / 0.28);
}

.btn-primary:hover,
.btn-primary:focus {
  background-image: linear-gradient(100deg, #FFE7B4 0%, #FFA9C6 46%, #FF5BAC 100%);
  box-shadow: 0 10px 34px rgb(255 61 154 / 0.5);
  translate: 0 -1px;
}

.btn-secondary {
  background-color: rgb(255 255 255 / 0.05);
  border: 1px solid var(--panel-border);
  color: var(--color-secondary-text);
  backdrop-filter: blur(6px);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: rgb(255 61 154 / 0.12);
  border-color: var(--panel-border-strong);
  color: #FFFFFF;
}

.btn-tertiary {
  border: 1px solid var(--deco);
  color: var(--color-tertiary-text);
}

.btn-tertiary:hover,
.btn-tertiary:focus {
  border-color: var(--vice-gold);
  color: #FFFFFF;
  box-shadow: 0 0 22px rgb(255 217 138 / 0.22);
}

.link-text:hover { color: var(--vice-pink); }

/* ---------------- hero ---------------- */
.lr-landing {
  display: flex;
  flex-direction: column;
  gap: var(--widget-padding);
}

.lr-hero {
  position: relative;
  padding: clamp(46px, 8vw, 96px) var(--widget-padding);
  text-align: center;
  background:
    radial-gradient(120% 120% at 50% 118%, rgb(255 61 154 / 0.16), transparent 62%),
    radial-gradient(90% 70% at 50% -14%, rgb(164 107 255 / 0.18), transparent 66%),
    var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  overflow: hidden;
  isolation: isolate;
}

/* retrowave sun rising behind the headline */
.lr-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 4%;
  width: clamp(200px, 34vw, 420px);
  aspect-ratio: 2 / 1;
  translate: -50% 0;
  border-radius: 999px 999px 0 0;
  background: var(--sunset-v);
  opacity: 0.13;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 9px, transparent 9px 15px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 9px, transparent 9px 15px);
  filter: blur(1.6px);
  pointer-events: none;
}

.lr-hero > * { position: relative; z-index: 1; }

.lr-hero .lr-eyebrow { margin-bottom: 16px; }

.lr-hero-title {
  margin: 0 0 18px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 6.2vw, 58px);
  line-height: 1.04;
  letter-spacing: clamp(3px, 1.1vw, 12px);
  text-transform: uppercase;
}

.lr-hero-sub {
  max-width: 620px;
  margin: 0 auto 30px;
  color: var(--color-text-secondary);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}

.lr-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.lr-cta {
  height: 52px;
  line-height: 52px;
  padding: 0 30px;
  font-size: 13px;
}

/* ---------------- header info chips ---------------- */
.site-header-inner .info .title {
  font-family: "Josefin Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}

.site-header-inner .info .action { color: var(--vice-pink); }

.site-header-inner .info .value {
  font-family: "Outfit", sans-serif;
  letter-spacing: 0.6px;
  border: 1px solid rgb(255 61 154 / 0.35);
  background: rgb(255 61 154 / 0.07);
  color: #FFC7E1;
  border-radius: 999px;
}

/* ---------------- sale banner ---------------- */
.site-sale-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  background-image: linear-gradient(100deg, #FFD98A 0%, #F4717C 40%, #E963C7 72%, #A46BFF 100%);
  color: var(--color-sale-banner-text);
  box-shadow: 0 10px 34px rgb(255 61 154 / 0.32);
}

.site-sale-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.45) 50%, transparent 65%);
  translate: -120% 0;
  pointer-events: none;
}

/* ---------------- section headings ---------------- */
.store-products-head {
  margin: 6px 0 2px;
  text-align: center;
}

.lr-eyebrow {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
  color: var(--vice-gold);
  letter-spacing: 6px;
  text-transform: uppercase;
  font-size: 11.5px;
  opacity: 0.92;
}

.lr-section-title {
  margin: 10px 0 16px;
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: 8px;
  text-transform: uppercase;
  background: linear-gradient(100deg, #FFFFFF 10%, #FFE3B8 34%, #FF9EC5 62%, #C9B6FF 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* art-deco divider with a neon lozenge */
.lr-rule {
  position: relative;
  display: block;
  width: 190px;
  height: 1px;
  margin: 0 auto;
  margin-top: 10px;
  background: linear-gradient(90deg, transparent, rgb(255 217 138 / 0.75), rgb(255 61 154 / 0.75), transparent);
}

.lr-rule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3.5px;
  width: 8px;
  height: 8px;
  translate: -50% 0;
  rotate: 45deg;
  background: var(--vice-pink);
  box-shadow: 0 0 14px var(--vice-pink);
}

@media (width <= 600px) {
  .lr-section-title { font-size: 22px; letter-spacing: 4px; }
}

/* ---------------- panels / categories ---------------- */
.site-home-categories { gap: var(--widget-padding) 28px; }

.site-home-categories .category {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  font-family: "Josefin Sans", sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  transition: color 0.18s ease-in-out, border-color 0.18s ease-in-out, box-shadow 0.22s ease-in-out, translate 0.18s ease-in-out;
}

.site-home-categories .category:hover {
  color: #FFFFFF;
  border-color: var(--panel-border-strong);
  box-shadow: 0 0 0 1px rgb(255 61 154 / 0.22), 0 18px 42px rgb(255 61 154 / 0.16);
  translate: 0 -3px;
}

.store-text,
.widget,
.no-products {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
}

.category-description {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 2px solid var(--vice-pink);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
}

.widget-title {
  position: relative;
  padding-left: 16px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.widget-title::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--sunset-v);
  box-shadow: 0 0 10px rgb(255 61 154 / 0.7);
}

/* ---------------- product grid ---------------- */
.store-products-images {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 24px;
  margin-top: 22px;
  align-items: stretch;
}

.store-products-images .store-product { display: flex; flex-direction: column; }

.store-products-images .store-product .image-link { display: block; overflow: hidden; }

.store-products-images .store-product .image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 5px;
  transition: scale 0.35s ease-in-out;
}

.store-products-images .store-product:hover .image { scale: 1.04; }

.store-products-images .store-product .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
  font-size: 18px;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .store-products-images { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
}

@media (max-width: 560px) {
  .store-products-images { grid-template-columns: 1fr; }
}

.store-products-list .store-product,
.store-products-images .store-product {
  position: relative;
  background:
    linear-gradient(180deg, rgb(26 24 56 / 0.86) 0%, rgb(11 11 26 / 0.9) 100%);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: border-color 0.18s ease-in-out, box-shadow 0.24s ease-in-out, translate 0.18s ease-in-out;
}

.store-products-images .store-product { padding: 18px; }

.store-products-list .store-product::before,
.store-products-images .store-product::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--sunset);
  opacity: 0.6;
  transition: opacity 0.18s ease-in-out;
}

/* gold deco lozenge in the top corner */
.store-products-images .store-product::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: rgb(255 217 138 / 0.55);
  opacity: 0.7;
  transition: background-color 0.18s ease-in-out, opacity 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
  pointer-events: none;
}

.store-products-images .store-product:hover,
.store-products-list .store-product:hover {
  border-color: var(--panel-border-strong);
  box-shadow: 0 0 0 1px rgb(255 61 154 / 0.22), 0 20px 46px rgb(255 61 154 / 0.16);
  translate: 0 -4px;
}

.store-products-images .store-product:hover::before,
.store-products-list .store-product:hover::before { opacity: 1; }

.store-products-images .store-product:hover::after {
  background: var(--vice-pink);
  opacity: 1;
  box-shadow: 0 0 12px var(--vice-pink);
}

.store-products-images .store-product .image-link {
  padding: 8px;
  background: radial-gradient(circle at 50% 40%, rgb(255 61 154 / 0.09), transparent 70%);
  border-radius: 6px;
}

.store-products-images .store-product .actions {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--panel-border);
}

.store-product .product-title {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 0.8px;
}

.store-product .product-title a:hover { color: var(--vice-pink); }

.store-product .descr {
  line-height: 1.55;
  font-weight: 300;
  color: var(--color-text-secondary);
}

.store-product .price {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  letter-spacing: 0.8px;
  font-variant-numeric: tabular-nums;
}

.store-product .price strong {
  color: var(--vice-gold);
  text-shadow: 0 0 14px rgb(255 217 138 / 0.35);
}

.store-product .price .discount { color: var(--vice-pink); }

/* ---------------- package page ---------------- */
.store-product-full {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}

.store-product-full .product-title {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.store-product-full .actions { border-top: 1px solid var(--panel-border); }

.store-category-tiered {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
}

.store-category-tiered-header h1,
.store-category-tiered-header h2,
.store-category-tiered-header h3 {
  text-transform: uppercase;
  letter-spacing: 2px;
}

.store-product-tiered {
  --border-color: rgb(173 181 255 / 0.16);
  --primary-color: rgb(255 61 154 / 0.24);
  background: rgb(14 13 32 / 0.85);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  transition: border-color 0.18s ease-in-out, box-shadow 0.22s ease-in-out;
}

.store-product-tiered:hover {
  border-color: var(--panel-border-strong);
  box-shadow: 0 0 0 1px rgb(255 61 154 / 0.2), 0 16px 38px rgb(255 61 154 / 0.14);
}

.store-product-tiered.store-product-cta {
  border-color: rgb(255 61 154 / 0.5);
  box-shadow: 0 0 34px rgb(255 61 154 / 0.18);
}

.store-product-tiered .product-title {
  font-family: "Josefin Sans", sans-serif;
  font-size: 18px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.store-product-tiered .price {
  font-family: "Outfit", sans-serif;
  font-variant-numeric: tabular-nums;
}

.store-product-tiered .price strong {
  color: var(--vice-gold);
  text-shadow: 0 0 14px rgb(255 217 138 / 0.35);
}

/* ---------------- forms ---------------- */
.quantity-field {
  border: 1px solid rgb(173 181 255 / 0.24);
  background: rgb(255 255 255 / 0.04);
  border-radius: 999px;
}

.store-form input[type=text],
.store-form input[type=password],
.store-form input[type=email],
.store-form input[type=number],
.store-form input[type=search],
.store-form input[type=url],
.store-form input[type=tel],
.store-form select,
.store-form textarea,
.widget-gift-card .gift-card-input {
  border: 1px solid rgb(173 181 255 / 0.2);
  border-radius: 6px;
  transition: border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
}

.store-form input:focus,
.store-form select:focus,
.store-form textarea:focus,
.widget-gift-card .gift-card-input:focus {
  border-color: var(--vice-pink);
  box-shadow: 0 0 0 1px rgb(255 61 154 / 0.35);
}

/* ---------------- navigation ---------------- */
@media (width > 960px) {
  .navigation-horizontal .menu {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    font-family: "Josefin Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }

  .navigation-horizontal > ul { border-radius: 999px; }
  .navigation-horizontal .menu > li > a { position: relative; max-width: none; }

  .navigation-horizontal .menu > li > a::after {
    content: "";
    position: absolute;
    left: calc(var(--widget-padding) / 2);
    right: calc(var(--widget-padding) / 2);
    bottom: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--sunset);
    box-shadow: 0 0 10px rgb(255 61 154 / 0.7);
    scale: 0 1;
    transform-origin: left;
    transition: scale 0.22s ease-in-out;
  }

  .navigation-horizontal .menu > li > a:hover::after,
  .navigation-horizontal .menu > li > a.link-active::after { scale: 1 1; }

  .navigation-horizontal .has-children > ul {
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
  }
}

.navigation-vertical .menu {
  font-family: "Josefin Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.navigation-vertical a:hover,
.navigation-vertical a.link-active { color: var(--vice-pink); }

/* ---------------- widgets ---------------- */
.widget-community-goal .progress,
.widget-goal .progress {
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  overflow: hidden;
}

.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  background-image: var(--sunset);
  box-shadow: 0 0 16px rgb(255 61 154 / 0.55);
}

.widget-recent .username,
.widget-top-donator .username { color: var(--vice-gold); }

/* ---------------- basket ---------------- */
.basket .basket-title,
.basket .basket-checkout h3 {
  font-family: "Josefin Sans", sans-serif;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.basket .basket-item {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

.basket .basket-item .price,
.basket .basket-checkout .total {
  color: var(--vice-gold);
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.toast {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}

.toast.toast-error { background: #C12E52; box-shadow: 0 0 22px rgb(193 46 82 / 0.5); }
.toast.toast-success { background: #1FA47F; box-shadow: 0 0 22px rgb(31 164 127 / 0.5); }

.popup-content {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

.popup-close { border-radius: 999px; }

/* ---------------- motion ---------------- */

.site-home-categories .category,
.store-products-images .store-product,
.store-products-list .store-product,
.store-products-tiered .store-product-tiered {
}

@media (prefers-reduced-motion: reduce) {
}

/* ---------------- footer ---------------- */
.site-footer {
  position: relative;
  background: rgb(10 9 24 / 0.72);
  border-top: 1px solid var(--panel-border);
  backdrop-filter: blur(6px);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(255 217 138 / 0.6), rgb(255 61 154 / 0.8), rgb(164 107 255 / 0.6), transparent);
  pointer-events: none;
}

/* neon skyline sitting on top of the footer edge */
.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -54px;
  height: 54px;
  background-image: var(--sunset);
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='54' viewBox='0 0 760 54'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='34' width='28' height='20'/%3E%3Crect x='32' y='22' width='18' height='32'/%3E%3Crect x='54' y='40' width='34' height='14'/%3E%3Crect x='92' y='12' width='16' height='42'/%3E%3Crect x='100' y='4' width='3' height='9'/%3E%3Crect x='112' y='30' width='26' height='24'/%3E%3Crect x='142' y='38' width='20' height='16'/%3E%3Crect x='166' y='18' width='22' height='36'/%3E%3Crect x='192' y='28' width='14' height='26'/%3E%3Crect x='210' y='36' width='40' height='18'/%3E%3Crect x='254' y='8' width='14' height='46'/%3E%3Crect x='259' y='0' width='3' height='9'/%3E%3Crect x='272' y='26' width='30' height='28'/%3E%3Crect x='306' y='40' width='24' height='14'/%3E%3Crect x='334' y='20' width='18' height='34'/%3E%3Crect x='356' y='32' width='34' height='22'/%3E%3Crect x='394' y='14' width='16' height='40'/%3E%3Crect x='400' y='6' width='3' height='9'/%3E%3Crect x='414' y='38' width='28' height='16'/%3E%3Crect x='446' y='24' width='20' height='30'/%3E%3Crect x='470' y='34' width='38' height='20'/%3E%3Crect x='512' y='16' width='14' height='38'/%3E%3Crect x='530' y='30' width='26' height='24'/%3E%3Crect x='560' y='40' width='30' height='14'/%3E%3Crect x='594' y='22' width='18' height='32'/%3E%3Crect x='616' y='36' width='24' height='18'/%3E%3Crect x='644' y='10' width='14' height='44'/%3E%3Crect x='649' y='2' width='3' height='9'/%3E%3Crect x='662' y='30' width='32' height='24'/%3E%3Crect x='698' y='38' width='26' height='16'/%3E%3Crect x='728' y='26' width='32' height='28'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='54' viewBox='0 0 760 54'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='34' width='28' height='20'/%3E%3Crect x='32' y='22' width='18' height='32'/%3E%3Crect x='54' y='40' width='34' height='14'/%3E%3Crect x='92' y='12' width='16' height='42'/%3E%3Crect x='100' y='4' width='3' height='9'/%3E%3Crect x='112' y='30' width='26' height='24'/%3E%3Crect x='142' y='38' width='20' height='16'/%3E%3Crect x='166' y='18' width='22' height='36'/%3E%3Crect x='192' y='28' width='14' height='26'/%3E%3Crect x='210' y='36' width='40' height='18'/%3E%3Crect x='254' y='8' width='14' height='46'/%3E%3Crect x='259' y='0' width='3' height='9'/%3E%3Crect x='272' y='26' width='30' height='28'/%3E%3Crect x='306' y='40' width='24' height='14'/%3E%3Crect x='334' y='20' width='18' height='34'/%3E%3Crect x='356' y='32' width='34' height='22'/%3E%3Crect x='394' y='14' width='16' height='40'/%3E%3Crect x='400' y='6' width='3' height='9'/%3E%3Crect x='414' y='38' width='28' height='16'/%3E%3Crect x='446' y='24' width='20' height='30'/%3E%3Crect x='470' y='34' width='38' height='20'/%3E%3Crect x='512' y='16' width='14' height='38'/%3E%3Crect x='530' y='30' width='26' height='24'/%3E%3Crect x='560' y='40' width='30' height='14'/%3E%3Crect x='594' y='22' width='18' height='32'/%3E%3Crect x='616' y='36' width='24' height='18'/%3E%3Crect x='644' y='10' width='14' height='44'/%3E%3Crect x='649' y='2' width='3' height='9'/%3E%3Crect x='662' y='30' width='32' height='24'/%3E%3Crect x='698' y='38' width='26' height='16'/%3E%3Crect x='728' y='26' width='32' height='28'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
}

.site-footer-inner .we-accept li {
  padding: 6px 8px;
  border: 1px solid rgb(173 181 255 / 0.14);
  border-radius: 6px;
  background: rgb(255 255 255 / 0.03);
  transition: border-color 0.18s ease-in-out, background-color 0.18s ease-in-out;
}

.site-footer-inner .we-accept li:hover {
  border-color: var(--panel-border-strong);
  background: rgb(255 61 154 / 0.08);
}

.site-footer-inner .we-accept img { opacity: 0.7; transition: opacity 0.18s ease-in-out; }
.site-footer-inner .we-accept li:hover img { opacity: 1; }

.site-footer-inner .copyright {
  font-family: "Outfit", sans-serif;
  font-weight: 300;
  letter-spacing: 0.4px;
  color: var(--color-text-secondary);
}

.site-footer-inner .site-footer-nav a {
  font-family: "Josefin Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  text-decoration: none;
}

.site-footer-inner .site-footer-nav a:hover { color: var(--vice-pink); }

/* ==================================================================
   Homepage: compact hero, trust strip, product shelves
   ================================================================== */

.lr-hero-compact {
  padding-top: 40px;
  padding-bottom: 40px;
}

.lr-hero-compact .lr-hero-title {
  font-size: clamp(28px, 4.8vw, 46px);
  letter-spacing: clamp(2px, 0.8vw, 8px);
  margin-bottom: 14px;
}

.lr-hero-compact .lr-hero-sub {
  font-size: 17px;
  margin-bottom: 24px;
}

.lr-usp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.lr-usp li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: border-color 0.18s ease-in-out, box-shadow 0.22s ease-in-out, translate 0.18s ease-in-out;
}

.lr-usp li:hover {
  border-color: var(--panel-border-strong);
  box-shadow: 0 0 0 1px rgb(255 61 154 / 0.18), 0 14px 34px rgb(255 61 154 / 0.14);
  translate: 0 -3px;
}

.lr-usp strong {
  font-family: "Josefin Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--vice-gold);
}

.lr-usp span {
  color: var(--color-text-secondary);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
}

.lr-shelf { margin-top: 46px; }
.lr-shelf-head { margin-bottom: 4px; }

.lr-shelf-head .lr-section-title {
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin: 8px 0 14px;
}

.lr-shelf-foot {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.lr-home-categories { margin-top: 36px; }

@media (max-width: 600px) {
  .lr-usp { grid-template-columns: 1fr; }
  .lr-shelf-head .lr-section-title { font-size: 20px; letter-spacing: 3px; }
}

/* ==================================================================
   Package page: assurance strip
   ================================================================== */

.lr-assurance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 20px 0 4px;
  padding: 0;
  list-style: none;
}

.lr-assurance li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgb(14 13 32 / 0.8);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}

.lr-assurance strong {
  font-family: "Josefin Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--vice-gold);
}

.lr-assurance span {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}

.lr-assurance a {
  color: var(--vice-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .lr-assurance { grid-template-columns: 1fr; gap: 8px; }
}

/* ==================================================================
   Free / price badges + small deco helpers
   ================================================================== */

.store-product .price em,
.store-product .free {
  font-style: normal;
  color: var(--vice-teal);
}

.text-content a {
  color: var(--vice-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-content a:hover { color: var(--vice-gold); }

/* ==================================================================
   Rich text (package + CMS descriptions)
   Legacy cyan accents are re-mapped onto the Vice palette so
   author-written HTML keeps matching the theme.
   ================================================================== */

.text-content h1,
.text-content h2,
.text-content h3,
.text-content h4 {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 1.6px;
}

.text-content h1 { letter-spacing: 2.4px; text-transform: uppercase; }

.text-content p,
.text-content li { line-height: 1.65; }

.text-content ul li::marker,
.text-content ol li::marker { color: var(--vice-pink); }

.text-content hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--deco), transparent);
}

.text-content blockquote {
  margin: 16px 0;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--vice-pink);
  color: var(--color-text-secondary);
}

.text-content code,
.text-content kbd {
  padding: 1px 6px;
  border: 1px solid rgb(255 61 154 / 0.2);
  border-radius: 4px;
  background: rgb(255 61 154 / 0.08);
  color: #FFD3E6;
  font-size: 0.94em;
}

.text-content [style*="22d3ee"],
.text-content [style*="06b6d4"],
.text-content [style*="67e8f9"],
.text-content [style*="0ea5e9"],
.text-content [style*="00E5FF"],
.text-content [style*="00e5ff"],
.text-content [style*="7DF3FF"],
.text-content [style*="7df3ff"] { color: var(--vice-gold) !important; }

.text-content [style*="f472b6"],
.text-content [style*="FF2A6D"],
.text-content [style*="ff2a6d"],
.text-content [style*="ec4899"] { color: var(--vice-pink) !important; }

.text-content [style*="a78bfa"],
.text-content [style*="818cf8"] { color: var(--vice-lav) !important; }

/* ==================================================================
   Responsive type: the wide art-deco tracking needs to shrink on
   narrow screens or the wordmark overflows.
   ================================================================== */

.site-title a { display: inline-block; max-width: 100%; }

@media (max-width: 900px) {
  .site-title { font-size: clamp(24px, 6.2vw, 36px); letter-spacing: 5px; }
}

@media (max-width: 560px) {
  .site-title { font-size: 23px; letter-spacing: 3px; }
  .lr-eyebrow { letter-spacing: 3.5px; font-size: 10.5px; }
  .lr-hero { padding-left: 18px; padding-right: 18px; }
  .lr-cta { padding: 0 22px; }
}

/* art-deco flourish lines around the centred eyebrow labels */
.lr-hero .lr-eyebrow,
.store-products-head .lr-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.lr-hero .lr-eyebrow::before,
.lr-hero .lr-eyebrow::after,
.store-products-head .lr-eyebrow::before,
.store-products-head .lr-eyebrow::after {
  content: "";
  width: clamp(18px, 5vw, 46px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--deco));
}

.lr-hero .lr-eyebrow::after,
.store-products-head .lr-eyebrow::after {
  background: linear-gradient(90deg, var(--deco), transparent);
}


/* ==================================================================
   PART II — STILL & ELEGANT + CONVERSION-FOCUSED UI/UX
   No ambient motion. Everything that moves is user driven.
   ================================================================== */

/* ---- calmer, static background ---------------------------------- */
body::before { opacity: 0.5; }
body::after {
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, black, transparent 72%);
  mask-image: radial-gradient(120% 80% at 50% 0%, black, transparent 72%);
  opacity: 0.75;
}

/* sticky needs a non-scrolling root: clip instead of hidden */
html, body { overflow-x: clip; }

/* static chrome wordmark (no shimmer sweep) */
.site-title a {
  background: linear-gradient(104deg, #FFFFFF 4%, #FFE9C2 26%, #FF9FC4 52%, #E7DBFF 74%, #FFFFFF 96%);
  background-size: 100% 100%;
  filter: drop-shadow(0 0 14px rgb(255 61 154 / 0.28));
}
.lr-hero-title {
  background-size: 100% 100% !important;
}

/* ---- COMPACT STICKY COMMAND BAR (desktop) ----------------------- */
@media (min-width: 901px) {
  .site-header {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    column-gap: 22px;
    padding: 0 clamp(18px, 3vw, 44px);
    min-height: 68px;
    background: rgb(7 7 18 / 0.82);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
    border-bottom: 1px solid rgb(173 181 255 / 0.14);
    box-shadow: 0 18px 40px -28px rgb(0 0 0 / 0.9);
  }
  .site-header-inner { display: contents; }

  .site-header .actions { display: none; }

  .site-title {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    font-size: clamp(15px, 1.35vw, 20px);
    letter-spacing: 4.5px;
    line-height: 1;
    white-space: nowrap;
  }
  .site-title img { max-height: 40px; width: auto; }

  .site-navigation.navigation-horizontal {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    max-width: none;
  }
  .site-navigation.navigation-horizontal::before,
  .site-navigation.navigation-horizontal::after { display: none; }
  .site-navigation .navigation-list {
    gap: 4px;
    flex-wrap: nowrap;
  }
  .site-navigation .navigation-list > li > a {
    padding: 22px 12px;
    font-size: 12.5px;
    letter-spacing: 1.6px;
    white-space: nowrap;
    max-width: none;
  }

  .site-header .info.server { grid-row: 1; grid-column: 3; }
  .site-header .info.discord { grid-row: 1; grid-column: 4; }
  .site-header .info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 13px;
    max-width: 220px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.04);
    border: 1px solid rgb(173 181 255 / 0.14);
  }
  .site-header .info .image { width: 16px; height: 16px; }
  .site-header .info .title {
    font-size: 11.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-header .info .action {
    position: static;
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.65;
  }

  .site-header .user-actions,
  .site-header .log-in {
    grid-row: 1;
    grid-column: 5;
    justify-self: end;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .site-header .log-in {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgb(255 61 154 / 0.45);
    font-size: 12px;
    letter-spacing: 2px;
  }
  .site-header .user-actions .open-basket {
    padding: 11px 22px;
    border-radius: 999px;
  }

  .site-sale-banner {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 0 0 0 0;
    border-radius: 0;
    text-align: center;
  }
  .site-header::after { bottom: -1px; }
}

/* the hero no longer competes with a full-screen wordmark */
.lr-hero { padding-block: clamp(46px, 7vw, 84px); }
.lr-hero-title { font-size: clamp(34px, 5.4vw, 74px); }


/* ---- PRODUCT GRID: scannable, equal, one clear action ----------- */
.store-products-images,
.lr-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: clamp(16px, 1.6vw, 26px);
  align-items: stretch;
}

.store-products-images .store-product,
.lr-shelf-grid .store-product,
.store-products-list .store-product {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  transition: border-color 0.18s ease-in-out, box-shadow 0.22s ease-in-out, translate 0.18s ease-in-out;
}
.store-products-images .store-product:hover,
.lr-shelf-grid .store-product:hover {
  translate: 0 -3px;
  border-color: rgb(255 61 154 / 0.5);
  box-shadow: 0 26px 50px -34px rgb(255 61 154 / 0.7);
}

.store-product .image-link {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid rgb(173 181 255 / 0.12);
}
.store-product .image-link .image,
.store-product .image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: scale 0.4s ease-in-out;
}
.store-product .image-link:hover img { scale: 1.035; }

.store-products-images .store-product .product-title,
.lr-shelf-grid .store-product .product-title {
  margin: 0;
  padding: 16px 18px 6px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.6px;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2.56em + 22px);
}
.store-product .product-title a { color: var(--color-text); }
.store-product .product-title a:hover { color: var(--vice-gold); }

.store-products-images .store-product .product-actions,
.lr-shelf-grid .store-product .product-actions {
  margin-top: auto;
  padding: 0 18px 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.store-product .product-actions .price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: "Josefin Sans", sans-serif;
}
.store-product .product-actions .price strong {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--vice-gold);
}
.store-product .product-actions .price del,
.store-product .product-actions .price .discount {
  font-size: 14px;
  color: var(--color-text-secondary);
  opacity: 0.75;
}
.store-product .product-actions .price del strong {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
}
.store-product .product-actions .add,
.store-product .product-actions .subscribe,
.store-product .product-actions .open-basket-cta {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.store-product .product-actions .half { width: 100%; }
.store-product .product-actions .gift {
  min-height: 40px;
  font-size: 11px;
  opacity: 0.8;
}

/* discount / free badges */
.lr-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #17040E;
  background: var(--sunset);
  box-shadow: 0 10px 22px -12px rgb(255 61 154 / 0.9);
}
.lr-badge-free {
  background: linear-gradient(90deg, #38E0D0 0%, #ADB5FF 100%);
}

/* ---- FILTER / SORT TOOLBAR ------------------------------------- */
.lr-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 26px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
}
.lr-toolbar .lr-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
  min-width: 200px;
}
.lr-toolbar input[type="search"] {
  width: 100%;
  min-height: 44px;
  padding: 0 16px 0 40px;
  border-radius: 999px;
  border: 1px solid rgb(173 181 255 / 0.18);
  background: rgb(255 255 255 / 0.04);
  color: var(--color-text);
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  letter-spacing: 0.3px;
}
.lr-toolbar input[type="search"]::placeholder { color: rgb(167 163 210 / 0.8); }
.lr-toolbar .lr-field::before {
  content: "";
  position: absolute;
  left: 16px;
  width: 13px;
  height: 13px;
  border: 1.6px solid var(--vice-lav);
  border-radius: 50%;
  box-shadow: 4px 4px 0 -3px var(--vice-lav);
  pointer-events: none;
  opacity: 0.85;
}
.lr-toolbar select {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgb(173 181 255 / 0.18);
  background: rgb(18 18 42 / 0.9);
  color: var(--color-text);
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  letter-spacing: 0.4px;
}
.lr-toolbar .lr-count {
  margin-left: auto;
  padding-right: 8px;
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.lr-empty {
  margin: 8px 0 0;
  padding: 26px;
  text-align: center;
  color: var(--color-text-secondary);
  border: 1px dashed rgb(173 181 255 / 0.2);
  border-radius: var(--radius);
}

/* ---- PACKAGE PAGE: sticky buy panel ----------------------------- */
.store-product-full .product-title {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: 1px;
}
.store-product-full > .image,
.store-product-full .package-media,
.store-product-full swiper-container {
  border-radius: var(--radius);
  overflow: hidden;
}
.store-product-full .lr-assurance { margin-block: 22px; }

.store-product-full .actions.product-actions {
  position: sticky;
  top: 18px;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 22px;
  margin: 26px 0 30px;
  padding: 18px 22px;
  border: 1px solid rgb(255 61 154 / 0.34);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgb(24 20 52 / 0.96) 0%, rgb(14 13 34 / 0.97) 100%);
  box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.store-product-full .actions.product-actions .price {
  grid-column: 1;
  margin: 0;
}
.store-product-full .actions.product-actions .price strong { font-size: 34px; }
.store-product-full .actions.product-actions .price::before {
  content: var(--text-price) " ";
  align-self: center;
  margin-right: 4px;
  font-family: "Outfit", sans-serif;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.store-product-full .actions.product-actions .add,
.store-product-full .actions.product-actions .subscribe,
.store-product-full .actions.product-actions .open-basket-cta,
.store-product-full .actions.product-actions .quantity-field {
  grid-column: 2;
  min-width: 236px;
  min-height: 52px;
  font-size: 13px;
  letter-spacing: 2.4px;
}
.store-product-full .actions.product-actions .gift {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 36px;
}
.store-product-full .descr { max-width: 74ch; }
.store-product-full .descr img { border-radius: var(--radius); }

/* quantity stepper: obvious targets */
.quantity-field {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 999px;
}
.quantity-field .adjust {
  min-width: 44px;
  font-size: 18px;
  line-height: 1;
}
.quantity-field .quantity {
  width: 54px;
  text-align: center;
  font-family: "Josefin Sans", sans-serif;
  font-size: 16px;
}

/* ---- FORMS / CHECKOUT: comfortable targets --------------------- */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
  min-height: 46px;
  font-family: "Outfit", sans-serif;
  font-size: 15px;
}
label { letter-spacing: 0.4px; }
.btn-primary, .btn-secondary, .btn-tertiary {
  min-height: 44px;
  cursor: pointer;
}

/* ---- ACCESSIBILITY -------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--vice-gold);
  outline-offset: 2px;
  border-radius: 6px;
}
.lr-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
}
.lr-skip:focus {
  left: 16px;
  top: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--vice-gold);
  color: #17040E;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* ---- MOBILE ---------------------------------------------------- */
@media (max-width: 900px) {
  .site-header {
    position: relative;
    z-index: 20;
    background: rgb(7 7 18 / 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgb(173 181 255 / 0.14);
  }
  .site-header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding-block: 8px;
  }
  .site-title {
    order: 2;
    flex: 1 1 auto;
    margin: 0;
    font-size: 17px;
    letter-spacing: 3px;
    text-align: center;
  }
  .site-header .actions { order: 1; }
  .site-header .log-in,
  .site-header .user-actions { order: 3; margin: 0; }
  .site-header .info { display: none; }
}

@media (max-width: 700px) {
  .store-product-full .actions.product-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 95;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 12px 16px;
    box-shadow: 0 -18px 40px -22px rgb(0 0 0 / 0.95);
  }
  .store-product-full .actions.product-actions .price strong { font-size: 24px; }
  .store-product-full .actions.product-actions .add,
  .store-product-full .actions.product-actions .subscribe,
  .store-product-full .actions.product-actions .open-basket-cta,
  .store-product-full .actions.product-actions .quantity-field {
    min-width: 150px;
    min-height: 48px;
    letter-spacing: 1.6px;
  }
  .store-product-full .actions.product-actions .gift { display: none; }
  body.page-package { padding-bottom: 104px; }
  .lr-toolbar { border-radius: 18px; }
  .store-products-images,
  .lr-shelf-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ---- honour the OS setting, and never animate decoration ------- */
@media (prefers-reduced-motion: reduce) {
  /* NEVER "transition: none" globally: killing transition-property means
     transitionend never fires, and third-party widgets that wait for it
     (the Tebex checkout lightbox does) hang forever. 1ms is instant and
     still fires the event. */
  * { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .store-product:hover { translate: none; }
}

/* ==================================================================
   PART III — command bar alignment + listing polish
   ================================================================== */
@media (min-width: 901px) {
  .site-header {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 72px;
    padding-inline: max(48px, calc((100% - 1376px) / 2 + 48px));
  }
  .site-title {
    position: static;
    inset: auto;
    translate: none;
    transform: none;
    text-align: left;
    max-width: 300px;
  }
  .site-title a { display: inline-flex; align-items: center; }
  .site-title img { max-height: 38px; width: auto; }
  .site-navigation .navigation-list > li > a { padding: 16px 12px; }
  .lr-hero { margin-top: 26px; }
}

@media (max-width: 900px) {
  .site-title {
    position: static;
    inset: auto;
    translate: none;
    transform: none;
  }
  .site-title img { max-height: 34px; width: auto; }
}

/* two-line product titles, hard clipped */
.store-products-images .store-product h4.product-title,
.lr-shelf-grid .store-product h4.product-title,
.store-products-list .store-product h4.product-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-height: calc(2.56em + 22px);
}

/* "this item is free" reads as a tag, not as a price */
.store-product .product-actions .price strong.lr-free,
.store-product .product-actions .price .lr-free {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--vice-teal);
}
.store-product .product-actions .price .lr-custom {
  font-size: 13px;
  letter-spacing: 0.6px;
  color: var(--color-text-secondary);
}

/* empty media placeholder: quiet art-deco panel instead of a blank box */
.store-product .image-default {
  background:
    radial-gradient(120% 100% at 50% 120%, rgb(255 61 154 / 0.22), transparent 62%),
    repeating-linear-gradient(180deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, #171436 0%, #0C0B1E 100%);
}

/* filtered-out cards must not keep their grid slot */
.store-product[hidden] { display: none !important; }

/* ---- fixes: designer overrides + clamp clipping -------------- */
@media (min-width: 901px) {
  .site-header-inner .site-title {
    position: static;
    inset: auto;
    translate: none;
    transform: none;
    text-align: left;
    grid-row: 1;
    grid-column: 1;
    max-width: 280px;
  }
}
@media (max-width: 900px) {
  .site-header-inner .site-title { position: static; inset: auto; translate: none; }
}

.store-products-images .store-product h4.product-title,
.lr-shelf-grid .store-product h4.product-title,
.store-products-list .store-product h4.product-title {
  padding: 16px 18px 0 !important;
  margin-bottom: 10px !important;
  max-height: calc(2.56em + 16px);
  min-height: calc(2.56em + 16px);
}

/* ---- command bar: brand + nav left, account right ------------- */
@media (min-width: 901px) {
  .site-header { grid-template-columns: auto auto 1fr auto auto auto; }
  .site-header-inner .site-title { grid-column: 1; max-width: 260px; }
  .site-header-inner .site-title img { max-height: 40px !important; width: auto; }
  .site-navigation.navigation-horizontal {
    grid-column: 2;
    justify-self: start;
    margin-left: 26px;
  }
  .site-header .site-navigation .navigation-list {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
  }
  .site-header .site-navigation .navigation-list::before,
  .site-header .site-navigation .navigation-list::after { display: none; }
  .site-header .info.server { grid-column: 4; }
  .site-header .info.discord { grid-column: 5; }
  .site-header .user-actions,
  .site-header .log-in { grid-column: 6; }
  .site-sale-banner { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .site-header-inner .site-title img { max-height: 34px !important; width: auto; }
}

/* hidden state must always win over the flex/grid button rules */
.product-actions [hidden],
.store-product [hidden],
[hidden] { display: none !important; }

/* ---- package page: buy panel directly under the media --------- */
.store-product-full .actions.product-actions { order: 0; }
.store-product-full .product-title { order: 0; }
.store-product-full .lr-assurance { order: 0; }
.store-product-full .descr { order: 0; }

/* badges belong to listing cards only, never to sidebar widgets */
.widget .lr-badge,
.site-sidebar .lr-badge,
.sidebar .lr-badge { display: none; }

.store-product-full .descr { max-width: none; }
.store-product-full .descr > * { max-width: 100%; }

@media (max-width: 700px) {
  .store-product-full .actions.product-actions {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* Mobile: keep the buy bar pinned under the command bar instead of
   fixing it to the viewport (panel blur creates a containing block). */
@media (max-width: 700px) {
  .store-product-full .actions.product-actions {
    position: sticky !important;
    top: 12px !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 18px 0 22px !important;
    border-radius: 14px !important;
    border: 1px solid rgb(255 61 154 / 0.34) !important;
    padding: 14px 16px !important;
  }
  body.page-package { padding-bottom: 0; }
}

@media (max-width: 900px) {
  .site-header { min-height: 0; padding-block: 0; }
  .site-header-inner { min-height: 54px; padding-block: 5px; }
  .site-header .toggle-navigation { min-height: 40px; }
}
@media (max-width: 700px) {
  .store-product-full .actions.product-actions { top: 12px !important; }
}

/* quieter sun behind the hero copy */
.lr-hero::before { opacity: 0.09 !important; }

/* ==================================================================
   PART V - HEADER WITHOUT THE LOGO + LANDING BRANDMARK
   ------------------------------------------------------------------
   The logo artwork is no longer part of the header: at full size it
   pushed the navigation down the page. The header is one quiet line
   (text wordmark, nav, server / Discord, account) and it never
   sticks - it scrolls away with the page. The artwork is rendered
   once, large, on the landing page, and fills the width on phones.
   ================================================================== */

.site-header {
  position: relative !important;
  top: auto !important;
  z-index: 20;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* the header never carries the artwork any more */
.site-header-inner .site-title img { display: none !important; }

/* ---- desktop: single header line -------------------------------- */
@media (min-width: 901px) {
  .site-header {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 20px;
    row-gap: 0;
    min-height: 0;
    padding-block: 20px 14px;
    padding-inline: max(48px, calc((100% - 1376px) / 2 + 48px));
    border-bottom: 1px solid rgb(173 181 255 / 0.12);
  }
  .site-header-inner { display: contents; }
  .site-header .actions { display: none; }

  .site-header-inner .site-title {
    position: static !important;
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    align-self: center;
    max-width: none !important;
    margin: 0;
    font-size: clamp(14px, 1.1vw, 17px);
    letter-spacing: 4.5px;
    line-height: 1;
    white-space: nowrap;
  }

  .site-header .site-navigation.navigation-horizontal {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    align-self: center;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    max-width: none;
  }
  .site-header .site-navigation.navigation-horizontal::before,
  .site-header .site-navigation.navigation-horizontal::after { display: none; }
  .site-header .site-navigation .navigation-list {
    gap: 2px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-left: 14px;
  }
  .site-header .site-navigation .navigation-list > li > a {
    padding: 12px 16px;
    font-size: 12.5px;
    letter-spacing: 1.7px;
    border-radius: 8px;
    max-width: none;
  }

  .site-header .info.server  { grid-row: 1; grid-column: 3; margin: 0; }
  .site-header .info.discord { grid-row: 1; grid-column: 4; margin: 0; }
  .site-header .user-actions,
  .site-header .log-in {
    position: static !important;
    grid-row: 1;
    grid-column: 5;
    justify-self: end;
    align-self: center;
    margin: 0;
  }
  .site-sale-banner { grid-row: 2; grid-column: 1 / -1; margin: 14px 0 0; }
}

/* ---- mobile: hamburger | wordmark | account --------------------- */
@media (max-width: 900px) {
  .site-header {
    padding-block: 12px;
    min-height: 0;
    border-bottom: 1px solid rgb(173 181 255 / 0.12);
  }
  .site-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
    min-height: 0;
    padding-block: 0;
  }
  .site-header-inner .actions {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    margin: 0;
  }
  .site-header-inner .site-title {
    position: static !important;
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
    max-width: none !important;
    margin: 0;
    font-size: 14px;
    letter-spacing: 3px;
    line-height: 1;
  }
  .site-header-inner .user-actions,
  .site-header-inner .log-in {
    position: static !important;
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    margin: 0;
  }
  .site-header-inner .info { grid-column: 1 / -1; }
}

/* ---- landing page brandmark ------------------------------------- */
.lr-brandmark {
  display: block;
  width: 100%;
  margin: clamp(16px, 2.6vw, 34px) auto clamp(6px, 1.4vw, 16px);
  padding: 0;
  line-height: 0;
  text-align: center;
  background: none;
  border: 0;
  box-shadow: none;
}
.lr-brandmark-art {
  display: block;
  width: auto;
  max-width: min(620px, 100%);
  height: auto;
  max-height: none;
  margin: 0 auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

/* the landing page shows the artwork, so the header wordmark is kept
   for screen readers / SEO but taken out of the visual line */
body.page-index .site-header-inner .site-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .lr-brandmark { margin: 8px auto 10px; }
  .lr-brandmark-art { width: 100%; max-width: 100%; }
}

/* ==================================================================
   PART VI - TAGS, PRICES, SALE MARKERS
   ================================================================== */

/* ---- flat art-deco tags instead of candy pills ------------------ */
.store-product .lr-badge,
.store-product .lr-badge-sale,
.store-product .lr-badge-free {
  padding: 5px 9px 4px;
  border-radius: 3px;
  background: rgb(8 6 18 / 0.72);
  background-image: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgb(255 217 138 / 0.55);
  color: var(--vice-gold);
  font-family: "Outfit", "Helvetica Neue", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.4px;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
}
.store-product .lr-badge-free {
  border-color: rgb(56 224 208 / 0.6);
  color: var(--vice-teal);
}
.store-product .lr-badge .lr-badge-until {
  margin-left: 6px;
  padding-left: 7px;
  border-left: 1px solid rgb(255 217 138 / 0.35);
  color: #FFE9C2;
  letter-spacing: 1.4px;
}

/* ---- the "4 packages" chip becomes a quiet caption -------------- */
.lr-shelf-count,
[data-lr-count] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ---- price row: the live price always starts at the same x ------ */
.store-product .price,
.store-product-full .price {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 9px;
}
.store-product .price > strong,
.store-product-full .price > strong { order: 1; }
.store-product .price > del,
.store-product-full .price > del { order: 2; }
.store-product .price > .lr-off,
.store-product-full .price > .lr-off { order: 3; }
.store-product .price { min-height: 34px; }

/* the old price has to read like a real crossed-out price */
.price del.discount {
  color: #FFC2D2;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  opacity: 1;
  text-decoration-line: line-through;
  text-decoration-color: rgb(255 61 154 / 0.95);
  text-decoration-thickness: 2px;
}
.store-product-full .price del.discount { font-size: 18px; }

/* "-67%" - written by lr-fx.js from discount.percentage */
.lr-off {
  align-self: center;
  padding: 4px 7px 3px;
  border-radius: 3px;
  border: 1px solid rgb(255 217 138 / 0.5);
  background: rgb(255 217 138 / 0.1);
  color: var(--vice-gold);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  line-height: 1;
  white-space: nowrap;
}
.lr-off:empty { display: none; }

/* free / pay-what-you-want line up with the money of other cards */
.store-product .price .lr-free {
  font-size: 25px !important;
  color: var(--vice-teal);
  letter-spacing: 1px;
}
.store-product-full .price .lr-free { font-size: 34px !important; color: var(--vice-teal); }
.store-product .price .lr-custom,
.store-product-full .price .lr-custom { font-size: 13.5px; }

/* ---- sale deadline ---------------------------------------------- */
.lr-sale-until {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #FFB3C6;
}
.lr-sale-until .lr-until-label { opacity: 0.72; }
.lr-sale-until .lr-until-date { color: var(--vice-gold); font-weight: 600; }
.store-product-full .lr-sale-until {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 12px;
}

/* ---- late fixes ------------------------------------------------- */
.lr-shelf-head .lr-shelf-count,
.store-products-head .lr-shelf-count,
.lr-toolbar [data-lr-total],
[data-lr-count] {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--color-text-secondary);
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  opacity: 0.75;
}

/* the account button belongs on the nav rail, not floating in the corner */
@media (min-width: 901px) {
  .site-header .log-in,
  .site-header .user-actions {
    position: static !important;
    inset: auto !important;
    translate: none !important;
    transform: none !important;
  }
}

/* the deadline sits under the price, the CTA keeps the whole height */
.store-product-full .actions.product-actions .lr-sale-until {
  grid-column: 1;
  grid-row: 2;
}
.store-product-full .actions.product-actions > .add,
.store-product-full .actions.product-actions > .subscribe,
.store-product-full .actions.product-actions > .open-basket-cta,
.store-product-full .actions.product-actions > .quantity-field {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

/* ==================================================================
   PART VII - HOVER + MOTION SYSTEM
   ------------------------------------------------------------------
   One easing curve and one duration scale for the whole store. The
   old transitions were 140-220ms, which read as a snap rather than
   a move, and several elements had no hover feedback at all. Every
   transition below is interaction-driven only - nothing loops or
   plays on its own.
   ================================================================== */

:root {
  --lr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lr-dur-fast: 220ms;
  --lr-dur: 340ms;
  --lr-dur-slow: 520ms;
}

/* ---- buttons and calls to action -------------------------------- */
.btn-primary,
.btn-secondary,
.btn-tertiary,
.lr-cta,
.product-actions a.add,
.product-actions a.subscribe,
.quantity-field .adjust,
.quantity-field .open-basket,
.open-basket-cta {
  transition: background-color var(--lr-dur) var(--lr-ease),
              background-image var(--lr-dur) var(--lr-ease),
              color var(--lr-dur) var(--lr-ease),
              border-color var(--lr-dur) var(--lr-ease),
              box-shadow var(--lr-dur-slow) var(--lr-ease),
              translate var(--lr-dur) var(--lr-ease),
              filter var(--lr-dur) var(--lr-ease),
              opacity var(--lr-dur) var(--lr-ease);
}
.btn-primary:active,
.btn-secondary:active,
.btn-tertiary:active,
.lr-cta:active,
.product-actions a.add:active,
.product-actions a.subscribe:active {
  translate: 0 1px;
  transition-duration: var(--lr-dur-fast);
}

/* ---- cards ------------------------------------------------------- */
.store-products-images .store-product,
.store-products-list .store-product,
.store-product-tiered,
.site-home-categories .category {
  transition: border-color var(--lr-dur) var(--lr-ease),
              background-color var(--lr-dur) var(--lr-ease),
              box-shadow var(--lr-dur-slow) var(--lr-ease),
              translate var(--lr-dur) var(--lr-ease);
}
.store-products-images .store-product::before,
.store-products-list .store-product::before,
.store-products-images .store-product::after {
  transition: opacity var(--lr-dur-slow) var(--lr-ease);
}
.store-products-images .store-product .image {
  transition: scale var(--lr-dur-slow) var(--lr-ease);
}
.store-products-images .store-product:hover .image { scale: 1.05; }

/* the tags react with the card instead of sitting there dead */
.lr-badge,
.lr-off,
.lr-shelf-count {
  transition: border-color var(--lr-dur) var(--lr-ease),
              color var(--lr-dur) var(--lr-ease),
              box-shadow var(--lr-dur-slow) var(--lr-ease);
}
.store-product:hover .lr-badge-sale,
.store-product:hover .lr-off {
  border-color: rgb(255 199 106 / 0.75);
  box-shadow: 0 0 18px -4px rgb(255 199 106 / 0.4);
}
.store-product:hover .lr-badge-free {
  border-color: rgb(96 240 214 / 0.75);
  box-shadow: 0 0 18px -4px rgb(96 240 214 / 0.4);
}

/* ---- text links -------------------------------------------------- */
a,
.link-text,
.text-content a,
.store-product .product-title a,
.site-footer-inner .site-footer-nav a,
.lr-until-date {
  transition: color var(--lr-dur) var(--lr-ease),
              opacity var(--lr-dur) var(--lr-ease),
              border-color var(--lr-dur) var(--lr-ease),
              text-decoration-color var(--lr-dur) var(--lr-ease);
}
.site-footer-inner .site-footer-nav a:hover { opacity: 1; }
.site-footer-inner .we-accept li,
.site-footer-inner .we-accept img {
  transition: opacity var(--lr-dur) var(--lr-ease),
              border-color var(--lr-dur) var(--lr-ease);
}

/* ---- navigation -------------------------------------------------- */
.navigation-horizontal .menu > li > a,
.navigation-vertical a,
.site-header .site-navigation .navigation-list > li > a {
  transition: color var(--lr-dur) var(--lr-ease),
              background-color var(--lr-dur) var(--lr-ease),
              letter-spacing var(--lr-dur) var(--lr-ease);
}
.navigation-horizontal .menu > li > a::after {
  transition: opacity var(--lr-dur) var(--lr-ease),
              scale var(--lr-dur) var(--lr-ease),
              background-color var(--lr-dur) var(--lr-ease);
}
.site-header .site-navigation .navigation-list > li > a:hover {
  background: rgb(255 255 255 / 0.06);
  color: #fff;
}

/* ---- wordmark and brandmark ------------------------------------- */
.site-title a {
  transition: filter var(--lr-dur-slow) var(--lr-ease),
              opacity var(--lr-dur) var(--lr-ease);
}
.lr-brandmark {
  transition: filter var(--lr-dur-slow) var(--lr-ease);
}
.lr-brandmark:hover {
  filter: drop-shadow(0 0 30px rgb(255 61 154 / 0.3));
}

/* ---- header chips: hover feedback they never had ---------------- */
.site-header .info {
  transition: border-color var(--lr-dur) var(--lr-ease),
              background-color var(--lr-dur) var(--lr-ease),
              translate var(--lr-dur) var(--lr-ease),
              box-shadow var(--lr-dur-slow) var(--lr-ease);
}
.site-header .info:hover {
  border-color: rgb(255 61 154 / 0.45);
  background-color: rgb(255 255 255 / 0.07);
  translate: 0 -1px;
  box-shadow: 0 10px 24px -18px rgb(255 61 154 / 0.8);
}
.site-header .info .action { transition: color var(--lr-dur) var(--lr-ease); }
.site-header .info:hover .action { color: var(--vice-gold); }

/* ---- fields, search and sort ------------------------------------ */
input,
select,
textarea,
.lr-field input,
.lr-field select,
.quantity-field .quantity {
  transition: border-color var(--lr-dur) var(--lr-ease),
              background-color var(--lr-dur) var(--lr-ease),
              box-shadow var(--lr-dur-slow) var(--lr-ease),
              color var(--lr-dur) var(--lr-ease);
}
.lr-field input:hover,
.lr-field select:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: rgb(173 181 255 / 0.4);
}

/* ---- USP row and shelf furniture -------------------------------- */
.lr-usp li {
  transition: border-color var(--lr-dur) var(--lr-ease),
              background-color var(--lr-dur) var(--lr-ease),
              translate var(--lr-dur) var(--lr-ease),
              box-shadow var(--lr-dur-slow) var(--lr-ease);
}
.lr-rule { transition: opacity var(--lr-dur-slow) var(--lr-ease); }

/* ---- prices ------------------------------------------------------ */
.price,
.price del.discount,
.lr-free {
  transition: color var(--lr-dur) var(--lr-ease),
              opacity var(--lr-dur) var(--lr-ease);
}

/* ---- one consistent focus ring ---------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgb(96 240 214 / 0.85);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-color var(--lr-dur-fast) var(--lr-ease);
}

/* ---- and still nothing moves unless the visitor asks for it ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==================================================================
   PART VIII - WORDMARK + BRANDMARK FIXES
   ------------------------------------------------------------------
   1. A later "background:" shorthand reset background-clip on the
      wordmark, so the chrome gradient painted a solid bar instead of
      the letters. Re-clip it to the text.
   2. The artwork is a rectangular scene; a soft edge mask lets it
      melt into the page instead of sitting in a visible box.
   ================================================================== */

.site-header-inner .site-title a,
.site-title a {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
}

.lr-brandmark-art {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%),
                      linear-gradient(to bottom, transparent 0%, #000 7%, #000 89%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%),
              linear-gradient(to bottom, transparent 0%, #000 7%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---- mobile wordmark: keep it on one line between the two ------- */
@media (max-width: 900px) {
  .site-header-inner .site-title {
    font-size: 11.5px !important;
    letter-spacing: 1.8px !important;
    line-height: 1.25;
    text-align: center;
    max-width: 100% !important;
    overflow: hidden;
  }
}
@media (max-width: 430px) {
  .site-header-inner .site-title {
    font-size: 10px !important;
    letter-spacing: 1.1px !important;
  }
}


.popup-content a {
  color:white;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* =================================================================
   PART IX - THE PRODUCT SHELF: THREE UP, ALIGNED PRICES, READABLE CTA
   -----------------------------------------------------------------
   1. GRID. "repeat(auto-fill, minmax(272px, 1fr))" dropped a fourth
      card into the row the moment the viewport passed ~1200px, and
      four cards on a 1280px shelf means 300px of card: the cover art
      goes unreadable and every title gets clamped. The track count is
      explicit now - 1, then 2, then 3 - and it stops at three.
   2. PRICE LINE. The row is 34px tall but its items were baseline
      aligned, so the big number sat at the top of that band while the
      -NN% chip (align-self: center) sat in the middle of it. Result:
      the price looked knocked out of line. Everything is optically
      centred in the band now, so 12.30 / 36.90 / -67% and the FREE of
      the card next to it all read as one line.
   3. CALL TO ACTION. shared.css gives every .btn-* "width:
      fit-content". "ADD TO BASKET" therefore came out 160px wide
      around a label that measures 132px - the text touched the pill on
      both sides - and no two cards matched (add 160px, added 185px,
      quantity stepper 263px). One full width action, one height, real
      padding, calmer letter-spacing.
   ================================================================= */

/* ---- 1. one, two, three - never four ---------------------------- */
.store-products-images,
.lr-shelf-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.6vw, 26px);
}

@media (min-width: 640px) {
  .store-products-images,
  .lr-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .store-products-images,
  .lr-shelf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 1.7vw, 30px);
  }
}

/* ---- 2. the price reads as one line ----------------------------- */
.store-products-images .store-product .product-actions .price,
.lr-shelf-grid .store-product .product-actions .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  min-height: 36px;
  line-height: 1;
  margin: 0 0 2px;
}

.store-products-images .store-product .product-actions .price strong,
.lr-shelf-grid .store-product .product-actions .price strong {
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.4px;
}

.store-products-images .store-product .price .lr-free,
.lr-shelf-grid .store-product .price .lr-free {
  font-size: 26px !important;
  line-height: 1;
}

.store-products-images .store-product .product-actions .price del,
.store-products-images .store-product .product-actions .price .discount,
.lr-shelf-grid .store-product .product-actions .price del,
.lr-shelf-grid .store-product .product-actions .price .discount {
  align-self: center;
  line-height: 1;
}

.store-products-images .store-product .product-actions .price .lr-off,
.lr-shelf-grid .store-product .product-actions .price .lr-off {
  align-self: center;
  translate: 0 -1px;
}

/* ---- 3. one action, full width, room to breathe ----------------- */
.store-products-images .store-product .product-actions .add,
.store-products-images .store-product .product-actions .subscribe,
.store-products-images .store-product .product-actions .open-basket-cta,
.store-products-images .store-product .product-actions .quantity-field,
.store-products-images .store-product .product-actions .gift,
.store-products-images .store-product .product-actions .half,
.store-products-images .store-product .product-actions .wide,
.lr-shelf-grid .store-product .product-actions .add,
.lr-shelf-grid .store-product .product-actions .subscribe,
.lr-shelf-grid .store-product .product-actions .open-basket-cta,
.lr-shelf-grid .store-product .product-actions .quantity-field,
.lr-shelf-grid .store-product .product-actions .gift,
.lr-shelf-grid .store-product .product-actions .half,
.lr-shelf-grid .store-product .product-actions .wide {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
}

.store-products-images .store-product .product-actions .add,
.store-products-images .store-product .product-actions .subscribe,
.store-products-images .store-product .product-actions .open-basket-cta,
.lr-shelf-grid .store-product .product-actions .add,
.lr-shelf-grid .store-product .product-actions .subscribe,
.lr-shelf-grid .store-product .product-actions .open-basket-cta {
  min-height: 50px;
  padding: 0 26px;
  font-size: 12px;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

.store-products-images .store-product .product-actions .quantity-field,
.lr-shelf-grid .store-product .product-actions .quantity-field {
  --btn-size: 46px;
  min-height: 50px;
}

.store-products-images .store-product .product-actions .quantity-field .open-basket,
.lr-shelf-grid .store-product .product-actions .quantity-field .open-basket {
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.store-products-images .store-product .product-actions .gift,
.lr-shelf-grid .store-product .product-actions .gift {
  min-height: 42px;
  font-size: 11px;
  letter-spacing: 1.4px;
}

/* three cards on a 1024-1180px shelf leaves ~300px of card, so the
   label gets its spacing dialled back rather than clipped */
@media (min-width: 1024px) and (max-width: 1180px) {
  .store-products-images .store-product .product-actions .add,
  .store-products-images .store-product .product-actions .subscribe,
  .store-products-images .store-product .product-actions .open-basket-cta,
  .lr-shelf-grid .store-product .product-actions .add,
  .lr-shelf-grid .store-product .product-actions .subscribe,
  .lr-shelf-grid .store-product .product-actions .open-basket-cta {
    padding: 0 14px;
    letter-spacing: 1.1px;
  }
}

/* Tebex overlays the number input on top of the "in Basket" label with
   negative margins, so once the label went uppercase the two collided
   and read as "1IN BASKET". Nine pixels of padding inside the input
   pulls the number back off the label without moving the pill. */
.store-products-images .store-product .product-actions .quantity-field .quantity,
.lr-shelf-grid .store-product .product-actions .quantity-field .quantity {
  padding-right: 9px;
}

.store-products-images .store-product .product-actions .quantity-field .open-basket,
.lr-shelf-grid .store-product .product-actions .quantity-field .open-basket {
  padding-left: 11px;
}

/* Same band alignment wherever a price is printed. The sidebar module
   cards and the package page still used baseline alignment, which left
   the crossed-out price sitting 5px below the number it belongs to. */
.store-product .actions.product-actions .price,
.store-product-full .actions.product-actions .price,
.store-product .price,
.store-product-full .price {
  align-items: center;
}

.store-product .price del,
.store-product .price .discount,
.store-product-full .price del,
.store-product-full .price .discount {
  line-height: 1;
}

.store-product-full > .image {
  height: auto;
}

.store-sidebar .store-product .add {
  background: transparent;
  background-image: none;
  color: var(--color-primary);
  border: 1px solid rgb(255 61 154 / 0.55);
  box-shadow: none;
}

.store-sidebar .store-product .add:hover {
  background: rgb(255 61 154 / 0.14);
  background-image: none;
  color: var(--color-text);
  border-color: var(--color-primary);
}

.store-product-full .text-content {
  max-width: 72ch;
}

.store-product-full .text-content p,
.store-product-full .text-content li {
  font-weight: 400;
}