* {
  line-height: normal;
}

body {

  margin: 0;
}


*, html {

    scroll-behavior: smooth !important;
}

::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--color-primary, #ffb53d);
}


/* ══════════════════════════════════════════════════════════════
   PAGE ATMOSPHERE
   ──────────────────────────────────────────────────────────────
   Replaces the 1.5 MB bg.png that layout.html used to stretch
   across the top of every page. Everything below is gradients and
   one tiny inline SVG, so it costs no requests and no bytes.

   Three layers, all behind the content:
     body            deep charcoal base, warmed by two faint pools
                     of the accent colour
     body::before    fixed accent glows - stays put while the page
                     scrolls, which is what gives the depth
     body::after     grain + a barely-there technical grid

   Everything here is deliberately under 5% opacity. The site should
   read as a dark studio, not as a neon one.
   ══════════════════════════════════════════════════════════════ */

body {
  position: relative;
  background-color: var(--dark-color-primary);
  /* a slow vertical fade keeps the fold from looking flat */
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--dark-color-primary) 100%, #000 0%) 0%,
    color-mix(in srgb, var(--dark-color-primary) 88%, #000 12%) 55%,
    color-mix(in srgb, var(--dark-color-primary) 82%, #000 18%) 100%
  );
  background-attachment: fixed;
}

/* The store's own background artwork, sitting between the base gradient and
   the accent glow. Masked so it dissolves into the page instead of ending on
   a hard edge, and desaturated so it reads as texture, not as a photo. */
/* Pinned to the viewport rather than parked at the top of the document, so
   the artwork is there the whole way down the page instead of running out
   after the hero. One element, composited once - it does not repaint while
   the page scrolls. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}

/* The <picture> in layout.html exists only to offer bg.webp ahead of the PNG.
   Left alone it would be an inline box of automatic height, and the img's
   height:100% below would resolve against THAT instead of .page-bg - which
   drops the artwork to its intrinsic 1920x1026 and breaks the cover fit.
   Making it a full size block keeps the geometry exactly as it was. */
.page-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hidden until the file has decoded, then eased in - see the onload hook in
   layout.html. Without this the PNG paints as it streams and the background
   visibly builds up in bands. */
.page-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 0.6s ease;
  /* its own layer, so fading it never repaints the page behind it */
  will-change: opacity;
  filter: saturate(0.5) contrast(1.05);
  /* soft vignette: strongest up top, easing off toward the edges so the
     artwork never draws a visible boundary anywhere on the page */
  -webkit-mask-image:
    radial-gradient(125% 95% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image:
    radial-gradient(125% 95% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.page-bg img.is-ready {
  opacity: 0.07;
}

@media (max-width: 767px) {
  .page-bg img.is-ready { opacity: 0.05; }
}

/* Accent light. Fixed, so the glows behave like studio lamps rather
   than scrolling wallpaper. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* cool pool behind the hero */
    radial-gradient(
      120% 70% at 50% -10%,
      color-mix(in srgb, var(--color-primary) 9%, transparent) 0%,
      transparent 62%
    ),
    /* low left wash */
    radial-gradient(
      70% 55% at 6% 42%,
      color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
      transparent 70%
    ),
    /* answering highlight on the right, further down */
    radial-gradient(
      65% 50% at 96% 78%,
      color-mix(in srgb, var(--color-primary) 4%, transparent) 0%,
      transparent 72%
    );
}

/* Grain plus an almost invisible grid. The SVG is a 120x120 tile of
   fractal noise - about 300 bytes, no request. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    /* technical grid, ~1.5% white */
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 88px 88px, 88px 88px, 120px 120px;
  /* fade the grid out toward the middle so it never competes */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
}

/* Phones get the gradients but not the fixed-attachment repaint or the
   grain tile - both are pure cost on a small, dense screen. */
@media (max-width: 767px) {
  body {
    background-attachment: scroll;
  }

  body::after {
    display: none;
  }
}




.bg-image {

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.05;
  z-index: -1;
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 30%;
  overflow: scroll;
}

.social-icons a i {
  transition: fill 0.2s, color 0.2s;
  fill: #ffffff17;
}
.social-icons a:hover i,
.social-icons a:focus i {
  fill: var(--color-primary); /* Tailwind red-500 */
  color: var(--color-primary);
}
/* for SVGs using only currentColor */
.social-icons a i  {
  transition: fill 0.2s;
}
.social-icons a:hover i ,
.social-icons a:focus i  {
  fill: var(--color-primary);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}


.gradient-btn {
	position: relative;
	overflow: hidden;
}
.gradient-btn::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		to right,
		transparent,
		rgba(255, 255, 255, 0.5),
		transparent
	);
	transform: rotate(60deg);
	transition: transform 1s;
	transform: translate(-100%, -100%);
}
.gradient-btn:hover::before {
	transform: translate(100%, 100%);
}

.absolute-center {
    position: absolute;
    top: calc(1/2 * 100%);
    left: calc(1/2 * 100%);
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
}


input:focus {
  outline: none;
  border: none;
}

input:focus-visible {
  outline: none;
  border: none;
}

input {
  outline: none;
  border: none;
}

/* Swiper Slider Custom Styles */ 
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark-color-secondary);
}

.packageMainSwiper .swiper-slide {
  overflow: hidden;
}

.packageMainSwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.packageThumbsSwiper .swiper-slide {
  opacity: 0.2;
  transition: opacity 0.3s ease, border 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.packageThumbsSwiper .swiper-slide-thumb-active { 
  opacity: 1 !important;
  border-color: var(--color-primary) !important;
}

.packageThumbsSwiper .swiper-slide:hover {
  opacity: 0.8;
}

.swiper-button-next,
.swiper-button-prev {
  background: rgba(22, 22, 26, 0.8) !important;
  width: 40px !important; 
  height: 40px !important;
  border-radius: 50% !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: var(--color-primary) !important;
}

.swiper-button-next:after, 
.swiper-button-prev:after {
  font-size: 16px !important;
  color: #fff;
}

@media (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    width: 30px !important;
    height: 30px !important;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 12px !important;
  }
}

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}



.loading-data {
	width: 50px;
	padding: 8px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-primary);
	--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
	-webkit-mask: var(--_m);
	mask: var(--_m);
	-webkit-mask-composite: source-out;
	mask-composite: subtract;
	animation: l3 1s infinite linear;
}
@keyframes l3 {
	to {
		transform: rotate(1turn);
	}
}


.btn-loading {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	position: relative;
	animation: rotate1 1s linear infinite;
}
.btn-loading::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 3px solid #16161A;
	animation: prixClipFix 2s linear infinite;
}


.bg-delete {
    background-color: #D84141;
} 


.bg-primary {
background-color: var(--color-primary) !important;
}


@keyframes rotate1 {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes prixClipFix {
	0% {
		clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); 
	}
	25% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
	}
	50% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
	}
	75% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
	}
	100% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
	}
}


.colored-toast.swal2-icon-success {
	background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
	background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
	background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
	background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
	background-color: #87adbd !important;
}

.colored-toast .swal2-title {
	color: white;
}

.colored-toast .swal2-close {
	color: white;
}

.colored-toast .swal2-html-container {
	color: white;
}




.Btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255 255 255 / 1%);
  border: solid 1.5px #ffffff03;
  font-weight: 600;
  gap: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: .3s;
}

.Btn path {
	fill: #ffffff5c;
	transition: all;
	transition-duration: 300ms;
}


.Btn:hover path {
	fill: var(--dark-color-secondary);
}


.Btn::before {
  width: 100%;
  height: 200px;
  position: absolute;
  content: "";
  background-color: var(--color-primary);
  border-radius: 50%;
  left: -100%;
  top: 0;
  z-index:1;
  transition-duration: .3s;
}

.Btn:hover::before {
  transition-duration: .3s;
  transform: translate(100%,-50%);
  border-radius: 0;
	
}

.Btn:active {
  transform: translate(5px,5px);
  transition-duration: .3s;
}

.Btn:hover {
	box-shadow: 5px 5px 10px rgb(36 36 36 / 24%);
	color: var(--dark-color-secondary)
}




@keyframes scaleUpDown {
  0%, 100% {
    transform: scaleY(1) scaleX(1);
  }

  50%, 90% {
    transform: scaleY(1.1);
  }

  75% {
    transform: scaleY(0.95);
  }

  80% {
    transform: scaleX(0.95);
  }
}

@keyframes shake {
  0%, 100% {
    transform: skewX(0) scale(1);
  }

  50% {
    transform: skewX(5deg) scale(0.9);
  }
}

@keyframes particleUp {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: -100%;
    transform: scale(0.5);
  }
}

@keyframes glow {
  0%, 100% {
    background-color: #ef5a00;
  }

  50% {
    background-color: #ff7800;
  }
}

.fire {
  position: absolute;
  top: calc(8% - 50px);
  left: calc(100% - 50px);
  width: 35px;
  height: 35px;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
}

.fire-center {
  position: absolute;
  height: 100%;
  width: 100%;
  animation: scaleUpDown 3s ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-center .main-fire {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(farthest-corner at 10px 0, #d43300 0%, #ef5a00 95%);
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
}

.fire-center .particle-fire {
  position: absolute;
  top: 60%;
  left: 45%;
  width: 10px;
  height: 10px;
  background-color: #ef5a00;
  border-radius: 50%;
  animation: particleUp 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-right {
  height: 100%;
  width: 100%;
  position: absolute;
  animation: shake 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-right .main-fire {
  position: absolute;
  top: 15%;
  right: -25%;
  width: 80%;
  height: 80%;
  background-color: #ef5a00;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
}

.fire-right .particle-fire {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 15px;
  height: 15px;
  background-color: #ef5a00;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 50%;
  animation: particleUp 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-left {
  position: absolute;
  height: 100%;
  width: 100%;
  animation: shake 3s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-left .main-fire {
  position: absolute;
  top: 15%;
  left: -20%;
  width: 80%;
  height: 80%;
  background-color: #ef5a00;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
}

.fire-left .particle-fire {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 10%;
  height: 10%;
  background-color: #ef5a00;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #d43322);
  animation: particleUp 3s infinite ease-out 0;
  animation-fill-mode: both;
}

.fire-bottom .main-fire {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 75%;
  height: 75%;
  background-color: #ff7800;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 100% 40%;
  filter: blur(10px);
  animation: glow 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}




.package-description {
	--tw-text-opacity: 1;
	color: rgba(240,236,226,var(--tw-text-opacity));
	-webkit-text-decoration: none;
	text-decoration: none;
	text-transform: none;
	font-weight: 400
}

.package-description :not(:last-child) {
	margin-bottom: .85rem !important;
}

.package-description h1,.package-description h2,.package-description h3,.package-description h4 {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	--tw-text-opacity: 1;
	color: rgba(255,252,245,var(--tw-text-opacity));
	font-style: normal;
	-webkit-text-decoration: none;
	text-decoration: none;
	text-transform: capitalize;
	font-weight: 700
}

.package-description a {
	--tw-text-opacity: 1;
	color: var(--color-primary);
	transition-timing-function: cubic-bezier(.4,0,.2,1);
	transition-duration: .15s
}

.package-description a:hover {
	--tw-text-opacity: 1;
	text-decoration-line: underline !important;
	color: var(--color-primary);
}

.package-description b {
	--tw-text-opacity: 1;
	color: rgba(255,252,245,var(--tw-text-opacity))
}

.package-description ol li,.package-description ul li {
	position: relative;
	padding-left: 2ch;
	--tw-text-opacity: 1;
	color: rgba(240,236,226,var(--tw-text-opacity))
}

.package-description ul li:before {
	content: "";
	position: absolute;
	left: 0;
	top: .5rem;
	height: .5rem;
	width: .5rem;
	border-radius: .5rem;
	--tw-bg-opacity: 1;
	background-color: var(--color-primary);
}

.package-description ol {
	counter-reset: ol-counter
}

.package-description ol li {
	counter-increment: ol-counter
}

.package-description ol li:before {
	content: counter(ol-counter) ". ";
	position: absolute;
	left: 0;
	font-weight: 700;
	--tw-text-opacity: 1;
	color: var(--color-primary);
}

.package-description img {
	max-width: 100%;
}


.package-description hr {
	color:white;
	opacity: 0.1;
}

.package-description img.fr-rounded {
	border-radius: calc(.5rem*.85)
}

.package-description img.fr-shadow {
	--tw-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
	--tw-shadow-color: #0000004d;
	--tw-shadow: var(--tw-shadow-colored)
}

.package-description img.fr-bordered {
	border-width: 2px;
	--tw-border-opacity: 1;
	border-color: rgba(31,94,255,var(--tw-border-opacity))
}

.package-description iframe {
	aspect-ratio: 16/9;
	height: 100%;
	width: 100%;
	border-radius: calc(.5rem*.85)
}



@keyframes pulse-subtle {
0%,
100% {
  transform: scale(1);
  box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.3);
}
50% {
  transform: scale(1.05);
  box-shadow: 0 15px 30px -5px rgba(239, 68, 68, 0.5);
}
}
@keyframes gradient {
0%,
100% {
  background-position: 0% 50%;
}
50% {
  background-position: 100% 50%;
}
}
.animate-pulse-subtle {
animation: pulse-subtle 2s ease-in-out infinite;
}
.animate-gradient {
background-size: 200% 200%;
animation: gradient 3s ease infinite;
}


/* ══════════════════════════════════════════════════════════════
   FEATURED PACKAGES SLIDER
   Markup: assets/twig/module.featured-slider.twig
   Boot:   initFeaturedSlider() in main.js
   ══════════════════════════════════════════════════════════════ */

/* How far the full-bleed strips (featured packages, customer comments) stop
   short of the window edge. Shared so both rows line up. */
:root {
  --edge-gap: 56px;
}

@media (max-width: 767px) {
  :root {
    --edge-gap: 18px;
  }
}

.featured-slider {
  position: relative;
}

/* soft ambient glow sitting behind the heading */
.featured-slider::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -60px;
  width: 540px;
  height: 340px;
  max-width: 90%;
  background: radial-gradient(closest-side, var(--color-primary), transparent);
  opacity: 0.1;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

/* NOTE: swiper-bundle.min.css is loaded after this file, so anything that
   collides with a swiper rule (.swiper, .swiper-pagination, ...) needs an extra
   element qualifier to win on specificity. */

.fs-head,
.fs-viewport,
.featured-slider div.fs-pagination {
  position: relative;
  z-index: 1;
}

/* ── Head ──────────────────────────────────────────────────── */

.fs-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

@media (min-width: 1024px) {
  .fs-head {
    flex-direction: row;
    align-items: flex-end;
    gap: 40px;
  }
}

/* .fs-head-copy also carries .sec-head, which supplies the typography.
   Only the bottom margin is dropped here - .fs-head owns the spacing. */
.fs-head-copy.sec-head {
  margin-bottom: 0;
  max-width: 780px;
}

.fs-head-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 780px;
}

.fs-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.fs-title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15 !important;
}

.fs-accent {
  color: var(--color-primary);
  text-shadow:
    0 0 18px color-mix(in srgb, var(--color-primary) 38%, transparent),
    0 0 52px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.fs-desc {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7 !important;
}

@media (min-width: 768px) {
  .fs-eyebrow { font-size: 13px; }
  .fs-title   { font-size: 44px; }
  .fs-desc    { font-size: 16px; }
}

@media (min-width: 1280px) {
  .fs-title { font-size: 52px; }
}

/* ── Head actions: arrows + view all ───────────────────────── */

.fs-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.fs-nav-group {
  display: none;
  gap: 8px;
}

@media (min-width: 768px) {
  .fs-nav-group { display: flex; }
}

.fs-nav,
.fs-viewall {
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
}

.fs-nav {
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
}

.fs-nav svg {
  width: 18px;
  height: 18px;
}

.fs-nav:hover,
.fs-viewall:hover {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--dark-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--color-primary) 80%, transparent);
}

.fs-nav:active,
.fs-viewall:active {
  transform: translateY(0);
}

.fs-nav.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* swiper hides navigation it does not need */
.fs-nav.swiper-button-lock {
  display: none;
}

.fs-viewall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.fs-viewall svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.fs-viewall:hover svg {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .fs-viewall {
    padding: 0 24px;
    font-size: 15px;
  }
}

/* ── Viewport: full bleed with faded edges ─────────────────── */

.fs-viewport {
  margin-top: 28px;
  /* Full bleed, minus a gutter on the trailing edge so the strip stops short
     of the window instead of running into it. The left offset is untouched -
     only the width changes, so the start of the row stays where it was. */
  width: calc(100vw - var(--edge-gap, 56px) * 2);
  max-width: calc(100vw - var(--edge-gap, 56px) * 2);
  left: 50%;
  right: 50%;
  margin-left: calc(-50vw + var(--edge-gap, 56px));
  margin-right: calc(-50vw + var(--edge-gap, 56px));
  /* The track is far wider than the window. Without this the page keeps a
     huge scrollWidth - invisible only because body has overflow-x hidden. */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}

@media (min-width: 768px) {
  .fs-viewport { margin-top: 36px; }
}

/* Too few cards to fill the screen: stay inside the container so the row lines
   up with the heading, and only fade the trailing edge. */
.fs-contained .fs-viewport {
  width: auto;
  max-width: none;
  left: auto;
  right: auto;
  margin-left: 0;
  margin-right: 0;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}

/* everything fits on screen already - no edge fade needed */
.fs-no-fade .fs-viewport {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ── The endless strip ─────────────────────────────────────── */

.featured-slider .fs-track {
  display: flex;
  width: max-content;
  /* breathing room for the card hover lift + its shadow */
  padding: 14px 0 26px;
  will-change: transform;
  /* --fs-shift is one full set of cards; sliding by exactly that lands on an
     identical arrangement, so the loop has no seam. Both values are measured
     and written by initFeaturedSlider(). */
  animation: fsScroll var(--fs-duration, 60s) linear infinite;
}

@keyframes fsScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--fs-shift, 0px) * -1), 0, 0);
  }
}

.featured-slider .fs-viewport:hover .fs-track {
  animation-play-state: paused;
}

.featured-slider .fs-slide {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  width: min(430px, 84vw);
  padding-right: 20px;
}

@media (max-width: 767px) {
  .featured-slider .fs-slide {
    width: min(320px, 84vw);
    padding-right: 16px;
  }
}

/* the "hot" flame normally hangs off the top-right corner - the slide clips
   anything outside the card, so tuck it into the artwork and tone it down */
.featured-slider .fire {
  top: 14px;
  left: auto;
  right: 14px;
  width: 30px;
  height: 30px;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.featured-swiper .fire-bottom .main-fire {
  filter: blur(6px);
}

.featured-slider.fs-no-fire .fire {
  display: none;
}



/* ══════════════════════════════════════════════════════════════
   PACKAGE CARD
   Markup: assets/twig/package-card.twig
   Shared by the category grid and the featured slider.
   ══════════════════════════════════════════════════════════════ */

.pkg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: var(--dark-color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.05);
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease, box-shadow 0.45s ease;
}

.pkg-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
  box-shadow: 0 26px 55px -26px color-mix(in srgb, var(--color-primary) 55%, transparent),
    0 12px 30px -18px rgba(0, 0, 0, 0.7);
}

/* ── Glass reflection sweep on hover ───────────────────────── */

.pkg-card::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 40%;
  height: 220%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.06) 38%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.06) 62%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-260%) rotate(22deg);
}

.pkg-card:hover::after {
  animation: pkgShine 1s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

@keyframes pkgShine {
  0% {
    opacity: 0;
    transform: translateX(-260%) rotate(22deg);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(360%) rotate(22deg);
  }
}

/* ── Artwork ───────────────────────────────────────────────── */

.pkg-media {
  position: relative;
  margin: 10px 10px 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.pkg-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.pkg-card:hover .pkg-img {
  transform: scale(1.055);
}

/* {BADGES} written into the package name */
.pkg-tops {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 70%;
  pointer-events: none;
}

.pkg-top {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--color-primary);
  color: var(--dark-color-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.6);
}

.pkg-discount {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ff5252, #d61f1f);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(255, 60, 60, 0.75);
}

/* ── Name, price, description ──────────────────────────────── */

.pkg-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 0;
}

.pkg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.pkg-name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35 !important;
  /* long names wrap once, then get an ellipsis - the tags row is pushed to the
     bottom with margin-top:auto, so cards stay aligned without padding here */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pkg-price {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.pkg-price-now {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

.pkg-price-old {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  text-decoration: line-through;
}

.pkg-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Framework chips ───────────────────────────────────────── */

.pkg-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  margin-top: auto;
  padding-top: 4px;
}

.pkg-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pkg-card:hover .pkg-tag {
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 255, 255, 0.8);
}

/* framework logos stay hidden until they actually load, so a logo that has not
   been uploaded to assets/imgs yet leaves a clean text-only chip */
.pkg-tag-icon,
.cat-pill-icon,
.cat-discord-icon {
  display: none;
  flex-shrink: 0;
  object-fit: contain;
}

.pkg-tag-icon.is-ready,
.cat-pill-icon.is-ready,
.cat-discord-icon.is-ready {
  display: block;
}

.pkg-tag-icon {
  width: 15px;
  height: 15px;
  border-radius: 3px;
}

/* ── Basket buttons ────────────────────────────────────────── */

.pkg-foot {
  margin-top: auto;
  padding: 14px 16px 16px;
}

.pkg-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.pkg-btn-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.pkg-btn svg {
  width: 19px;
  height: 19px;
}

.pkg-btn svg path {
  fill: currentColor;
  transition: fill 0.3s ease;
}

.pkg-btn:hover {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--dark-color-primary);
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--color-primary) 85%, transparent);
}

.pkg-btn-remove {
  background: rgba(255, 74, 74, 0.1);
  border-color: rgba(255, 74, 74, 0.14);
  color: #ff4a4a;
}

.pkg-btn-remove:hover {
  background: #ff4a4a;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(255, 74, 74, 0.75);
}


/* ══════════════════════════════════════════════════════════════
   CATEGORY PAGE
   Markup: category.html
   ══════════════════════════════════════════════════════════════ */

.category-page {
  position: relative;
  padding-bottom: 80px;
}

/* ambient glow behind the heading */
.category-page::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -80px;
  width: 620px;
  height: 380px;
  max-width: 90%;
  background: radial-gradient(closest-side, var(--color-primary), transparent);
  opacity: 0.09;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.cat-hero,
.cat-divider,
.cat-grid {
  position: relative;
  z-index: 1;
}

.cat-hero {
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding-top: 24px;
}

@media (min-width: 1200px) {
  .cat-hero {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
  }

  /* A fixed track, otherwise the full-width feedback card inside it has no
     basis to measure 100% against and the column swallows the heading.
     Wide enough that all three figures stay on one line and only the
     feedback card below them wraps. */
  .cat-stats {
    flex: 0 0 570px;
    max-width: 570px;
  }
}

.cat-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  max-width: 720px;
}

/* ── Heading ───────────────────────────────────────────────── */

.cat-title {
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1 !important;
  color: #fff;
}

.cat-title-pre {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
}

.cat-desc {
  margin: 0;
  max-width: 620px;
  font-size: 14px;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 768px) {
  .cat-title { font-size: 52px; }
  .cat-desc  { font-size: 15px; }
}

@media (min-width: 1280px) {
  .cat-title { font-size: 60px; }
}

/* ── Search + sort ─────────────────────────────────────────── */

.cat-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 540px;
  height: 56px;
  padding: 0 8px 0 18px;
  border-radius: 14px;
  background: var(--dark-color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cat-search:focus-within {
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.cat-search-icon {
  display: flex;
  flex-shrink: 0;
  opacity: 0.36;
}

.cat-search-icon svg {
  width: 18px;
  height: 18px;
}

.cat-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

.cat-search-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.cat-sort {
  position: relative;
  flex-shrink: 0;
}

.cat-sort-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cat-sort-btn svg {
  width: 18px;
  height: 18px;
}

.cat-sort-btn:hover,
.cat-sort-btn.is-open,
.cat-sort-btn.is-sorted {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--dark-color-primary);
}

.cat-sort-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  min-width: 236px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 14px;
  background: var(--dark-color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.75);
}

.sort-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.sort-option:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.sort-option.is-active {
  background: var(--color-primary);
  color: var(--dark-color-primary);
  font-weight: 600;
}

/* ── Framework pills ───────────────────────────────────────── */

.cat-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
}

.cat-pill:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  transform: translateY(-1px);
}

.cat-pill.is-active {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--dark-color-primary);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--color-primary) 85%, transparent);
}

/* no packages carry this framework - keep it listed but inert */
.cat-pill.is-empty {
  opacity: 0.3;
  pointer-events: none;
}

.cat-pill-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 4px;
}

.cat-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}

.cat-pill.is-active .cat-pill-count {
  background: rgba(0, 0, 0, 0.2);
  color: var(--dark-color-primary);
}

/* ── Stats ─────────────────────────────────────────────────── */

.cat-stats {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: stretch;
  max-width: 100%;
  /* drops the whole stats + feedback column a little below the title block */
  margin-top: 18px;
}

@media (min-width: 1024px) {
  .cat-stats { margin-top: 34px; }
}

.cat-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.cat-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

/* three figures, then the feedback card breaks onto its own line */
.cat-stat:nth-child(3) {
  padding-right: 0;
}

.cat-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
  white-space: nowrap;
}

.cat-stat-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 1 !important;
}

.cat-stat-accent {
  color: var(--color-primary);
}

.cat-star {
  width: 22px;
  height: 22px;
  fill: var(--color-primary);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary) 55%, transparent));
}

.cat-stat-sub {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

.cat-discord {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  background: rgba(88, 101, 242, 0.14);
  border: 1px solid rgba(88, 101, 242, 0.24);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
}

.cat-discord:hover {
  background: #5865f2;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(88, 101, 242, 0.9);
}

.cat-discord-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

@media (min-width: 768px) {
  .cat-stat-value { font-size: 30px; }
}

@media (max-width: 1199px) {
  .cat-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
}

@media (max-width: 639px) {
  .cat-stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cat-stat {
    padding: 0;
    border-left: 0;
  }
}

/* ── Divider + grid ────────────────────────────────────────── */

.cat-divider {
  width: 100%;
  height: 1px;
  margin: 34px 0 30px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.03) 55%,
    transparent
  );
}

.cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  width: 100%;
  min-height: 40vh;
}

.cat-empty {
  width: 100%;
  margin: 70px 0 20px;
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.4);
}

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

@media (min-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .cat-divider { margin: 44px 0 38px; }
}

/* NOTE
   There is deliberately no prefers-reduced-motion override for the card
   hover here. Windows maps its "Animation effects" switch onto that query,
   and a store owner who has it off was losing the hover lift and the glass
   sweep entirely. Hover effects are user-initiated, not ambient motion, so
   they stay on; only the ambient loops below are toned down. */


/* ══════════════════════════════════════════════════════════════
   SALE ANNOUNCEMENT BAR
   Markup: assets/twig/top-announce.twig
   Ticker: initSaleBar() in main.js
   ══════════════════════════════════════════════════════════════ */

.sale-bar {
  position: relative;
  z-index: 60;
  width: 100%;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-primary) 16%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 7%, transparent) 42%,
      transparent 78%
    ),
    var(--dark-color-secondary);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* countdown hit zero - slide it away */
.sale-bar.is-over {
  opacity: 0;
  transform: translateY(-100%);
}

/* slow light sweep across the bar */
.sale-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 35%,
    color-mix(in srgb, var(--color-primary) 13%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: saleSheen 7s ease-in-out infinite;
}

@keyframes saleSheen {
  0%,
  65% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.sale-bar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  padding: 12px 16px;
}

/* ── Brand + message ───────────────────────────────────────── */

.sale-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sale-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 8px;
}

.sale-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sale-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2 !important;
}

.sale-text {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35 !important;
}

.sale-text b {
  color: var(--color-primary);
  font-weight: 700;
}

/* ── Code + countdown ──────────────────────────────────────── */

.sale-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
}

.sale-code {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 12px 0 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
}

.sale-code:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.sale-code:active {
  transform: scale(0.97);
}

.sale-code-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.sale-code-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1 !important;
}

.sale-code-value {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.2 !important;
}

.sale-code-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.3s ease;
}

.sale-code-icon svg {
  width: 16px;
  height: 16px;
}

.sale-icon-done {
  display: none;
}

.sale-code.is-copied {
  border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.sale-code.is-copied .sale-code-icon {
  color: var(--color-primary);
}

.sale-code.is-copied .sale-icon-copy {
  display: none;
}

.sale-code.is-copied .sale-icon-done {
  display: block;
}

.sale-timer {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sale-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.sale-num {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}

.sale-cap {
  margin-top: 3px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.33);
  line-height: 1 !important;
}

@media (max-width: 900px) {
  .sale-bar-inner {
    justify-content: center;
    gap: 12px;
    padding: 10px 14px;
  }

  .sale-brand {
    width: 100%;
    justify-content: center;
  }

  .sale-actions {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .sale-logo { width: 30px; height: 30px; }
  .sale-title { font-size: 13px; }
  .sale-text { font-size: 12px; }
  .sale-code { height: 42px; gap: 10px; }
  .sale-unit { min-width: 42px; height: 42px; }
  .sale-num { font-size: 15px; }
}

@media (max-width: 400px) {
  .sale-actions { gap: 8px; }
  .sale-timer { gap: 4px; }
  .sale-unit { min-width: 36px; padding: 0 4px; }
  .sale-num { font-size: 13px; }
  .sale-cap { font-size: 7px; }
  .sale-code { padding: 0 10px; }
}


/* ══════════════════════════════════════════════════════════════
   CUSTOMER COMMENTS  -  infinite marquee
   Markup: assets/twig/module.reviews.twig
   ══════════════════════════════════════════════════════════════ */

.reviews-section {
  position: relative;
}

.rv-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
  text-align: center;
}

.rv-title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15 !important;
}

.rv-accent {
  color: var(--color-primary);
  text-shadow:
    0 0 18px color-mix(in srgb, var(--color-primary) 38%, transparent),
    0 0 52px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.rv-score {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--dark-color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.rv-score-label,
.rv-score-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
}

.rv-score-meta b {
  color: #fff;
  font-weight: 700;
}

.rv-score-value {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
}

.rv-score-stars {
  display: inline-flex;
  gap: 2px;
}

.rv-score-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
}

.rv-star {
  width: 16px;
  height: 16px;
  fill: var(--color-primary);
}

.rv-star.is-empty {
  fill: rgba(255, 255, 255, 0.13);
}

.rv-sub {
  margin: 0;
  max-width: 620px;
  font-size: 14px;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.45);
}

.rv-sub b {
  color: #fff;
  font-weight: 600;
}

@media (min-width: 768px) {
  .rv-title { font-size: 46px; }
  .rv-sub { font-size: 16px; }
}

@media (min-width: 1280px) {
  .rv-title { font-size: 54px; }
}

/* ── The moving track ──────────────────────────────────────── */

.rv-viewport {
  position: relative;
  /* matches the featured strip: an equal gutter on both edges */
  width: calc(100vw - var(--edge-gap, 56px) * 2);
  max-width: calc(100vw - var(--edge-gap, 56px) * 2);
  left: 50%;
  right: 50%;
  margin-left: calc(-50vw + var(--edge-gap, 56px));
  margin-right: calc(-50vw + var(--edge-gap, 56px));
  padding: 10px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* the card list is rendered twice, so shifting by exactly half the track
   puts copy 2 where copy 1 started and the loop is invisible */
.rv-track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* duration is measured from the review count by initReviews() */
  animation: rvScroll var(--rv-duration, 100s) linear infinite;
}

.rv-viewport:hover .rv-track {
  animation-play-state: paused;
}

@keyframes rvScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ── Review card ───────────────────────────────────────────── */

.rv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 14px;
  width: 348px;
  /* margin instead of gap: the track has to be exactly two equal halves */
  margin-right: 20px;
  padding: 20px;
  border-radius: 16px;
  background: var(--dark-color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.rv-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 32%, transparent);
  transform: translateY(-4px);
}

/* watermark quote - a serif face gives proper curly marks, and sitting above
   the card edge keeps it clear of the stars on the head row */
.rv-quote {
  position: absolute;
  top: -12px;
  right: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 68px;
  font-weight: 700;
  line-height: 1 !important;
  color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  pointer-events: none;
  user-select: none;
}

.rv-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.rv-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.9);
}

.rv-who {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rv-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rv-role {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

.rv-card-stars {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-shrink: 0;
  gap: 1px;
}

.rv-card-stars .rv-star {
  width: 13px;
  height: 13px;
}

.rv-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.62);
  /* four lines keeps every card the same height */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 89px;
}

.rv-from {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

/* hidden until the flag actually loads, so a blocked CDN just leaves text */
.rv-flag {
  display: none;
  width: 18px;
  height: auto;
  flex-shrink: 0;
  border-radius: 3px;
}

.rv-flag.is-ready {
  display: block;
}

@media (max-width: 767px) {
  .rv-card {
    width: 300px;
    margin-right: 16px;
    padding: 18px;
  }

  .rv-head { margin-bottom: 26px; }
  .rv-score { padding: 10px 18px; gap: 8px; }
  .rv-score-label,
  .rv-score-meta { font-size: 12px; }
}

/* The two marquees are the point of their sections, so they keep running.
   Only the purely decorative sheen on the sale bar is dropped. */
@media (prefers-reduced-motion: reduce) {
  .sale-bar::after {
    display: none;
  }
}


/* ══════════════════════════════════════════════════════════════
   HERO WORDMARK
   Markup: assets/twig/hero.twig
   A heavy block word with a brush script laid over its lower edge.
   ══════════════════════════════════════════════════════════════ */

.hero-logo {
  position: relative;
  display: inline-block;
  margin: 0 0 0.22em;
  padding-right: 0.08em;
  line-height: 1 !important;
}

.hero-logo-main {
  display: block;
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: clamp(56px, 13vw, 132px);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 0.92 !important;
  text-transform: uppercase;
  color: var(--color-primary);
  /* slight camera tilt, as if the wordmark is turned a few degrees away */
  transform: perspective(760px) rotateX(9deg) rotateY(-6deg) skewX(-2deg);
  transform-origin: left center;
  /* a short extrude under the face, then the outer bloom */
  text-shadow:
    0 2px 0 color-mix(in srgb, var(--color-primary) 55%, #000),
    0 4px 0 color-mix(in srgb, var(--color-primary) 35%, #000),
    0 6px 12px rgba(0, 0, 0, 0.55),
    0 0 34px color-mix(in srgb, var(--color-primary) 45%, transparent),
    0 0 90px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.hero-logo-script {
  position: absolute;
  left: 34%;
  /* rides over the lower third of the block word, the way the logo does */
  bottom: -0.12em;
  z-index: 2;
  font-family: "Lobster", "Kaushan Script", "Segoe Script", cursive;
  font-size: clamp(32px, 7vw, 74px);
  font-weight: 400;
  line-height: 1 !important;
  color: #fff;
  transform: rotate(-5deg);
  /* the dark halo is what separates it from the block word underneath */
  text-shadow:
    0 6px 18px rgba(0, 0, 0, 0.85),
    0 3px 6px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(255, 255, 255, 0.3),
    0 0 70px color-mix(in srgb, var(--color-primary) 35%, transparent);
  pointer-events: none;
}

@media (max-width: 640px) {
  .hero-logo-script { left: 16%; }
}


/* ══════════════════════════════════════════════════════════════
   STICKY NAVBAR
   Markup: assets/twig/navbar.twig  ·  Boot: initStickyNav()
   ══════════════════════════════════════════════════════════════ */

.site-nav {
  transition: background 0.35s ease, box-shadow 0.35s ease,
    padding 0.35s ease, backdrop-filter 0.35s ease;
}

/* holds the navbar's height open once it leaves the flow */
.site-nav-spacer {
  display: none;
}

.site-nav-spacer.is-active {
  display: block;
}

body.nav-stuck .site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  background: color-mix(in srgb, var(--dark-color-primary) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
  animation: navDrop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes navDrop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* a glassy hairline along the bottom edge - plain light, no accent colour.
   The bar reads as frosted glass rather than as another cyan element. */
body.nav-stuck .site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.16) 22%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.16) 78%,
    transparent
  );
  pointer-events: none;
}

/* the inner row keeps the container width while the bar spans the screen */
body.nav-stuck .site-nav > div,
body.nav-stuck .site-nav > ul {
  max-width: 96rem;
  margin-left: auto;
  margin-right: auto;
}

/* trim the oversized logo down so the pinned bar stays slim.
   scoped to .nav-logo on purpose — a plain img[alt] rule also caught the
   customer avatar and blew it up to 54px */
.site-nav .nav-logo {
  transition: width 0.35s ease, height 0.35s ease;
}

body.nav-stuck .site-nav .nav-logo {
  width: 54px !important;
  height: 54px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.nav-stuck .site-nav {
    animation: none;
  }
}

/* pinned bar is a slim strip, not a copy of the tall header */
body.nav-stuck .site-nav .h-45px {
  height: auto;
}

body.nav-stuck .site-nav ul a {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 15px;
}

/* the "powered by tebex" line only belongs in the tall header */
body.nav-stuck .brand-slug {
  display: none;
}

body.nav-stuck .brand-mark-main {
  font-size: 21px;
}

body.nav-stuck .brand-mark-script {
  font-size: 15px;
  left: 14%;
}

/* currency picker and login shrink with everything else */
body.nav-stuck .site-nav #dropdownButton {
  padding: 6px 10px;
  font-size: 13px;
}

body.nav-stuck .site-nav .show-login-fivem {
  padding: 6px 22px !important;
  font-size: 15px !important;
}

/* the signed-in profile chip and the basket button shrink too, otherwise
   they tower over the slim pinned bar */
.nav-profile,
.nav-profile-avatar,
.nav-profile-name,
.nav-basket {
  transition: padding 0.35s ease, width 0.35s ease, height 0.35s ease,
    font-size 0.35s ease, max-width 0.35s ease;
}

body.nav-stuck .site-nav .nav-profile {
  padding: 3px;
  gap: 5px;
}

body.nav-stuck .site-nav .nav-profile-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 5px;
}

body.nav-stuck .site-nav .nav-profile-name {
  font-size: 13px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.nav-stuck .site-nav .nav-profile svg {
  width: 14px;
  height: 14px;
}

body.nav-stuck .site-nav .nav-basket {
  padding: 6px;
}

body.nav-stuck .site-nav .nav-basket svg {
  width: 18px;
  height: 18px;
}

/* how many packages are waiting in the basket */
.nav-basket {
  position: relative;
  overflow: visible;
}

/* .gradient-btn sweeps a huge white sheet across itself and relies on
   overflow:hidden to clip it. This button has to stay overflow:visible so the
   count badge can hang off the corner, which let that sheet escape as a big
   blurred white blob in the top right. Drop the sweep here only. */
.nav-basket.gradient-btn::before {
  display: none;
}

.nav-basket-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #16161a;
  border: 1px solid color-mix(in srgb, var(--color-primary) 65%, transparent);
  color: #fff;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

body.nav-stuck .site-nav .nav-basket-count {
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 14px;
}


/* ══════════════════════════════════════════════════════════════
   BRAND LOCKUP  (navbar)
   The hero wordmark at navbar scale.
   ══════════════════════════════════════════════════════════════ */

.brand-mark {
  position: relative;
  display: inline-block;
  /* room for the script word to sit under PIXEL without touching the
     "powered by tebex" slug on the next line */
  padding-bottom: 11px;
  line-height: 1 !important;
}

.brand-mark-main {
  display: block;
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1 !important;
  text-transform: uppercase;
  color: #fff;
}

.brand-mark-script {
  position: absolute;
  /* further right and lifted, so it stops sitting on top of the
     "powered by tebex" slug underneath */
  left: 30%;
  bottom: 5px;
  font-family: "Lobster", cursive;
  font-size: 18px;
  font-weight: 400;
  line-height: 1 !important;
  color: var(--color-primary);
  transform: rotate(-5deg);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════
   TILT  (shared by the service cards and the live stat panel)
   Boot: initPointerTilt() in main.js
   ══════════════════════════════════════════════════════════════ */

[data-tilt] {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-tilt].is-tilting {
  /* follow the pointer closely while it is over the card */
  transition: transform 0.12s ease-out;
}


/* ══════════════════════════════════════════════════════════════
   SECTION HEAD  (shared)
   ──────────────────────────────────────────────────────────────
   One heading treatment for the mid-page sections: services, live
   stats and recent purchases. Same language as the featured
   slider's .fs-head, one step smaller so the slider stays the
   loudest thing on the page.

   Markup:
     <div class="sec-head">
       <span class="sec-eyebrow">WHY CHOOSE US</span>
       <h2 class="sec-title">Built For <span class="sec-accent">Your Server</span></h2>
       <p class="sec-sub">…</p>
     </div>
   ══════════════════════════════════════════════════════════════ */

.sec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  max-width: 720px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .sec-head { margin-bottom: 30px; }
}

/* eyebrow trails a short rule, like the reference */
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.sec-eyebrow::after {
  content: "";
  width: 46px;
  height: 1px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-primary) 55%, transparent),
    transparent
  );
}

.sec-title {
  margin: 0;
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.12 !important;
}

.sec-accent {
  color: var(--color-primary);
  /* a whisper of glow, not a neon tube */
  text-shadow: 0 0 24px color-mix(in srgb, var(--color-primary) 26%, transparent);
}

.sec-sub {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.65 !important;
}

@media (min-width: 768px) {
  .sec-eyebrow { font-size: 12px; }
  .sec-title   { font-size: 34px; }
  .sec-sub     { font-size: 15px; }
}

@media (min-width: 1280px) {
  .sec-title { font-size: 38px; }
}


/* ══════════════════════════════════════════════════════════════
   SERVICE CARDS
   Markup: assets/twig/module.services-cards.twig
   Artwork: assets/imgs/service_1.webp … service_3.webp
   ══════════════════════════════════════════════════════════════ */

.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

@media (min-width: 768px) {
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.svc-card {
  position: relative;
  display: flex;
  /* copy sits at the top of the card, not pinned to the bottom */
  align-items: flex-start;
  min-height: 300px;
  padding: 24px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--dark-color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.06);
  isolation: isolate;
}

.svc-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.svc-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keep the artwork crisp rather than letting the browser soften it */
  image-rendering: auto;
  transform: scale(1.04);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-img.is-ready { display: block; }

.svc-card:hover .svc-img { transform: scale(1.09); }

/* darkening + vignette so the artwork stays behind the words - heaviest at
   the top where the copy sits, lighter further down so the art still reads */
.svc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 100% at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.84) 26%,
      rgba(0, 0, 0, 0.45) 56%,
      rgba(0, 0, 0, 0.18) 100%
    );
  pointer-events: none;
}

.svc-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* the number is a marker, not a footnote - it leads the card */
.svc-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--color-primary);
  line-height: 1 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.svc-title {
  margin: 0;
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.18 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

/* The closing word of each title drops to the accent colour on its own
   line - see splitServiceTitles() in main.js for how it is wrapped. */
.svc-title-accent {
  display: block;
  color: var(--color-primary);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.75),
    0 0 26px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.svc-desc {
  margin: 0;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.76);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* small credential chip at the foot of the card */
.svc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 14px;
  padding: 7px 13px 7px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-primary) 10%, rgba(0, 0, 0, 0.42));
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  color: var(--color-primary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1 !important;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.svc-badge svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.svc-card:hover .svc-badge {
  background: color-mix(in srgb, var(--color-primary) 16%, rgba(0, 0, 0, 0.42));
  border-color: color-mix(in srgb, var(--color-primary) 48%, transparent);
}


/* ══════════════════════════════════════════════════════════════
   PRODUCT FEEDBACK TAB
   Markup: package.html  ·  Boot: initProductFeedback()
   A small folder-style social proof card sitting on the top edge of
   the gallery. Deliberately compact - it must not read as a review
   section or compete with the media and the buy panel.
   ══════════════════════════════════════════════════════════════ */

/* Anchor for the overlay. This is the ONLY thing added to the gallery
   column - no spacing, sizing or flex changes, so the gallery keeps the
   exact position it had before the component existed. */
.pkg-media-col {
  position: relative;
}

/* Sits ENTIRELY above the gallery, in the margin that was already empty
   there, so nothing moves down. bottom:100% puts its lower edge exactly on
   the gallery's top edge and the -1px pulls the two borders onto each other,
   so panel and gallery read as one continuous shape. */
.pf-wrap {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: -1px;
  z-index: 12;
  width: min(430px, 100%);
  border: 1px solid var(--glass-border);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--glass-bg-strong);
  box-shadow: 0 -14px 34px -26px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .pf-wrap {
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    backdrop-filter: blur(14px) saturate(115%);
  }
}

/* The gallery squares off the corner the tab lands on, so the join is a
   straight run of border rather than two rounded corners meeting.
   .pf-attached is added by initProductFeedback() only when there is
   actually a review to show. */
.pkg-gallery {
  position: relative;
  border: 1px solid var(--glass-border);
}

.pkg-media-col.pf-attached .pkg-gallery {
  border-top-left-radius: 0;
}

/* thin header strip inside the panel */
.pf-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 11px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.pf-tab-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1 !important;
}

.pf-tab-label svg {
  width: 13px;
  height: 13px;
}

/* the review count is a button - it opens the full reviews modal */
.pf-total {
  padding: 0;
  border: 0;
  background: none;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.pf-total:hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}

.pf-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px 9px;
}

/* short fade with a small slide - no bounce, nothing attention seeking */
.pf-card.is-in .pf-body {
  animation: pfIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pfIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.pf-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1 !important;
}

.pf-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex-grow: 1;
}

/* Two tight rows. Everything is single line and ellipsised, so the panel is
   exactly the same height for every review and never jumps as they swap. */
.pf-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.pf-stars {
  display: inline-flex;
  flex-shrink: 0;
  gap: 1px;
  color: var(--color-primary);
}

.pf-verified {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6fcf7f;
  line-height: 1 !important;
}

.pf-verified svg {
  width: 10px;
  height: 10px;
}

.pf-name {
  flex-shrink: 0;
  max-width: 40%;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.35 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-product {
  flex-shrink: 0;
  max-width: 45%;
  font-size: 10px;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-primary) 80%, transparent);
  line-height: 1.2 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tablets have a 70px gap above the gallery instead of 100px, so the panel
   tightens up to stay clear of the navbar. */
@media (min-width: 768px) and (max-width: 1023px) {
  .pf-tab { padding: 3px 9px 4px; }
  .pf-tab-label { font-size: 9.5px; }
  .pf-card { padding: 5px 9px 6px; }
  .pf-avatar { width: 24px; height: 24px; font-size: 9.5px; }
  .pf-body { gap: 1px; }
  .pf-name { font-size: 11.5px; }
  .pf-text { font-size: 10.5px; }
}

/* Phones have far less room above the gallery, so the header strip goes and
   the panel drops to a single line. Still zero height in the flow. */
@media (max-width: 767px) {
  .pf-wrap {
    width: min(340px, 100%);
    border-radius: 10px 10px 0 0;
  }
  .pf-tab { display: none; }
  .pf-card { padding: 6px 9px 7px; gap: 8px; }
  .pf-avatar { width: 24px; height: 24px; font-size: 9.5px; }
  .pf-row-quote { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   ASK AI  -  edge tab + floating chat panel
   Markup: package.html  ·  Boot: initAiAssistant()
   Both are position:fixed, so opening and closing the panel moves
   nothing on the page.
   ══════════════════════════════════════════════════════════════ */

.ai-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 13px;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 38%, transparent);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: color-mix(in srgb, var(--dark-color-secondary) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: -8px 0 28px -18px color-mix(in srgb, var(--color-primary) 90%, transparent);
  transition: padding-right 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ai-tab:hover,
.ai-tab.is-open {
  padding-right: 16px;
  border-color: color-mix(in srgb, var(--color-primary) 62%, transparent);
  box-shadow: -10px 0 34px -16px color-mix(in srgb, var(--color-primary) 95%, transparent);
}

/* the label stacks under the mark so the tab stays a slim strip */
.ai-tab-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.ai-tab-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%,
      color-mix(in srgb, var(--color-primary) 30%, transparent) 0%,
      transparent 70%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
  animation: aiOrbPulse 3.2s ease-in-out infinite;
}

.ai-tab-orb svg {
  width: 15px;
  height: 15px;
}

@keyframes aiOrbPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 26%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 0%, transparent); }
}

/* ── Panel ─────────────────────────────────────────────────── */

.ai-panel {
  position: fixed;
  top: 50%;
  right: 58px;
  z-index: 8001;
  display: flex;
  flex-direction: column;
  width: 350px;
  max-height: min(64vh, 520px);
  transform: translateY(-50%);
  border-radius: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--dark-color-secondary) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
  box-shadow:
    0 40px 80px -40px rgba(0, 0, 0, 0.95),
    0 0 40px -22px color-mix(in srgb, var(--color-primary) 70%, transparent);
  animation: aiPanelIn 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-panel[hidden] {
  display: none;
}

@keyframes aiPanelIn {
  from { opacity: 0; transform: translateY(-50%) translateX(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}

.ai-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 10%, transparent) 0%,
    transparent 60%
  );
}

.ai-head-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%,
      color-mix(in srgb, var(--color-primary) 28%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 8%, transparent) 62%,
      transparent 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
  color: var(--color-primary);
  box-shadow: inset 0 0 12px -4px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.ai-head-orb svg {
  width: 17px;
  height: 17px;
}

.ai-head-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex-grow: 1;
}

.ai-head-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2 !important;
}

.ai-head-sub {
  font-size: 11px;
  color: color-mix(in srgb, var(--color-primary) 75%, transparent);
  line-height: 1.2 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.ai-close svg {
  width: 13px;
  height: 13px;
}

.ai-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ── Messages ──────────────────────────────────────────────── */

.ai-body {
  /* positioned so a child's offsetTop is measured from this scroll box and
     not from the panel - initAiAssistant() uses it to line the answer up */
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 15px 14px;
}

.ai-msg {
  max-width: 92%;
  padding: 11px 13px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.65 !important;
  animation: aiMsgIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes aiMsgIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ai-msg p {
  margin: 0;
}

.ai-msg p + p {
  margin-top: 9px;
}

.ai-msg-user {
  align-self: flex-end;
  border-bottom-right-radius: 5px;
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 26%, transparent);
  color: rgba(255, 255, 255, 0.9);
}

.ai-msg-bot {
  align-self: flex-start;
  border-bottom-left-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.68);
}

/* each paragraph of the answer eases in just behind the one above it */
.ai-msg-bot.is-in p {
  opacity: 0;
  animation: aiLineIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.16s);
}

@keyframes aiLineIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Thinking ──────────────────────────────────────────────── */

.ai-thinking {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.5);
}

/* a slow liquid pulse rather than a spinner */
.ai-think-orb {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%,
      color-mix(in srgb, var(--color-primary) 90%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 25%, transparent) 60%,
      transparent 100%);
  animation: aiThinkOrb 1.8s ease-in-out infinite;
}

.ai-think-orb::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  animation: aiThinkRing 1.8s ease-in-out infinite;
}

@keyframes aiThinkOrb {
  0%, 100% { transform: scale(0.88); opacity: 0.75; }
  50%      { transform: scale(1.08); opacity: 1; }
}

@keyframes aiThinkRing {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50%      { transform: scale(1.15); opacity: 0; }
}

.ai-think-text {
  font-size: 12.5px;
}

.ai-dots {
  display: inline-flex;
  gap: 3px;
}

.ai-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: aiDot 1.3s ease-in-out infinite;
}

.ai-dots i:nth-child(2) { animation-delay: 0.18s; }
.ai-dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes aiDot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-2px); }
}

/* ── Footer note ───────────────────────────────────────────── */

.ai-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.34);
  line-height: 1.4 !important;
}

.ai-foot svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #6fcf7f;
}

/* ── Phones: the tab drops to a corner pill and the panel docks to
      the bottom, still bounded so it never takes the whole screen ── */

@media (max-width: 767px) {
  .ai-tab {
    top: auto;
    bottom: 18px;
    right: 14px;
    transform: none;
    padding: 10px 14px;
    border-right: 1px solid color-mix(in srgb, var(--color-primary) 38%, transparent);
    border-radius: 999px;
  }

  .ai-tab-text {
    writing-mode: horizontal-tb;
  }

  .ai-panel {
    top: auto;
    bottom: 76px;
    right: 14px;
    left: 14px;
    width: auto;
    max-height: 62vh;
    transform: none;
    animation: aiPanelInMobile 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes aiPanelInMobile {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}


/* ══════════════════════════════════════════════════════════════
   REVIEWS MODAL
   Markup: package.html  ·  Opened from the "N reviews" link
   ══════════════════════════════════════════════════════════════ */

.rvm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.rvm-overlay[hidden] {
  display: none;
}

body.rvm-open {
  overflow: hidden;
}

.rvm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 8, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: rvmFade 0.28s ease;
}

@keyframes rvmFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rvm-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(86vh, 760px);
  border-radius: 20px;
  overflow: hidden;
  background: color-mix(in srgb, var(--dark-color-secondary) 94%, transparent);
  border: 1px solid var(--glass-border);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.95);
  animation: rvmRise 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rvmRise {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Head ──────────────────────────────────────────────────── */

.rvm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--color-primary) 8%, transparent) 0%,
    transparent 55%
  );
}

.rvm-head-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.rvm-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1 !important;
}

.rvm-title {
  margin: 0;
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.2 !important;
}

.rvm-product {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-primary) 80%, transparent);
  line-height: 1.3 !important;
}

.rvm-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.rvm-close svg {
  width: 16px;
  height: 16px;
}

.rvm-close:hover {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

/* ── Review list ───────────────────────────────────────────── */

.rvm-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 22px 18px;
}

.rvm-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rvm-item:last-child {
  border-bottom: 0;
}

.rvm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1 !important;
}

.rvm-item-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rvm-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rvm-item-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2 !important;
}

.rvm-item-stars {
  display: inline-flex;
  gap: 1px;
}

.rvm-item-verified {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(111, 207, 127, 0.12);
  border: 1px solid rgba(111, 207, 127, 0.24);
  color: #6fcf7f;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1 !important;
}

.rvm-item-text {
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6 !important;
}

/* ── Foot: average + CTA ───────────────────────────────────── */

.rvm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 22px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
}

.rvm-score {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rvm-score-value {
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1 !important;
}

.rvm-score-stars {
  display: inline-flex;
  gap: 2px;
}

.rvm-score-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
}

.rvm-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--color-primary);
  color: var(--dark-color-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.rvm-cta svg {
  width: 16px;
  height: 16px;
}

.rvm-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--color-primary) 90%, transparent);
}

@media (max-width: 560px) {
  .rvm-panel { max-height: 92vh; }
  .rvm-head  { padding: 18px 16px 15px; }
  .rvm-list  { padding: 6px 16px 14px; }
  .rvm-foot  { padding: 14px 16px 16px; }
  .rvm-title { font-size: 19px; }
  .rvm-cta   { width: 100%; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════
   PRODUCT DETAILS
   Markup built by initProductDetails() from store-config.js.
   Replaces the Tebex description on a package page.
   ══════════════════════════════════════════════════════════════ */

.pd-shell {
  width: 100%;
}

/* ── The four stat cards ───────────────────────────────────── */

.pd-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 640px) {
  .pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

.pd-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 20px;
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% -20%,
      color-mix(in srgb, var(--color-primary) 7%, transparent) 0%,
      transparent 60%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.pd-stat:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--color-primary) 34%, transparent);
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent),
    0 18px 40px -28px color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* round icon well: thin accent ring, a radial wash inside it and a glow that
   only shows on hover */
.pd-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%,
      color-mix(in srgb, var(--color-primary) 26%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 8%, transparent) 60%,
      transparent 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
  color: var(--color-primary);
  box-shadow: inset 0 0 14px -4px color-mix(in srgb, var(--color-primary) 45%, transparent);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.pd-stat:hover .pd-stat-icon {
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  box-shadow:
    inset 0 0 16px -3px color-mix(in srgb, var(--color-primary) 55%, transparent),
    0 0 18px -4px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.pd-stat-icon svg {
  width: 20px;
  height: 20px;
}

.pd-stat-title {
  margin: 0;
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.2 !important;
}

.pd-stat-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.pd-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.pd-stat-row:first-child {
  border-top: 0;
  padding-top: 0;
}

/* a plain string row has no value column, so the tick carries it */
.pd-stat-row-plain dt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}

.pd-stat-tick {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: #6fcf7f;
}

.pd-stat-row dt {
  color: rgba(255, 255, 255, 0.38);
}

.pd-stat-row dd {
  margin: 0;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Features ──────────────────────────────────────────────── */

/* ── Shared panel shell + header ────────────────────────────────
   Features, Description and FAQ all use this, so the three sections
   read as one family instead of three different headings.
   The margin clears the header, which floats half above the edge.
   ────────────────────────────────────────────────────────────── */

.pd-panel {
  position: relative;
  margin-top: 62px;
  padding: 54px 20px 22px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

@media (min-width: 768px) {
  .pd-panel { padding: 60px 26px 26px; margin-top: 72px; }
}

.pd-panel-head {
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

@media (min-width: 768px) {
  .pd-panel-head { left: 26px; right: 26px; }
}

.pd-panel-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 14%, var(--dark-color-primary));
  border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
  color: var(--color-primary);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1 !important;
}

.pd-panel-title {
  margin: 0;
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15 !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8);
}

.pd-panel-accent {
  color: var(--color-primary);
  text-shadow: 0 0 24px color-mix(in srgb, var(--color-primary) 26%, transparent);
}

.pd-panel-sub {
  margin: 0;
  max-width: 62ch;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.55 !important;
}

@media (min-width: 768px) {
  .pd-panel-title { font-size: 28px; }
  .pd-panel-sub   { font-size: 13.5px; }
}

/* The head is centred on the panel's top edge, so half of it hangs inside
   and has to fit within the padding. A long title wraps to two or three
   lines on a phone, so the smaller screens get a shorter title and more
   headroom rather than letting the sub copy land on the content. */
@media (max-width: 767px) {
  .pd-panel { padding-top: 86px; }
  .pd-panel-title { font-size: 19px; }
}

.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
}

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

@media (min-width: 1100px) {
  .pd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
}

.pd-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 20px 18px 20px;
  border-radius: 16px;
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.018) 45%,
      rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.35s ease, border-color 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.pd-feature:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--color-primary) 32%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent),
    0 20px 40px -30px color-mix(in srgb, var(--color-primary) 65%, transparent);
}

/* round icon well, matching the stat cards */
.pd-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%,
      color-mix(in srgb, var(--color-primary) 22%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 7%, transparent) 62%,
      transparent 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  color: var(--color-primary);
  box-shadow: inset 0 0 12px -4px color-mix(in srgb, var(--color-primary) 40%, transparent);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.pd-feature:hover .pd-feature-icon {
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  box-shadow:
    inset 0 0 14px -3px color-mix(in srgb, var(--color-primary) 50%, transparent),
    0 0 16px -5px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.pd-feature-icon svg {
  width: 18px;
  height: 18px;
}

.pd-feature-title {
  margin: 0;
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.3 !important;
}

.pd-feature-text {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.46);
  line-height: 1.65 !important;
}

/* icon left, index right - the number reads as a marker, not a heading */
.pd-feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.pd-feature-no {
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.14);
  line-height: 1 !important;
  transition: color 0.35s ease;
}

.pd-feature:hover .pd-feature-no {
  color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

/* Feature tag chips were removed - the cards read cleaner without them.
   The `tags` data is still in store-config.js if they are ever wanted back. */


/* ── Written description + audience panels ─────────────────── */

.pd-desc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 1024px) {
  .pd-desc-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 34px;
    align-items: start;
  }
}

.pd-desc-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pd-desc-copy p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.75 !important;
}

.pd-desc-copy p b {
  color: var(--color-primary);
  font-weight: 700;
}

.pd-desc-copy p a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ── The two audience panels ───────────────────────────────── */

.pd-audiences {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 640px) {
  .pd-audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pd-audience {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 17px 19px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.pd-audience:hover {
  border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.pd-audience-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pd-audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%,
      color-mix(in srgb, var(--color-primary) 24%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 8%, transparent) 62%,
      transparent 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
  color: var(--color-primary);
  box-shadow: inset 0 0 13px -4px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.pd-audience-icon svg {
  width: 19px;
  height: 19px;
}

.pd-audience-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25 !important;
}

.pd-audience-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.36);
  line-height: 1.35 !important;
}

.pd-audience-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-audience-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45 !important;
}

.pd-tick {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: #6fcf7f;
}

/* ── Collapsible audience points ───────────────────────────────
   A ticked one-line summary that opens into the full paragraph.
   Long prose used to blow the two panels out to wildly different
   heights; collapsed, they line up.
   ────────────────────────────────────────────────────────────── */

.pd-points {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pd-point {
  border-radius: 11px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.pd-point:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.pd-point.is-open {
  background: rgba(255, 255, 255, 0.035);
  border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
}

.pd-point-q {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  background: none;
  text-align: left;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.pd-point-q:focus {
  outline: none;
}

.pd-point-q > span {
  flex-grow: 1;
  min-width: 0;
}

.pd-point.is-open .pd-point-q,
.pd-point-q:hover {
  color: #fff;
}

.pd-point-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.35);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.pd-point-sign svg {
  width: 13px;
  height: 13px;
}

.pd-point.is-open .pd-point-sign {
  transform: rotate(135deg);
  color: var(--color-primary);
}

.pd-point-a {
  height: 0;
  overflow: hidden;
  transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.pd-point-a p {
  margin: 0;
  padding: 0 12px 12px 33px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7 !important;
}

/* prose variant of an audience panel, used instead of the ticked list */
.pd-audience-copy {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pd-audience-copy p {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7 !important;
}

/* two long prose columns read better side by side on a wide screen */
@media (min-width: 1024px) {
  .pd-desc-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-audiences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ── Per-product FAQ ───────────────────────────────────────── */

.pd-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

@media (min-width: 768px) {
  .pd-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.pd-faq-item {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.055);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.pd-faq-item:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
}

.pd-faq-item.is-open {
  border-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
  background: rgba(255, 255, 255, 0.035);
}

.pd-faq-item-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  background: none;
  text-align: left;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4 !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.pd-faq-item-q:focus {
  outline: none;
}

.pd-faq-item.is-open .pd-faq-item-q,
.pd-faq-item-q:hover {
  color: #fff;
}

.pd-faq-item-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.pd-faq-item-sign svg {
  width: 15px;
  height: 15px;
}

/* the plus turns into a minus */
.pd-faq-item.is-open .pd-faq-item-sign {
  transform: rotate(135deg);
  color: var(--color-primary);
}

.pd-faq-item-a {
  height: 0;
  overflow: hidden;
  transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.pd-faq-item-a p {
  margin: 0;
  padding: 0 16px 16px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7 !important;
}

@media (min-width: 768px) {
  .pd-faq-item-q { font-size: 14px; }
  .pd-faq-item-a p { font-size: 13px; }
}


/* ── Contact row inside the buy card ───────────────────────── */

.pkg-contact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 2px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 480px) {
  .pkg-contact {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.pkg-contact-text {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.pkg-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.pkg-contact-btn svg {
  width: 18px;
  height: 18px;
}

.pkg-contact-btn:hover {
  background: #5865f2;
  border-color: transparent;
  transform: translateY(-1px);
}


/* ══════════════════════════════════════════════════════════════
   FAQ
   Markup: assets/twig/module.faq.twig
   ══════════════════════════════════════════════════════════════ */

.faq-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

@media (min-width: 1024px) {
  .faq-head {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
}

/* the accent rule down the left of the heading, like the reference */
.faq-head-copy {
  position: relative;
  padding-left: 18px;
}

.faq-head-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 15%, transparent)
  );
}

/* ── Support panel ─────────────────────────────────────────── */

.faq-help {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  width: 100%;
  max-width: 420px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  text-decoration: none;
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.faq-help:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.faq-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
  color: var(--color-primary);
}

.faq-help-icon svg {
  width: 22px;
  height: 22px;
}

.faq-help-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex-grow: 1;
}

.faq-help-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25 !important;
}

.faq-help-text {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.45 !important;
}

.faq-help-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* overlapping member faces */
.faq-help-avatars {
  display: inline-flex;
  align-items: center;
}

.faq-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dark-color-secondary);
  border: 1.5px solid color-mix(in srgb, var(--dark-color-primary) 85%, #fff);
  color: rgba(255, 255, 255, 0.8);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1 !important;
  object-fit: cover;
}

.faq-av + .faq-av {
  margin-left: -8px;
}

/* pale accent tint so the row of faces is not a grey blob */
.faq-help-avatars .faq-av:nth-child(1) { background: #4F7CF7; color: #fff; }
.faq-help-avatars .faq-av:nth-child(2) { background: #8B5CF6; color: #fff; }
.faq-help-avatars .faq-av:nth-child(3) { background: #2FB6C4; color: #fff; }
.faq-help-avatars .faq-av:nth-child(4) { background: #E8467C; color: #fff; }

.faq-help-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}

.faq-help-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6fcf7f;
  box-shadow: 0 0 8px rgba(111, 207, 127, 0.8);
}

.faq-help-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
  color: var(--color-primary);
  transition: background 0.3s ease, transform 0.3s ease;
}

.faq-help-go svg {
  width: 17px;
  height: 17px;
}

.faq-help:hover .faq-help-go {
  background: color-mix(in srgb, var(--color-primary) 26%, transparent);
  transform: translateX(2px);
}

/* ── Question grid ─────────────────────────────────────────── */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  margin-top: 28px;
}

@media (min-width: 768px) {
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin-top: 34px;
  }
}

.faq-item {
  border-radius: 14px;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.3s ease;
}

.faq-item.is-open {
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.faq-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 17px 18px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.faq-toggle:focus {
  outline: none;
}

.faq-index {
  flex-shrink: 0;
  font-family: "Montserrat", "Poppins", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  line-height: 1 !important;
}

.faq-question {
  flex-grow: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4 !important;
  transition: color 0.3s ease;
}

.faq-item.is-open .faq-question,
.faq-toggle:hover .faq-question {
  color: #fff;
}

.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.42);
  transition: transform 0.3s ease, color 0.3s ease;
}

.faq-icon svg {
  width: 16px;
  height: 16px;
}

.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.faq-content {
  height: 0;
  overflow: hidden;
  transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer {
  padding: 0 18px 18px 46px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.65 !important;
}

.faq-answer a {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .faq-question { font-size: 15px; }
  .faq-answer   { font-size: 14px; }
}


/* ══════════════════════════════════════════════════════════════
   RECENT PURCHASES
   Markup: module.payments.html  ·  Times: initPaymentTimes()
   ══════════════════════════════════════════════════════════════ */

/* Tablet and up only, matching the behaviour this section always had. Done
   here rather than with a Tailwind utility because output.css is a prebuilt
   bundle and does not carry every responsive display class. */
.recent-payments {
  display: none;
}

@media (min-width: 768px) {
  .recent-payments {
    display: block;
  }
}

.pay-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

/* the head's own margin lives on .sec-head */
.pay-head .sec-head {
  margin-bottom: 22px;
}

.pay-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-top: 4px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(111, 207, 127, 0.1);
  border: 1px solid rgba(111, 207, 127, 0.22);
  color: #6fcf7f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1 !important;
}

.pay-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6fcf7f;
  box-shadow: 0 0 8px rgba(111, 207, 127, 0.8);
}

.pay-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 1024px) {
  .pay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .pay-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
  }
}

.pay-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 15px 16px 14px;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}

.pay-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* the newest order is the one worth looking at - a hint of the accent,
   nothing more */
.pay-card:first-child {
  border-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent),
    0 12px 40px -26px color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.pay-card-top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.pay-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
}

.pay-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex-grow: 1;
}

.pay-name {
  font-size: 14.5px;
  font-weight: 600;
  color: #f4f4f4;
  line-height: 1.2 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay-time {
  font-size: 12px;
  color: rgba(244, 244, 244, 0.45);
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pay-cart {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: color-mix(in srgb, var(--color-primary) 75%, transparent);
}

.pay-cart svg {
  width: 17px;
  height: 17px;
}

.pay-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pay-package {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(244, 244, 244, 0.55);
  line-height: 1.35 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay-price {
  flex-shrink: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2 !important;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════
   LIVE STATS PANEL
   Markup: assets/twig/module.stats.twig  ·  Art: live_stat.webp
   ══════════════════════════════════════════════════════════════ */

.live-stat {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--dark-color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.06);
  isolation: isolate;
}

.live-stat-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.live-stat-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-stat-img.is-ready { display: block; }

/* The figures have to win. The artwork is texture behind them, not a photo
   to look at, so it is held well back. */
.live-stat-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 110% at 50% 45%, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0.82) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.live-stat-img {
  opacity: 0.55;
  filter: saturate(0.7);
}

.live-stat-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  padding: 34px 26px;
}

@media (min-width: 768px) {
  .live-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding: 46px 40px;
  }
}

.live-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.live-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 2px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
  color: var(--color-primary);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* month-on-month change under each figure */
.live-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(111, 207, 127, 0.12);
  border: 1px solid rgba(111, 207, 127, 0.24);
  color: #6fcf7f;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.live-stat-item + .live-stat-item {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 26px;
}

@media (min-width: 768px) {
  .live-stat-item + .live-stat-item {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 0;
  }
}

.live-stat-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
}

@media (min-width: 768px) {
  .live-stat-value { font-size: 48px; }
}

.live-stat-plus { color: var(--color-primary); }

.live-stat-label {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* No prefers-reduced-motion override for the tilt or the feedback card.
   Windows maps its "Animation effects" switch onto that query and this shop
   runs with it off, which would silently kill both effects. The tilt only
   reacts to a pointer the visitor is already moving, and the feedback card
   turns slowly by design. */


/* ══════════════════════════════════════════════════════════════
   RECOMMENDED PACKAGES + PRICE ANCHORING
   Driven by assets/scripts/store-config.js
   ══════════════════════════════════════════════════════════════ */

.pkg-card.is-recommended {
  border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent),
    0 18px 44px -26px color-mix(in srgb, var(--color-primary) 65%, transparent);
}

/* molten edge: a slow gradient sweep around the border */
.pkg-card.is-recommended::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    115deg,
    color-mix(in srgb, var(--color-primary) 20%, transparent) 0%,
    var(--color-primary) 25%,
    #fff2c4 40%,
    var(--color-primary) 55%,
    color-mix(in srgb, var(--color-primary) 20%, transparent) 80%
  );
  background-size: 300% 100%;
  /* show only the 1px frame, not the fill */
  -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;
  animation: lavaEdge 5s linear infinite;
  pointer-events: none;
}

@keyframes lavaEdge {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

.pkg-card.is-recommended:hover {
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 55%, transparent),
    0 26px 55px -24px color-mix(in srgb, var(--color-primary) 80%, transparent);
}

/* corner ribbon on the artwork */
.pkg-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 116px;
  height: 116px;
  overflow: hidden;
  pointer-events: none;
}

.pkg-ribbon span {
  position: absolute;
  top: 20px;
  left: -46px;
  width: 160px;
  padding: 5px 0;
  text-align: center;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, #ffd166 0%, var(--color-primary) 55%, #e07a1f 100%);
  color: #1a1206;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.7);
}


/* ══════════════════════════════════════════════════════════════
   CATEGORY HEADER — rotating feedback card
   Markup: category.html  ·  Boot: initCatFeedback()
   ══════════════════════════════════════════════════════════════ */

.cat-feedback {
  /* full width whether .cat-stats is the desktop flex row or the mobile grid */
  flex: 0 0 100%;
  width: 100%;
  grid-column: 1 / -1;
  margin-top: 34px;
  perspective: 900px;
}

.cat-fb-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 15px 14px;
  border-radius: 14px;
  background: var(--dark-color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transform-style: preserve-3d;
  /* turns by itself - no pointer needed */
  animation: catOrbit 9s linear infinite;
  will-change: transform;
}

/* A full circuit sampled every 30 degrees: rotateY traces a sine and rotateX
   a cosine, so the card sweeps sideways AND tips up and down by roughly the
   same amount. Linear timing on purpose - ease-in-out parked it at every
   keyframe and read as the animation stopping. */
@keyframes catOrbit {
  0%      { transform: translateY(-6px) rotateX(7deg) rotateY(0deg); }
  8.333%  { transform: translateY(-5.2px) rotateX(6.06deg) rotateY(4deg); }
  16.667% { transform: translateY(-3px) rotateX(3.5deg) rotateY(6.93deg); }
  25%     { transform: translateY(0px) rotateX(0deg) rotateY(8deg); }
  33.333% { transform: translateY(3px) rotateX(-3.5deg) rotateY(6.93deg); }
  41.667% { transform: translateY(5.2px) rotateX(-6.06deg) rotateY(4deg); }
  50%     { transform: translateY(6px) rotateX(-7deg) rotateY(0deg); }
  58.333% { transform: translateY(5.2px) rotateX(-6.06deg) rotateY(-4deg); }
  66.667% { transform: translateY(3px) rotateX(-3.5deg) rotateY(-6.93deg); }
  75%     { transform: translateY(0px) rotateX(0deg) rotateY(-8deg); }
  83.333% { transform: translateY(-3px) rotateX(3.5deg) rotateY(-6.93deg); }
  91.667% { transform: translateY(-5.2px) rotateX(6.06deg) rotateY(-4deg); }
  100%    { transform: translateY(-6px) rotateX(7deg) rotateY(0deg); }
}

/* Pointer takes over: the orbit is switched off entirely (an animation
   outranks inline styles, so pausing it is not enough) and the tilt follows
   the mouse instead. */
.cat-fb-inner.is-hovering {
  animation: none;
  transform:
    perspective(900px)
    rotateX(var(--fb-tilt-x, 0deg))
    rotateY(var(--fb-tilt-y, 0deg))
    translateZ(8px);
  transition: transform 0.12s ease-out;
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Eases back to flat before the orbit resumes, so the card does not snap to
   wherever the keyframes happen to be at that moment. */
.cat-fb-inner.is-leaving {
  animation: none;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.cat-fb-quote {
  position: absolute;
  top: -12px;
  right: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1 !important;
  color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  pointer-events: none;
  user-select: none;
}

/* each swap fades and lifts the new review in */
.cat-feedback.is-in .cat-fb-body {
  animation: catFbIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes catFbIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cat-fb-text {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.66);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 39px;
}

.cat-fb-foot {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cat-fb-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.cat-fb-who {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.cat-fb-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-fb-from {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.34);
}

.cat-fb-stars {
  display: inline-flex;
  flex-shrink: 0;
  gap: 1px;
}

.cat-fb-progress {
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.cat-fb-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}


/* ══════════════════════════════════════════════════════════════
   SPIN WHEEL
   Markup: assets/twig/spin-wheel-popup.twig  ·  Logic: spin-wheel.js
   The theme shipped the markup and the script but no styles, which
   left the wheel artwork sitting full size at the bottom of every
   page. Everything here is hidden until spin-wheel.js adds .active.
   ══════════════════════════════════════════════════════════════ */

.sw-overlay,
.sw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sw-overlay.active,
.sw-modal-overlay.active {
  display: flex;
  animation: swFade 0.3s ease;
}

@keyframes swFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sw-backdrop,
.sw-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* spin-wheel.js sizes these to window.innerWidth/innerHeight and places
   particles in window coordinates, so they have to be pinned to the viewport
   rather than to the padded overlay box - otherwise the maths is off. */
.sw-sparks,
.sw-confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.sw-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  width: 100%;
}

.sw-header {
  text-align: center;
}

.sw-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15 !important;
}

.sw-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 600;
}

/* ── Wheel ─────────────────────────────────────────────────── */

/* isolation makes this its own stacking context, so the layer order below is
   decided here and cannot be reshuffled by anything outside the wheel. */
.sw-wheel-assembly {
  position: relative;
  isolation: isolate;
  width: min(420px, 82vw);
  height: min(420px, 82vw);
}

/* All three layers are centred the same way, because spin-wheel.js writes
   `translate(-50%, -50%) rotate(...)` onto .sw-center and any other anchoring
   would fight it. The per-layer rules below use two classes so they outrank
   this one - a single-class rule would lose to `.sw-wheel-assembly img`. */
.sw-wheel-assembly > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-drag: none;
}

/* Layer order, bottom to top:  center 10 -> frame 20 -> button 30 -> pointer 40
   Spaced out rather than 1,2,3,4 so a new layer can be slipped in between two
   of them later without renumbering the whole stack. */

/* the part that actually spins - the segments, underneath everything */
.sw-wheel-assembly > .sw-center {
  z-index: 10;
}

/* outer ring. Must paint OVER the spinning segments, never under them, or the
   segments cover the ring as they turn. pointer-events:none keeps it from
   swallowing clicks meant for the SPIN button underneath it. */
.sw-wheel-assembly > .sw-frame {
  z-index: 20;
  pointer-events: none;
}

/* SPIN button in the middle */
.sw-wheel-assembly > .sw-button {
  z-index: 30;
  width: 27%;
  height: 27%;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.sw-wheel-assembly > .sw-button:hover {
  transform: translate(-50%, -50%) scale(1.06);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--color-primary) 70%, transparent));
}

/* marks the winning segment, so it goes above the ring as well */
.sw-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  z-index: 40;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 24px solid var(--color-primary);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.sw-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0.65;
}

.sw-brand-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 6px;
}

.sw-brand-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.sw-close {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  font-size: 26px;
  line-height: 1 !important;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.sw-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ── Win / sorry modals ────────────────────────────────────── */

.sw-modal-overlay { z-index: 9100; }

.sw-modal-content {
  position: relative;
  z-index: 2;
  width: min(420px, 92vw);
  padding: 30px 26px;
  text-align: center;
  border-radius: 20px;
  background: var(--dark-color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transform: scale(0.94) translateY(10px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sw-modal-content.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.sw-win-icon,
.sw-sorry-icon {
  font-size: 44px;
  line-height: 1 !important;
}

.sw-win-title,
.sw-sorry-title {
  margin: 12px 0 6px;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}

.sw-win-text,
.sw-sorry-text {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.sw-win-text span {
  color: var(--color-primary);
  font-weight: 800;
}

.sw-coupon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 22px 0;
}

.sw-coupon-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.sw-coupon-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.sw-coupon-box code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.sw-copy-btn {
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 5px 9px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.25s ease;
}

.sw-copy-btn:hover { background: rgba(255, 255, 255, 0.14); }

.sw-copied {
  font-size: 12px;
  font-weight: 600;
  color: #6fcf7f;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sw-copied.visible { opacity: 1; }

.sw-cta-btn,
.sw-sorry-btn {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.2s ease;
}

.sw-cta-btn {
  background: var(--color-primary);
  color: var(--dark-color-primary);
}

.sw-sorry-btn {
  margin-top: 22px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.8);
}

.sw-cta-btn:hover,
.sw-sorry-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .sw-title { font-size: 24px; }
  .sw-close { top: 12px; right: 12px; width: 38px; height: 38px; }
}


/* ══════════════════════════════════════════════════════════════
   GLASS SURFACES
   ──────────────────────────────────────────────────────────────
   Last block in the file on purpose: it re-tints panels that were
   declared earlier as flat --dark-color-secondary boxes. Same
   selectors, same specificity, so these simply win by order and
   nothing above needs touching.

   The panels become slightly transparent so the PAGE ATMOSPHERE
   behind them shows through. Blur is desktop-only - backdrop-filter
   is the most expensive thing on this page and a phone gains
   nothing from it.
   ══════════════════════════════════════════════════════════════ */

:root {
  --glass-bg: color-mix(in srgb, var(--dark-color-secondary) 74%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--dark-color-secondary) 88%, transparent);
  --glass-border: rgba(255, 255, 255, 0.075);
  --glass-shadow: 0 20px 46px -32px rgba(0, 0, 0, 0.95);
}

.svc-card,
.live-stat,
.pkg-card,
.rv-card,
.cat-fb-inner,
.pay-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ── Metallic edge ──────────────────────────────────────────────
   A brushed-metal rim: light catches the top-left of the border and
   fades away round the bottom-right, with a faint touch of the accent
   in the middle. Painted as a 1px gradient ring with mask-composite,
   so it sits exactly on the border and never on the content.

   Add .has-sheen to give any panel this edge. Kept off the review
   marquee cards and the orbiting category card by default because
   those are already moving - they get the softer top hairline only.
   ────────────────────────────────────────────────────────────── */

.pay-card,
.svc-card,
.live-stat,
.pkg-card,
.rv-card,
.cat-fb-inner,
.faq-item,
.has-sheen {
  position: relative;
}

/* .pkg-card already uses ::after for its glass reflection sweep, so it takes
   the rim on ::before instead. Same declarations, different pseudo. */
.pkg-card::before,
.pay-card::after,
.svc-card::after,
.live-stat::after,
.rv-card::after,
.cat-fb-inner::after,
.faq-item::after,
.has-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.06) 22%,
    color-mix(in srgb, var(--color-primary) 26%, transparent) 48%,
    rgba(255, 255, 255, 0.05) 72%,
    rgba(255, 255, 255, 0.18) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.pkg-card:hover::before,
.pay-card:hover::after,
.svc-card:hover::after,
.rv-card:hover::after,
.faq-item:hover::after,
.has-sheen:hover::after {
  opacity: 1;
}

/* a hairline of light along the top edge, inside the rim */
.svc-card::before,
.live-stat::before,
.pay-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  z-index: 5;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  pointer-events: none;
}

/* Blur only where the panel holds still. The review marquee, the orbiting
   category card and the package grids are all either animating every frame or
   repeated dozens of times, and re-sampling a backdrop for each of those is
   the one thing that would actually cost frames. They keep the translucency,
   which is free. */
@media (min-width: 1024px) {
  .live-stat,
  .pay-card {
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    backdrop-filter: blur(14px) saturate(115%);
  }
}

/* The service cards carry their own artwork, so they stay opaque
   enough to hold it - only the border and the shadow are shared. */
.svc-card {
  background: var(--glass-bg-strong);
}