/*****************************
 * 
    Production / Development Notes:
 *
******************************/
/*  
* 
    Z Index Guide:
    Let's extend this guide with specific zones for different sub-sections within these
    I.E.: Interface Buttons: 1001–1010, Modals:  1011–1020;

    Zones:
    Zone 1: [0-999]  Elements within the Site (pins, etc...)
        1000-1010: Interface Areas:  <button-area> > <button>, <drop-area>, etc...
    Zone 2: [1000-2000]:  Interface that always goes above the site (alert modal, edit button, quick view modal, etc...)

*/

/* Hide scrollbar for Chrome, Safari and Opera */
/* Keep these selectors separate as some of the more "specific" pseudo-selectors don't support comma-separated selector names */
html.editing::-webkit-scrollbar {
  display: none !important;
}

body.editing::-webkit-scrollbar {
  display: none !important;
}

/* Hide scrollbar for IE, Edge and Firefox */
html.editing,
body.editing {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

body.wf-initial-load *,
html.wf-initial-load * {
  color: transparent !important;
  -webkit-text-stroke: 0px transparent;
  text-stroke: 0 transparent;
  text-shadow: 0 0 transparent;
}

html.wf-initial-load hr {
  background: none !important;
}

/*****************************
    Frontend Interface
******************************/
body {
  --baseColor-accent: #ff0000;
  --baseColor-accent-rgb: 255, 0, 0;
  --baseColor-accent-reverse-rgb: 255, 255, 255;
}

/*****************************
	Resets / Browser Fixes
******************************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:focus {
  outline: 0;
}

select,
select * {
  text-rendering: auto !important;
}

/*****************************
	Body / Custom HTML
******************************/
html,
body {
  min-height: var(--viewport-height, 100vh);
  margin: 0;
  padding: 0;
}

html {
  --mobile-scale: 1;
  font-size: var(--base-size);
  touch-action: manipulation;

  position: relative;
  background-color: rgb(255, 255, 255);
}

html.mobile {
  font-size: calc(var(--base-size) * var(--mobile-scale));
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--viewport-height, 100vh);
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

body.no-scroll {
  overflow: hidden;
}

customhtml > * {
  position: relative;
  z-index: 10;
}

/*****************************
	Site Content
******************************/

.page a.active,
bodycopy * a {
  text-decoration-color: unset;
  -webkit-text-decoration-color: unset;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 100%;
  position: relative;
  flex-grow: 1;
  border-color: transparent;
  border-width: 0;
  /*    width: 100%;*/
}

.pages {
  width: 100%;
  flex: 1 0 auto;
}

@supports (height: 100svh) {
  .page.stacked-page {
    --viewport-height: 100svh;
  }

  .page.stacked-page + .page.stacked-page {
    --viewport-height: 100vh;
  }
}

.overlay-content {
  mix-blend-mode: var(--overlay-mix, normal);
}

.page {
  --split-backdrop-height: calc(var(--viewport-height) / 2);
  --split-content-height: calc(
    var(--viewport-height) - var(--split-backdrop-height)
  );
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  max-width: 100%;
  width: 100%;
  flex: 0;
  mix-blend-mode: var(--page-mix, normal);
}

.page.has-backdrop-filter {
  background-color: rgba(0, 0, 0, 0.01);
  backdrop-filter: var(--page-backdrop-filter, none);
  -webkit-backdrop-filter: var(--page-backdrop-filter, none);
}

.overlay-content .page {
  mix-blend-mode: unset;
}

.mobile .page {
  flex-wrap: wrap;
}

.page.overlay {
  position: absolute;
}

.page.pinned-top,
.page.pinned-bottom {
  flex: 0;
  z-index: 2;
  left: 0;
  right: 0;
}

/* Temporary fix for bottom pins not rendering in safari */
.page.pinned-bottom {
  transform: unset;
}
.page.pinned-bottom.loading {
  will-change: transform;
  transform: translate(0, 0, 0);
}

.page.pinned-top {
  top: 0;
}

.page.pinned-bottom {
  bottom: 0;
}

.page.fixed {
  position: fixed;
  max-height: var(--viewport-height, 100vh);
  /*    overflow: hidden;*/
}

.page.fixed .page-layout {
  max-height: var(--viewport-height, 100vh);
}

/* Pins that exceed the height of the viewport allow scroll */
.page.fixed.allow-scroll .page-content {
  max-height: var(--viewport-height, 100vh);

  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  -webkit-overflow-scrolling: touch;

  overflow-y: auto;
  overflow-x: hidden;
  /*pointer-events: auto;*/
}

.page.fixed.allow-scroll .page-content {
  pointer-events: auto;
}

.page.fixed.allow-scroll .page-content::-webkit-scrollbar {
  width: 0;
  background: 0 0;
  display: none;
}

.page.overlay {
  position: absolute;
}

.page.overlay,
.page.overlay .page-layout,
.page.fixed,
.page.fixed .page-layout {
  pointer-events: none;
}

body.editing .page.overlay .page-content,
body.editing .page.overlay .page-content *,
body.editing .page.fixed .page-content,
body.editing .page.fixed .page-content *,
body.editing .page.fixed.allow-scroll .page-content,
body.editing .page.fixed.allow-scroll .page-content *,
body.editing .page:not([editing="true"]) {
  /*pointer-events: none;*/
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body.editing .page.overlay[editing="true"] .page-content,
body.editing .page.overlay[editing="true"] .page-content *,
body.editing .page.fixed[editing="true"] .page-content,
body.editing .page.fixed[editing="true"] .page-content *,
body.editing .page.fixed.allow-scroll[editing="true"] .page-content,
body.editing .page.fixed.allow-scroll[editing="true"] .page-content * {
  pointer-events: auto;
  -moz-user-select: auto;
  -webkit-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

/* re-associate pointer events with elements in overlay pinned pages */
.page.fixed .page-content bodycopy a,
.page.overlay .page-content bodycopy a,
.page.fixed .page-content bodycopy img,
.page.overlay .page-content bodycopy img,
.page.fixed .page-content bodycopy iframe,
.page.overlay .page-content bodycopy iframe,
.page.fixed .page-content bodycopy video,
.page.overlay .page-content bodycopy video,
.page.fixed .page-content bodycopy audio,
.page.overlay .page-content bodycopy audio,
.page.fixed .page-content bodycopy input,
.page.overlay .page-content bodycopy input,
.page.fixed .page-content bodycopy button,
.page.overlay .page-content bodycopy button,
.page.fixed .page-content bodycopy audio-player,
.page.overlay .page-content bodycopy audio-player,
.page.fixed .page-content bodycopy shop-product,
.page.overlay .page-content bodycopy shop-product,
.page.fixed .page-content bodycopy details,
.page.overlay .page-content bodycopy details,
.page.overlay .page-content bodycopy .linked,
.page.overlay .page-content bodycopy .zoomable,
.page.fixed .page-content bodycopy .linked,
.page.fixed .page-content bodycopy .zoomable {
  pointer-events: auto;
}

.page-layout {
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 0%;
  mix-blend-mode: var(--page-layout-mix, normal);
}

.page-content {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: flex-start;
  border-color: transparent;
  border-width: 0;
  width: 100%;
  filter: var(--page-content-filter, none);
  -webkit-filter: var(--page-content-filter, none);
}

.page-content.has-content-backdrop-filter {
  backdrop-filter: var(--page-content-backdrop-filter, none);
  -webkit-backdrop-filter: var(--page-content-backdrop-filter, none);
}

.page-content.has-content-backdrop-filter:has(.empty-editor)::before {
  content: " ";
  display: block;
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.01);
}

.page.accepts-pointer-events *,
.page-content.accepts-pointer-events,
.page-content.accepts-pointer-events * {
  pointer-events: auto;
}

/* position types for pins */
[position="fixed"] {
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100vh;
  pointer-events: none;
}

[position="fixed"] bodycopy {
  pointer-events: auto;
}

[position="absolute"] {
  position: absolute;
}

[position="relative"] {
  position: relative;
}

.top-pins [position="fixed"],
.top-pins [position="absolute"] {
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.bottom-pins [position="fixed"],
.bottom-pins [position="absolute"] {
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

h1,
h2,
h3,
h4,
h5,
h6,
h7,
h8,
h9 {
  contain: layout;
}

.caption-background h1,
.caption-background h2,
.caption-background h3,
.caption-background h4,
.caption-background h5,
.caption-background h6,
.caption-background h7,
.caption-background h8,
.caption-background h9 {
  contain: none;
}

/*****************************
	Overlays
******************************/

.overlay-content {
  position: fixed;
  inset: 0;
  pointer-events: none;
  max-height: 100dvh;
  --viewport-height: 100dvh;
  overflow: auto;
}

body.has-scrollable-overlay .content media-item::part(iframe),
body.has-scrollable-overlay
  .content
  .behind-top-scrollable-overlay
  media-item::part(iframe) {
  /* z-index needed because safari tends to not-ignore pointer-events on iframe */
  pointer-events: none;
  z-index: -1000;
}

body.has-scrollable-overlay
  .overlay-content.top-overlay
  media-item::part(iframe) {
  pointer-events: auto;
  z-index: unset;
}

.overlay-content::-webkit-scrollbar {
  display: none;
}

.overlay-content .page-layout {
  min-height: fit-content;
}

.overlay-content .page,
.overlay-content .page-content,
.overlay-content .page-layout {
  pointer-events: auto;
}

.overlay-content.is-passthrough-overlay .page,
.overlay-content.is-passthrough-overlay .page-layout {
  pointer-events: none;
}

.overlay-content.is-passthrough-overlay .page-content {
  pointer-events: auto;
}

.overlay-content.is-content-passthrough-overlay .page,
.overlay-content.is-content-passthrough-overlay .page-layout,
.overlay-content.is-content-passthrough-overlay .page-content,
.overlay-content.is-content-passthrough-overlay .page-content bodycopy {
  pointer-events: none;
}

.overlay-content.is-content-passthrough-overlay
  .page-content
  bodycopy
  > *:not(column-set),
.overlay-content.is-content-passthrough-overlay
  .page-content
  bodycopy
  column-unit
  * {
  pointer-events: auto;
}

body.editing .overlay-content .page[editing="true"] bodycopy,
body.editing .overlay-content .page[editing="true"] bodycopy > * {
  pointer-events: auto;
}

/* Overlay Animation */
.overlay-content.overlay-open.overlay-animating .page {
  will-change: opacity, background-color;
  animation: overlayOpen var(--overlay-open-duration)
    var(--overlay-open-easing, "ease-in-out");
}

.overlay-content.overlay-open
  .page:has(.has-content-backdrop-filter):not(:has(.backdrop)) {
  will-change: background-color;
  animation: overlayOpenWithoutOpacity var(--overlay-open-duration)
    var(--overlay-open-easing, "ease-in-out");
}

.overlay-content.overlay-close.overlay-animating .page {
  will-change: opacity, background-color;
  animation: overlayClose var(--overlay-close-duration)
    var(--overlay-close-easing, "ease-in-out");
}

.overlay-content.overlay-close
  .page:has(.has-content-backdrop-filter):not(:has(.backdrop)) {
  will-change: background-color;
  animation: overlayCloseWithoutOpacity var(--overlay-close-duration)
    var(--overlay-close-easing, "ease-in-out");
}

.overlay-content.overlay-open.overlay-animating .page-content {
  will-change: transform, clip-path;
  animation: overlayOpenContent var(--overlay-open-duration)
    var(--overlay-open-easing, "ease-in-out");
}

.overlay-content.overlay-open.overlay-animating
  .page-content.has-content-backdrop-filter {
  will-change: transform, clip-path, opacity;
  animation: overlayOpenContent var(--overlay-open-duration)
      var(--overlay-open-easing, "ease-in-out"),
    overlayOpenOpacity var(--overlay-open-duration)
      var(--overlay-open-easing, "ease-in-out");
}

.overlay-content.overlay-close.overlay-animating .page-content {
  will-change: transform, clip-path;
  animation: overlayCloseContent var(--overlay-close-duration)
    var(--overlay-close-easing, "ease-in-out");
}

.overlay-content.overlay-close.overlay-animating
  .page-content.has-content-backdrop-filter {
  will-change: transform, clip-path, opacity;
  animation: overlayCloseContent var(--overlay-close-duration)
      var(--overlay-close-easing, "ease-in-out"),
    overlayCloseOpacity var(--overlay-close-duration)
      var(--overlay-close-easing, "ease-in-out");
}

/* Overlay Keyframes */

@keyframes overlayOpen {
  from {
    opacity: var(--overlay-open-from-opacity, 1);
    background-color: var(--overlay-open-from-background-color, transparent);
  }
  to {
    opacity: 1;
  }
}

@keyframes overlayOpenWithoutOpacity {
  from {
    background-color: var(--overlay-open-from-background-color, transparent);
  }
}

@keyframes overlayOpenOpacity {
  from {
    opacity: var(--overlay-open-from-opacity, 1);
  }
  to {
    opacity: 1;
  }
}

@keyframes overlayOpenContent {
  from {
    transform: var(--overlay-open-content-from-transform, translate3d(0, 0, 0));
    clip-path: var(--overlay-open-content-from-clip-mask, inset(0% 0% 0% 0%));
  }
  to {
    transform: translate3d(0, 0, 0);
    clip-path: var(--overlay-open-content-to-clip-mask, inset(0% 0% 0% 0%));
  }
}

@keyframes overlayClose {
  to {
    opacity: var(--overlay-close-to-opacity, 1);
    background-color: var(--overlay-close-to-background-color, transparent);
  }
}

@keyframes overlayCloseWithoutOpacity {
  to {
    background-color: var(--overlay-close-to-background-color, transparent);
  }
}

@keyframes overlayCloseOpacity {
  to {
    opacity: var(--overlay-close-to-opacity, 1);
  }
}

@keyframes overlayCloseContent {
  from {
    transform: translate3d(0, 0, 0);
    clip-path: var(--overlay-close-content-from-clip-mask, inset(0% 0% 0% 0%));
  }
  to {
    transform: var(--overlay-close-content-to-transform, translate3d(0, 0, 0));
    clip-path: var(--overlay-close-content-to-clip-mask, inset(0% 0% 0% 0%));
  }
}

/*****************************
    Backdrops
******************************/

.backdrop {
  contain: layout;
}

.has-backdrop-filter .backdrop-contents::after {
  backdrop-filter: var(--page-backdrop-filter, none);
  -webkit-backdrop-filter: var(--page-backdrop-filter, none);
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.backdrop:not(.clip) {
  -webkit-transform: translate(0px, 0px);
}

.backdrop > .backdrop-contents {
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  position: sticky;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
}

.backdrop-contents.loaded {
  opacity: 1;
}

.backdrop.clip .backdrop-contents.above,
.backdrop.clip .backdrop-contents.below {
  display: none;
}

.backdrop.clip .backdrop-contents {
  will-change: display, opacity, transform, clip-path;
}

.backdrop > .backdrop-contents [data-backdrop] {
  height: 100%;
}

.backdrop.clip {
  contain: none;
  overflow: hidden;
  clip-path: inset(0% 0% 0% 0%);
}

.clip > .backdrop-contents {
  height: calc(100vh + 0.5px);
  width: var(--backdrop-width, 100%);
  position: fixed;
}

.backdrop {
  flex-shrink: 0;
  width: 100%;
  order: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/** acts like .page **/
.wallpaper-navigation {
  position: absolute;
  inset: var(--pin-padding-top, 0) 0 var(--pin-padding-bottom, 0) 0;
  z-index: 10;
  pointer-events: none !important;

  /** this emulates .page **/
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 100%;
  width: 100%;
  flex: 0;
}

.wallpaper-navigation .page-content,
.wallpaper-navigation .page-layout {
  background: none;
  background-color: transparent;
  visibility: hidden;
}

.wallpaper-navigation .backdrop.clip {
  contain: none;
  overflow: hidden;
  clip-path: inset(0% 0% 0% 0%);
}

.wallpaper-navigation .backdrop.clip > .wallpaper-slideshow {
  position: fixed;
}

.wallpaper-navigation .wallpaper-slideshow {
  top: 0;
  bottom: 0;
  position: sticky;

  transform: translate3d(0, 0, 0);

  height: calc(100% + 0.5px);
  max-height: calc(var(--viewport-height, 100vh) + 0.5px);
}

/* Slideshow Navigation */

::part(slideshow-nav) {
  transition: opacity 222ms ease-in-out;
  pointer-events: none;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;

  --button-size: 30px;
  --button-inset: 20px;
  --button-icon-color: rgba(255, 255, 255, 0.9);
  --button-icon-scale: 1;
  --button-icon-stroke-width: 1.5px;
  --button-icon-stroke-linecap: butt;
  --button-background-color: rgba(87, 87, 87, 0.35);
  --button-background-radius: 50%;
  --button-active-opacity: 0.7;
}

::part(slideshow-nav-previous-button) {
  pointer-events: auto;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

::part(slideshow-nav-next-button) {
  pointer-events: auto;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

::part(slideshow-nav-close-button) {
  pointer-events: auto;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

::part(slideshow-nav-prev) {
  position: absolute;

  top: 0;
  bottom: 0;
  left: var(--button-inset, 0px);

  margin: auto;

  width: 36px;
  height: 36px;
}

::part(slideshow-nav-next) {
  position: absolute;

  top: 0;
  bottom: 0;
  right: var(--button-inset, 0px);

  margin: auto;

  width: 36px;
  height: 36px;

  transform: scaleX(-1);
}

::part(slideshow-nav-close) {
  position: absolute;

  top: var(--button-inset, 0px);
  right: var(--button-inset, 0px);

  margin: auto;

  width: 36px;
  height: 36px;
}

::part(slideshow-nav-prev),
::part(slideshow-nav-next),
::part(slideshow-nav-close) {
  height: var(--button-size);
  width: var(--button-size);
}

::part(slideshow-nav-previous-button):active,
::part(slideshow-nav-next-button):active,
::part(slideshow-nav-close-button):active {
  opacity: var(--button-active-opacity, 0.7);
}

::part(slideshow-nav-background) {
  stroke: none !important;
  fill: var(--button-background-color);
  rx: var(--button-background-radius);
}

::part(slideshow-nav-arrow),
::part(slideshow-nav-x) {
  fill: none !important;
  stroke: var(--button-icon-color);
  stroke-width: var(--button-icon-stroke-width);
  stroke-linecap: var(--button-icon-stroke-linecap);

  transform: scale(var(--button-icon-scale));
  transform-origin: center;
}

/*****************************
    Page Content 
******************************/

bodycopy {
  display: block;
  contain: layout;
  word-wrap: break-word;
  position: relative;
  max-width: 100%;
  width: 100%;
  -webkit-nbsp-mode: normal;
  --font-scale: 1;
}

bodycopy * {
  border-width: 0;
}

a {
  color: inherit;
}

a.image-link,
a.image-link:hover,
a.image-link:active,
a.icon-link,
a.icon-link:hover,
a.icon-link:active {
  border-bottom: none;
  text-decoration: none;
}

/* Admin links have no down state */
[contenteditable="true"] a:active,
[contenteditable="true"] .linked:active,
[contenteditable="true"] .zoomable:active {
  opacity: 1;
}

/*Strikethrough*/
s * {
  text-transform: inherit;
}

/* Fix for small tag inside of flex elements */
small {
  max-width: 100%;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

.small-caps {
  font-variant: small-caps;
  text-transform: lowercase;
}

.no-wrap {
  white-space: nowrap;
}

a[rel="quick-view"] {
  /*    display: inline-block;*/
}

.page_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/** Media item **/

media-item::part(placeholder),
img.media-item-placeholder {
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
}

media-item::part(placeholder-svg),
img.media-item-placeholder-svg {
  background: #fff;
  display: block;
  width: 100%;
  height: 100%;
}

media-item::part(placeholder-line),
img.media-item-placeholder-line {
  stroke: rgba(0, 0, 0, 0.1) !important;
}

media-item::part(placeholder-rect),
img.media-item-placeholder-rect {
  fill: rgba(0, 0, 0, 0.05);
  height: 100%;
  width: 100%;
}

media-item .caption.empty,
img.caption-empty {
  display: none;
}

.tag-separator:before {
  content: ", ";
}

media-item[drag="true"]::part(media),
[contenteditable="true"] iframe {
  pointer-events: none;
}

column-set {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 8px);
  margin: 0 -4px;
  padding: 0;
}

gallery-grid + * {
  --gutter-expand: 1;
}

gallery-columnized + * {
  --gutter-expand: 1;
}

gallery-justify + * {
  --gutter-expand: 1;
}

media-item + * {
  --gutter-expand: 1;
}

column-unit > *:first-child {
  --gutter-expand: 0;
}

/*[thumbnail-index] figcaption,
[thumbnail-index] figcaption * {
    pointer-events:none!important;
}*/

/*****************************
    Marquee styles
******************************/

marquee-set h1,
marquee-set h2,
marquee-set h3,
marquee-set h4,
marquee-set h5,
marquee-set h6,
marquee-set h7,
marquee-set h8,
marquee-set h9 {
  vertical-align: text-bottom;
  display: inline-block;
}

marquee-set {
  pointer-events: auto;
}

/*****************************
	Image Galleries
******************************/
/* Slideshow gallery layout */
gallery-slideshow media-item figcaption.caption {
  display: var(--display-slideshow-captions, none);
  transform: var(--slideshow-caption-transform, translateX(0px));
  opacity: var(--slideshow-caption-opacity, 0);
  text-align: var(--slideshow-caption-align);
  transition-property: opacity;
  transition-duration: var(--slideshow-caption-transition-duration, 0.1s);

  will-change: opacity, transform;
  position: relative;
}

gallery-slideshow media-item::part(sizing-frame) {
  margin: auto 0;
  flex-grow: 0;
}

gallery-slideshow media-item::part(frame) {
  display: flex;
  flex-wrap: wrap;
  width: var(--item-width);
  height: var(--slide-height);
  align-content: var(--slideshow-vertical-align);
  align-self: var(--slideshow-horizontal-align);
}

/** overlay for flying objects **/
body > media-item[no-component] {
  all: unset !important;
  border: none !important;
  padding: 0 !important;
  position: fixed !important;
  z-index: 5000 !important;
  pointer-events: none !important;
  background: none !important;
  inset: 0 !important;
  overflow: hidden !important;
}

body.slideshow-scrub-dragging * {
  cursor: ew-resize !important;
}

button#edit.edit {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  font-size: var(--fontSize-default);
  font-family: var(--fontFamily-default);
  padding: 0;
  text-align: left;
  white-space: nowrap;
  background: transparent;
  display: flex;
  margin: 0;
  border-radius: 3px 0 0 3px;

  pointer-events: auto;
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
  right: 400px;
  height: 36px;
  width: 12px;
  z-index: 999;
  cursor: pointer;
  background-color: rgba(140, 140, 140, 0.4);
  padding-left: 2px;
  margin-right: 5px;
  width: 20px;
  cursor: pointer;
  margin: 0;
  right: 0;
}

button#edit.edit:active {
  opacity: 0.7;
  user-select: none;
}

button#edit.edit svg {
  padding: 0;
  width: 16px;
  height: 36px;
  margin-left: 2px;
  opacity: 1;
}

button#edit.edit svg path {
  fill: #fff;
}

/*****************************
    QUICK VIEW
******************************/

.quick-view {
  --resize-parent-width: unset;
  width: 80%;
  height: 80%;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  padding: 5rem;
  padding-top: 5rem;
  padding-right: 5rem;
  padding-bottom: 5rem;
  padding-left: 5rem;

  display: flex;
  z-index: 5001;
  transform: translateZ(999px);
  position: fixed;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /*margin: auto; specificty issue if this is included as a default */
  -webkit-text-size-adjust: 100%;
  -ms-touch-action: none;
  touch-action: none;
  line-height: initial;
  letter-spacing: initial;
}

.quick-view-frame {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
}

.quick-view-content {
  height: 100%;
  width: auto;
}

.quick-view-background {
  backdrop-filter: var(--quick-view-backdrop-filter, none);
  -webkit-backdrop-filter: var(--quick-view-backdrop-filter, none);
  transition: backdrop-filter 0.2s ease;
}

.quick-view.nav {
  display: block;
  z-index: 5002;
  position: fixed;
  inset: 0;
  pointer-events: none;
  transform: translateZ(999px);
}

.quick-view::part(slideshow-nav) {
  transition: opacity 222ms ease-in-out;
  position: absolute;
  z-index: 99;
  inset: 0;
  pointer-events: none;
}

/*****************************
    PAGINATION
******************************/
.pagination-watcher {
  pointer-events: none;
  height: 1px;
  margin-top: -1px;
  width: 100%;
}

/*
 * Disable the browser's built in scroll anchoring which prevents
 * pages from jumping when content above the viewport changes height.
 * 
 * https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
 */

html,
body {
  overflow-anchor: none;
}

/*****************************
    COLOR FILTERS
******************************/

.colorfilter-color,
.colorfilter-base {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.colorfilter-color {
  z-index: 9995;
  display: block;
  background-color: var(--colorfilter-color, #ff0000);
  mix-blend-mode: var(--colorfilter-mix, lighten);
  opacity: var(--colorfilter-color-opacity, 0);
}

.colorfilter-base {
  display: block;
  backdrop-filter: grayscale(
      clamp(
        0,
        var(--colorfilter-grayscale, 0),
        var(--colorfilter-color-opacity, 0)
      )
    )
    brightness(var(--colorfilter-brightness, 1))
    contrast(var(--colorfilter-contrast, 1))
    invert(var(--colorfilter-invert, 0));
  -webkit-backdrop-filter: grayscale(
      clamp(
        0,
        var(--colorfilter-grayscale, 0),
        var(--colorfilter-color-opacity, 0)
      )
    )
    brightness(var(--colorfilter-brightness, 1))
    contrast(var(--colorfilter-contrast, 1))
    invert(var(--colorfilter-invert, 0));
  z-index: 9994;
}

#editor-overlay.safari,
.colorfilter-base.safari,
.colorfilter-color.safari,
#cargo-dotsite.safari {
  transform: translateZ(0px);
  animation: loopTranslate 0.5s steps(2, end) infinite;
}

@keyframes loopTranslate {
  0% {
    transform: translateZ(0px);
  }
  50% {
    transform: translateZ(1px);
  }
  100% {
    transform: translateZ(0px);
  }
}

/*****************************
    FLYING OBJECTS
******************************/
.flying-object {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  overflow: hidden;
}

.flying-object media-item {
  position: fixed;
  top: 0;
  left: 0;
}

.flying-object,
.flying-object * {
  user-select: none;
  pointer-events: none !important;
}

/*****************************
    AUDIO PLAYER
******************************/

body.audio-player-dragging,
body.audio-player-dragging audio-player,
body.audio-player-dragging * {
  cursor: ew-resize;
}

audio-player[browser-default="true"] {
  padding: unset;
  margin: unset;
  outline: unset;
  background: unset;
  border: unset;
  transform: unset;
  height: unset;

  position: relative;
  display: inline-block;
}

audio-player::part(button) {
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  width: 0.7em;
  contain: layout;
}

audio-player::part(separator) {
  height: 100%;
}

audio-player::part(buffer) {
  height: 100%;
}

audio-player::part(time-bar) {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: auto 0;
  width: 0%;
  flex-grow: 1;
  height: 100%;
}

audio-player::part(progress) {
  background: transparent;
  height: 100%;
}

audio-player::part(play-icon),
audio-player::part(pause-icon) {
  fill: currentColor;
  cursor: pointer;
  width: 100%;
  height: auto;
}

audio-player::part(label) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  user-select: none;
  margin: auto auto auto 0;
  flex: 0 3 auto;
  min-width: 0;
  width: 100%;
}

audio-player::part(total-time) {
  flex: 0 1 auto;
  margin: auto 0;
}

audio-player::part(current-time),
audio-player::part(play-text) {
  flex: 0 1 auto;
  margin: auto 0;
}

audio-player::part(stream-anim):before {
  content: "Streaming";
}

audio-player::part(stream-anim) {
  user-select: none;
  margin: auto auto auto 0;
}

audio-player::part(buffer),
audio-player::part(current-time),
audio-player::part(note-svg),
audio-player::part(play-text),
audio-player::part(separator),
audio-player::part(total-time) {
  user-select: none;
  pointer-events: none;
}

audio-player::part(buffer),
audio-player::part(play-text),
audio-player::part(progress) {
  position: absolute;
}

audio-player::part(time-bar),
audio-player::part(button),
audio-player::part(current-time),
audio-player::part(note-icon),
audio-player::part(pause),
audio-player::part(play),
audio-player::part(total-time) {
  position: relative;
}

audio-player::part(progress-indicator) {
  border: 1px solid currentColor;
  cursor: ew-resize;
  height: 100%;
  right: 0;
  position: absolute;
}

/*New Stuff*/

audio-player {
  border: var(--border-lines);
  margin-bottom: 0.5em;
  overflow: hidden;
}

audio-player::part(time-bar) {
  background: var(--background-color);
}

audio-player::part(label),
audio-player::part(current-time),
audio-player::part(total-time) {
  color: var(--text-color);
}

audio-player::part(play-icon),
audio-player::part(pause-icon) {
  fill: var(--icon-color, currentColor);
}

audio-player::part(separator) {
  width: 0px;
  background: none;
}

audio-player::part(buffer) {
  background: var(--buffer-background-color);
}

audio-player::part(progress) {
  background: var(--progress-background-color);
}

audio-player::part(progress-indicator) {
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-right-width: 2px;
}

audio-player::part(button) {
  height: 100%;
  display: inline-flex;
  align-self: center;
  background: var(--background-color);
}

audio-player::part(button):after {
  color: var(--text-color);
}

audio-player[status="stopped"]::part(button):after,
audio-player:not([status])::part(button):after {
  content: var(--play-text);
}

audio-player[status="playing"]::part(button):after {
  content: var(--pause-text);
}

audio-player::part(play-icon),
audio-player::part(pause-icon) {
  height: var(--icon-size, 1em);
  width: auto;
}

audio-player::part(label),
audio-player::part(stream-anim),
audio-player::part(current-time),
audio-player::part(total-time) {
  padding: var(--text-padding);
}

/*****************************
    SHOP PRODUCT
******************************/

shop-product {
  font-size: 1.2rem;
  max-width: 22rem;
  width: 100%;
  position: relative;
  display: block;
}

shop-product::part(price) {
  line-height: 1.1;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

shop-product::part(dropdown) {
  width: 100%;
  background: transparent;
  line-height: normal;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
}

shop-product::part(button) {
  line-height: normal;
  cursor: pointer;
  display: inline-block;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  /* prevent text selection outside admin */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

shop-product::part(button):active {
  opacity: 0.7;
}

/*****************************
    CART ITEM COUNTER
******************************/

a[rel="show-cart"][show-count]:after {
  counter-reset: variable var(--cart-item-count);
  content: " (" counter(variable) ")";
  display: var(--cart-item-count-display, none);
}

.cargodotsite {
  position: fixed;
  bottom: 1rem;
  right: 1.4rem;
  mix-blend-mode: difference;
  z-index: 9999;
  opacity: 0.2;
  cursor: pointer;
}

.mobile .cargodotsite {
  bottom: 0.4rem;
  right: 1rem;
}

.cargodotsite:active {
  opacity: 0.14;
}

.dl-duplicate {
  position: fixed;
  bottom: 1rem;
  right: 1.4rem;
  z-index: 9999;
  cursor: pointer;
}

.mobile .dl-duplicate {
  bottom: 0.4rem;
  right: 1rem;
}

.dl-duplicate:active {
  opacity: 0.7;
}

/* Media Item Base Styles */
media-item {
  display: inline-flex;
  vertical-align: bottom;
  flex-direction: column;
  position: relative;
  width: var(--resize-parent-width, 100%);
  max-width: 100%;
  margin: 0;
  padding: 0;
  z-index: var(--z-index, initial);
}

media-item::part(sizing-frame) {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  padding-bottom: 0;
}

media-item::part(frame) {
  display: contents;
}

media-item::part(media) {
  object-position: center center;
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
  position: relative;
  overflow: clip;
  overflow-clip-margin: content-box;
}

media-item::part(figure) {
  flex-direction: column;
  position: relative;
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
}

media-item .caption {
  font-size: 1.1rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.75);
  font-family: "Diatype Variable";
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0em;
  display: block;
  margin-top: 0.75em;
}

column-set {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 8px);
  margin: 0 -4px;
  padding: 0;
}

column-unit {
  display: block;
  word-wrap: break-word;
  position: relative;
  max-width: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 0 4px;
}

media-item {
  display: inline-flex;
  vertical-align: bottom;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

column-unit[span="1"] {
  flex-basis: calc(8.33% - 8px);
}
column-unit[span="2"] {
  flex-basis: calc(16.66% - 8px);
}
column-unit[span="3"] {
  flex-basis: calc(25% - 8px);
}
column-unit[span="4"] {
  flex-basis: calc(33.33% - 8px);
}
column-unit[span="5"] {
  flex-basis: calc(41.66% - 8px);
}
column-unit[span="6"] {
  flex-basis: calc(50% - 8px);
}
column-unit[span="7"] {
  flex-basis: calc(58.33% - 8px);
}
column-unit[span="8"] {
  flex-basis: calc(66.66% - 8px);
}
column-unit[span="9"] {
  flex-basis: calc(75% - 8px);
}
column-unit[span="10"] {
  flex-basis: calc(83.33% - 8px);
}
column-unit[span="11"] {
  flex-basis: calc(91.66% - 8px);
}
column-unit[span="12"] {
  flex-basis: calc(100% - 8px);
}