.video-embed-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  margin-bottom: var(--video-margin-large, 32px);
  padding: var(--video-container-padding, 0);
}
.video-embed-container .mejs__container {
  border-radius: var(--video-border-radius, 0);
  box-shadow: var(--video-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  background: #000;
  aspect-ratio: 16/9;
  height: auto !important;
  position: relative;
}
.video-embed-container .mejs__container:focus {
  outline: 0;
}
.video-embed-container .mejs__mediaelement {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
.video-embed-container .mejs__mediaelement video,
.video-embed-container .mejs__mediaelement iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  object-fit: contain;
}
.video-embed-container .mejs__controls {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
}
.video-embed-container[data-video-type="vimeo"] .mejs__overlay-play {
  display: none !important;
}
.video-embed-container[data-video-type="twitch"]:not(.mejs__playing) .mejs__controls {
  display: none !important;
}
.video-embed-container[data-video-type="twitch"] .mejs__overlay-play {
  display: none !important;
}
.video-embed-container[data-video-type="twitch"] .mejs__overlay-button {
  display: none !important;
}
.video-embed-container[data-video-type="twitch"] .mejs__poster {
  display: none !important;
}
.video-embed-container.size-small .mejs__container {
  max-width: var(--video-size-small, 400px);
  width: 100%;
}
.video-embed-container.size-small .video-placeholder {
  max-width: var(--video-size-small, 400px);
  min-height: calc(var(--video-size-small, 400px) * 9 / 16);
}
.video-embed-container.size-medium .mejs__container {
  max-width: var(--video-size-medium, 640px);
  width: 100%;
}
.video-embed-container.size-medium .video-placeholder {
  max-width: var(--video-size-medium, 640px);
  min-height: calc(var(--video-size-medium, 640px) * 9 / 16);
}
.video-embed-container.size-large .mejs__container {
  max-width: var(--video-size-large, 960px);
  width: 100%;
}
.video-embed-container.size-large .video-placeholder {
  max-width: var(--video-size-large, 960px);
  min-height: calc(var(--video-size-large, 960px) * 9 / 16);
}
.video-embed-container.size-full-width .mejs__container {
  max-width: none;
  width: 100%;
}
.video-embed-container.size-full-width .video-placeholder {
  width: 100%;
  min-height: var(--video-placeholder-min-height, 200px);
}
.video-embed-container.border-rounded .mejs__container {
  border-radius: var(--video-rounded-radius, 16px);
}
@media (max-width: var(--video-mobile-breakpoint, 768px)) {
  .video-embed-container.size-small .mejs__container, .video-embed-container.size-medium .mejs__container, .video-embed-container.size-large .mejs__container {
    max-width: 100%;
    margin: 0 var(--video-mobile-padding, 16px);
  }
}

.video-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--video-placeholder-bg, #f8f9fa);
  color: var(--video-placeholder-color, #6c757d);
  border: 2px dashed var(--video-placeholder-border, #dee2e6);
  border-radius: var(--video-border-radius, 0);
  min-height: var(--video-placeholder-min-height, 200px);
  text-align: center;
  aspect-ratio: 16/9;
  margin: 0 auto;
}

.twitch-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  border: 0;
  border-radius: var(--video-border-radius, 0);
  color: rgba(255, 255, 255, 0.8);
  aspect-ratio: 16/9;
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
}
.twitch-placeholder .twitch-placeholder-content {
  text-align: center;
  padding: 2rem;
  width: 100%;
}
.twitch-placeholder .twitch-placeholder-icon {
  margin-bottom: 1rem;
  color: #9146ff;
}
.twitch-placeholder .twitch-placeholder-icon svg {
  display: block;
  margin: 0 auto;
}
.twitch-placeholder .twitch-placeholder-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}
.twitch-placeholder .twitch-placeholder-text p {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
.twitch-placeholder .twitch-placeholder-text small {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.video-embed-container.size-small .twitch-placeholder {
  max-width: var(--video-size-small, 400px) !important;
  min-height: auto !important;
  aspect-ratio: 16/9 !important;
  height: auto !important;
}
.video-embed-container.size-small .twitch-placeholder .twitch-placeholder-content {
  max-width: 320px !important;
}
.video-embed-container.size-medium .twitch-placeholder {
  max-width: var(--video-size-medium, 640px) !important;
  min-height: auto !important;
  aspect-ratio: 16/9 !important;
  height: auto !important;
}
.video-embed-container.size-medium .twitch-placeholder .twitch-placeholder-content {
  max-width: 320px !important;
}
.video-embed-container.size-large .twitch-placeholder {
  max-width: var(--video-size-large, 960px) !important;
  min-height: auto !important;
  aspect-ratio: 16/9 !important;
  height: auto !important;
}
.video-embed-container.size-large .twitch-placeholder .twitch-placeholder-content {
  max-width: none !important;
}
.video-embed-container.size-full-width {
  padding: 0 !important;
}
.video-embed-container.size-full-width .mejs__container {
  max-width: none;
  width: 100%;
}
.video-embed-container.size-full-width .video-placeholder {
  width: 100%;
  max-width: none;
}
.video-embed-container.size-full-width .twitch-placeholder {
  width: 100% !important;
  max-width: none !important;
  min-height: auto !important;
  aspect-ratio: 16/9 !important;
  height: auto !important;
}

.video-embed-container.size-full-width .twitch-placeholder .twitch-placeholder-content {
  max-width: none !important;
  width: 100% !important;
}
.video-embed-container.size-full-width .twitch-placeholder .twitch-placeholder-content.border-rounded .twitch-placeholder {
  border-radius: var(--video-rounded-radius, 16px) !important;
}
.mejs__offscreen{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}.mejs__container{background:#000;font-family:Helvetica,Arial,serif;position:relative;text-align:left;text-indent:0;vertical-align:top}.mejs__container,.mejs__container *{box-sizing:border-box}.mejs__container video::-webkit-media-controls,.mejs__container video::-webkit-media-controls-panel,.mejs__container video::-webkit-media-controls-panel-container,.mejs__container video::-webkit-media-controls-start-playback-button{-webkit-appearance:none;display:none!important}.mejs__fill-container,.mejs__fill-container .mejs__container{height:100%;width:100%}.mejs__fill-container{background:transparent;margin:0 auto;overflow:hidden;position:relative}.mejs__container:focus{outline-offset:.125rem;outline-style:solid;outline-width:.125rem}.mejs__iframe-overlay{height:100%;position:absolute;width:100%}.mejs__embed,.mejs__embed body{background:#000;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.mejs__fullscreen{overflow:hidden!important}.mejs__container-fullscreen{bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:1000}.mejs__background,.mejs__mediaelement{left:0;position:absolute;top:0}.mejs__mediaelement{height:100%;width:100%;z-index:0}.mejs__poster{background-position:50% 50%;background-repeat:no-repeat;background-size:cover;left:0;position:absolute;top:0;z-index:1}:root .mejs__poster-img{display:none}.mejs__poster-img{border:0;padding:0}.mejs__overlay{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;position:absolute;top:0}.mejs__layer{z-index:1}.mejs__overlay-play{cursor:pointer}.mejs__overlay-button{background:transparent;border:0}.mejs__overlay:hover .mejs__overlay-button svg{opacity:1}.mejs__overlay-button svg{opacity:.75}.mejs__overlay-button:focus svg{opacity:1}.mejs__overlay-button,.mejs__overlay-button svg,.mejs__overlay-loading,.mejs__overlay-loading svg{height:5rem;width:5rem}.mejs__overlay-loading-bg-img{-webkit-animation:a 1s linear infinite;animation:a 1s linear infinite;display:block;height:5rem;width:5rem;z-index:1}@-webkit-keyframes a{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes a{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.mejs__controls{bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:2.5rem;left:0;list-style-type:none;margin:0;padding:0 .625rem;position:absolute;width:100%;z-index:3}.mejs__controls:not([style*="display: none"]){background:rgba(255,0,0,.7);background:-webkit-linear-gradient(transparent,rgba(0,0,0,.35));background:linear-gradient(transparent,rgba(0,0,0,.35))}.mejs__button,.mejs__time,.mejs__time-rail{font-size:.625rem;height:2.5rem;line-height:.625rem;margin:0;width:2rem}.mejs__button>button{background-color:transparent;border:0;color:#fff;cursor:pointer;display:block;font-size:0;height:1.125rem;line-height:0;margin:.625rem .375rem;overflow:hidden;padding:0;position:absolute;text-decoration:none;width:1.125rem}.mejs__button svg{fill:currentColor;height:1.125rem;width:1.125rem}.mejs__button>button:focus{outline:.125rem dotted #fff}.mejs__container-keyboard-inactive [role=slider],.mejs__container-keyboard-inactive [role=slider]:focus,.mejs__container-keyboard-inactive a,.mejs__container-keyboard-inactive a:focus,.mejs__container-keyboard-inactive button,.mejs__container-keyboard-inactive button:focus{outline:0}.mejs__playpause-button svg{display:none}.mejs__pause svg.mejs__icon-pause,.mejs__play svg.mejs__icon-play,.mejs__replay svg.mejs__icon-replay{display:block}.mejs__fullscreen-button svg.mejs__icon-unfullscreen{display:none}.mejs__fullscreen svg.mejs__icon-fullscreen{display:block}.mejs__fullscreen svg.mejs__icon-unfullscreen{display:none}.mejs__unfullscreen svg.mejs__icon-unfullscreen{display:block}.mejs__unfullscreen svg.mejs__icon-fullscreen{display:none}.mejs__time{box-sizing:content-box;color:#fff;font-size:.6875rem;font-weight:700;height:1.5rem;overflow:hidden;padding:1rem .375rem 0;text-align:center;width:auto}.mejs__time-rail{direction:ltr;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;height:2.5rem;margin:0 .625rem;padding-top:.625rem;position:relative}.mejs__time-buffering,.mejs__time-current,.mejs__time-float,.mejs__time-float-corner,.mejs__time-float-current,.mejs__time-hovered,.mejs__time-loaded,.mejs__time-marker,.mejs__time-total{border-radius:.125rem;cursor:pointer;display:block;height:.625rem;position:absolute}.mejs__time-total{background:hsla(0,0%,100%,.3);margin:.3125rem 0 0;width:100%}.mejs__time-buffering{-webkit-animation:b 2s linear infinite;animation:b 2s linear infinite;background:-webkit-linear-gradient(135deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent);background:linear-gradient(-45deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent);background-size:.9375rem .9375rem;width:100%}@-webkit-keyframes b{0%{background-position:0 0}to{background-position:1.875rem 0}}@keyframes b{0%{background-position:0 0}to{background-position:1.875rem 0}}.mejs__time-loaded{background:hsla(0,0%,100%,.3)}.mejs__time-current,.mejs__time-handle-content{background:hsla(0,0%,100%,.9)}.mejs__time-hovered{background:hsla(0,0%,100%,.5);z-index:10}.mejs__time-hovered.negative{background:rgba(0,0,0,.2)}.mejs__time-buffering,.mejs__time-current,.mejs__time-hovered,.mejs__time-loaded{left:0;-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transition:all .15s ease-in;transition:all .15s ease-in;width:100%}.mejs__time-buffering{-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}.mejs__time-hovered{-webkit-transition:height .1s cubic-bezier(.44,0,1,1);transition:height .1s cubic-bezier(.44,0,1,1)}.mejs__time-hovered.no-hover{-webkit-transform:scaleX(0)!important;-ms-transform:scaleX(0)!important;transform:scaleX(0)!important}.mejs__time-handle,.mejs__time-handle-content{border:.25rem solid transparent;cursor:pointer;left:0;position:absolute;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);z-index:11}.mejs__time-handle-content{border:.25rem solid hsla(0,0%,100%,.9);border-radius:50%;height:.625rem;left:-.4375rem;top:-.25rem;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);width:.625rem}.mejs__time-rail .mejs__time-handle-content:active,.mejs__time-rail .mejs__time-handle-content:focus,.mejs__time-rail:hover .mejs__time-handle-content{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.mejs__time-float{background:#eee;border:1px solid #333;bottom:100%;color:#111;display:none;height:1.0625rem;margin-bottom:.5625rem;position:absolute;text-align:center;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:2.25rem}.mejs__time-float-current{display:block;left:0;margin:.125rem;text-align:center;width:1.875rem}.mejs__time-float-corner{border:.3125rem solid #eee;border-color:#eee transparent transparent;border-radius:0;display:block;height:0;left:50%;line-height:0;position:absolute;top:100%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:0}.mejs__long-video .mejs__time-float{margin-left:-1.4375rem;width:4rem}.mejs__long-video .mejs__time-float-current{width:3.75rem}.mejs__broadcast{color:#fff;height:.625rem;position:absolute;top:.9375rem;width:100%}.mejs__volume-button{position:relative}.mejs__volume-button>.mejs__volume-slider{-webkit-backface-visibility:hidden;background:rgba(50,50,50,.7);border-radius:0;bottom:100%;display:none;height:7.1875rem;left:50%;margin:0;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:1.5625rem;z-index:1}.mejs__volume-button:hover{border-radius:0 0 .25rem .25rem}.mejs__volume-total{background:hsla(0,0%,100%,.5);border:.06rem solid #fff;height:6.25rem;left:50%;margin:0;position:absolute;top:.5rem;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:.125rem}.mejs__volume-current{left:0;margin:0;width:100%}.mejs__volume-current,.mejs__volume-handle{background:hsla(0,0%,100%,.9);position:absolute}.mejs__volume-handle{border:1px solid #fff;border-radius:1px;cursor:ns-resize;height:.375rem;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:1rem}.mejs__horizontal-volume-slider{display:block;height:2.25rem;position:relative;vertical-align:middle;width:3.5rem}.mejs__horizontal-volume-total{background:rgba(50,50,50,.8);border:.06rem solid #fff;border-radius:.125rem;font-size:1px;height:.5rem;left:0;margin:0;padding:0;position:absolute;top:1rem;width:3.125rem}.mejs__horizontal-volume-current{background:hsla(0,0%,100%,.8);border-radius:.125rem;border-right:.06rem solid #fff;font-size:1px;height:100%;left:0;margin:0;padding:0;position:absolute;top:0;width:100%}.mejs__horizontal-volume-handle{display:none}.mejs__mute svg,.mejs__unmute svg{stroke:currentColor}.mejs__volume-button svg{display:none}.mejs__mute .mejs__icon-mute,.mejs__unmute .mejs__icon-unmute{display:block}.mejs__captions-button,.mejs__chapters-button{position:relative}.mejs__captions-button svg,.mejs__chapters-button svg{padding-top:.125rem}.mejs__captions-button>.mejs__captions-selector,.mejs__chapters-button>.mejs__chapters-selector{background:rgba(50,50,50,.7);border:1px solid transparent;border-radius:0;bottom:100%;margin-right:-2.6875rem;overflow:hidden;padding:0;position:absolute;right:50%;visibility:visible;width:5.375rem}.mejs__captions-button-toggle{opacity:.7}.mejs__captions-button-toggle-on{opacity:1}.mejs__chapters-button>.mejs__chapters-selector{margin-right:-3.4375rem;width:6.875rem}.mejs__captions-selector-list,.mejs__chapters-selector-list{list-style-type:none!important;margin:0;overflow:hidden;padding:0}.mejs__captions-selector-list-item,.mejs__chapters-selector-list-item{color:#fff;cursor:pointer;display:block;list-style-type:none!important;margin:0 0 .375rem;overflow:hidden;padding:0}.mejs__captions-selector-list-item:hover,.mejs__chapters-selector-list-item:hover{background-color:#c8c8c8!important;background-color:hsla(0,0%,100%,.4)!important}.mejs__captions-selector-input,.mejs__chapters-selector-input{clear:both;float:left;left:-62.5rem;margin:.1875rem .1875rem 0 .3125rem;position:absolute}.mejs__captions-selector-label,.mejs__chapters-selector-label{cursor:pointer;float:left;font-size:.625rem;line-height:.9375rem;padding:.25rem .625rem 0;width:100%}.mejs__captions-selector-list-item:hover .mejs__captions-selector-label,.mejs__chapters-selector-list-item:hover .mejs__chapters-selector-label{text-decoration:underline}.mejs__captions-selected,.mejs__chapters-selected{color:#21f8f8;font-weight:700}.mejs__captions-translations{font-size:.625rem;margin:0 0 .3125rem}.mejs__captions-layer{bottom:0;color:#fff;font-size:1rem;left:0;line-height:1.25rem;position:absolute;text-align:center}.mejs__captions-layer a{color:#fff;text-decoration:underline}.mejs__captions-layer[lang=ar]{font-size:1.25rem;font-weight:400}.mejs__captions-position{bottom:.9375rem;left:0;position:absolute;width:100%}.mejs__captions-position-hover{bottom:2.1875rem}.mejs__captions-text,.mejs__captions-text *{background:hsla(0,0%,8%,.5);box-shadow:.3125rem 0 0 hsla(0,0%,8%,.5),-.3125rem 0 0 hsla(0,0%,8%,.5);padding:0;white-space:pre-wrap}.mejs__container.mejs__hide-cues video::-webkit-media-text-track-container{display:none}.mejs__overlay-error{position:relative}.mejs__overlay-error>img{left:0;max-width:100%;position:absolute;top:0;z-index:-1}.mejs__cannotplay,.mejs__cannotplay a{color:#fff;font-size:.8em}.mejs__cannotplay{position:relative}.mejs__cannotplay a,.mejs__cannotplay p{display:inline-block;padding:0 .9375rem;width:100%}
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */


.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  

  --pswp-root-z-index: 100000;
  
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-text-color: var(--pswp-icon-color);
}


/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/

.pswp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--pswp-root-z-index);
	display: none;
	touch-action: none;
	outline: 0;
	opacity: 0.003;
	contain: layout style size;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */
.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
	display: block;
}

.pswp,
.pswp__bg {
	transform: translateZ(0);
	will-change: opacity;
}

.pswp__bg {
  opacity: 0.005;
	background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
	overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
	width: auto;
	height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
}


/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pswp__item {
	/* z-index for fade transition */
	z-index: 1;
	overflow: hidden;
}

.pswp__hidden {
	display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
  pointer-events: none;
}
.pswp__content > * {
  pointer-events: auto;
}


/*

  PhotoSwipe UI

*/

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
  display: grid;
}
.pswp__error-msg {
	margin: auto;
	font-size: 1em;
	line-height: 1;
	color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
.pswp .pswp__hide-on-close {
	opacity: 0.005;
	will-change: opacity;
	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
	z-index: 10; /* always overlap slide content */
	pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
	opacity: 1;
	pointer-events: auto;
}

/* <button> styles, including css reset */
.pswp__button {
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 0.85;
	-webkit-appearance: none;
	-webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}

.pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

.pswp__icn:focus {
	outline: 0;
}

/*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/
div.pswp__img--placeholder,
.pswp__img--with-bg {
	background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
  flex-direction: row;
  justify-content: flex-end;
	z-index: 10;

	/* allow events to pass through top bar itself */
	pointer-events: none !important;
}
.pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}


/*

  Close button

*/
.pswp__button--close {
  margin-right: 6px;
}


/*

  Arrow buttons

*/
.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

.pswp__button--arrow--next {
  right: 0px;
}
.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/*

  Zoom button

*/
.pswp__button--zoom {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}


/*

  Loading indicator

*/
.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

.pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}

@keyframes pswp-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*

  "1 of 10" counter

*/
.pswp__counter {
  height: 30px;
  margin-top: 15px;
  margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}

.pswp--one-slide .pswp__counter {
  display: none;
}
.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg, iframe, embed, audio {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: var(--border-radius);
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-break: break-word;
}

ol, ul {
  list-style: none;
}

a {
  cursor: pointer;
  text-underline-offset: 4px;
}

:root {
  --background-color: #F8F3EE;
  --primary-heading-text-color: #2C2029;
  --primary-text-color: #2C2029;
  --secondary-text-color: #6E6169;
  --border-color: #2C2029;
  --footer-border-color: rgba(var(--primary-text-color-rgb), .4);
  --welcome-background-color: #EFE3E9;
  --welcome-text-color: #2C2029;
  --logo-max-height: 60;
  --button-text-color: var(--background-color);
  --button-background-color: var(--primary-text-color);
  --button-hover-background-color: rgba(var(--primary-text-color-rgb), .8);
  --badge-text-color-primary: #FEFAF7;
  --badge-background-color-primary: #6E4160;
  --badge-text-color-secondary: #2C2029;
  --badge-background-color-secondary: #EFE3E9;
  --inventory-status-text-color: #875D78;
  --announcement-background-color: #6E4160;
  --announcement-text-color: #FBF3F7;
  --announcement-scroll-duration: 15s;
  --primary-font: "Libre Baskerville", serif;
  --secondary-font: "Source Sans Pro", sans-serif;
  --error-background-color: #950f1e;
  --error-text-color: #FFFFFF;
  --border-radius: 4px;
  --border-radius-sm: 2px;
  --spacing-unit: 16px;
  --padding-size: 40px;
  --header-height: 108px;
  --header-height-mobile: 140px;
  --font-scale: 1;
  --shop-name-scale: 1;
  --product-grid-scale: 1;
  --product-title-scale: 1;
  --product-description-scale: 1;
  --header-scale: 1;
  --footer-scale: 1;
  --shop-sprinkles-size: 2em;
  --shop-sprinkles-animation: shake;
  --shop-sprinkles-style-duration: 4.6s;
  --shop-sprinkles-style-timing: cubic-bezier(0.33,0.65,0.45,1);
  --shop-sprinkles-fall-duration: 10.8s;
  --shop-sprinkles-spin-animation: none;
  --shop-sprinkles-density: 14;
  --video-rounded-radius: var(--border-radius);
  --video-margin-small: var(--spacing-unit);
  --video-margin-large: calc(var(--spacing-unit) * 2);
  --video-size-large: 100%;
}
@media screen and (max-width: 668px) {
  :root {
    --padding-size: 20px;
  }
}

html {
  min-height: 100%;
  position: relative;
  font-size: calc(16px * var(--font-scale, 1));
}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  color: var(--primary-text-color);
  font-family: var(--secondary-font);
  font-size: 1rem;
  line-height: 1.5;
  height: 100%;
  min-height: 100vh;
}
body.overlay-open {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  overscroll-behavior: none;
}

.emoji {
  font-size: var(--shop-sprinkles-size) !important;
  animation-name: var(--shop-sprinkles-animation) !important;
  animation-duration: var(--shop-sprinkles-style-duration) !important;
  animation-timing-function: var(--shop-sprinkles-style-timing) !important;
}

.emoji .inner {
  animation-duration: var(--shop-sprinkles-fall-duration) !important;
}

.emoji .inner span {
  animation-name: var(--shop-sprinkles-spin-animation) !important;
}

a.skip-link {
  transition: all 0.3s;
  background: var(--background-color);
  border: 1px solid var(--primary-text-color);
  color: var(--primary-text-color);
  left: 25px;
  padding: 15px 20px;
  position: absolute;
  text-decoration: underline;
  top: -150px;
  z-index: 100;
}
a.skip-link:focus {
  top: 20px;
}

a, a:visited {
  color: var(--primary-text-color);
  text-decoration: none;
  transition: color 0.2s linear;
}
a:hover, a:visited:hover {
  text-decoration: underline;
  color: var(--secondary-text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-family: var(--primary-font);
  margin: 0;
  padding: 0;
  text-align: left;
}

.errors {
  border-radius: var(--border-radius);
  padding: 16px;
  list-style: none;
  margin: 0 0 40px;
  text-align: center;
  background-color: var(--error-background-color);
  color: var(--error-text-color);
}

.wrapper {
  margin: 0 auto;
  padding: 0 var(--padding-size);
  position: relative;
  width: 100%;
  max-width: 1300px;
}

header {
  background: var(--background-color);
  padding: 36px 0;
  width: 100%;
  z-index: 10;
}
header .wrapper {
  display: grid;
  grid-template-columns: 0.75fr 2.5fr 0.75fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 5;
  column-gap: 16px;
}
@media screen and (max-width: 668px) {
  header .wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 16px;
  }
}
header .header-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  left: -4px;
  font-size: calc(1.1rem * var(--header-scale, 1));
  position: relative;
  text-align: left;
  gap: 20px;
}
@media screen and (max-width: 668px) {
  header .header-nav {
    grid-column: 1;
    grid-row: 1;
  }
}
header .header-nav * {
  text-transform: initial;
}
header .header-nav .menu-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-text-color);
  padding: 0;
  height: 36px;
  position: relative;
  width: 36px;
  transition: color 0.2s linear;
}
header .header-nav .menu-bars:hover {
  color: var(--secondary-text-color);
}
header .header-nav .menu-bars svg {
  fill: currentColor;
  height: 22px;
  width: 22px;
}
header .header-nav .open-category-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s linear;
  outline-offset: 4px;
}
header .header-nav .open-category-nav:hover {
  color: var(--secondary-text-color);
}
header .header-nav .header-category-nav {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 800px) {
  header .header-nav .header-category-nav {
    display: none;
  }
}
header .header-nav .category-nav-arrow {
  flex-shrink: 0;
  fill: currentColor;
  height: 11px;
  width: 15px;
}
header .header-nav .category-dropdown {
  background: var(--background-color);
  transition: opacity 0.2s linear;
  border-radius: var(--border-radius);
  border: 1px solid var(--primary-text-color);
  left: -23px;
  margin: 0 auto;
  min-width: 250px;
  opacity: 0;
  overflow-y: scroll;
  padding: 15px;
  position: absolute;
  text-align: left;
  visibility: hidden;
  max-height: 500px;
  z-index: 3;
  top: calc(100% + 10px);
  scrollbar-width: thin;
  scrollbar-color: var(--primary-text-color) transparent;
  scrollbar-gutter: stable;
}
header .header-nav .category-dropdown[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}
header .header-nav .category-dropdown::-webkit-scrollbar {
  height: 0.375rem;
  width: 0.75rem;
}
header .header-nav .category-dropdown::-webkit-scrollbar-track {
  background-color: transparent;
}
header .header-nav .category-dropdown::-webkit-scrollbar-thumb {
  border-radius: 0.375rem;
  border: 3px solid transparent;
  background-color: var(--primary-text-color);
  background-clip: content-box;
}
header .header-nav .category-dropdown .dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 4;
}
header .header-nav .category-dropdown .dropdown-list li {
  display: block;
}
header .header-nav .category-dropdown .dropdown-list li a {
  display: block;
  font-size: calc(.95rem * var(--header-scale, 1));
  padding: 8px 10px;
}
header .header-nav .category-dropdown .dropdown-list li a:hover {
  text-decoration: underline;
}
header .store-name {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(2.5rem * var(--shop-name-scale, 1) * var(--header-scale, 1));
  height: 100%;
  text-align: center;
  padding: 0 16px;
  word-break: break-word;
}
@media screen and (max-width: 800px) {
  header .store-name {
    font-size: calc(2rem * var(--shop-name-scale, 1) * var(--header-scale, 1));
  }
}
@media screen and (max-width: 668px) {
  header .store-name {
    font-size: calc(1.7rem * var(--shop-name-scale, 1) * var(--header-scale, 1));
    grid-column: 1/-1;
    grid-row: 2;
    padding: 0;
    height: auto;
  }
}
header .store-name.image {
  display: flex;
  align-items: center;
  justify-content: center;
}
header .store-name.image .store-link {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
header .store-name.image img {
  display: block;
  margin: 0 auto;
  height: calc(var(--logo-max-height) * 1px);
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
@media screen and (max-width: 800px) {
  header .store-name.image img {
    height: calc(var(--logo-max-height) * 0.75 * 1px);
  }
}
@media screen and (max-width: 668px) {
  header .store-name.image img {
    height: calc(var(--logo-max-height) * 0.65 * 1px);
  }
}
header .store-name .store-link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--primary-font);
}
header .header-cart {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  text-align: right;
  column-gap: 16px;
  right: -4px;
}
header .header-cart .cart-link, header .header-cart .open-search {
  border-radius: var(--border-radius);
}
header .header-cart .cart-link:hover, header .header-cart .open-search:hover {
  color: var(--secondary-text-color);
}
@media screen and (max-width: 668px) {
  header .header-cart {
    column-gap: 8px;
    right: -8px;
    grid-column: 2;
    grid-row: 1;
  }
}
header .header-cart .cart-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  position: relative;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.2s linear;
}
header .header-cart .cart-link svg {
  fill: currentColor;
}
header .header-cart .cart-link:hover {
  color: var(--secondary-text-color);
}
header .header-cart .cart-link .cart-num-items {
  font-size: 0.75rem;
  position: absolute;
  top: 12px;
}
header .header-cart svg {
  fill: var(--primary-text-color);
  height: 30px;
  width: 30px;
}
@media screen and (max-width: 668px) {
  header .header-cart svg {
    height: 26px;
    width: 26px;
  }
}
header .header-cart .open-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
header .header-cart .open-search svg {
  height: 22px;
  position: relative;
  fill: currentColor;
  top: 2px;
  width: 22px;
}
@media screen and (max-width: 668px) {
  header .header-cart .open-search svg {
    height: 20px;
    width: 20px;
  }
}

.content {
  flex: 1;
  padding: 48px 0 120px;
}
@media screen and (max-width: 800px) {
  .content {
    padding-top: 40px;
    padding-bottom: 80px;
  }
}
@media screen and (max-width: 668px) {
  .content {
    padding-top: 20px;
    padding-bottom: 150px;
  }
}
.content h1 {
  font-size: 1.8rem;
  margin-bottom: 60px;
  text-align: center;
}
@media screen and (max-width: 800px) {
  .content h1 {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 668px) {
  .content h1 {
    font-size: 1.25rem;
    margin-bottom: 40px;
  }
}
.content.product .wrapper {
  max-width: 1200px;
}
.content.custom .wrapper {
  max-width: calc(800px + var(--padding-size));
}
.content.custom .custom-page-content {
  font-family: var(--secondary-font);
}
.content.custom .custom-page-content p {
  margin: revert;
}
.content.custom .custom-page-content > :first-child {
  margin-top: 0;
}
.content.custom .custom-page-content > :last-child {
  margin-bottom: 0;
}
.content.custom .custom-page-content ol, .content.custom .custom-page-content ul {
  padding-left: 1.5em;
  margin: 1em 0;
}
.content.custom .custom-page-content ol ol, .content.custom .custom-page-content ol ul, .content.custom .custom-page-content ul ol, .content.custom .custom-page-content ul ul {
  margin: 0.5em 0;
}
.content.custom .custom-page-content ul {
  list-style: disc;
}
.content.custom .custom-page-content ol {
  list-style: decimal;
}
.content.custom .custom-page-content a {
  text-decoration: underline;
}
.content.custom .custom-page-content img {
  dislay: inline-block;
  margin: 0 auto;
  max-width: 100%;
  margin-bottom: 16px;
}
.content.custom .custom-page-content iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  margin-bottom: 16px;
}
.content .page-title, .content .page-header {
  color: var(--primary-heading-text-color);
  margin: 40px 0 20px;
}
.content.page-contact .wrapper {
  max-width: calc(760px + var(--padding-size));
}
.content.page-cart .wrapper {
  max-width: calc(880px + var(--padding-size));
}

footer *:not(.footer-custom-content) {
  text-transform: initial;
}
footer .wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  margin: 0 auto;
  padding: 40px 40px;
  border-top: 1px solid var(--footer-border-color);
  font-size: calc(1.125rem * var(--footer-scale, 1));
}
@media screen and (max-width: 800px) {
  footer .wrapper {
    font-size: calc(1rem * var(--footer-scale, 1));
  }
}

.footer__pages {
  width: 100%;
  display: flex;
  column-gap: 30px;
  flex-wrap: wrap;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  row-gap: 6px;
}
@media screen and (max-width: 500px) {
  .footer__pages {
    flex-direction: column;
    text-align: center;
  }
}
.footer__pages a {
  display: block;
  padding: 2px;
}
.footer__pages a:hover {
  text-decoration: underline;
}

.footer-custom-content {
  display: block;
  text-align: center;
  padding: 10px 10px 20px 10px;
  font-size: calc(1rem * var(--footer-scale, 1));
}
.footer-custom-content img {
  display: block;
  margin: 20px auto;
}
.footer-custom-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.social-icons {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (max-width: 668px) {
  .social-icons {
    gap: 16px;
  }
}
.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}
.social-icons a svg {
  fill: currentColor;
  height: 20px;
  width: 20px;
}
.social-icons a svg.tumblr-icon {
  width: 14px;
}
.social-icons a svg.reddit-icon, .social-icons a svg.discord-icon {
  width: 24px;
  height: 24px;
}

.bigcartel-credit {
  line-height: 1em;
  font-size: 0.975rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  outline-offset: 4px;
  padding: 2px 0;
  text-decoration: none;
}
.bigcartel-credit:hover {
  text-decoration: none;
}
.bigcartel-credit__text {
  position: relative;
}
.bigcartel-credit__lockup {
  display: block;
  fill: currentColor;
  padding-top: 1px;
  width: 80px;
}

.select {
  border-radius: var(--border-radius);
  border: 1px solid var(--primary-text-color);
  font-family: var(--secondary-font);
  height: 60px;
  padding: 0;
  position: relative;
  width: 100%;
}
.select select {
  height: 100%;
  padding: 0 50px 0 20px;
  position: relative;
  width: 100%;
  z-index: 2;
}
.select select option {
  background-color: #FFF;
  color: #000;
}
.select select option:disabled {
  color: graytext;
}
.select select:focus {
  box-shadow: none;
}
.select select::-ms-expand {
  display: none;
}
.select svg {
  fill: currentColor;
  pointer-events: none;
  height: 8px;
  margin-top: -2px;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 13px;
  z-index: 1;
}

.button, a.button {
  transition: background 0.2s linear;
  background: var(--button-background-color);
  border-radius: var(--border-radius);
  color: var(--button-text-color);
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 275px;
  padding: 20px;
  text-align: center;
  white-space: pre-wrap;
  width: 100%;
}
.button.minimal-button, a.button.minimal-button {
  background: none;
  color: var(--primary-text-color);
  border: none;
  height: auto;
  min-height: 0;
  text-decoration: none;
  transition: color 0.2s linear;
  text-underline-offset: 4px;
}
.button.minimal-button:not(:disabled):hover, .button.minimal-button:not(:disabled):active, a.button.minimal-button:not(:disabled):hover, a.button.minimal-button:not(:disabled):active {
  text-decoration: underline;
  box-shadow: none;
  background: none;
  color: var(--secondary-text-color);
  opacity: 1;
}
.button:disabled, .button.disabled, a.button:disabled, a.button.disabled {
  cursor: not-allowed;
}
.button.centered-button, a.button.centered-button {
  margin: 60px auto;
}
.button:not(:disabled):hover, .button:not(:disabled):active, a.button:not(:disabled):hover, a.button:not(:disabled):active {
  background: var(--button-hover-background-color);
  color: var(--button-text-color);
}

input, textarea {
  border-radius: var(--border-radius);
  background: var(--background-color);
  border: 1px solid var(--primary-text-color);
  color: var(--primary-text-color);
  font-family: var(--secondary-font);
  max-width: 100%;
  padding: 14px;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.message-banner {
  padding: 16px;
  margin: 0 auto 32px;
  text-align: center;
  width: 100%;
  max-width: 760px;
}
.message-banner--centered {
  text-align: center;
}
.message-banner--no-bg {
  color: var(--primary-text-color);
  background: none;
  padding: 0;
}

.announcement-message {
  align-items: center;
  background-color: var(--announcement-background-color);
  color: var(--announcement-text-color);
  display: none;
  font-size: calc(1.1rem * var(--header-scale, 1));
  justify-content: center;
  line-height: 1.25em;
  padding: 22px 96px;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 500;
}
.announcement-message a, .announcement-message a:visited {
  color: var(--announcement-text-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media screen and (max-width: 668px) {
  .announcement-message {
    padding: 14px 64px;
  }
}
.announcement-message.visible {
  display: flex;
}
.announcement-message__close-button {
  align-items: center;
  color: var(--announcement-text-color);
  display: flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
}
@media screen and (max-width: 668px) {
  .announcement-message__close-button {
    right: 16px;
  }
}
.announcement-message__close-icon {
  height: 14px;
  width: 14px;
}
.announcement-message__text {
  display: inline-flex;
}
.announcement-message--scrolling {
  cursor: pointer;
  padding: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .announcement-message--scrolling:hover .announcement-message__scroll-content {
    animation-play-state: paused;
  }
}
.announcement-message--scrolling:focus-visible .announcement-message__scroll-content {
  animation-play-state: paused;
}
.announcement-message--scrolling.is-paused .announcement-message__scroll-content {
  animation-play-state: paused;
}
.announcement-message--scrolling .announcement-message__text {
  padding: 0 96px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media screen and (max-width: 668px) {
  .announcement-message--scrolling .announcement-message__text {
    padding: 0 64px;
  }
}
.announcement-message__scroll-wrapper {
  padding: 22px 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}
@media screen and (max-width: 668px) {
  .announcement-message__scroll-wrapper {
    padding: 14px 0;
  }
}
.announcement-message__scroll-content {
  display: inline-flex;
  white-space: nowrap;
  animation: scroll-announcement var(--announcement-scroll-duration) linear infinite;
  contain: layout style;
}

@keyframes scroll-announcement {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(var(--scroll-distance, -20%), 0, 0);
  }
}
.cart-container {
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}
@media screen and (max-width: 668px) {
  .cart-container {
    max-width: 100%;
  }
}

.cart-empty {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
  align-items: center;
  margin: 0 auto;
  width: 100%;
}

.cart-columns {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 1fr;
  column-gap: 64px;
}
@media screen and (max-width: 945px) {
  .cart-columns {
    grid-template-columns: 1fr;
  }
}

.cart-header {
  display: grid;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.cart-header .page-title {
  margin-bottom: 0;
}

.copy-cart-link {
  margin-left: auto;
}

.cart-items {
  border-bottom: 1px solid var(--border-color);
}

.cart-item {
  display: grid;
  grid-template-columns: auto 1fr 148px auto;
  justify-content: flex-start;
  align-items: flex-start;
  border-top: 1px solid var(--border-color);
  padding: 24px 0;
  gap: 16px;
}
@media (max-width: 945px) {
  .cart-item {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: repeat(2, auto);
  }
}
@media screen and (max-width: 945px) {
  .cart-item .cart-item-image-holder {
    grid-area: 1/1/3/2;
  }
}
.cart-item .cart-item-image-link {
  display: block;
  height: 90px;
  overflow: hidden;
  width: 90px;
}
@media screen and (max-width: 945px) {
  .cart-item .cart-item-image-link {
    height: 64px;
    width: 64px;
  }
}
.cart-item .cart-item-image-link img {
  border-radius: var(--border-radius);
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.cart-item .cart-item-detail {
  padding-right: 24px;
}
@media (max-width: 945px) {
  .cart-item .cart-item-detail {
    grid-area: 1/2/2/3;
    padding-right: 0;
  }
}
.cart-item .product-name {
  font-size: 1.2rem;
  word-break: break-word;
}
.cart-item .option-name {
  font-size: 1rem;
  margin-top: 4px;
}
.cart-item input {
  border: none;
  height: 100%;
  padding: 8px;
  text-align: center;
  width: 48px;
}
.cart-item input::-webkit-outer-spin-button, .cart-item input::-webkit-inner-spin-button {
  display: none;
}
.cart-item .cart-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 148px;
  gap: 8px;
}
@media (max-width: 945px) {
  .cart-item .cart-qty {
    align-items: center;
    grid-area: 2/2/3/4;
    justify-content: flex-start;
    flex-direction: row;
    width: 100%;
    gap: 24px;
  }
}
.cart-item .qty-holder {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  gap: 8px;
}
.cart-item .qty-holder.disabled > * {
  opacity: 0.7;
  cursor: not-allowed;
  user-select: none;
  pointer-events: none;
}
.cart-item .qty-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 36px;
}
.cart-item .qty-button svg {
  width: 14px;
  height: 16px;
}
.cart-item .cart-remove-item--link {
  display: inline-block;
  height: auto;
  padding: 0.5em;
  line-height: 1em;
  font-weight: normal;
  font-size: 0.925rem;
  padding: 8px 16px;
  width: auto;
}
@media (max-width: 945px) {
  .cart-item .cart-remove-item--link {
    padding: 4px 0;
    margin-left: auto;
  }
}
.cart-item .cart-item-price {
  font-size: 1.1rem;
  margin-left: auto;
  min-width: 100px;
  min-height: 42px;
  display: flex;
  justify-content: flex-end;
  text-align: right;
  flex-direction: column;
}
.cart-item .cart-item-price .price-suffix {
  font-size: 0.9rem;
}
@media screen and (max-width: 945px) {
  .cart-item .cart-item-price {
    font-size: 1.2rem;
    min-height: 0;
    min-width: 0;
    grid-area: 1/3/2/4;
    margin-left: 0;
  }
}

.cart-footer {
  display: grid;
  place-items: center;
  gap: 2rem;
  margin-top: 24px;
  margin-left: auto;
  width: 100%;
  max-width: 300px;
}
@media screen and (max-width: 668px) {
  .cart-footer {
    max-width: 100%;
  }
}

.cart-subtotal {
  display: flex;
  gap: 16px;
  font-size: 1.5rem;
  align-items: flex-start;
  width: 100%;
}
.cart-subtotal__amount {
  margin-left: auto;
}

.cart-submit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.cart-submit .button {
  max-width: 100%;
  width: 100%;
}

.message-banner--cart {
  border-radius: var(--border-radius);
  background-color: var(--announcement-background-color);
  color: var(--announcement-text-color);
  padding: 16px;
  margin: 0 auto 32px;
  text-align: center;
  width: 100%;
  max-width: 760px;
}
.message-banner--cart a, .message-banner--cart a:visited {
  color: var(--announcement-text-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-form .form-block {
  margin-bottom: 24px;
  text-align: left;
}
.contact-form input {
  height: 54px;
}
.contact-form textarea {
  height: 220px;
  resize: vertical;
}
.contact-form input, .contact-form textarea {
  width: 100%;
}
.contact-form input:active, .contact-form input:focus, .contact-form textarea:active, .contact-form textarea:focus {
  border: 1px solid var(--primary-text-color);
}
.contact-form label {
  display: block;
  margin-bottom: 8px;
}
.contact-form .contact-name, .contact-form .contact-recaptcha, .contact-form .contact-send, .contact-form .contact-email {
  display: block;
  position: relative;
  width: 100%;
}
.contact-form .recaptcha-note {
  display: block;
  font-family: var(--secondary-font);
  font-size: 0.975rem;
  margin-top: 10px;
  text-align: center;
}
.contact-form .recaptcha-note a {
  text-decoration: underline;
}
.contact-form .contact-send {
  text-align: center;
  width: 100%;
}
.contact-form .contact-send button {
  margin: 30px auto;
  width: 300px;
}
@media screen and (max-width: 668px) {
  .contact-form .contact-send button {
    max-width: 100%;
    width: 100%;
  }
}

.message-sent {
  text-align: center;
}

.message-banner--contact {
  color: var(--primary-text-color);
  background-color: unset;
  padding: 0;
  text-align: center;
  width: 100%;
}
.message-banner--contact a, .message-banner--contact a:visited {
  display: inline;
  text-decoration: underline;
}
.message-banner--contact ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.message-banner--contact li {
  text-align: center;
}
.message-banner--contact img {
  display: block;
  margin: 10px auto;
}

:root {
  --pagination-background: transparent;
  --pagination-page-background: var(--primary-text-color);
  --pagination-active-page: var(--primary-text-color);
}

.home-welcome {
  border-radius: var(--border-radius);
  margin: 0 auto 40px;
  clip-path: content-box;
}
.home-welcome > a {
  display: block;
}
.home-welcome .welcome-image {
  display: block;
  width: 100%;
}
.home-welcome .welcome-message {
  background: var(--welcome-background-color);
  color: var(--welcome-text-color);
  padding: 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media screen and (max-width: 668px) {
  .home-welcome .welcome-message {
    padding: 20px;
    gap: 20px;
  }
}
.home-welcome .welcome-message .welcome-header {
  color: var(--welcome-text-color);
  font-size: 1.5rem;
  font-weight: normal;
  margin: 0 auto;
  max-width: 600px;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 668px) {
  .home-welcome .welcome-message .welcome-header {
    font-size: 1.1rem;
    padding: 20px 0;
  }
}
.home-welcome .welcome-message a.welcome-button {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  min-width: 300px;
  padding: 20px 60px;
  width: auto;
}
@media screen and (max-width: 668px) {
  .home-welcome .welcome-message a.welcome-button {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}
.home-welcome.has-welcome-text .home-slideshow {
  background: var(--welcome-background-color);
}
.home-welcome .home-slideshow .splide__slide {
  width: 100%;
}
.home-welcome .home-slideshow .slideshow-image {
  border-radius: var(--border-radius);
  width: 100%;
}
.home-welcome .home-slideshow .splide__arrow {
  width: 2.5rem;
  height: 2.5rem;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: var(--border-radius);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  top: calc(50% - 15px);
  transform: translateY(-50%);
}
.home-welcome .home-slideshow .splide__arrow:not(:disabled):hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.95);
}
.home-welcome .home-slideshow .splide__arrow svg {
  fill: #262626;
  transition: fill 0.2s;
}
.home-welcome .home-slideshow .splide__arrow:hover svg {
  fill: #000;
}
.home-welcome .home-slideshow .splide__pagination {
  z-index: 1;
  background: var(--pagination-background);
  border-radius: 18px;
  display: inline-flex;
  position: relative;
  margin-top: 8px;
  bottom: auto;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  left: 50%;
  padding: 4px 8px;
  gap: 2px;
  right: auto;
}
.home-welcome .home-slideshow .splide__pagination li {
  display: flex;
}
.home-welcome .home-slideshow .splide__pagination .splide__pagination__page {
  opacity: 1;
  background: none;
  border: 1px solid var(--pagination-page-background);
  height: 10px;
  width: 10px;
}
.home-welcome .home-slideshow .splide__pagination .splide__pagination__page.is-active {
  background: var(--pagination-active-page);
  transform: scale(1.1);
}

#main .featured-container {
  margin: 0 auto 48px auto;
  max-width: 1024px;
  font-size: 1rem;
}
@media screen and (max-width: 800px) {
  #main .featured-container {
    font-size: 0.95rem;
  }
}
#main .featured-title {
  margin-bottom: 0;
  font-size: calc(1.5em * var(--product-grid-scale, 1));
  text-align: center;
}
@media screen and (max-width: 668px) {
  #main .featured-title {
    font-size: calc(1.35em * var(--product-grid-scale, 1));
  }
}
#main .featured-message {
  text-align: center;
  margin: 20px auto 40px auto;
  padding: 0 1.5rem;
}
#main .featured-message ol, #main .featured-message ul {
  text-align: left;
  margin: 1em auto;
  max-width: 600px;
  padding-left: 2.5em;
}
#main .featured-message ol ol, #main .featured-message ol ul, #main .featured-message ul ol, #main .featured-message ul ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}
#main .featured-message ul {
  list-style: disc;
}
#main .featured-message ol {
  list-style: decimal;
}
#main .featured-message a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#main .featured-message img {
  display: inline-block;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 16px;
}
#main .featured-message iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  margin-bottom: 16px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.collage-image {
  opacity: 1;
  animation: fade-in 0.4s ease-in-out forwards;
}
.collage-image.loading {
  opacity: 0;
  animation: none;
}

.video-embed-container {
  margin-top: 28px;
  padding-bottom: 20px;
}

.welcome-clickable {
  cursor: pointer;
}
.welcome-clickable:hover {
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.product-password-form-container {
  margin: 40px auto;
  padding: 0 20px;
}
.product-password-form-container h1 {
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.product-breadcrumb {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 12px;
  row-gap: 4px;
  flex-wrap: wrap;
}
@media screen and (max-width: 668px) {
  .product-breadcrumb {
    font-size: 0.925rem;
  }
}
.product-breadcrumb .next-arrow {
  width: 5px;
  fill: var(--primary-text-color);
  opacity: 0.8;
}
.product-breadcrumb a {
  text-decoration: none;
}
.product-breadcrumb a:hover {
  text-decoration: underline;
}

.product-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  column-gap: 60px;
  row-gap: 40px;
}
@media screen and (max-width: 945px) {
  .product-container {
    column-gap: 40px;
    grid-template-columns: 1fr 360px;
  }
}
@media screen and (max-width: 800px) {
  .product-container {
    grid-template-columns: minmax(0, 1fr);
  }
}

.reset-selection-button-container {
  text-align: center;
  width: 100%;
}
.reset-selection-button-container button.reset-selection-button {
  display: none;
}

.product-form {
  width: 100%;
}
.product-form button {
  max-width: 100%;
}
@media screen and (max-width: 945px) {
  .product-form {
    max-width: 100%;
  }
}

.product-selects {
  margin-bottom: 20px;
}

.product-option-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-detail {
  display: flex;
  flex-direction: column;
  row-gap: 36px;
}
.product-detail__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.product-detail__title, .product-detail .page-title {
  color: var(--primary-heading-text-color);
  font-size: calc(2rem * var(--product-title-scale, 1));
  line-height: 1.2;
  padding-bottom: 10px;
}
@media screen and (max-width: 945px) {
  .product-detail__title, .product-detail .page-title {
    font-size: calc(1.9rem * var(--product-title-scale, 1));
  }
}
@media screen and (max-width: 668px) {
  .product-detail__title, .product-detail .page-title {
    font-size: calc(1.5rem * var(--product-title-scale, 1));
  }
}
.product-detail__status {
  font-size: calc(0.875rem * min(var(--product-title-scale, 1), 1.3));
  line-height: normal;
  display: inline-block;
}
.product-detail__pricing {
  display: flex;
  align-items: center;
  font-size: calc(1.3rem * var(--product-title-scale, 1));
  color: var(--primary-text-color);
}
@media screen and (max-width: 668px) {
  .product-detail__pricing {
    font-size: calc(1.1rem * var(--product-title-scale, 1));
  }
}
.product-detail__separator {
  margin: 0 8px;
}
.product-detail__description {
  font-size: calc(1rem * var(--product-description-scale, 1));
}
.product-detail__description p {
  margin: revert;
}
.product-detail__description > :first-child {
  margin-top: 0;
}
.product-detail__description > :last-child {
  margin-bottom: 0;
}
.product-detail__description ol, .product-detail__description ul {
  padding-left: 1.5em;
  margin: 1em 0;
}
.product-detail__description ol ol, .product-detail__description ol ul, .product-detail__description ul ol, .product-detail__description ul ul {
  margin: 0.5em 0;
}
.product-detail__description ul {
  list-style: disc;
}
.product-detail__description ol {
  list-style: decimal;
}
.product-detail__description a {
  text-decoration: underline;
}
.product-detail__description img {
  display: inline-block;
  margin: 0 auto;
  max-width: 100%;
  margin-bottom: 16px;
}
.product-detail__description iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  margin-bottom: 16px;
}
.product-detail .page-title {
  color: var(--primary-heading-text-color);
  margin-bottom: 0;
  text-align: left;
}

.related-products-container {
  margin-top: 100px;
}

.related-products-header {
  display: flex;
  align-items: center;
  font-size: calc(1rem * var(--product-grid-scale, 1));
}
@media screen and (max-width: 800px) {
  .related-products-header {
    font-size: calc(0.8rem * var(--product-grid-scale, 1));
  }
}
@media screen and (max-width: 500px) {
  .related-products-header {
    display: block;
  }
}
.related-products-header .related-products-view-all-link {
  margin-left: auto;
}
.related-products-header .related-products-view-all-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.related-product-list.product-list {
  --columns: 4;
}
@media screen and (max-width: 800px) {
  .related-product-list.product-list {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 945px) {
  .related-product-list.product-list {
    --columns: 3;
    --gap: calc(var(--spacing-unit) * 2);
  }
}
@media screen and (max-width: 668px) {
  .related-product-list.product-list {
    --columns: 2;
  }
}

#instant-checkout-button {
  margin-top: 12px;
}

.inventory-status-message {
  color: var(--inventory-status-text-color);
  font-size: calc(0.9rem * min(var(--product-title-scale, 1), 1.3));
  margin: 10px 0 auto;
  text-align: center;
  padding: 8px 0;
  font-weight: 500;
}

#payment-processor-messaging {
  margin: 20px 0 0;
  width: 100%;
  display: block;
}
body[data-bc-page-type="product"] #payment-processor-messaging {
  margin: 0;
}
body[data-bc-page-type="cart"] #payment-processor-messaging {
  margin-bottom: 20px;
}
#payment-processor-messaging.display-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#payment-processor-messaging.display-flex.dual-messaging {
  gap: 15px;
}
#payment-processor-messaging.display-grid {
  display: grid;
}
#payment-processor-messaging.hidden {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
#payment-processor-messaging > div {
  margin-bottom: 0;
}
#payment-processor-messaging:not(.display-flex).dual-messaging > div.visible:first-of-type {
  margin-bottom: 15px;
}

#stripe-messaging-container,
#paypal-messaging-container {
  transition: min-height 0.1s ease-out;
}

.product-list {
  --gap: calc(var(--spacing-unit) * 4);
  --row-gap: 56px;
  --columns: 3;
  --spacing-unit: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: var(--spacing-unit) 0 0;
  gap: var(--gap);
  row-gap: var(--row-gap);
  margin-top: 28px;
}
.product-list--center {
  justify-content: center;
}
@media screen and (max-width: 800px) {
  .product-list {
    --columns: Max(2, calc(3 - 1));
  }
}
@media screen and (max-width: 668px) {
  .product-list {
    --columns: 2;
    --gap: calc(var(--spacing-unit) * 2);
  }
}
@media screen and (max-width: 668px) {
  .product-list {
    --row-gap: 24px;
  }
}

.product-list-thumb {
  position: relative;
  text-decoration: none;
  width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
}

a.product-list-link {
  text-decoration: none;
  outline-offset: 4px;
  position: relative;
}
@media (hover: hover) {
  a.product-list-link:hover .product-list-thumb-name {
    text-decoration: underline;
  }
}

.product-list-image-container {
  border-radius: var(--border-radius);
  margin: 0;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}
.product-list-image-container-default {
  padding-bottom: 0;
}

.product-list-image {
  border-radius: var(--border-radius);
  transform: translate3d(0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.product-list-image.grid-default {
  position: relative;
}
.product-list-image.grid-cover {
  object-fit: cover;
}
.product-list-image.grid-contain {
  object-fit: contain;
}

.home-featured-categories .product-list-image-container-default {
  padding-bottom: 100%;
}
.home-featured-categories .product-list-image.grid-default {
  position: absolute;
  object-fit: contain;
}

.product-list-thumb-status {
  top: 12px;
  right: 12px;
  position: absolute;
  z-index: 2;
  font-size: calc(0.925rem * min(var(--product-grid-scale, 1), 1.25));
  line-height: normal;
  display: inline-block;
  padding: 6px 8px;
  border-radius: var(--border-radius-sm);
}
.product-list-thumb-status.status-primary {
  background: var(--badge-background-color-primary);
  color: var(--badge-text-color-primary);
}
.product-list-thumb-status.status-secondary {
  background: var(--badge-background-color-secondary);
  color: var(--badge-text-color-secondary);
}

.product-list-thumb-info {
  line-height: normal;
  padding: 12px 0 0;
  position: relative;
  text-align: center;
  display: grid;
  gap: 8px;
  font-size: calc(1rem * var(--product-grid-scale, 1));
}
.product-list-thumb-info--left {
  text-align: left;
}

.product-list-thumb-name {
  font-size: calc(1.2rem * var(--product-grid-scale, 1));
  word-break: break-word;
}
@media screen and (max-width: 800px) {
  .product-list-thumb-name {
    font-size: calc(1rem * var(--product-grid-scale, 1));
  }
}

.product-list-thumb-price {
  font-size: calc(1rem * var(--product-grid-scale, 1));
}
@media screen and (max-width: 800px) {
  .product-list-thumb-price {
    font-size: calc(0.9rem * var(--product-grid-scale, 1));
  }
}

.product-list-thumb-options-description {
  font-style: italic;
  font-size: calc(1rem * var(--product-grid-scale, 1));
  margin-top: -4px;
}
@media screen and (max-width: 800px) {
  .product-list-thumb-options-description {
    font-size: calc(0.9rem * var(--product-grid-scale, 1));
  }
}

.price-suffix {
  white-space: nowrap;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-text-color);
  position: relative;
  text-align: center;
  width: 100%;
  gap: 16px;
  padding-top: 80px;
}
.pagination .page-link {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}
.pagination .page-link:hover {
  text-decoration: underline;
}
.pagination .page-link.disabled {
  display: none;
}
.pagination .page-link svg {
  width: 10px;
  height: 14px;
}
.pagination .previous, .pagination .next {
  display: none;
}

.page-numbers {
  display: flex;
  gap: 12px;
}
.page-numbers .current {
  text-underline-offset: 4px;
  text-decoration: underline;
}
.page-numbers > a, .page-numbers span {
  padding: 2px 10px;
}
.page-numbers > a:hover {
  text-decoration: underline;
}

.pagination-arrow {
  display: block;
  fill: currentColor;
  height: 17px;
  width: 17px;
}
.pagination-arrow.prev-arrow {
  margin-right: auto;
}
.pagination-arrow.next-arrow {
  margin-left: auto;
}

:root {
  --thumbnail-active-color: var(--secondary-text-color);
  --thumb-scroller-color: var(--primary-text-color);
  --thumb-scroller-border-width: 1px;
  --thumb-scroller-border-color: var(--primary-text-color);
  --thumb-scroller-background: var(--background-color);
  --thumb-scroller-background-hover: transparent;
  --current-slide-background: var(--background-color);
  --current-slide-color: var(--primary-text-color);
  --active-slide-border-width: 2px;
  --active-slide-border-width-offset: -2px;
  --arrow-background-color: var(--background-color);
  --arrow-color: var(--primary-text-color);
  --gap-width: 16px;
  --num-images: 5;
}
@media screen and (max-width: 668px) {
  :root {
    --gap-width: 12px;
  }
}

.product-carousel .splide__list {
  align-items: flex-start;
}
.product-carousel .splide__slide {
  transition: height 0.2s ease;
}
.product-carousel .splide__slide img {
  display: block;
  width: 100%;
  height: auto;
}
.product-carousel .splide__slide:not(.is-active) {
  height: 0;
}

.splide__track {
  border-radius: var(--border-radius);
}

.splide__arrows {
  display: none;
}
@media (hover: hover) {
  .splide__arrows {
    display: block;
  }
}

.splide__arrow {
  transition: opacity 0.2s ease;
  opacity: 0;
  border-radius: var(--border-radius);
  width: 2em;
  height: 3em;
  background: var(--arrow-background-color);
  color: var(--arrow-color);
}
.splide__arrow:disabled {
  opacity: 0;
}
.splide__arrow--prev {
  left: 0.75em;
}
.splide__arrow--next {
  right: 0.75em;
}
.splide__arrow svg {
  fill: currentColor;
}

.splide:hover .splide__arrow:not(:disabled), .splide:focus-within .splide__arrow:not(:disabled) {
  opacity: 1;
}

.product-image {
  border-radius: var(--border-radius);
  width: 100%;
}

.product-thumbnails--list {
  display: flex;
  gap: var(--gap-width);
  list-style: none;
  flex: 1;
  padding: 0 calc(var(--gap-width) / 2);
  scroll-padding-left: calc(var(--gap-width) / 2);
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: var(--border-radius);
}
.product-thumbnails--list.mobile-overflow {
  padding-left: 0;
  padding-right: 0;
}
@media screen and (max-width: 668px) {
  .product-thumbnails--list .product-thumbnails--item {
    --num-images: 4;
  }
  .product-thumbnails--list.mobile-overflow {
    padding-left: 0;
    padding-right: 0;
  }
  .product-thumbnails--list.mobile-overflow .product-thumbnails--item {
    --num-images: 5;
  }
}
.product-thumbnails--list.is-overflow {
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.product-thumbnails--list.is-overflow::-webkit-scrollbar {
  display: none;
}
.product-thumbnails--list.thumbnails {
  flex-wrap: wrap;
}
.product-thumbnails--item {
  width: calc(calc(100% / var(--num-images)) - calc(var(--gap-width) - calc(var(--gap-width) / var(--num-images))));
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--border-radius);
  user-select: none;
  pointer-events: none;
  position: relative;
  scroll-snap-align: start;
}
.product-thumbnails--item:before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.product-thumbnails--item:not([aria-current="true"]):hover img {
  opacity: 0.8;
}
.product-thumbnails--item[aria-current="true"] .product-thumbnails--change-slide img {
  outline: var(--active-slide-border-width) solid var(--thumbnail-active-color);
  outline-offset: var(--active-slide-border-width-offset);
}
.product-thumbnails--item .product-thumbnails--change-slide {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  overflow: hidden;
  user-select: none;
  border-radius: var(--border-radius);
  pointer-events: auto;
}
.product-thumbnails--item .product-thumbnails--change-slide img {
  border-radius: var(--border-radius);
  height: 100%;
  width: 100%;
  object-fit: cover;
}

a.gallery-link {
  cursor: zoom-in;
  display: block;
}

.product-thumbnails-buttons-container {
  align-items: center;
  display: flex;
  gap: 4px;
  margin-top: var(--gap-width);
  width: 100%;
}
.product-thumbnails-buttons-container .thumb-scroller {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 48px;
  color: var(--thumb-scroller-color);
  background: var(--thumb-scroller-background);
  border-radius: var(--border-radius);
  border: var(--thumb-scroller-border-width) solid var(--thumb-scroller-border-color);
}
@media screen and (max-width: 668px) {
  .product-thumbnails-buttons-container .thumb-scroller {
    height: 44px;
  }
}
.product-thumbnails-buttons-container .thumb-scroller[disabled] {
  opacity: 0.2;
  cursor: not-allowed;
}
.product-thumbnails-buttons-container .thumb-scroller:not([disabled]):hover {
  background: var(--thumb-scroller-background-hover);
}
.product-thumbnails-buttons-container .thumb-scroller svg {
  fill: currentColor;
  display: block;
  width: 16px;
}
.product-thumbnails-buttons-container .thumb-scroller--left svg {
  transform: rotate(90deg);
}
.product-thumbnails-buttons-container .thumb-scroller--right svg {
  transform: rotate(-90deg);
}
.product-thumbnails-buttons-container .thumb-scroller.hidden {
  display: none;
}

@media screen and (min-width: 669px) {
  .overlay-image-counter {
    display: none;
  }

  .desktop-stacked .splide .splide__list, .desktop-two-column .splide .splide__list {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
  }
  .desktop-stacked .splide .splide__slide, .desktop-two-column .splide .splide__slide {
    height: auto;
    flex-shrink: 0;
    width: 100%;
  }
  .desktop-stacked .product-thumbnails-buttons-container, .desktop-two-column .product-thumbnails-buttons-container {
    display: none;
  }

  .desktop-two-column .splide .splide__list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .desktop-two-column .splide .splide__track {
    overflow: visible;
  }
  .desktop-two-column .splide .splide__slide {
    width: calc((100% / 2) - 8px);
  }
  .desktop-two-column .splide .splide__slide:not(:first-child):before {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
  .desktop-two-column .splide .splide__slide:not(:first-child) .zoom-image-container {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    overflow: hidden;
    user-select: none;
    border-radius: var(--border-radius);
    pointer-events: auto;
  }
  .desktop-two-column .splide .splide__slide:not(:first-child) .zoom-image-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .desktop-two-column .splide .splide__slide:first-child {
    width: 100%;
  }

  .desktop-carousel .thumb-scroller {
    display: flex;
  }
  .desktop-carousel .overlay-image-counter {
    display: flex;
  }

  .desktop-thumbnails .product-thumbnails {
    padding: 0px;
  }
  .desktop-thumbnails .product-thumbnails--list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0;
  }
  .desktop-thumbnails .product-thumbnails--item {
    width: 100%;
  }

  .mobile-buttons-indicator {
    display: none;
  }
}
@media screen and (max-width: 668px) {
  .mobile-show-thumbnails .mobile-buttons-indicator {
    display: none;
  }
  .mobile-show-thumbnails .thumb-scroller {
    display: flex;
  }

  .mobile-hide-thumbnails .overlay-image-counter {
    display: none;
  }
  .mobile-hide-thumbnails .product-thumbnails-buttons-container {
    display: none;
  }
  .mobile-hide-thumbnails .mobile-buttons-indicator {
    display: flex;
    font-size: 0.925rem;
    gap: 24px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
  }
  .mobile-hide-thumbnails .mobile-buttons-indicator .change-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 40px;
    height: 40px;
    background: var(--thumb-scroller-background);
    color: var(--thumb-scroller-color);
  }
  .mobile-hide-thumbnails .mobile-buttons-indicator .change-slide svg {
    display: block;
    width: 16px;
  }
  .mobile-hide-thumbnails .mobile-buttons-indicator .change-slide--left svg {
    transform: rotate(90deg);
  }
  .mobile-hide-thumbnails .mobile-buttons-indicator .change-slide--right svg {
    transform: rotate(-90deg);
  }
}
.overlay-image-counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 0.8rem;
  background: var(--current-slide-background);
  color: var(--current-slide-color);
  padding: 6px 8px;
  border-radius: var(--border-radius);
}

.maintenance-page {
  --font-scale: 1;
  --shop-name-scale: 1;
  --product-grid-scale: 1;
  --product-title-scale: 1;
  --product-description-scale: 1;
  --header-scale: 1;
  --footer-scale: 1;
  font-size: 16px;
  padding: 140px 60px;
  text-align: center;
}
@media screen and (max-width: 800px) {
  .maintenance-page {
    padding: 80px 20px;
  }
}
.maintenance-page .maintenance-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  max-width: 800px;
  margin: 0 auto;
}
.maintenance-page .maintenance-image-container {
  width: 100%;
  max-width: 600px;
}
.maintenance-page .maintenance-image {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 668px) {
  .maintenance-page .maintenance-image {
    max-height: 50vh;
  }
}
.maintenance-page .maintenance-header {
  font-size: 2em;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 800px) {
  .maintenance-page .maintenance-header {
    font-size: 1.75em;
  }
}
@media screen and (max-width: 668px) {
  .maintenance-page .maintenance-header {
    font-size: 1.6em;
  }
}
@media screen and (max-width: 500px) {
  .maintenance-page .maintenance-header {
    font-size: 1.4em;
  }
}
.maintenance-page .maintenance-text {
  font-family: var(--secondary-font);
  font-size: 1.125em;
  line-height: 1.6;
  color: var(--primary-text-color);
  max-width: 600px;
  margin: -30px auto 0 auto;
}
@media screen and (max-width: 800px) {
  .maintenance-page .maintenance-text {
    font-size: 1em;
  }
}
@media screen and (max-width: 668px) {
  .maintenance-page .maintenance-text {
    font-size: 1em;
  }
}
@media screen and (max-width: 500px) {
  .maintenance-page .maintenance-text {
    font-size: 1em;
  }
}
.maintenance-page .maintenance-icons {
  display: flex;
  align-items: center;
  column-gap: 16px;
  row-gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  max-width: 500px;
}
.maintenance-page .maintenance-icons li {
  display: inline-block;
}
.maintenance-page .maintenance-icons li a {
  display: block;
  padding: 0 4px;
  transition: opacity 0.2s ease;
}
.maintenance-page .maintenance-icons li a:hover {
  opacity: 0.7;
}
.maintenance-page .maintenance-icons li a svg {
  fill: currentColor;
  height: 20px;
  width: 20px;
}
.maintenance-page .maintenance-icons li a svg.tumblr-icon {
  width: 13px;
}
.maintenance-page .maintenance-icons li a svg.reddit-icon, .maintenance-page .maintenance-icons li a svg.discord-icon {
  width: 24px;
  height: 24px;
}

.search-modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(var(--background-color-rgb),.8);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.search-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}
.search-modal__content {
  background-color: var(--background-color);
  border-bottom: 1px solid var(--primary-text-color);
  text-align: center;
  display: grid;
  grid-template-rows: 1fr;
  width: 100%;
}
.search-modal__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 32px;
  max-width: 800px;
  position: relative;
  margin: 0 auto;
  width: 100%;
}
.search-modal__form {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 16px;
  row-gap: 8px;
  width: 100%;
}
.search-modal__input {
  grid-row: 2/2;
  grid-column: 1/1;
  border-radius: var(--border-radius);
  background: var(--background-color);
  border: 1px solid var(--primary-text-color);
  font-weight: normal;
  width: 100%;
  font-size: 1rem;
  height: 48px;
  padding: 8px 12px;
}
.search-modal__input:focus-visible {
  outline: none;
  box-shadow: none;
}
.search-modal__submit {
  color: var(--button-text-color);
  background: var(--button-background-color);
  grid-row: 2/2;
  grid-column: 2/2;
  padding: 0;
  height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 4rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  margin-left: auto;
  transition: color 0.2s linear;
}
.search-modal__close-icon {
  height: 20px;
  width: 20px;
}
.search-modal__close:hover {
  color: var(--secondary-text-color);
}
.search-modal__label {
  text-align: left;
}

.navigation-modal {
  transition: opacity 0.2s, visibility 0s 0.2s;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 1000;
  overscroll-behavior: contain;
  background: var(--background-color);
}
.navigation-modal .wrapper {
  max-width: 600px;
  margin: 0;
}
.navigation-modal * {
  text-transform: initial;
}
.navigation-modal[aria-hidden="false"] {
  transition: opacity 0.2s;
  opacity: 1;
  visibility: visible;
}
.navigation-modal[aria-hidden="false"] .navigation-modal__content {
  display: block;
}
.navigation-modal__content {
  display: none;
  height: 100%;
  overflow-y: scroll;
  padding: 0 0 90px;
}
.navigation-modal__header {
  padding: 24px 0 12px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: sticky;
  top: 0;
  height: var(--header-height);
}
@media screen and (max-width: 945px) {
  .navigation-modal__header {
    padding: 0;
    height: 80px;
    margin-top: 16px;
  }
}
.navigation-modal__close {
  cursor: pointer;
  height: 40px;
  display: flex;
  left: -8px;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0px;
  width: 40px;
}
@media screen and (max-width: 668px) {
  .navigation-modal__close {
    left: -4px;
  }
}
.navigation-modal__close svg {
  fill: currentColor;
  height: 18px;
  width: 18px;
}
.navigation-modal__main {
  padding: 0 0 0 5px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.navigation-modal__list {
  text-align: left;
  font-size: calc(1.4rem * var(--header-scale, 1));
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 16px 0 0;
}
.navigation-modal__list a:hover {
  text-decoration: underline;
}
.navigation-modal .social-icons {
  justify-content: flex-start;
  gap: 16px;
  position: relative;
  left: -4px;
}

.navigation-modal__categories-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  text-underline-offset: 4px;
}
.navigation-modal__categories-toggle:hover {
  text-decoration: underline;
}
.navigation-modal__categories-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.navigation-modal__categories-toggle svg {
  fill: currentColor;
  width: 16px;
}
.navigation-modal__categories .category-list {
  display: block;
  margin-top: 16px;
  margin-left: 16px;
}
.navigation-modal__categories .category-list ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: calc(0.9rem * var(--header-scale, 1));
}
.navigation-modal__categories .category-list[aria-hidden="true"] {
  display: none;
}

@media screen and (max-width: 668px) {
  body.has-announcement .navigation-modal__header {
    margin-top: 62px;
  }
}
/*


 */


/* ==========================================================================
   JUJU TIPS LANDING LAYER
   --------------------------------------------------------------------------
   Everything below is additive. It only styles the .jt-* classes used by
   home.html plus a handful of page-scoped overrides on the home page itself,
   so the product, cart and contact pages keep the stock theme look.
   The whole palette is the :root block directly below — change style here.
   ========================================================================== */

/* ---- Palette sampled directly from the logo file ------------------------ */
:root {
  --jt-ivory: #F8F3EE;        /* page ground, one step warmer than the logo ivory */
  --jt-sand: #F0E8E2;         /* deeper warm neutral, behind images */
  --jt-rose-pale: #EFE3E9;    /* accent tint panel */
  --jt-rose: #D5BAC6;         /* the lighter mark in the logo */
  --jt-plum: #875D78;         /* the wordmark colour */
  --jt-plum-deep: #6E4160;    /* darkest stroke in the wordmark */
  --jt-ink: #2C2029;          /* plum-black, headings and body */
  --jt-ink-2: #6E6169;        /* secondary copy */
  --jt-line: rgba(44, 32, 41, 0.14);
  --jt-hairline: rgba(44, 32, 41, 0.07);   /* list separators only, never an outline */
  --jt-surface: #FEFAF7;                    /* lifted panel: the logo's own ivory */
  --jt-fill: rgba(135, 93, 120, 0.08);      /* tinted fill that replaces every border */
  --jt-fill-strong: rgba(135, 93, 120, 0.14);

  /* Depth comes from stacked soft shadows, not outlines. */
  --jt-shadow-sm: 0 1px 2px rgba(44, 32, 41, 0.05), 0 2px 8px rgba(44, 32, 41, 0.04);
  --jt-shadow: 0 1px 3px rgba(44, 32, 41, 0.06), 0 10px 28px rgba(44, 32, 41, 0.07);
  --jt-shadow-lift: 0 2px 8px rgba(44, 32, 41, 0.08), 0 20px 48px rgba(44, 32, 41, 0.11);

  /* Playfair Display and Jost are loaded in layout.html. The theme's own
     font settings stay in the chain as a fallback. */
  --jt-display: "Playfair Display", var(--primary-font), Georgia, "Times New Roman", serif;
  --jt-body: "Jost", var(--secondary-font), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --jt-radius: 6px;
  --jt-radius-lg: 14px;
  --jt-gap: 20px;
  --jt-section-space: 104px;
  --jt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media screen and (max-width: 800px) {
  :root { --jt-section-space: 68px; --jt-gap: 14px; }
}

/* --- page-scoped ground so the header and footer match the landing page --- */
body[data-bc-page-type="home"],
body[data-bc-page-type="home"] header,
body[data-bc-page-type="home"] .footer {
  background: var(--jt-ivory);
}
body[data-bc-page-type="home"] .content { padding-top: 8px; padding-bottom: 0; }
body[data-bc-page-type="home"] .content h1 { margin-bottom: 0; text-align: left; }

/* --------------------------------------------------------------------------
   Shared elements
   -------------------------------------------------------------------------- */
.jt-eyebrow {
  margin: 0 0 14px;
  font-family: var(--jt-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jt-plum);
}

.content .jt-section__title,
.content .jt-hero__title,
.content .jt-closer__title {
  font-family: var(--jt-display);
  color: var(--jt-ink);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: left;
}

.content .jt-section__title { font-size: clamp(1.75rem, 1.1rem + 2.1vw, 2.75rem); }

.jt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  font-family: var(--jt-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.22s var(--jt-ease), box-shadow 0.22s var(--jt-ease),
              transform 0.22s var(--jt-ease), color 0.22s var(--jt-ease);
}
.jt-btn:active { transform: scale(0.975); }
.jt-btn--solid {
  background: var(--jt-plum-deep);
  color: #FEF9FB;
  box-shadow: 0 1px 2px rgba(44, 32, 41, 0.14), 0 8px 22px rgba(110, 65, 96, 0.26);
}
.jt-btn--solid:hover, .jt-btn--solid:focus-visible {
  background: #7B4A69;
  box-shadow: 0 2px 4px rgba(44, 32, 41, 0.16), 0 14px 34px rgba(110, 65, 96, 0.32);
}
/* Secondary: a tinted fill, never an outline. */
.jt-btn--line { background: var(--jt-fill); color: var(--jt-plum-deep); }
.jt-btn--line:hover, .jt-btn--line:focus-visible { background: var(--jt-fill-strong); }

.jt-section { margin-top: var(--jt-section-space); }
.jt-section--tint {
  background: radial-gradient(115% 135% at 100% 0%, var(--jt-rose-pale) 0%, var(--jt-sand) 72%);
  border-radius: var(--jt-radius-lg);
  padding: clamp(32px, 5vw, 64px);
}
.jt-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.jt-section__head--stack { align-items: flex-start; }
.jt-section__lede {
  margin: 0;
  max-width: 46ch;
  font-family: var(--jt-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--jt-ink-2);
}
.jt-section__link {
  flex: none;
  font-family: var(--jt-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jt-ink);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--jt-fill);
  transition: background-color 0.2s var(--jt-ease);
}
.jt-section__link:hover { background: var(--jt-fill-strong); color: var(--jt-plum-deep); }
.jt-section__foot { margin-top: 36px; text-align: center; }
.jt-empty { font-family: var(--jt-body); color: var(--jt-ink-2); }

@media screen and (max-width: 700px) {
  .jt-section__head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --------------------------------------------------------------------------
   1 — Hero
   -------------------------------------------------------------------------- */
.jt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  padding: 24px 0 8px;
}
.jt-hero__copy { max-width: 34rem; }
.content .jt-hero__title {
  font-size: clamp(2.5rem, 1.3rem + 4.2vw, 4.25rem);
  line-height: 0.98;
}
.jt-hero__lede {
  margin: 22px 0 0;
  font-family: var(--jt-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--jt-ink-2);
  max-width: 42ch;
}
.jt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.jt-hero__trust {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--jt-body);
  font-size: 0.8125rem;
  color: var(--jt-ink-2);
}
.jt-hero__trust li { position: relative; padding-left: 16px; }
.jt-hero__trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jt-plum);
}
.jt-hero__media { position: relative; }
.jt-hero__image,
.jt-hero__placeholder,
.jt-hero .home-slideshow {
  width: 100%;
  border-radius: var(--jt-radius-lg);
  overflow: hidden;
}
.jt-hero__image { display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.jt-hero__placeholder {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 90% at 25% 15%, var(--jt-rose-pale) 0%, transparent 60%),
    linear-gradient(150deg, var(--jt-sand) 0%, #E4D7D2 100%);
}
.jt-hero .slideshow-image { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Narrow screens stack the hero with the image on top.

   The uploaded hero image is shown at its OWN proportions here, not forced
   into a frame. This used to be aspect-ratio: 3 / 2 with object-fit: cover,
   and the first real hero uploaded (2026-09-15) was square, so the frame cut
   a sixth off the top and a sixth off the bottom -- and the model's hair runs
   right up to the top edge, so the head was the part that went. Anchoring the
   crop to the top instead would have saved the head and cut the bottom third,
   which is where the nails are, and on a nail shop that is the worse loss.
   Letting the image keep its own shape crops nothing, and whatever ratio gets
   uploaded next needs no change here.

   The placeholder has no intrinsic size, so it keeps a fixed ratio. The
   slideshow does too, because Splide needs every slide the same height or the
   page jumps as it rotates; it is square to match how the hero is being shot.
   If slideshow images are ever used and they are not square, change 1 / 1. */
@media screen and (max-width: 900px) {
  .jt-hero { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .jt-hero__copy { order: 2; max-width: none; }
  .jt-hero__media { order: 1; }
  .jt-hero__image { aspect-ratio: auto; height: auto; }
  .jt-hero__placeholder { aspect-ratio: 3 / 2; }
  .jt-hero .slideshow-image { aspect-ratio: 1 / 1; }
}

/* --------------------------------------------------------------------------
   2 — Proof bar
   -------------------------------------------------------------------------- */
.jt-proof {
  display: grid;
  /* One row at every width, however many figures are in it. grid-auto-flow: column
     with equal auto-columns means the bar divides itself by the number of children,
     so adding or pulling a figure needs no breakpoint anywhere. This replaced an
     auto-fit track list that wrapped to two rows under 700px and left the third
     figure stranded on a line of its own. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-top: 60px;
  padding: 10px;
  border-radius: var(--jt-radius-lg);
  background: var(--jt-surface);
  box-shadow: var(--jt-shadow);
}
.jt-proof__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 20px;
  text-align: center;
}
.jt-proof__figure {
  font-family: var(--jt-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--jt-plum);
  letter-spacing: -0.02em;
}
.jt-proof__label {
  font-family: var(--jt-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jt-ink-2);
}
/* Narrow screens keep the single row and give back the space by shrinking the
   cell instead. At 390px three figures get about 118px each, which is enough for
   a two-line label. */
@media screen and (max-width: 700px) {
  .jt-proof { padding: 6px; }
  .jt-proof__item { gap: 6px; padding: 18px 6px; }
  .jt-proof__label {
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    line-height: 1.35;
  }
}

/* --------------------------------------------------------------------------
   3 — Product grid
   -------------------------------------------------------------------------- */
.jt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--jt-gap) * 1.6) var(--jt-gap);
}
.jt-card { display: block; text-decoration: none; color: inherit; }
.jt-card__media {
  position: relative;
  border-radius: var(--jt-radius-lg);
  overflow: hidden;
  background: var(--jt-sand);
  aspect-ratio: 1 / 1;
  box-shadow: var(--jt-shadow-sm);
  transition: box-shadow 0.3s var(--jt-ease);
}
.jt-card:hover .jt-card__media { box-shadow: var(--jt-shadow-lift); }
.jt-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--jt-ease);
}
.jt-card:hover .jt-card__image { transform: scale(1.035); }
.jt-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(254, 250, 247, 0.92);
  color: var(--jt-ink);
  box-shadow: var(--jt-shadow-sm);
  font-family: var(--jt-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.jt-card__badge--sale { background: var(--jt-plum); color: #fff; }
.jt-card__body { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; }
.jt-card__name {
  font-family: var(--jt-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--jt-ink);
  line-height: 1.35;
}
.jt-card:hover .jt-card__name { color: var(--jt-plum); }
.jt-card__price { font-family: var(--jt-body); font-size: 0.875rem; color: var(--jt-ink-2); }
@media screen and (max-width: 1000px) { .jt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 700px)  { .jt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   4 — Comparison table
   -------------------------------------------------------------------------- */
/* The whole table is one card. The Juju Tips column is a continuous tinted
   band inside it, painted on the cells themselves so there are no seams
   between rows. Nothing floats, nothing is outlined. */
.jt-compare {
  margin-top: 40px;
  overflow-x: auto;
  padding: 10px 16px 16px;
  border-radius: var(--jt-radius-lg);
  background: var(--jt-surface);
  box-shadow: var(--jt-shadow);
}
.jt-compare__row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  align-items: stretch;
  min-width: 600px;
  font-family: var(--jt-body);
  font-size: 0.9375rem;
  color: var(--jt-ink-2);
}
.jt-compare__row > span {
  display: flex;
  align-items: center;
  padding: 16px 18px;
}
.jt-compare__row:not(.jt-compare__row--head) > span {
  box-shadow: inset 0 1px 0 var(--jt-hairline);
}
.jt-compare__row [role="rowheader"] {
  font-weight: 600;
  color: var(--jt-ink);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.jt-compare__row--head {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jt-ink-2);
}
.jt-compare__row--head > span { padding-bottom: 14px; }
.jt-compare__us {
  background: var(--jt-fill);
  color: var(--jt-ink);
  font-weight: 600;
}
.jt-compare__row--head .jt-compare__us {
  font-family: var(--jt-display);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--jt-plum-deep);
  border-radius: var(--jt-radius) var(--jt-radius) 0 0;
}
.jt-compare__row:last-child .jt-compare__us {
  border-radius: 0 0 var(--jt-radius) var(--jt-radius);
}

/* Under 700px the four-column table cannot hold its header, so each attribute
   becomes its own small three-column table: the attribute name spans the full
   width as a caption, and the three options sit side by side underneath with
   the column name above each value. Keeping the three across is what makes it
   still read as a comparison. The earlier version stacked them one per line,
   which turned the table into a plain list.

   ORDER MATTERS BELOW. .jt-compare__row--head and .jt-compare__row have the
   same specificity and the head element carries both classes, so whichever is
   written last wins. The head rule used to come first and was overridden by
   .jt-compare__row { display: grid }, which is why the header was never hidden
   on a phone and rendered as four stray blocks. Leave the hide rule after it. */
@media screen and (max-width: 700px) {
  .jt-compare { overflow-x: visible; padding: 6px 14px 14px; }
  .jt-compare__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
    padding: 16px 0 12px;
  }
  .jt-compare__row--head { display: none; }
  .jt-compare__row:not(.jt-compare__row--head) > span { box-shadow: none; }
  .jt-compare__row + .jt-compare__row { box-shadow: inset 0 1px 0 var(--jt-hairline); }
  .jt-compare__row [role="rowheader"] {
    grid-column: 1 / -1;
    padding: 0 0 10px;
  }
  .jt-compare__row > span:not([role="rowheader"]) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 10px 10px 11px;
    border-radius: var(--jt-radius);
    background: rgba(44, 32, 41, 0.035);
    font-size: 0.8125rem;
    line-height: 1.3;
  }
  .jt-compare__row > span[data-label]::before {
    content: attr(data-label);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jt-ink-2);
  }
  .jt-compare__row > .jt-compare__us { background: var(--jt-fill); }
  .jt-compare__row > .jt-compare__us::before { color: var(--jt-plum-deep); }
}

/* --------------------------------------------------------------------------
   5 — Steps
   -------------------------------------------------------------------------- */
.jt-steps {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.jt-step {
  padding: 26px 24px 28px;
  border-radius: var(--jt-radius-lg);
  background: var(--jt-surface);
  box-shadow: var(--jt-shadow-sm);
}
.jt-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--jt-fill);
  font-family: var(--jt-display);
  font-size: 0.8125rem;
  color: var(--jt-plum-deep);
  margin-bottom: 16px;
}
.content .jt-step__title {
  margin: 0 0 8px;
  font-family: var(--jt-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--jt-ink);
}
.jt-step p {
  margin: 0;
  font-family: var(--jt-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--jt-ink-2);
}
.jt-steps__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jt-gap);
  margin-top: 40px;
}
.jt-steps__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--jt-radius-lg);
  display: block;
}
@media screen and (max-width: 900px) { .jt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media screen and (max-width: 560px) { .jt-steps { grid-template-columns: minmax(0, 1fr); } .jt-steps__media { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   6 — What is in the box
   -------------------------------------------------------------------------- */
.jt-box {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.jt-box__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--jt-radius-lg);
  display: block;
}
.jt-box__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 4px 22px;
  border-radius: var(--jt-radius-lg);
  background: var(--jt-surface);
  box-shadow: var(--jt-shadow-sm);
}
.jt-box__list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  font-family: var(--jt-body);
}
.jt-box__list li + li { box-shadow: inset 0 1px 0 var(--jt-hairline); }
.jt-box__list strong { font-size: 0.9375rem; color: var(--jt-ink); }
.jt-box__list span { font-size: 0.875rem; line-height: 1.6; color: var(--jt-ink-2); }
.jt-box__note {
  margin: 22px 0 26px;
  padding: 16px 18px;
  border-radius: var(--jt-radius);
  background: var(--jt-fill);
  font-family: var(--jt-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--jt-ink);
}
@media screen and (max-width: 860px) {
  .jt-box { grid-template-columns: minmax(0, 1fr); }
  .jt-box__media img { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------------------------
   7 — Categories
   -------------------------------------------------------------------------- */
.jt-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--jt-gap);
}
.jt-cat {
  position: relative;
  display: block;
  border-radius: var(--jt-radius);
  overflow: hidden;
  background: var(--jt-sand);
  aspect-ratio: 3 / 4;
  text-decoration: none;
}
.jt-cat img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--jt-ease); }
.jt-cat:hover img { transform: scale(1.04); }
.jt-cat__name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 16px 16px;
  background: linear-gradient(to top, rgba(25, 22, 20, 0.72), transparent);
  color: #fff;
  font-family: var(--jt-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 900px) { .jt-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   8 — Reviews
   -------------------------------------------------------------------------- */
.jt-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--jt-gap);
  margin-top: 36px;
}
.jt-review {
  margin: 0;
  padding: 30px 28px;
  background: var(--jt-surface);
  box-shadow: var(--jt-shadow);
  border-radius: var(--jt-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.jt-review__stars { color: var(--jt-plum); letter-spacing: 0.18em; font-size: 0.875rem; }
.jt-review blockquote {
  margin: 0;
  font-family: var(--jt-display);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--jt-ink);
  letter-spacing: -0.01em;
}
.jt-review figcaption {
  margin-top: auto;
  font-family: var(--jt-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jt-ink-2);
}
@media screen and (max-width: 860px) { .jt-reviews { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   9 — FAQ
   -------------------------------------------------------------------------- */
.jt-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.jt-faq__contact {
  margin: 18px 0 0;
  font-family: var(--jt-body);
  font-size: 0.875rem;
  color: var(--jt-ink-2);
}
.jt-faq__contact a { color: var(--jt-plum); text-decoration: underline; text-underline-offset: 3px; }
.jt-faq__list {
  padding: 2px 24px;
  border-radius: var(--jt-radius-lg);
  background: var(--jt-surface);
  box-shadow: var(--jt-shadow-sm);
}
.jt-faq__item + .jt-faq__item { box-shadow: inset 0 1px 0 var(--jt-hairline); }
.jt-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--jt-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--jt-ink);
}
.jt-faq__item summary::-webkit-details-marker { display: none; }
.jt-faq__item summary::after {
  content: "+";
  flex: none;
  font-family: var(--jt-body);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--jt-plum);
  transition: transform 0.2s var(--jt-ease);
}
.jt-faq__item[open] summary::after { transform: rotate(45deg); }
.jt-faq__item p {
  margin: 0;
  padding: 0 40px 20px 0;
  font-family: var(--jt-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--jt-ink-2);
}
@media screen and (max-width: 860px) { .jt-faq { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   10 — Closer
   -------------------------------------------------------------------------- */
.jt-closer {
  margin: var(--jt-section-space) 0 0;
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 72px);
  text-align: center;
}
.jt-closer .jt-eyebrow { text-align: center; }
.content .jt-closer__title {
  text-align: center;
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
  line-height: 0.98;
}
.jt-closer__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Motion and focus
   -------------------------------------------------------------------------- */
.jt-btn:focus-visible,
.jt-card:focus-visible,
.jt-cat:focus-visible,
.jt-faq__item summary:focus-visible {
  outline: 2px solid var(--jt-plum);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .jt-card__image, .jt-cat img, .jt-faq__item summary::after { transition: none; }
  .jt-card:hover .jt-card__image, .jt-cat:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   0 — Promo bar and offer callouts
   The one place on the page where colour is allowed to be loud.
   -------------------------------------------------------------------------- */
.jt-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 4px;
  padding: 16px 24px;
  border-radius: var(--jt-radius-lg);
  background: var(--jt-plum-deep);
  color: #FBF3F7;
  font-family: var(--jt-body);
}
.jt-promo__offer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.jt-promo__deal {
  font-family: var(--jt-display);
  font-size: 1.125rem;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #fff;
}
.jt-promo__ship {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: rgba(251, 243, 247, 0.82);
}
.jt-promo__ship { margin-left: auto; }
.jt-promo__cta {
  flex: none;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--jt-ivory);
  color: var(--jt-plum-deep);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.2s var(--jt-ease);
}
.jt-promo__cta:hover { background: var(--jt-rose); }
@media screen and (max-width: 760px) {
  .jt-promo { padding: 14px 18px; gap: 10px 16px; }
  .jt-promo__ship { margin-left: 0; width: 100%; }
  .jt-promo__cta { width: 100%; text-align: center; }
}

.jt-offer-note {
  margin: -12px 0 28px;
  padding: 14px 18px;
  border-radius: var(--jt-radius);
  background: var(--jt-rose-pale);
  font-family: var(--jt-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--jt-ink);
}
.jt-offer-note strong { color: var(--jt-plum-deep); }

.jt-box__offer {
  margin: 14px 0 0;
  font-family: var(--jt-body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--jt-plum-deep);
  font-weight: 600;
}

.jt-closer__offer {
  margin: 18px 0 0;
  font-family: var(--jt-body);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jt-ink-2);
}

/* --------------------------------------------------------------------------
   2b — Canadian company banner
   -------------------------------------------------------------------------- */
.jt-canada {
  display: grid;
  grid-template-columns: auto minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin-top: var(--jt-section-space);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--jt-radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--jt-rose-pale) 0%, var(--jt-sand) 70%);
  box-shadow: var(--jt-shadow);
}
.jt-canada__mark { flex: none; width: 54px; height: 54px; color: var(--jt-plum); }
.jt-canada__mark svg { width: 100%; height: 100%; display: block; }
.content .jt-canada__title {
  margin: 0;
  font-family: var(--jt-display);
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--jt-ink);
  text-align: left;
}
.jt-canada__copy {
  margin: 14px 0 0;
  font-family: var(--jt-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--jt-ink-2);
  max-width: 52ch;
}
.jt-canada__facts { list-style: none; margin: 0; padding: 0; }
.jt-canada__facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  padding: 12px 16px;
  border-radius: var(--jt-radius);
  background: rgba(254, 250, 247, 0.66);
  font-family: var(--jt-body);
}
.jt-canada__facts li:last-child { margin-bottom: 0; }
.jt-canada__facts strong { font-size: 0.875rem; color: var(--jt-plum-deep); }
.jt-canada__facts span { font-size: 0.8125rem; line-height: 1.5; color: var(--jt-ink-2); }
@media screen and (max-width: 900px) {
  .jt-canada { grid-template-columns: auto minmax(0, 1fr); }
  .jt-canada__facts { grid-column: 1 / -1; }
}
@media screen and (max-width: 560px) {
  .jt-canada { grid-template-columns: minmax(0, 1fr); }
  .jt-canada__mark { width: 40px; height: 40px; }
}

/* --------------------------------------------------------------------------
   Logo-matched refinements
   Italic display accents echo the wordmark; the wordmark itself, when the
   shop name is set as text rather than an image, picks up the same face.
   -------------------------------------------------------------------------- */
body[data-bc-page-type="home"] .store-name.text a {
  font-family: var(--jt-display);
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--jt-plum-deep);
  text-transform: lowercase;
}
.jt-hero__title em,
.jt-section__title em,
.jt-closer__title em { font-style: italic; color: var(--jt-plum); }

/* --------------------------------------------------------------------------
   Logo
   The home page used to suppress the sitewide announcement bar because it
   carried its own promo pill. The pill is gone and the bar now runs on every
   page, so that override was removed rather than left to fight this file.
   -------------------------------------------------------------------------- */

.jt-closer__logo {
  display: block;
  width: clamp(160px, 22vw, 240px);
  height: auto;
  margin: 0 auto 8px;
}
body[data-bc-page-type="home"] .store-name.image img { max-height: var(--logo-max-height, 120px); }

/* --------------------------------------------------------------------------
   Canadian owned badge
   Sits above the headline, the first thing read after the promo bar.
   The flag is an emoji, so it renders as a flag on Apple and Android but as
   the letters CA on Windows, which has no flag glyphs. The word carries the
   meaning either way, and the maple leaf in the Canadian panel further down
   is drawn as SVG so the mark itself never depends on emoji support.
   -------------------------------------------------------------------------- */
.jt-flagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 7px 15px 7px 11px;
  border-radius: 999px;
  background: var(--jt-rose-pale);
  box-shadow: var(--jt-shadow-sm);
  font-family: var(--jt-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jt-plum-deep);
}
.jt-flagline__flag {
  font-size: 1.0625rem;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* --------------------------------------------------------------------------
   Link-state lockdown
   The stock theme underlines every link on hover and repaints it with
   --secondary-text-color. On this page the links are buttons and cards, so
   they opt out explicitly. :visited is listed on purpose: a:visited scores
   higher than a plain class, so without it a clicked button changes colour.
   -------------------------------------------------------------------------- */
.jt-btn, .jt-btn:link, .jt-btn:visited, .jt-btn:hover, .jt-btn:focus-visible, .jt-btn:active,
.jt-card, .jt-card:link, .jt-card:visited, .jt-card:hover, .jt-card:focus-visible,
.jt-cat, .jt-cat:link, .jt-cat:visited, .jt-cat:hover, .jt-cat:focus-visible,
.jt-section__link, .jt-section__link:link, .jt-section__link:visited,
.jt-section__link:hover, .jt-section__link:focus-visible,
.jt-promo__cta, .jt-promo__cta:link, .jt-promo__cta:visited,
.jt-promo__cta:hover, .jt-promo__cta:focus-visible,
.jt-closer__logo, .jt-compare__row a {
  text-decoration: none;
}

/* These carry an `a` qualifier for a reason. The stock sheet has
       a:hover, a:visited:hover { color: var(--secondary-text-color); underline }
   and `a:visited:hover` scores 0,2,1, which beats a bare `.jt-btn--solid:hover`
   at 0,2,0. The result was a solid button whose label turned grey-mauve on hover,
   but only for people who had already visited the target, so it looked intermittent.
   `a.jt-btn--solid:visited:hover` scores 0,3,1 and settles it. The same rule also
   underlines buttons on hover, which is why text-decoration is pinned here too. */
a.jt-btn--solid, a.jt-btn--solid:link, a.jt-btn--solid:visited,
a.jt-btn--solid:hover, a.jt-btn--solid:visited:hover,
a.jt-btn--solid:focus-visible, a.jt-btn--solid:active,
.jt-btn--solid { color: #FEF9FB; text-decoration: none; }

a.jt-btn--line, a.jt-btn--line:link, a.jt-btn--line:visited,
a.jt-btn--line:hover, a.jt-btn--line:visited:hover,
a.jt-btn--line:focus-visible, a.jt-btn--line:active,
.jt-btn--line { color: var(--jt-plum-deep); text-decoration: none; }

.jt-promo__cta, .jt-promo__cta:link, .jt-promo__cta:visited,
.jt-promo__cta:hover, .jt-promo__cta:focus-visible { color: var(--jt-plum-deep); }

a.jt-section__link, a.jt-section__link:link, a.jt-section__link:visited { color: var(--jt-ink); }
a.jt-section__link:hover, a.jt-section__link:visited:hover,
a.jt-section__link:focus-visible { color: var(--jt-plum-deep); text-decoration: none; }

.jt-card, .jt-card:link, .jt-card:visited, .jt-card:hover { color: inherit; }
.jt-cat, .jt-cat:link, .jt-cat:visited, .jt-cat:hover { color: inherit; }

/* The one link on the page that should keep an underline. */
.jt-faq__contact a, .jt-faq__contact a:visited, .jt-faq__contact a:hover {
  color: var(--jt-plum);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   SITE-WIDE BRAND PASS
   --------------------------------------------------------------------------
   The landing page is styled by the .jt-* rules above. Product, Products,
   Cart, Contact and Maintenance keep the stock theme's own markup, so they
   are brought into the same language here instead: pill buttons, borderless
   fields, soft shadows. No HTML changes needed on those pages.
   ========================================================================== */

/* ---- buttons: same pill as the landing page ---------------------------- */
.button, a.button, button.button {
  min-height: 0;
  padding: 18px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--jt-plum-deep);
  color: #FEF9FB;
  font-family: var(--jt-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(44, 32, 41, 0.14), 0 8px 22px rgba(110, 65, 96, 0.26);
  transition: background-color 0.22s var(--jt-ease), box-shadow 0.22s var(--jt-ease),
              transform 0.22s var(--jt-ease);
}
.button:hover, a.button:hover, button.button:hover,
.button:focus-visible, a.button:focus-visible, button.button:focus-visible {
  background: #7B4A69;
  color: #FEF9FB;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(44, 32, 41, 0.16), 0 14px 34px rgba(110, 65, 96, 0.32);
}
.button:active, a.button:active, button.button:active { transform: scale(0.975); }
.button.minimal-button, a.button.minimal-button {
  background: var(--jt-fill);
  color: var(--jt-plum-deep);
  box-shadow: none;
}
.button.minimal-button:hover, a.button.minimal-button:hover {
  background: var(--jt-fill-strong);
  color: var(--jt-plum-deep);
}

/* ---- fields: tinted fills, no outlines --------------------------------- */
input, textarea, .select, .search-modal__input {
  border: 0;
  background: var(--jt-fill);
  border-radius: var(--jt-radius);
  color: var(--jt-ink);
}
input:focus, textarea:focus, .select:focus-within, .search-modal__input:focus {
  outline: 2px solid var(--jt-plum);
  outline-offset: 2px;
}
.contact-form input:active, .contact-form input:focus,
.contact-form textarea:active, .contact-form textarea:focus { border: 0; }
.cart-item .qty-holder {
  border: 0;
  background: var(--jt-fill);
  border-radius: 999px;
}
header .header-nav .category-dropdown {
  border: 0;
  background: var(--jt-surface);
  border-radius: var(--jt-radius-lg);
  box-shadow: var(--jt-shadow);
}
a.skip-link { border: 0; background: var(--jt-plum-deep); color: #FEF9FB; }

/* ---- product grids on Products, Product and search --------------------- */
.product-list-image-container {
  border-radius: var(--jt-radius-lg);
  box-shadow: var(--jt-shadow-sm);
  transition: box-shadow 0.3s var(--jt-ease);
}
.product-list-image { border-radius: var(--jt-radius-lg); }
@media (hover: hover) {
  a.product-list-link:hover .product-list-image-container { box-shadow: var(--jt-shadow-lift); }
  /* the stock theme underlines the name on hover; use colour instead */
  a.product-list-link:hover .product-list-thumb-name {
    text-decoration: none;
    color: var(--jt-plum-deep);
  }
}
.product-list-thumb-name { font-weight: 600; }
.product-list-thumb-status {
  border-radius: 999px;
  box-shadow: var(--jt-shadow-sm);
}

/* ---- page titles use the display face ---------------------------------- */
.content h1, .page-header, .featured-title {
  font-family: var(--jt-display);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   JUJU TIPS PALETTE OVERRIDE
   --------------------------------------------------------------------------
   Big Cartel 的 13 个主题颜色只能在 Customize Design 的取色器里改，没有可粘贴
   的代码框。这一块把它们渲染出来的 CSS 变量原地覆盖掉，效果等同于在取色器里
   逐项填写。原厂 Trace 主题的蓝灰配色只作用在首页以外的页面，所以过去 product、
   contact、products、cart 是白底蓝灰字，跟首页对不上。

   注意：后台取色器里显示的仍然是原厂旧值，因为这里是 CSS 层覆盖，没有回写设定。
   哪天真的去取色器里填了，把这一块删掉即可，两者数值完全一致。

   数值来源是 settings.json，全部取样自 logo.png，不是猜的。
   ========================================================================== */
:root {
  --background-color: #F8F3EE;
  --primary-heading-text-color: #2C2029;
  --primary-text-color: #2C2029;
  --secondary-text-color: #6E6169;
  --border-color: #2C2029;

  --welcome-background-color: #EFE3E9;
  --welcome-text-color: #2C2029;

  --badge-text-color-primary: #FEFAF7;
  --badge-background-color-primary: #6E4160;
  --badge-text-color-secondary: #2C2029;
  --badge-background-color-secondary: #EFE3E9;

  --inventory-status-text-color: #875D78;

  --announcement-background-color: #6E4160;
  --announcement-text-color: #FBF3F7;

  /* 原厂主题引用了这个变量却从没定义它，导致按钮 hover 和页脚描边整站失效。
     值是 --primary-text-color 的 RGB 分量。 */
  --primary-text-color-rgb: 44, 32, 41;
}


/* ==========================================================================
   SITEWIDE OFFER BAR
   --------------------------------------------------------------------------
   Rides on the stock .announcement-message so the close button, the eight-hour
   dismissal cookie and the .visible toggle all keep working. Only the inside
   is restyled. Full bleed on purpose: a rounded card floating above the header
   reads as a mistake, while an edge-to-edge strip reads as a banner.
   ========================================================================== */
.jt-offerbar { padding-block: 13px; }

.jt-offerbar .announcement-message__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  line-height: 1.3;
}

.jt-offerbar__deal {
  font-family: var(--jt-display);
  font-style: italic;
  font-size: 1.02em;
  letter-spacing: 0.01em;
}
.jt-offerbar__sep  { opacity: 0.45; }
.jt-offerbar__ship {
  font-family: var(--jt-body);
  font-size: 0.82em;
  letter-spacing: 0.02em;
  opacity: 0.92;
}

/* The base sheet styles every link inside the bar with
   `.announcement-message a { color: var(--announcement-text-color); underline }`.
   That selector scores 0,1,1. A bare `.jt-offerbar__cta` scores 0,1,0 and loses,
   which painted the label ivory on an ivory pill and made it invisible. Qualifying
   with the element takes this to 0,2,1 so the button wins on its own terms. */
.jt-offerbar a.jt-offerbar__cta,
.jt-offerbar a.jt-offerbar__cta:visited {
  font-family: var(--jt-body);
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--jt-plum-deep);
  background: var(--jt-surface);
  padding: 7px 15px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.18s var(--jt-ease), box-shadow 0.18s var(--jt-ease);
}
.jt-offerbar a.jt-offerbar__cta:hover,
.jt-offerbar a.jt-offerbar__cta:visited:hover {
  color: var(--jt-plum-deep);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

@media screen and (max-width: 668px) {
  .jt-offerbar { padding: 11px 46px; }
  /* The shipping line is the first thing to go when the row gets tight. It is
     repeated in the footer and on every product page, the offer is not. */
  .jt-offerbar__ship,
  .jt-offerbar__sep { display: none; }
  .jt-offerbar a.jt-offerbar__cta { font-size: 0.68em; padding: 6px 13px; }
}

/* --------------------------------------------------------------------------
   About page prose

   The About page is rendered from layout.html, not from a template of its own,
   because Big Cartel gives custom pages no template. This is the only new
   component it needs; everything else on that page reuses .jt-section,
   .jt-canada and .jt-closer.

   .jt-prose p and .content p carry the same specificity, so this block only
   wins because it sits at the end of the file. Keep it last.
   -------------------------------------------------------------------------- */
.jt-prose {
  max-width: 68ch;
  margin-top: 30px;
}
.jt-prose p {
  margin: 0 0 1.15em;
  font-family: var(--jt-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--jt-ink-2);
}
.jt-prose p:first-child {
  font-size: 1.1875rem;
  color: var(--jt-ink);
}
.jt-prose p:last-child { margin-bottom: 0; }

@media screen and (max-width: 700px) {
  .jt-prose { margin-top: 22px; }
  .jt-prose p { font-size: 1rem; line-height: 1.7; }
  .jt-prose p:first-child { font-size: 1.0625rem; }
}