*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.upg-admin-root,
  .upg-admin-root *,
  .upg-admin-root *::before,
  .upg-admin-root *::after,
  .upg-gallery,
  .upg-gallery *,
  .upg-gallery *::before,
  .upg-gallery *::after,
  .upg-lightbox,
  .upg-lightbox *,
  .upg-lightbox *::before,
  .upg-lightbox *::after {
  box-sizing: border-box;
}

.upg-admin-root img,
  .upg-admin-root video,
  .upg-gallery img,
  .upg-gallery video,
  .upg-lightbox img,
  .upg-lightbox video {
  display: block;
  max-width: 100%;
  height: auto;
}

.upg-admin-root {
  min-height: 100vh;
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.upg-product-panel > :not([hidden]) ~ :not([hidden]),
.upg-settings-panel > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.upg-product-panel {
  container-type: inline-size;
  container-name: upg-product-panel;
}

.upg-settings-panel {
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
}

.upg-settings-card > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.upg-tools > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.upg-tools__section {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.upg-tools__danger {
  gap: 1rem;
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}

@media (min-width: 768px) {
  .upg-tools__danger {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.upg-tools__copy > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.upg-tools__copy h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.upg-tools__copy p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.upg-tools__eyebrow {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}

.upg-tools__actions {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .upg-tools__actions {
    align-items: center;
    justify-content: flex-start;
  }
}

.components-modal__frame.upg-tools__modal {
  max-height: 90vh;
  width: min(640px,calc(100% - 2rem));
  overflow: auto;
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 228 230 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.components-modal__frame.upg-tools__modal .components-modal__header {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 228 230 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.components-modal__frame.upg-tools__modal .components-modal__header-heading {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(136 19 55 / var(--tw-text-opacity, 1));
}

.components-modal__frame.upg-tools__modal .components-modal__content {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.upg-tools__modal-body > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.upg-tools__modal-body {
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.upg-tools__modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .upg-tools__modal-actions {
    align-items: center;
    justify-content: space-between;
  }
}

.components-modal__screen-overlay.upg-modal-overlay {
  position: fixed;
  inset: 0px;
  z-index: 40;
  background-color: rgb(15 23 42 / 0.5);
}

.upg-control-groups {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.upg-control-group__title {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.upg-gallery-table {
  width: 100%;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-collapse: separate;
  border-spacing: 0;
}

.upg-gallery-table th,
.upg-gallery-table td {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  padding: 0.75rem;
  text-align: left;
}

.upg-gallery-table tr:last-child td {
  border-bottom-width: 0px;
}

.upg-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.upg-schema-controls {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.upg-control > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.upg-control {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  box-shadow: 0 14px 28px -20px rgba(15, 23, 42, 0.35);
}

.upg-control.components-input-base {
  padding-top: 1rem;
}

.upg-control .components-base-control__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.upg-control .components-base-control__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
}

.upg-control .components-base-control__help,
.upg-control .upg-control__status {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.upg-control select,
.upg-control input[type='text'],
.upg-control input[type='number'],
.upg-control .components-input-control__input {
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.upg-control select:focus,
.upg-control input[type='text']:focus,
.upg-control input[type='number']:focus,
.upg-control .components-input-control__input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity, 1));
}

.upg-control .components-range-control__root {
  width: 100%;
}

.upg-control .components-range-control__slider {
  accent-color: #334155;
}

.upg-range-control > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.upg-range-control__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.upg-color-control > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.upg-color-control__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.upg-color-control__swatch {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.upg-color-control__value {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.upg-color-control__picker {
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.upg-color-control__actions {
  display: flex;
  justify-content: flex-end;
}

.upg-color-control__reset {
  margin-top: 0px;
}

.upg-settings-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

.upg-save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(15 23 42 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.upg-save-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.upg-save-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity, 1));
}

.upg-admin-root .components-notice {
  position: relative;
  margin-top: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.5rem;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.upg-admin-root .components-notice__content {
  flex: 1 1 0%;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.upg-admin-root .components-notice__actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.upg-admin-root .components-notice.is-dismissible {
  padding-right: 3rem;
}

.upg-admin-root .components-notice__dismiss {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: transparent;
  background-color: rgb(255 255 255 / 0.8);
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.upg-admin-root .components-notice__dismiss:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.upg-admin-root .components-notice__dismiss:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}

.upg-admin-root .components-notice__dismiss svg {
  height: 1rem;
  width: 1rem;
}

.upg-admin-root .components-notice.is-success {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

.upg-admin-root .components-notice.is-error {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}

.upg-admin-root .components-notice.is-warning {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.upg-admin-root .components-notice.is-info {
  --tw-border-opacity: 1;
  border-color: rgb(186 230 253 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}

.upg-gallery {
  --upg-aspect-ratio: 1 / 1;
  --upg-thumb-aspect-ratio: 1 / 1;
  --upg-thumb-scroll-fade-size: 16px;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1rem;
}

html.upg-lightbox-open,
body.upg-lightbox-open {
  overflow: hidden;
}

.upg-lightbox {
  position: fixed;
  inset: 0px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upg-lightbox__backdrop {
  position: absolute;
  inset: 0px;
  background-color: rgb(15 23 42 / 0.6);
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.upg-lightbox__dialog {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0px;
  width: 100%;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  z-index: 1;
}

@media (min-width: 768px) {
  .upg-lightbox__dialog {
    padding: 2.5rem;
  }
}

.upg-lightbox__close {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.upg-lightbox__close:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.upg-lightbox__close:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity, 1));
}

.upg-lightbox__close {
  padding: 0.5rem 1rem;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

@media (min-width: 768px) {
  .upg-lightbox__close {
    top: 2rem;
    right: 2rem;
  }
}

.upg-lightbox__content {
  min-height: 0px;
  width: 100%;
  flex: 1 1 0%;
  z-index: 1;
}

.upg-lightbox__gallery {
  height: 100%;
  min-height: 0px;
  width: 100%;
  --upg-aspect-ratio: auto;
}

.upg-lightbox__gallery .upg-gallery__viewport {
  min-height: 0px;
  flex: 1 1 0%;
  aspect-ratio: auto;
  max-height: none;
}

.upg-gallery--thumbs-left,
.upg-gallery--thumbs-right {
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
}

.upg-gallery.upg-gallery--layout-grid.upg-gallery--thumbs-left,
.upg-gallery.upg-gallery--layout-grid.upg-gallery--thumbs-right {
  container-type: inline-size !important;
}

.upg-gallery--thumbs-left .upg-gallery__thumbnails,
.upg-gallery--thumbs-right .upg-gallery__thumbnails {
  min-height: 0px;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: none;
  min-width: calc(var(--upg-thumb-size, 96px) + 0.5rem);
  contain: size;
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}

.upg-gallery.upg-gallery--layout-grid.upg-gallery--thumbs-left > .upg-gallery__thumbnails,
.upg-gallery.upg-gallery--layout-grid.upg-gallery--thumbs-right > .upg-gallery__thumbnails {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: hidden !important;
  overflow-x: visible !important;
  width: -moz-max-content !important;
  width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  contain: none !important;
  scrollbar-gutter: auto !important;
  overscroll-behavior: auto !important;
  max-height: 32rem !important;
}

@supports (width: 1cqw) {
  .upg-gallery.upg-gallery--layout-grid.upg-gallery--thumbs-left > .upg-gallery__thumbnails,
  .upg-gallery.upg-gallery--layout-grid.upg-gallery--thumbs-right > .upg-gallery__thumbnails {
    --upg-thumb-rail-min: calc(var(--upg-thumb-size, 96px) + 0.5rem) !important;
    --upg-rail-gap: 1rem !important;
    max-height: clamp(
      0px,
      calc(100cqw - var(--upg-thumb-rail-min) - var(--upg-rail-gap)),
      9999px
    ) !important;
  }
}

.upg-gallery.upg-gallery--layout-grid.upg-gallery--thumbs-left > .upg-gallery__thumbnails > .upg-thumbnail,
.upg-gallery.upg-gallery--layout-grid.upg-gallery--thumbs-right > .upg-gallery__thumbnails > .upg-thumbnail {
  flex: 0 0 auto !important;
}

.upg-gallery--thumbs-top .upg-gallery__thumbnails,
.upg-gallery--thumbs-bottom .upg-gallery__thumbnails {
  height: var(--upg-viewport-height, auto);
  max-height: var(--upg-viewport-height, auto);
  overflow: auto;
}

.upg-gallery--thumbs-left .upg-gallery__thumbnails,
.upg-gallery--thumbs-top .upg-gallery__thumbnails {
  order: -1;
}

.upg-gallery__viewport {
  position: relative;
  width: 100%;
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  aspect-ratio: var(--upg-aspect-ratio, 1 / 1);
  max-height: -moz-fit-content;
  max-height: fit-content;
}

.upg-gallery__viewport--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.upg-gallery__empty-message {
  max-width: 20rem;
  line-height: 1.625;
}

.upg-gallery[data-zoom-mode="hover"] .upg-gallery__viewport {
  --upg-zoom-scale: 1.5;
  --upg-zoom-translate-x: 0px;
  --upg-zoom-translate-y: 0px;
  cursor: default;
}

.upg-gallery[data-zoom-mode="hover"].upg-has-zoomable .upg-gallery__viewport,
.upg-gallery[data-zoom-mode="hover"] .upg-gallery__viewport.is-zooming {
  cursor: zoom-in;
}

.upg-gallery[data-zoom-mode="hover"] .upg-gallery__figure.upg-media--zoomable .upg-gallery__image {
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  transition: transform 140ms ease-out;
  will-change: transform;
}

.upg-gallery[data-zoom-mode="hover"] .upg-gallery__viewport.is-zooming
  .upg-gallery__figure.is-active.upg-media--zoomable
  .upg-gallery__image {
  transform: translate3d(
      var(--upg-zoom-translate-x, 0px),
      var(--upg-zoom-translate-y, 0px),
      0
    )
    scale(var(--upg-zoom-scale, 1.5));
  transition-duration: 0ms;
  transition-timing-function: linear;
}

@supports not (aspect-ratio: 1 / 1) {
  .upg-gallery__viewport {
    padding-top: 100%;
  }

  .upg-gallery__viewport > .upg-gallery__figure {
    position: absolute;
    inset: 0px;
  }
}

.upg-gallery__figure {
  position: absolute;
  inset: 0px;
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  background-color: transparent;
  grid-template-rows: minmax(0, 1fr) auto;
}

/* Use opacity for hiding to keep elements "visible" for e2e tests */

.upg-gallery__figure.is-hidden {
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.upg-gallery__figure.is-active {
  opacity: 1;
  z-index: 1;
}

.upg-gallery__caption {
  width: 100%;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / 0.9);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.upg-gallery__image,
.upg-gallery__video,
.upg-gallery__embed {
  height: 100%;
  width: 100%;
}

.upg-gallery__image,
.upg-gallery__video {
  -o-object-fit: contain;
     object-fit: contain;
}

.upg-gallery__embed {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(15 23 42 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.upg-gallery__embed iframe,
.upg-gallery__embed video {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.upg-gallery__embed-poster {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.upg-gallery__pdf,
.upg-gallery__pdf-embed {
  display: block;
  height: 100%;
  width: 100%;
}

.upg-gallery__pdf-fallback {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

/* Divi wraps object embeds with fitvids; keep PDFs filling the gallery. */

.upg-gallery__pdf .fluid-width-video-wrapper {
  height: 100%;
  padding: 0 !important;
}

.upg-gallery__figure[data-media-type='pdf'] {
  --upg-media-overlay-size: 3.25rem;
}

.upg-thumbnail[data-media-type='video'],
.upg-thumbnail[data-media-type='pdf'] {
  --upg-media-overlay-size: 1.75rem;
}

.upg-gallery__figure[data-media-type='pdf']::after,
.upg-thumbnail[data-media-type='video']::after,
.upg-thumbnail[data-media-type='pdf']::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--upg-media-overlay-size);
  height: var(--upg-media-overlay-size);
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background-color: rgba(15, 23, 42, 0.55);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.25);
  pointer-events: none;
  z-index: 2;
}

.upg-thumbnail[data-media-type='video']::after,
.upg-thumbnail[data-media-type='pdf']::after {
  background-color: rgba(15, 23, 42, 0.65);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
}

.upg-thumbnail[data-media-type='video']::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='9,7 19,12 9,17' fill='%23ffffff'/%3E%3C/svg%3E");
}

.upg-gallery__figure[data-media-type='pdf']::after,
.upg-thumbnail[data-media-type='pdf']::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z'/%3E%3Cpath fill='%23ffffff' d='M15 2v5h5'/%3E%3C/svg%3E");
}

/* WooCommerce compatibility: list wrapper for gallery images */

.upg-gallery__list {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: contents;
}

.upg-gallery__item {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: contents;
}

.upg-gallery__thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-left: 0px;
  --upg-thumb-scroll-mask: none;
  -webkit-mask-image: var(--upg-thumb-scroll-mask);
  mask-image: var(--upg-thumb-scroll-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.upg-gallery--thumbs-left .upg-gallery__thumbnails.is-overflow-start,
.upg-gallery--thumbs-right .upg-gallery__thumbnails.is-overflow-start {
  --upg-thumb-scroll-mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) var(--upg-thumb-scroll-fade-size)
  );
}

.upg-gallery--thumbs-left .upg-gallery__thumbnails.is-overflow-end,
.upg-gallery--thumbs-right .upg-gallery__thumbnails.is-overflow-end {
  --upg-thumb-scroll-mask: linear-gradient(
    to top,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) var(--upg-thumb-scroll-fade-size)
  );
}

.upg-gallery--thumbs-left .upg-gallery__thumbnails.is-overflow-start.is-overflow-end,
.upg-gallery--thumbs-right .upg-gallery__thumbnails.is-overflow-start.is-overflow-end {
  --upg-thumb-scroll-mask: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 1) var(--upg-thumb-scroll-fade-size),
    rgba(0, 0, 0, 1) calc(100% - var(--upg-thumb-scroll-fade-size)),
    rgba(0, 0, 0, 0) 100%
  );
}

.upg-gallery--thumbs-top .upg-gallery__thumbnails.is-overflow-start,
.upg-gallery--thumbs-bottom .upg-gallery__thumbnails.is-overflow-start {
  --upg-thumb-scroll-mask: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) var(--upg-thumb-scroll-fade-size)
  );
}

.upg-gallery--thumbs-top .upg-gallery__thumbnails.is-overflow-end,
.upg-gallery--thumbs-bottom .upg-gallery__thumbnails.is-overflow-end {
  --upg-thumb-scroll-mask: linear-gradient(
    to left,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) var(--upg-thumb-scroll-fade-size)
  );
}

.upg-gallery--thumbs-top .upg-gallery__thumbnails.is-overflow-start.is-overflow-end,
.upg-gallery--thumbs-bottom
  .upg-gallery__thumbnails.is-overflow-start.is-overflow-end {
  --upg-thumb-scroll-mask: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 1) var(--upg-thumb-scroll-fade-size),
    rgba(0, 0, 0, 1) calc(100% - var(--upg-thumb-scroll-fade-size)),
    rgba(0, 0, 0, 0) 100%
  );
}

.upg-thumbnail--add {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.upg-thumbnail__add {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.upg-thumbnail__add-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.upg-thumbnail__add-hint {
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.upg-gallery__thumbnails-empty {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
  min-height: calc(var(--upg-thumb-size, 96px) + 0.5rem);
}

.upg-gallery--layout-scroller .upg-gallery__thumbnails,
.upg-gallery--thumb-scroll-scroll .upg-gallery__thumbnails {
  flex-wrap: nowrap;
}

.upg-gallery--layout-scroller .upg-thumbnail,
.upg-gallery--thumb-scroll-scroll .upg-thumbnail {
  flex-shrink: 0;
}

.upg-gallery--layout-scroller.upg-gallery--thumbs-top .upg-gallery__thumbnails,
.upg-gallery--layout-scroller.upg-gallery--thumbs-bottom .upg-gallery__thumbnails,
.upg-gallery--thumb-scroll-scroll.upg-gallery--thumbs-top .upg-gallery__thumbnails,
.upg-gallery--thumb-scroll-scroll.upg-gallery--thumbs-bottom .upg-gallery__thumbnails {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}

.upg-gallery--layout-scroller.upg-gallery--thumbs-left .upg-gallery__thumbnails,
.upg-gallery--layout-scroller.upg-gallery--thumbs-right .upg-gallery__thumbnails,
.upg-gallery--thumb-scroll-scroll.upg-gallery--thumbs-left .upg-gallery__thumbnails,
.upg-gallery--thumb-scroll-scroll.upg-gallery--thumbs-right .upg-gallery__thumbnails {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}

.upg-thumbnail {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0px;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-inset: inset;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.upg-thumbnail:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity, 1));
}

.upg-thumbnail {
  width: var(--upg-thumb-size, 96px);
  height: var(--upg-thumb-size, 96px);
}

@supports (aspect-ratio: 1 / 1) {
  .upg-thumbnail {
    height: auto;
    aspect-ratio: var(--upg-thumb-aspect-ratio, 1 / 1);
  }
}

.upg-preview-stage .upg-thumbnail.is-hidden {
  opacity: 0.6;
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.upg-preview-stage .upg-thumbnail.is-hidden::after {
  content: '';
  position: absolute;
  inset: 0px;
  background-color: rgb(255 255 255 / 0.4);
  pointer-events: none;
}

.upg-thumbnail.is-active {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1));
}

.upg-thumbnail__image {
  display: block;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}

.upg-gallery-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.upg-gallery-item {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.upg-gallery-item.is-dragging {
  opacity: 0.75;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.upg-gallery-item.is-drop-target {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity, 1));
}

.upg-gallery-item__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
}

.upg-gallery-item__handle-group {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.upg-gallery-item__handle {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.upg-gallery-item__handle:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.upg-gallery-item__handle:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity, 1));
}

.upg-gallery-item__handle {
  cursor: grab;
}

.upg-gallery-item__handle:active {
  cursor: grabbing;
}

.upg-color-control__reset {
  margin-top: 0.5rem;
}

.upg-gallery-item__order-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.upg-gallery-item__preview {
  display: flex;
  height: 4rem;
  width: 4rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.upg-gallery-item__preview img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.upg-gallery-item__placeholder {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

.upg-gallery-item__summary {
  min-width: 0px;
  flex: 1 1 0%;
}

.upg-gallery-item__summary > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.upg-gallery-item__summary-primary {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.upg-gallery-item__summary-secondary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.upg-gallery-item__badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.upg-gallery-item__provider {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.upg-gallery-item__source {
  display: inline-block;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.upg-gallery-item__controls {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.upg-gallery-item__details {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
}

.upg-gallery-item__video-options {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
}

.upg-gallery-item__detail-grid > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

@media (min-width: 640px) {
  .upg-gallery-item__detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .upg-gallery-item__detail-grid > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }
}

.upg-preview-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.upg-preview-canvas {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  min-height: 380px;
  max-width: none;
}

.upg-preview-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  min-height: 340px;
  /* max-width: 500px; */
  margin: 0 auto;
}

.upg-preview-stage--dropping {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
}

.upg-preview-placeholder {
  position: absolute;
  inset: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.upg-preview-overlay {
  position: absolute;
  inset: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: rgb(255 255 255 / 0.8);
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.upg-preview-dropzone {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(236 253 245 / 0.9);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: center;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.upg-preview-error {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
}

.upg-preview-selected {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}

.upg-preview-drop-target {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1));
}

.upg-preview-sidebar > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.upg-preview-sidebar {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@container upg-product-panel (min-width: 900px) {
  .upg-preview-layout {
    flex-direction: row;
  }

  .upg-preview-canvas {
    flex: 1 1 600px;
    max-width: 600px;
  }

  .upg-preview-sidebar {
    flex: 1 1 280px;
    min-width: 0;
  }

  .upg-quick-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.upg-preview-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.upg-preview-sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.upg-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.upg-preview-badge--muted {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.upg-preview-sidebar__placeholder {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.upg-preview-sidebar__video > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.upg-preview-sidebar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.upg-preview-sidebar__reorder {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.upg-preview-sidebar__reorder-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.upg-preview-sidebar__reorder-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.upg-preview-sidebar__advanced > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.upg-preview-sidebar__advanced {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  padding-top: 0.75rem;
}

.upg-preview-sidebar__advanced-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.upg-preview-sidebar__advanced-toggle {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.upg-quick-controls {
  display: grid;
  gap: 0.75rem;
}

.upg-quick-control > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.upg-quick-control {
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.upg-quick-control__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.upg-quick-control__label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.upg-quick-control__hint {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.upg-quick-control__link {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.upg-quick-control__link:hover {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.upg-video-poster {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.upg-video-poster__preview {
  display: flex;
  height: 6rem;
  width: 10rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
  .upg-video-poster__preview {
    height: 7rem;
    width: 12rem;
  }
}

.upg-video-poster__preview img {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.upg-video-poster__empty {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.upg-video-poster__actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.upg-video-poster__hint {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.upg-video-poster__modal {
  width: min(720px, 95vw);
}

.upg-video-poster__modal-content > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.upg-video-poster__modal-video {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  aspect-ratio: 16 / 9;
}

@supports not (aspect-ratio: 16 / 9) {
  .upg-video-poster__modal-video {
    padding-top: calc(100% * 9 / 16);
  }

  .upg-video-poster__modal-video > video {
    position: absolute;
    inset: 0px;
  }
}

.upg-video-poster__modal-video video {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.upg-video-poster__loading {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(15 23 42 / 0.3);
}

.woocommerce-uses-block-theme .upg-woocommerce-product-gallery,
.woocommerce-uses-block-theme.woocommerce #content div.product div.images,
.woocommerce-uses-block-theme.woocommerce div.product div.images,
.woocommerce-uses-block-theme.woocommerce-page #content div.product div.images,
.woocommerce-uses-block-theme.woocommerce-page div.product div.images {
  width: 100%;
}