body[data-ui-deco-color="accent-1"] { --deco-color: var(--color-accent-1); }
body[data-ui-deco-color="accent-2"] { --deco-color: var(--color-accent-2); }
body[data-ui-deco-color="foreground"] { --deco-color: var(--color-foreground); }


:root {
  --deco-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --deco-inset-highlight-hover: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}



body[data-ui-deco-buttons="gradient"] .btn--primary {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--button-primary-bg) 88%, white),
    color-mix(in srgb, var(--button-primary-bg) 80%, black)
  );
}
body[data-ui-deco-buttons="gradient"] .btn--primary:hover {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--button-primary-bg-hover) 88%, white),
    color-mix(in srgb, var(--button-primary-bg-hover) 80%, black)
  );
}

body[data-ui-deco-buttons="gradient"] .btn--secondary {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--button-secondary-bg) 88%, white),
    color-mix(in srgb, var(--button-secondary-bg) 80%, black)
  );
}
body[data-ui-deco-buttons="gradient"] .btn--secondary:hover {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--button-secondary-bg-hover) 88%, white),
    color-mix(in srgb, var(--button-secondary-bg-hover) 80%, black)
  );
}


body[data-ui-deco-buttons="brick"] :is(.btn--primary, .btn--secondary) {
  border-block-end: 3px solid color-mix(in srgb, rgb(var(--deco-color)) 80%, black);
  box-shadow: 0 2px 0 color-mix(in srgb, rgb(var(--deco-color)) 60%, black);
}

body[data-ui-deco-buttons="brick"] .btn:hover {
  transform: translateY(1px);
  box-shadow: 0 1px 0 color-mix(in srgb, rgb(var(--deco-color)) 60%, black);
}

body[data-ui-deco-buttons="brick"] .btn:active {
  scale: none;
  transform: translateY(3px);
  box-shadow: none;
  border-block-end-width: 0;
}


body[data-ui-deco-buttons="ghost"] .btn--secondary {
  background-color: transparent;
  color: var(--button-secondary-bg);
  border: 2px solid var(--button-secondary-bg);
}
body[data-ui-deco-buttons="ghost"] .btn--secondary:hover {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-color);
}


body[data-ui-deco-buttons="bubble"] :is(.btn--primary, .btn--secondary) {
  box-shadow:
    0 2px 8px rgba(var(--color-shadow), 0.1),
    var(--deco-inset-highlight);
  border: none;
}

body[data-ui-deco-buttons="bubble"] :is(.btn--primary, .btn--secondary):hover {
  box-shadow:
    0 4px 16px rgba(var(--color-shadow), 0.15),
    var(--deco-inset-highlight-hover);
}


body[data-ui-deco-buttons="glow"] :is(.btn--primary, .btn--secondary) {
  box-shadow: 0 0 var(--glow-size) rgba(var(--glow-color), var(--glow-opacity));
}

body[data-ui-deco-buttons="glow"] :is(.btn--primary, .btn--secondary):hover {
  box-shadow: 0 0 calc(var(--glow-size) * 1.4) rgba(var(--glow-color), calc(var(--glow-opacity) + 0.2));
}


body[data-ui-deco-buttons="brick"][data-ui-deco-buttons-nav] :is(.scale-slider__arrow, .product-media-gallery__arrow) {
  border-block-end: 3px solid color-mix(in srgb, rgb(var(--deco-color)) 80%, black);
  box-shadow: 0 2px 0 color-mix(in srgb, rgb(var(--deco-color)) 60%, black);
}

body[data-ui-deco-buttons="bubble"][data-ui-deco-buttons-nav] :is(.scale-slider__arrow, .product-media-gallery__arrow) {
  box-shadow:
    0 2px 8px rgba(var(--color-shadow), 0.1),
    var(--deco-inset-highlight);
}




body[data-buttons-hover="lighter"] :is(.btn--primary, .btn--secondary):hover {
  filter: brightness(1.15);
}


body[data-buttons-hover="fill-slide"] :is(.btn--primary, .btn--secondary)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--color-foreground), 0.12);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--duration-normal) var(--ease-out);
  z-index: 0;
}

body[data-buttons-hover="fill-slide"] .btn:hover::before {
  transform: scaleX(1);
}

body[data-buttons-hover="fill-slide"] .btn__label,
body[data-buttons-hover="fill-slide"] .btn .icon {
  position: relative;
  z-index: 1;
}


body[data-buttons-hover="scale"] .btn:hover {
  transform: scale(1.04) translateY(var(--buttons-hover-translate));
}


body[data-buttons-hover="paint"] :is(.btn--primary, .btn--secondary)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--color-foreground), 0.1);
  clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  transition: clip-path var(--duration-normal) var(--ease-out);
  z-index: 0;
}

body[data-buttons-hover="paint"] .btn:hover::before {
  clip-path: polygon(-5% -5%, 105% -5%, 105% 105%, -5% 105%);
}

body[data-buttons-hover="paint"] .btn__label,
body[data-buttons-hover="paint"] .btn .icon {
  position: relative;
  z-index: 1;
}


body[data-buttons-hover="magnetic"] .btn {
  transform: none;
  translate: var(--mx, 0px) var(--my, 0px);
}

body[data-buttons-hover="magnetic"] .btn__label {
  translate: calc(var(--mx, 0px) * 0.15) calc(var(--my, 0px) * 0.15);
}


body[data-buttons-hover="text-roll"] {
  --roll-x: 0%;
  --roll-y: -100%;
}

body[data-buttons-hover="text-roll"][data-buttons-roll-dir="down"] {
  --roll-y: 100%;
}

body[data-buttons-hover="text-roll"][data-buttons-roll-dir="left"] {
  --roll-x: -100%;
  --roll-y: 0%;
}

body[data-buttons-hover="text-roll"][data-buttons-roll-dir="right"] {
  --roll-x: 100%;
  --roll-y: 0%;
}

body[data-buttons-hover="text-roll"] .btn:has(.btn__inner) {
  padding: 0;
}

body[data-buttons-hover="text-roll"] .btn__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
  padding: var(--button-padding-block) var(--button-padding-inline);
  transition: transform var(--duration-normal) var(--ease-out);
}

body[data-buttons-hover="text-roll"] .btn__clone {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
  padding: var(--button-padding-block) var(--button-padding-inline);
  transform: translate(calc(-1 * var(--roll-x)), calc(-1 * var(--roll-y)));
  transition: transform var(--duration-normal) var(--ease-out);
}

body[data-buttons-hover="text-roll"] .btn:hover .btn__inner {
  transform: translate(var(--roll-x), var(--roll-y));
}

body[data-buttons-hover="text-roll"] .btn:hover .btn__clone {
  transform: translate(0, 0);
}



body[data-ui-deco-inputs="outlined"] :is(.field__input, textarea, select) {
  background-color: transparent;
  border: 1px solid rgba(var(--color-border), 0.6);
}


body[data-ui-deco-inputs="framed"] :is(.field__input, textarea, select) {
  background-color: rgba(var(--color-foreground), 0.02);
  border: 2px solid rgba(var(--color-border), 0.4);
}


body[data-ui-deco-inputs="lifted"] :is(.field__input, textarea, select) {
  background-color: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-border), 0.15);
  box-shadow: 0 2px 8px rgba(var(--color-shadow), 0.08);
}


body[data-ui-deco-inputs="retro"] :is(.field__input, textarea, select) {
  background-color: rgb(var(--color-background));
  border: 2px solid rgb(var(--color-foreground));
  box-shadow: 3px 3px 0 rgb(var(--deco-color));
}

body[data-ui-deco-inputs="retro"] :is(.field__input, textarea, select):focus-visible {
  box-shadow: 2px 2px 0 rgb(var(--deco-color));
  transform: translate(1px, 1px);
}



body[data-ui-deco-surfaces="outlined"] .surface {
  border: 1px solid rgba(var(--color-border), 0.3);
  box-shadow: none;
}


body[data-ui-deco-surfaces="shadow"] .surface {
  border: none;
  box-shadow: var(--shadow-card);
}


body[data-ui-deco-surfaces="brick"] .surface {
  border: 2px solid rgba(var(--color-foreground), 0.1);
  box-shadow: 4px 4px 0 rgb(var(--deco-color));
}


body[data-ui-deco-surfaces="soft"] .surface {
  border: 1px solid rgba(var(--color-border), 0.12);
  box-shadow: 0 1px 4px rgba(var(--color-shadow), 0.06);
}


body[data-ui-deco-surfaces="glass"] .surface {
  background: rgba(var(--color-background), 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--color-foreground), 0.08);
  box-shadow: 0 4px 20px rgba(var(--color-shadow), 0.06);
}


body[data-ui-deco-surfaces="glow"] .surface {
  border: 1px solid rgba(var(--glow-color), 0.25);
  box-shadow: 0 0 var(--glow-size) rgba(var(--glow-color), var(--glow-opacity));
}



body[data-media-deco="outlined"] :is(.image-wrapper, .product-media) {
  position: relative;
}

body[data-media-deco="outlined"] :is(.image-wrapper, .product-media)::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--color-border), 0.3);
  border-radius: inherit;
  pointer-events: none;
}


body[data-media-deco="framed"] :is(.image-wrapper, .product-media) {
  border: 3px solid rgba(var(--color-foreground), 0.15);
  padding: 4px;
  background: rgb(var(--color-background));
}

body[data-media-deco="framed"] :is(.image-wrapper, .product-media) :is(.image-wrapper__img, img) {
  border-radius: calc(var(--img-radius, var(--radius-media)) - 4px);
}


body[data-media-deco="lifted"] :is(.image-wrapper, .product-media) {
  box-shadow: 0 6px 20px rgba(var(--color-shadow), 0.12);
}


body[data-media-deco="retro"] :is(.image-wrapper, .product-media) {
  border: 2px solid rgb(var(--color-foreground));
  box-shadow: 5px 5px 0 rgb(var(--deco-color));
}


body[data-media-deco="glow"] :is(.image-wrapper, .product-media) {
  filter: drop-shadow(0 0 calc(var(--glow-size) * 0.6) rgba(var(--glow-color), var(--glow-opacity)));
}

body[data-media-deco] .product-media-gallery[data-media-deco="none"] .product-media {
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  filter: none;
}

body[data-media-deco] .product-media-gallery[data-media-deco="none"] .product-media::after {
  content: none;
}

body[data-media-deco] .product-media-gallery[data-media-deco="none"] .product-media :is(.image-wrapper__img, img) {
  border-radius: 0;
}


@media (prefers-reduced-motion: reduce) {
  body[data-buttons-hover] .btn::before {
    transition: none;
    animation: none;
  }
  body[data-buttons-hover="scale"] .btn:hover {
    transform: none;
  }
  body[data-buttons-hover="magnetic"] .btn,
  body[data-buttons-hover="magnetic"] .btn__label {
    translate: none;
  }
  body[data-buttons-hover="text-roll"] .btn__inner,
  body[data-buttons-hover="text-roll"] .btn__clone {
    transition: none;
  }
  body[data-buttons-hover="text-roll"] .btn:hover .btn__inner,
  body[data-buttons-hover="text-roll"] .btn:hover .btn__clone {
    transform: none;
  }
}

@media (forced-colors: active) {
  body[data-ui-deco-buttons] .btn,
  body[data-ui-deco-inputs] :is(.field__input, textarea, select) {
    border: 1px solid transparent;
  }

  body[data-ui-deco-surfaces] .surface {
    border: 1px solid transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-texture="grain"] [class*="color-"]::after {
    content: none;
  }
}