/*
 * customizer-core.css
 * Default core CSS for all Customizer elements.
 */
.customizer-hidden {
  display: none !important;
}

.customizer-disabled,
.customizer-disabled * {
  color: #808080 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

.customizer-pointer-events-none {
  pointer-events: none !important;
}

.customizer-pointer-events-auto {
  pointer-events: auto !important;
}

.customizer-element-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.customizer-element-group-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 16px;
}

/*****************************************************************************
* Image Upload Element
*****************************************************************************/
.customizer-image-upload-element.customizer-element .customizer-thumbnail {
  width: 58px;
  height: 40px;
  border: 1px solid grey;
}

.customizer-image-upload-element.customizer-element
  .customizer-image-upload-modal-body-container-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0.8;
  pointer-events: none;
}

.customizer-image-upload-element.customizer-element
  .customizer-image-upload-modal {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
  width: 80%;
  max-width: 600px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.customizer-image-upload-element.customizer-element .customizer-close-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

.customizer-image-upload-element.customizer-element
  .customizer-image-manipulation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.customizer-image-upload-element.customizer-element
  .customizer-image-upload-element-button,
.customizer-image-upload-element.customizer-element
  .customizer-image-clear-element-button {
  border: 1px solid rgba(0, 0, 0, 0.5);
  display: inline-flex;
  margin-right: 20px;
  padding: 5px;
  cursor: pointer;
}

.customizer-image-upload-element.customizer-element
  .customizer-image-clear-element-button {
  margin-right: 0;
}

.customizer-image-upload-element.customizer-element
  .customizer-image-upload-modal-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.customizer-image-upload-element.customizer-element .customizer-current-file {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
}

.customizer-image-upload-element.customizer-element .customizer-filename {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

.customizer-tab-name,
.customizer-summary-item,
.customizer-saved-item-remove,
.customizer-saved-item-image,
.customizer-perspective,
.customizer-material-name,
.customizer-list-element-html-item,
.list-element-spinner-button {
  cursor: pointer;
}

.customizer-validation-message {
  color: #ff0000;
  margin-top: 10px;
}

.customizer-element-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/*****************************************************************************
* Image Upload Overlay
*****************************************************************************/
.customizer-image-upload-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 100;
}

/*****************************************************************************
* Image Upload Placement Modal Body Container
*****************************************************************************/
.customizer-image-upload-modal .customizer-image-upload-modal-body-container {
  overflow: hidden;
  width: 533px;
  height: 269px;
  border: 0; /* Remove layout-affecting border */
  position: relative;
}

/*****************************************************************************
* Uploaded Images Grid
*****************************************************************************/
.image-upload-uploaded-images-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 58px));
  gap: 10px;
  margin-top: 15px;
}

/*****************************************************************************
* SVG Interaction Element Defaults
*****************************************************************************/
.customizer-element.customizer-svg-interaction-element
  .svg-interaction-element-display-container
  svg {
  width: 100%;
  height: 100%;
}
.customizer-svg-interaction-element {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}
.customizer-svg-interaction-element .svg-interaction-element-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.customizer-svg-interaction-element .svg-interaction-element-display-container {
  width: 100%;
  max-width: 100%;
  border: 1px solid #000;
  height: 200px;
  display: none;
}
.customizer-svg-interaction-element
  .svg-interaction-element-path-previews-title.customizer-hidden,
.customizer-svg-interaction-element
  .svg-interaction-element-gradients-previews-title.customizer-hidden {
  display: none;
}
.customizer-svg-interaction-element .svg-interaction-element-path-previews,
.customizer-svg-interaction-element
  .svg-interaction-element-gradients-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.customizer-svg-interaction-element .svg-interaction-element-actions {
  display: none;
}

.customizer-element.customizer-svg-interaction-element
  .svg-interaction-element-gradient-color-swatch {
  display: inline-block;
  border: 1px solid #ccc;
  width: calc(100% / 3 - 7px);
  height: 40px;
  cursor: pointer;
}

.customizer-element.customizer-svg-interaction-element
  .svg-interaction-stop-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #eee;
  padding: 5px;
}

.customizer-element.customizer-svg-interaction-element
  .svg-interaction-stop-swatch {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.customizer-element.customizer-svg-interaction-element
  .svg-interaction-stop-options-container {
  display: none;
  margin-top: 5px;
}

.customizer-element.customizer-svg-interaction-element
  .gradient-stop-option-button {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
}

.customizer-element.customizer-svg-interaction-element
  .svg-interaction-element-color-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.customizer-element.customizer-svg-interaction-element
  .svg-interaction-element-color-button {
  width: calc(100% / 3 - 7px);
  height: 40px;
}

.customizer-element.customizer-svg-interaction-element
  .svg-interaction-element-gradient-editor {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.customizer-element.customizer-svg-interaction-element
  .svg-interaction-element-path-preview {
  display: inline-block;
  border: 1px solid #ccc;
  width: calc(100% / 3 - 7px);
  height: 40px;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

/*****************************************************************************
* List Element Images
*****************************************************************************/
.customizer-list-element-images-item {
  width: 100px;
  min-width: 100px;
  height: 100px;
  object-fit: cover;
}

/*****************************************************************************
* Data Upload Element Label
*****************************************************************************/
.customizer-data-upload-element-label {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #000;
}

/*****************************************************************************
* AI Image Element Layout
*****************************************************************************/
.ai-image-element-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}
.ai-image-display {
  min-height: 256px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ai-image-spinner {
  display: none;
}
.ai-image-display-img {
  max-width: 100%;
  max-height: 512px;
}
.ai-image-input-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ai-image-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.ai-image-prompt-input {
  width: 100%;
  min-height: 80px;
  padding: 0.5rem;
}
.ai-image-history-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.ai-image-history-item {
  padding: 0.5rem;
  background: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

/*****************************************************************************
* Tab 
*****************************************************************************/
.customizer-tab-body-elements {
  display: flex;
  flex-direction: column;
  grid-gap: 16px;
}

/*****************************************************************************
* Tab Icon Default Hidden
*****************************************************************************/
.customizer-tab-icon {
  display: none;
}

/*****************************************************************************
* Loader Overlay and Spinner
*****************************************************************************/
.customizer-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  z-index: 9998;
}
.customizer-loader-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9998;
}
.customizer-loader svg {
  width: 100px;
  height: 100px;
  position: relative;
  z-index: 9999;
}
/*****************************************************************************
* Saved Item
*****************************************************************************/
.customizer-saved-item-loader {
  display: block;
  margin: 0 auto;
}

.customizer-saved-item-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
  text-decoration: none;
  padding: 8px;
  margin-top: 8px;
  border-radius: 8px;
}

.customizer-saved-item-remove:hover {
  text-decoration: none;
  color: #fff;
}

.customizer-saved-item {
  border: 1px solid rgba(0, 0, 0, 0.176);
  border-radius: 8px;
  padding: 8px;
}

#customizer-saved-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*****************************************************************************
* Embroidery Element
*****************************************************************************/
.embroidery-element-color-picker-button {
  width: 40px;
  height: 40px;
}

/*****************************************************************************
* Input Element
*****************************************************************************/

/* Container for the font selector */
.input-element.customizer-element .input-element-font-selector-container {
  position: relative;
  display: inline-block;
  width: 220px;
}

/* The area that shows the currently selected font */
.input-element.customizer-element .selected-font-display {
  padding: 8px 12px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
}

/* Add an arrow icon using a pseudo-element */
.input-element.customizer-element .selected-font-display::after {
  content: "▼";
  font-size: 0.7em;
  color: #666;
  margin-left: 8px;
}

/* The dropdown menu container */
.input-element.customizer-element .font-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 250px;
  overflow-y: auto;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Each item in the dropdown menu */
.input-element.customizer-element .font-dropdown-item {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Hover state for dropdown items */
.input-element.customizer-element .font-dropdown-item:hover {
  background-color: #f0f0f0;
}

/* The preview image for each font */
.input-element.customizer-element .font-preview-image {
  width: 100%;
  max-width: 100%;
  height: 30px;
  object-fit: contain;
}

.input-element.customizer-element .input-element-color-picker-button {
  width: 40px;
  height: 40px;
}

/*****************************************************************************
* Customizer Tooltip
*****************************************************************************/
.customizer-tooltip {
  position: absolute;
  z-index: 1000;
  background: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  max-width: 200px;
}

.customizer-tooltip.customizer-hidden {
  display: none !important;
}

.customizer-tooltip-image {
  display: block;
  max-width: 100%;
  height: auto;
}

/*****************************************************************************
* Modal
*****************************************************************************/
.customizer-modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.customizer-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.customizer-modal-title {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  margin-top: 24px;
}

.customizer-modal-wrapper {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 24px 50px;
  border: 1px solid #888;
  max-width: 870px;
  width: 100%;
}

.customizer-modal-body {
  padding: 24px 0;
}

.customizer-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.customizer-modal-close:hover,
.customizer-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.customizer-modal-body-item-image {
  max-width: 100%;
  height: auto;
  display: block;
}

/*****************************************************************************
* List Element
*****************************************************************************/
.list-element-spinner-container {
  display: flex;
  will-change: transform;
  /* Optimizes for animations */
  transition: transform 0.3s ease-in-out;
  /* Smooth transition for the transform */
}

.list-element-spinner {
  margin-top: 10px;
  padding: 0px;
  width: 100%;
  max-width: 222px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  border: 1px solid grey;
  background: #fff;
  position: relative;
  flex-shrink: 0;
  /* Prevent flex items from shrinking smaller than their content */
  justify-content: center;
  /* Center the items horizontally */
}

.list-element-spinner-button {
  min-width: 30px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  text-align: center;
  z-index: 1;
}

.list-element-spinner-item {
  width: 100%;
  /* max-width: 160px; */
  text-overflow: ellipsis;
  text-align: center;
  line-height: 50px;
  position: relative;
  left: 0px;
  flex: 0 0 auto;
  /* Prevent items from growing or shrinking */
  white-space: nowrap;
  overflow: hidden;
}

.list-element-spinner-item.selected {
  font-weight: bold;
  color: #333;
}

.list-element-spinner-button.list-element-spinner-button-left {
  border-right: 1px solid grey;
  position: absolute;
  left: 0px;
  background: white;
  z-index: 1;
}

.list-element-spinner-button.list-element-spinner-button-right {
  border-left: 1px solid grey;
  position: absolute;
  right: 0px;
  background: white;
  z-index: 1;
}

.customizer-list-element-html {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.customizer-list-element-html-item {
  display: flex;
  padding: 4px;
  border-radius: 16px;
  color: #004c59;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  background: #ffffff;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: solid;
  height: 35px;
  padding: 4px;
  text-transform: uppercase;
}

.customizer-summary-item-name,
.customizer-summary-item-upcharge,
.customizer-material-group-name,
.customizer-material-group-upcharge {
  display: inline-flex;
  align-items: center;
}

.customizer-element-value-container {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  grid-gap: 16px;
}

/*****************************************************************************
* Information Element
*****************************************************************************/
.customizer-information-element-body {
  display: flex;
  flex-direction: column;
  grid-gap: 16px;
}

/*****************************************************************************
* Quantity Element
*****************************************************************************/
.customizer-quantity-element-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}

/*****************************************************************************
* Data Upload Element
*****************************************************************************/
.customizer-data-upload-element .customizer-element-title {
  display: block;
}

.customizer-preview-modal {
  padding: 16px 0;
}

.customizer-data-upload-element-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/*****************************************************************************
* Responsive Accordion Tab
*****************************************************************************/
.customizer-tab {
  position: relative;
}

.customizer-tab-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

/* Accordion Tab Styling */
.customizer-accordion-tab {
  width: calc(100vw - 32px);
  max-width: 100vw;
  margin: 16px auto;
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

@media (min-width: 600px) {
  .customizer-accordion-tab {
    width: calc(100% - 64px);
    max-width: 700px;
    margin: 24px auto;
  }
}

.customizer-accordion-tab-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  background-color: #f7f7f7;
  border: 1px solid #e0e0e0;
  position: relative;
  transition: background-color 0.3s ease;
}

.customizer-accordion-tab-header:hover {
  background-color: #f0f0f0;
}

.customizer-accordion-tab-name {
  flex-grow: 1;
  font-weight: 600;
  color: #333;
}

.customizer-tab-icon {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto; /* Align to the right */
  transition: transform 0.3s ease;
}

body.accordion-mode .tab-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* adjust this based on the required breakpoint */
@media only screen and (max-width: 768px) {
  body.accordion-mode .customizer-tab-icon {
    display: flex !important;
  }
  body.accordion-mode .customizer-tab-body {
    padding: 12px 16px;
  }
}

body.accordion-mode .customizer-tab-header {
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #e0e0e0;
}

.customizer-accordion-tab-icon {
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.customizer-accordion-tab-expanded .customizer-accordion-tab-icon {
  transform: rotate(180deg);
}

.customizer-accordion-tab-body {
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-top: none;
  background-color: #fff;
}

.customizer-accordion-tab-description {
  margin-bottom: 16px;
  color: #666;
}

.customizer-accordion-tab-body-elements {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Status indicators */
.customizer-accordion-tab.customizer-tab-invalid {
  border-color: #ff5252;
}

.customizer-accordion-tab.customizer-tab-invalid
  .customizer-accordion-tab-header {
  background-color: rgba(255, 82, 82, 0.05);
}

.customizer-accordion-tab.customizer-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.customizer-accordion-tab.customizer-hidden {
  display: none;
}

/* Tooltip for accordion tabs */
.customizer-accordion-tab-tip {
  display: none;
}

.customizer-accordion-tab-body {
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    opacity 0.2s ease;
  opacity: 0;
}

.customizer-accordion-tab-expanded .customizer-accordion-tab-body {
  max-height: none;
  opacity: 1;
}

body.accordion-mode #customizer-tab-body-container {
  display: none !important;
}

.customizer-tab-icon svg {
  transition: transform 0.3s ease;
}

/*
 * Shared control tokens. The 2D preview chrome (perspective chips, pager labels)
 * uses the same `customizer-personalization-*` controls as the shopper panel but mounts outside it, so
 * both roots have to declare them: an undefined `var(--customizer-personalization-border)` invalidates
 * the whole declaration and the chips come up as bare host buttons.
 */
.customizer-personalization-element,
.vu-two-d-preview-host {
  --customizer-personalization-bg: #ffffff;
  --customizer-personalization-fg: #0f172a;
  --customizer-personalization-muted: #f1f5f9;
  --customizer-personalization-muted-fg: #64748b;
  --customizer-personalization-border: #e2e8f0;
  --customizer-personalization-primary: #90bd3d;
  --customizer-personalization-primary-fg: #f8fafc;
  --customizer-personalization-destructive: #ef4444;
  --customizer-personalization-destructive-bg: #fef2f2;
  --customizer-personalization-radius: 12px;
  --customizer-personalization-radius-md: 8px;
}

.vu-two-d-preview,
.vu-two-d-preview svg {
  width: 100%;
  height: 100%;
  display: block;
}

/*
 * Strip above the photo. Padded on every side so the chips align inside it, and
 * white by default because it reads as part of the product card, not the canvas.
 */
.vu-two-d-preview-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--customizer-personalization-bg);
}

.vu-two-d-preview-toolbar[hidden] {
  display: none;
}

.vu-two-d-perspective-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*
 * Variant pager. Chrome floats over the preview photo rather than taking layout
 * space, so hosts keep sizing `.vu-two-d-preview` on their own. Same unlayered
 * reasoning as the personalization panel below: every control restates what a
 * host preflight resets.
 */
.vu-two-d-preview-host {
  position: relative;
}

.vu-two-d-variant-pager-slot,
.vu-two-d-variant-pager {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.vu-two-d-variant-arrow,
.vu-two-d-variant-dot {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  pointer-events: auto;
}

.vu-two-d-variant-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(15 23 42 / 8%);
  border-radius: 9999px;
  background: rgb(255 255 255 / 82%);
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: #0f172a;
  box-shadow: 0 1px 3px rgb(15 23 42 / 18%);
  backdrop-filter: blur(4px);
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.vu-two-d-variant-arrow:hover {
  background: rgb(255 255 255 / 96%);
}

.vu-two-d-variant-arrow--prev {
  left: 10px;
}

.vu-two-d-variant-arrow--next {
  right: 10px;
}

.vu-two-d-variant-status {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 2;
  display: flex;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.vu-two-d-variant-label {
  border-radius: 9999px;
  background: rgb(15 23 42 / 72%);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #f8fafc;
}

.vu-two-d-variant-dots {
  display: flex;
  gap: 6px;
}

.vu-two-d-variant-dot {
  width: 8px;
  height: 8px;
  border: 1px solid rgb(15 23 42 / 25%);
  border-radius: 9999px;
  background: rgb(255 255 255 / 70%);
  padding: 0;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.vu-two-d-variant-dot[aria-current="true"] {
  border-color: #0f172a;
  background: #0f172a;
}

@media (prefers-reduced-motion: reduce) {
  .vu-two-d-variant-arrow,
  .vu-two-d-variant-dot {
    transition: none;
  }
}

/*
 * PersonalizationElement shopper panel.
 *
 * Deliberately unlayered: hosts embed the panel inside their own Tailwind
 * (or similar) preflight, and a layered block loses to any unlayered host
 * reset — and to a layered one whenever the host sheet is parsed first and
 * claims the earlier layer position. Unlayered rules keep chips, swatches,
 * switches, and inputs intact wherever the panel mounts. Every control also
 * restates the properties preflight resets (appearance, background, border,
 * font, margin) so nothing depends on inheriting host defaults.
 */

.customizer-personalization-element,
.customizer-personalization-element *,
.customizer-personalization-element *::before,
.customizer-personalization-element *::after,
.vu-two-d-preview-host,
.vu-two-d-preview-host *,
.vu-two-d-preview-host *::before,
.vu-two-d-preview-host *::after {
  box-sizing: border-box;
}

.customizer-personalization-element button,
.vu-two-d-preview-host button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.customizer-personalization-element svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.customizer-personalization-element {
  overflow: hidden;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: var(--customizer-personalization-radius);
  background: var(--customizer-personalization-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  /* Hosts wrap the customizer in their own centering utility (Bootstrap
   * `.text-center`, for one), which would centre every field label. */
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
  color: var(--customizer-personalization-fg);
}

.customizer-personalization-element .customizer-element-title {
  margin: 0;
  padding: 12px 16px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  color: var(--customizer-personalization-fg);
}

/* An empty title would otherwise pad the top of the card for nothing. */
.customizer-personalization-element .customizer-element-title:empty {
  display: none;
}

.customizer-personalization-body {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 0;
}

/* Only a divider once there is a header above it to divide from. */
.customizer-personalization-element
  .customizer-element-title:not(:empty)
  + .customizer-personalization-body {
  border-top: 1px solid var(--customizer-personalization-border);
}

.customizer-personalization-alert {
  margin: 0;
}

.customizer-personalization-alert:not(:empty) {
  border: 1px solid
    color-mix(
      in srgb,
      var(--customizer-personalization-destructive) 25%,
      transparent
    );
  border-radius: 6px;
  background: var(--customizer-personalization-destructive-bg);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--customizer-personalization-destructive);
}

.customizer-personalization-field,
.customizer-personalization-pane,
.customizer-personalization-transform {
  display: grid;
  gap: 6px;
}

.customizer-personalization-pane,
.customizer-personalization-transform {
  gap: 16px;
}

.customizer-personalization-label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-input,
.customizer-personalization-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 36px;
  margin: 0;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: 6px;
  background: var(--customizer-personalization-bg);
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--customizer-personalization-fg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.customizer-personalization-select {
  padding-right: 32px;
  background-image: linear-gradient(
      45deg,
      transparent 50%,
      var(--customizer-personalization-muted-fg) 50%
    ),
    linear-gradient(
      135deg,
      var(--customizer-personalization-muted-fg) 50%,
      transparent 50%
    );
  background-position:
    calc(100% - 18px) 15px,
    calc(100% - 13px) 15px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.customizer-personalization-input-narrow {
  width: 96px;
}

.customizer-personalization-input:focus-visible,
.customizer-personalization-select:focus-visible {
  border-color: var(--customizer-personalization-primary);
  outline: none;
  box-shadow: 0 0 0 3px
    color-mix(
      in srgb,
      var(--customizer-personalization-primary) 25%,
      transparent
    );
}

.customizer-personalization-input[aria-invalid="true"] {
  border-color: var(--customizer-personalization-destructive);
}

.customizer-personalization-input::placeholder {
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-input.customizer-personalization-monogram {
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.customizer-personalization-segment {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: var(--customizer-personalization-radius-md);
  background: color-mix(
    in srgb,
    var(--customizer-personalization-muted) 60%,
    transparent
  );
  padding: 4px;
}

.customizer-personalization-segment-option {
  display: inline-flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--customizer-personalization-muted-fg);
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.customizer-personalization-segment-option:hover {
  color: var(--customizer-personalization-fg);
}

/* The editor shows one content type at a time, so a validation message naming
   another type needs a visible pointer to it on the picker. */
.customizer-personalization-segment-option[aria-invalid="true"] {
  color: var(--customizer-personalization-destructive);
  box-shadow: inset 0 0 0 1px var(--customizer-personalization-destructive);
}

.customizer-personalization-segment-option[aria-pressed="true"] {
  background: var(--customizer-personalization-bg);
  color: var(--customizer-personalization-fg);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--customizer-personalization-primary) 30%,
        transparent
      );
}

/* Keep the original horizontal segment. The wrapper only exists so Remove can
   sit on an active type without nesting a button inside the type button. */
.customizer-personalization-kind-item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: stretch;
  border-radius: 6px;
}

.customizer-personalization-kind-item[data-active="true"] {
  background: var(--customizer-personalization-bg);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--customizer-personalization-primary) 30%,
        transparent
      );
}

.customizer-personalization-kind-item[data-active="true"][data-focused="true"] {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 0 0 2px var(--customizer-personalization-primary);
}

.customizer-personalization-kind-item
  .customizer-personalization-segment-option[aria-pressed="true"] {
  background: transparent;
  box-shadow: none;
}

.customizer-personalization-kind-remove {
  display: inline-flex;
  flex-shrink: 0;
  width: 26px;
  align-items: center;
  justify-content: center;
  margin: 2px 2px 2px 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 0;
  color: var(--customizer-personalization-muted-fg);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.customizer-personalization-kind-remove:hover {
  background: color-mix(
    in srgb,
    var(--customizer-personalization-muted) 80%,
    transparent
  );
  color: var(--customizer-personalization-fg);
}

.customizer-personalization-kind-remove svg {
  width: 12px;
  height: 12px;
}

/*
 * Stack-order control. Laid out as a vertical list on purpose: the rows read
 * top-to-bottom in the same direction as the stack they describe on the
 * product, so "move up" needs no explaining.
 */
.customizer-personalization-order {
  display: grid;
  gap: 4px;
}

.customizer-personalization-order-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: var(--customizer-personalization-radius-md);
  background: var(--customizer-personalization-bg);
  padding: 4px;
}

/*
 * Drag handle. `touch-action: none` is what makes a touch drag possible at all:
 * without it the browser claims the gesture for scrolling and no pointermove
 * ever reaches the row.
 */
.customizer-personalization-order-handle {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 0;
  color: var(--customizer-personalization-muted-fg);
  cursor: grab;
  touch-action: none;
}

.customizer-personalization-order-row[data-dragging="true"]
  .customizer-personalization-order-handle {
  cursor: grabbing;
}

.customizer-personalization-order-handle svg {
  width: 14px;
  height: 14px;
  stroke-linecap: round;
}

/* Lifted off the list so it is obvious which row is travelling. */
.customizer-personalization-order-row[data-dragging="true"] {
  border-color: color-mix(
    in srgb,
    var(--customizer-personalization-primary) 45%,
    var(--customizer-personalization-border)
  );
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.customizer-personalization-order-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-order-icon svg {
  width: 14px;
  height: 14px;
}

.customizer-personalization-order-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.customizer-personalization-order-move {
  display: inline-flex;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 0;
  color: var(--customizer-personalization-muted-fg);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.customizer-personalization-order-move:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--customizer-personalization-muted) 80%,
    transparent
  );
  color: var(--customizer-personalization-fg);
}

/* Dead at the ends of the stack, and visibly so. */
.customizer-personalization-order-move:disabled {
  opacity: 0.35;
  cursor: default;
}

.customizer-personalization-order-move svg {
  width: 14px;
  height: 14px;
}

.customizer-personalization-segment-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customizer-personalization-segment-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  opacity: 0.85;
}

.customizer-personalization-segment-icon:empty {
  display: none;
}

.customizer-personalization-rotation-icon {
  transform: rotate(var(--customizer-personalization-rotation, 0deg));
}

.customizer-personalization-chips,
.customizer-personalization-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.customizer-personalization-chip {
  display: inline-flex;
  min-width: 44px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: 9999px;
  background: var(--customizer-personalization-bg);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--customizer-personalization-muted-fg);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.customizer-personalization-chip:hover {
  background: color-mix(
    in srgb,
    var(--customizer-personalization-muted) 70%,
    transparent
  );
  color: var(--customizer-personalization-fg);
}

.customizer-personalization-chip[aria-pressed="true"] {
  border-color: var(--customizer-personalization-primary);
  background: var(--customizer-personalization-primary);
  color: var(--customizer-personalization-primary-fg);
}

.customizer-personalization-swatch {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--customizer-personalization-border);
  border-radius: 9999px;
  background: var(--customizer-personalization-swatch-color, #111111);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  padding: 0;
}

.customizer-personalization-swatch[aria-pressed="true"] {
  border-color: var(--customizer-personalization-fg);
  box-shadow: 0 0 0 3px
    color-mix(
      in srgb,
      var(--customizer-personalization-primary) 20%,
      transparent
    );
}

.customizer-personalization-swatch-check {
  display: none;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: color-mix(
    in srgb,
    var(--customizer-personalization-bg) 92%,
    transparent
  );
  padding: 3px;
  color: var(--customizer-personalization-fg);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.12);
}

.customizer-personalization-swatch[aria-pressed="true"]
  .customizer-personalization-swatch-check {
  display: inline-flex;
}

.customizer-personalization-outline {
  display: grid;
  gap: 12px;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: var(--customizer-personalization-radius);
  background: color-mix(
    in srgb,
    var(--customizer-personalization-muted) 40%,
    transparent
  );
  padding: 12px;
}

.customizer-personalization-outline-controls {
  display: grid;
  gap: 12px;
}

.customizer-personalization-outline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customizer-personalization-outline-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--customizer-personalization-fg);
}

.customizer-personalization-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--customizer-personalization-border);
  padding: 0;
  transition: background-color 0.15s ease;
}

.customizer-personalization-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: var(--customizer-personalization-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
  transition: transform 0.15s ease;
}

.customizer-personalization-toggle[aria-checked="true"] {
  background: var(--customizer-personalization-primary);
}

.customizer-personalization-toggle[aria-checked="true"]::after {
  transform: translateX(16px);
}

.customizer-personalization-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: var(--customizer-personalization-radius);
  background: color-mix(
    in srgb,
    var(--customizer-personalization-muted) 30%,
    transparent
  );
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.customizer-personalization-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--customizer-personalization-border);
  background: var(--customizer-personalization-bg);
  padding: 10px 12px;
}

.customizer-personalization-card-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--customizer-personalization-radius-md);
  background: color-mix(
    in srgb,
    var(--customizer-personalization-primary) 14%,
    transparent
  );
  padding: 6px;
  color: color-mix(
    in srgb,
    var(--customizer-personalization-primary) 75%,
    #000000
  );
}

.customizer-personalization-card-copy {
  min-width: 0;
}

.customizer-personalization-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--customizer-personalization-fg);
}

.customizer-personalization-card-desc {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-setting-title {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--customizer-personalization-fg);
}

.customizer-personalization-card-body {
  display: grid;
  padding: 0 12px;
}

.customizer-personalization-card-row {
  display: grid;
  gap: 10px;
  padding: 12px 0;
}

.customizer-personalization-card-row + .customizer-personalization-card-row {
  border-top: 1px solid var(--customizer-personalization-border);
}

.customizer-personalization-switch-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.customizer-personalization-switch-row .customizer-personalization-card-copy {
  flex: 1 1 auto;
}

.customizer-personalization-switch-row .customizer-personalization-toggle {
  margin-top: 4px;
}

.customizer-personalization-switch-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: var(--customizer-personalization-radius-md);
  background: var(--customizer-personalization-bg);
  padding: 6px;
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-subcard {
  display: grid;
  gap: 8px;
  justify-items: start;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: var(--customizer-personalization-radius-md);
  background: var(--customizer-personalization-bg);
  padding: 12px;
}

.customizer-personalization-subcard-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customizer-personalization-output {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background: color-mix(
    in srgb,
    var(--customizer-personalization-primary) 14%,
    transparent
  );
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: color-mix(
    in srgb,
    var(--customizer-personalization-primary) 75%,
    #000000
  );
}

.customizer-personalization-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  border: 0;
  background: linear-gradient(
      to right,
      var(--customizer-personalization-primary) 0,
      var(--customizer-personalization-primary)
        var(--customizer-personalization-range-position, 0%),
      var(--customizer-personalization-border)
        var(--customizer-personalization-range-position, 0%),
      var(--customizer-personalization-border) 100%
    )
    center / 100% 6px no-repeat;
  cursor: pointer;
}

.customizer-personalization-range::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

.customizer-personalization-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 2px solid var(--customizer-personalization-bg);
  border-radius: 9999px;
  background: var(--customizer-personalization-primary);
  box-shadow: 0 0 0 1px var(--customizer-personalization-primary);
}

.customizer-personalization-range::-moz-range-track {
  height: 6px;
  background: transparent;
}

.customizer-personalization-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--customizer-personalization-bg);
  border-radius: 9999px;
  background: var(--customizer-personalization-primary);
  box-shadow: 0 0 0 1px var(--customizer-personalization-primary);
}

.customizer-personalization-range-scale {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 500;
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.customizer-personalization-icon {
  display: flex;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: var(--customizer-personalization-radius-md);
  background: var(--customizer-personalization-bg);
  padding: 8px;
  color: var(--customizer-personalization-fg);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.customizer-personalization-icon:hover {
  border-color: color-mix(
    in srgb,
    var(--customizer-personalization-primary) 60%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--customizer-personalization-muted) 45%,
    transparent
  );
}

.customizer-personalization-icon[aria-pressed="true"] {
  border-color: var(--customizer-personalization-primary);
  background: color-mix(
    in srgb,
    var(--customizer-personalization-primary) 10%,
    transparent
  );
  box-shadow: 0 0 0 2px
    color-mix(
      in srgb,
      var(--customizer-personalization-primary) 25%,
      transparent
    );
}

.customizer-personalization-icon-clear {
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-icon-placeholder {
  display: block;
  width: 28px;
  height: 28px;
  border: 1px dashed currentColor;
  border-radius: 6px;
  opacity: 0.5;
}

.customizer-personalization-icon-image {
  width: 100%;
  height: 100%;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
}

.customizer-personalization-icon-glyph {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-icon-glyph:empty {
  display: none;
}

.customizer-personalization-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-combo svg,
.customizer-personalization-combo-panel svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.customizer-personalization-combo {
  position: relative;
  width: 100%;
}

.customizer-personalization-combo-trigger {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: 6px;
  background: var(--customizer-personalization-bg);
  padding: 4px 10px 4px 12px;
  color: var(--customizer-personalization-fg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  text-align: left;
}

.customizer-personalization-combo-trigger:focus-visible,
.customizer-personalization-combo-trigger.is-open {
  border-color: var(--customizer-personalization-primary);
  outline: none;
  box-shadow: 0 0 0 3px
    color-mix(
      in srgb,
      var(--customizer-personalization-primary) 25%,
      transparent
    );
}

.customizer-personalization-combo-trigger-body {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 8px;
}

.customizer-personalization-combo-trigger-body.customizer-personalization-combo-placeholder {
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-combo-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.4;
}

.customizer-personalization-combo-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-combo-trigger.is-open
  .customizer-personalization-combo-chevron {
  transform: rotate(180deg);
}

/* `display: flex` below outranks the UA `[hidden]` rule, so state it here. */
.customizer-personalization-combo-panel[hidden] {
  display: none;
}

.customizer-personalization-combo-panel {
  --customizer-personalization-bg: #ffffff;
  --customizer-personalization-fg: #0f172a;
  --customizer-personalization-muted: #f1f5f9;
  --customizer-personalization-muted-fg: #64748b;
  --customizer-personalization-border: #e2e8f0;
  --customizer-personalization-primary: #90bd3d;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--customizer-personalization-border);
  border-radius: 8px;
  background: var(--customizer-personalization-bg);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
  color: var(--customizer-personalization-fg);
  font: 14px/1.4 inherit;
}

.customizer-personalization-combo-search {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--customizer-personalization-border);
  padding: 8px 12px;
}

.customizer-personalization-combo-search-icon,
.customizer-personalization-combo-check {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-combo-search-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  outline: none;
}

.customizer-personalization-combo-search-input::placeholder {
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-combo-list {
  overflow: auto;
  padding: 4px;
}

.customizer-personalization-combo-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 8px 10px;
  color: inherit;
  text-align: left;
}

.customizer-personalization-combo-option.is-highlight,
.customizer-personalization-combo-option:hover {
  background: var(--customizer-personalization-muted);
}

.customizer-personalization-combo-option[aria-selected="true"] {
  font-weight: 600;
}

.customizer-personalization-combo-description {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--customizer-personalization-muted-fg);
}

.customizer-personalization-combo-check {
  margin-left: auto;
  color: var(--customizer-personalization-primary);
}

.customizer-personalization-combo-empty {
  margin: 0;
  padding: 16px 12px;
  color: var(--customizer-personalization-muted-fg);
  font-size: 13px;
}

.customizer-personalization-combo-preview,
.customizer-personalization-combo-preview-sm {
  display: block;
  flex: 0 0 auto;
  height: 28px;
  width: 72px;
  object-fit: contain;
  object-position: left center;
  background: color-mix(
    in srgb,
    var(--customizer-personalization-muted) 70%,
    transparent
  );
  border-radius: 4px;
}

.customizer-personalization-combo-preview-sm {
  height: 22px;
  width: 56px;
}

.customizer-personalization-combo-swatch,
.customizer-personalization-combo-swatch-sm {
  display: inline-flex;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 2px solid var(--customizer-personalization-border);
  border-radius: 9999px;
  background: var(--customizer-personalization-swatch-color, #111111);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.customizer-personalization-combo-swatch-sm {
  width: 18px;
  height: 18px;
}

.customizer-personalization-hex-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.customizer-personalization-hex-picker-swatch {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid var(--customizer-personalization-border);
  border-radius: 9999px;
  background: var(--customizer-personalization-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  cursor: pointer;
}

.customizer-personalization-hex-picker-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000000;
}

.customizer-personalization-hex-picker-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.customizer-personalization-hex-picker-input {
  flex: 1;
  min-width: 0;
  font-variant-ligatures: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.customizer-personalization-element.customizer-disabled {
  opacity: 0.5;
  pointer-events: none;
}