:root, :host,
[data-bs-theme=light]  {
	--font-sans: 'quasimoda', 'sans-serif';
	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,	"Liberation Mono", "Courier New", monospace;
		
	--default-font-family: var(--font-sans);
	--default-mono-font-family: var(--font-mono);
	--font-quasimoda: 'quasimoda', 'sans-serif';
	--font-quasimoda2: 'quasimoda-2', 'sans-serif';

	--text-xs: 0.75rem;
	--text-xs--line-height: calc(1 / 0.75);
	--text-sm: 0.875rem;
	--text-sm--line-height: calc(1.25 / 0.875);
	--text-base: 1rem;
	--text-base--line-height: calc(1.5 / 1);
	--text-lg: 1.125rem;
	--text-lg--line-height: calc(1.75 / 1.125);
	--text-xl: 1.25rem;
	--text-xl--line-height: calc(1.75 / 1.25);
	--text-2xl: 1.5rem;
	--text-2xl--line-height: calc(2 / 1.5);
	--text-3xl: 1.875rem;
	--text-3xl--line-height: calc(2.25 / 1.875);
	--text-4xl: 2.25rem;
	--text-4xl--line-height: calc(2.5 / 2.25);
	--text-5xl: 3rem;
	--text-5xl--line-height: 1;
	--text-6xl: 3.75rem;
	--text-6xl--line-height: 1;
	--text-7xl: 4.5rem;
	--text-7xl--line-height: 1;
	--text-8xl: 6rem;
	--text-8xl--line-height: 1;
	--text-9xl: 8rem;
	--text-9xl--line-height: 1;
	
	--tracking-tighter: -0.05em;
	--tracking-tight: -0.025em;
	--tracking-normal: 0em;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;
	
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;
	
	--color-neon-orange: 255, 182, 42;
	--color-neon-yellow: 254, 255, 50;
	--color-neon-green: 186, 255, 1;
	--color-neon-blue: 0, 234, 255;
	--color-neon-pink: 255, 44, 203;
	
	--color-primary-50: oklch(97.65% 0.010 325.65);
	--color-primary-100: oklch(93.62% 0.027 325.79);
	--color-primary-200: oklch(86.82% 0.063 326.10);
	--color-primary-300: oklch(78.39% 0.089 326.38);
	--color-primary-400: oklch(69.07% 0.103 324.87);
	--color-primary-500: oklch(59.85% 0.106 324.39);
	--color-primary-600: oklch(50.82% 0.109 324.53);
	--color-primary-700: oklch(42.18% 0.118 324.29);
	--color-primary-800: oklch(34.49% 0.116 324.29);
	--color-primary-900: oklch(29.80% 0.143 319.92);
	--color-primary-950: oklch(21.44% 0.059 317.08);
	--color-primary-990: oklch(14.09% 0.068 317.69);
	
	--color-bright-50: oklch(97.31% 0.024 325.76);
	--color-bright-100: oklch(92.89% 0.057 325.12);
	--color-bright-200: oklch(86.00% 0.124 326.59);
	--color-bright-300: oklch(78.06% 0.174 327.43);
	--color-bright-400: oklch(68.99% 0.198 325.14);
	--color-bright-500: oklch(60.36% 0.198 324.91);
	--color-bright-600: oklch(51.95% 0.198 324.64);
	--color-bright-700: oklch(44.96% 0.197 324.32);
	--color-bright-800: oklch(38.55% 0.182 323.49);
	--color-bright-900: oklch(29.80% 0.143 319.92);
	--color-bright-950: oklch(21.62% 0.106 315.07);
		
  --bs-primary: #9f69a3;
  --bs-primary-rgb: 159, 105, 163;
  --bs-primary-text-emphasis: #9d30a6;
  --bs-primary-bg-subtle: #fcdbfd;
  --bs-primary-border-subtle: #fcb4fc;
	
	--bg-glass-rgba: 234, 198, 234, .25;
	--bg-glass-bright-rgba: 252, 180, 252, .25;
	
	--bg-bright-800-rgb: 110, 0, 121;
	--bg-bright-900-rgb: 74, 0, 88;
	
  --bs-link-color: #9d30a6;
  --bs-link-color-rgb: 157, 48, 166;
  --bs-link-hover-color: #6e0079;
  --bs-link-hover-color-rgb: 110, 0, 121;
	
	--bg-image: url('/user/themes/zone-2025/images/zone-bg-faded-lt.png');
	
}

[data-bs-theme=dark] {
  color-scheme: dark;
	
	--bs-body-bg: #000000;
	--bs-body-bg-rgb: 0, 0, 0;
	
  --bs-primary: #9f69a3;
  --bs-primary-rgb: 159, 105, 163;
  --bs-primary-text-emphasis: #f18cf0;
  --bs-primary-bg-subtle: #2b003a;
  --bs-primary-border-subtle: #4a0058;
	
	--bg-glass-rgba: 36, 15, 43, .75;
	--bg-glass-bright-rgba: 78, 0, 94, .75;
	
  --bs-link-color: #d668dd;
  --bs-link-color-rgb: 214, 104, 221;
  --bs-link-hover-color: #b94cc1;
  --bs-link-hover-color-rgb: 185, 76, 193;
	
	--bg-image: url('/user/themes/zone-2025/images/zone-bg-faded-dk.png');
	
}

.bg-glass{
	background-color: rgba(var(--bg-glass-rgba)) !important;
	backdrop-filter: blur(10px) saturate(150%);
}

.bg-glass-bright  {
	background-color: rgba(var(--bg-glass-bright-rgba)) !important;
	backdrop-filter: blur(10px) saturate(150%);
}


.font-quasimoda {
	font-family: Quasimoda !important;
}

.font-50 {
	font-family: Quasimoda-2 !important;
	--tw-font-weight: 400 !important;
	font-weight: 400 !important;
}
.font-100 {
	--tw-font-weight: 100 !important;
	font-weight: 100 !important;
}
.font-200 {
	--tw-font-weight: 200 !important;
	font-weight: 200 !important;
}
.font-300 {
	--tw-font-weight: 300 !important;
	font-weight: 300 !important;
}
.font-400 {
	--tw-font-weight: 400 !important;
	font-weight: 400 !important;
}
.font-500 {
	--tw-font-weight: 500 !important;
	font-weight: 500 !important;
}
.font-600 {
	--tw-font-weight: 600 !important;
	font-weight: 600 !important;
}
.font-700 {
	--tw-font-weight: 700 !important;
	font-weight: 700 !important;
}	
.font-800 {
	--tw-font-weight: 800 !important;
	font-weight: 800 !important;
}
.font-900 {
	--tw-font-weight: 900 !important;
	font-weight: 900 !important;
}
.font-950 {
	font-family: Quasimoda-2 !important;
	--tw-font-weight: 700 !important;
	font-weight: 700 !important;
}

.fs-xs {
	font-size: var(--text-xs) !important;
}
.fs-sm {
	font-size: var(--text-xs) !important;
}
.fs-md {
	font-size: var(--text-base) !important;
}
.fs-lg {
	font-size: var(--text-lg) !important;
}
.fs-xl {
	font-size: var(--text-xl) !important;
}
.fs-2xl {
	font-size: var(--text-2xl) !important;
}
.fs-3xl {
	font-size: var(--text-3xl) !important;
}


.border-neon-blue {
  --bs-bg-opacity: 1;
	border-color: rgba(var(--color-neon-blue), var(--bs-bg-opacity)) !important;	
}
.border-neon-green {
  --bs-bg-opacity: 1;
	border-color: rgba(var(--color-neon-green), var(--bs-bg-opacity)) !important;	
}
.border-neon-orange {
  --bs-bg-opacity: 1;
	border-color: rgba(var(--color-neon-orange), var(--bs-bg-opacity)) !important;	
}
.border-neon-pink {
  --bs-bg-opacity: 1;
	border-color: rgba(var(--color-neon-pink), var(--bs-bg-opacity)) !important;	
}
.border-neon-yellow {
  --bs-bg-opacity: 1;
	border-color: rgba(var(--color-neon-yellow), var(--bs-bg-opacity)) !important;	
}

.text-neon-blue {
  --bs-bg-opacity: 1;
	color: rgba(var(--color-neon-blue), var(--bs-bg-opacity)) !important;	
}
.text-neon-green {
  --bs-bg-opacity: 1;
	color: rgba(var(--color-neon-green), var(--bs-bg-opacity)) !important;	
}
.text-neon-orange {
  --bs-bg-opacity: 1;
	color: rgba(var(--color-neon-orange), var(--bs-bg-opacity)) !important;	
}
.text-neon-pink {
  --bs-bg-opacity: 1;
	color: rgba(var(--color-neon-pink), var(--bs-bg-opacity)) !important;	
}
.text-neon-yellow {
  --bs-bg-opacity: 1;
	color: rgba(var(--color-neon-yellow), var(--bs-bg-opacity)) !important;	
}

.bg-neon-blue {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--color-neon-blue), var(--bs-bg-opacity)) !important;	
}
.bg-neon-green {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--color-neon-green), var(--bs-bg-opacity)) !important;	
}
.bg-neon-orange {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--color-neon-orange), var(--bs-bg-opacity)) !important;	
}
.bg-neon-pink {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--color-neon-pink), var(--bs-bg-opacity)) !important;	
}
.bg-neon-yellow {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--color-neon-yellow), var(--bs-bg-opacity)) !important;	
}

.tracking-tight {
	--tw-tracking: var(--tracking-tight);
	letter-spacing: var(--tracking-tight);
}

.tracking-wide {
	--tw-tracking: var(--tracking-wide);
	letter-spacing: var(--tracking-wide);
}
.tracking-wider {
	--tw-tracking: var(--tracking-wider);
	letter-spacing: var(--tracking-wider);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-primary-800);
    --bs-btn-border-color: var(--color-primary-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-primary-700);
    --bs-btn-hover-border-color: var(--color-primary-600);
    --bs-btn-focus-shadow-rgb: var(--color-primary-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-primary-700);
    --bs-btn-active-border-color: var(--color-primary-600);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #785e79;
    --bs-btn-disabled-border-color: #785e79;
}

.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: rgba(var(--bs-body-bg-rgb), .25);
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;

    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: rgba(var(--bs-body-bg-rgb), .25);

    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(36, 15, 43, 0.25);
    --bs-accordion-active-color: var(--color-primary-200);
    --bs-accordion-active-bg: var(--color-primary-900);
		
}

accordion-button {
    color: var(--color-primary-100);
    background-color: transparent;
		font-size: 1.25em !important;
}

.accordion-button::after {
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.active>.page-link, .page-link.active {
    z-index: 3;
    color: var(--color-primary-200);
    background-color: var(--color-primary-900);
    border-color: var(--color-primary-800);
}

html, :host {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
	-webkit-tap-highlight-color: transparent;
}

body {
  padding-top: 150px;
}

body, .navbg {
	background-image: var(--bg-image);
	background-position: center;
	background-attachment: fixed;
}
.sidebar-sticky-offset {
  /* Override Bootstrap's default top: 0 */
  top: 180px; /* Set this to match your container's padding-top */

  /* --- Optional but Recommended: Height Constraint --- */
  /* If sidebar content might be taller than the viewport */
  /* Adjust '120px' and the '1rem' (bottom margin) as needed */
  /* max-height: calc(100vh - 120px - 1rem); */
  /* overflow-y: auto; */ /* Add scrollbar within sidebar if it overflows */
}

code, kbd, samp, pre {
font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
font-size: 1em;
}

.header-inner .header-block-flex {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.header-inner {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.header-inner,
.header-inner .header-block-flex,
.theme-colours {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.header-inner .header-block-flex {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.outofstock { position: relative }

.outofstock:after {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
  content: 'TEMPORARILY OUT OF STOCK';
	padding-top: 30px;
}

.table>:not(caption)>*>* {
    padding: .5rem .5rem;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
    background-color: transparent;
    border-bottom-width: var(--bs-border-width);
		border-color: var(--bs-primary);
}

.table {
  border-width: 1px 0px 0px 0px !important;
	border-color: var(--bs-primary) !important;
	border-style: solid !important;
}

@media (min-width: 768px) {

	 .navbar-collapse {
		 flex-grow: unset;
	 }
	 
	 .tagline {
		 font-size: 1.75em;
	 }
	 
	.gallery-grid {
		columns: 3 !important;
	}
 
  .header-inner .header-block,
  .header-inner .header-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.header-inner .header-divider {
  width: 20px;
  text-align: center;
  line-height: 1;
  height: 40px;
  position: relative;
  display: block;
}

.header-inner .header-divider.header-divider-sm {
  height: 10px;
  width: 15px;
}

.header-inner .header-divider.header-divider-lg {
  height: 60px;
  width: 30px;
}

.header-inner .header-divider:after {
  content: '';
  width: 1px;
  height: 100%;
  background: #dee2e6;
  display: inline-block;
  position: absolute;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
}

.header-upper {
  background: #495057;
  position: relative;
  padding: 2.5px 0;
  color: #e9ecef;
}

.header-upper .nav-link {
  color: #e9ecef;
}

.header-upper .nav-link:hover {
  color: #f8f9fa;
}

.header-upper .nav-link,
.header-upper .nav-item {
  line-height: 1;
}

.header-upper .nav-inline .nav-item+.nav-item,
.header-upper .nav-inline .nav-link+.nav-link {
  margin-left: 0;
  margin-right: 0.5rem;
}


.header {
  background: white;
  border-bottom: 1px solid #dee2e6;
  color: #343a40;
  height: auto;
  padding: 0 0 0 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  width: 100%;
  right: 0;
}

@media (max-width: 767.98px) {
  .header {
    padding: 15px 0;
  }
	
 .tagline {
	 font-size: 1.25em;
 }
}

	 
	.gallery-grid {
		columns: 1;
	}
	
.header .navbar {
  position: static;
}

.header .header-brand-text {
  font-weight: bold;
  font-family: "Rambla", sans-serif;
  padding: 0;
  margin: 0;
  display: block;
  border: none;
  text-shadow: none;
  line-height: 1;
  max-width: none;
  text-align: left;
  float: none;
  height: auto;
  text-decoration: none;
  letter-spacing: -0.5px;
  font-weight: 700;
}

.header .header-brand-text h1 {
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: "Rambla", sans-serif;
}

.header .header-brand-text h1 span {
  color: #464646;
  font-weight: 700;
}

.header .header-brand-text:hover {
  text-decoration: none;
}

.header .header-brand-text h1 {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 767.98px) {
  .header .header-brand-text {
    margin-top: 0;
  }

  .header .header-brand-text h1 {
    font-size: 28px;
  }
}

.header .header-brand-text.header-brand-text-sm h1 {
  font-size: 28px !important;
}

.header .header-slogan {
  color: #888;
}

.header .header-btn {
  margin-left: 3px;
}

.header .header-text {
  color: #888;
}

@media (max-width: 767.98px) {

  .header .header-btn,
  .header .cart-link {
    width: auto !important;
    margin-left: 12px;
  }
}


/* Color Modes */
.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

@media (min-width: 768px) {
	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}
}

.b-example-divider {
	width: 100%;
	height: 3rem;
	background-color: rgba(0, 0, 0, .1);
	border: solid rgba(0, 0, 0, .15);
	border-width: 1px 0;
	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
	flex-shrink: 0;
	width: 1.5rem;
	height: 100vh;
}

.bi {
	vertical-align: -.125em;
	fill: currentColor;
}

.nav-scroller {
	position: relative;
	z-index: 2;
	height: 2.75rem;
	overflow-y: hidden;
}

.nav-scroller .nav {
	display: flex;
	flex-wrap: nowrap;
	padding-bottom: 1rem;
	margin-top: -1px;
	overflow-x: auto;
	text-align: center;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
	--bd-violet-bg: #712cf9;
	--bd-violet-rgb: 112.520718, 44.062154, 249.437846;

	--bs-btn-font-weight: 600;
	--bs-btn-color: var(--bs-white);
	--bs-btn-bg: var(--bd-violet-bg);
	--bs-btn-border-color: var(--bd-violet-bg);
	--bs-btn-hover-color: var(--bs-white);
	--bs-btn-hover-bg: #6528e0;
	--bs-btn-hover-border-color: #6528e0;
	--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
	--bs-btn-active-color: var(--bs-btn-hover-color);
	--bs-btn-active-bg: #5a23c8;
	--bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
	z-index: 1500;
}

.bd-mode-toggle .bi {
	width: 1em;
	height: 1em;
}

.bd-mode-toggle .dropdown-menu .active .bi {
	display: block !important;
}

.img-grow {
  width: 100%; 
  height: auto;
  transition: transform 0.3s ease;
}

.img-grow:hover {
  transform: scale(1.2); 
}